/* =========================================================
   Phase 92 — Powder Drinks / Premium Minimal
   Scope: ONLY shop/powder — desktop + mobile
   Goal: less scrolling, less dead space, same content & commerce.
   ========================================================= */

/* ---------- Desktop cleanup ---------- */
@media (min-width:1001px){
  .hero{
    min-height:420px!important;
    padding:58px 7vw 48px!important;
    grid-template-columns:1.12fr .72fr!important;
    gap:5vw!important;
  }

  .hero h1{
    font-size:clamp(46px,5.2vw,72px)!important;
    line-height:1.12!important;
    margin:10px 0 14px!important;
  }

  .hero p{
    font-size:15px!important;
    line-height:1.95!important;
    margin:0!important;
  }

  .hero-note{
    padding:16px 20px!important;
    line-height:1.9!important;
    box-shadow:0 10px 28px rgba(48,33,22,.06)!important;
  }

  .collection{
    padding:54px 5vw 66px!important;
  }

  .collection-head{
    max-width:780px!important;
    margin-bottom:26px!important;
  }

  .collection-head h2{
    font-size:clamp(34px,4vw,52px)!important;
    line-height:1.2!important;
    margin:7px 0 8px!important;
  }

  .collection-head p{
    line-height:1.85!important;
    margin:0!important;
  }

  .powder-grid{
    gap:14px!important;
  }

  .powder-card{
    min-height:410px!important;
    grid-template-columns:.88fr 1.12fr!important;
    border-radius:20px!important;
    box-shadow:0 12px 34px rgba(47,32,21,.07)!important;
  }

  .card-image{
    min-height:410px!important;
  }

  .card-copy{
    padding:26px!important;
  }

  .card-copy h2{
    font-size:32px!important;
    margin:8px 0!important;
  }

  .card-copy p{
    min-height:42px!important;
    margin:0!important;
    line-height:1.75!important;
  }

  .powder-price-block{
    margin-top:12px!important;
    padding-top:10px!important;
  }

  .powder-buy-row{
    margin-top:10px!important;
    gap:7px!important;
  }

  .powder-detail-link{
    margin-top:9px!important;
    padding:10px 11px!important;
  }
}

/* ---------- Tablet ---------- */
@media (min-width:651px) and (max-width:1000px){
  .hero{
    min-height:0!important;
    padding:52px 5vw 42px!important;
    gap:22px!important;
  }
  .hero-note{max-width:720px!important}
  .collection{padding:48px 5vw 60px!important}
  .powder-card{min-height:390px!important}
  .card-image{min-height:390px!important}
}

/* ---------- Mobile: compact, low-scroll product cards ---------- */
@media (max-width:650px){
  .hero{
    min-height:0!important;
    padding:34px 16px 26px!important;
    gap:18px!important;
    background:
      radial-gradient(circle at 82% 22%,rgba(174,124,69,.11),transparent 30%),
      linear-gradient(135deg,#f7f2e9,#eee5d9)!important;
  }

  .hero .eyebrow{
    font-size:10px!important;
    letter-spacing:.11em!important;
    margin:0 0 8px!important;
  }

  .hero h1{
    font-size:35px!important;
    line-height:1.16!important;
    letter-spacing:-.025em!important;
    margin:0 0 12px!important;
  }

  .hero p{
    font-size:13px!important;
    line-height:1.85!important;
    margin:0!important;
  }

  .hero-note{
    border-right:3px solid var(--gold)!important;
    padding:13px 14px!important;
    font-size:12px!important;
    line-height:1.8!important;
    box-shadow:none!important;
    background:rgba(255,255,255,.78)!important;
  }

  .collection{
    padding:30px 10px 34px!important;
  }

  .collection-head{
    margin:0 4px 18px!important;
  }

  .collection-head span{
    font-size:10px!important;
  }

  .collection-head h2{
    font-size:29px!important;
    line-height:1.28!important;
    margin:5px 0 8px!important;
  }

  .collection-head p{
    font-size:12px!important;
    line-height:1.8!important;
    margin:0!important;
  }

  .powder-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  /* Horizontal card instead of huge stacked image+copy */
  .powder-card{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:42% 58%!important;
    align-items:stretch!important;
    border-radius:16px!important;
    box-shadow:0 8px 24px rgba(47,32,21,.06)!important;
  }

  .card-image{
    min-height:288px!important;
    height:auto!important;
  }

  .card-image,
  .powder-image-link{
    height:100%!important;
  }

  .card-image img{
    height:100%!important;
    min-height:288px!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .card-copy{
    min-width:0!important;
    padding:15px 12px 13px!important;
  }

  .card-copy>span{
    font-size:8px!important;
    letter-spacing:.1em!important;
  }

  .card-copy h2{
    font-size:24px!important;
    line-height:1.22!important;
    margin:6px 0!important;
  }

  .card-copy p{
    min-height:0!important;
    font-size:11px!important;
    line-height:1.65!important;
    margin:0 0 8px!important;
  }

  .powder-price-block{
    margin-top:6px!important;
    padding-top:8px!important;
    gap:6px!important;
    align-items:center!important;
  }

  .powder-price-block small{
    font-size:8px!important;
  }

  .powder-live-price{
    font-size:15px!important;
    white-space:nowrap!important;
  }

  .powder-buy-row{
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin-top:8px!important;
  }

  .powder-variant-label{
    gap:3px!important;
  }

  .powder-variant-label>span{
    font-size:8px!important;
  }

  .powder-pack{
    min-height:38px!important;
    padding:7px 7px!important;
    font-size:10px!important;
    border-radius:8px!important;
  }

  .powder-direct-add{
    min-height:38px!important;
    padding:7px 8px!important;
    border-radius:8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  .powder-detail-link{
    margin-top:7px!important;
    padding:8px!important;
    border-radius:8px!important;
    gap:5px!important;
  }

  .powder-detail-link span{
    display:none!important;
  }

  .powder-detail-link b{
    font-size:9px!important;
    white-space:normal!important;
  }

  /* Keep copy legible on the dark cards */
  .silk .card-copy p,
  .spice .card-copy p,
  .chocolate .card-copy p{
    opacity:.96!important;
  }
}

/* Very narrow phones: remain compact without clipping */
@media (max-width:380px){
  .powder-card{
    grid-template-columns:40% 60%!important;
  }
  .card-image,
  .card-image img{
    min-height:276px!important;
  }
  .card-copy{
    padding:13px 10px 11px!important;
  }
  .card-copy h2{
    font-size:22px!important;
  }
  .powder-live-price{
    font-size:14px!important;
  }
}


/* =========================================================
   Phase 93 — Hero typography refinement
   Requested:
   - Hero titles: ~3 visual steps smaller (desktop + mobile)
   - Hero supporting copy: 1 step smaller on desktop only
   ========================================================= */

@media (min-width:1001px){
  .hero{
    min-height:350px!important;
    padding-top:44px!important;
    padding-bottom:38px!important;
  }

  .hero h1{
    font-size:clamp(38px,4.15vw,58px)!important;
    line-height:1.13!important;
  }

  .hero p{
    font-size:14px!important;
  }

  .hero-note{
    font-size:14px!important;
  }

  .collection-head h2{
    font-size:clamp(29px,3.25vw,43px)!important;
    line-height:1.22!important;
  }
}

@media (max-width:650px){
  .hero h1{
    font-size:29px!important;
    line-height:1.18!important;
  }

  .collection-head h2{
    font-size:24px!important;
    line-height:1.3!important;
  }

  /* Supporting hero copy intentionally stays Phase 92 size on mobile. */
}


/* =========================================================
   Phase 95 — Powder desktop header readability
   Only desktop on shop/powder. Mobile header unchanged.
   ========================================================= */
@media (min-width:1041px){
  .cl-global-header{
    height:78px!important;
  }

  .cl-global-inner{
    width:min(1480px,94%)!important;
    gap:26px!important;
  }

  .cl-global-brand img{
    width:44px!important;
    height:44px!important;
  }

  .cl-global-brand b{
    font-size:12px!important;
  }

  .cl-global-brand small{
    font-size:7.5px!important;
  }

  .cl-global-link,
  .cl-global-trigger{
    height:44px!important;
    padding:0 15px!important;
    font-size:12.5px!important;
  }

  .cl-global-cta{
    height:42px!important;
    padding:0 17px!important;
    font-size:11.5px!important;
  }

  .cl-header-logo-slot{
    width:62px!important;
    height:50px!important;
    flex-basis:62px!important;
  }

  .cl-header-logo-slot .cl-company-header-logo{
    max-width:56px!important;
    max-height:44px!important;
  }

  .cl-header-utilities{
    gap:4px!important;
    padding:4px!important;
  }

  .cl-lang-switch,
  .cl-account-btn,
  .cl-cart-btn{
    height:36px!important;
    min-width:36px!important;
  }

  .cl-account-btn svg,
  .cl-cart-btn svg{
    width:19px!important;
    height:19px!important;
  }

  .cl-lang-switch{
    font-size:8.5px!important;
  }
}

/* =========================================================
   Phase 103 — Powder main page mobile readability
   Only: "انتخاب بسته‌بندی / وزن" on product cards
   ========================================================= */
@media (max-width:720px){
  .powder-variant-label>span{
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.55!important;
    opacity:1!important;
    color:inherit!important;
    letter-spacing:0!important;
  }
}