/* "Dolabın" pantry cabinet. Ported from the app's src/styles/pantryCabinet.css (same colours).
   Size it by giving .dcab a width (it keeps the app's 200:220 aspect). Driven by --open (0..1). */
.dcab {
  --cabinet-frame: #b6a282;
  --cabinet-edge: #89785c;
  --cabinet-inside: #f5eddb;
  --cabinet-door: #f1e5cf;
  --cabinet-panel: #ddceb1;
  --cabinet-shelf: #8b9870;
  --cabinet-fill: #e9a18a;
  --cabinet-ink: #514b38;
  --cabinet-accent: #ff6b3d;
  --open: 0;
  display: block;
  width: 100%;
  max-width: 340px;
  container-type: inline-size;
  font-family: var(--font, 'Nunito', 'Arial Rounded MT Bold', sans-serif);
}

@media (prefers-color-scheme: dark) {
  .dcab {
    --cabinet-frame: #887e64;
    --cabinet-edge: #5f5947;
    --cabinet-inside: #d8d0bb;
    --cabinet-door: #e7ddc8;
    --cabinet-panel: #cfc2a6;
    --cabinet-shelf: #7a8665;
    --cabinet-fill: #d99078;
    --cabinet-ink: #403d31;
    --cabinet-accent: #ff865d;
  }
}

.dcab-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 200 / 220;
  perspective: 850px;
  perspective-origin: center;
  isolation: isolate;
}

.dcab-body {
  position: absolute;
  inset: 0;
  border: 7px solid var(--cabinet-frame);
  border-bottom: 11px solid var(--cabinet-edge);
  border-radius: 21px 21px 17px 17px;
  background: var(--cabinet-frame);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--cabinet-edge) 82%, transparent);
  transform-style: preserve-3d;
}
.dcab-body::before {
  content: '';
  position: absolute;
  inset: -7px -7px auto;
  height: 10px;
  border-radius: 16px 16px 5px 5px;
  background: color-mix(in srgb, var(--cabinet-door) 84%, white);
  border-bottom: 2px solid var(--cabinet-edge);
}
.dcab-body::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -9px;
  height: 5px;
  border-radius: 0 0 4px 4px;
  background: var(--cabinet-edge);
}

.dcab-interior {
  position: absolute;
  inset: 6px 6px 10px;
  overflow: hidden;
  border-radius: 12px 12px 7px 7px;
  background: var(--cabinet-inside);
  /* App fades the inside in as soon as the doors start to move. */
  opacity: clamp(0, calc(var(--open) * 8), 1);
}
.dcab-meter { display: block; width: 100%; height: 100%; }

.dcab-door {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: calc(50% + 1px);
  box-sizing: border-box;
  border: 3px solid var(--cabinet-frame);
  border-bottom: 7px solid var(--cabinet-edge);
  background: var(--cabinet-door);
  backface-visibility: visible;
  transform-style: preserve-3d;
  will-change: transform;
}
.dcab-door::before {
  content: '';
  position: absolute;
  inset: 11px 9px 14px;
  border: 2px solid var(--cabinet-panel);
  border-radius: 10px;
}
.dcab-door::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: var(--cabinet-accent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cabinet-accent) 65%, #735448);
}
.dcab-door-left {
  left: 0;
  border-radius: 14px 8px 8px 11px;
  transform-origin: left center;
  transform: rotateY(calc(var(--open) * -102deg));
}
.dcab-door-left::after { right: 8px; }
.dcab-door-right {
  right: 0;
  border-radius: 8px 14px 11px 8px;
  transform-origin: right center;
  transform: rotateY(calc(var(--open) * 102deg));
}
.dcab-door-right::after { left: 8px; }

.dcab-note {
  position: absolute;
  top: 12%;
  left: 12%;
  z-index: 4;
  box-sizing: border-box;
  width: 76%;
  min-height: 50%;
  padding: 13px 9px 8px;
  border: 1px solid #d5c5a8;
  border-radius: 2px 3px 7px 2px;
  background: #fff7e8;
  color: #5a4a35;
  box-shadow: 0 3px 0 #9b896b;
  text-align: left;
  transform: rotate(-4deg) translateZ(2px);
}
.dcab-note strong {
  display: block;
  color: #5a4a35;
  font-size: clamp(11px, 4.3cqw, 15px);
  line-height: 1.12;
  letter-spacing: -.25px;
  font-weight: 850;
}
.dcab-note-tape {
  position: absolute;
  top: -6px;
  left: 29%;
  width: 43%;
  height: 11px;
  border-radius: 2px;
  background: #9aa17a;
  transform: rotate(3deg);
}
.dcab-note-lines { display: grid; gap: 5px; margin: 10px 0 8px; }
.dcab-note-lines i { display: block; width: 85%; height: 2px; border-radius: 3px; background: #d9ccb3; }
.dcab-note-lines i:last-child { width: 58%; }
.dcab-note-count { color: #86734f; font-size: clamp(10px, 3.2cqw, 12px); font-weight: 800; }

/* Shelf products: pop in with a springy scale from their bottom-centre. */
.dcab-item {
  opacity: 0;
  transform: translateY(5px) scale(.35);
  transition: opacity 160ms ease-out, transform 520ms cubic-bezier(.34, 1.75, .5, 1);
  transition-delay: var(--d, 0ms);
}
.dcab-item.on { opacity: 1; transform: none; }

/* Site-only SKT stickers placed on products. */
.dcab-tag { opacity: 0; transition: opacity 200ms ease-out; }
.dcab-tag.on { opacity: 1; }
.dcab-tag-bg { fill: #fff7e8; stroke: #3a1a0c; stroke-width: 1.1; }
.dcab-tag-tx { fill: #3a1a0c; font: 900 6px/1 var(--font, 'Nunito', sans-serif); letter-spacing: -.1px; }
.dcab-tag.is-soon .dcab-tag-bg { fill: #e5583e; }
.dcab-tag.is-soon .dcab-tag-tx { fill: #fff; }
.dcab-tag.shake.on .dcab-tag-in { animation: dcab-shake 620ms cubic-bezier(.36, .07, .19, .97) 1 both; }
@keyframes dcab-shake {
  0%, 100% { transform: none; }
  15% { transform: rotate(-9deg) scale(1.12); }
  30% { transform: rotate(8deg) scale(1.12); }
  45% { transform: rotate(-6deg) scale(1.06); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dcab-item, .dcab-tag { transition: none; transform: none; }
  .dcab-tag.shake.on .dcab-tag-in { animation: none; }
}