/* =====================================================================
   Stoaktivit — sa.css (vlastní vzhled nad DriveMood)
   Načítá se po theme.css, checkout.css i dark.css. Tokeny tmavého motivu (zlatá = --red, podklad = --white,
   inkoust = --black, písmo --font-head = Oswald) jsou v dark.css; tady je jen to, co má DriveMood natvrdo
   (bílý text na tlačítkách, červený štítek), menu v Oswaldu, úvodní stránka a patička podle návrhu 5.
   ===================================================================== */
:root{--sa-acc:#e5c070;--sa-acc-h:#f0d08a;--sa-ink:#131316;--sa-ease:cubic-bezier(.23,1,.32,1)}

/* ---------- globální: zlatá tlačítka a štítky mají tmavý text ---------- */
body.dm-dark .dm-btn--primary,body.dm-dark .dm-pcard-add,body.dm-dark .dm-qv-cross-add,body.dm-dark .dm-cta-add,
body.dm-dark .dm-filter-apply,body.dm-dark .dm-quiz-go,body.dm-dark .dm-bento-card .pill-cta,
body.dm-dark.woocommerce div.product .dm-summary .single_add_to_cart_button,
body.dm-dark .dm-scent-submit,body.dm-dark .dm-rec-add.is-primary{color:var(--sa-ink)}
body.dm-dark .wc-block-components-button.contained,body.dm-dark .wc-block-components-checkout-place-order-button,
body.dm-dark .wc-block-cart__submit-button,body.dm-dark .wc-block-components-totals-coupon__button,
body.dm-dark .wc-block-components-button.contained .wc-block-components-button__text{color:var(--sa-ink) !important}
body.dm-dark .dm-cart-badge{color:var(--sa-ink);font-weight:700}
body.dm-dark .dm-pcard-badge,body.dm-dark .dm-sale-pct,body.dm-dark .dm-scent-badge{color:var(--sa-ink)}
body.dm-dark .dm-navdot{background:var(--sa-acc)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- typografie: Oswald v nadpisech (500, ne 700) a v menu ---------- */
body.dm-dark h1:not(.dm-pcard-name-wrap),body.dm-dark h2:not(.dm-pcard-name-wrap){font-weight:500;letter-spacing:.02em;text-transform:uppercase}
body.dm-dark h3:not(.dm-pcard-name-wrap):not(.dm-drawer-head h3){font-weight:500;letter-spacing:.04em}
.dm-logo{font-family:var(--font-head);font-style:normal;font-weight:600;letter-spacing:.08em}
.dm-logo--custom img{max-height:40px}
.dm-nav{font-family:var(--font-head);font-size:15px;font-weight:500;letter-spacing:.08em}
@media (hover:hover){body.dm-dark .dm-nav > a:hover,body.dm-dark .dm-nav li > a:hover,body.dm-dark .dm-nav .dm-navitem:hover{color:var(--sa-acc)}}
body.dm-dark .dm-pcard-name{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:17px;font-weight:500;line-height:1.15;color:var(--black)}
body.dm-dark .dm-section-head h2{font-size:clamp(24px,2.6vw,34px)}

/* ---------- úvodní stránka (návrh 5) ---------- */
.sa-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sa-kick{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-acc)}
.sa-hero{padding:56px 0 48px;background:radial-gradient(900px 500px at 70% 20%,#2a2416 0%,#131316 60%)}
.sa-hero-w{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
body.dm-dark .sa-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.08;margin:0}
.sa-lead{font-size:16.5px;color:var(--text-2);margin:18px 0 26px;max-width:54ch;line-height:1.55}
.sa-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sa-btn{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:10px;background:var(--sa-acc);color:var(--sa-ink);
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:15px;font-weight:500;border:1.5px solid var(--sa-acc);
  transition:transform 160ms var(--sa-ease),background 160ms ease,border-color 160ms ease}
.sa-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .sa-btn:hover{transform:translateY(-1px);background:var(--sa-acc-h);border-color:var(--sa-acc-h)}
  .sa-btn:hover:active{transform:scale(.97)}
  .sa-btn--ghost:hover{background:var(--surface-2);border-color:var(--border-btn)}
  .sa-btn--dark:hover{background:#2a2a31;border-color:#2a2a31}
}
.sa-btn--ghost{background:transparent;color:var(--black);border-color:var(--border-btn)}
.sa-btn--dark{background:var(--sa-ink);color:#f3efe6;border-color:var(--sa-ink)}
.sa-note{margin:22px 0 0;font-size:13px;color:var(--text-3)}
.sa-hero-vis{position:relative;height:520px}
.sa-hv1,.sa-hv2{position:absolute;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.sa-hv1{width:72%;height:100%;left:0;top:0}
.sa-hv2{width:42%;height:48%;right:0;bottom:-6%;border:6px solid var(--white)}
.sa-sec{padding:56px 0}
.sa-sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
body.dm-dark .sa-sh h2{font-size:clamp(26px,3vw,40px);margin:0}
.sa-sh--c{display:grid;justify-items:center;text-align:center;gap:4px;margin-bottom:30px}
.sa-sh--c .sa-kick{margin-bottom:6px}
.sa-sd{color:var(--text-2);margin:10px 0 26px;max-width:60ch}
.sa-more{font-size:14px;font-weight:600;color:var(--sa-acc);border-bottom:1px solid currentColor;padding-bottom:2px}
.sa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sa-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  transition:transform 200ms var(--sa-ease),box-shadow 200ms var(--sa-ease)}
@media (hover:hover) and (pointer:fine){.sa-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}}
.sa-card:active{transform:scale(.985)}
.sa-card-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:#202026}
.sa-card-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sa-card-i{display:grid;gap:3px;padding:14px 16px 16px}
.sa-card-n{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:19px;font-weight:500;line-height:1.15}
.sa-card-s{font-size:13px;color:var(--text-3)}
.sa-card-p{margin-top:6px;font-weight:700;font-size:15px}
.sa-card-p del{color:var(--text-3);font-weight:400;margin-right:8px;text-decoration:line-through}
.sa-card-p ins{text-decoration:none}
.sa-band{padding:0}
.sa-band-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:var(--sa-acc);border-radius:14px;padding:40px;color:var(--sa-ink);margin-top:8px}
.sa-band .sa-kick{color:#6b5420;margin-bottom:8px}
body.dm-dark .sa-band h2{margin:0;color:var(--sa-ink)}
.sa-band-copy p:not(.sa-kick){margin:12px 0 22px;color:#3d3524;max-width:48ch}
.sa-band-price{font-weight:700;font-size:18px;color:var(--sa-ink)}
.sa-band-price del{font-weight:400;opacity:.6;margin-right:8px;font-size:15px}
.sa-band-price ins{text-decoration:none}
.sa-band-img{border-radius:14px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:30% 40%;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.sa-boxes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sa-box{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:#000;border:1px solid var(--border)}
.sa-box img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--sa-ease)}
@media (hover:hover) and (pointer:fine){.sa-box:hover img{transform:scale(1.04)}}
.sa-box::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(19,19,22,.82) 100%)}
.sa-box-t{position:absolute;left:0;right:0;bottom:24px;text-align:center;z-index:1;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(20px,2.4vw,30px);font-weight:500;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.6)}
.sa-steps{background:#17171b}
.sa-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sa-s{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sa-s img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
body.dm-dark .sa-s h3{margin:0;padding:16px 18px 18px;color:var(--sa-acc);text-align:center;font-size:20px;letter-spacing:.06em;font-weight:500;text-transform:uppercase;line-height:1.2}
.sa-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px;padding-top:32px;border-top:1px solid var(--border)}
.sa-icons div{display:grid;justify-items:center;gap:10px;text-align:center;font-size:14.5px;color:var(--text-2)}
.sa-icons svg{width:32px;height:32px;fill:none;stroke:var(--sa-acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* vstup karet (jen opacity + transform, stagger 50 ms) */
.sa-card,.sa-s{animation:sa-up 420ms var(--sa-ease) both}
.sa-card:nth-child(2),.sa-s:nth-child(2){animation-delay:50ms}
.sa-card:nth-child(3),.sa-s:nth-child(3){animation-delay:100ms}
.sa-card:nth-child(4){animation-delay:150ms}
.sa-card:nth-child(5){animation-delay:200ms}
.sa-card:nth-child(6){animation-delay:250ms}
@keyframes sa-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sa-card,.sa-s{animation:none}.sa-box img,.sa-btn,.sa-card{transition:none}}

/* ---------- patička ---------- */
.dm-footer.sa-footer{display:block;padding:40px 0 28px;border-top:1px solid var(--border);background:#0f0f12}
.sa-footer-w{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
.sa-footer-brand .dm-logo--custom img{max-height:40px}
.sa-footer-desc{color:var(--text-3);font-size:14px;margin:12px 0 0;max-width:34ch}
.sa-footer-col{display:grid;gap:8px;align-content:start}
.sa-footer-col li{list-style:none;margin:0;padding:0;display:contents}
body.dm-dark .sa-footer-col h4{margin:0 0 4px;font-family:var(--font-head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-acc);font-weight:500}
.sa-footer-col a{font-size:14px;color:var(--text-2);transition:color 120ms ease}
.sa-footer-col a:hover{color:var(--sa-acc)}
.dm-footer.sa-footer .sa-footer-copy{margin:28px auto 0;max-width:1180px;padding:0 24px;font-size:12.5px;color:var(--text-3);white-space:normal}
.sa-footer .dm-social{margin-top:14px}

/* ---------- mobil ---------- */
@media (max-width:900px){
  .sa-wrap{padding:0 16px}
  .sa-hero{padding:34px 0 30px}
  .sa-hero-w{grid-template-columns:1fr;gap:28px}
  body.dm-dark .sa-hero h1{font-size:32px}
  .sa-hero-vis{height:340px}
  .sa-hv1{object-position:30% 50%}
  .sa-sec{padding:40px 0}
  .sa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sa-card-i{padding:10px 12px 12px}
  .sa-card-n{font-size:16px}
  .sa-band-in{grid-template-columns:1fr;padding:22px}
  .sa-boxes{grid-template-columns:1fr}
  .sa-st{grid-template-columns:1fr}
  .sa-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-footer.sa-footer{padding:32px 0 24px}
  .sa-footer-w{grid-template-columns:1fr;gap:22px}
}