/* Monthly Promotions: sale pill, month badge, countdown, shortcode blocks. Uses the theme's colour tokens when present. */
.psga-off-pill { display:inline-block; margin-left:6px; padding:3px 9px; border-radius:999px; background:var(--pss-blue,#9e4f2e); color:#fffaf3; font:800 12px/1.3 var(--pss-body,sans-serif); letter-spacing:.03em; vertical-align:middle; white-space:nowrap; }
.price del, .pss-option-price del { opacity:.7; }
.price ins, .pss-option-price ins { text-decoration:none; }
.psga-month-badge.is-clay { background:var(--pss-blue,#9e4f2e); color:#fffaf3; }
.psga-month-badge.is-sage { background:var(--pss-sage-dark,#55613f); color:#fffaf3; }
.psga-month-badge.is-dark { background:var(--pss-ink,#3a2a20); color:#fffaf3; }
.psga-countdown { display:inline-flex; gap:6px; align-items:baseline; padding:6px 12px; border-radius:999px; background:var(--pss-card,#fffaf3); border:1px solid var(--pss-line,#e3d4bf); font-size:14px; }
.psga-countdown-label { color:var(--pss-muted,#6e5a4b); }
.psga-countdown [data-psga-countdown-value] { font-weight:800; font-variant-numeric:tabular-nums; }
.psga-current-sale { display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-radius:var(--pss-radius,18px); background:var(--pss-card,#fffaf3); border:1px solid var(--pss-line,#e3d4bf); }
.psga-current-sale-title { font:500 26px/1.15 var(--pss-display,serif); }
.psga-coupon-callout { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.psga-hero { position:relative; display:grid; overflow:hidden; border-radius:var(--pss-radius,18px); }
.psga-hero-picture img { display:block; width:100%; height:auto; }
.psga-hero-copy { padding:24px; }
.psga-hero-badge { display:inline-block; margin-bottom:10px; padding:4px 12px; border-radius:999px; background:var(--pss-bisque,#e9c9a8); font-weight:800; font-size:13px; }
#wpadminbar .psga-preview-node > .ab-item { background:#9e4f2e !important; color:#fff !important; }
.psga-single-badge { margin:0 0 6px; }
.psga-single-badge .pss-badge { display:inline-block; }
.pss-variety-price del { font-size:.85em; }
.pss-variety-price .psga-off-pill { display:none; }
/* Keep the OFF pill vertically centred on the price line at any font size. */
.price:has(.psga-off-pill), .pss-product-price:has(.psga-off-pill), .pss-option-price:has(.psga-off-pill), .pss-variety-price:has(.psga-off-pill) { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.price:has(.psga-off-pill) > del, .price:has(.psga-off-pill) > ins, .pss-product-price:has(.psga-off-pill) del, .pss-product-price:has(.psga-off-pill) ins { line-height:1; }
.psga-off-pill { margin-left:0 !important; vertical-align:baseline; line-height:1.3; }

/* ---------- Seasonal decoration (decor.php) ---------- */
/* A tasteful few shapes in the empty margins beside the page. Only where those margins exist (wide screens). */
.psga-decor { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; --gutter:max(0px, (100vw - 1290px) / 2); }
.psga-decor-item { position:absolute; top:var(--top); width:calc(var(--size) * 1.3); height:calc(var(--size) * 1.3); opacity:.8; transform:rotate(var(--turn)); animation:psga-decor-drift 9s ease-in-out var(--delay) infinite; }
.psga-decor-item.is-left { left:calc(var(--gutter) * var(--depth) - var(--size) / 2); }
.psga-decor-item.is-right { right:calc(var(--gutter) * var(--depth) - var(--size) / 2); }
.psga-decor-item svg, .psga-hero-decor-item svg { display:block; width:100%; height:100%; }
@keyframes psga-decor-drift { 0%,100% { transform:translateY(0) rotate(var(--turn)); } 50% { transform:translateY(-7px) rotate(calc(var(--turn) + 5deg)); } }
@media (max-width:1439px) { .psga-decor { display:none; } }
/* The footer (and anything else positioned) stays above the margin shapes. */
body[class*="psga-decor-"] .pss-footer, body[class*="psga-decor-"] .pss-campaign-reopen { z-index:1; }

/* Around the home hero picture: three shapes tucked at the edges. */
.pss-hero-art .psga-hero-decor { position:absolute; inset:0; z-index:2; pointer-events:none; }
.psga-hero-decor-item { position:absolute; width:clamp(34px,3.6vw,54px); aspect-ratio:1; filter:drop-shadow(0 2px 3px rgba(74,48,30,.12)); animation:psga-decor-bob 7s ease-in-out infinite; }
.psga-hero-decor-item.is-a { top:2%; left:-2%; --turn:-14deg; transform:rotate(-14deg); }
.psga-hero-decor-item.is-b { top:12%; right:-2%; width:clamp(28px,2.8vw,42px); --turn:12deg; transform:rotate(12deg); animation-delay:-2.5s; }
.psga-hero-decor-item.is-c { bottom:30%; left:-10%; --turn:8deg; transform:rotate(8deg); animation-delay:-4.5s; }
/* Phones: keep the star inside the screen (-10% hangs half of it past the left edge). */
@media (max-width:600px) { .psga-hero-decor-item.is-c { left:0; } }
@keyframes psga-decor-bob { 0%,100% { transform:translateY(0) rotate(var(--turn)); } 50% { transform:translateY(-5px) rotate(calc(var(--turn) + 4deg)); } }

/* The hero's clay blobs take the season's colours. */
body[class*="psga-decor-"] .pss-hero-blob { background:var(--psga-decor-blob, var(--pss-bisque)); transition:background .4s; }
body[class*="psga-decor-"] .pss-hero-blob.is-sage { background:var(--psga-decor-blob2, var(--pss-sage)); }

@media (prefers-reduced-motion:reduce) { .psga-decor-item, .psga-hero-decor-item { animation:none; } }
