/** * Policy / info pages (Return Policy, General Info Page, Shipping Policy). * Body content on these pages is native Gutenberg (heading/paragraph/table); * this file re-skins that native markup to match the Figma export, and * styles the shared ac/contact-double-cta block. Relies on the CSS vars * defined at the top of product-lister.css (--ac-cream, --ac-dark, --ac-sand, * --ac-font-h, --ac-font-b), which is enqueued alongside this file. */ /* ── Astra full-width resets ──────────────────────────────────────────── Same brute-force pattern already used for .tax-product_cat in product-lister.css — the body-class layout switch alone isn't reliable here, so strip max-width/padding on the whole ancestor chain directly. */ .ac-policy-page #page, .ac-policy-page .site, .ac-policy-page .ast-container, .ac-policy-page .site-content, .ac-policy-page #primary, .ac-policy-page #content, .ac-policy-page .site-main, .ac-policy-page .entry-content, .ac-policy-page article { max-width : 100% !important; width : 100% !important; margin : 0 !important; padding : 0 !important; box-sizing : border-box !important; } .ac-policy-page .entry-content { display : flex !important; flex-direction : column; gap : 32px; /* Guaranteed 80px before the first content block — padding on the flex container itself, not a margin on the first child, so nothing can collapse it away (margin-based attempts here kept landing at wildly different actual values depending on what Astra/the browser were doing with adjacent margins). */ padding-top : 80px; } /* Astra's own "Page Builder Blocks Layout" feature (triggered by the ast-page-builder-template body class above) auto-wraps/centers top-level block children of .entry-content with margin-left/right:auto. That centering — and the extra wrapper divs it introduces — is what's been fighting our own layout/alignment rules on this page. Kill it here, mirroring Astra's own selector so specificity matches. */ .ast-page-builder-template.ac-policy-page .entry-content[data-ast-blocks-layout] > .inherit-container-width > *, .ast-page-builder-template.ac-policy-page .entry-content[data-ast-blocks-layout] > *:not(.wp-block-group):where(:not(.uagb-is-root-container):not(.spectra-is-root-container)) > *, .ac-policy-page .entry-content[data-ast-blocks-layout] > .wp-block-cover .wp-block-cover__inner-container { margin-left : 0 !important; margin-right : 0 !important; } /* Text/table blocks are constrained to the 1120px column like the design; the full-bleed ac-contact-double-cta block (sand band + banners) is deliberately excluded so it spans the entire page width. */ .ac-policy-page .entry-content > *:not(.ac-contact-double-cta) { width : 100%; padding-left : 160px; padding-right : 160px; box-sizing : border-box; } /* Space above the title vs. below it must match exactly. The bottom gap is safe as a margin because .entry-content is a flex container (flex contexts don't collapse margins). .entry-header sits outside that flex context though, so a margin-top there can collapse with an ancestor's own top margin/padding and end up taller than intended — padding-top never collapses, so use that instead to guarantee an honest 80px both sides. */ .ac-policy-page .entry-header { margin-top : 0 !important; margin-bottom : 0 !important; padding-top : 80px !important; padding-bottom: 0 !important; } /* !important because Astra's Customizer typography module can inject an inline style="font-size:..." directly onto the page's

(see astra_the_title() in astra/inc/blog/blog.php), which otherwise beats any external stylesheet rule regardless of selector specificity. */ .ac-policy-page .entry-content h1, .ac-policy-page .entry-title { font-family : var(--ac-font-h) !important; font-size : 48px !important; line-height : 58px !important; font-weight : 700 !important; color : var(--ac-dark) !important; text-align : center !important; padding-bottom : 10px; } .ac-policy-page .entry-content h2 { font-family : var(--ac-font-h); font-size : 32px; line-height : 42px; font-weight : 700; color : var(--ac-dark); margin : 0 !important; } .ac-policy-page .entry-content h3 { font-family : var(--ac-font-h); font-size : 24px; line-height : 29px; font-weight : 600; color : var(--ac-dark); margin : 0 !important; } .ac-policy-page .entry-content h4 { font-family : var(--ac-font-h); font-size : 22px; line-height : 27px; font-weight : 600; color : var(--ac-dark); margin : 0 !important; } .ac-policy-page .entry-content p { font-family : var(--ac-font-b); font-size : 18px; line-height : 28px; color : var(--ac-dark); margin : 0 !important; } .ac-policy-page .entry-content > .wp-block-group, .ac-policy-page .entry-content > .wp-block-heading + p, .ac-policy-page .entry-content .ac-policy-section { display : flex; flex-direction : column; gap : 24px; } /* ac/faq defaults to a boxed sand section (its usual context elsewhere on the site); on this page it should sit flush like the other plain heading/paragraph sections instead of standing out as its own block. Only its own vertical padding is zeroed — the horizontal 160px must stay as-is, it's inherited from the outer `.entry-content > *` rule above (same element, equal selector specificity) and is what keeps this section's content aligned with the rest of the page's text column. */ .ac-policy-page .entry-content .ac-faq { background : transparent; padding-top : 0; padding-bottom : 0; align-items : flex-start; } .ac-policy-page .entry-content .ac-faq-title { text-align: left; } .ac-policy-page .entry-content .ac-faq-list { width : 70%; max-width : 70%; margin : 0; align-self : flex-start; /* set directly on the item itself, not just via the parent's align-items, in case anything else is overriding that. */ } /* Table block — header row sand, body rows cream, thin grey rules. Rounding/clipping lives on the
wrapper, not the itself — putting overflow:hidden on the same element as border-collapse:collapse clips the table's own outer border away entirely in Chrome. */ .ac-policy-page .entry-content table.wp-block-table__cell-content, .ac-policy-page .entry-content .wp-block-table { margin : 0 !important; border-radius : 4px; overflow : hidden; } .ac-policy-page .entry-content table { width : 100%; table-layout : fixed; border-collapse : collapse; border : 1px solid #5B5B5B; } /* support.css (legacy, @imported by style.css site-wide) sets a bare global `tbody { display:flex; flex-direction:column }`, which explodes any real table into stacked shrink-wrapped rows. Restore native table display here, the same counter-fix support.css itself applies for the cart/checkout pages (.page-id-72/.page-id-73 .shop_table tbody). */ .ac-policy-page .entry-content table tbody { display: table-row-group !important; } .ac-policy-page .entry-content table thead { display : table-header-group !important; /* Core's `.wp-block-table thead { border-bottom: 3px solid }` is a border on the element itself, separate from the th/td cell borders below — that's the extra-heavy line under the header. */ border-bottom : none !important; } .ac-policy-page .entry-content table tr { display: table-row !important; } /* Column proportions from the Figma export: 300/410/410 of 1120. */ .ac-policy-page .entry-content table th:first-child, .ac-policy-page .entry-content table td:first-child { width: 27%; } /* Explicit border on all four sides on every cell — the block-library default (`.wp-block-table td, th { border: 1px solid }`, color defaulting to black/currentColor) was otherwise winning on whichever side we didn't override, giving mismatched grey/black edges and a heavier-looking line under the header. border-collapse:collapse merges adjoining cell borders into single 1px lines, so this doesn't create doubled borders. */ .ac-policy-page .entry-content table thead th, .ac-policy-page .entry-content table thead td { background : var(--ac-sand); font-family : var(--ac-font-b); font-weight : 700; font-size : 16px; line-height : 21px; color : var(--ac-dark); text-align : left; padding : 16px 12px; border : 1px solid #5B5B5B; } .ac-policy-page .entry-content table tbody td { background : var(--ac-cream); font-family : var(--ac-font-b); font-weight : 400; font-size : 16px; line-height : 26px; color : var(--ac-dark); text-align : left; padding : 16px 12px; border : 1px solid #5B5B5B; } @media (max-width: 900px) { .ac-policy-page .entry-content h1, .ac-policy-page .entry-title { font-size: 32px !important; line-height: 42px !important; } .ac-policy-page .entry-content h2 { font-size: 26px; line-height: 34px; } .ac-policy-page .entry-content { gap: 24px; } /* The 160px side padding on text/table blocks (set above for desktop) was never reduced here, so on a phone viewport it ate almost the whole width and left content stuck in a narrow centered strip. */ .ac-policy-page .entry-content > *:not(.ac-contact-double-cta) { padding-left : 20px; padding-right : 20px; } /* Stay a real table (header + 3 columns) instead of stacking into a list — just tighten padding/font-size so it fits a phone width. */ .ac-policy-page .entry-content table th, .ac-policy-page .entry-content table td { padding : 10px 8px; font-size : 13px; line-height : 18px; } .ac-policy-page .entry-content table th:first-child, .ac-policy-page .entry-content table td:first-child { width: 30%; } } /* ── ac/contact-double-cta ─────────────────────────────────────────── */ /* Break out of whatever ancestor container Astra applies (boxed width, inline --ast-container-width, extra wrappers we can't fully enumerate) — this is viewport-relative, so it's full-bleed regardless of parent width. */ .ac-contact-double-cta { background : var(--ac-cream); width : 100vw !important; max-width : 100vw !important; margin-left : calc(50% - 50vw) !important; margin-right : calc(50% - 50vw) !important; } .ac-contact-double-cta__contact { background : var(--ac-sand); padding : 60px clamp(20px, 11vw, 160px); display : flex; flex-direction : column; align-items : center; gap : 24px; text-align : center; } .ac-contact-double-cta__heading { font-family : var(--ac-font-h); font-size : 32px; line-height : 42px; font-weight : 700; color : var(--ac-dark); max-width : 1000px; margin : 0 !important; } .ac-contact-double-cta__text { font-family : var(--ac-font-b); font-size : 16px; line-height : 26px; color : var(--ac-dark); max-width : 1000px; margin : 0 !important; } .ac-contact-double-cta__row { display: flex; } .ac-contact-double-cta__row .ac-outdoor-banner { flex: 1 1 50%; height: 400px; } /* The generic `.entry-content h2/p` resets above (dark text, for the page's own headings/paragraphs) are too broad and were clobbering these banners' cream title/body color since they're technically inside .entry-content too. Restore the banner's own light-on-image styling here. */ .ac-policy-page .entry-content .ac-outdoor-title, .ac-policy-page .entry-content .ac-outdoor-desc { color : var(--ac-cream) !important; } @media (max-width: 900px) { .ac-contact-double-cta__row { flex-direction: column; } /* flex-basis (from the base `flex: 1 1 50%`) sizes the main axis, which becomes vertical once flex-direction is column — it wins over `height` in that case, so the earlier `height: 360px` alone had no effect. Override flex-basis directly instead. */ .ac-contact-double-cta__row .ac-outdoor-banner { flex: 0 0 360px; height: 360px; } .ac-contact-double-cta__contact { padding: 40px 20px; } }