/* ==========================================================================
   polish.css — last layer of the storefront skin                       (v1)

   Loaded AFTER theme.css. Purely visual: no class names are renamed and no
   JS hook depends on it, so deleting the <link> puts the previous look back.

     1. motion tokens + global smoothness
     2. containers: cards, decks, rails, panels (hover depth, accent edges)
     3. product pictures: fade in when loaded, skeleton shimmer while waiting
     4. section headings with an accent bar
     5. OPEN BOX — highlighted everywhere (header, chips, home promo band)
     6. buttons & inputs: press feedback, clear focus
     7. compact layout for every phone size (+ tablet)
     8. performance: skip off-screen sections, lighter effects on phones
     9. reduced motion: everything decorative switched off
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s; --t-med:.28s; --t-slow:.5s;
  --ob-1:#FF8A00; --ob-2:#FF3D54; --ob-3:#FFC53D;
  --ob-grad:linear-gradient(100deg,var(--ob-1) 0%,var(--ob-2) 100%);
  --lift:0 14px 34px -18px rgba(23,32,30,.35),0 2px 6px -2px rgba(23,32,30,.08);
  --edge:linear-gradient(135deg,rgba(29,74,66,.35),rgba(212,42,47,.18) 60%,rgba(255,138,0,.28));
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
::selection{background:#DCEBE6;color:#143831}
a,button{touch-action:manipulation}

/* ------------------------------------------------------------------ 2 ---- */
/* Every container gets the same calm language: white card, hairline border,
   and on hover (mouse only) a soft lift with a thin gradient edge. */
.deck,.hcard.hero-cubes,.rail,.hm-picks,.hist,.filter-group,.results-bar,
.pdp,.buybox,.summary-box,.order-card,.pcard,.mcard,.hm-tile{
  transition:box-shadow var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),border-color var(--t-med) ease;
}
@media (hover:hover) and (pointer:fine){
  .deck:hover,.pcard:hover,.mcard:hover,.hm-tile:hover,.rail:hover,.hm-picks:hover{
    transform:translateY(-3px);
    box-shadow:var(--lift);
    border-color:transparent;
    background:linear-gradient(#fff,#fff) padding-box,var(--edge) border-box;
  }
  .deck:hover .deck-chev{background:var(--st-ink,#17201E);color:#fff;transform:translateX(2px)}
  .cell:hover .cell-pic,.pk:hover .pk-pic,.pcard:hover .pcard-imgwrap{transform:scale(1.015)}
  .cell:hover .cell-img,.pcard:hover .pcard-imgwrap img,.pk:hover .pk-img{transform:scale(1.05)}
}
.deck-chev{transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),color var(--t-fast)}
.cell-pic,.pk-pic,.pcard-imgwrap{transition:transform var(--t-med) var(--ease-out)}
.cell-img,.pcard-imgwrap img,.pk-img{transition:transform .45s var(--ease-out),opacity .35s ease}

/* deck heading: a small accent dot before the title */
.deck h3{position:relative;padding-left:12px}
.deck h3::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:15px;border-radius:3px;
  transform:translateY(-50%);background:linear-gradient(180deg,var(--st-green,#1D4A42),#2E7D6B);
}
.deck-reco h3::before{background:linear-gradient(180deg,var(--st-red,#D42A2F),#FF7A59)}

/* hero cube panel: hidden while there is no product to put on it */
.hero-cubes:has(.pc-grid:empty){display:none}
/* hero cube panel: soft glow frame */
.hcard.hero-cubes{border:1px solid var(--st-line,#E2E7E5);box-shadow:0 10px 30px -22px rgba(23,32,30,.4)}
.pc-face{box-shadow:0 1px 2px rgba(23,32,30,.06)}
.pc-off,.mcard-off,.cell-flag,.pcard-deal{box-shadow:0 4px 10px -4px rgba(212,42,47,.55)}

/* product card price row a touch bolder, save pill animates in */
.pcard-save{animation:popIn .4s var(--ease-spring) both}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------------ 3 ---- */
/* Pictures fade in when decoded (polish.js adds .img-wait / .img-in). */
img.img-wait{opacity:0}
img.img-in{opacity:1;transition:opacity .35s ease}
/* skeleton shimmer behind a picture that is still loading */
.cell-pic,.pk-pic,.pcard-imgwrap,.mcard-pic,.rcard-img,.hist-item{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:120% 0;
}
.cell-pic:has(img.img-wait),.pk-pic:has(img.img-wait),.pcard-imgwrap:has(img.img-wait),
.mcard-pic:has(img.img-wait),.hist-item:has(img.img-wait){animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-120% 0}}
.skel{background:linear-gradient(100deg,#eef1f0 30%,#f7f9f8 50%,#eef1f0 70%);background-size:220% 100%;animation:shimmer 1.2s linear infinite}

/* ------------------------------------------------------------------ 4 ---- */
.hm-h2,.rail-head h2,.results-bar h2{position:relative}
.hm-h2{display:inline-flex;align-items:center;gap:10px}
.hm-h2::after{
  content:"";height:4px;width:34px;border-radius:4px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--st-green,#1D4A42),var(--ob-1));
  transform-origin:left;animation:barIn .7s var(--ease-out) both;
}
@keyframes barIn{from{transform:scaleX(0)}to{transform:none}}

/* ------------------------------------------------------------------ 5 ---- */
/* OPEN BOX — the one thing in the header that should catch the eye. */
.hdr-openbox{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ob-grad) !important;border:0 !important;color:#fff !important;
  box-shadow:0 8px 20px -10px rgba(255,61,84,.75) !important;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast);
}
.hdr-openbox .t1{color:rgba(255,255,255,.92) !important;font-weight:700 !important}
.hdr-openbox .t2{color:#fff !important;font-weight:800 !important}
.hdr-openbox .ob-ico{background:rgba(255,255,255,.22) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hdr-openbox .ob-new{background:#fff !important;color:var(--ob-2) !important;font-weight:800}
.hdr-openbox::before{                    /* moving shine */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);animation:obShine 3.2s ease-in-out infinite;
}
.hdr-openbox:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(255,61,84,.85) !important;color:#fff !important}
@keyframes obShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

.subnav-inner a.sub-openbox{
  background:var(--ob-grad) !important;color:#fff !important;border-color:transparent !important;
  font-weight:800 !important;position:relative;padding-left:24px !important;
  box-shadow:0 6px 14px -8px rgba(255,61,84,.8);
}
.subnav-inner a.sub-openbox::before{          /* live dot */
  content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:obPulse 1.8s ease-out infinite;
}
@keyframes obPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}80%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

/* home promo band (inserted by polish.js under the hero) */
.ob-promo-wrap{padding-top:16px}
.ob-promo{
  position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:18px 22px;border-radius:20px;color:#fff;text-decoration:none;
  background:linear-gradient(110deg,#1B1F3B 0%,#3A1C4A 45%,#FF3D54 100%);
  box-shadow:0 18px 40px -26px rgba(58,28,74,.9);
}
.ob-promo:hover{color:#fff;text-decoration:none}
.ob-promo::before{
  content:"";position:absolute;inset:-40%;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,197,61,.35) 70%,transparent 80%);
  animation:obSpin 9s linear infinite;
}
.ob-promo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(600px 160px at 85% 50%,rgba(255,138,0,.35),transparent 60%);
}
@keyframes obSpin{to{transform:rotate(360deg)}}
.ob-badge{
  width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--ob-grad);box-shadow:0 10px 24px -10px rgba(255,61,84,.9);
  animation:obFloat 3.6s ease-in-out infinite;
}
.ob-badge svg{width:34px;height:34px;stroke:#fff}
@keyframes obFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.ob-copy b{display:block;font-family:var(--display,inherit);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ob-copy b em{font-style:normal;background:linear-gradient(90deg,var(--ob-3),#FFE08A);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-copy span{display:block;margin-top:4px;font-size:13px;color:rgba(255,255,255,.82)}
.ob-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ob-points i{font-style:normal;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ob-cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:12px 18px;border-radius:999px;background:#fff;color:#1B1F3B;font-weight:800;font-size:14px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6);transition:transform var(--t-fast) var(--ease-spring);
}
.ob-promo:hover .ob-cta{transform:translateX(3px) scale(1.03)}
.ob-cta svg{width:16px;height:16px}

/* ------------------------------------------------------------------ 6 ---- */
.btn{transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.btn:active,.pcard-fav:active,.rail-btn:active,.deck-more:active,.mbar button:active{transform:scale(.96)}
.btn-amber,.btn-primary{box-shadow:0 8px 18px -12px rgba(29,74,66,.9)}
.btn-buy,#bbBuy{box-shadow:0 8px 18px -12px rgba(212,42,47,.9)}
.pcard-fav{transition:transform var(--t-fast) var(--ease-spring),color var(--t-fast)}
.pcard-fav.on{animation:heartPop .45s var(--ease-spring)}
@keyframes heartPop{40%{transform:scale(1.28)}100%{transform:none}}
.cart-count{transition:transform .3s var(--ease-spring)}
.cart-count.bump{animation:heartPop .45s var(--ease-spring)}
input,select,textarea{transition:border-color var(--t-fast),box-shadow var(--t-fast)}

/* toasts slide in */
.toast{animation:toastIn .32s var(--ease-out) both}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* drawers and modals glide */
.drawer.open,.modal.open{animation:none}
.modal-card,.modal>.card{animation:modalIn .28s var(--ease-out) both}
@keyframes modalIn{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}

/* page change: quick fade-up of the routed view */
#view.route-in{animation:viewIn .32s var(--ease-out) both}
@keyframes viewIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}

/* footer */
.ft-col a{transition:color var(--t-fast),padding-left var(--t-fast)}
@media (hover:hover){ .ft-col a:hover{padding-left:3px} }

/* ------------------------------------------------------------------ 7 ---- */
/* Tablet */
@media (min-width:701px) and (max-width:1050px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px}
  .deck{padding:14px}
}

/* All phones */
@media (max-width:700px){
  :root{--hm-gap:8px;--hm-pad:10px;--hm-r:14px}
  .wrap{padding:0 10px}

  /* header: solid (no blur = smoother scrolling), tighter rows */
  .hdr{background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .hdr-main{padding:8px 10px 10px !important;gap:6px !important}
  .brand-logo img{height:24px}
  .search-box{height:42px !important}
  .subnav-inner{min-height:42px !important;gap:5px !important;padding:0 10px !important}
  .subnav-inner a{padding:5px 10px !important;font-size:12px !important}
  .subnav{transition:max-height .25s var(--ease-out),opacity .2s ease;max-height:60px;overflow:hidden}
  .hdr.hdr-tuck .subnav{max-height:0;opacity:0;border-top-color:transparent}

  .hdr-openbox{padding:3px 10px 3px 3px !important;gap:6px !important}
  .hdr-openbox .ob-ico{width:26px !important;height:26px !important}
  .hdr-openbox .t1,.hdr-openbox .ob-new{display:none !important}
  .hdr-openbox .t2{font-size:12px !important}

  /* sections */
  .hm-hero-band{padding-top:8px}
  .hm-sec{padding-top:16px}
  .hm-h2{font-size:17px !important;margin:0 0 8px !important}
  .hm-h2::after{width:24px;height:3px}
  .hm-mini-wrap{padding-top:8px}
  .mcard{flex-basis:128px !important;height:168px !important;padding:8px !important;border-radius:12px}
  .mcard b{font-size:12px}
  .mcard small{font-size:10.5px}

  .deck{padding:11px 11px 10px !important;border-radius:14px}
  .deck h3{font-size:14.5px !important;margin-bottom:8px !important;padding-left:10px}
  .deck h3::before{height:13px;width:4px}
  .deck-grid{gap:7px !important}
  .cell{gap:3px}
  .c-name{font-size:11px}
  .c-price{font-size:13px}
  .deck-more{margin-top:8px;padding:5px 10px;font-size:12px}

  .ob-promo-wrap{padding-top:10px}
  .ob-promo{grid-template-columns:auto 1fr;gap:12px;padding:14px;border-radius:16px}
  .ob-badge{width:48px;height:48px;border-radius:14px}
  .ob-badge svg{width:26px;height:26px}
  .ob-copy b{font-size:17px}
  .ob-copy span{font-size:12px}
  .ob-points{gap:5px;margin-top:7px}
  .ob-points i{font-size:10.5px;padding:3px 8px}
  .ob-cta{grid-column:1 / -1;justify-content:center;padding:10px 14px;font-size:13px}

  /* product grid + cards */
  .shell{gap:10px !important}
  .results-bar{padding:10px 12px !important;border-radius:14px}
  .results-bar h2{font-size:16px !important}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .pcard{padding:5px !important;border-radius:14px !important}
  .pcard-imgwrap{border-radius:10px !important}
  .pcard-body{padding:8px 4px 2px !important;gap:2px !important}
  .pcard-brand{font-size:10.5px !important}
  .pcard-name{font-size:12.5px !important;min-height:34px !important;line-height:1.35 !important}
  .pcard-price .price-now{font-size:17px !important}
  .pcard-save{font-size:10.5px !important;padding:1px 7px !important}
  .pcard-meta,.pcard-eta{font-size:11px !important}
  .pcard-actions{padding-top:8px !important}
  .pcard-actions .btn{min-height:36px !important;font-size:12.5px !important;border-radius:10px}
  .pcard-deal{font-size:10px !important;padding:2px 7px !important}
  .pcard-fav{width:30px !important;height:30px !important}

  /* rails */
  .rail{padding:12px 10px 6px !important;border-radius:14px !important}
  .rail-head h2{font-size:16px !important}
  .rail-btn{display:none}

  /* product page */
  .pdp{padding:12px !important;border-radius:14px !important}
  .pdp-title,.pdp h1{font-size:18px !important;line-height:1.3 !important}
  .pdp-price .now{font-size:26px !important}
  .buybox{padding:14px !important;border-radius:14px !important}
  .offer-card{padding:10px !important}
  .highlight{padding:8px 10px !important}

  /* footer compact 2x2 */
  .ft{margin-top:28px}
  .ft-cols-inner{grid-template-columns:1fr 1fr !important;padding:36px 14px 18px !important;gap:16px 12px !important}
  .ft-col h4{font-size:13.5px}
  .ft-col a{font-size:12.5px}
  .ft-inner{flex-direction:column;gap:8px;text-align:center;padding:14px !important}

  /* bottom bar: glassy, safe-area aware */
  .mbar{box-shadow:0 -8px 24px -18px rgba(23,32,30,.45)}
  .mbar button{transition:color var(--t-fast),transform var(--t-fast)}
  .mbar button.on{position:relative}
  .mbar button.on::before{
    content:"";position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 3px 3px;
    background:var(--ob-grad);
  }
}

/* Small phones (iPhone SE, older Androids) */
@media (max-width:380px){
  .wrap{padding:0 8px}
  .hdr-main{padding:7px 8px 9px !important}
  .brand-logo img{height:21px}
  .hdr-openbox .t2{display:none !important}
  .hdr-openbox{padding:3px !important}
  .pgrid{gap:6px !important}
  .pcard-name{font-size:12px !important}
  .pcard-price .price-now{font-size:15.5px !important}
  .pcard-actions .btn{min-height:34px !important;font-size:12px !important}
  .deck{padding:9px !important}
  .ob-copy b{font-size:15.5px}
  .ob-points i:nth-child(3){display:none}
  .mcard{flex-basis:118px !important;height:156px !important}
}

/* Large phones in landscape / foldables: keep things readable */
@media (min-width:560px) and (max-width:700px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}

/* ------------------------------------------------------------------ 8 ---- */
/* Sections far below the fold are not painted until you get close. */
@supports (content-visibility:auto){
  .hm-sec + .hm-sec + .hm-sec,#hmPicks,#hmHistory,.ft{content-visibility:auto;contain-intrinsic-size:auto 700px}
}
/* phones and low-power devices: no heavy shadows / infinite effects */
@media (max-width:700px){
  .ob-promo::before{animation-duration:14s}
  .pcard:hover,.deck:hover{transform:none !important}
}
.lite .hdr-openbox::before,.lite .ob-promo::before,.lite .ob-badge,.lite .subnav-inner a.sub-openbox::before,
.lite .cell-pic,.lite .pk-pic,.lite .pcard-imgwrap,.lite .mcard-pic{animation:none !important}
.lite img.img-wait{opacity:1}

/* ------------------------------------------------------------------ 9 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  img.img-wait{opacity:1}
}