/* ==========================================================================
   Tabletop theme — one-page store on a 3D table (StorkPlus)
   The table (top, apron, four legs) is drawn with CSS 3D transforms: the top
   is a plane tilted away from the viewer. Every product is a small 3D object
   standing on it, perpendicular to the top: a cylinder (jar, mug, bowl,
   glass) or a box built from slats, each slat showing a slice of the
   product's own photo, with a wax disc in the photo's colour, a wick and a
   flame. The one under the cursor lifts and glows.
   ========================================================================== */

:root {
    --tt-bg: #f4eee6;
    --tt-ink: #2a241f;
    --tt-muted: #8b8176;
    --tt-line: #e3dacd;
    --tt-card: #fbf8f3;
    --tt-ease: cubic-bezier(.22, .8, .24, 1);

    --tt-tilt: 56deg;        /* how far the table top leans away */
    --tt-cell-d: 200px;      /* depth of one row on the table (the tilt squashes it) */
    --tt-fig: 150px;         /* room reserved above the table for the tallest object */
    --tt-obj: 1.18;          /* object scale (phones shrink it) */
    --tt-leg: 250px;         /* table leg length */
    --tt-rows: 3;
    --tt-cols: 4;
    --tt-plane: calc(var(--tt-rows) * var(--tt-cell-d) + 96px);
}

body.tt-theme {
    margin: 0;
    background: var(--tt-bg);
    color: var(--tt-ink);
    font-family: 'Inter', 'Cairo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.tt-theme.tt-rtl { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }

.tt-page { min-height: 100vh; display: flex; flex-direction: column; }
.tt-main { flex: 1 0 auto; }

/* ── header ─────────────────────────────────────────────────────────────── */
.tt-header {
    position: relative; z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 18px clamp(16px, 4vw, 48px);
}

.tt-logo { justify-self: start; display: inline-flex; align-items: center; text-decoration: none; color: var(--tt-ink); }
.tt-logo img { max-height: 72px; width: auto; display: block; }
.tt-logo span { font-family: 'Fraunces', 'Cairo', serif; font-weight: 600; font-size: 40px; letter-spacing: -.01em; line-height: 1.1; }

.tt-nav { display: flex; gap: 26px; }
.tt-nav a { color: var(--tt-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: color .2s; white-space: nowrap; }
.tt-nav a:hover, .tt-nav a:focus-visible { color: var(--tt-ink); }

.tt-tools { justify-self: end; display: flex; align-items: center; gap: 10px; }

.tt-search {
    display: flex; align-items: center; gap: 6px;
    background: rgba(42, 36, 31, .06); border-radius: 999px; padding: 7px 14px; width: 180px;
}
.tt-search svg { width: 16px; height: 16px; flex: none; }
.tt-search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; font-size: 13px; color: var(--tt-ink); }

.tt-icon-btn {
    position: relative; display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--tt-ink); cursor: pointer;
}
.tt-icon-btn:hover { background: rgba(42, 36, 31, .07); }
.tt-icon-btn svg, .tt-search svg, .tt-close svg {
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tt-icon-btn svg { width: 21px; height: 21px; }
.tt-cart .tt-icon-btn svg { width: 24px; height: 24px; }

.tt-cart-count {
    position: absolute; top: 2px; inset-inline-end: 0;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--tt-ink); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.tt-cart-count[hidden] { display: none; }

.tt-lang { color: var(--tt-muted); font-size: 13px; text-decoration: none; padding: 0 6px; }
.tt-lang:hover { color: var(--tt-ink); }

/* ── WebGL table (tabletop-3d.js) ──────────────────────────────────────── */
/* The scene fills the whole area under the header; the eyebrow and caption
   float over it on frosted chips, so the table is the page. */
.tt-main > .tt-scene { min-height: calc(100vh - 76px); }
.tt-gl { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.tt-gl[hidden] { display: none; }
.tt-gl canvas { display: block; width: 100% !important; height: 100% !important; }
/* while the scene loads and once it renders, the CSS table steps aside (keyboard users still reach its buttons) */
.tt-scene:is(.is-gl, .is-gl-pending) .tt-stage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.tt-scene:is(.is-gl, .is-gl-pending) { display: block; padding: 0; }
.tt-scene:is(.is-gl, .is-gl-pending) .tt-eyebrow {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2; width: auto; white-space: nowrap;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .7);
}
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption {
    position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 2; margin: 0; min-height: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption > * { pointer-events: auto; margin: 0; }
/* chips: a background behind the text only */
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption-name,
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption-line {
    display: inline-block; max-width: min(640px, 100%); padding: 8px 18px; border-radius: 999px;
    background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 12px 30px -16px rgba(60, 35, 15, .45);
}
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption-name { font-size: 22px; padding: 9px 22px; }
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption-line { font-size: 13px; color: #4e463f; border-radius: 18px; }
.tt-scene:is(.is-gl, .is-gl-pending) .tt-pill {
    margin-top: 4px; padding: 10px 24px; font-size: 13px; color: #fff; border-color: transparent;
    background: rgba(42, 36, 31, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -14px rgba(42, 36, 31, .7);
}
.tt-scene:is(.is-gl, .is-gl-pending) .tt-pill:hover { background: var(--tt-ink); }
.tt-gl-label {
    position: absolute; transform: translate(-50%, -100%); padding: 6px 12px; border-radius: 10px; pointer-events: none;
    background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px -10px rgba(60, 35, 15, .4);
    font-size: 12px; line-height: 1.3; color: var(--tt-ink); white-space: nowrap; transition: left .15s ease-out, top .15s ease-out;
}
.tt-gl-label[hidden] { display: none; }
.tt-gl-label b { display: block; font-weight: 600; }
.tt-gl-label i { font-style: normal; color: var(--tt-muted); }
@media (max-width: 860px) {
    .tt-main > .tt-scene { min-height: calc(100vh - 118px); }
    .tt-scene:is(.is-gl, .is-gl-pending) .tt-caption-name { font-size: 17px; }
    .tt-scene:is(.is-gl, .is-gl-pending) .tt-eyebrow { top: 12px; }
}

/* ── scene ──────────────────────────────────────────────────────────────── */
.tt-scene { position: relative; text-align: center; padding: clamp(10px, 2vh, 28px) 0 24px; overflow: hidden; }

/* a warm light on the wall behind the table, in the store's colour */
.tt-scene::before {
    content: ''; position: absolute; inset: -10% -20% auto; height: 70%; pointer-events: none;
    background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--tt-accent, #b8864f) 26%, transparent), transparent 62%);
}

/* The one-page home: the table sits in the middle of the screen, between header and footer. */
.tt-main:has(> .tt-scene) { display: flex; flex-direction: column; }
.tt-main > .tt-scene {
    flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding-bottom: clamp(18px, 4vh, 44px);
}
.tt-main > .tt-scene > * { width: 100%; }
.tt-main > .tt-scene > .tt-eyebrow { width: auto; }

.tt-eyebrow {
    position: relative; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tt-muted);
    display: inline-flex; gap: 10px;
}
.tt-rtl .tt-eyebrow { letter-spacing: 0; font-size: 13px; }

.tt-stage {
    position: relative; max-width: 1060px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 40px);
    perspective: 1500px;
}

.tt-room {
    position: relative; transform-style: preserve-3d;
    transform: rotateX(var(--tt-rx, 0deg)) rotateY(var(--tt-ry, 0deg));
    transition: transform .5s ease-out;
}

.tt-room {
    /* Flat on purpose: with preserve-3d here Chromium hit-tests the room's own
       box in front of the tilted table, and nothing on the table can be
       hovered or clicked. The table below roots its own 3D context, and gets
       its perspective from here (perspective only reaches direct children). */
    transform-style: flat;
    perspective: 1400px; perspective-origin: 50% 18%;
}

/* The table top is laid out at full height (so the rows have room), then
   tilted away around its front edge; the negative top margin takes back the
   space the tilt frees, keeping the standing products near the eyebrow. */
.tt-table {
    position: relative; height: var(--tt-plane);
    margin-top: calc(var(--tt-plane) * -.30 + var(--tt-fig) * .9);
    margin-bottom: calc(var(--tt-leg) * .62);
    transform-style: preserve-3d; transform-origin: 50% 100%;
    transform: rotateX(var(--tt-tilt));
}

/* floor shadow under the legs */
.tt-stage::after {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: 4px; height: 54px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(60, 35, 15, .22), rgba(60, 35, 15, .06) 55%, transparent 72%);
    pointer-events: none;
}

.tt-top {
    position: absolute; inset: 0; border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, .30), transparent 58%),
        repeating-linear-gradient(90deg, rgba(60, 35, 15, .045) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(90deg, transparent 0 37px, rgba(255, 255, 255, .06) 37px 39px),
        linear-gradient(180deg, #dcbc93 0%, #cba276 52%, #b98c5f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -40px 60px -40px rgba(70, 40, 15, .35);
}

/* apron: the front edge of the top, hanging straight down */
.tt-edge {
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    transform-origin: 50% 0; transform: rotateX(-90deg);
    background: linear-gradient(180deg, #c99d70, #a8795a 60%, #8d6243);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 30px 50px -10px rgba(60, 35, 15, .45);
}

/* four square legs, perpendicular to the top: each leg's layout box ends at
   the table edge it belongs to, and rotateX(90deg) around that bottom edge
   folds it down under the plane; a second face gives it depth */
.tt-leg {
    position: absolute; width: 24px; height: var(--tt-leg);
    transform-origin: 50% 100%; transform: rotateX(90deg); transform-style: preserve-3d;
    background: linear-gradient(90deg, #e8d3b5, #d6bc97 55%, #c2a47c);
    border-radius: 0 0 3px 3px;
}
.tt-leg i {
    position: absolute; top: 0; bottom: 0; left: 0; width: 24px;
    transform-origin: 0 50%; transform: rotateY(90deg);
    background: linear-gradient(90deg, #b8976d, #a4845d);
    border-radius: 0 0 3px 3px;
}
.tt-leg-fl { left: 56px; bottom: 0; }
.tt-leg-fr { right: 56px; bottom: 0; }
.tt-leg-fr i { left: auto; right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.tt-leg-bl { left: 56px; top: calc(26px - var(--tt-leg)); }
.tt-leg-br { right: 56px; top: calc(26px - var(--tt-leg)); }
.tt-leg-br i { left: auto; right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }

.tt-items {
    list-style: none; margin: 0; position: relative; z-index: 2;
    padding: 34px 60px 56px;
    display: grid; grid-template-columns: repeat(var(--tt-cols), minmax(0, 1fr));
    grid-auto-rows: var(--tt-cell-d);
    transform-style: preserve-3d;
}

.tt-item { position: relative; transform-style: preserve-3d; }

/* contact shadow and candle light on the wood, under the product's foot */
.tt-item::after {
    content: ''; position: absolute; left: 50%; bottom: 6px; width: 120px; height: 120px;
    transform: translate(-50%, 40%); border-radius: 50%;
    background: radial-gradient(circle at center, rgba(70, 40, 15, .40) 0, rgba(70, 40, 15, .12) 22%, transparent 36%);
    transition: transform .45s var(--tt-ease), opacity .45s; pointer-events: none;
}
.tt-item::before {
    content: ''; position: absolute; left: 50%; bottom: 6px; width: 200px; height: 200px;
    transform: translate(-50%, 50%); border-radius: 50%; opacity: .55;
    background: radial-gradient(circle at center, rgba(255, 196, 110, .55) 0, rgba(255, 180, 90, .18) 30%, transparent 60%);
    transition: opacity .45s; pointer-events: none;
}
.tt-item.is-active::after { transform: translate(-50%, 40%) scale(1.25); opacity: .8; }
.tt-item.is-active::before { opacity: 1; }

/* the product: an object standing on the table, perpendicular to the top
   (rotateX(-90deg) around its foot), lifted and enlarged when active */
.tt-piece {
    all: unset; box-sizing: border-box; position: absolute; left: 50%; bottom: 36px; width: 1px;
    display: block; cursor: pointer; transform-style: preserve-3d; transform-origin: 50% 100%;
    transform: rotateX(-90deg);
    transition: transform .45s var(--tt-ease);
}
.tt-item.is-active .tt-piece { transform: rotateX(-90deg) translateY(-16px) scale(1.14); }
.tt-piece:focus-visible .tt-object { outline: 2px solid var(--tt-ink); outline-offset: 10px; }

/* ── the 3D object ──────────────────────────────────────────────────────
   Coordinates: x across, y down (0 = rim), z towards the viewer. The body
   is --n slats, each rotated around the vertical axis and pushed out to the
   radius; slat k shows the k-th vertical slice of the photo, so the photo
   wraps around the cylinder. A flat disc at y = 0 is the wax. */
.tt-object {
    --r: 42px; --h: 104px; --extra: 0px;
    --sw: calc(6.2832 * var(--r) / var(--n) + .7px);
    --step: calc(360deg / var(--n));
    position: absolute; bottom: 0; left: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(var(--h) + var(--extra));
    display: block; transform-style: preserve-3d;
    transform: scale(var(--tt-obj)); transform-origin: 50% 100%;
}
.tt-object i, .tt-object b, .tt-object u { position: absolute; display: block; }

.tt-o-body { top: 0; left: 0; width: 100%; height: var(--h); transform-style: preserve-3d; }
.tt-o-body b {
    --shade: calc((1 - cos(var(--k) * var(--step))) * .22);
    top: 0; left: calc(var(--r) - var(--sw) / 2); width: var(--sw); height: 100%;
    transform: rotateY(calc(var(--k) * var(--step))) translateZ(var(--r));
    backface-visibility: hidden;
    /* glass sheen top and bottom, then the photo slice */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 74%, rgba(40, 20, 0, .2)), var(--tex);
    background-size: 100% 100%, calc(var(--n) * var(--sw)) auto;
    background-position: 0 0, calc(-1 * var(--k) * var(--sw)) 50%;
    background-color: var(--wax);
    box-shadow: inset 0 0 0 999px rgba(30, 15, 0, var(--shade));
}
/* glass: a soft highlight down one side and a darker foot */
.tt-o-shine {
    top: 0; left: calc(var(--r) - var(--sw) / 2); width: calc(var(--sw) * 2.4); height: var(--h);
    transform: rotateY(-34deg) translateZ(calc(var(--r) + 1px)); backface-visibility: hidden;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.tt-o-top {
    top: calc(-1 * var(--r) + 7px); left: 0; width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%;
    transform: rotateX(90deg);
    background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--wax) 70%, #fff), var(--wax) 55%, var(--wax-dark));
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}
.tt-o-rim {
    top: calc(-1 * var(--r)); left: 0; width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%;
    transform: rotateX(90deg); box-sizing: border-box;
    border: 3px solid rgba(255, 255, 255, .65);
    background: radial-gradient(circle, transparent 60%, rgba(255, 255, 255, .22) 70%, rgba(255, 255, 255, 0) 71%);
}

.tt-o-wick { top: -5px; left: calc(var(--r) - 1px); width: 2px; height: 12px; background: #3a2a1a; border-radius: 1px; }
.tt-o-flame {
    top: -24px; left: calc(var(--r) - 6px); width: 12px; height: 22px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
    background: radial-gradient(ellipse at 50% 72%, #fff9df 0, #ffd56b 32%, #ff9b2f 66%, rgba(255, 120, 30, 0) 100%);
    box-shadow: 0 0 16px 5px rgba(255, 170, 70, .5);
    animation: tt-flicker 1.7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.37s);
}
@keyframes tt-flicker {
    0%, 100% { transform: scale(1) skewX(0); opacity: .95; }
    30% { transform: scale(1.08, 1.12) skewX(-3deg); opacity: 1; }
    65% { transform: scale(.94, .96) skewX(3deg); opacity: .9; }
}

/* shapes */
.shape-jar  { --r: 42px; --h: 104px; }
.shape-tall { --r: 31px; --h: 134px; }
.shape-bowl { --r: 56px; --h: 58px; }
.shape-mug  { --r: 40px; --h: 94px; }
.shape-stem { --r: 36px; --h: 66px; --extra: 50px; }
.shape-box  { --r: 42px; --h: 88px; --sw: calc(2 * var(--r)); }
.shape-box .tt-o-body b { background-size: 100% 100%, 100% auto; background-position: 0 0, 50% 50%; }
.shape-box .tt-o-top, .shape-box .tt-o-rim { border-radius: 6px; }
.shape-box .tt-o-top { background: linear-gradient(135deg, color-mix(in srgb, var(--wax) 60%, #fff), var(--wax-dark)); }
.shape-box .tt-o-shine { display: none; }
.shape-bowl .tt-o-top { top: calc(-1 * var(--r) + 10px); }

.tt-o-handle {
    top: calc(var(--h) * .2); left: calc(2 * var(--r) - 9px); width: 26px; height: calc(var(--h) * .5);
    border: 7px solid var(--wax-dark); border-radius: 50%; box-sizing: border-box;
    transform-origin: 0 50%; transform: rotateY(-38deg);
}
.tt-o-stem {
    top: var(--h); left: calc(var(--r) - 5px); width: 10px; height: 40px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .85) 45%, rgba(150, 150, 165, .5));
}
.tt-o-base {
    top: calc(var(--h) + 40px - 26px); left: calc(var(--r) - 26px); width: 52px; height: 52px; border-radius: 50%;
    transform: rotateX(90deg);
    background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(200, 200, 210, .6) 62%, rgba(150, 150, 160, .4) 70%, transparent 72%);
}

/* name + price float above the lifted product, where no front row can cover them */
.tt-label {
    position: absolute; bottom: calc(var(--tt-fig) + 14px); left: 50%; width: 200px; padding: 6px 10px;
    transform: translate(-50%, 6px); border-radius: 10px; background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 20px -10px rgba(60, 35, 15, .4);
    font-size: 12px; line-height: 1.3; color: var(--tt-ink);
    opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
.tt-label b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-label i { font-style: normal; color: var(--tt-muted); }
.tt-item.is-active .tt-label { opacity: 1; transform: translate(-50%, 0); }

/* caption under the table */
.tt-caption { position: relative; z-index: 5; margin-top: 10px; min-height: 120px; }
.tt-caption-name { margin: 0 0 4px; font-family: 'Fraunces', 'Cairo', serif; font-size: 20px; font-weight: 500; }
.tt-rtl .tt-caption-name { font-family: 'Cairo', serif; font-size: 18px; font-weight: 600; }
.tt-caption-line { margin: 0 auto 14px; max-width: 520px; font-size: 13px; color: var(--tt-muted); }

.tt-pill {
    font: inherit; font-size: 12.5px; font-weight: 500; color: var(--tt-ink);
    background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 999px; padding: 8px 20px; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.tt-pill:hover { background: var(--tt-ink); color: #fff; border-color: var(--tt-ink); }

.tt-empty { margin: 80px auto; color: var(--tt-muted); }

/* ── product panel ──────────────────────────────────────────────────────── */
.tt-panel {
    position: fixed; inset: 0; z-index: 1040; background: var(--tt-bg); overflow-y: auto;
    opacity: 0; transition: opacity .35s ease;
}
.tt-panel.is-open { opacity: 1; }
.tt-panel[hidden] { display: none; }

.tt-close {
    position: absolute; top: 18px; inset-inline-end: clamp(16px, 4vw, 48px); z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 13px; color: var(--tt-muted); background: none; border: 0; cursor: pointer;
}
.tt-close:hover { color: var(--tt-ink); }
.tt-close svg { width: 16px; height: 16px; }

.tt-panel-inner {
    min-height: 100%; max-width: 1080px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 48px) 48px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px);
}

.tt-panel-media { position: relative; text-align: center; }
.tt-panel-figure {
    display: inline-block; max-width: 100%;
    transform: translateY(18px) scale(.96); opacity: 0;
    transition: transform .6s var(--tt-ease), opacity .45s ease;
}
.tt-panel.is-open .tt-panel-figure { transform: none; opacity: 1; }
.tt-panel-figure img { max-width: 100%; max-height: 68vh; object-fit: contain; display: block; }
.tt-panel-figure { padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 30px 50px -24px rgba(60, 35, 15, .5); }
.tt-panel-figure img { border-radius: 10px; max-height: 58vh; }

.tt-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tt-gallery:empty { display: none; }
.tt-gallery button {
    width: 58px; height: 58px; padding: 3px; border-radius: 10px; border: 2px solid transparent; background: #fff; cursor: pointer;
    box-shadow: 0 6px 14px -8px rgba(60, 35, 15, .5); transition: border-color .2s, transform .2s;
}
.tt-gallery button img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.tt-gallery button:hover { transform: translateY(-2px); }
.tt-gallery button[aria-current="true"] { border-color: var(--tt-ink); }

.tt-panel-info { max-width: 360px; }
.tt-panel-cat { margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tt-muted); }
.tt-rtl .tt-panel-cat { letter-spacing: 0; font-size: 12.5px; }
.tt-panel-name { margin: 0 0 4px; font-family: 'Fraunces', 'Cairo', serif; font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.tt-rtl .tt-panel-name { font-family: 'Cairo', serif; font-weight: 600; font-size: 26px; }
.tt-panel-price { margin: 0 0 18px; font-size: 15px; }

.tt-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--tt-line); margin-bottom: 10px; }
.tt-tabs button {
    font: inherit; font-size: 12.5px; color: var(--tt-muted); background: none; border: 0; padding: 0 0 8px; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tt-tabs button.is-on { color: var(--tt-ink); border-bottom-color: var(--tt-ink); }
.tt-tab-body { font-size: 13px; color: #55504a; line-height: 1.6; margin: 0 0 18px; min-height: 42px; }

.tt-option-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tt-muted); margin: 0 0 8px; }
.tt-rtl .tt-option-label { letter-spacing: 0; font-size: 12.5px; }
.tt-option-label[hidden], .tt-options[hidden] { display: none; }
.tt-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tt-options button {
    min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tt-line);
    background: var(--tt-card); color: var(--tt-ink); font: inherit; font-size: 13px; cursor: pointer; transition: all .2s;
}
.tt-options button:hover { border-color: var(--tt-ink); }
.tt-options button[aria-checked="true"] { background: var(--tt-ink); color: #fff; border-color: var(--tt-ink); }
.tt-options button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

.tt-add {
    width: 100%; height: 50px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--tt-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
    transition: transform .15s, opacity .2s;
}
.tt-add:hover { transform: translateY(-1px); }
.tt-add:disabled { opacity: .6; cursor: progress; }
.tt-add.is-done { background: #2f5e3a; }

.tt-panel-msg { margin: 10px 0 0; font-size: 12.5px; color: #a33a2a; }
.tt-panel-msg[hidden] { display: none; }

.tt-panel-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12.5px; }
.tt-panel-links a { color: var(--tt-muted); text-decoration: none; }
.tt-panel-links a:hover { color: var(--tt-ink); text-decoration: underline; }
.tt-panel-links a[hidden] { display: none; }
.tt-panel-links .tt-checkout { color: var(--tt-ink); font-weight: 600; }

.tt-fly { position: fixed; z-index: 2000; pointer-events: none; border-radius: 8px; object-fit: cover; }

/* ── Sylius pages inside the frame (product page, cart, checkout, cards) ── */
.tt-theme .btn-primary,
.tt-theme .btn-primary:disabled,
.tt-theme .btn-primary.disabled {
    --bs-btn-bg: var(--tt-ink); --bs-btn-border-color: var(--tt-ink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--tt-ink); --bs-btn-disabled-border-color: var(--tt-ink); --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: 42, 36, 31;
    background: var(--tt-ink) !important; border-color: var(--tt-ink) !important; color: #fff !important;
    border-radius: 999px; font-weight: 600; padding: .7rem 1.6rem;
}
.tt-theme .btn-primary:hover { background: #000 !important; border-color: #000 !important; }
.tt-theme .btn-primary .icon { fill: currentColor; color: #fff; }
.tt-theme #add-to-cart-button { width: 100%; }
/* The bundled stylesheet colours plain links white (made for a dark header). */
.tt-main a:not(.btn) { color: var(--tt-ink); text-underline-offset: 3px; }
.tt-theme .btn-outline-secondary,
.tt-theme .btn-outline-primary {
    background: transparent !important; color: var(--tt-ink) !important; border-color: var(--tt-line) !important;
    border-radius: 999px;
}
.tt-theme .btn-outline-secondary:hover,
.tt-theme .btn-outline-primary:hover { border-color: var(--tt-ink) !important; }
.tt-theme .btn-outline-secondary .icon, .tt-theme .btn-outline-primary .icon { color: var(--tt-ink); fill: currentColor; }
/* One button shape everywhere: every Bootstrap button is the rounded pill the
   primary button is. Sylius pages also use btn-light (cart drawer "View and
   edit cart") and btn-secondary (thank-you "Create an account"), which kept
   Bootstrap's square corners. Joined controls (quantity +/-, button groups),
   links, close and icon-only buttons keep their own shape. */
.tt-theme .btn:not(.btn-link):not(.btn-close):not(.btn-transparent):not(.input-group > .btn):not(.btn-group > .btn) {
    border-radius: 999px;
}
/* The secondary pill: same size as the primary one, outlined in ink. */
.tt-theme .btn-light,
.tt-theme .btn-secondary,
.tt-theme .btn-outline-gray,
.tt-theme .btn-white {
    --bs-btn-bg: transparent; --bs-btn-color: var(--tt-ink); --bs-btn-border-color: var(--tt-ink);
    --bs-btn-hover-bg: var(--tt-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--tt-ink);
    --bs-btn-active-bg: #000; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #000;
    background: transparent !important; color: var(--tt-ink) !important; border: 1px solid var(--tt-ink) !important;
    font-weight: 600;
}
.tt-theme .btn-light:hover, .tt-theme .btn-secondary:hover,
.tt-theme .btn-outline-gray:hover, .tt-theme .btn-white:hover {
    background: var(--tt-ink) !important; color: #fff !important;
}
.tt-theme :is(.btn-primary, .btn-light, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-gray, .btn-white):not(.btn-sm):not(.btn-icon) {
    padding: .7rem 1.6rem;
}

/* Product-card quick add-to-cart + size overlay (shared card template). */
.product-card-atc { position: static; }
.product-card-atc .atc-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.product-card-atc .atc-open { cursor: pointer; }
.atc-overlay {
    display: none; position: absolute; inset: 0; z-index: 5; padding: 1rem; overflow: auto;
    background: var(--tt-card); border-radius: inherit;
}
.product-card-atc .atc-toggle:checked ~ .atc-overlay { display: flex; flex-direction: column; }
.atc-overlay .atc-overlay-body { margin: auto 0; width: 100%; }
.atc-overlay .atc-overlay-title { font-weight: 600; margin-bottom: .5rem; }
.atc-overlay .atc-close { position: absolute; top: .4rem; inset-inline-end: .4rem; cursor: pointer; line-height: 1; color: #555; }
.atc-overlay .atc-close:hover { color: var(--tt-ink); }

.tt-footer { text-align: center; color: var(--tt-muted); font-size: 12px; padding: 28px 16px; }

body.tt-panel-open { overflow: hidden; }

/* ── phones / tablets ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    :root { --tt-tilt: 54deg; --tt-cell-d: 150px; --tt-fig: 96px; --tt-obj: .6; --tt-leg: 170px; }
    .tt-leg { width: 14px; } .tt-leg i { width: 14px; }
    .tt-leg-fl, .tt-leg-bl { left: 22px; } .tt-leg-fr, .tt-leg-br { right: 22px; }
    .tt-table { margin-bottom: calc(var(--tt-leg) * .7); }
    .tt-label { width: 150px; }
    .tt-item::before { width: 120px; height: 120px; } .tt-item::after { width: 70px; height: 70px; }
    .tt-header { grid-template-columns: auto 1fr; row-gap: 10px; }
    .tt-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; gap: 18px; scrollbar-width: none; }
    .tt-search { display: none; }
    .tt-stage { padding: 0 6px; perspective: 1000px; }
    .tt-top { border-radius: 14px; }
    .tt-items { padding: 22px 10px 30px; }
    .tt-piece { bottom: 20px; }
    .tt-label { font-size: 10px; margin-top: 6px; }
    .tt-caption-name { font-size: 17px; }
    .tt-panel-inner { grid-template-columns: 1fr; padding-top: 56px; align-items: start; }
    .tt-panel-figure img { max-height: 46vh; }
    .tt-panel-info { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-room, .tt-piece, .tt-item::after, .tt-item::before, .tt-label, .tt-panel, .tt-panel-figure { transition: none; }
    .tt-o-flame { animation: none; }
}

/* ── turning the table (v5) ───────────────────────────────────────────── */
.tt-gl canvas { touch-action: none; }
.tt-hint {
    display: inline-block; font-size: 12px; letter-spacing: .04em; color: #6b625a;
    background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; padding: 4px 12px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tt-hint[hidden] { display: none; }
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption .tt-hint { margin-top: 4px; }
.tt-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── footer: floats over the bottom of the page with no background of its
   own (on the home and category pages that is the 3D scene itself) ───── */
.tt-page { position: relative; }
.tt-main { padding-bottom: 52px; }
.tt-main:has(> .tt-scene) { padding-bottom: 0; }
.tt-footer {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: transparent; pointer-events: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px 16px;
}
.tt-footer > * { pointer-events: auto; }
.tt-scene:is(.is-gl, .is-gl-pending) .tt-caption { padding-bottom: 30px; }
.tt-credit { color: var(--tt-muted); text-decoration: none; border-bottom: 1px solid rgba(42, 36, 31, .25); }
.tt-credit:hover { color: var(--tt-ink); border-bottom-color: var(--tt-ink); }

/* ── header floats over the scene too: the table fills the whole screen and
   the header, eyebrow, caption and footer all sit on it with no bands ──── */
.tt-page:has(.tt-main > .tt-scene) .tt-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.tt-page:has(.tt-main > .tt-scene) .tt-main > .tt-scene { min-height: 100vh; }
.tt-page:has(.tt-main > .tt-scene) .tt-scene:is(.is-gl, .is-gl-pending) .tt-eyebrow { top: 118px; }
@media (max-width: 860px) {
    .tt-page:has(.tt-main > .tt-scene) .tt-scene:is(.is-gl, .is-gl-pending) .tt-eyebrow { top: 146px; }
}

/* mid widths: the menu met the search box; tighten both before the phone layout kicks in */
@media (min-width: 861px) and (max-width: 1400px) {
    .tt-nav { gap: 16px; }
    .tt-nav a { font-size: 13px; }
    .tt-search { width: 130px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .tt-search { display: none; }
}

/* HTML product descriptions in the panel's Details tab */
.tt-rich p, .tt-rich div, .tt-rich ul, .tt-rich ol { margin: 0 0 .7em; }
.tt-rich ul, .tt-rich ol { padding-inline-start: 1.2em; }
.tt-rich h1, .tt-rich h2, .tt-rich h3, .tt-rich h4 { font-size: 1em; font-weight: 600; margin: .9em 0 .35em; }
.tt-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.tt-rich a { color: inherit; text-decoration: underline; }
.tt-rich table { width: 100%; border-collapse: collapse; font-size: .95em; }
.tt-rich td, .tt-rich th { padding: 4px 6px; border-bottom: 1px solid rgba(42, 36, 31, .12); text-align: start; }
.tt-rich > :last-child { margin-bottom: 0; }

/* ── loading: a quiet loader while the models download, then the scene fades in ── */
.tt-gl { opacity: 0; transition: opacity .9s ease; }
.tt-scene.is-gl .tt-gl { opacity: 1; }
.tt-loader {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: none; align-items: center; gap: 10px; font-size: 13px; color: var(--tt-muted);
    background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 10px 18px;
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.tt-scene.is-gl-pending .tt-loader { display: inline-flex; }
.tt-loader i {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(42, 36, 31, .2); border-top-color: var(--tt-ink);
    animation: tt-spin .9s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-gl { transition: none; } .tt-loader i { animation: none; } }