/* =============================================================
   KAVITA TRADERS — recommendations + product view
   Loads after style.css and motion.css. Uses only the tokens the
   site already defines, so it inherits the olive / sage / brass
   palette rather than introducing a second design language.
   ============================================================= */

/* ── shared motion grammar ─────────────────────────────────── */
:root{
  --rise:   cubic-bezier(.32,.72,0,1);   /* sheets: fast out of the gate, long settle */
  --spring: cubic-bezier(.22,1,.36,1);   /* tiles and images */
}

@keyframes rc-in{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes pv-rise{
  from{ opacity:0; transform:translateY(4%) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes pv-fade{ from{opacity:0} to{opacity:1} }
@keyframes sheen{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(220%); }
}
@keyframes rule-draw{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

/* ═══════════════ recommendation rows ═══════════════ */
.rrow{ margin:clamp(30px,5vw,56px) 0 0; }

.rrow-h{ position:relative; padding-bottom:14px; margin-bottom:18px; }
.rrow-h::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-rule); transform-origin:left;
  animation:rule-draw .9s var(--ease-out) both;
}
.rrow-h h3{
  font-family:var(--serif,"Playfair Display",Georgia,serif);
  font-size:clamp(19px,2.4vw,25px); font-weight:600; letter-spacing:-.01em;
  color:var(--ink); margin:0; line-height:1.15;
}
.rrow-h p{
  margin:6px 0 0; font-size:14px; color:var(--taupe); font-weight:300; line-height:1.5;
}

/* a rail, not a grid — the phone reads this as "there is more here" */
.rrow-scroll{
  display:flex; gap:14px; overflow-x:auto; padding:4px 2px 18px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.rrow-scroll::-webkit-scrollbar{ display:none; }

.rc{
  position:relative; flex:0 0 168px; scroll-snap-align:start;
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  animation:rc-in .58s var(--spring) both;
  animation-delay:calc(var(--i,0) * 55ms);
  transition:transform .42s var(--spring), box-shadow .42s var(--spring),
             border-color .42s var(--spring);
}
@media(min-width:900px){ .rc{ flex-basis:196px; } }

.rc:hover, .rc:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
  border-color:var(--line-gold);
  outline:none;
}
.rc:focus-visible{ box-shadow:var(--sh-md), 0 0 0 2px var(--gold); }
.rc:active{ transform:translateY(-2px) scale(.995); }

.rc-media{
  position:relative; aspect-ratio:1/1; background:var(--porcelain-2); overflow:hidden;
}
.rc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--spring);
}
.rc:hover .rc-media img{ transform:scale(1.07); }

/* a slow brass sheen crossing the image on hover — the one flourish */
.rc-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(226,211,160,.34) 50%,transparent 62%);
  transform:translateX(-120%);
}
.rc:hover .rc-media::after{ animation:sheen 1.15s var(--ease-out); }

.rc-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--taupe-lt); font-size:22px;
}
.rc-limited{
  position:absolute; left:8px; top:8px; z-index:2;
  background:rgba(43,43,36,.82); color:var(--porcelain);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 7px; border-radius:var(--r); backdrop-filter:blur(3px);
}

.rc-body{ padding:11px 12px 12px; flex:1; min-width:0; }
.rc-body em{
  font-style:normal; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--taupe); display:block; margin-bottom:4px;
}
.rc-body b{
  font-weight:500; font-size:13.5px; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.rc-pack{ display:block; font-size:12px; color:var(--taupe); margin-top:5px; font-weight:300; }

.rc-add{
  margin:0 12px 12px; padding:9px 10px; min-height:38px;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font:inherit; font-size:12.5px; font-weight:500; letter-spacing:.03em;
  border-radius:var(--r); cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), transform .18s var(--ease);
}
.rc-add:hover{ background:var(--ink); color:var(--porcelain); }
.rc-add:active{ transform:scale(.97); }
.rc-add.added{ background:var(--sage); border-color:var(--sage); color:#fff; }

/* The cart strip sits between the list and the send button, so it must
   stay compact — the enquiry list itself has to keep most of the height.
   Without the min-height the flex parent lets the item list collapse to
   almost nothing and the strip eats the whole panel. */
#cartItems{ flex:1 1 auto; min-height:min(46vh,300px); }
#cartRecs{ flex:0 0 auto; max-height:44vh; overflow:hidden; }
.rrow-cart{ margin-top:16px; padding:0 clamp(14px,4vw,20px) 6px; }
.rrow-cart .rrow-h{ padding-bottom:9px; margin-bottom:12px; }
.rrow-cart .rrow-h h3{ font-size:15px; }
.rrow-cart .rrow-h p{ font-size:12.5px; margin-top:3px; }
.rrow-cart .rrow-scroll{ gap:10px; padding-bottom:10px; }
.rrow-cart .rc{ flex-basis:112px; }
.rrow-cart .rc-body{ padding:8px 9px 8px; }
.rrow-cart .rc-body em{ font-size:9.5px; margin-bottom:3px; }
.rrow-cart .rc-body b{ font-size:12px; -webkit-line-clamp:2; }
.rrow-cart .rc-pack{ display:none; }
.rrow-cart .rc-add{ margin:0 9px 9px; min-height:32px; padding:6px 8px; font-size:11.5px; }

.foryou-host{ margin-top:clamp(24px,4vw,44px); }

/* ═══════════════ product view ═══════════════ */
html.pv-lock{ overflow:hidden; }

.pv{ position:fixed; inset:0; z-index:1200; display:none; }
.pv.open{ display:block; }

.pv-scrim{
  position:absolute; inset:0; background:rgba(26,26,21,.62);
  animation:pv-fade .34s var(--ease-out) both;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

.pv-card{
  position:absolute; inset:auto 0 0 0; height:94vh;
  background:var(--porcelain); border-radius:14px 14px 0 0;
  box-shadow:var(--sh-lg); overflow:hidden;
  display:flex; flex-direction:column;
  animation:pv-rise .5s var(--rise) both;
}
.pv-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:3;
  background:var(--gold-grad);
}
@media(min-width:900px){
  .pv-card{
    inset:50% auto auto 50%; transform:translate(-50%,-50%);
    width:min(1120px,92vw); height:min(88vh,940px); border-radius:4px;
    animation:pv-pop .5s var(--rise) both;
  }
  @keyframes pv-pop{
    from{ opacity:0; transform:translate(-50%,-46%) scale(.975); }
    to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
}

.pv-x{
  position:absolute; right:10px; top:10px; z-index:5;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:rgba(248,247,242,.92); color:var(--ink);
  font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:background .24s var(--ease), transform .24s var(--spring);
}
.pv-x:hover{ background:var(--ink); color:var(--porcelain); transform:rotate(90deg); }

.pv-scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(18px,3vw,34px) clamp(16px,3.4vw,38px) clamp(40px,6vw,64px);
  overscroll-behavior:contain;
}

.pv-top{ display:grid; gap:clamp(18px,3vw,38px); }
@media(min-width:860px){ .pv-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }

.pv-main{
  aspect-ratio:1/1; background:var(--porcelain-2); overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line-2);
}
.pv-main img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .26s var(--ease), transform 1.4s var(--spring);
}
.pv-main:hover img{ transform:scale(1.04); }

.pv-shots{ display:flex; gap:9px; margin-top:11px; overflow-x:auto; scrollbar-width:none; }
.pv-shots::-webkit-scrollbar{ display:none; }
.pv-shot{
  flex:0 0 62px; height:62px; padding:0; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); background:var(--porcelain-2); border-radius:var(--r);
  transition:border-color .28s var(--ease), transform .28s var(--spring);
}
.pv-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-shot:hover{ transform:translateY(-2px); }
.pv-shot.on{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }

.pv-brand{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--taupe); display:block; margin-bottom:9px;
}
.pv-name{
  font-family:var(--serif,"Playfair Display",Georgia,serif);
  font-size:clamp(22px,3.2vw,33px); font-weight:600; line-height:1.12;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 10px;
}
.pv-pack{ font-size:15px; color:var(--ink-3); margin:0 0 12px; font-weight:300; }

.pv-stars{ display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:13.5px; }
.pv-stars b{ color:var(--gold-dp); letter-spacing:.06em; }
.pv-stars span{ color:var(--taupe); }

.pv-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.pv-pill{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 9px; border-radius:var(--r);
  background:var(--porcelain-3); color:var(--ink-3);
}
.pv-pill-ok{ background:var(--blush); color:#3B5545; }
.pv-pill-limited{ background:#F0E3DE; color:var(--rose); }

.pv-desc{ font-size:15.5px; line-height:1.68; color:var(--ink-3); margin:0 0 14px; font-weight:300; }
.pv-note{
  font-size:14px; line-height:1.6; color:var(--taupe); margin:0 0 16px;
  padding-left:12px; border-left:2px solid var(--line-gold);
}

.pv-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px; }
.pv-btn{
  flex:1 1 190px; min-height:54px; padding:0 22px;
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:15px; font-weight:500; letter-spacing:.02em;
  border-radius:var(--r); cursor:pointer; text-decoration:none;
  border:1px solid var(--ink); background:var(--ink); color:var(--porcelain);
  position:relative; overflow:hidden;
  transition:transform .2s var(--spring), box-shadow .3s var(--ease);
}
.pv-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-120%);
}
.pv-btn:hover::after{ animation:sheen 1s var(--ease-out); }
.pv-btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.pv-btn:active{ transform:translateY(0) scale(.99); }

.pv-btn-amz{ background:transparent; color:var(--ink); }
.pv-btn-amz:hover{ background:var(--porcelain-2); }

.pv-ref{ font-size:12px; color:var(--taupe-lt); margin:4px 0 0; }
.pv-ref code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }

/* ── frequently bought together ─────────────────────────────── */
.fbt{
  margin:clamp(30px,5vw,52px) 0 0; padding:clamp(18px,3vw,26px);
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r);
}
.fbt-line{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin:16px 0 18px;
}
.fbt-item{
  flex:0 0 108px; text-align:center; cursor:pointer;
  transition:transform .34s var(--spring);
}
.fbt-item:hover{ transform:translateY(-3px); }
.fbt-item img{
  width:108px; height:108px; object-fit:cover; display:block;
  background:var(--porcelain-2); border:1px solid var(--line-2); border-radius:var(--r);
}
.fbt-item span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12px; line-height:1.36; color:var(--ink-3); margin-top:8px;
}
.fbt-plus{
  align-self:center; margin-top:-22px; font-style:normal;
  font-size:19px; color:var(--taupe-lt); font-weight:300;
}
.pv-btn-bundle{
  flex:none; width:100%;
  background:var(--gold-grad); border-color:transparent; color:#2B2B24;
  background-size:180% 100%; background-position:0 0;
  transition:background-position .8s var(--ease-out), transform .2s var(--spring), box-shadow .3s var(--ease);
}
.pv-btn-bundle:hover{ background-position:100% 0; }
.pv-btn-bundle.added{ background:var(--sage); color:#fff; }

/* ── the card now reads as tappable ─────────────────────────── */
.card-openable{ cursor:pointer; }
.card-openable:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ── respect the setting ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .rc, .pv-card, .pv-scrim, .rrow-h::after{ animation:none !important; }
  .rc, .rc-media img, .pv-main img, .pv-btn, .pv-x, .fbt-item, .pv-shot{
    transition:none !important;
  }
  .rc:hover, .fbt-item:hover, .pv-btn:hover{ transform:none; }
  .rc-media::after, .pv-btn::after{ display:none; }
}