/*
Theme Name: Celememorate Child
Theme URI:
Description: Astra child theme.
Author: Earth Saving Solutions
Author URI:
Template: astra
Version: 0.1.19
*/
/* ===== Celememorate Brand Kit =====
Fonts (Oswald / Source Sans 3 / Merriweather) are enqueued with preconnect
hints in functions.php — not @import-ed here — so the font CSS isn't hidden
behind this stylesheet's download+parse. */
:root{
--cm-navy:#0A3161; /* Old Glory Blue */
--cm-red:#B22234; /* Old Glory Red */
--cm-gold:#FFCE00; /* Colorado gold */
--cm-white:#FFFFFF;
--cm-ink:#10172A;
--cm-bg:#F5F7FB;
--cm-head:'Oswald',system-ui,sans-serif;
--cm-body:'Source Sans 3',system-ui,sans-serif;
}
body{font-family:var(--cm-body);color:var(--cm-ink);}
h1,h2,h3,h4,h5,h6,.site-title{font-family:var(--cm-head);letter-spacing:.5px;color:var(--cm-navy);text-transform:uppercase;}
a{color:var(--cm-red);} a:hover{color:var(--cm-navy);}
/* Trademark mark (™) — hugs the brand wordmark; not affected by heading uppercase/tracking.
Live content marks it up as ™. Without this rule the ™ falls
back to the browser default and inherits the heading's uppercase + .5px letter-spacing,
so it sits too large and too far from the wordmark. See #112. */
.cm-tm{font-size:.6em;letter-spacing:normal;text-transform:none;font-weight:400;vertical-align:super;line-height:0;}
.cm-gold{color:var(--cm-gold);}
.wp-block-button__link,.ast-button,.button,.wp-element-button,.fl-button{
background:var(--cm-red);border-color:var(--cm-red);color:#fff;border-radius:4px;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;
}
.wp-block-button__link:hover,.ast-button:hover,.button:hover,.fl-button:hover{background:var(--cm-navy);border-color:var(--cm-navy);color:#fff;}
.site-header,.ast-primary-header-bar{background:var(--cm-navy)!important;}
.main-header-menu a,.ast-builder-menu a,.ast-header-navigation-bar a{color:#fff!important;}
.site-footer,.ast-small-footer{background:var(--cm-navy)!important;color:#fff;}
.cm-stripe{height:6px;background:linear-gradient(90deg,var(--cm-red) 0 33%,#fff 33% 66%,var(--cm-navy) 66% 100%);}
/* ===== Celememorate layout / components ===== */
.cm-section{padding:64px 0;}
.cm-narrow{max-width:1120px;margin:0 auto;padding:0 20px;}
.cm-center{text-align:center;}
.cm-alt{background:var(--cm-bg);}
.cm-hero{position:relative;color:#fff;text-align:center;padding:104px 20px;background-size:cover;background-position:center;}
.cm-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,49,97,.80),rgba(10,49,97,.90));}
.cm-hero>*{position:relative;z-index:1;max-width:900px;margin-left:auto;margin-right:auto;}
.cm-hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4rem);margin:.15em auto;}
.cm-hero .cm-tag{color:var(--cm-gold);font-family:var(--cm-head);text-transform:uppercase;letter-spacing:3px;font-size:1rem;}
.cm-hero p{font-size:1.15rem;}
.cm-countdown{display:flex;gap:14px;justify-content:center;margin:30px auto;flex-wrap:wrap;}
.cm-cd-box{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:14px 18px;min-width:88px;}
.cm-cd-num{font-family:var(--cm-head);font-size:2.7rem;line-height:1;color:#fff;}
.cm-cd-lbl{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--cm-gold);}
.cm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;}
.cm-card{background:#fff;border:1px solid #e3e8f0;border-top:5px solid var(--cm-red);border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(10,49,97,.08);}
.cm-card img{width:100%;height:210px;object-fit:cover;display:block;}
.cm-card-body{padding:22px;}
.cm-card h3{margin:.1em 0 .3em;}
.cm-yrs{color:var(--cm-red);font-family:var(--cm-head);font-size:1.9rem;display:block;}
.cm-btn{display:inline-block;background:var(--cm-red);color:#fff!important;padding:14px 30px;border-radius:6px;font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1px;text-decoration:none;border:2px solid var(--cm-red);}
/* Hover keeps a solid fill: buttons sit on white cards AND navy bands, so the old
background:transparent hover left the pinned text colour invisible on light sections
(white-on-white). Darkened brand fill stays self-contrasting everywhere. */
.cm-btn:hover{background:#8E1B29;border-color:#8E1B29;color:#fff!important;}
.cm-btn-gold{background:var(--cm-gold);color:var(--cm-navy)!important;border-color:var(--cm-gold);}
.cm-btn-gold:hover{background:#E3B800;border-color:#E3B800;color:var(--cm-navy)!important;}
/* Keyboard focus: two-tone ring is self-contrasting, so it stays visible on light AND navy
sections (Astra's inherited a:focus outline took the link colour — white on white / navy on
navy — and vanished). box-shadow follows the 6px radius; transparent outline shows in forced-colours. */
.cm-btn:focus-visible,
.wp-block-button__link:focus-visible,.ast-button:focus-visible,.button:focus-visible,.wp-element-button:focus-visible,.fl-button:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--cm-navy);}
.cm-event{display:grid;grid-template-columns:1fr;gap:8px;background:#fff;border-left:5px solid var(--cm-navy);border-radius:8px;padding:22px 24px;margin:18px 0;box-shadow:0 4px 16px rgba(10,49,97,.07);}
.cm-event .cm-when{color:var(--cm-red);font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1px;}
.cm-support{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:24px;margin:18px 0;box-shadow:0 4px 16px rgba(10,49,97,.06);}
.ast-small-footer{border-top:4px solid var(--cm-gold);}
.site-footer a,.ast-small-footer a{color:#fff!important;text-decoration:underline;}
.site-footer a:hover{color:var(--cm-gold)!important;}
/* ===== Full-bleed hero / page headers (added 2026-06-29) ===== */
.cm-hero{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.cm-hero--page{padding:64px 20px;}
.site-content{overflow-x:clip;}
/* ===== Photo grids / QR (added 2026-06-29) ===== */
.cm-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:24px 0;}
.cm-photo-grid img{width:100%;height:240px;object-fit:cover;border-radius:10px;display:block;box-shadow:0 4px 16px rgba(10,49,97,.10);}
.cm-qr{max-width:148px;border-radius:8px;border:1px solid #e3e8f0;margin-top:12px;display:block;}
/* ===== Anthem & film (added 2026-06-29) ===== */
.cm-anthem-band{background:var(--cm-navy);}
.cm-anthem-band h2,.cm-anthem-band .cm-tag{color:var(--cm-gold);}
.cm-anthem-band p{color:#e7ecf5;}
.cm-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;max-width:900px;margin:0 auto;box-shadow:0 12px 44px rgba(0,0,0,.38);}
.cm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cm-anthem{display:flex;flex-direction:column;align-items:center;gap:14px;margin:28px auto 0;max-width:560px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:22px;}
.cm-anthem figcaption{font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1px;color:var(--cm-gold);font-size:1.05rem;}
.cm-anthem audio{width:100%;}
.cm-anthem .cm-lyric{font-family:'Merriweather',Georgia,serif;font-style:italic;color:#dbe3f1;font-size:1.02rem;line-height:1.6;margin:2px 0 0;}
/* ===== Full-bleed section bands on every page (added 2026-06-29) =====
Pages use Astra ast-plain-container (content-width 1200px), so .cm-section
colored bands were boxed/centered on wide screens. Break them out to 100vw
like .cm-hero already does; .cm-narrow keeps the text at a readable width. */
.cm-section,.cm-stripe{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.cm-section>.cm-narrow{box-sizing:border-box;}
/* ===== Mobile header (added 2026-06-29) =====
Astra collapses the header to the hamburger at <=921px. The logo badge already
contains the "CELEMEMORATE 2026" wordmark, so the text site-title is redundant on
small screens and was wrapping to "CELEMEMO / RATE". Hide it and size the badge. */
@media (max-width:921px){
.ast-header-break-point .site-title,
.ast-header-break-point .ast-site-title-wrap .site-title{display:none!important;}
.ast-header-break-point .site-logo-img .custom-logo,
.ast-header-break-point .custom-logo-link img{max-width:140px!important;height:auto!important;}
.ast-header-break-point .main-header-bar{padding-top:6px;padding-bottom:6px;}
.ast-header-break-point .site-header .ast-site-identity{padding:4px 0;}
.ast-header-break-point .ast-builder-layout-element{display:flex;align-items:center;}
}
/* ===== Countdown on phones (added 2026-06-29) =====
Four boxes overflowed/wrapped (4×88px min-width + gaps > phone width). Make them
equal flexible columns on one row and scale type/padding down. */
@media (max-width:600px){
.cm-countdown{gap:8px;flex-wrap:nowrap;}
.cm-cd-box{min-width:0;flex:1 1 0;padding:12px 4px;}
.cm-cd-num{font-size:1.75rem;}
.cm-cd-lbl{font-size:.56rem;letter-spacing:1px;}
}
/* ===== Event status system (added 2026-06-30) ===== */
.cm-eventgroup{font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1.5px;color:var(--cm-navy);font-size:1.15rem;margin:40px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--cm-gold);}
.cm-eventgroup:first-of-type{margin-top:14px;}
.cm-badge{display:inline-block;font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1px;font-size:.72rem;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:4px;}
.cm-badge--now{background:var(--cm-red);color:#fff;}
.cm-badge--soon{background:var(--cm-navy);color:#fff;}
.cm-badge--past{background:#e3e8f0;color:var(--cm-navy);}
.cm-event--past{border-left-color:#9aa7bd;}
.cm-stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:16px 0;list-style:none;padding:0;}
.cm-stage li{background:#fff;border:1px solid #e3e8f0;border-radius:8px;padding:12px 14px;font-size:.95rem;}
.cm-stage b{display:block;color:var(--cm-red);font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;}
/* ===== Trust / about / contact / resources (added 2026-06-30) ===== */
.cm-prose{max-width:820px;margin:0 auto;}
.cm-prose h2{margin:1.4em 0 .3em;}
.cm-prose p,.cm-prose li{font-size:1.08rem;line-height:1.7;}
.cm-note{background:#fff8d6;border:1px solid var(--cm-gold);border-radius:8px;padding:14px 18px;margin:18px 0;font-size:.98rem;}
.cm-linklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0;list-style:none;padding:0;}
.cm-linklist li{background:#fff;border:1px solid #e3e8f0;border-left:5px solid var(--cm-red);border-radius:8px;padding:16px 18px;box-shadow:0 4px 16px rgba(10,49,97,.06);}
.cm-linklist a{font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;}
.cm-disclosure{background:var(--cm-bg);border:1px solid #e3e8f0;border-left:5px solid var(--cm-navy);border-radius:8px;padding:16px 20px;margin:20px 0;font-size:.98rem;line-height:1.6;}
.cm-disclosure h3{margin:0 0 .3em;font-size:1.05rem;}
/* ===== Button rows (added 2026-07-15) =====
Multi-button CTAs were inline anchors separated by — on phones they
wrapped with no vertical gap and ragged widths. Flex row with gap on desktop,
full-width stacked column on phones. */
.cm-btn-row{display:flex;flex-wrap:wrap;gap:12px;}
/* Flex items ignore the inherited text-align, so a row inside a centred block
would otherwise jump to the left edge. Follow the container's intent. */
.cm-hero .cm-btn-row,
.cm-center .cm-btn-row{justify-content:center;}
@media (max-width:600px){
.cm-btn-row{flex-direction:column;align-items:stretch;}
.cm-btn-row .cm-btn{text-align:center;}
}
/* ============================================================================
Storefront — Milestone A: /shop/ archive redesign (added 2026-07-17, v0.1.13)
Premium patriotic storefront — compact hero, integrated trust row, and a
3-up card grid with a consistent image stage. Presentation only; scoped to
WooCommerce so nothing else on the site is affected.
========================================================================== */
:root{
--cm-stage:#F7F9FC; /* product image stage — a hair off the card white */
--cm-line:#e6ebf3; /* hairline card/border colour */
--cm-muted:#5a6b84; /* supporting copy */
}
/* Our hero carries the H1, so tidy the (now title-less) archive header and keep
the count/sorting hidden even if Astra re-renders them. */
.post-type-archive-product .woocommerce-products-header{margin-bottom:0;padding-bottom:0;}
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering{display:none!important;}
/* --- Shop hero -------------------------------------------------------------- */
.cm-shop-hero{
display:flex;align-items:center;gap:34px;position:relative;overflow:hidden;
background:linear-gradient(135deg,#0A3161 0%,#0d3d78 100%);
border-radius:16px;padding:34px 40px;margin:10px 0 24px;color:#fff;
}
.cm-shop-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
background:linear-gradient(90deg,var(--cm-red),var(--cm-gold));}
.cm-shop-hero__copy{flex:1 1 auto;min-width:0;}
.cm-shop-hero__eyebrow{font-family:var(--cm-head);text-transform:uppercase;letter-spacing:3px;
font-size:.8rem;color:var(--cm-gold);margin:0 0 6px;}
.cm-shop-hero__title{color:#fff;font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.05;margin:0 0 10px;}
.cm-shop-hero__lede{color:#e7ecf5;font-size:1.04rem;line-height:1.55;margin:0;max-width:62ch;}
.cm-shop-hero__emblem{flex:0 0 auto;width:210px;height:auto;background:#fff;
border-radius:14px;padding:13px;box-shadow:0 10px 30px rgba(0,0,0,.28);}
/* --- Trust / disclosure row (replaces the oversized legal box) -------------- */
.cm-shop-trust{list-style:none;margin:0 0 30px;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cm-shop-trust li{background:#fff;border:1px solid var(--cm-line);border-radius:10px;
padding:14px 16px 14px 18px;position:relative;box-shadow:0 3px 12px rgba(10,49,97,.05);}
.cm-shop-trust li::before{content:"✓";position:absolute;left:16px;top:13px;color:var(--cm-gold);
font-weight:700;font-family:var(--cm-head);}
.cm-shop-trust strong{display:block;padding-left:22px;color:var(--cm-navy);font-family:var(--cm-head);
text-transform:uppercase;letter-spacing:.4px;font-size:.82rem;margin-bottom:3px;}
.cm-shop-trust span{display:block;padding-left:22px;color:var(--cm-muted);font-size:.86rem;line-height:1.4;}
.cm-shop-trust a{color:var(--cm-red);text-decoration:underline;}
.cm-shop-trust a:hover{color:var(--cm-navy);}
/* --- Product grid: override Astra's flex grid for a predictable 3 / 2 / 1 ---- */
.woocommerce ul.products,.woocommerce-page ul.products{
display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:26px;
margin:0 0 8px!important;padding:0!important;}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
width:auto!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;
display:flex;flex-direction:column;background:#fff;border:1px solid var(--cm-line);
border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(10,49,97,.08);
transition:transform .18s ease,box-shadow .18s ease;}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,49,97,.16);}
.woocommerce ul.products li.product:focus-within{outline:3px solid var(--cm-gold);outline-offset:2px;}
/* --- Consistent image stage (fixes duplicate/cropped/undersized art) -------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
position:relative;margin:0;background:var(--cm-stage);border-bottom:1px solid var(--cm-line);}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-loop-product__link{
display:flex;align-items:center;justify-content:center;
height:clamp(230px,22vw,268px);padding:22px;box-sizing:border-box;}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{
width:auto!important;max-width:100%;height:100%;max-height:100%;object-fit:contain;
margin:0!important;transition:transform .25s ease;}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img{transform:scale(1.04);}
/* One clear CTA per card → hide Astra's on-image hover bag button. */
.woocommerce ul.products li.product .ast-on-card-button{display:none!important;}
/* Made-to-order cue via WooCommerce's own .onbackorder class (honest availability). */
.woocommerce ul.products li.product.onbackorder .astra-shop-thumbnail-wrap::after{
content:"Made to order";position:absolute;top:12px;left:12px;background:var(--cm-navy);color:#fff;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;font-size:.66rem;
padding:5px 10px;border-radius:999px;}
/* --- Card summary ----------------------------------------------------------- */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
display:flex;flex-direction:column;flex:1 1 auto;padding:18px 18px 20px;}
.woocommerce ul.products li.product .ast-woo-product-category{
color:var(--cm-muted);font-family:var(--cm-head);text-transform:uppercase;letter-spacing:1px;
font-size:.68rem;margin:0 0 4px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-family:var(--cm-head);color:var(--cm-navy);font-size:1.16rem;line-height:1.2;
text-transform:none;padding:0!important;margin:0 0 6px;}
.woocommerce ul.products li.product a.ast-loop-product__link{text-decoration:none;}
.woocommerce ul.products li.product .price{
color:var(--cm-red)!important;font-family:var(--cm-head);font-size:1.3rem;font-weight:600;margin:0 0 14px;}
.woocommerce ul.products li.product .price del{color:#93a0b5;font-weight:400;font-size:1rem;margin-right:6px;}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
/* Pin the CTA to the card bottom so every button lines up on an equal-height row. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart{margin-top:auto;}
/* --- Brand CTA on the cards (overrides Astra's global blue --ast-global-color-0) */
.woocommerce ul.products li.product a.button{
background:var(--cm-red)!important;border:2px solid var(--cm-red)!important;color:#fff!important;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.6px;font-weight:600;
border-radius:8px;padding:12px 20px;width:100%;text-align:center;box-sizing:border-box;
transition:background .16s ease,border-color .16s ease;}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus{
background:var(--cm-navy)!important;border-color:var(--cm-navy)!important;color:#fff!important;}
.woocommerce ul.products li.product .added_to_cart{
display:block;text-align:center;margin-top:8px;color:var(--cm-navy);font-family:var(--cm-head);
text-transform:uppercase;letter-spacing:.5px;font-size:.78rem;}
/* --- Mission connection ----------------------------------------------------- */
.cm-shop-mission{margin:26px 0 6px;padding:26px 24px;background:var(--cm-bg);
border:1px solid var(--cm-line);border-radius:14px;text-align:center;}
.cm-shop-mission__line{font-family:'Merriweather',Georgia,serif;font-style:italic;color:var(--cm-navy);
font-size:1.12rem;line-height:1.55;margin:0 auto 16px;max-width:60ch;}
.cm-shop-mission__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.cm-shop-mission__links a{display:inline-block;background:#fff;border:1px solid var(--cm-line);border-radius:999px;
padding:8px 18px;color:var(--cm-navy);font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;
font-size:.78rem;text-decoration:none;}
.cm-shop-mission__links a:hover{background:var(--cm-navy);color:#fff;border-color:var(--cm-navy);}
/* --- Responsive ------------------------------------------------------------- */
@media (max-width:1024px){
.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr)!important;gap:20px;}
.cm-shop-trust{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
.cm-shop-hero{flex-direction:column;text-align:center;padding:28px 22px;gap:18px;}
.cm-shop-hero__lede{margin-left:auto;margin-right:auto;}
.cm-shop-hero__emblem{order:-1;width:min(230px,64%);}
}
@media (max-width:600px){
.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr!important;gap:18px;}
.cm-shop-trust{grid-template-columns:1fr;}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-loop-product__link{height:262px;}
}
@media (prefers-reduced-motion:reduce){
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{transition:none!important;}
.woocommerce ul.products li.product:hover{transform:none;}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img{transform:none;}
}
/* ============================================================================
Single product — Milestone B: /product/* detail polish (added 2026-07-17, v0.1.14)
Framed gallery, brand variation & purchase controls, price, tabs. Presentation
only — no gateway/price/tax/variation-logic changes. WooPay express button and
all payment UI are left untouched.
========================================================================== */
/* Title + price + short description */
.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.12;margin:.1em 0 .3em;text-transform:none;}
.woocommerce div.product p.price,
.woocommerce div.product .summary .price{
color:var(--cm-red)!important;font-family:var(--cm-head);font-size:1.7rem;font-weight:600;margin:.1em 0 14px;}
.woocommerce div.product p.price del,
.woocommerce div.product .summary .price del{color:#93a0b5;font-weight:400;font-size:1.1rem;margin-right:8px;}
.woocommerce div.product p.price ins,
.woocommerce div.product .summary .price ins{text-decoration:none;}
.woocommerce div.product .woocommerce-product-details__short-description{
color:#3a4761;font-size:1.05rem;line-height:1.6;margin-bottom:18px;}
.woocommerce div.product .posted_in,
.woocommerce div.product .product_meta{font-size:.9rem;color:var(--cm-muted);}
.woocommerce div.product .product_meta a{color:var(--cm-red);}
/* Framed gallery + thumbnail active state */
.woocommerce div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
border:1px solid var(--cm-line);border-radius:14px;background:var(--cm-stage);}
.woocommerce div.product .flex-control-thumbs{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;padding:0;}
.woocommerce div.product .flex-control-thumbs li{margin:0;width:auto;}
.woocommerce div.product .flex-control-thumbs li img{
border:1px solid var(--cm-line);border-radius:8px;background:var(--cm-stage);opacity:.7;transition:opacity .15s ease,border-color .15s ease;}
.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active{opacity:1;border-color:var(--cm-red);}
/* Variation controls */
.woocommerce div.product form.cart .variations{margin-bottom:14px;}
.woocommerce div.product form.cart .variations th.label{
font-family:var(--cm-head);color:var(--cm-navy);text-transform:uppercase;letter-spacing:.6px;
font-size:.82rem;vertical-align:middle;padding-right:14px;}
.woocommerce div.product form.cart .variations td{padding-bottom:10px;}
.woocommerce div.product form.cart .variations select{
border:2px solid var(--cm-line);border-radius:8px;padding:11px 34px 11px 12px;min-height:48px;
background-color:#fff;font-family:var(--cm-body);font-size:1rem;color:var(--cm-ink);width:100%;max-width:320px;}
.woocommerce div.product form.cart .variations select:focus{
border-color:var(--cm-navy);outline:2px solid transparent;box-shadow:0 0 0 3px rgba(10,49,97,.18);}
.woocommerce div.product form.cart .reset_variations{
color:var(--cm-red);font-size:.85rem;font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.4rem;}
.woocommerce div.product .woocommerce-variation-availability .stock{font-weight:600;}
/* Quantity + add to cart */
.woocommerce div.product form.cart .quantity input.qty{
border:2px solid var(--cm-line);border-radius:8px;padding:10px;min-height:48px;width:78px;font-family:var(--cm-body);}
.woocommerce div.product form.cart .single_add_to_cart_button{
background:var(--cm-red)!important;border:2px solid var(--cm-red)!important;color:#fff!important;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.6px;font-weight:600;
border-radius:8px;padding:13px 32px;min-height:48px;transition:background .16s ease,border-color .16s ease;}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus{
background:var(--cm-navy)!important;border-color:var(--cm-navy)!important;color:#fff!important;}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled{
background:#c3ccd8!important;border-color:#c3ccd8!important;color:#fff!important;cursor:not-allowed;opacity:1;}
/* Honest availability + validation notices */
.woocommerce div.product .stock.available-on-backorder,
.woocommerce div.product .wc-backorder-notification{color:var(--cm-navy);font-weight:600;}
.woocommerce-info,.woocommerce-error,.woocommerce-message,.woocommerce-noreviews{
border-top-color:var(--cm-red);border-radius:8px;}
.woocommerce div.product form.cart .woocommerce-variation.single_variation .woocommerce-variation-add-to-cart{margin-top:6px;}
/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border-bottom:1px solid var(--cm-line);}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--cm-line);}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:transparent;border:0;border-radius:0;margin:0 4px -1px 0;padding:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.6px;font-size:.86rem;
color:var(--cm-muted);padding:12px 16px;display:block;border-bottom:3px solid transparent;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--cm-navy);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{border-bottom-color:var(--cm-red);}
.woocommerce div.product .woocommerce-Tabs-panel{padding-top:20px;line-height:1.7;color:#3a4761;}
.woocommerce div.product .woocommerce-Tabs-panel h2{font-size:1.3rem;}
/* Related products heading (cards inherit the Milestone A grid) */
.woocommerce .related.products>h2,.woocommerce .upsells.products>h2{
font-size:clamp(1.35rem,2.4vw,1.7rem);margin:0 0 20px;padding-top:8px;}
@media (max-width:768px){
.woocommerce div.product form.cart .variations select{max-width:100%;}
.woocommerce div.product form.cart .single_add_to_cart_button{width:100%;}
}
/* ============================================================================
Cart & Checkout — Milestone C: visual polish (added 2026-07-17, v0.1.15)
Typography, spacing, cart table, order-summary card, coupon, notices, form
fields, and brand buttons. VISUAL ONLY — no gateway, price, tax, shipping, or
checkout-field changes. The WooPayments card iframe, WooPay button, payment
method list, and place-order logic are left untouched.
========================================================================== */
/* --- Primary commerce CTAs → brand red -------------------------------------- */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce form.checkout #place_order{
background:var(--cm-red)!important;border:2px solid var(--cm-red)!important;color:#fff!important;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.6px;font-weight:600;
border-radius:8px;padding:14px 28px;min-height:52px;font-size:1.02rem;width:100%;box-sizing:border-box;
transition:background .16s ease,border-color .16s ease;}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus{background:var(--cm-navy)!important;border-color:var(--cm-navy)!important;color:#fff!important;}
/* --- Secondary buttons (apply coupon / update cart / view cart) → navy ------- */
.woocommerce button[name="apply_coupon"],
.woocommerce button[name="update_cart"],
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button{
background:var(--cm-navy)!important;border:2px solid var(--cm-navy)!important;color:#fff!important;
font-family:var(--cm-head);text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-radius:8px;
padding:12px 20px;min-height:46px;}
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover{background:var(--cm-red)!important;border-color:var(--cm-red)!important;color:#fff!important;}
.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"].disabled{background:#c3ccd8!important;border-color:#c3ccd8!important;opacity:1;cursor:not-allowed;}
/* --- Cart table + order review ---------------------------------------------- */
.woocommerce table.shop_table{
border:1px solid var(--cm-line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;
box-shadow:0 4px 16px rgba(10,49,97,.05);}
.woocommerce table.shop_table th{
background:var(--cm-bg);font-family:var(--cm-head);color:var(--cm-navy);text-transform:uppercase;
letter-spacing:.5px;font-size:.8rem;padding:14px 16px;}
.woocommerce table.shop_table td{padding:16px;vertical-align:middle;}
.woocommerce table.cart img{border-radius:8px;border:1px solid var(--cm-line);background:var(--cm-stage);}
.woocommerce a.remove{
color:var(--cm-red)!important;border:1px solid var(--cm-line);font-weight:700;line-height:1.5;}
.woocommerce a.remove:hover{background:var(--cm-red)!important;color:#fff!important;border-color:var(--cm-red)!important;}
.woocommerce .cart-collaterals .cart_totals>h2,
.woocommerce #order_review_heading{
font-family:var(--cm-head);color:var(--cm-navy);text-transform:uppercase;letter-spacing:.6px;
font-size:1.35rem;margin-bottom:14px;}
.woocommerce .cart_totals table.shop_table,
.woocommerce #order_review .shop_table{background:#fff;}
.woocommerce .cart_totals .order-total .amount,
.woocommerce #order_review .order-total .amount{color:var(--cm-red);font-family:var(--cm-head);font-size:1.2rem;}
/* --- Order-summary card (checkout) ------------------------------------------ */
.woocommerce-checkout #order_review{
background:#fff;border:1px solid var(--cm-line);border-radius:14px;padding:22px;
box-shadow:0 6px 22px rgba(10,49,97,.07);}
.woocommerce-checkout #payment{background:transparent;border-radius:10px;}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--cm-line);}
/* --- Coupon + form fields --------------------------------------------------- */
.woocommerce .coupon input#coupon_code,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single{
border:2px solid var(--cm-line)!important;border-radius:8px!important;padding:11px 12px;min-height:48px;
box-sizing:border-box;font-family:var(--cm-body);}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .coupon input#coupon_code:focus{
border-color:var(--cm-navy)!important;outline:2px solid transparent;box-shadow:0 0 0 3px rgba(10,49,97,.16);}
.woocommerce form .form-row label{font-weight:600;color:var(--cm-ink);}
.woocommerce form .form-row .required{color:var(--cm-red);}
/* --- Section headings + notices --------------------------------------------- */
.woocommerce-checkout h3,.woocommerce-checkout .woocommerce-billing-fields>h3,
.woocommerce-checkout #customer_details h2{
font-family:var(--cm-head);color:var(--cm-navy);text-transform:uppercase;letter-spacing:.5px;
border-bottom:2px solid var(--cm-gold);padding-bottom:8px;}
.woocommerce-message{border-top-color:#2e7d32;border-radius:8px;}
.woocommerce-info{border-top-color:var(--cm-navy);border-radius:8px;}
.woocommerce-error{border-top-color:var(--cm-red);border-radius:8px;}
.woocommerce-message::before{color:#2e7d32;}
.woocommerce-info::before{color:var(--cm-navy);}
/* --- Merchandise-not-donation disclosure on cart/checkout ------------------- */
.cm-checkout-note{
margin:14px 0 4px;padding:12px 16px;background:var(--cm-bg);border:1px solid var(--cm-line);
border-left:4px solid var(--cm-navy);border-radius:8px;font-size:.88rem;line-height:1.5;color:#3a4761;}
.cm-checkout-note a{color:var(--cm-red);text-decoration:underline;}
/* --- Cart page heading + "how ordering works" band -------------------------- */
.woocommerce-cart .cart_totals,.woocommerce-cart .woocommerce-cart-form{margin-top:8px;}
@media (max-width:768px){
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order{font-size:1rem;}
.woocommerce-checkout #order_review{padding:16px;}
.woocommerce table.shop_table td{padding:12px;}
}
/* ============================================================================
Compact desktop header — Milestone D (added 2026-07-17, v0.1.16)
The desktop header was ~201px tall: a 175px logo plus a 13-item primary menu
whose links carried an 80px line-height, so the wrapped second row doubled the
bar to ~160px. This trims the logo and collapses the menu line-height so the
two rows sit compactly (~95px total), lifting every page's first viewport —
most visibly the shop. Desktop only (min-width 922px); the mobile hamburger
header (<=921px) is deliberately untouched. Keyboard focus + hover unaffected.
========================================================================== */
@media (min-width:922px){
.site-header .custom-logo-link img,
header .custom-logo-link img{width:112px!important;max-width:112px!important;height:auto!important;}
.ast-logo-title-inline .ast-site-identity{padding:6px 0!important;}
.ast-primary-header-bar .main-header-menu{align-items:center!important;padding:8px 0!important;}
.ast-primary-header-bar .main-header-menu > .menu-item > a,
.ast-primary-header-bar .ast-nav-menu > .menu-item > a{
line-height:42px!important;padding:0 11px!important;font-size:15px!important;}
.site-header .site-title{font-size:1.1rem!important;line-height:1.2!important;}
}
/* ============================================================================
"Design preview" label (added 2026-07-17, v0.1.17)
Honest cue for products still on the commemorative-emblem placeholder (the
made-to-order mug) — the image is the design, not a photo of the item. Gold
pill, top-right, clear of the top-left "Made to order" badge. Set via PHP on
products whose featured image is media 103, so it self-clears once a real
photo is assigned.
========================================================================== */
.woocommerce ul.products li.product.cm-uses-preview .astra-shop-thumbnail-wrap::before,
.cm-single-preview .woocommerce-product-gallery::before{
content:"Design preview";position:absolute;z-index:3;top:12px;right:12px;
background:var(--cm-gold);color:var(--cm-navy);font-family:var(--cm-head);
text-transform:uppercase;letter-spacing:.5px;font-size:.66rem;font-weight:600;
padding:5px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(10,49,97,.18);}
.cm-single-preview .woocommerce-product-gallery{position:relative;}