/* =========================================================
   Coffee Lovers — Shop Landing Phase 71
   Scope: shop/index.html only
   Mobile-first, premium-minimal, accessible and future-proof.
   ========================================================= */

.shop-hero-wrap{
  position:relative;
}

.shop-mobile-hero{
  display:none;
}

.shop-title-block{
  width:min(1180px,92vw);
  margin:0 auto;
  padding:46px 0 28px;
  text-align:right;
}

.shop-title-block .kicker{
  display:block;
  margin:0 0 7px;
  color:#8b653a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  line-height:1.4;
}

.shop-title-block h1{
  margin:0;
  color:#211d19;
  font-size:clamp(38px,6vw,72px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.025em;
}

.shop-title-block p{
  margin:12px 0 0;
  color:#6b625a;
  font-size:16px;
  line-height:1.9;
}

.store-shell{
  padding-top:0;
}

.store-gates .gate{
  position:relative;
  isolation:isolate;
}

@media (max-width:650px){
  .shop-hero-wrap{
    width:100%;
    overflow:hidden;
  }

  .shop-mobile-hero{
    position:relative!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    background:#16120f!important;
    aspect-ratio:4/3!important;
  }

  .shop-mobile-hero > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  .shop-mobile-hero-shade{
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(to top,
      rgba(12,9,7,.78) 0%,
      rgba(12,9,7,.28) 31%,
      rgba(12,9,7,.04) 58%,
      rgba(12,9,7,0) 76%)!important;
    pointer-events:none!important;
  }

  .shop-title-block{
    position:absolute;
    z-index:2;
    right:20px;
    left:20px;
    bottom:18px;
    width:auto;
    margin:0;
    padding:0;
    color:#fff;
  }

  .shop-title-block .kicker{
    margin-bottom:4px;
    color:#e7c98e;
    font-size:9px;
    letter-spacing:.15em;
  }

  .shop-title-block h1{
    color:#fff;
    font-size:34px;
    line-height:1.2;
    text-shadow:0 2px 16px rgba(0,0,0,.25);
  }

  .shop-title-block p{
    margin-top:5px;
    color:rgba(255,255,255,.92);
    font-size:13px;
    font-weight:600;
    line-height:1.7;
  }

  .store-shell{
    width:100%!important;
    margin:0!important;
    padding:14px 0 48px!important;
  }

  .store-gates{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    padding:0 14px!important;
  }

  .store-gates .gate{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    aspect-ratio:3/2!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(66,49,35,.16)!important;
    border-radius:18px!important;
    transform:none!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent;
  }

  .store-gates .gate:active{
    transform:scale(.992)!important;
  }

  .store-gates .gate:focus-visible{
    outline:3px solid #b98945!important;
    outline-offset:3px!important;
  }

  .store-gates .gate > img{
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    transform:none!important;
  }

  .store-gates .gate > small{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:3!important;
    margin:0!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
    color:#e6bd79!important;
    text-shadow:0 1px 8px rgba(0,0,0,.5)!important;
  }

  /* Coffee mixes: HTML copy remains accessible/dynamic. */
  .store-gates .gate.coffee{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    padding:18px 16px!important;
    color:#fff!important;
    background:#17120e!important;
  }

  .store-gates .gate.coffee .gate-visual-img{
    filter:brightness(1.16) saturate(1.04)!important;
  }

  .store-gates .gate.coffee .gate-visual-shade{
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    background:linear-gradient(to top,
      rgba(9,7,5,.68) 0%,
      rgba(9,7,5,.38) 38%,
      rgba(9,7,5,.08) 70%,
      rgba(9,7,5,0) 100%)!important;
    pointer-events:none!important;
  }

  .store-gates .gate.coffee h2{
    margin:0 0 8px!important;
    color:#fff!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1.35!important;
    text-shadow:0 2px 12px rgba(0,0,0,.42)!important;
  }

  .store-gates .gate.coffee p{
    margin:0 0 13px!important;
    color:rgba(255,255,255,.88)!important;
    font-size:12px!important;
    line-height:1.8!important;
  }

  .store-gates .gate.coffee b{
    color:#fff!important;
    font-size:12px!important;
    line-height:1.6!important;
  }

  /* These approved artworks already contain their own headline/copy. */
  .store-gates .gate.powder{background:#1b120b!important}
  .store-gates .gate.signature{background:#efe5d7!important}
  .store-gates .gate.equipment{background:#eee9e1!important}

  .store-gates .gate.powder .gate-powder-shade,
  .store-gates .gate.signature .gate-signature-shade,
  .store-gates .gate.equipment .gate-equipment-shade{
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    pointer-events:none!important;
    background:transparent!important;
  }

  .store-gates .gate.signature > small,
  .store-gates .gate.equipment > small{
    color:#a8782e!important;
    text-shadow:0 1px 7px rgba(255,255,255,.72)!important;
  }
}

@media (max-width:360px){
  .store-gates{
    padding-right:10px!important;
    padding-left:10px!important;
  }

  .store-gates .gate.coffee h2{
    font-size:21px!important;
  }

  .store-gates .gate.coffee p,
  .store-gates .gate.coffee b{
    font-size:11px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .store-gates .gate{
    transition:none!important;
  }
}


/* =========================================================
   Phase 71 — Three approved mobile refinements
   1) Remove faux UI from equipment artwork via safe crop
   2) Reposition decorative 03 away from signature headline
   3) Increase Coffee Mixes copy contrast without darkening image
   ========================================================= */
@media (max-width:650px){

  /* 1) Equipment artwork: crop away the baked-in fake header/UI icons.
     We deliberately keep the approved visual and only change its viewport. */
  .store-gates .gate.equipment.gate-equipment-visual .gate-equipment-img{
    height:116%!important;
    top:-16%!important;
    bottom:auto!important;
    object-fit:cover!important;
    object-position:center bottom!important;
  }

  /* 2) Signature decorative section number: move clear of the headline. */
  .store-gates .gate.signature.gate-signature-visual > small{
    top:10px!important;
    right:auto!important;
    left:14px!important;
    color:#9a6b27!important;
    text-shadow:0 1px 6px rgba(255,255,255,.82)!important;
  }

  /* 3) Coffee Mixes: stronger text readability only.
     Do not darken the approved concert image again. */
  .store-gates .gate.coffee h2{
    text-shadow:
      0 2px 10px rgba(0,0,0,.78),
      0 1px 2px rgba(0,0,0,.85)!important;
  }

  .store-gates .gate.coffee p{
    color:rgba(255,255,255,.97)!important;
    font-weight:650!important;
    text-shadow:
      0 2px 8px rgba(0,0,0,.82),
      0 1px 2px rgba(0,0,0,.9)!important;
  }

  .store-gates .gate.coffee b{
    color:#fff!important;
    font-weight:850!important;
    text-shadow:
      0 2px 8px rgba(0,0,0,.82),
      0 1px 2px rgba(0,0,0,.9)!important;
  }
}


/* Phase 71 EXECUTED — visible final corrections */
@media (max-width:650px){
  /* Equipment image itself is already physically cleaned; show it normally. */
  .store-gates .gate.equipment.gate-equipment-visual .gate-equipment-img{
    inset:0!important;
    top:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* 03: clear, intentional top-left placement away from artwork headline. */
  .store-gates .gate.signature.gate-signature-visual > small{
    top:12px!important;
    left:14px!important;
    right:auto!important;
    padding:4px 6px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.78)!important;
    color:#8b5f22!important;
    text-shadow:none!important;
    backdrop-filter:blur(4px)!important;
  }

  /* Mix copy: clearly stronger readability, without reducing image brightness. */
  .store-gates .gate.coffee h2,
  .store-gates .gate.coffee p,
  .store-gates .gate.coffee b{
    position:relative!important;
    z-index:2!important;
  }

  .store-gates .gate.coffee h2{
    color:#fff!important;
    text-shadow:0 2px 5px #000,0 0 14px rgba(0,0,0,.9)!important;
  }

  .store-gates .gate.coffee p{
    display:inline-block!important;
    width:max-content!important;
    max-width:100%!important;
    padding:3px 7px!important;
    border-radius:7px!important;
    background:rgba(0,0,0,.34)!important;
    color:#fff!important;
    font-weight:700!important;
    text-shadow:0 1px 3px #000!important;
  }

  .store-gates .gate.coffee b{
    color:#fff!important;
    font-weight:900!important;
    text-shadow:0 2px 5px #000,0 0 10px rgba(0,0,0,.85)!important;
  }
}


/* =========================================================
   Phase 72 — DESKTOP SHOP STEP 1
   Desktop only. Locked mobile <=650px is intentionally untouched.
   ========================================================= */
@media (min-width:651px){
  body{background:#f7f3eb!important}
  .shop-hero-wrap{width:min(1180px,92vw)!important;margin:26px auto 18px!important;border-radius:26px!important;overflow:hidden!important;background:#17120e!important;box-shadow:0 10px 34px rgba(54,39,26,.08)!important}
  .shop-mobile-hero{position:relative!important;display:block!important;width:100%!important;height:430px!important;margin:0!important;overflow:hidden!important;background:#17120e!important}
  .shop-mobile-hero>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 48%!important;margin:0!important;padding:0!important;border:0!important}
  .shop-mobile-hero-shade{position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(14,10,7,.03) 0%,rgba(14,10,7,.08) 48%,rgba(14,10,7,.68) 78%,rgba(14,10,7,.82) 100%)!important;pointer-events:none!important}
  .shop-title-block{position:absolute!important;z-index:2!important;top:50%!important;right:52px!important;width:min(410px,42%)!important;margin:0!important;padding:0!important;transform:translateY(-50%)!important;text-align:right!important}
  .shop-title-block .kicker{margin:0 0 8px!important;color:#e2bd7c!important;font-size:11px!important;letter-spacing:.14em!important}
  .shop-title-block h1{margin:0!important;color:#fff!important;font-size:58px!important;line-height:1.1!important;text-shadow:0 3px 18px rgba(0,0,0,.28)!important}
  .shop-title-block p{margin:14px 0 0!important;color:rgba(255,255,255,.9)!important;font-size:16px!important;font-weight:600!important;line-height:1.9!important}
  .store-shell{width:min(1180px,92vw)!important;margin:0 auto!important;padding:0 0 54px!important}
  .store-gates{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;width:100%!important}
  .store-gates .gate{position:relative!important;display:block!important;width:100%!important;min-height:0!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(61,44,30,.14)!important;border-radius:24px!important;background:#eee5d8!important;box-shadow:0 10px 30px rgba(63,45,29,.055)!important;transform:none!important;transition:transform .22s ease,box-shadow .22s ease!important;isolation:isolate!important}
  .store-gates .gate:hover{transform:translateY(-4px)!important;box-shadow:0 16px 38px rgba(63,45,29,.10)!important}
  .store-gates .gate:focus-visible{outline:3px solid #b88945!important;outline-offset:4px!important}
  .store-gates .gate>img{position:absolute!important;inset:0!important;z-index:-2!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;margin:0!important;padding:0!important;border:0!important;transform:none!important}
  .store-gates .gate>small{position:absolute!important;top:18px!important;right:18px!important;z-index:3!important;margin:0!important;color:#d6a554!important;font-size:12px!important;font-weight:800!important;line-height:1!important;text-shadow:0 1px 7px rgba(0,0,0,.42)!important}
  .store-gates .gate.coffee{aspect-ratio:3/2!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;padding:26px!important;color:#fff!important;background:#17120e!important}
  .store-gates .gate.coffee .gate-visual-img{filter:brightness(1.10) saturate(1.03)!important}
  .store-gates .gate.coffee .gate-visual-shade{position:absolute!important;inset:0!important;z-index:-1!important;background:linear-gradient(to top,rgba(8,6,4,.78) 0%,rgba(8,6,4,.40) 35%,rgba(8,6,4,.06) 68%,rgba(8,6,4,0) 100%)!important;pointer-events:none!important}
  .store-gates .gate.coffee h2{margin:0 0 7px!important;color:#fff!important;font-size:32px!important;font-weight:900!important;line-height:1.3!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important}
  .store-gates .gate.coffee p{margin:0 0 14px!important;padding:0!important;width:auto!important;max-width:88%!important;background:transparent!important;color:rgba(255,255,255,.92)!important;font-size:13px!important;font-weight:600!important;line-height:1.8!important;text-shadow:0 2px 9px rgba(0,0,0,.58)!important}
  .store-gates .gate.coffee b{color:#fff!important;font-size:13px!important;font-weight:850!important;line-height:1.6!important;text-shadow:0 2px 8px rgba(0,0,0,.6)!important}
  .store-gates .gate.powder,.store-gates .gate.signature,.store-gates .gate.equipment{aspect-ratio:4/3!important}
  .store-gates .gate.powder>img,.store-gates .gate.signature>img,.store-gates .gate.equipment>img{object-fit:cover!important;object-position:center center!important}
  .store-gates .gate.powder .gate-powder-shade,.store-gates .gate.signature .gate-signature-shade,.store-gates .gate.equipment .gate-equipment-shade{position:absolute!important;inset:0!important;z-index:-1!important;background:transparent!important;pointer-events:none!important}
  .store-gates .gate.signature>small{right:auto!important;left:18px!important;padding:5px 8px!important;border-radius:999px!important;background:rgba(255,255,255,.78)!important;color:#8b5f22!important;text-shadow:none!important}
  .store-gates .gate.equipment>small{color:#a8782e!important;text-shadow:0 1px 7px rgba(255,255,255,.72)!important}
}
@media (min-width:651px) and (max-width:980px){
  .shop-mobile-hero{height:380px!important}
  .shop-title-block{right:34px!important;width:44%!important}
  .shop-title-block h1{font-size:48px!important}
  .store-gates{gap:14px!important}
  .store-gates .gate.coffee{padding:20px!important}
  .store-gates .gate.coffee h2{font-size:27px!important}
}


/* =========================================================
   Phase 72 — DESKTOP SHOP STEP 2
   Desktop-only image proportions and grid alignment.
   Mobile <=650px remains untouched and continues using original approved assets.
   ========================================================= */
@media (min-width:651px){

  .shop-hero-wrap,
  .store-shell{
    width:min(1280px,94vw)!important;
  }

  .shop-mobile-hero{
    height:auto!important;
    aspect-ratio:2.45/1!important;
  }

  .shop-mobile-hero > picture,
  .store-gates .gate > picture{
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
  }

  .shop-mobile-hero > picture{
    z-index:0!important;
  }

  .shop-mobile-hero > picture > img,
  .store-gates .gate > picture > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  .shop-mobile-hero-shade{
    z-index:1!important;
  }

  .shop-title-block{
    z-index:2!important;
  }

  .store-gates{
    grid-auto-rows:auto!important;
    align-items:start!important;
  }

  .store-gates .gate.coffee,
  .store-gates .gate.powder,
  .store-gates .gate.signature,
  .store-gates .gate.equipment{
    aspect-ratio:3/2!important;
    min-height:0!important;
    height:auto!important;
  }

  /* The mix card keeps its original 3:2 source, aligned with the others. */
  .store-gates .gate.coffee > img{
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* All second-row cards now share exactly the same visual height. */
  .store-gates .gate.signature,
  .store-gates .gate.equipment{
    margin-top:0!important;
  }
}


/* =========================================================
   Phase 72 Step 3 — MOBILE LOCK RESTORE
   Compatibility only. No redesign.
   Restores the locked Phase 71 mobile rendering after <picture>
   wrappers were introduced for desktop-specific image sources.
   ========================================================= */
@media (max-width:650px){

  /* Hero: reproduce the original Phase71 direct-image behavior. */
  .shop-mobile-hero > picture{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:0!important;
  }

  .shop-mobile-hero > picture > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  .shop-mobile-hero-shade{z-index:1!important}
  .shop-title-block{z-index:2!important}

  /* Category cards: make <picture> behave exactly like the former direct img. */
  .store-gates .gate > picture{
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  .store-gates .gate > picture > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    transform:none!important;
  }

  /* Preserve locked Phase71 card proportions and positioning. */
  .store-gates .gate{
    aspect-ratio:3/2!important;
  }

  .store-gates .gate.powder > picture > img,
  .store-gates .gate.signature > picture > img,
  .store-gates .gate.equipment > picture > img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}