/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 * macro: woo-integrated catalog archive · theme: Connect Brand DNA v3 (locked palette) * nav: canonical Connect chrome (fixed, shrink-on-scroll) · footer: canonical 4-col * states: hover/focus/active on all interactive atoms · contrast: AA pass */ /* ========================================================= CONNECT BRAND TOKENS — verbatim from 01-brand-tokens.md ========================================================= */ :root { --base: #F7F2E9; --surface: #EFE8DA; --elev: #FCF8F0; --neon: #C8902F; --amber: #C8902F; --grad-top: #B97338; --grad-mid: #C67E34; --grad-bot: #D49445; --logo-grad: linear-gradient(180deg,#B97338,#C67E34 55%,#D49445); --node-l: #E7B86A; --node-d: #AB5E2A; --w: #563F25; --w70: #64492B; --w50: #7F5E39; --w30: rgba(86,63,37,.42); --line: rgba(86,63,37,.20); --neon-glow: rgba(200,144,47,.28); --neon-dim: rgba(200,144,47,.12); --neon-border: rgba(200,144,47,.45); --amber-glow: rgba(200,144,47,.26); --amber-dim: rgba(200,144,47,.12); --bd: 1.5px; --r: 16px; --r-sm: 12px; } /* ========================================================= RESET & BASE ========================================================= */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{overflow-x:clip} body{ font-family:'Outfit',sans-serif;font-weight:400;font-size:16px;line-height:1.6; color:var(--w);background:var(--base);-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none} /* ========================================================= NOISE OVERLAY ========================================================= */ .noise{ position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.045; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================= ADDITIVE CURSOR — fine-pointer + motion-safe only ========================================================= */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;display:none} .cursor-dot{width:7px;height:7px;background:var(--neon);box-shadow:0 0 8px var(--neon-glow)} .cursor-ring{width:36px;height:36px;border:1.5px solid var(--neon-border);transition:width .25s,height .25s,border-color .25s,background .25s} .cursor-ring.hot{width:60px;height:60px;background:var(--neon-dim);border-color:transparent} @media(pointer:fine) and (prefers-reduced-motion:no-preference){.show-cursor .cursor-dot,.show-cursor .cursor-ring{display:block}} /* ========================================================= TYPOGRAPHY UTILITIES ========================================================= */ .gx{ background:var(--logo-grad);-webkit-background-clip:text; background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } .hw{ font-family:'Dancing Script',cursive;font-weight:700;color:var(--amber); text-shadow:0 0 18px var(--amber-glow);display:inline-block;line-height:1; white-space:nowrap; } /* ========================================================= LAYOUT UTILITIES ========================================================= */ .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .pad{padding:112px 0} .bg-surface{background:var(--surface)} /* ========================================================= SKIP LINK ========================================================= */ .skip-link{position:absolute;top:-9999px;left:16px;background:var(--neon);color:#231A0A; padding:8.8px 16px;border-radius:6px;font-weight:700;z-index:10001;text-decoration:none; font-family:'Space Grotesk',sans-serif} .skip-link:focus{top:8px} /* ========================================================= BUTTONS ========================================================= */ .btn-cyber { position:relative;z-index:0;isolation:isolate; background:transparent;color:var(--neon);border:var(--bd) solid var(--neon); padding:16px 40px;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:14.08px;letter-spacing:.05em;text-transform:uppercase;overflow:hidden; transition:color .3s,box-shadow .3s;display:inline-flex;align-items:center; gap:8.8px;cursor:pointer;text-decoration:none;border-radius:0; } .btn-cyber::before { content:'';position:absolute;inset:0;background:var(--neon); transform:scaleX(0);transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1; } .btn-cyber:hover { color:#231A0A; box-shadow:0 0 26px var(--neon-glow); } .btn-cyber:hover::before { transform:scaleX(1); transform-origin:left; } .btn-cyber.fill { background:var(--neon); color:#231A0A; } .btn-ghost { color:var(--w);font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:13.12px;letter-spacing:.1em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px; transition:color .25s,gap .25s;min-height:44px;text-decoration:none; } .btn-ghost:hover { color:var(--amber); gap:12.8px; } .btn-ghost .a { color:var(--amber); } /* ========================================================= NAV — identical to homepage chrome ========================================================= */ .nav-bg{position:fixed;inset:0 0 auto 0;height:74px;z-index:99; transition:background .3s,border-color .3s} .nav-bg.scrolled{background:rgba(247,242,233,.95)} body.nav-shrink nav[aria-label="Primary"]{height:60px} body.nav-shrink .nav-bg{height:60px;box-shadow:0 10px 30px -20px rgba(86,63,37,.5)} nav[aria-label="Primary"]{ position:fixed;top:0;left:0;right:0;height:74px;z-index:100; display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:24px;padding:0 24px;max-width:1240px;margin:0 auto; transition:height .3s cubic-bezier(.4,0,.2,1); } .logo svg{height:clamp(44px,4.5vw,54px);width:auto;display:block} .nav-links{display:flex;gap:35.2px;align-items:center;justify-content:center} .nav-links a{ font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14.4px; letter-spacing:.14em;text-transform:uppercase;color:var(--w); text-decoration:none;transition:color .2s;position:relative; } .nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px; background:var(--neon);transition:width .3s} .nav-links a:hover,.nav-links a.current{color:var(--neon)} .nav-links a:hover::after,.nav-links a.current::after{width:100%} .nav-tools{display:flex;align-items:center;gap:11.2px} .nav-search{ display:flex;align-items:center;gap:6.4px;border-radius:999px;background:var(--elev); border:var(--bd) solid var(--line);padding:5.6px 12.8px; width:188px;transition:width .3s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s; } .nav-search:focus-within{width:248px;border-color:var(--neon-border); box-shadow:0 0 0 4px var(--neon-dim)} .nav-search svg{width:16px;height:16px;stroke:var(--w50);stroke-width:2;fill:none;flex-shrink:0} .nav-search input[type="search"]{ background:transparent;border:none;outline:none;font-family:'Outfit',sans-serif; font-size:13.6px;color:var(--w);width:100%; } .nav-search input::placeholder{color:var(--w50)} .nav-ic{ width:40px;height:40px;border-radius:50%;border:var(--bd) solid var(--line); background:var(--elev);display:flex;align-items:center;justify-content:center; color:var(--w);transition:border-color .2s,transform .2s,box-shadow .2s;position:relative; } .nav-ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none} .nav-ic:hover{border-color:var(--neon);transform:translateY(-2px);box-shadow:0 8px 18px -10px var(--neon-glow)} .nav-badge{ position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:50%; background:var(--neon);color:#231A0A;font-family:'Space Grotesk',sans-serif; font-size:9.6px;font-weight:700;display:flex;align-items:center;justify-content:center; border:2px solid var(--elev);animation:navpop .5s cubic-bezier(.34,1.56,.64,1) .35s both; } @keyframes navpop{0%{transform:scale(0)}100%{transform:scale(1)}} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:101} .hamburger span{display:block;width:24px;height:2.5px;background:var(--w);border-radius:2px;transition:transform .3s,opacity .3s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;position:fixed;inset:0;background:rgba(247,242,233,.98); z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:38.4px} .mobile-menu.open{display:flex} .mobile-menu a{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px; color:var(--w);text-decoration:none} .mobile-menu a:hover{color:var(--neon)} .mm-search{display:flex;align-items:center;gap:6.4px;border-radius:999px;background:var(--elev); border:var(--bd) solid var(--line);padding:8px 16px;width:280px} .mm-search svg{width:16px;height:16px;stroke:var(--w50);stroke-width:2;fill:none} .mm-search input[type="search"]{background:transparent;border:none;outline:none;font-family:'Outfit',sans-serif;font-size:14.4px;color:var(--w);width:100%} @media(max-width:920px){ .nav-links,.nav-tools{display:none} .hamburger{display:flex} } /* ========================================================= BREADCRUMB ========================================================= */ .woocommerce-breadcrumb{ font-family:'Space Grotesk',sans-serif;font-size:12.48px;letter-spacing:.06em; text-transform:uppercase;color:var(--w50);padding:19.2px 0; } .woocommerce-breadcrumb a{color:var(--w70);transition:color .2s} .woocommerce-breadcrumb a:hover{color:var(--neon)} .woocommerce-breadcrumb .delimiter{margin:0 8px;color:var(--w30)} /* ========================================================= SHOP HERO — compact ========================================================= */ .shop-hero{ position:relative;padding:160px 0 64px;overflow:hidden; background:radial-gradient(110% 90% at 82% 0%,#FFFDF8 0%,var(--base) 60%); } .hero-shapes-left{ position:absolute;top:8%;left:1%;width:340px;max-width:46vw; opacity:.07;pointer-events:none;z-index:1;color:var(--neon); } @media(max-width:920px){.hero-shapes-left{display:none}} .shop-hero h1{ font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:clamp(46.4px,6.2vw,86.4px);letter-spacing:-.035em;line-height:.92; text-transform:uppercase;color:var(--w);margin-bottom:19.2px; } .shop-hero h1 .line{display:block;overflow:hidden} .shop-hero h1 .ln{display:inline-block;transform:translateY(108%); animation:up .9s cubic-bezier(.16,1,.3,1) forwards} .shop-hero h1 .ln:nth-child(2){animation-delay:.16s} @keyframes up{to{transform:none}} .shop-hero .lead{ font-size:clamp(16.8px,1.4vw,20px);color:var(--w70);max-width:560px; line-height:1.55;margin-bottom:32px; } /* ========================================================= ARCHIVE LAYOUT — mirrors WooCommerce + Woostify structure ========================================================= */ .connect-shop-wrap{ display:grid; grid-template-columns:1fr 260px; gap:40px; max-width:1240px;margin:0 auto;padding:0 24px 96px; } @media(max-width:920px){ .connect-shop-wrap{grid-template-columns:1fr} } /* ========================================================= WOOSTIFY SORTING TOOLBAR ========================================================= */ .woostify-sorting{ display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;padding:24px 0;border-bottom:var(--bd) solid var(--line); } .woostify-toolbar-left{display:flex;align-items:center;gap:16px} .woocommerce-result-count{ font-family:'Space Grotesk',sans-serif;font-size:13.12px;color:var(--w50);letter-spacing:.02em; } .woocommerce-ordering select{ background:var(--elev);border:var(--bd) solid var(--line);border-radius:var(--r-sm); padding:8px 16px;font-family:'Outfit',sans-serif;font-size:14.4px;color:var(--w); cursor:pointer;outline:none;transition:border-color .2s; } .woocommerce-ordering select:focus{border-color:var(--neon-border);box-shadow:0 0 0 3px var(--neon-dim)} /* Mobile filter toggle */ .filter{ display:none;align-items:center;gap:6.4px; font-family:'Space Grotesk',sans-serif;font-size:12.48px;font-weight:700; text-transform:uppercase;letter-spacing:.1em;color:var(--w); background:var(--elev);border:var(--bd) solid var(--line);border-radius:var(--r-sm); padding:7.2px 16px; } .filter svg{width:16px;height:16px;fill:var(--w)} @media(max-width:920px){.filter{display:inline-flex}} /* ========================================================= SIDEBAR WIDGETS ========================================================= */ .widget-area.shop-widget{ display:flex;flex-direction:column;gap:40px; } @media(min-width:921px){ .widget-area.shop-widget{position:sticky;top:100px;align-self:start} } @media(max-width:920px){.widget-area.shop-widget{display:none}} .widget{ background:var(--elev);border:var(--bd) solid var(--line);border-radius:var(--r); padding:24px; } .widget-title{ font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--w50);margin-bottom:22.4px; } /* Price filter */ .widget_price_filter .price_slider_wrapper{display:flex;flex-direction:column;gap:0} .widget_price_filter .price_slider_amount{ display:flex;flex-direction:column;gap:22.4px;align-items:stretch; } .widget_price_filter input[type="text"]{ width:100%;background:var(--base);border:var(--bd) solid var(--line); border-radius:var(--r-sm);padding:9.6px 13.6px;font-family:'Outfit',sans-serif; font-size:13.6px;color:var(--w);text-align:left; transition:border-color .2s,box-shadow .2s; } .widget_price_filter input[type="text"]:focus{ outline:none;border-color:var(--neon); box-shadow:0 0 0 3px rgba(200,144,47,.18); } .widget_price_filter .clear{display:none} .widget_price_filter .button{ position:relative;z-index:0;isolation:isolate; background:transparent;color:var(--neon);border:2px solid var(--neon); padding:8.8px 22.4px;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:12.48px;letter-spacing:.05em;text-transform:uppercase;overflow:hidden; transition:color .3s,box-shadow .3s;display:inline-flex;align-items:center; gap:8.8px;cursor:pointer;text-decoration:none;border-radius:0; align-self:flex-start; } .widget_price_filter .button::before{ content:'';position:absolute;inset:0;background:var(--neon); transform:scaleX(0);transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1; } .widget_price_filter .button:hover { color:#231A0A; box-shadow:0 0 26px var(--neon-glow); } .widget_price_filter .button:hover::before { transform:scaleX(1); transform-origin:left; } /* Product categories */ .widget_product_categories .product-categories{display:flex;flex-direction:column;gap:2.4px} .widget_product_categories .product-categories li{margin:0} .widget_product_categories .product-categories li a{ font-size:14.72px;color:var(--w70);display:flex;align-items:center;gap:8.8px; padding:5.12px 0;transition:color .2s,padding-left .2s;text-decoration:none; } .widget_product_categories .product-categories li a::before{ content:'';width:5px;height:5px;border-radius:50%;background:var(--neon-border); opacity:0;transition:opacity .2s;flex-shrink:0; } .widget_product_categories .product-categories li a:hover{color:var(--neon);padding-left:4.8px} .widget_product_categories .product-categories li a:hover::before{opacity:1} .widget_product_categories .product-categories .count{ font-size:12.48px;color:var(--w50);font-weight:400;margin-left:auto; } /* ========================================================= PRODUCT GRID — exact WooCommerce class names ========================================================= */ ul.products.columns-3.tablet-columns-2.mobile-columns-1{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:32px 0 0; } @media(max-width:920px){ul.products.columns-3.tablet-columns-2.mobile-columns-1{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){ul.products.columns-3.tablet-columns-2.mobile-columns-1{grid-template-columns:1fr}} /* Product card */ li.product{ background:var(--elev);border:var(--bd) solid var(--line);border-radius:var(--r); overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s; display:flex;flex-direction:column; } li.product:hover{border-color:var(--neon-border);transform:translateY(-5px); box-shadow:0 14px 40px rgba(86,63,37,.10),inset 0 0 22px var(--neon-dim)} .product-loop-wrapper{display:flex;flex-direction:column;height:100%} .product-loop-image-wrapper{ position:relative;aspect-ratio:1/1;background:var(--surface);overflow:hidden; display:flex;align-items:center;justify-content:center; } .product-loop-image-wrapper img{ width:100%;height:100%;object-fit:cover;opacity:.9; transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s; } li.product:hover .product-loop-image-wrapper img{transform:scale(1.06);opacity:1} .woostify-tag-on-sale.onsale{ position:absolute;top:12.8px;left:12.8px;z-index:4; font-family:'Space Grotesk',sans-serif;font-size:10.4px;font-weight:700; text-transform:uppercase;letter-spacing:.08em;color:#EFE8DA; background:#C67E34;border:var(--bd) solid rgba(200,144,47,.45); border-radius:50px;padding:3.84px 9.6px; box-shadow:0 2px 6px rgba(0,0,0,.25); } /* Category chip */ .cat-chip{ position:absolute;left:13.6px;bottom:13.6px;z-index:2; font-family:'Space Grotesk',sans-serif;font-size:9.92px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:#EFE8DA; background:#C67E34;border:var(--bd) solid rgba(200,144,47,.45); border-radius:50px;padding:3.84px 9.6px; box-shadow:0 2px 6px rgba(0,0,0,.25); } /* Favourite heart */ .fav-heart{ position:absolute;top:12.8px;right:12.8px;z-index:3; width:36px;height:36px;border-radius:50%; background:rgba(252,248,240,.85);border:var(--bd) solid var(--line); display:flex;align-items:center;justify-content:center; transition:background .2s,transform .2s,border-color .2s; } .fav-heart:hover{background:var(--elev);border-color:var(--neon-border);transform:scale(1.08)} .fav-heart svg{width:18px;height:18px;stroke:var(--w50);stroke-width:2;fill:none;transition:fill .2s,stroke .2s} .fav-heart.active svg{fill:var(--neon);stroke:var(--neon);filter:drop-shadow(0 0 6px var(--neon-glow))} .fav-heart.pop{animation:favpop .4s cubic-bezier(.34,1.56,.64,1)} @keyframes favpop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}} .product-loop-content{ padding:19.2px 22.4px 22.4px; display:flex;flex-direction:column;gap:9.6px;flex:1; text-align:center; } .woocommerce-loop-product__title{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.8px; line-height:1.25;color:var(--w);text-wrap:balance; } .woocommerce-loop-product__title a:hover{color:var(--neon)} /* Honest star ratings */ .star-rating{ display:flex;justify-content:center;gap:2.4px;color:var(--neon);font-size:12.8px;margin:3.2px 0; } .star-rating .star{display:inline-flex} .star-rating .star.empty{opacity:.25} .product-loop-meta{margin-top:auto;padding-top:9.6px} .animated-meta{display:flex;flex-direction:column;align-items:center;gap:9.6px} .price{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18.4px; color:var(--neon);letter-spacing:-.01em; } .price del{ font-size:13.6px;color:var(--w50);font-weight:500;margin-right:6.4px;text-decoration:line-through; } .price ins{text-decoration:none} .price .woocommerce-Price-currencySymbol{margin-right:1.6px} .loop-add-to-cart-btn{ display:inline-flex;align-items:center;gap:6.4px; padding:11.2px 22.4px; background:transparent;color:var(--neon);border:var(--bd) solid var(--neon); font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:12.48px;letter-spacing:.05em;text-transform:uppercase; text-decoration:none;transition:color .3s,background .3s,box-shadow .3s; } .loop-add-to-cart-btn:hover{ background:var(--neon);color:#231A0A; box-shadow:0 0 20px var(--neon-glow); } .loop-add-to-cart-btn svg{width:14px;height:14px;fill:currentColor} /* ========================================================= PAGINATION ========================================================= */ .woocommerce-pagination{ display:flex;align-items:center;justify-content:center;gap:8px; padding:48px 0 0; } .woocommerce-pagination .page-numbers{ display:flex;gap:8px;list-style:none; } .woocommerce-pagination a,.woocommerce-pagination span{ min-width:40px;height:40px;display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-size:13.6px;font-weight:700; border-radius:var(--r-sm);border:var(--bd) solid var(--line);color:var(--w70); transition:all .25s;text-decoration:none; } .woocommerce-pagination a:hover{border-color:var(--neon);color:var(--neon);background:rgba(200,144,47,.06)} .woocommerce-pagination .page-numbers.current{background:var(--neon);color:#231A0A;border-color:var(--neon)} /* ========================================================= FOOTER — identical to homepage chrome ========================================================= */ footer{border-top:var(--bd) solid var(--line);padding:64px 0 32px;background:var(--surface)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px} @media(max-width:600px){.foot-grid{grid-template-columns:1fr 1fr}} .foot-tag{color:var(--w50);font-size:15.2px;margin:12.8px 0 19.2px;max-width:240px} .foot-social{display:flex;gap:11.2px} .foot-social a{width:38px;height:38px;border-radius:50%;border:var(--bd) solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--w70); transition:border-color .2s,color .2s} .foot-social a:hover{border-color:var(--neon);color:var(--neon)} .foot-col h3{font-family:'Space Grotesk',sans-serif;font-size:12.8px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--w50);margin-bottom:19.2px} .foot-col ul{display:flex;flex-direction:column;gap:11.2px} .foot-col a{color:var(--w70);text-decoration:none;font-size:15.2px;transition:color .2s} .foot-col a:hover{color:var(--neon)} .foot-col a.current{color:var(--neon)} .foot-bottom{border-top:var(--bd) solid var(--line);padding-top:25.6px;display:flex; justify-content:space-between;flex-wrap:wrap;gap:9.6px; font-family:'Space Grotesk',sans-serif;font-size:11.2px;letter-spacing:.1em; text-transform:uppercase;color:var(--w50)} /* ========================================================= REVEAL ANIMATIONS ========================================================= */ .js .reveal{opacity:0;transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .js .reveal.in{opacity:1;transform:none} /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .js .reveal{opacity:1!important;transform:none!important} .js .shop-hero h1 .ln{transform:none!important} } /* ========================================================= RESPONSIVE TWEAKS ========================================================= */ @media(max-width:600px){ .pad{padding:72px 0} .shop-hero{padding:112px 0 48px} .woostify-sorting{flex-direction:column;align-items:flex-start} .woocommerce-pagination a,.woocommerce-pagination span{min-width:36px;height:36px;font-size:12.48px} } /* ===================================================================== WP-INTEGRATION SHIM — TASK-PAGE-SHOP-05 (2026-07-19) Everything above is the owner-approved final-v11 mockup CSS VERBATIM (rem converted to px @16 basis; .content-area renamed to .connect-shop-wrap = the live grid parent). This shim contains ONLY the battle-tested rules needed because the live page runs inside Woostify/WooCommerce, which the standalone mockup never fought. ===================================================================== */ /* grid adapter: #primary is an extra Woostify wrapper between the grid parent and main.site-main — dissolve it so main + sidebar are the two grid items (floats are ignored on grid items; sidebar lands RIGHT per the approved 1fr/260px template). */ .connect-shop-wrap > #primary.content-area{display:contents} .connect-shop-wrap > #primary.content-area::before, .connect-shop-wrap > #primary.content-area::after{display:none} .connect-shop-wrap #secondary.widget-area{float:none!important;width:auto!important} /* base: Woostify body = Poppins/14px/#8F8F8F; declare the brand base directly on the page containers (direct beats inherited). */ .connect-shop-wrap, .shop-hero{font-family:'Outfit',sans-serif;font-size:16px;color:var(--w);line-height:1.6} /* Woostify parent-theme width:calc() rules collapse .product cards */ .connect-shop-wrap ul.products li.product{width:auto!important;max-width:none!important;margin-bottom:0!important;float:none!important} /* Woostify hover-reveal collapses .product-loop-meta; design shows it expanded */ .connect-shop-wrap .product-loop-meta{height:auto!important;max-height:none!important;overflow:visible!important;opacity:1!important;display:block!important} .connect-shop-wrap .animated-meta{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important} /* Woo direct-styling defeats (higher specificity than the mockup rules) */ .connect-shop-wrap .woocommerce-loop-product__title{font-family:'Space Grotesk',sans-serif!important;font-size:16.8px!important;line-height:1.25!important;font-weight:700!important;color:var(--w)!important} .connect-shop-wrap .woocommerce-loop-product__title a{color:inherit!important} .connect-shop-wrap ul.products li.product .price{font-family:'Space Grotesk',sans-serif!important;font-size:18.4px!important;font-weight:700!important;color:var(--neon)!important;letter-spacing:-.01em!important} .connect-shop-wrap a.add_to_cart_button,.connect-shop-wrap a.ajax_add_to_cart{font-size:12.48px!important;letter-spacing:.05em!important;padding:11.2px 22.4px!important;line-height:1.6!important} .connect-shop-wrap .widget_product_categories .product-categories li a{display:block!important;font-family:'Space Grotesk',sans-serif!important;font-size:12.48px!important;font-weight:700!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:var(--neon)!important;padding:0!important;margin:0 0 14.4px!important} /* pagination: Woostify takes it out of flow full-bleed; keep it in-flow */ .connect-shop-wrap .woocommerce-pagination{position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;margin:0!important;justify-content:center!important;padding:48px 0 0!important} .connect-shop-wrap .woocommerce-pagination .page-numbers{display:flex!important;gap:8px!important;margin:0!important;padding:0!important} .connect-shop-wrap .woocommerce-pagination .page-numbers li a,.connect-shop-wrap .woocommerce-pagination .page-numbers li span{width:40px!important;height:40px!important;border-radius:12px!important;text-transform:none!important;font-family:'Space Grotesk',sans-serif!important;font-size:13.6px!important;font-weight:700!important;border:1px solid var(--line)!important} /* price filter: show the designed inputs, hide Woo's jQuery slider */ .connect-shop-wrap .widget_price_filter .price_slider{display:none!important} .connect-shop-wrap .widget_price_filter .price_slider_amount{display:block!important} .connect-shop-wrap .widget_price_filter .price_slider_amount input#min_price,.connect-shop-wrap .widget_price_filter .price_slider_amount input#max_price{display:block!important;width:100%!important;margin:0 0 9.6px!important;padding:9.6px 13.6px!important;font-size:13.6px!important;height:auto!important} .connect-shop-wrap .widget_price_filter .price_slider_amount .screen-reader-text{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;display:block!important;margin:0 0 2px!important;font-size:16px!important;line-height:1.6!important;color:var(--w70)!important} .connect-shop-wrap .widget_price_filter .price_label{display:none!important} /* breadcrumb is a