/* KITLIST — the 3D train case.
   Rectangular vanity case. The zip runs a three-sided U (left → front → right);
   the back edge is the hinge the lid flips up on. Pure CSS 3D, no libraries. */

.scene3d{
  --bw:420px;  /* case width  */
  --bh:158px;  /* base height */
  --bd:215px;  /* case depth  */
  --lh:40px;   /* lid skirt   */
  --ch:15px;   /* corner chamfer */
  perspective:1600px;
  perspective-origin:50% 24%;
  display:grid;place-items:center;
  padding:clamp(165px,19vw,290px) 0 clamp(34px,4vw,56px);
  touch-action:pan-y;
  overflow-x:clip;
}
@media(max-width:640px){.scene3d{--bw:min(82vw,340px);--bh:138px;--bd:180px;--lh:30px;--ch:12px}}

.bag3d{
  position:relative;width:var(--bw);height:var(--bh);
  transform-style:preserve-3d;
  transform:rotateX(-26deg) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out;
  cursor:grab;
}
.bag3d.dragging{cursor:grabbing;transition:none}

/* ---- materials ---- */
.bag3d[data-color=blush]{--m1:#F0D3CA;--m2:#DDAA9C;--m3:#C9917F;--stitch:rgba(150,84,63,.32);--ink-on:#5C4038;--inner:#F7E9E4;--inner-2:#E9D3CA}
.bag3d[data-color=cream]{--m1:#F7F0E6;--m2:#E4D5C0;--m3:#CFBDA4;--stitch:rgba(120,100,80,.28);--ink-on:#5E5245;--inner:#FAF4EC;--inner-2:#EBDFCF}
.bag3d[data-color=noir]{--m1:#463C36;--m2:#2A2320;--m3:#1B1614;--stitch:rgba(255,255,255,.13);--ink-on:#EFE8E0;--inner:#4A403A;--inner-2:#382F2A}
.bag3d[data-color=sage]{--m1:#D2DAC9;--m2:#AFBBA3;--m3:#95A288;--stitch:rgba(80,95,70,.3);--ink-on:#45523D;--inner:#E4E9DE;--inner-2:#CDD6C4}
.bag3d[data-color=lilac]{--m1:#E1D6E9;--m2:#C4B2D2;--m3:#A895B8;--stitch:rgba(110,90,130,.3);--ink-on:#584A66;--inner:#EFE8F3;--inner-2:#DCD0E5}
.bag3d[data-color=butter]{--m1:#F6E9C4;--m2:#E4CE8E;--m3:#CDB671;--stitch:rgba(150,120,50,.28);--ink-on:#6B5A2A;--inner:#F9F0D8;--inner-2:#EFE1BC}
.bag3d[data-color=cocoa]{--m1:#95755F;--m2:#6F5140;--m3:#573D2F;--stitch:rgba(255,240,225,.2);--ink-on:#F4E9DF;--inner:#A08472;--inner-2:#8A6E5C}
.bag3d[data-color=rose]{--m1:#F4D9DE;--m2:#E0AEB8;--m3:#C9909C;--stitch:rgba(150,70,90,.3);--ink-on:#5E3742;--inner:#FBEDF0;--inner-2:#EFD8DE}
.bag3d[data-color=sky]{--m1:#D4E2EC;--m2:#AEC5D8;--m3:#93ACC2;--stitch:rgba(60,90,120,.3);--ink-on:#3B4E5E;--inner:#E8F0F6;--inner-2:#D2E0EA}
.bag3d[data-color=mint]{--m1:#D5E9DF;--m2:#AFD1C2;--m3:#93B8A6;--stitch:rgba(50,110,90,.3);--ink-on:#38564B;--inner:#E9F4EF;--inner-2:#D3E7DD}
.bag3d[data-color=wine]{--m1:#8E5560;--m2:#6B3A45;--m3:#4F2933;--stitch:rgba(255,225,230,.2);--ink-on:#F6E6E9;--inner:#A06B76;--inner-2:#8A5761}
.bag3d[data-color=pearl]{--m1:#FBF8F5;--m2:#EAE2DA;--m3:#D6CBC0;--stitch:rgba(140,120,100,.26);--ink-on:#5A5049;--inner:#FDFBF9;--inner-2:#EFE8E1}
.bag3d[data-hardware=gold]{--hw1:#E4C68C;--hw2:#B98F45;--hw3:#F7E7C4;--hwd:#8E6A2E}
.bag3d[data-hardware=silver]{--hw1:#DADADE;--hw2:#9EA0A8;--hw3:#F6F6F9;--hwd:#7A7C84}
.bag3d[data-hardware=rosegold]{--hw1:#E7AFAF;--hw2:#B76E79;--hw3:#F8DED6;--hwd:#8E525C}

/* ---- shell faces ---- */
.b3-face,.b3-rim,.b3-pull,.b3-shadow,.b3-handle,.b3-divider,.b3-lid,.b3-lid *,.b3-zip,.b3-zip *,.b3-corner,.b3-edge{pointer-events:none}
.b3-face{
  position:absolute;left:50%;top:50%;
  background:linear-gradient(168deg,var(--m1) 0%,var(--m2) 62%,var(--m3) 100%);
  backface-visibility:hidden;
}
/* leather sheen — the thing that reads as "real" more than any texture */
.b3-face.skin::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(104deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 24%, transparent 44%),
    linear-gradient(90deg, rgba(0,0,0,.20) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.20) 100%),
    linear-gradient(0deg, rgba(0,0,0,.17), transparent 30%);
}
.b3-front{width:calc(var(--bw) - 2*var(--ch));height:var(--bh);
  transform:translate(-50%,-50%) translateZ(calc(var(--bd)/2));
  border-radius:2px 2px 13px 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -14px 26px rgba(58,42,42,.17)}
.b3-back{width:calc(var(--bw) - 2*var(--ch));height:var(--bh);
  transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--bd)/2));
  border-radius:2px 2px 13px 13px}
.b3-left{width:calc(var(--bd) - 2*var(--ch));height:var(--bh);
  transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--bw)/2));
  border-radius:3px 3px 13px 13px;filter:brightness(.88)}
.b3-right{width:calc(var(--bd) - 2*var(--ch));height:var(--bh);
  transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--bw)/2));
  border-radius:3px 3px 13px 13px;filter:brightness(.93)}
.b3-floor{width:calc(var(--bw) - 12px);height:calc(var(--bd) - 12px);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--bh)/-2 + 5px));
  background:var(--inner);border-radius:9px;backface-visibility:visible;
  box-shadow:inset 0 0 50px rgba(58,42,42,.34)}
.b3-innerback,.b3-innerfront{width:calc(var(--bw) - 10px);height:var(--bh);
  background:var(--inner);border-radius:9px;backface-visibility:visible}
.b3-innerback{transform:translate(-50%,-50%) translateZ(calc(var(--bd)/-2 + 5px));filter:brightness(.9)}
.b3-innerfront{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--bd)/-2 + 5px));filter:brightness(.97)}

/* --- extra patterns --- */
.bag3d[data-pattern=stripe] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.42;
  background:repeating-linear-gradient(90deg, var(--stitch) 0 11px, transparent 11px 26px);
}
.bag3d[data-pattern=polka] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.4;
  background-image:radial-gradient(var(--stitch) 3.4px, transparent 3.6px);
  background-size:26px 26px;
}
.bag3d[data-pattern=check] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.4;
  background-image:
    linear-gradient(45deg, var(--stitch) 25%, transparent 25% 75%, var(--stitch) 75%),
    linear-gradient(45deg, var(--stitch) 25%, transparent 25% 75%, var(--stitch) 75%);
  background-size:30px 30px;background-position:0 0, 15px 15px;
}
.bag3d[data-pattern=floral] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='rgba(150,84,90,.42)'%3E%3Ccircle cx='16' cy='12' r='3.1'/%3E%3Ccircle cx='11' cy='18' r='3.1'/%3E%3Ccircle cx='21' cy='18' r='3.1'/%3E%3Ccircle cx='13' cy='25' r='3.1'/%3E%3Ccircle cx='19' cy='25' r='3.1'/%3E%3Ccircle cx='48' cy='40' r='3.1'/%3E%3Ccircle cx='43' cy='46' r='3.1'/%3E%3Ccircle cx='53' cy='46' r='3.1'/%3E%3Ccircle cx='45' cy='53' r='3.1'/%3E%3Ccircle cx='51' cy='53' r='3.1'/%3E%3C/g%3E%3Cg fill='rgba(190,150,120,.5)'%3E%3Ccircle cx='16' cy='19' r='2.2'/%3E%3Ccircle cx='48' cy='47' r='2.2'/%3E%3C/g%3E%3Cg stroke='rgba(120,140,110,.4)' stroke-width='1.6' fill='none'%3E%3Cpath d='M34 8c4 4 4 9 1 13'/%3E%3Cpath d='M8 44c4 4 9 4 13 1'/%3E%3C/g%3E%3C/svg%3E");
}
.bag3d[data-pattern=croc] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34'%3E%3Cg fill='none' stroke='rgba(30,20,15,.34)' stroke-width='1.5'%3E%3Crect x='1' y='1' width='20' height='14' rx='4'/%3E%3Crect x='24' y='1' width='20' height='14' rx='4'/%3E%3Crect x='12' y='18' width='20' height='14' rx='4'/%3E%3Crect x='-9' y='18' width='20' height='14' rx='4'/%3E%3Crect x='34' y='18' width='20' height='14' rx='4'/%3E%3C/g%3E%3C/svg%3E");
}
.bag3d[data-pattern=houndstooth] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.44;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='rgba(30,22,18,.5)'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath d='M16 16h16v16H16z'/%3E%3Cpath d='M16 8l8-8v8zM8 16l-8 8v-8z'/%3E%3Cpath d='M24 16h8l-8 8zM0 0h8L0 8z'/%3E%3C/g%3E%3C/svg%3E");
}
.bag3d[data-pattern=star] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.46;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='rgba(40,28,22,.42)'%3E%3Cpath d='M13 4l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M39 30l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M40 8l1.3 3.2L44.5 12l-3.2 1.3L40 16l-1.3-2.7L35.5 12l3.2-.8z'/%3E%3Cpath d='M12 34l1.3 3.2 3.2.8-3.2 1.3L12 42l-1.3-2.7-3.2-1.3 3.2-.8z'/%3E%3C/g%3E%3C/svg%3E");
}
.bag3d[data-pattern=zebra] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='rgba(30,22,18,.48)'%3E%3Cpath d='M6 0c4 9 3 18-2 26 6-9 7-18 2-26z'/%3E%3Cpath d='M22 2c5 11 4 21-2 31 7-11 8-21 2-31z'/%3E%3Cpath d='M40 0c3 8 2 16-3 23 6-8 7-16 3-23z'/%3E%3Cpath d='M58 4c5 10 4 20-2 29 7-10 8-20 2-29z'/%3E%3Cpath d='M12 40c4 9 3 18-2 26 6-9 7-18 2-26z'/%3E%3Cpath d='M32 38c5 11 4 21-2 31 7-11 8-21 2-31z'/%3E%3Cpath d='M52 42c3 8 2 16-3 23 6-8 7-16 3-23z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- chamfered vertical corners: what stops it reading as a flat cardboard box ---- */
.b3-edge{
  position:absolute;left:50%;top:50%;
  width:calc(var(--ch) * 1.44);height:var(--bh);
  background:linear-gradient(168deg,var(--m1),var(--m2) 62%,var(--m3));
  border-radius:0 0 6px 6px;
  backface-visibility:hidden;
}
/* a soft specular line down each bevel sells the curve */
.b3-edge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.20) 45%, rgba(0,0,0,.24));
}
.b3-edge.fl{transform:translate(-50%,-50%)
  translate3d(calc(var(--bw)/-2 + var(--ch)/2), 0, calc(var(--bd)/2 - var(--ch)/2)) rotateY(-45deg)}
.b3-edge.fr{transform:translate(-50%,-50%)
  translate3d(calc(var(--bw)/2 - var(--ch)/2), 0, calc(var(--bd)/2 - var(--ch)/2)) rotateY(45deg)}
.b3-edge.bl{transform:translate(-50%,-50%)
  translate3d(calc(var(--bw)/-2 + var(--ch)/2), 0, calc(var(--bd)/-2 + var(--ch)/2)) rotateY(45deg)}
.b3-edge.br{transform:translate(-50%,-50%)
  translate3d(calc(var(--bw)/2 - var(--ch)/2), 0, calc(var(--bd)/-2 + var(--ch)/2)) rotateY(-45deg)}

/* metal corner caps — small detail, big realism payoff */
.b3-corner{
  position:absolute;left:50%;top:50%;width:17px;height:17px;border-radius:3px;
  background:linear-gradient(140deg,var(--hw3),var(--hw2));
  box-shadow:0 1px 2px rgba(58,42,42,.4);
}
.b3-corner.c1{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/-2 + 9px), calc(var(--bh)/2 - 9px), calc(var(--bd)/2 + 1px))}
.b3-corner.c2{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/2 - 9px),  calc(var(--bh)/2 - 9px), calc(var(--bd)/2 + 1px))}

/* compartment dividers */
.b3-divider{
  position:absolute;left:50%;top:50%;
  width:calc(var(--bw) - 30px);height:calc(var(--bh)*.6);
  background:linear-gradient(180deg,var(--inner-2),var(--inner));
  border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(58,42,42,.08), 0 3px 7px rgba(58,42,42,.16);
  backface-visibility:visible;
}

/* ---- patterns ---- */
.bag3d[data-pattern=quilted] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background:
    repeating-linear-gradient(45deg, transparent 0 30px, var(--stitch) 30px 31px),
    repeating-linear-gradient(-45deg, transparent 0 30px, var(--stitch) 30px 31px);
}
.bag3d[data-pattern=gingham] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.38;
  background:
    repeating-linear-gradient(0deg, var(--stitch) 0 15px, transparent 15px 30px),
    repeating-linear-gradient(90deg, var(--stitch) 0 15px, transparent 15px 30px);
}
.bag3d[data-pattern=leopard] .b3-face.skin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.46;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='rgba(42,33,28,.5)' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 18c5-6 14-5 16 1M14 26c6 3 12 1 15-3'/%3E%3Cpath d='M55 8c6-3 13 1 13 7M57 16c5 2 10 0 12-4'/%3E%3Cpath d='M30 55c4-7 14-7 17-1M33 63c6 3 12 0 14-5'/%3E%3Cpath d='M68 48c6-2 12 2 11 8M69 56c5 1 9-1 11-5'/%3E%3Cpath d='M8 72c5-5 13-3 14 2M10 79c5 2 10 1 13-3'/%3E%3Cpath d='M52 80c5-5 13-4 15 1'/%3E%3C/g%3E%3Cg fill='rgba(42,33,28,.28)'%3E%3Cellipse cx='20' cy='21' rx='5' ry='4'/%3E%3Cellipse cx='63' cy='12' rx='5' ry='4'/%3E%3Cellipse cx='39' cy='58' rx='5' ry='4'/%3E%3Cellipse cx='74' cy='52' rx='4' ry='4'/%3E%3Cellipse cx='16' cy='75' rx='4' ry='3'/%3E%3Cellipse cx='60' cy='84' rx='5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ================= ZIPPER: three sides ================= */
/* Each track sits on the top edge of its face. A "teeth" layer shows the closed
   chain; an "open" layer wipes across behind the travelling pull. */
.b3-zip{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.b3-track{
  position:absolute;left:50%;top:50%;height:13px;
  transform-style:preserve-3d;
}
.b3-track .teeth{
  position:absolute;inset:0;border-radius:3px;
  background:
    repeating-linear-gradient(90deg,
      var(--hw2) 0 3px, var(--hw3) 3px 5px, var(--hw2) 5px 6px, transparent 6px 8px),
    linear-gradient(180deg, var(--hwd), var(--hw2) 45%, var(--hwd));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
/* the opened gap: chain splits, dark case interior shows between the halves */
.b3-track .open{
  position:absolute;inset:0;border-radius:3px;transform-origin:left center;
  transform:scaleX(0);
  background:
    linear-gradient(180deg, var(--hw2) 0 3px, rgba(30,20,18,.85) 3px 10px, var(--hw2) 10px 13px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5);
}
.b3-track.tf{width:var(--bw);
  transform:translate(-50%,-50%) translateY(calc(var(--bh)/-2)) translateZ(calc(var(--bd)/2))}
.b3-track.tl{width:var(--bd);
  transform:translate(-50%,-50%) translateY(calc(var(--bh)/-2)) rotateY(-90deg) translateZ(calc(var(--bw)/2))}
.b3-track.tr{width:var(--bd);
  transform:translate(-50%,-50%) translateY(calc(var(--bh)/-2)) rotateY(90deg) translateZ(calc(var(--bw)/2))}
/* left track runs back→front, right track runs front→back */
.b3-track.tl .open{transform-origin:right center}

/* wipe timings: left 0-.72s, front .72-1.5s, right 1.5-2.2s */
.bag3d.unzipping .b3-track.tl .open,.bag3d.open .b3-track.tl .open{
  animation:zipWipe .72s cubic-bezier(.45,.05,.55,.95) 0s forwards}
.bag3d.unzipping .b3-track.tf .open,.bag3d.open .b3-track.tf .open{
  animation:zipWipe .78s cubic-bezier(.4,.05,.6,.95) .72s forwards}
.bag3d.unzipping .b3-track.tr .open,.bag3d.open .b3-track.tr .open{
  animation:zipWipe .7s cubic-bezier(.45,.05,.5,.95) 1.5s forwards}
@keyframes zipWipe{to{transform:scaleX(1)}}

/* the pull travels the U: back-left → front-left → front-right → back-right */
.b3-pull{
  position:absolute;left:50%;top:50%;width:13px;height:32px;border-radius:3px 3px 8px 8px;z-index:4;
  background:linear-gradient(150deg,var(--hw3) 0%,var(--hw1) 40%,var(--hw2) 100%);
  border:1px solid var(--hwd);
  box-shadow:0 3px 7px rgba(58,42,42,.45), inset 0 1px 1px rgba(255,255,255,.6);
  transform:translate(-50%,-50%)
    translate3d(calc(var(--bw)/-2), calc(var(--bh)/-2 + 12px), calc(var(--bd)/-2));
}
/* little slider body above the pull tab */
.b3-pull::before{
  content:"";position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  width:19px;height:14px;border-radius:4px;
  background:linear-gradient(150deg,var(--hw3),var(--hw2));
  border:1px solid var(--hwd);box-shadow:0 1px 3px rgba(58,42,42,.4);
}
.bag3d.unzipping .b3-pull,.bag3d.open .b3-pull{
  animation:zipRun 2.2s cubic-bezier(.42,.02,.5,.98) forwards;
}
@keyframes zipRun{
  0%{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/-2), calc(var(--bh)/-2 + 12px), calc(var(--bd)/-2))}
  33%{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/-2), calc(var(--bh)/-2 + 12px), calc(var(--bd)/2))}
  68%{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/2),  calc(var(--bh)/-2 + 12px), calc(var(--bd)/2))}
  100%{transform:translate(-50%,-50%) translate3d(calc(var(--bw)/2),  calc(var(--bh)/-2 + 12px), calc(var(--bd)/-2))}
}

/* ---- the lid, hinged on the back edge (the side the zip never opens) ---- */
.b3-lid{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translateY(calc(var(--bh)/-2)) translateZ(calc(var(--bd)/-2)) rotateX(var(--lid,0deg));
  transition:transform 1.05s cubic-bezier(.3,1.4,.5,1);
}
.bag3d.open .b3-lid{--lid:104deg}
.b3-lid-top{
  position:absolute;left:calc(var(--bw)/-2);top:0;width:var(--bw);height:var(--bd);
  transform-origin:50% 0;transform:rotateX(90deg);
  background:linear-gradient(168deg,var(--m1),var(--m2) 62%,var(--m3));
  border-radius:14px;backface-visibility:visible;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px -8px rgba(58,42,42,.4);
}
/* lid interior: lining, elastic brush loops, mirror */
.b3-lid-in{
  position:absolute;left:calc(var(--bw)/-2);top:0;width:var(--bw);height:var(--bd);
  transform-origin:50% 0;
  transform:rotateX(90deg) rotateY(180deg) translateZ(2px);
  background:var(--inner);border-radius:0 0 15px 15px;
  box-shadow:inset 0 0 0 7px var(--m2), inset 0 0 34px rgba(58,42,42,.16);
  backface-visibility:visible;opacity:0;transition:opacity .45s .55s;
}
.bag3d.open .b3-lid-in{opacity:1}
.b3-mirror{
  position:absolute;left:16%;top:9%;width:68%;height:44%;border-radius:7px;
  background:linear-gradient(126deg,#FDFDFD 0%,#E7E4E2 36%,#F8F6F4 52%,#D9D5D3 100%);
  box-shadow:inset 0 0 0 4px var(--hw1), inset 0 0 26px rgba(58,42,42,.2), 0 1px 3px rgba(58,42,42,.3);
}
.b3-elastic{position:absolute;left:14%;width:72%;height:11px;border-radius:3px;
  background:linear-gradient(180deg,var(--inner-2),rgba(58,42,42,.22));
  box-shadow:0 1px 2px rgba(58,42,42,.25)}
.b3-elastic.e1{top:60%}
.b3-elastic.e2{top:72%}
.b3-elastic.e3{top:84%}
/* lid skirt gives the lid visible thickness */
.b3-lid-skirt{
  position:absolute;left:calc(var(--bw)/-2);top:0;
  width:var(--bw);height:var(--lh);transform:translateZ(var(--bd));
  background:linear-gradient(168deg,var(--m1),var(--m2));
  border-radius:14px 14px 0 0;backface-visibility:visible;
}

/* ---- handle, embroidery, shadow ---- */
.b3-handle{
  position:absolute;left:50%;top:50%;width:124px;height:48px;
  transform:translate(-50%,-50%) translateY(calc(var(--bh)/-2 + 36px)) translateZ(calc(var(--bd)/2 + 3px));
  border:12px solid var(--m3);border-bottom:0;border-radius:58px 58px 0 0;
  box-shadow:0 -1px 4px rgba(58,42,42,.3), inset 0 2px 3px rgba(255,255,255,.14);
}
.b3-name{position:absolute;left:50%;top:50%;width:var(--bw);text-align:center;
  transform:translate(-50%,-50%) translateY(calc(var(--bh)/2 - 36px)) translateZ(calc(var(--bd)/2 + 1px));
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;
  color:var(--ink-on);letter-spacing:.03em;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.b3-monogram{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateX(calc(var(--bw)/2 - 52px)) translateY(calc(var(--bh)/2 - 34px)) translateZ(calc(var(--bd)/2 + 1px));
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-on);opacity:.85;
  letter-spacing:.14em;border:1px solid currentColor;border-radius:999px;padding:4px 11px}
.b3-shadow{position:absolute;left:50%;top:50%;width:calc(var(--bw)*1.1);height:calc(var(--bd)*1.22);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--bh)/-2 - 14px));
  background:radial-gradient(ellipse at center, rgba(58,42,42,.36), transparent 64%);
  border-radius:50%;backface-visibility:visible}

/* ---- products standing inside ---- */
.b3-items{position:absolute;inset:0;transform-style:preserve-3d}
.b3-item{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  border:0;padding:0;background:transparent;cursor:pointer}
.b3-card{
  display:block;width:var(--iw,78px);
  background:var(--shell,#fff);border-radius:10px;padding:5px 5px 6px;
  box-shadow:0 3px 10px rgba(58,42,42,.22), inset 0 0 0 1px rgba(58,42,42,.08);
  transition:transform .55s cubic-bezier(.2,.9,.3,1.15), opacity .45s, box-shadow .22s;
  transform:rotate(var(--tilt,0deg)) translateY(64px);opacity:0;
  transition-delay:var(--d,0ms);
}
.bag3d.open .b3-card{transform:rotate(var(--tilt,0deg)) translateY(0);opacity:1}
.bag3d.open .b3-item:hover .b3-card,.bag3d.open .b3-item:focus-visible .b3-card{
  transform:rotate(var(--tilt,0deg)) translateY(-14px);
  box-shadow:0 14px 26px rgba(58,42,42,.3), inset 0 0 0 1px rgba(58,42,42,.08);
  transition-delay:0ms;
}
.b3-item:focus-visible{outline:none}
.b3-card > img{width:100%!important;height:auto!important;aspect-ratio:1;border-radius:7px;object-fit:cover;display:block}
.b3-tint{display:block;width:100%;aspect-ratio:1;border-radius:7px;
  background:linear-gradient(150deg,var(--t1),var(--t2));position:relative}
.b3-tint b{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-weight:500;font-size:18px;color:rgba(58,42,42,.55)}
.b3-star{position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:999px;
  background:var(--rose,#B76E79);color:#fff;font-size:9px;line-height:17px;text-align:center;
  box-shadow:0 1px 3px rgba(58,42,42,.3)}
.b3-ampm{position:absolute;top:-6px;left:-6px;font-size:7.5px;font-weight:700;letter-spacing:.06em;
  background:#fff;border-radius:999px;padding:2px 6px;color:var(--ink-70,#5c554f);
  text-transform:uppercase;box-shadow:0 1px 3px rgba(58,42,42,.25)}
.b3-card figcaption{
  margin-top:4px;font-family:var(--sans);font-size:8.5px;line-height:1.2;color:var(--ink-70,#5c554f);
  text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.4em}
.b3-item.tucked{opacity:0;pointer-events:none}
.b3-hint{text-align:center;font-size:12.5px;color:var(--ink-45);margin-top:2px}

/* ---- pull-out flight + detail card ---- */
.b3-flight{position:fixed;z-index:190;border-radius:10px;overflow:hidden;pointer-events:none;
  box-shadow:0 30px 60px -18px rgba(58,42,42,.5);background:#fff;
  transition:all .5s cubic-bezier(.3,.8,.3,1)}
.b3-flight img{width:100%;height:100%;object-fit:cover;display:block}
.pull-veil{position:fixed;inset:0;background:rgba(58,42,42,.38);backdrop-filter:blur(3px);
  z-index:180;opacity:0;pointer-events:none;transition:opacity .3s}
.pull-veil.on{opacity:1;pointer-events:auto}
.pull-card{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);
  width:min(92vw,460px);max-height:86vh;overflow:auto;z-index:195;
  background:var(--cream,#FBF5F2);border-radius:22px;padding:24px;
  box-shadow:0 46px 90px -24px rgba(58,42,42,.55);
  opacity:0;pointer-events:none;transition:opacity .3s, transform .34s cubic-bezier(.2,.7,.3,1)}
.pull-card.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pull-card .slot{width:132px;height:132px;border-radius:14px;overflow:hidden;margin:0 auto 4px;background:var(--cream-2,#F6ECE7)}
.pull-card .slot img{width:100%;height:100%;object-fit:cover}
.pull-card .pc-brand{text-align:center;font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rose,#B76E79);margin:12px 0 6px}
.pull-card h3{text-align:center;font-family:var(--serif);font-weight:500;font-size:26px;margin:0;
  line-height:1.12;letter-spacing:-.005em}
.pull-card .pc-desc{font-size:13.5px;line-height:1.6;color:var(--ink-70);text-align:center;margin:12px 0 0}
.pull-card .pc-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.pull-card .pc-chips i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:var(--cream-2,#F6ECE7);padding:5px 11px;border-radius:999px;color:var(--ink-70)}
.pull-card .pc-note{border-left:2px solid var(--rose-soft,#DDA8AC);padding:2px 0 2px 14px;margin:16px 0 0;
  font-size:15px;font-style:italic;font-family:var(--serif);color:var(--ink);line-height:1.5}
.pull-card .pc-note cite{display:block;font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45);margin-top:5px}
.pull-card .pc-actions{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* ---- preset carousel ---- */
.preset-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 4px}
.preset-nav button{width:40px;height:40px;border-radius:999px;border:1px solid var(--line,rgba(58,42,42,.1));
  background:var(--shell,#fff);cursor:pointer;font-size:15px;color:var(--ink-70);transition:.16s;line-height:1}
.preset-nav button:hover{border-color:var(--rose);color:var(--rose-deep);transform:scale(1.06)}
.preset-name{min-width:150px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px}
.preset-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.preset-dots i{width:6px;height:6px;border-radius:999px;background:var(--ink-25,rgba(58,42,42,.24));transition:.2s}
.preset-dots i.on{background:var(--rose,#B76E79);transform:scale(1.3)}

@media(prefers-reduced-motion:reduce){
  .b3-flight,.pull-card,.b3-card,.b3-lid,.b3-pull,.b3-track .open{transition:none!important;animation:none!important}
  .bag3d{transition:none}
  .b3-card{opacity:1;transform:rotate(var(--tilt,0deg))}
  .b3-track .open{transform:scaleX(1)}
  .b3-lid-in{opacity:1}
}