/* ========================================================================== Glagoslav — global brand stylesheet (Phase 1) Source of truth: reference/glagoslav-design-system.md Loaded site-wide via the glg-main enqueue in functions.php. SAFE-FOR-LIVE scope: design tokens, brand font-family defaults, and the shared/global component classes only. The prototypes' universal `*{margin:0;padding:0}` reset is intentionally NOT included here — it would collapse Astra / Elementor / WooCommerce spacing on existing pages. Page- specific components (hero, catalogue block, A–Z directory, stats band) live with their Elementor templates, not here. ========================================================================== */ /* 1. Colour tokens -------------------------------------------------------- */ :root{ --paper:#ffffff; /* base background */ --paper-soft:#faf9f6; /* alternate sections, footer */ --tint:#f1f8f8; /* teal-tint blocks */ --ink:#171717; /* text */ --muted:#6b6b6b; /* secondary text */ --teal:#008b96; /* buttons, icons, fills */ --teal-dark:#006b73; /* teal TEXT and links (AA) */ --line:#e7e5e0; /* hairlines, borders */ --ph:#ece9e3; /* image placeholder fill */ } /* 2. Brand typography defaults ------------------------------------------- Font-family only, so Elementor / Astra inherit the right faces while their own sizing and spacing are left intact. DM Serif Display ships weight 400 only — pin headings to 400 to avoid faux-bold. */ body{font-family:"Libre Franklin",system-ui,-apple-system,sans-serif;} h1,h2,h3,h4,h5,h6{font-family:"DM Serif Display",Georgia,serif;font-weight:400;} /* 3. Content frame -------------------------------------------------------- */ .glg .wrap, .wrap{max-width:1180px;margin:0 auto;padding:0 40px;} /* 4. Section rhythm ------------------------------------------------------- */ .sec{padding:72px 0;} .sec.alt{background:var(--paper-soft);} .sec.tint{background:var(--tint);} /* 5. Section heading pattern (.shead) ------------------------------------- */ .eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:14px;} .shead{margin-bottom:40px;} .shead h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(2rem,3vw,2.5rem);line-height:1.08;} .shead p{color:var(--muted);font-size:.98rem;margin-top:8px;max-width:44ch;} .shead.row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;} .tlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;font-size:.94rem;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:color .2s,border-color .2s;} .tlink:hover{color:var(--teal-dark);border-color:var(--teal);} .tlink svg{width:15px;height:15px;} /* 6. Buttons (real page CTAs only — never on book cards) ------------------ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--teal);color:#fff;border:none;border-radius:2px;padding:0 30px;height:52px;font-family:"Libre Franklin",system-ui,sans-serif;font-weight:600;font-size:1rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s;} .btn:hover{background:var(--teal-dark);transform:translateY(-1px);color:#fff;} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);} .btn.ghost:hover{border-color:var(--teal);color:var(--teal-dark);} /* 7. Covers + the two book-grid patterns --------------------------------- */ /* Cover aspect ratio is locked at 127:203. */ /* (a) Marketing book row — 4-up, text centred, author above title */ .bookgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 34px;} .bcard{display:block;box-sizing:border-box;} .bcover{margin-bottom:18px;overflow:hidden;} .bcover img{width:100%;height:auto;box-shadow:0 12px 28px rgba(20,20,20,.14);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;} .bcard:hover .bcover img{transform:translateY(-7px);box-shadow:0 20px 38px rgba(20,20,20,.2);} .bmeta{text-align:center;display:flex;flex-direction:column;} .bmeta .au{font-size:.83rem;color:var(--muted);margin-bottom:6px;order:-1;} .bmeta h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.16rem;line-height:1.2;margin-bottom:7px;} .bmeta .pr{font-size:.84rem;color:var(--ink);} /* (b) Archive / listing grid — fixed 210px covers, left-aligned */ .shopgrid{display:grid;grid-template-columns:repeat(auto-fit,210px);justify-content:start;gap:46px 34px;} .scard{display:block;box-sizing:border-box;} .scard .cv{aspect-ratio:127/203;overflow:hidden;border-radius:2px;background:var(--ph);} .scard .cv img{width:100%;height:100%;object-fit:cover;} /* 8. Responsive breakpoints (match the prototypes) ----------------------- */ @media(max-width:900px){ .bookgrid{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .shopgrid{grid-template-columns:repeat(2,1fr);} } @media(max-width:480px){ .glg .wrap, .wrap{padding:0 22px;} } /* ========================================================================== Site header + footer (Phase 2) Scoped under #glg-header / #glg-mobnav / #glg-mobBackdrop / #glg-footer so the prototype's generic class names (.nav, .menu, .social, .cart) cannot collide with Astra / WooCommerce / Elementor. No universal reset. ========================================================================== */ body.glg-noscroll{overflow:hidden;} /* header */ #glg-header{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:24px 40px;border-bottom:1px solid var(--line);background:var(--paper);box-sizing:border-box;} #glg-header *{box-sizing:border-box;} #glg-header .brand b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.7rem;color:var(--ink);} #glg-header .brand span{display:block;font-size:.6rem;letter-spacing:.36em;color:var(--muted);text-transform:uppercase;margin-top:4px;} #glg-header .brand{display:inline-flex;align-items:center;} #glg-header .glg-logo{height:38px;width:auto;max-width:none;display:block;} #glg-mobnav .mobnav-top .glg-logo{height:30px;width:auto;max-width:none;display:block;margin-left:-3px;} #glg-header .nav{display:flex;gap:24px;font-size:.92rem;} #glg-header .nav a{padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;color:var(--ink);transition:border-color .2s,color .2s;} #glg-header .nav a:hover,#glg-header .nav a.on{color:var(--teal-dark);border-color:var(--teal);} #glg-header .tools{display:flex;align-items:center;gap:16px;} #glg-header .tools a,#glg-header .tools button{color:var(--ink);display:inline-flex;align-items:center;} #glg-header .tools svg{width:21px;height:21px;display:block;} #glg-header .cart{position:relative;} #glg-header .cart i{position:absolute;top:-7px;right:-9px;background:var(--teal);color:#fff;font-style:normal;font-size:.62rem;font-weight:600;min-width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;} /* Hamburger: hidden on desktop, shown only ≤1040 (inverse of .nav). Scoped to `.tools .menu` (1,2,0) so its display wins over #glg-header .tools button{display:inline-flex} (1,1,1); without the bump that button rule forces the burger visible on desktop, duplicating the full nav. */ #glg-header .tools .menu{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:0;} /* slide-in drawer */ #glg-mobBackdrop{position:fixed;inset:0;background:rgba(20,20,20,.42);opacity:0;visibility:hidden;transition:opacity .3s;z-index:9998;} #glg-mobBackdrop.open{opacity:1;visibility:visible;} #glg-mobnav{position:fixed;top:0;right:0;height:100%;width:min(366px,86vw);background:var(--paper);box-shadow:-12px 0 44px rgba(0,0,0,.14);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:9999;display:flex;flex-direction:column;padding:22px 26px 28px;overflow-y:auto;box-sizing:border-box;} #glg-mobnav *{box-sizing:border-box;} #glg-mobnav.open{transform:none;} #glg-mobnav .mobnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} #glg-mobnav .mobnav-top b{font-family:"DM Serif Display",Georgia,serif;font-size:1.45rem;color:var(--ink);} #glg-mobnav .mobclose{background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;line-height:0;} #glg-mobnav .mobclose svg{width:22px;height:22px;} #glg-mobnav .mobnav-links{display:flex;flex-direction:column;} #glg-mobnav .mobnav-links a{font-size:1.1rem;padding:15px 2px;border-bottom:1px solid var(--line);color:var(--ink);transition:color .2s,padding-left .2s;} #glg-mobnav .mobnav-links a:hover,#glg-mobnav .mobnav-links a.on{color:var(--teal-dark);padding-left:6px;} #glg-mobnav .mobnav-foot{margin-top:auto;padding-top:22px;display:flex;gap:22px;} #glg-mobnav .mobnav-foot a{font-size:.92rem;color:var(--teal-dark);display:inline-flex;align-items:center;gap:8px;} #glg-mobnav .mobnav-foot svg{width:17px;height:17px;} /* footer */ #glg-footer{background:var(--paper-soft);border-top:1px solid var(--line);box-sizing:border-box;} #glg-footer *{box-sizing:border-box;} #glg-footer .ftin{max-width:1180px;margin:0 auto;padding:56px 40px 44px;display:flex;flex-wrap:wrap;gap:40px 56px;justify-content:flex-start;} #glg-footer .ftcol{min-width:150px;} #glg-footer .ftcol h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;} #glg-footer .ftcol a,#glg-footer .ftcol .ftnote{display:block;font-size:.9rem;margin-bottom:9px;color:var(--ink);transition:color .2s;} #glg-footer .ftcol a:hover{color:var(--teal-dark);} #glg-footer .ftcol .ftnote{color:var(--muted);} #glg-footer .ftbrand b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.3rem;color:var(--ink);} #glg-footer .ftbrand-logo{display:inline-block;line-height:0;} #glg-footer .ftbrand .glg-logo{height:32px;width:auto;max-width:none;display:block;margin-left:-3px;} #glg-footer .ftbrand p{font-size:.88rem;color:var(--muted);margin-top:10px;max-width:34ch;} #glg-footer .social{display:flex;gap:17px;margin-top:18px;} #glg-footer .social a{color:var(--teal);font-size:1.15rem;line-height:1;transition:color .2s;display:inline-block;} #glg-footer .social a:hover{color:var(--teal-dark);} #glg-footer .glg-subscribe{color:var(--teal-dark);} #glg-footer .ftbar{border-top:1px solid var(--line);} #glg-footer .ftbar a{color:var(--teal-dark);text-decoration:none;} #glg-footer .ftbar a:hover{text-decoration:underline;} #glg-footer .ftbar > div{max-width:1180px;margin:0 auto;padding:18px 40px;font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;} @media(max-width:1040px){ #glg-header .nav{display:none;} #glg-header .tools .menu{display:block;} } @media(max-width:480px){ #glg-header{padding-left:22px;padding-right:22px;} #glg-header .glg-logo{height:32px;} #glg-footer .ftin{padding-left:22px;padding-right:22px;} #glg-footer .ftbar > div{padding-left:22px;padding-right:22px;} } /* ========================================================================== WooCommerce product cards + archive grid (Phase 3, step 1) Card markup: woocommerce/content-product.php (.glg-card). Scoped under the Woo loop containers + archive bodies so Astra / WooCommerce / Elementor defaults don't fight it. No universal reset. ========================================================================== */ /* the card — every loop using content-product.php (archives + related products) */ ul.products li.product .glg-card{display:block;color:var(--ink);} ul.products li.product .glg-card__cv{position:relative;margin-bottom:16px;} ul.products li.product .glg-card__cv img{width:100%;aspect-ratio:127/203;object-fit:cover;display:block;border-radius:2px;background:var(--ph);box-shadow:0 12px 28px rgba(20,20,20,.14);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;} ul.products li.product .glg-card:hover .glg-card__cv img{transform:translateY(-7px);box-shadow:0 20px 38px rgba(20,20,20,.2);} /* Pre-order badge pinned to the cover's top-left (content-product.php renders it inside .glg-card__cv only when _glg_preorder=yes). Reuses the .glg-preorder palette (soft --tint bg + teal-dark text + teal border, NOT solid teal) sized down for a card corner — short, uppercase, no date (date stays on the single-product badge). tint bg (not transparent) keeps it legible on light AND dark covers; absolute so it doesn't shift the grid or 127:203 ratio; lifts with the cover on hover. It sits inside the whole-card , so the link is unaffected. */ ul.products li.product .glg-card__badge{position:absolute;top:8px;left:8px;z-index:2;padding:4px 8px;background:var(--tint);border:1px solid var(--teal);border-radius:2px;color:var(--teal-dark);font-size:.62rem;line-height:1;text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1);} ul.products li.product .glg-card:hover .glg-card__badge{transform:translateY(-7px);} ul.products li.product .glg-card__ct{display:flex;flex-direction:column;text-align:left;} ul.products li.product .glg-card__au{font-size:.83rem;color:var(--muted);margin-bottom:6px;} ul.products li.product .glg-card__ti{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.16rem;line-height:1.2;margin:0 0 7px;color:var(--ink);} ul.products li.product .glg-card__pr, ul.products li.product .glg-card__pr .woocommerce-Price-amount{font-size:.84rem;color:var(--ink);font-weight:400;} ul.products li.product .glg-card__pr del{color:var(--muted);} /* archive/listing grid (.shopgrid): shop, category, tag, author, search */ body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) ul.products{ display:grid;grid-template-columns:repeat(auto-fit,210px);justify-content:start;gap:46px 34px;margin:0;padding:0;list-style:none; } body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) ul.products::before, body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) ul.products::after{content:none;} body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important;} @media(max-width:560px){ body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) ul.products{grid-template-columns:repeat(2,1fr);gap:30px 18px;} } /* Related products row (Phase 3, step 5): "You may also like". Reuses the .glg-card card styles above (same as the archive; content-product.php, no buttons). 4-up here, 2-up ≤900. Strong body.single-product div.product prefix to beat Astra's flex/float related layout. */ body.single-product div.product .related.products{border-top:1px solid var(--line);padding:46px 0 0;margin:40px 0 0;clear:both;} body.single-product div.product .related.products > h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.55rem;line-height:1.1;margin:0 0 24px;color:var(--ink);} body.single-product div.product .related.products ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;margin:0;padding:0;list-style:none;} body.single-product div.product .related.products ul.products::before, body.single-product div.product .related.products ul.products::after{content:none;} body.single-product div.product .related.products ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important;} @media(max-width:900px){ body.single-product div.product .related.products ul.products{grid-template-columns:repeat(2,1fr);gap:32px 22px;} } /* ========================================================================== WooCommerce archive layout (Phase 3, step 2): full-width, controls bar, pager ========================================================================== */ /* Unified content frame (design-system §3): cap Astra's wider container to the 1180px brand frame AND apply the 40px gutter (22px ≤480) so archive content shares the exact left/right edge of #glg-header (.hd), the footer (.ftin), and every .wrap page. Covers all product + post archives, the blog index, and search. repeat(auto-fit,210px) still lands 4 covers per row. */ body:is(.archive,.blog,.search,.single-product) .site-content > .ast-container{max-width:1180px !important;padding-left:40px !important;padding-right:40px !important;} /* ≤480: tighten to the 22px mobile gutter. MUST stay AFTER the 40px rule above — same selector, both !important, equal specificity, so source order decides. Placed earlier (in the responsive block) it lost, and mobile content sat at 40px while header/footer were already 22px. */ @media(max-width:480px){ body:is(.archive,.blog,.search,.single-product) .site-content > .ast-container{padding-left:22px !important;padding-right:22px !important;} } /* Top controls bar: result count (left) + ordering dropdown (right). */ .glg-shopbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin:0 0 36px;} .glg-shopbar .woocommerce-result-count{float:none;margin:0;font-size:.9rem;color:var(--muted);} .glg-shopbar .woocommerce-ordering{float:none;margin:0;position:relative;} .glg-shopbar .woocommerce-ordering select, .glg-shopbar select.orderby{appearance:none;-webkit-appearance:none;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:9px 38px 9px 14px;font-family:"Libre Franklin",system-ui,sans-serif;font-size:.85rem;color:var(--ink);cursor:pointer;line-height:1.2;} .glg-shopbar .woocommerce-ordering select:focus{outline:none;border-color:var(--teal);} .glg-shopbar .woocommerce-ordering::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-72%) rotate(45deg);pointer-events:none;} /* filter dropdowns (Category, and later Format) */ .glg-shopbar__filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-right:auto;} .glg-shopbar .glg-select{position:relative;display:inline-block;} .glg-shopbar .glg-filter{appearance:none;-webkit-appearance:none;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:9px 38px 9px 14px;font-family:"Libre Franklin",system-ui,sans-serif;font-size:.85rem;color:var(--ink);cursor:pointer;line-height:1.2;max-width:230px;} .glg-shopbar .glg-filter:focus{outline:none;border-color:var(--teal);} .glg-shopbar .glg-select::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-72%) rotate(45deg);pointer-events:none;} /* Stack the controls into a full-width column at the design-system 560px archive breakpoint (matches .shopgrid -> 2-col, glagoslav.css ~83). Reset .glg-filter's 230px cap so the filter selects fill their wrappers — otherwise they stay 230px while the chevron pins to the full-width wrapper's right edge (detached) and only Sort (no cap) goes full-width. */ @media(max-width:560px){ .glg-shopbar{flex-direction:column;align-items:stretch;gap:12px;} .glg-shopbar__filters{margin-right:0;width:100%;} .glg-shopbar__filters .glg-select,.glg-shopbar .glg-filter,.glg-shopbar .woocommerce-ordering,.glg-shopbar .woocommerce-ordering select{width:100%;} .glg-shopbar .glg-filter{max-width:none;} } /* archive header band (eyebrow + DM Serif title + one-line description) */ body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-pwb-brand,.search) .woocommerce-products-header{display:none;} .glg-archive-head{margin:0 0 30px;padding-top:40px;} .glg-archive-head__eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:14px;} .glg-archive-head__title{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1.05;margin:0;color:var(--ink);} .glg-archive-head__desc{font-size:1.05rem;line-height:1.6;color:var(--muted);max-width:62ch;margin:14px 0 0;} /* Author (pwb-brand) archive bio — between the name band and the shopbar. Readable measure; matches the author prototype's .authbio. Renders only when a bio exists. */ .glg-author-bio{max-width:680px;margin:0 0 32px;text-align:justify;} .glg-author-bio p{font-size:.95rem;line-height:1.7;color:#333;margin:0 0 12px;} .glg-author-bio p:last-child{margin-bottom:0;} .glg-author-bio a{color:var(--teal-dark);border-bottom:1px solid rgba(0,107,115,.4);transition:border-color .2s;} .glg-author-bio a:hover{border-color:var(--teal-dark);} .glg-author-bio em{font-style:italic;} .glg-author-bio ul,.glg-author-bio ol{margin:0 0 12px;padding-left:1.25em;} .glg-author-bio li{font-size:.95rem;line-height:1.7;color:#333;margin:0 0 4px;} /* Pagination: spaced above, left-aligned, brand-styled (teal active). */ /* Pagination — WooCommerce shop/archives + Astra blog (.ast-pagination), unified. Scoped strictly to the pager. Square 40x40 cells, no radius/shadow/outline. */ nav.woocommerce-pagination{display:block;width:100%;text-align:left;margin-top:56px;} .woocommerce-pagination ul.page-numbers, .ast-pagination{display:flex !important;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:6px;list-style:none;margin:0 auto;padding:0;border:0;width:100%;} .woocommerce-pagination ul.page-numbers > li, .ast-pagination > li{display:flex;margin:0;padding:0;border:0;background:none;} /* Flush-left the pager: Astra's ul{margin:1px} (spec 0,2,2) overrode our margin, and WooCommerce's ::before/::after clearfix become leading/trailing flex items (+gap:6px) that push the first cell ~7px off the content edge. Kill both so row 1 and any wrapped rows align to the card's left edge. */ .woocommerce-pagination ul.page-numbers{margin:0 !important;} .woocommerce-pagination ul.page-numbers::before, .woocommerce-pagination ul.page-numbers::after{content:none !important;display:none !important;} /* Astra's WC-compat draws a 1px var(--ast-border-color) border + 5px margins on the
  • (.woocommerce-js nav.woocommerce-pagination ul li, specificity 0,2,3), out-specifying the reset above and double-bordering every cell (the "dark outer frame"). Kill it so only our single .page-numbers border shows; spacing then comes from the ul's gap alone. */ nav.woocommerce-pagination ul.page-numbers li, .woocommerce nav.woocommerce-pagination ul.page-numbers li{border:0 !important;margin:0 !important;} .woocommerce-pagination .page-numbers, .ast-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;box-sizing:border-box;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:.9rem;line-height:1;box-shadow:none;outline:none;transition:color .2s,background .2s,border-color .2s;} .woocommerce-pagination a.page-numbers:hover, .ast-pagination a.page-numbers:hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;} .woocommerce-pagination .page-numbers.current, .ast-pagination .page-numbers.current{background:var(--teal)!important;border:1px solid var(--teal)!important;color:#fff!important;box-shadow:none!important;outline:none!important;} .woocommerce-pagination .page-numbers:focus, .woocommerce-pagination .page-numbers:focus-visible, .ast-pagination .page-numbers:focus, .ast-pagination .page-numbers:focus-visible{outline:none!important;box-shadow:none!important;} .woocommerce-pagination .page-numbers.dots, .ast-pagination .page-numbers.dots{border:0;background:transparent;width:auto;min-width:24px;} /* Header breathing room at full desktop width (#5). */ #glg-header{padding-top:28px;padding-bottom:28px;} /* #2 Balance the desktop header (≥1180, where the 1180 frame has slack): logo + nav as a tight block on the LEFT, icon cluster pushed to the right edge (variant 1b). justify-content:flex-start packs from the left with a 40px logo↔nav gap (nav items stay 24px); margin-left:auto on .tools absorbs the slack so search/cart sit flush at the frame's right edge. Scoped ≥1180 so the tighter 1040–1180 nav still fits; ≤1040 .nav is display:none, .tools has no auto-margin, and the hamburger (logo + tools, space-between) is untouched. */ @media(min-width:1180px){ #glg-header{justify-content:flex-start;gap:40px;} #glg-header .nav{gap:24px;} #glg-header .tools{margin-left:auto;} } /* Cookie-consent (plugin: beautiful-and-responsive-cookie-consent / cookieconsent v2). Hide ONLY the persistent floating revoke/settings button. The GDPR banner (.cc-window) is untouched and still shows for fresh visitors. Re-opening consent is handled by our footer "Cookie Settings" link, which carries the plugin's OWN .nsc-bara-manage-cookie-settings class — the plugin auto-wires that class to revokeChoice() at init (no plugin edits). */ .cc-revoke{display:none !important;} /* ========================================================================== Single product page — Phase 3, step 1: hero layout + heading system. Cover at NATURAL ratio (not the 127:203 archive lock). Variations/cart (step 2) and tabs (step 3) are intentionally left at WooCommerce default. The 1180/40 frame is shared via the .ast-container cap above (.single-product was added to its :is()). ========================================================================== */ /* Kill Astra's horizontal padding (~107px) so the product fills the 1180/40 frame, AND its ~85px container padding-top. That top padding is set ONLY on single products (Astra's woocommerce.min.css); the shop archive container is padding-top:0. Zeroing it here drops the header->breadcrumb gap down to the shared #primary 64px top margin — the exact value already approved on the shop archive. (padding-bottom is left as-is: below-the-fold, not in scope.) */ .single-product .ast-woocommerce-container{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;} /* Breadcrumb — moved above .product (functions.php). Brand .crumb look. The #primary 64px top margin already supplies the header gap (matches the archive), so NO top padding here; the 34px margin-bottom is the breadcrumb->hero breathing room (= the prototype's .prod top padding). The gap lives on the breadcrumb because Astra's .ast-separate-container.single-product .ast-article-single{padding:0} (0,3,0) beats any .product padding we set (0,2,1). */ .single-product .woocommerce-breadcrumb{font-size:.82rem;color:var(--muted);margin:0 0 34px;padding:0;} .single-product .woocommerce-breadcrumb a{color:var(--muted);transition:color .2s;} .single-product .woocommerce-breadcrumb a:hover{color:var(--ink);} .single-product .summary .woocommerce-breadcrumb{display:none;} /* belt-and-suspenders if the move misses */ /* Hero grid lives in a .glg-hero wrapper (added via functions.php), NOT on .product — so the sticky gallery's containing block is the hero (gallery + summary) only, not the whole .product (which also holds the tabs/related below; sticking through that whole height made the cover ride over the tabs on scroll). 460 cover column + 1fr details. Tabs/related are plain blocks under it. NOTE: .product padding-top is intentionally NOT set — Astra's woocommerce.min.css forces .ast-separate-container.single-product .ast-article-single{padding:0} at (0,3,0), which our (0,2,1) can't beat; the breadcrumb's margin-bottom owns the breadcrumb->hero gap instead. */ .single-product .glg-hero{display:grid;grid-template-columns:460px minmax(0,1fr);gap:60px;align-items:start;margin-bottom:14px;} /* margin-bottom:0 kills Astra's 2em (32px) bottom margin on .summary + the gallery, which (as grid items) was padding the grid row 32px below the content and inflating the buybox->tabs gap. */ .single-product .glg-hero > *{float:none !important;width:auto !important;margin-bottom:0 !important;} .single-product .glg-hero > .woocommerce-product-gallery{grid-column:1;} .single-product .glg-hero > .summary{grid-column:2;} /* Media column: sticky; cover at natural ratio with a deep shadow; thumbs as a left strip. */ .single-product .woocommerce-product-gallery{position:sticky !important;top:30px;float:none;width:auto;margin:0;display:flex;flex-direction:row-reverse;gap:14px;align-items:flex-start;} .single-product .woocommerce-product-gallery .flex-viewport, .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{flex:1 1 auto;min-width:0;} .single-product .woocommerce-product-gallery img{height:auto;box-shadow:0 26px 54px rgba(20,20,20,.18);} .single-product .woocommerce-product-gallery .flex-control-thumbs{flex:0 0 58px;display:block;width:58px;list-style:none;margin:0;padding:0;} .single-product .woocommerce-product-gallery .flex-control-thumbs li{display:block !important;width:58px !important;float:none !important;margin:0 0 10px !important;padding:0 !important;} .single-product .woocommerce-product-gallery .flex-control-thumbs img{display:block;width:100% !important;height:auto !important;border:1px solid var(--line);border-radius:2px;padding:3px;background:#fff;box-sizing:border-box;cursor:pointer;box-shadow:none;transition:border-color .2s;} .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--teal);} .single-product .woocommerce-product-gallery__trigger{z-index:2;} /* Details column: flex column so CSS `order` controls the heading system regardless of Astra's DOM order. author -> title -> edition -> blurb -> credits -> preview -> cart. */ .single-product .summary{display:flex !important;flex-direction:column;} .single-product .summary > *{order:5;} .single-product .summary .pwb-single-product-brands{order:1;font-size:.96rem;margin:0 0 10px;} .single-product .summary .pwb-single-product-brands a{color:var(--teal-dark);} .single-product .summary .pwb-single-product-brands a:hover{color:var(--ink);} /* Multi-author: Perfect Brands prints adjacent links with no separator (the separator option is empty), so two+ authors jam together. Add a comma between them. */ .single-product .summary .pwb-single-product-brands a:not(:last-child)::after{content:", ";color:var(--muted);} .single-product .summary h1.product_title{order:2;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:2.7rem;line-height:1.08;margin:0 0 10px;color:var(--ink);} .single-product .summary .glg-edition{order:3;font-style:italic;color:var(--muted);font-size:1rem;margin:0 0 20px;} .single-product .summary .woocommerce-product-details__short-description{order:4;font-size:1.06rem;line-height:1.6;max-width:46ch;color:var(--ink);margin:0 0 18px;} .single-product .summary .glg-credits{order:5;display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--muted);margin:0 0 8px;} .single-product .summary .glg-preview{order:6;display:inline-flex;align-items:center;gap:8px;width:max-content;margin:4px 0 0;font-size:.86rem;color:var(--teal-dark);} .single-product .summary .glg-preview:hover{color:var(--ink);} /* Step 4.2: hide Perfect Brands' "Author:" prefix span — keep the bare clickable teal-dark name link (the prototype shows the name only, no label). CSS only; Perfect Brands output untouched. */ .single-product .summary .pwb-single-product-brands .pwb-text-before-brands-links{display:none;} /* Step 4.2: pre-order badge — soft TINT pill + teal-dark text (NOT solid teal, so it doesn't compete with the teal Add-to-basket button). order:6 ties with .glg-preview, but the hook fires at pri 25 (preview is 26) so it precedes the preview in the DOM → sits after credits, before preview/buybox. align-self:flex-start keeps it content-width (a pill, not full-width). Reusable component; product page only for now (cards reuse it later). */ .single-product .summary .glg-preorder{order:6;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:2px 0 6px;padding:8px 14px;background:var(--tint);border:1px solid var(--teal);border-radius:2px;color:var(--teal-dark);font-size:.74rem;line-height:1;} .single-product .summary .glg-preorder-ico{width:14px;height:14px;flex:0 0 auto;} .single-product .summary .glg-preorder-label{text-transform:uppercase;letter-spacing:.14em;font-weight:600;} .single-product .summary .glg-preorder-date{letter-spacing:.01em;} .single-product .summary form.cart{order:7;} .single-product .summary #mollie-applepayDirect-button{order:8;} .single-product .summary .product_meta{order:9;} /* Hide the category line + the default variable-price range. The price moves into the format pills in step 2 — REVERSIBLE: delete these two rules to restore the WC price. */ .single-product .summary .single-product-category{display:none !important;} /* Hide the variable price range ONLY (it moved into the format pills + button). SIMPLE products have no pills, so their price must stay visible — scope the hide to .product-type-variable. */ .single-product div.product.product-type-variable .summary > p.price{display:none !important;} /* Simple-product price: shown above the buybox (no pills carry it), brand-styled. */ .single-product div.product.product-type-simple .summary > p.price{order:6;display:block;margin:4px 0 16px;font-size:1.4rem;line-height:1.2;color:var(--ink);} .single-product div.product.product-type-simple .summary > p.price .amount, .single-product div.product.product-type-simple .summary > p.price del, .single-product div.product.product-type-simple .summary > p.price ins{color:var(--ink);text-decoration:none;} .single-product div.product.product-type-simple .summary > p.price del{color:var(--muted);} /* Simple-product cart: qty + Add-to-basket inline (the variable form has its own flex wrap). margin-top:24px matches the breathing room the variable buybox gets from form.variations_form.cart (margin:24px 0 14px) below — without it the PDF preview link (.glg-preview) sat flush (0px) against the Add-to-basket button on simple products (e.g. Quo Vadis). */ .single-product div.product.product-type-simple .summary form.cart{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px;} /* Step 2: format pills + add-to-basket. The variable form is the bordered buybox. */ /* margin-bottom trimmed (24->14): until the step-4 .also/.basics blocks fill this space, the buybox bottom border -> product_meta -> tabs-top line read as an empty "band"; tightening pulls the meta up under the buybox so the gap isn't an empty rectangle. */ .single-product .summary form.variations_form.cart{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:24px 0 14px;} .single-product .variations_form .variations{display:none !important;} /* native dropdown — pills replace it */ .single-product .variations_form .reset_variations{display:none !important;} /* "Clear" link */ .single-product .single_variation .price, .single-product .woocommerce-variation-price{display:none !important;} /* price lives in the pill + the button */ .single-product .glg-fmt-label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;} .single-product .glg-formats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;} /* font-weight/letter-spacing/text-transform are set explicitly: pills are