/* SAG Features styles — Gift Finder, Petty Holidays Calendar, shared modal/cards.
   Uses the theme's design tokens when present, with brand fallbacks so the features
   still look right under any theme. */
:root {
  --sag-orange: var(--orange, #F86808);
  --sag-orange-100: var(--orange-100, #FDE3CE);
  --sag-orange-900: var(--orange-900, #7A3104);
  --sag-teal: var(--teal-700, #2BA8A8);
  --sag-cream: var(--cream, #F7F5F1);
  --sag-charcoal: var(--charcoal-900, #383838);
  --sag-c100: var(--charcoal-100, #E4E2DE);
  --sag-c300: var(--charcoal-300, #A8A39B);
  --sag-c500: var(--charcoal-500, #6E6A62);
  --sag-white: var(--white, #fff);
  --sag-r: var(--r-md, 14px);
  --sag-display: var(--font-display, "Baloo 2", system-ui, sans-serif);
}

/* ---- Shared: product grid + stars + buttons fallback ---- */
.gift-finder .product-grid,
.petty-calendar ~ * .product-grid,
.modal .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.modal .product-card, .gift-finder .product-card { background: var(--sag-white); border: 2px solid var(--sag-c100); border-radius: var(--sag-r); overflow: hidden; }
.product-card .product-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 4px; }
.product-card .product-collection { font-size: 0.75rem; font-weight: 700; color: var(--sag-c500); text-transform: uppercase; letter-spacing: 0.03em; }
.product-card .product-title { font-family: var(--sag-display); font-weight: 700; font-size: 1rem; margin: 0; }
.product-card .product-title a { color: inherit; text-decoration: none; }
.product-card .product-price { font-weight: 700; }
.stars { position: relative; display: inline-block; letter-spacing: 2px; line-height: 1; }
.stars-bg { color: var(--sag-c100); }
.stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--sag-orange); }
.stars-count { font-size: 0.85rem; color: var(--sag-c500); font-weight: 600; }
.sag-features .btn, .gift-finder .btn, .modal .btn { display: inline-block; font-family: var(--sag-display); font-weight: 700; border-radius: var(--sag-r); padding: 0.7rem 1.2rem; cursor: pointer; text-decoration: none; border: none; }

/* ---- Modal ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(20,20,20,0.6); padding: 1.25rem; opacity: 0; transition: opacity 0.2s ease; }
.modal-overlay.is-in { opacity: 1; }
.modal { background: var(--sag-white); border-radius: 18px; max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sag-c100); position: sticky; top: 0; background: var(--sag-white); }
.modal-head h3 { margin: 0; font-family: var(--sag-display); }
.modal-close { width: 38px; height: 38px; display: grid; place-items: center; border: none; background: transparent; border-radius: 50%; cursor: pointer; }
.modal-close svg { width: 24px; height: 24px; }
.modal-body { padding: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .modal-overlay { transition: none; } }

/* ---- Gift Finder ---- */
.gift-finder { min-height: 360px; }
.gf-progress { height: 8px; background: var(--sag-c100); border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; }
.gf-progress i { display: block; height: 100%; background: var(--sag-orange); border-radius: 999px; transition: width 0.35s ease; }
.gf-step { text-align: center; }
.gf-step h2 { margin: 0.5rem 0 1.25rem; font-family: var(--sag-display); }
.gf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.gf-option { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 2px solid var(--sag-c100); background: var(--sag-white); border-radius: var(--sag-r); font-family: var(--sag-display); font-weight: 700; font-size: 1.05rem; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.gf-option:hover { border-color: var(--sag-orange); transform: translateY(-2px); }
.gf-emoji { font-size: 1.6rem; line-height: 1; }
.gf-results .product-grid { margin: 1.25rem 0; }
.gf-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.gf-step:focus, .gf-step:focus-visible { outline: none; }
@media (max-width: 560px) { .gf-options { grid-template-columns: 1fr; } }

/* ---- Calendar ---- */
.cal-today-banner { display: inline-block; margin-top: 0.75rem; padding: 0.7rem 1.1rem; border: 2px solid var(--sag-orange); background: var(--sag-white); border-radius: 999px; font-family: var(--sag-display); font-weight: 700; cursor: pointer; }
.cal-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.cal-title { margin: 0; text-align: center; font-family: var(--sag-display); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal-head { margin-bottom: 0.5rem; }
.cal-wd { text-align: center; font-family: var(--sag-display); font-weight: 700; color: var(--sag-c300); font-size: 0.85rem; padding: 0.3rem 0; }
.cal-cell { position: relative; min-height: 92px; border: 1.5px solid var(--sag-c100); border-radius: 10px; padding: 0.4rem; background: var(--sag-white); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.cal-cell.is-empty { border: none; background: transparent; }
.cal-num { font-family: var(--sag-display); font-weight: 700; font-size: 0.85rem; color: var(--sag-c500); }
.cal-cell.has-holiday { cursor: pointer; background: var(--sag-cream); border-color: var(--sag-orange-100); font: inherit; transition: transform 0.1s, border-color 0.15s; }
.cal-cell.has-holiday:hover { transform: translateY(-2px); border-color: var(--sag-orange); }
.cal-cell.has-holiday .cal-num { color: var(--sag-orange-900); }
.cal-emoji { font-size: 1.5rem; line-height: 1; }
.cal-name { font-family: var(--sag-display); font-weight: 700; font-size: 0.72rem; line-height: 1.15; color: var(--sag-charcoal); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cal-cell.is-today { outline: 3px solid var(--sag-teal); outline-offset: 1px; }
.cal-modal-blurb { font-size: 1.05rem; margin-bottom: 1.25rem; }
.cal-modal-emoji { font-size: 1.3rem; }
.cal-upcoming-h { font-family: var(--sag-display); margin-top: 2rem; }
.cal-upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.cal-up-item { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 0.75rem; border: 2px solid var(--sag-c100); border-radius: var(--sag-r); background: var(--sag-white); cursor: pointer; text-align: left; transition: transform 0.1s, border-color 0.15s; }
.cal-up-item:hover { transform: translateY(-2px); border-color: var(--sag-orange); }
.cal-up-date { font-family: var(--sag-display); font-weight: 800; color: var(--sag-orange); font-size: 0.9rem; }
.cal-up-emoji { font-size: 1.5rem; }
.cal-up-name { font-family: var(--sag-display); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 600px) { .cal-cell { min-height: 58px; } .cal-name { display: none; } .cal-grid { gap: 4px; } }

/* ---- Homepage teaser pill ---- */
.hero-holiday { display: inline-flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.14); color: var(--sag-cream); font-family: var(--sag-display); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.hero-holiday:hover { background: rgba(255,255,255,0.24); }

/* ---- Toast ---- */
.toast-wrap { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.75rem; z-index: 400; }
.toast { background: var(--sag-charcoal); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; font-weight: 600; transition: opacity 0.3s; }