/* ==================================================================
   FONTS — DM Sans (self-hosted variable, WOFF2). No Google CDN.
   Same family as the reference (Stockie demo1/6/5). latin + latin-ext
   (latin-ext covers extended Latin in player names, e.g. Jokic, Doncic, Sengun).
   ================================================================== */
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The statement face (DM Serif Display 400; fontsource 5.3.0, OFL-1.1),
   self-hosted since 2026-09-16: as a Google Fonts stylesheet it blocked the
   first paint for over a second and its late swap moved the hero title. */
@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==================================================================
   DESIGN TOKENS
   Every visual decision lives here. Rebranding is a single-block edit.
   The accent color is changed from the Customizer; this value is the default.
   ================================================================== */
:root {
	/* Colors — derived from the Stockie reference (charcoal + white + bronze). */
	/* ==== BRAND PALETTE (owner final, 2026-08-25): every color below is a
	   step of the #DFDBCF tone ladder (hue 45°, sat ~20%) — "artık tüm
	   renklerimiz bu paletten geliyor". Ladder: #FBFAF9 #EFEDE7 #DFDBCF
	   #CAC3AF #B4AA8E #9D916C #817656 #625A41 #433E2D #28241B #15140E. */
	--color-bg: #fbfaf9;             /* shell: body, menu, chips — the ladder's LIGHTEST step (owner: "en açıklar ile çalışacağız") */
	--color-surface: #efede7;        /* plates/cards/soft fills: one step deeper than the shell */
	/* Half a ladder step ABOVE surface: the owner's "one tick lighter" for the
	   mega panel wings (full step #FBFAF9 read too pale, full step below
	   #DFDBCF too heavy). Move the tick by changing the percentage. */
	--color-surface-light: color-mix(in srgb, var(--color-surface) 50%, var(--color-bg));
	--color-ink: #15140e;            /* warm ink: headings, buttons, dark UI — the ladder's darkest (owner) */
	--color-text: #15140e;           /* body copy shares the warm ink */
	--color-text-muted: #625a41;     /* ladder step (shares the discover default — different role) */
	--brand-accent: #625a41;         /* the accent as a fixed value: card badges and Quick buy's hover keep it inside every zone; the panel's Accent color overrides THIS token */
	--color-accent: var(--brand-accent); /* brand accent (badges, hovers) — owner final; follows the panel through --brand-accent */
	--color-accent-contrast: #ffffff;
	--color-border: #dfdbcf;
	--color-border-strong: #cac3af; /* one step deeper — borders that must read on the #EFEDE7 band */
	--color-hairline: #dfdbcf;       /* hairlines join the ladder (old 1-off distinction collapsed) */
	--color-sale: #3aa870;           /* discounted-price chip (light green) */
	--color-ticket: #f2c230;         /* the one bright colour off the ladder: the world exits, the hero strip's Enter shop (owner, 2026-09-15) */
	--color-ink-bar-bg: #171914;     /* the ink header's fill over the plain hero (owner, 2026-10-24) */
	--color-ink-bar-text: #f3f3ed;   /* the ink header's words and icons over the plain hero (owner, 2026-10-24) */
	--color-ink-bar-line: #40423d;   /* the ink header's hairline (owner, 2026-10-24) */
	--color-acid: #dcf35e;           /* the plain hero's accent: its H1's second line, the dot, the stamp (owner's reference, 2026-10-24); off the ladder like the ticket */

	/* PDP bands. Two tones from 2026-08-24 (the media side one step deeper,
	   in the mockup walls' family); on 2026-11-08 paper, then the frame wall,
	   then the owner's pick: the gallery band in a light veil of Discover
	   More's colour (--pdp-facts-bg, the poster's accent, --pdp-media-tint of
	   it on paper) round a stage on its own wall, the info band on its paper. The media tone below is not painted; it
	   stays for the styleguide and the way back. */
	/* PDP zones — ladder steps. The discover box's --pdp-facts-bg is the
	   DEFAULT: products with an extracted poster accent override it per
	   page (meta _d0_accent_bg via inc/woocommerce.php). */
	--pdp-media-bg: #efede7;  /* gallery side: one step deeper than the shell (matches the top menu); not painted, see above */
	--pdp-info-bg: #fbfaf9;   /* summary side: the lightest shell step */
	--pdp-media-share: 0.5;   /* the gallery's part of the PDP's width, the info band takes the rest and its words fill it inside the gutter. Half since 2026-11-08 (owner: "%50 genişlik kalmalı, bu en iyi kontrol edilebilen hali"); Good Mood's 0.67 before (2026-11-02) */
	--pdp-info-min: 26rem;    /* the info band's least width: under ~1260px a third would squeeze the picker's names and chips, so the gallery gives way there */
	--pdp-info-max: 40rem;    /* the info band's words at most this wide, from its left gutter, on wide windows (owner, 2026-11-08: "sağ alanı full genişlikte kullanmıyoruz, paneller çok dağılıyor"); Discover More's colour still runs to the edge */
	--pdp-facts-bg: #625a41;  /* discover: default — overridden per product by the poster's dominant color */
	--pdp-media-tint: 25%;    /* how much of that colour the gallery band keeps under its white veil, the rest paper (owner, 2026-11-08: "Discover More rengine beyaz bir katman, açık hali") */
	--pdp-details-strip: 64px; /* Discover More's title row, the strip that holds at the window's foot on a wide PDP (owner, 2026-11-08: 68, then "64") */
	--pdp-thumb-size: 3.5rem;  /* the wide PDP stage's thumbnails, one row at its bottom centre (owner, 2026-11-08) */

	/* Typography — reference-measured split: DM Sans carries the DISPLAY voice
	   (headings, buttons, nav, titles); body copy is the SYSTEM stack (SF Pro /
	   Segoe UI), which is what gives the reference its sturdy, tight body text. */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* The STATEMENT face: the one-line sentences that speak to the customer
	   (home h1, zone openers). Owner pick 2026-09-08 (round 3, no. 19): DM
	   Serif Display, DM Sans's own serif sibling, regular weight, a touch
	   tighter than the sans. Everything else stays DM Sans + system. */
	--font-statement: "DM Serif Display", "Iowan Old Style", Georgia, serif;
	--fw-statement: 400;
	--ls-statement: -0.01em;
	/* The HAND: an emphasised phrase inside a statement ("*phrase*" in a
	   title, see d0_statement_html). DORMANT: the hand-written trial (Just
	   Another Hand, 2026-09-08) was rejected by the owner; the phrase now
	   simply follows the statement face until a use returns. */
	--font-hand: var(--font-statement);
	--hand-scale: 1;
	--color-hand: currentColor;
	/* Pull-quote glyph only. DM Sans draws " as two geometric slashes, which
	   reads as a typo rather than a quotation; a serif draws the classic pair
	   of filled commas. System stack, so it costs nothing to load. */
	--font-quote: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

	/* ---- Type system (derived from the Stockie demo1 reference) ----
	   One scale, three weights, four line-heights, three tracking values.
	   Consume these tokens; never hardcode font sizes/heights per component. */

	/* Size scale (fluid via clamp on the larger steps) */
	--text-xs: 0.8125rem;                                    /* 13px  — fine print, badges */
	--text-sm: 0.9rem;                                       /* 14.4px — small UI: price, meta, labels, nav */
	--text-base: 1rem;                                       /* 16px  — body */
	--text-md: 1.1rem;                                       /* 17.6px — PDP price, mid-size UI (reference) */
	--text-lg: 1.25rem;                                      /* 20px  — leads, small headings (h4) */
	--text-price: 1.375rem;                                  /* 22px  — the product page's price (owner, 2026-10-31: 24, then "küçült" under the 32px title) */
	--text-product-title: clamp(1.75rem, 1.4rem + 1.4vw, 2rem); /* 32px on wide screens, 28px on phones — the product page's title (owner, 2026-10-31: "ürün başlığı 32 yap") */
	--text-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.65rem);       /* h3 / section titles (~26px) */
	--text-2xl: clamp(1.7rem, 1.35rem + 1.6vw, 2.05rem);     /* h2 (~33px) */
	--text-title: clamp(1.9rem, 1.5rem + 1.8vw, 2.25rem);    /* page/product titles (reference: 36px, lh 1.1) */
	--text-3xl: clamp(2.05rem, 1.5rem + 2.6vw, 2.56rem);     /* h1 / hero display / section titles (reference: 40.96px) */
	--text-display: clamp(2.4rem, 1.7rem + 2.8vw, 3.4rem);   /* the statement sentences: home h1, zone openers */
	--text-hero: clamp(2.8rem, 2rem + 3.2vw, 4.2rem);        /* the cinematic hero title over the photo */
	--text-nav: 0.875rem;                                     /* 14px: the menu's links (owner, 2026-10-24) */
	--nav-gap: 2.1875rem;                                     /* 35px between the menu's links (owner, 2026-10-24) */
	--text-mega: clamp(4.6rem, 10.5vw, 10.9rem);             /* the plain hero's H1 (reference: clamp(75px, 10.5vw, 174px)); phones below */
	--hflow-mould: clamp(4px, 0.42vw, 7px);                   /* the poster flow's moulding (the builder's art at a print ~16vw wide; owner, 2026-10-28) */
	--hflow-cursor: 5.5rem;                                   /* the poster flow's cursor badge */
	--lh-hflow: 0.94;                                         /* the All Posters room's title, set close */
	--ls-hflow: -0.05em;                                      /* its tracking at the heaviest cut */
	--hflow-light: clamp(14rem, 26vw, 28rem);                 /* the roaming light's radius */
	--hflow-light-tint: rgb(255 226 180);                     /* its warm colour (a tungsten spot; off the ladder like the frame woods) */
	--hflow-col: clamp(9rem, 14.5vw, 22rem);                  /* a column of the poster flow (owner, 2026-10-28: the first size; prints grow under the pointer instead); tablet 23vw, phone 32vw */
	--hflow-gap: var(--space-5);                              /* between its columns and its prints */
	--hflow-pitch: calc(var(--hflow-col) + var(--hflow-gap)); /* a column and its gap: the wall wraps by eight of these */
	--text-hflow-giant: clamp(2.6rem, 15.5vw, 20rem);         /* the poster flow's H1 key word, cut out ("obsessions." ~5.5em, ~86vw) */
	--hflow-cut-k: 0.34;                                      /* its first line's size, as a share of it */
	--hflow-cut-gap: 0.04em;                                  /* between the lines, in the key word's em */
	--ls-hflow-giant: -0.06em;                                /* its tracking */
	--fw-mega: 850;       /* the plain hero's H1 only: the reference's heavier cut (DM Sans is the variable font) */
	--lh-mega: 0.81;      /* the plain hero's H1: caps set tight */
	--ls-mega: -0.075em;  /* the plain hero's H1 */

	/* Weights. IMPORTANT: the reference COMPUTES 600 on DM Sans display text,
	   but it only loads static 400/500/700 cuts — browsers round 600 up to
	   the 700 face, so display text physically RENDERS at 700 (verified by
	   glyph-width measurement: 700 matches the reference exactly, 600 does
	   not). Display (DM Sans) contexts therefore use --fw-bold; system-font
	   text (price, chips, meta) keeps a true 600 via --fw-semibold. */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;   /* system-font emphasis (price, chips, small UI) */
	--fw-bold: 700;       /* DM Sans display: headings, titles, buttons, eyebrows */

	/* Line-heights */
	--lh-title: 1.1;     /* page/product titles (reference: 39.6/36) */
	--lh-tight: 1.14;    /* large display headings */
	--lh-heading: 1.2;   /* section / card headings */
	--lh-snug: 1.4;      /* leads, sub text */
	--lh-body: 1.6;      /* body copy, UI */

	/* Letter-spacing */
	--ls-tight: -0.025em;   /* large display */
	--ls-heading: -0.015em; /* headings */
	--ls-caps: 0.06em;      /* uppercase labels/eyebrows */

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-section: clamp(3rem, 2rem + 5vw, 7rem);

	/* Layout */
	--page-top: 2rem;          /* clearance under the sticky header on plain pages (owner: 32px) */
	--container-max: 1376px;   /* matches the Stockie demo1 .page-container width */
	/* Page-wide horizontal gutter (single source). Fluid: 32px on desktop,
	   down to 16px on phones (reference mobile gutter ≈ 16px). */
	--container-pad: clamp(1rem, 2.9vw, 2rem);

	/* ---- Radius system: square everywhere (owner, 2026-10-26: the vintage
	   mid-century look of the posters, "yuvarlak köşelerin hepsini iptal
	   edelim"). The roles stay as tokens so a corner can come back by one
	   value; circles (border-radius: 50%) are shapes, not corners, and stay.
	   Before: 10 / 7 / 15 / 4 / 20px and pills at 999px. */
	--radius: 0px;              /* controls + panels */
	--radius-sm: 0px;           /* small controls, chips, pagination */
	--radius-lg: 0px;           /* large buttons */
	--radius-card: 0px;         /* cards & imagery */
	--radius-card-lg: 0px;      /* the big cards: product card picture box and its chip, wall sets, collection cards, the PDP's boxes, the drawers (--drawer-radius); the panel's Card corners setting drives it */
	--radius-card-half: calc(var(--radius-card-lg) / 2); /* half the big cards' corners, so it follows the panel's setting (its override sits on :root too): the small cards in a drawer, Complete the Look (owner, 2026-11-08: "ana tokenin yarısını alsın") */
	--radius-picker: 7px;       /* the option picker's corners, its old --radius-sm: the one control rounded again after the square sweep (owner, 2026-10-31); .opt maps --radius-sm to it */
	--radius-field: 10px;       /* text boxes, selects and textareas: .input/.select, Woo's forms, the checkout's fields, the footer's sign-up bar; the controls' corners from before the square sweep, as the shop column took back (owner, 2026-11-12: "textbox ya da butonlar vb. radius yok") */
	--radius-field-sm: 7px;     /* the 34px fields (.input--sm/.select--sm) and the small option rows beside them */
	--opt-tile-w: 6rem;         /* the PDP picker's tile (ways to buy, woods, size scales): its own width, never stretched across the column (owner, 2026-11-08); four in a row fill the 1440 info column, a narrower column shrinks them */
	/* The card's own ground (the hidden card the framed poster hangs in). Not
	   set here on purpose: the frame card falls back to --color-surface where
	   it stands, so a zone's remap moves the plate with the zone (owner,
	   2026-09-11: "gizli karta bir renk"; before that it was transparent,
	   2026-09-09). Any surface can paint another plate by setting
	   --card-ground on itself or on its zone. */
	/* The poster's width inside a frame card. 78.65% is the ONE value that leaves
	   equal air on all four sides of a 3/4 card: 1 - w = 4/3 - w / (991/1411). */
	--card-poster-w: 78.65%;
	/* The studio mockup cropped to its frame (measured): the frame window's
	   ratio, and the square canvas's width that fills it when centred. Shared
	   by the frame cards and the mega menu's cards, so the crop is one pair
	   of numbers. */
	--poster-ratio: 991 / 1411;
	--poster-crop-w: 201.82%;
	--radius-pill: 0px;         /* badges, counters, segmented selectors (999px before 2026-10-26) */
	--roundbtn-h: 3rem;        /* the home's round buttons, 48px (owner, 2026-10-30, after 46 and 50: "48 olsun"), between the 44 and 50 steps on purpose: .roundbtn and the phones' card plus */
	--radius-button: 999px;     /* every button's corners (owner, 2026-10-29: "butonları tekrar yuvarlak köşeli yapalım"); .button maps its own corner tokens to it */

	/* ---- Control metrics (reference: 44px standard, 34 small, 50 large) ---- */
	--control-h: 2.75rem;
	--logo-h: 2.5rem;          /* the header mark's height, centred in the menu's row: 40px, the row's two thirds as before (48 in 72) */
	--header-row-h: 3.75rem;   /* the menu's row: 60px (owner, 2026-11-10: "Üst menü yüksekliğini 60px yapalım, logoyu da buna göre küçültelim"; 72 since 2026-11-02, 80 before) */
	--header-bar-h: 0px;       /* the bar above the menu, the header's first row (template-parts/header-bar.php): 2rem while it renders */
	--header-h: calc(var(--header-bar-h) + var(--header-row-h) + 1px); /* the bar above the menu, then the menu's row and the hairline: what the hero stack climbs under before any script measures (2026-09-16, the 0.06 CLS) */
	--control-h-sm: 2.125rem;
	--control-h-lg: 3.125rem;
	--control-h-buy: 3rem;     /* the product page's Add to cart, 48px, over the picker's 44px frame tiles (owner, 2026-10-31: "add to cart 48, diğer üstteki her şeyi de 44"): off the 34/44/50 scale on purpose */
	/* The button family's proportions (owner, 2026-10-23: "Framer
	   oranlarını uygula"), the reference's measures as shares of a button's
	   height, so 34 / 44 / 50 keep them: the icon is the reference's 28 of
	   its 49px disc (49 of 73), the disc itself gone (2026-10-24); the edge
	   to the words (26 of 73), the words to the icon (16 of 73). */
	--button-disc-ratio: 0.671;
	--button-icon-ratio: 0.571;
	--button-pad-ratio: 0.356;
	--button-gap-ratio: 0.219;
	/* Controls use FLAT ladder values (owner, 2026-08-25 — translucent
	   mixes composited to off-ladder picks): passive fill #EFEDE7, hover
	   one step deeper, selection actives on the ladder's darkest. */
	--control-border: #dfdbcf;
	--control-bg: #efede7;           /* passive selectors/dropdowns/steppers */
	--control-bg-hover: #dfdbcf;     /* filled controls darken on hover (reference) */
	--control-active: #15140e;       /* ACTIVE selector state (segments, pills, dropdown rows, rings) */
	--color-on-image: #ffffff;       /* text over photographs: the one deliberate off-ladder white */
	/* Our scrollbar (scrollbar.js, owner 2026-10-23): a thin thumb on a scroll
	   box's right inner edge, a little wider and stronger under the mouse.
	   Its colour is the surface's own text, faint (owner, the same day: on the
	   black search band "siyah, hafif opacity'li, aynı renge uyan belirgin"):
	   ink on paper, paper on a dark band. currentColor resolves where the
	   thumb is; a var() of a colour token would resolve here on :root and
	   miss a band's remap (the first version stayed beige on the band). */
	--scrollbar-size: 4px;
	--scrollbar-size-active: 6px;
	--scrollbar-inset: 3px;    /* from the box's inner edges */
	--scrollbar-reach: calc(var(--scrollbar-size-active) + 2 * var(--scrollbar-inset)); /* the bar's width: how far in from the edge a mouse catches it. A box leaves it no room: the bar floats over the content at the very edge (owner, 2026-10-23: "en köşede, objelerin üstünde dursa yeter") */
	--scrollbar-thumb: color-mix(in srgb, currentColor 35%, transparent);
	--scrollbar-thumb-active: color-mix(in srgb, currentColor 60%, transparent);

	/* ---- Zone tones (owner, 2026-09-08: sections grouped by background colour).
	   Ladder steps for the neutral bands; WORLD tones per catalogue root. Sports
	   and Decor are poster-keyed (median _d0_accent_bg per world, clamped to the
	   PDP accent window: dark, desaturated, white text >= 4.5:1); Movies is not,
	   it is a light band (owner, 2026-09-09). */
	--zone-paper: #fbfaf9;
	--zone-surface: #efede7;
	--zone-sand: #dfdbcf;
	--zone-stone: #cac3af;    /* one step below sand (the border-strong step); the Sports zone (owner pick, 2026-09-08) */
	--zone-ink: #15140e;
	--zone-sports: #344c79;   /* the athletes' dominant navy (raw median #204C9E), clamped */
	--zone-movies: #efece7;   /* films and series: a LIGHT band (owner pick, 2026-09-09). The world stopped being poster-keyed here: the dark browns (#6A5944 median, then #433E2D) both lost the posters' own colour, so the films read on near-paper instead. A hair greener than --zone-surface, its own step on purpose. */
	--zone-decor: #793e34;    /* home decor: the median terracotta */
	/* WORLD GROUNDS (owner, 2026-11-10: "her birinin header'ına bir renk tanımı"): the colour a world's page band, the grid's controls under it and the header over it wear. Sports keeps the ink. Change a world's colour here and nowhere else. */
	--world-movies-tv: #433e2d;   /* Movies & TV: the ladder's dark olive brown, a cinema's dusk; paper reads 10:1 on it */
	--world-home-decor: #793e34;  /* Home Decor: its own terracotta (--zone-decor); paper reads 8:1 on it */
	--wood-walnut: #644334;       /* a dark walnut frame, as the walls' miniatures and swatches draw it: the moulding's mean (data/decor/frames/make_frames.py; a quarter lighter since 2026-10-23, "siyahtan çok ayıramıyoruz") */
	--wood-oak: #c49a6c;          /* a natural oak frame, the same (owner, 2026-10-21) */
	--grain-opacity: 0.42;    /* zone film grain strength; the panel (Brand > Zone grain) overrides it at :root */
	--text-ui: 0.95rem;        /* 15.2px — buttons, card category, small UI (reference) */
	--text-badge: 0.75rem;       /* 12px — sale/discount badges (reference) */
	--text-card-title: 1.05rem;  /* 16.8px — product card titles (reference) */
	--text-card-price: 0.98rem;  /* 15.68px — product card prices (reference) */

	/* ---- Drawer (floating side panel: quick view, mini-cart, wall sheet,
	   mobile menu). ONE geometry for every drawer — never size or round a
	   drawer per component; change these tokens instead. ---- */
	--drawer-gap: 12px;                          /* gap between panel and viewport edges */
	--drawer-radius: var(--radius-card-lg);      /* the panel's Card corners, so the drawers round with the cards (owner, 2026-10-30: "aynı yönetici panelinde kullandığımız token") */
	--drawer-w: 560px;
	--drawer-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
	--shadow-soft: 0 6px 20px rgba(21, 20, 14, 0.12); /* a small control floating over the page: the corner index's circle (owner's reference, 2026-09-29) */

	/* Poster lift — the shadow a framed print casts on the wall behind it.
	   Used wherever a mockup is cropped to the frame and sits directly on a
	   zone ground with no wall of its own (reel cards). Warm ink, same
	   family as the header/search shadows; never write it per component.

	   DIRECTION IS MEASURED FROM THE MOCKUPS THEMSELVES (owner, 2026-09-09:
	   "orjinal mockuptaki gibi posterin sol tarafindan cikan bir golge"): in
	   the 2000px mockup the light comes from the upper right, so the wall
	   darkens ~39% along the frame's LEFT edge over ~110px, ~19% under the
	   BOTTOM over ~45px, and not at all on the right or top (the right wall
	   is a highlight, 242 vs 227 ambient). At the reel card's scale
	   (995 source px -> ~187 CSS px) that is ~21px left and ~8px below.
	   Two measured versions came before this one (a warm-ink falloff copy of
	   the photograph, then a deep left-cast trial); the owner settled on a
	   straight downward shadow, which drops the photograph's left cast on
	   purpose. THIS VALUE IS ALSO THE PANEL DEFAULT — the Hanging Club panel
	   ("Poster shadow") prints a `--shadow-poster` override only when the
	   saved setting differs from it, so `D0_POSTER_SHADOW_DEFAULT` in
	   inc/admin-panel.php must be kept identical to the line below. */
	--shadow-poster: 0px 6px 8px -2px rgb(0 0 0 / 35%);
	/* The studio wall of the main mockups (fitted on mockup-1 at 2000px,
	   2026-10-26): warm off-white lit from the right (the left end of the
	   card's crop, then its right end), and the frame's shadow, a warm brown
	   (the wall keeps R 0.71, G 0.67, B 0.64 of itself in the shadow's core).
	   The wall's two ends set a step warmer and deeper by the owner
	   (2026-10-28, from DevTools: #d1cabc to #e5e0d6; the mockup's own were
	   rgb(229 227 222) to rgb(240 238 234)). */
	--mock-wall-shade: #d1cabc;
	--mock-wall-light: #e5e0d6;
	--mock-wall: linear-gradient(to bottom, rgb(0 0 0 / 0.035), transparent 50%), linear-gradient(to right, var(--mock-wall-shade), var(--mock-wall-light)); /* the wall itself, lit from the right with a shade from the top: the frame scene and To Scale */
	--mock-wall-flat: color-mix(in srgb, var(--mock-wall-shade), var(--mock-wall-light)); /* the same wall without its light, its two ends' middle: the PDP stage (owner, 2026-11-08: the shade read as an inner shadow beside the accent band) */
	--mock-shadow: rgb(95 78 62);
	/* The frame art's own colours (assets/img/frames, measured on the
	   make_frames.py output): the moulding's face and its lip at the rabbet.
	   Painted under the 9-slice, so the hairlines between its nine pieces and
	   beside the print show the moulding, not the wall behind it (owner,
	   2026-10-26: "beyaz çizgi ve köşeler"). */
	--frame-black-face: rgb(32 32 32);
	--frame-black-lip: rgb(24 24 24);
	--frame-white-face: rgb(215 208 196);
	--frame-white-lip: rgb(170 165 157);
	--frame-natural-face: rgb(197 162 124);
	--frame-natural-lip: rgb(128 107 82);
	--frame-dark-face: rgb(100 67 50);
	--frame-dark-lip: rgb(66 43 31);
	/* Every framed print on the site stands at 7:10 (owner, 2026-10-28:
	   "hepsini 7:10 yap ... wall builder gerçek ölçülerinde kalsın"): the
	   frame scene (framed cards, the product page's first slide, its thumb
	   and full-screen view, the quick view) and the home's poster flow and
	   its room. The sports flats are 7:10 already; the 3:4 flats (films,
	   series, decor) fill it cropped, ~3.3% off each side. The wall builder
	   and the Wall Sets keep each size's real shape. */
	--frame-print-ratio: 0.7;
	/* The home's tab band under the poster flow (GRID TABS, .gtabs--band). */
	--band-tone-share: 28%;   /* how much of a tab's poster tone its pastel ground keeps; the rest is paper (owner, 2026-10-28: "pastel tonlarına geri dön") */
	--text-band-title: clamp(2.6rem, 1rem + 5vw, 5.5rem); /* the band's title (the reference block's ~76px at 1024) */
	--band-tab-gap: var(--space-4); /* the room either side of the band tabs' slanted stroke */

	/* Motion — two curves, three clocks (2026-09-15; owner: "geçiş yavaş ve
	   akışkan hissedilmiyor"). A control answering the cursor is ease-OUT: it
	   moves at full speed on the first frame and settles, so the answer is felt
	   at once (the old 0.35s ease-in-out spent its first 100ms almost still,
	   which read as lag). The reference's ease-in-out stays for TRAVEL only,
	   a slide moving from one rest to another: rail.js carries the same curve.
	   Nothing is timed outside these tokens. */
	--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-travel: cubic-bezier(0.645, 0.045, 0.355, 1);
	--motion: 0.18s var(--ease-out);         /* feedback: fills, colours, rings, small nudges */
	--motion-reveal: 0.26s var(--ease-out);  /* things that arrive: overlays, the card's Add to cart, dots */
	--motion-swap: 0.3s var(--ease-out);     /* picture crossfades */
	--motion-travel: 0.35s var(--ease-travel); /* CSS-side travel: drawers, the tab bar's accent line */
	--ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);  /* a long exponential ease-out: the reference stage's slide (apollo.io, measured 2026-09-15) */
	--motion-stage: 0.8s var(--ease-arrive);     /* a whole scene arriving over another (the hero stack) */
	--motion-arrive: 0.6s var(--ease-arrive);    /* lines of copy arriving with it */
	--motion-beat: 0.35s;                        /* the step of a loop that keeps something alive (the door spots' rings), --motion-travel's time without its curve: a loop takes its length and delays from it */
	/* The button family's answers: the three feedback steps above at twice
	   their time (owner, 2026-10-23: "Hız: Yavaş x2"), on the same curve. */
	--motion-button: 0.36s var(--ease-out);       /* colours (--motion x2) */
	--motion-button-scale: 0.52s var(--ease-out); /* the press (--motion-reveal x2) */
	--motion-button-pass: 0.6s var(--ease-out);   /* the icon's pass, the fades of a fill and a turn-over (--motion-swap x2) */

	/* Frosted glass (sticky header + open dropdown panels share these — never
	   set frost values per component, or the two surfaces drift apart).
	   Mixes from --color-surface because that IS the header bar tone (see the
	   .site-header rule); mixing from the lighter shell made the stuck bar
	   read a step lighter than the panels hanging off it.
	   No box-shadow may paint behind or over either surface: translucent
	   surfaces sample what's behind them, so a stray shadow shifts their tone
	   (debugged as 251-vs-254 / 253-vs-255 mismatches). */
	--frost-alpha: 90%;
	--frost-bg: color-mix(in srgb, var(--color-surface) var(--frost-alpha), transparent);
	--frost-filter: saturate(1.15) blur(12px);
	/* Dark glass: the dropdown panels while the header is CLEAR over the hero
	   (owner, 2026-09-24: "bu şeffaflığı açılan pencerelerde de devam
	   ettirelim"). The photo shows through a blur under a veil of the ink,
	   so paper words read on it; the wings sit a tick lighter than the
	   middle, the frost panels' depth in the dark. */
	--glass-bg: color-mix(in srgb, var(--zone-ink) 50%, transparent);
	--glass-wing-bg: color-mix(in srgb, var(--zone-ink) 40%, transparent);
	--glass-filter: saturate(1.15) blur(20px);
}

/* ==================================================================
   RESET (minimal)
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); }
/* Form elements do NOT inherit fonts by default — without this, every
   <button>/<input>/<select> falls back to the UA font (Arial), not DM Sans. */
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
/* Sticky footer: main stretches, so short pages still pin the footer to the
   viewport bottom (dialogs are position:fixed — unaffected by the flex flow) */
body { display: flex; flex-direction: column; min-height: 100dvh; }
.site-main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-ink); margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Typography utilities — reuse these instead of re-declaring per component. */
.eyebrow { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-accent); }
.lead { font-size: var(--text-lg); line-height: var(--lh-snug); color: var(--color-text-muted); }

/* Sale price writing (reference-measured, storewide): struck OLD price first
   (muted, medium, 0.98em), plain ink NEW price second — no chips. The
   del/ins ORDER lives in the price filter (inc/woocommerce.php) and the JS
   label builders (commerce.js); this block is the single styling source.
   The product page's own price writes NEW first ("Now $29.99", the old one
   struck after it; d0_pdp_price) and restyles its del under .pdp-price. */
:is(.card__price, .suggest__price, .sugg-quick__price, .wallsheet__price, .single .summary .price) del {
	color: var(--color-text-muted); font-weight: var(--fw-medium);
	font-size: 0.98em; opacity: 1; margin-right: 0.25em;
}
:is(.card__price, .suggest__price, .sugg-quick__price, .wallsheet__price, .single .summary .price) ins {
	text-decoration: none; color: var(--color-text);
}
/* PRICE STACK: the wall builder's price writing (owner, 2026-11-08: "Wall
   builder'daki gibi yazalım"; .wb-ink__price), SHARED by the quick view's
   foot and the cart drawer's total: the price before the sale struck with
   the saving's round green chip beside it, the price to pay under them. It
   takes its ground's colour (both feet are ink), the struck price that colour
   at 55%. No sale: the struck line hides, the price stands alone. --end
   lines it up on the right. */
.pricestack { display: grid; gap: 2px; min-width: 0; }
.pricestack--end { justify-items: end; text-align: right; }
.pricestack__was { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pricestack__was:has(> del:empty) { display: none; }
.pricestack__was > del { color: color-mix(in srgb, currentColor 55%, transparent); }
.pricestack__off { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5rem; border-radius: var(--radius-button); background: var(--color-sale); color: var(--color-accent-contrast); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.pricestack__now { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }

/* ==================================================================
   LAYOUT
   ================================================================== */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
/* The store runs edge to edge (owner: the home 2026-10-26, "anasayfayı full
   genişlik"; every view but the reading pages 2026-10-30, inc/page-width.php).
   Lifting the one token every column and axis reads keeps header, sections
   and footer on a shared axis, one gutter in from the viewport. */
body.is-wide { --container-max: 100vw; }
/* The header and the footer run edge to edge on every page, the reading
   pages too (owner, 2026-11-12: cart, checkout, About: "Full yapalım. Sadece
   gövdeyi belli bir genişlikte koruyalım"); there only the body and the
   page's band keep the 1376 column. */
.site-header, .site-footer { --container-max: 100vw; }

/* ==================================================================
   HEADER
   ================================================================== */
.site-header {
	background: var(--color-surface); /* one ladder step deeper than the shell (owner: "üst menü EFEDE7") */
	border-bottom: 1px solid var(--color-hairline);
	/* Soft downward shadow: paints BELOW the bar (onto page content), so the
	   frost rule is safe — it never sits behind/over a translucent surface. */
	box-shadow: 0 6px 16px -8px rgba(40, 36, 27, 0.10);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
}
.site-logo { font-weight: var(--fw-semibold); text-decoration: none; font-size: var(--text-lg); }
/* The mark (assets/img/logo, the owner's art, 2026-09-15): --logo-h tall,
   the width following the file's 255x192 ratio (declared, so the box is
   sized before the file lands); the paper twin sits on the ink one and the
   clear header crossfades them on --motion, in step with its words. */
.site-logo--mark { position: relative; display: block; align-self: center; height: var(--logo-h); line-height: 0; }
.site-logo__img { display: block; height: 100%; width: auto; aspect-ratio: 255 / 192; transition: opacity var(--motion); }
.site-logo__img--paper { position: absolute; inset: 0; opacity: 0; }
.site-header.is-clear .site-logo__img--ink { opacity: 0; }
.site-header.is-clear .site-logo__img--paper { opacity: 1; }
/* A phone's pinned header (owner, 2026-11-10: "sticky hale geldiğinde logo da metne dönüşüp üst menü küçülsün"): once the page scrolls (.is-stuck) the mark gives way to the name in words and the menu's row drops to 48px; every offset that reads --header-row-h follows. */
.site-logo__word { display: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 640px) {
	:root:has(.site-header.is-stuck) { --header-row-h: 3rem; }
	.site-header__inner { transition: min-height var(--motion-reveal); }
	.site-header.is-stuck .site-logo--mark { height: auto; line-height: 1; }
	.site-header.is-stuck .site-logo__img { display: none; }
	.site-header.is-stuck .site-logo__word { display: block; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .site-header__inner { transition: none; } }
/* Text fallback wordmark (shown when neither the mark's file nor a custom logo is there) */
.site-logo--wordmark { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: -0.045em; color: var(--color-text); }
.cart-link { text-decoration: none; }
.cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font-size: var(--text-sm);
}

/* ==================================================================
   SECTION SCAFFOLD (generic section structure)
   ================================================================== */
/* Sections carry NO outer spacing: they fill 100% of their slot. Gaps between
   sections are set per page with the [d0_spacer height="N"] shortcode. */
.section { padding-block: 0; }
.d0-spacer { display: block; }
/* Head: heading block (eyebrow over title) on the LEFT, optional view-all
   link on the right. Templates wrap eyebrow+title in .section__heading. */
/* Section head (reference-measured, demo1/demo6 heading component):
   big display title (40.96px), optional DM Sans 500 subtitle 8px below,
   optional "View all" link vertically centered on the right. */
.section__head {
	display: flex;
	align-items: center;   /* reference row: content-middle */
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
/* Standalone [d0_heading] section: no outer spacing (gaps = [d0_spacer]). */
.heading-sec .section__head { margin-bottom: 0; }
.section__eyebrow {
	margin: 0 0 var(--space-1);
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--color-accent);
}
.section__title { margin: 0; font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.section__sub,
.search-sec__sub {
	margin: var(--space-2) 0 0;
	font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-medium);
	line-height: var(--lh-body); color: var(--color-text);
}
/* "View all" link (reference btn-link): DM Sans bold text + 20px chevron,
   5.6px apart, hover turns accent — color only, no slide. */
.section__link {
	flex: none;
	display: inline-flex; align-items: center; gap: 0.35em;
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-bold);
	text-decoration: none;
	color: var(--color-text);
}
.section__link > span:not(.label) { display: inline-flex; font-size: 1.25rem; }
/* The pill segment's grid glyph (the tab rows' See all) shows only there
   (.segnav, below); a plain link keeps its label and chevron. */
.section__link > span.section__link-glyph { display: none; }
.section__link:hover { color: var(--color-accent); }
/* link_style="underline" (heading.php; owner, 2026-10-30, the home's View All Collections): the words on a 1px rule of their own colour (the hero's old See All). */
.section__link--underline { padding-bottom: var(--space-1); border-bottom: 1px solid currentColor; font-weight: var(--fw-medium); transition: color var(--motion); }
/* Split head with a plain line on the right ("Movies & Series · 1,036
   posters") and the description running full width under the row. */
.section__meta {
	flex: none; margin: 0;
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium);
	color: var(--color-text-muted); text-decoration: none; transition: color var(--motion);
}
a.section__meta:hover { color: var(--color-text); }
.section__sub--wide { margin-top: 0; max-width: none; }
/* The hand-written phrase inside a statement (d0_statement_html). */
.hand { font-family: var(--font-hand); font-weight: 400; font-style: normal; font-size: calc(1em * var(--hand-scale)); line-height: 0.9; letter-spacing: 0; color: var(--color-hand); }
/* Editorial opener (owner, 2026-09-08, second round: "aciklama yanda kotu
   duruyor"): eyebrow, a display-size title, then the description and its
   link UNDER it, all left-aligned, the description on a reading measure.
   The title takes the statement face token. */
/* Grid: eyebrow on row 1, the title on row 2, the button beside the TITLE
   only (row 2, centred on it, one or two lines alike); the heading wrapper
   dissolves into the grid. */
.section__head--editorial { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: var(--space-1) var(--space-5); justify-items: start; }
.section__head--editorial .section__heading { display: contents; }
.section__head--editorial .section__eyebrow { grid-column: 1; grid-row: 1; }
.section__head--editorial .section__title { grid-column: 1; grid-row: 2; }
.section__head--editorial .section__aside { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; }
/* With a description the aside stacks under the title again (full width). */
.section__head--editorial:has(.section__sub) { grid-template-columns: 1fr; }
.section__head--editorial:has(.section__sub) .section__aside { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--space-2); }
@media (max-width: 640px) {
	.section__head--editorial { grid-template-columns: 1fr; }
	.section__head--editorial .section__aside { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--space-2); }
}
.section__title--display { font-family: var(--font-statement); font-weight: var(--fw-statement); font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--ls-statement); }
.section__aside { display: grid; gap: var(--space-3); justify-items: start; max-width: 62ch; }
.section__aside .section__sub { margin: 0; }

/* Look slides reuse the story copy block; the CTA opens the wall sheet. */

/* ==================================================================
   WALL SHEET — side-drawer configurator for a hero "look".
   Builds on .drawer (right slide-in, like quick view); this block only
   handles the internal head / scrollable items / footer column.
   ================================================================== */
.wallsheet { overflow: hidden; }
.wallsheet[open] { display: flex; flex-direction: column; }
.wallsheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.wallsheet__title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-ink); }
.wallsheet__sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
/* Basis 0, not auto: the list only ever takes the LEFTOVER height, so an
   in-flow panel opening below it (quick-buy) is never squeezed while the list
   still has rows to scroll (2026-09-05). */
.wallsheet__items { flex: 1 1 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4); }
/* The shell's body slot: the loaded rows, strip and foot become the dialog's
   own flex children (template-parts/wall-sheet.php). */
.wallsheet__lazy { display: contents; }
.wallsheet__status { margin: 0; padding-block: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
/* Product row: poster thumb on the left, everything else in one config column
   beside it — name/price header, then one aligned row per option. */
.wallsheet__product {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;   /* config column tops out with the thumb; growing
	                         option rows (frame color) extend downward */
	padding-block: var(--space-4);
}
.wallsheet__product + .wallsheet__product { border-top: 1px solid var(--color-border); }
.wallsheet__thumb { width: 6.5rem; height: 8.125rem; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); }
.wallsheet__config { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.wallsheet__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}
.wallsheet__name { display: block; font-size: var(--text-ui); font-weight: var(--fw-semibold); text-decoration: none; color: var(--color-text); }
.wallsheet__name:hover { color: var(--color-accent); }
.wallsheet__price { font-size: var(--text-ui); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; }
/* Sale writing comes from the shared del/ins price block (top of file). */
@media (max-width: 480px) {
	/* Phone: beside the 104px thumb the config column is ~170px, too narrow
	   for the shared picker (format segments wrapped onto two lines, the
	   price row overflowed). The name/price header stays beside the thumb
	   (stacked, so neither clips) and the picker drops under both, taking
	   the row's full width (2026-09-05). */
	.wallsheet__config { display: contents; }
	.wallsheet__meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
	.wallsheet__product .opt { grid-column: 1 / -1; }
	/* Narrow segments: fine print and no icon keep each name on one line
	   with room for wider system fonts. */
	.wallsheet .opt__mode-name { font-size: var(--text-xs); }
}
/* "Complete the look" strip (template-parts/suggestions.php) — SHARED by the
   wall sheet and the mini-cart drawer. Surface band, scroll-snap track,
   .arrowbtn nav; each card has a + quick-buy button (top-down mini panel). */
.suggest {
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}
/* Mini-cart context: flex order slots the strip between items and the dark
   total bar (the Woo fragment renders total BEFORE our strip in the DOM) */
.mini-cart .suggest { order: 2; }
/* Phones: the strip plus the dark bar took 320 of 788px in the quick view and
   the wall sheet, leaving the option picker a third of the screen; the
   mini-cart keeps it (nothing else to pick there). */
@media (max-width: 640px) {
	.wallsheet:not(.mini-cart) .suggest { display: none; }
}
.suggest__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.suggest__title { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }
.suggest__nav { display: flex; gap: var(--space-1); }
.suggest__track {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* keep the first card on the panel's side padding — without this, snap
	   aligns cards to the scrollport edge and swallows the padding */
	scroll-padding-inline: var(--space-4);
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--space-4));
	padding-inline: var(--space-4);
}
.suggest__track::-webkit-scrollbar { display: none; }
.suggest__card {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 14rem;
	border-radius: var(--radius-card-half); /* half the store's card corners (owner, 2026-11-08: "token ile yuvarla", then the full 20px was "biraz fazla") */
	background: var(--color-bg);
	scroll-snap-align: start;
}
.suggest__link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-2) 2.6rem var(--space-2) var(--space-2);
	text-decoration: none;
	color: var(--color-text);
}
.suggest__card:hover .suggest__name { color: var(--color-accent); }
.suggest__thumb { width: 2.75rem; height: 3.4rem; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); flex: none; }
/* The print in its frame alone, flat (.fscene--flat, FRAME SCENE), at 85%
   of the thumbnail's height, centred in it (owner, 2026-11-08: the full
   height was "biraz" big). */
.suggest__thumb { --flat-fill: 0.85; }
.suggest__body { min-width: 0; }
.suggest__name {
	display: block;
	overflow: hidden;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.suggest__price { font-size: var(--text-xs); line-height: var(--lh-heading); color: var(--color-text-muted); }
/* Quick-buy (+) on each card */
.suggest__quick {
	position: absolute;
	right: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 1px solid var(--control-border);
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
}
.suggest__quick:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-contrast); }
/* An SVG plus, not the "+" glyph: the character's ink sits above its box centre
   in the system fonts, so it never looked centred in the ring (owner). */
.suggest__quick svg { width: 0.95rem; height: 0.95rem; }

/* Quick-buy mini panel — expands IN FLOW right above the "Complete the look"
   strip (accordion: grid-rows 0fr -> 1fr animates to the content's height). */
.sugg-quick {
	display: grid;
	grid-template-rows: 0fr;
	min-height: 0; /* may shrink inside the drawer column; the inner then scrolls */
	transition: grid-template-rows var(--motion-reveal);
}
.sugg-quick.is-open { grid-template-rows: 1fr; }
/* Mini-cart only: the Woo fragment orders its children by flex order (items 1,
   strip 2, total 3, buttons 4), so the panel takes the strip's slot and the DOM
   keeps it above. The wall sheet is plain DOM order (items, panel, strip, foot):
   an order here sent the panel BELOW the foot (owner, 2026-09-05). */
.mini-cart .sugg-quick { order: 2; }
.sugg-quick__inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 var(--space-4);
	border-top: 1px solid var(--color-hairline);
	transition: padding-block var(--motion-reveal);
}
.sugg-quick.is-open .sugg-quick__inner { padding-block: var(--space-4); overflow-y: auto; scrollbar-width: none; } /* short viewports: the open panel scrolls instead of clipping its Add button */
.sugg-quick__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sugg-quick__thumb { width: 3rem; height: 3.7rem; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); flex: none; }
.sugg-quick__meta { flex: 1 1 auto; min-width: 0; }
.sugg-quick__name { margin: 0; font-size: var(--text-ui); font-weight: var(--fw-semibold); }
.sugg-quick__price { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sugg-quick__add { width: 100%; margin-top: var(--space-3); }

/* Footer: dark summary bar (ink on white drawer), total stacked label-over-price */
.wallsheet__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-ink);
	color: var(--color-accent-contrast);
}
.wallsheet__total { display: flex; flex-direction: column; margin: 0; font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: color-mix(in srgb, var(--color-accent-contrast) 65%, transparent); }
.wallsheet__total strong { color: var(--color-accent-contrast); font-weight: var(--fw-semibold); font-size: var(--text-xl); letter-spacing: normal; text-transform: none; }
/* The action never breaks into two lines; the price block wraps instead
   (a struck old price can drop under the new one on a phone). */
.wallsheet__foot .button { flex: none; white-space: nowrap; }

/* ==================================================================
   OPTION PICKER — shared "what you get" -> frame -> size configurator.
   ONE markup and ONE look on every surface: PDP, quick view, hero wall
   sheet rows and the suggestion quick-buy panel (the compact pill +
   color-dot variant, .opt--rows, retired 2026-09-05, owner). Full-width
   rows of clearly SEPARATED, rounded controls: two format segments, then
   (only while Printed is active) the photographed frame corners, then a
   stretched size select.
   Segment states: warm control fill / hover darker fill / active ink fill
   + white label (same language as the dselect chip).
   ================================================================== */
.opt { display: flex; flex-direction: column; gap: var(--space-3); --radius-sm: var(--radius-picker); } /* every small corner inside the picker (segments, frame tiles and their art, the size select and its list, the digital note) is the picker's own */
.opt__step { display: flex; flex-direction: column; min-width: 0; }
.opt__step[hidden] { display: none; } /* explicit display would defeat the hidden attr (frames + size steps) */
/* Caps micro-label. No longer rendered by the picker itself; the contact and
   report forms reuse it as their field label, so it stays. */
.opt__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }
/* The three ways to buy as ONE switch (owner, 2026-11-02: "Framed / Print
   Only / Digital güzel, yalnızca eski stilde olsun"), still one pill
   (owner, 2026-10-31: "ortadan bağla", "tam yuvarlak köşe"), light (owner,
   2026-11-02: no dark button in the column): a track in the controls'
   fill, the chosen side raised on paper with a hairline and set in ink,
   the others muted on the track, an icon before each. It reads as a mode;
   the frame and size tiles under it are the choices. */
.opt__modes {
	display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 2px;
	height: var(--control-h-sm); padding: 3px;
	border-radius: var(--radius-button); background: var(--control-bg);
}
.opt__mode {
	display: flex; align-items: center; justify-content: center; min-width: 0;
	padding: 0 var(--space-2);
	background: none; border: 1px solid transparent;
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: background-color var(--motion), border-color var(--motion);
}
.opt__mode:hover .opt__mode-name { color: var(--color-ink); }
.opt__mode.is-active { background: var(--color-bg); border-color: var(--color-border-strong); }
.opt__mode.is-active .opt__mode-name { color: var(--color-ink); font-weight: var(--fw-semibold); }
.opt__mode-name { display: inline-flex; align-items: center; gap: 0.45em; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap; color: var(--color-text-muted); transition: color var(--motion); }
.opt__mode-name svg { flex: none; width: 1.05em; height: 1.05em; }
/* Frame row (owner, 2026-08-28): photographed corners, one row, one
   decision, shown on Framed only (the four woods since 2026-11-02, when
   Unframed became Print Only). Each option is a
   bordered card holding just the corner art; its NAME sits ON the bottom
   border and interrupts it (reference-matched), so the label belongs to
   the card without stealing space inside it. The step itself carries no
   display rule of its own: .opt__step[hidden] must keep winning (the
   2026-08-25 lesson). */
.opt__frames {
	display: flex; gap: var(--space-2);
	/* The labels hang ~6px below the cards; this margin gives that back so
	   the gap BELOW the labels equals the gap above the row (owner). */
	margin-bottom: 6px;
}
.opt__frame {
	position: relative; flex: 1; min-width: 0;
	display: block; padding: 0; overflow: visible;
	background: var(--color-bg); /* #FBFAF9: card interior and label share one paper tone */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--motion), box-shadow var(--motion);
}
.opt__frame-img {
	/* 2:1 corner art with a transparent interior: the card's own paper tone
	   shows through as the print. The card is shorter than the art and the
	   art is anchored to its BOTTOM (owner), so the moulding corner stays in
	   view while the empty paper above it is cropped away. */
	display: block; width: 100%; height: auto; aspect-ratio: 5 / 2;
	object-fit: cover; object-position: center bottom;
	border-radius: calc(var(--radius-sm) - 1px);
}
.opt__frame-name {
	position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
	padding: 0 0.45em; white-space: nowrap;
	background: var(--color-bg); /* same paper tone as the card, so the border reads as broken */
	font-size: var(--text-badge); font-weight: var(--fw-medium); line-height: 1.2; /* the scale's 12px step (was an off-scale 11.2px, 10.6px on phones) */
	color: var(--color-text-muted);
	transition: color var(--motion);
}
.opt__frame:hover { border-color: var(--control-active); }
.opt__frame.is-active {
	border-color: var(--control-active);
	/* The ring paints OUTSIDE the card: an inset shadow sits under the image
	   and the selection reads as a hairline instead of a 2px outline. */
	box-shadow: 0 0 0 1px var(--control-active);
}
.opt__frame.is-active .opt__frame-name { color: var(--color-ink); font-weight: var(--fw-semibold); }
@media (max-width: 480px) {
	/* Four woods keep one row on a phone (a 78px tile holds "Dark Wood");
	   the three ways to buy drop their icons for the room. */
	.opt__frame-name { padding: 0 0.35em; }
	.opt__mode-name svg { display: none; }
}
/* Digital has no frame and no size; this says what does arrive. */
.opt__digital-note {
	margin: 0; padding: var(--space-3);
	background: var(--control-bg); border-radius: var(--radius-sm);
	font-size: var(--text-sm); color: var(--color-text);
}
.opt__digital-note[hidden] { display: none; }
/* Size select: consumes the shared .select component (enhanced to .dselect
   by select.js) and stretches to the picker's full width, at the picker's
   size height --opt-size-h (select--sm's 34px, alone or fused to the
   quantity below). The enhanced button copies the select's classes, so
   .opt__select sizes both. */
.opt .opt__select,
.opt .dselect { width: 100%; }
.opt .dselect__btn { width: 100%; }
.opt .opt__select { height: var(--opt-size-h, var(--control-h-sm)); padding-left: var(--space-3); }
.opt .dselect__option { padding-inline: var(--space-3); } /* the rows' words on the button's own inset, clear of the pill's curve (owner, 2026-10-31: "soldan uzaklaştıralım") */
/* A full pill like the format segments (owner, 2026-10-31): half its
   height on the button and on the list's far corners. Open, the side
   facing the list still flattens (the .dselect rules); a 999px radius
   there would scale up to the full height and the ends would jump. */
.opt .dselect { --radius-sm: calc(var(--opt-size-h, var(--control-h-sm)) / 2); }
/* The open list on the control's own fill (owner, 2026-10-31: "açılan
   dropdownun zemin rengini de bej yapalım"): control and list one piece. */
.opt .dselect__list { background: var(--control-bg); }
/* The full pickers (the ones with a quantity: the PDP, quick view) stand
   their frame tiles at the standard 44px (owner, 2026-10-31: "diğer üstteki
   her şeyi de 44 piksel"; their art still anchored to the bottom, less
   paper above it; 2px for the tile's border). The format segments keep the
   scale's 34px (owner, the same day: 40px, then "daha da az"), and the size
   and quantity pill came down to them (owner, 2026-11-01: "Drop-down ve
   adet seçiciyi de Print Poster Digital Download yüksekliğine getiririz"). */

/* Single product buy box (variable products; uses the shared option picker) */
/* PDP PANEL (owner, 2026-11-02, from the docs/design/pdp.html canvas: "bu
   alanda özgürsün"). One hierarchy in four voices, nothing else:
   - the title, the display face at --text-product-title;
   - the price, the display face at --text-price, a hairline above it;
   - the one sentence that talks, the short description at --text-base, ink;
   - the meta in the muted voice, a step under: the breadcrumb at --text-xs,
     the credit and the rating at --text-sm, the row names at --text-xs.
   Two spacing steps: 24 between groups (title group, price, picker rows,
   the buy row, the promises), 8 to 16 within one. */
.pdp-buy { display: flex; flex-direction: column; gap: var(--space-4); margin-block: 0 var(--space-3); }
.opt--tiles { gap: var(--space-4); } /* each row a group: format, frame, size (the PDP and the quick view) */
.opt--tiles .opt__frame-img { height: calc(var(--control-h) - 2px); } /* the frame tiles at the 44px of the scale tiles under them */
/* The picker's row names (the labels prop and the size tiles): "Frame
   Black" over the frame tiles, "Size 18x24″ · 45x60 cm" over the scales,
   where the Your pick line used to sum the pick up. */
.opt__line { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.opt__line span { margin-left: 0.35em; color: var(--color-ink); }
.opt__line span.is-empty { font-weight: var(--fw-normal); color: var(--color-text-muted); }
/* The PDP's tiles (owner, 2026-11-08: "Framed - Print Only gibi seçiciyi de
   Small medium seçicisi gibi yapalım"): the ways to buy and the size scales
   share ONE plain 44px box with just the name written inside, in the frame
   tiles' border and ring (owner, the same day: "Fiyatları kaldıralım.
   İconları da kaldıralım. Direkt metni içine yazalım", then "Small medium
   kısmını da düz hale getir": the drawn sizes, the hanging names and the
   starting prices all left; the scales read S, M, L, XL, their full names
   in aria-label). A name that outgrows a narrow tile wraps to two balanced
   lines. No picker row stretches across
   the column any more ("Seçicilerin hepsi tam genişlikte oluyor"): the
   tiles and the woods keep --opt-tile-w, the size chips their content, all
   from the left; a narrow column shrinks the tiles, a wide one leaves room. */
.opt__tiles { display: flex; gap: var(--space-2); }
.opt--tiles .opt__frame { flex: 0 1 var(--opt-tile-w); }
.opt__tile {
	flex: 0 1 var(--opt-tile-w); min-width: 0;
	display: grid; place-items: center; height: var(--control-h); padding: 0 var(--space-2);
	border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg);
	color: var(--color-text-muted);
	font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.15; text-align: center; text-wrap: balance;
	cursor: pointer;
	transition: border-color var(--motion), box-shadow var(--motion), color var(--motion);
}
.opt__tile[hidden] { display: none; } /* a scale the chosen frame sells nothing in */
.opt__tile:hover { border-color: var(--control-active); color: var(--color-ink); }
.opt__tile.is-active { border-color: var(--control-active); box-shadow: 0 0 0 1px var(--control-active); color: var(--color-ink); font-weight: var(--fw-semibold); }
.opt__sizes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } /* each chip its content's width from the left, 56px the least ("18x24″" over "$131.99") */
.opt__size {
	min-width: 3.5rem;
	display: grid; place-content: center; gap: 1px; height: var(--control-h); padding: 0 var(--space-2);
	border: 0; border-radius: var(--radius-sm); background: var(--control-bg); color: var(--color-text);
	font: inherit; text-align: center; cursor: pointer;
	transition: background-color var(--motion), color var(--motion);
}
.opt__size[hidden] { display: none; }
.opt__size b { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.opt__size small { font-size: var(--text-badge); line-height: 1.15; color: var(--color-text-muted); font-variant-numeric: tabular-nums; transition: color var(--motion); }
.opt__size:hover { background: var(--control-bg-hover); }
.opt__size.is-active { background: var(--control-active); color: var(--color-accent-contrast); }
.opt__size.is-active small { color: inherit; }
.opt__size:disabled { opacity: 0.45; cursor: not-allowed; }
/* The buy row (owner, 2026-11-02, from the canvas): the quantity and Add to
   Cart on one 48px line, Buy Now under them as the outline, so one action
   leads; Pay with and Report under both. */
.pdp-buy__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.pdp-buy__bar { display: flex; gap: var(--space-2); width: 100%; height: var(--control-h-buy); }
.pdp-buy__bar .button { flex: 1 1 0; min-width: 0; height: 100%; }
/* The quantity at Add to Cart's own 48px and full round (owner, 2026-11-02:
   "radiusli yapalım ve add to cart yüksekliğiyle eşit olsun"). Doubled
   classes: the .stepper component comes later in the file. */
.pdp-buy__bar .pdp-buy__qty { flex: none; height: 100%; padding: 4px; border-radius: var(--radius-button); }
.pdp-buy__bar .pdp-buy__qty[hidden] { display: none; } /* Digital: one file, Add to Cart takes the row */
.pdp-buy__bar .pdp-buy__qty .stepper__btn { width: calc(var(--control-h-buy) - 8px); height: 100%; border-radius: 50%; transition: background-color var(--motion), color var(--motion); }
.pdp-buy__bar .pdp-buy__qty .stepper__btn:hover { background-color: var(--control-bg-hover); }
.pdp-buy__now { width: 100%; height: var(--control-h); }
/* "Pay with" and the cards' own marks, the last line of the promises
   (owner, 2026-11-02: moved from the buy row, where it stood across from
   Report since 2026-11-01), on the promises' left axis. */
.pdp-pay {
	display: flex; align-items: center; gap: var(--space-1);
	margin: var(--space-3) 0 0; font-size: var(--text-badge); color: var(--color-text-muted); /* one step under the fine print (owner, 2026-10-31: "biraz daha küçült") */
}
.pdp-pay span { margin-right: var(--space-1); }
.pay-mark { display: block; width: 1.625rem; height: auto; } /* d0_pay_marks(), on the product page and the footer: 26px marks, down from their native 38 in two steps (owner, 2026-10-31); the height follows the 38:24 card */
/* Four promises under the buy box (owner, 2026-10-31), each with the icon of
   what it is about since 2026-11-02 (it was a check before each), inside a
   round of the controls' fill (owner, 2026-11-01: "ikonu yuvarlak içine
   alalım"). The round stays under the line's height, centred on the first
   line, so the rows keep their rhythm. The lines of the ways to buy not
   picked step out (commerce.js, since 2026-11-02). */
.pdp-promises { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text); }
.pdp-promises li { display: flex; align-items: flex-start; gap: var(--space-2); }
.pdp-promises li[hidden] { display: none; }
.pdp-promises svg {
	flex: none; box-sizing: border-box; width: 1.5em; height: 1.5em; margin-top: 0.05em; padding: 0.35em;
	border-radius: 50%; background: var(--control-bg); color: var(--color-ink);
}
/* Button feedback states (busy / added / error) are the SHARED .button states
   next to the .button component: one look on the PDP, the wall sheet and the
   quick-buy panel (2026-09-05). */
.pdp-buy__actions .added_to_cart { display: none; } /* AJAX message line handles feedback */

/* ==================================================================
   COMPONENTS
   ================================================================== */
/* Buttons — reference geometry: 44px tall rounded-rect (10px), 15.2px/600,
   no letter-spacing, no uppercase. Variants: fill (default), light, outline.
   Sizes: --sm (34px / 7px radius), --lg (50px / 15px radius). */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em; /* icon + label spacing (reference: ~6px), no-op for text-only */
	height: var(--control-h);
	padding: 0 1.15em;
	background: var(--color-ink);
	color: var(--color-accent-contrast);
	text-decoration: none;
	border: none;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: var(--text-ui);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body); /* reference: 24.32px @ 15.2px; height stays fixed via flex */
	cursor: pointer;
	/* Hover, press and the ring: the INTERACTION MOTION block after .button:hover. */
}
.button--outline {
	background: transparent;
	color: var(--color-text);
	border: 2px solid var(--color-ink);
}
/* Its hover (fills with ink) is in the INTERACTION MOTION block below, after .button:hover. */
.button--sm { height: var(--control-h-sm); padding: 0 0.95em; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.button--lg { height: var(--control-h-lg); padding: 0 1.35em; border-radius: var(--radius-lg); font-size: var(--text-base); }

/* ------------------------------------------------------------------
   INTERACTION MOTION (owner, 2026-09-12: "hover'da butonun iç rengi
   animasyonlu değişsin, siyahtan beyaza / beyazdan siyaha"; no lifts, no
   shadows). Every button INVERTS on hover: its fill crossfades between ink
   and paper, the label with it, and a 2px ring in the resting fill's tone
   keeps its edge (an ink button becomes an outline button, an outline one
   fills; a paper button on a photo turns ink with a paper ring). Arrows'
   chevrons lean the way they go, link chevrons step forward, icon rings
   invert too. Everything rides --motion (0.18s ease-out); reduced motion
   turns the transitions off.
   ------------------------------------------------------------------ */
.button {
	border: 2px solid var(--color-ink); /* invisible at rest, the edge of the inverted state */
	/* Fill and label crossfade TOGETHER. They meet at mid-grey for one frame
	   (~19ms on this curve), which the eye does not catch; the earlier
	   label snap at 0.19s (a patch for the 0.35s ride, where that meeting
	   lasted a tenth of a second) was a jump in the middle of the motion
	   and read as a tick. No transform on a text control: a promoted layer
	   re-rasterises its glyphs. */
	transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
.button:hover { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-ink); }
.button:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.button--outline:hover { background: var(--color-ink); color: var(--color-accent-contrast); }
/* Feedback states keep their own fill through a hover. */
.button.is-added, .button.is-added:hover { border-color: var(--color-accent); }
.button.is-error, .button.is-error:hover { border-color: #b3261e; }
/* Chips and tabs: their tone change already rides --motion (no transform: see .button). */
/* Round arrows: the ring inverts to ink. The glyph itself never moves:
   no lean, no step, no swell on any control (owner, 2026-09-15: "okların,
   ikonların büyüyüp sağa sola kaymasını iptal edelim"); the colour change
   is the whole answer. */
.arrowbtn { transition: background-color var(--motion), border-color var(--motion), color var(--motion); }
.arrowbtn:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
/* Icon rings (the basket's +, the suggestion strips' +, the newsletter arrow) invert. */
.footer-nl__btn, .suggest__quick { transition: background-color var(--motion), border-color var(--motion), color var(--motion); }
.footer-nl__btn:hover { background: var(--color-bg); color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
	.button, .arrowbtn, .footer-nl__btn, .suggest__quick { transition: none; }
}
/* Round buttons (--radius-button): a button reads its corner from --radius,
   --radius-sm, --radius-lg or --radius-pill depending on its size and
   variant (and some CTAs set one of them themselves), so inside a button all
   four are the button's own; badges, chips and panels keep theirs. */
.button { --radius: var(--radius-button); --radius-sm: var(--radius-button); --radius-lg: var(--radius-button); --radius-pill: var(--radius-button); }
/* A disabled button (Woo holds Create account until the password is strong enough). */
.button:disabled, .button:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--color-ink); color: var(--color-accent-contrast); }
.button--outline:disabled, .button--outline:disabled:hover { background: transparent; color: var(--color-text); }
/* OWNER EXCEPTION (2026-09-08): the one pill button, the zone opener's
   "Enter …" beside the title. Every other button keeps --radius. */
.button--pill { border-radius: var(--radius-pill); padding: 0 1.5em; } /* base IS the darkest step, so hover breathes one step lighter (token: dark zones remap it) */
/* Feedback states (owner: everything ends inside the button, no popups or
   message lines; commerce.js createButtonFeedback). busy = "Adding…"
   (disabled) · added = accent ("View cart" on the PDP, "Added ✓" on the wall
   sheet and the quick-buy panel) · error = red flash with the reason ("Choose
   a size first", "Select sizes first", request failure), auto-resets 2.4s.
   Hover is pinned so the light/outline variants cannot repaint a state. */
.button.is-added, .button.is-added:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.button.is-error, .button.is-error:hover { background: #b3261e; color: var(--color-accent-contrast); }

/* ------------------------------------------------------------------
   BUTTON FAMILY (owner, 2026-10-23; its final form approved 2026-10-24
   on docs/design/button-family.html, moved over area by area from
   docs/design/button-areas.html). One button: a pill, its words and,
   when it has one, its icon after them in the words' own colour. No disc:
   the round disc it began with (Make It Yours) read too much on the
   store's cards ("bütün yuvarlakları kaldırsanız, sadece ikon kalsın ...
   bizim siteye bu yakışır"); the markup keeps the parts, .button__disc
   now the icon's box and .button__glyph the icon's window. Proportions:
   the --button-*-ratio tokens, the icon a whole pixel (13 / 17 / 19 in
   the 34 / 44 / 50 buttons). Colours: black and white only, never the
   panel's accent: one pair, --b-o (the strong one) and --b-u (the
   ground); --light flips it for dark grounds. Fillings: solid and
   --outline; --icon is the icon alone (a circle); --sm / --lg the control
   heights.
   Motion: under the pointer the icon passes, out to the right as its copy
   comes in from the left, inside a window a little wider than the icon so
   nothing is clipped at rest; the words never move or grow. A solid with
   an icon keeps its colour; a solid without one turns over in a plain
   fade; an outline fills with its own colour in a plain fade, its words
   and icon turning over; a press sinks the pill. Timing: --motion-button*.
   A context may set --b-rest (an outline's fill at rest), --b-case and
   --b-tracking (the writing) and --b-align (the words' place) on it.
   MIGRATION SCOPE: the family answers only to a button built from its
   parts (inc/button.php: d0_button_label(), d0_button_disc()), so every
   .button above keeps its look until its area moves over; once all have,
   the scope becomes plain .button and the rules above go.
   ------------------------------------------------------------------ */
.button:has(> .button__label, > .button__disc, > .button__glyph) {
	--b-o: var(--zone-ink);
	--b-u: var(--zone-paper);
	--b-h: var(--control-h);
	--b-icon: round(nearest, calc(round(nearest, calc(var(--b-h) * var(--button-disc-ratio)), 2px) * var(--button-icon-ratio)), 1px); /* a whole pixel, so its edges stay crisp */
	--b-win: calc(var(--b-icon) + 4px); /* the pass's window: 2px of air round the icon */
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center;
	gap: round(nearest, calc(var(--b-h) * var(--button-gap-ratio)), 1px);
	height: var(--b-h); padding: 0 round(nearest, calc(var(--b-h) * var(--button-pad-ratio)), 1px);
	border: 1px solid var(--b-o); border-radius: var(--radius-pill);
	background: var(--b-o); color: var(--b-u);
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium); line-height: var(--lh-body);
	letter-spacing: var(--b-tracking, var(--ls-caps)); text-transform: var(--b-case, uppercase);
	white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: background-color var(--motion-button-pass), color var(--motion-button-pass), border-color var(--motion-button-pass), scale var(--motion-button-scale), translate var(--motion-button-scale);
}
.button:has(> .button__label, > .button__disc, > .button__glyph).button--light { --b-o: var(--zone-paper); --b-u: var(--zone-ink); }
.button:has(> .button__label, > .button__disc, > .button__glyph).button--sm { --b-h: var(--control-h-sm); font-size: var(--text-sm); }
.button:has(> .button__label, > .button__disc, > .button__glyph).button--lg { --b-h: var(--control-h-lg); font-size: var(--text-base); }
.button:has(> .button__label, > .button__disc, > .button__glyph):focus-visible { outline: 2px solid var(--b-o); outline-offset: 3px; }
/* The words: trimmed to their capitals so the pill centres the letters,
   centred in the room left of the icon (a full-width button keeps its icon
   at the end). */
.button__label { flex: 1 1 auto; min-width: 0; display: grid; justify-items: var(--b-align, center); overflow: hidden; padding-block: 0.4em; margin-block: -0.4em; }
.button__label > span { text-box: trim-both cap alphabetic; }
/* The icon's box and its window (as wide as the icon, 2px of air round
   it): the helpers print the icon twice, the copy waiting one window to
   the left. */
.button__disc { flex: none; display: grid; color: inherit; }
.button__glyph { grid-area: 1 / 1; display: grid; place-items: center; width: var(--b-win); height: var(--b-win); margin: calc((var(--b-icon) - var(--b-win)) / 2); overflow: hidden; }
.button__glyph > .icon { grid-area: 1 / 1; width: var(--b-icon); height: var(--b-icon); transition: translate var(--motion-button-pass), opacity var(--motion-button-pass); }
.button__glyph > .icon + .icon { translate: calc(-1 * var(--b-win)) 0; opacity: 0; }
/* Outline: the ring, the words and the icon in the strong colour; under
   them the same colour waits, faded out. */
.button:has(> .button__label, > .button__disc, > .button__glyph).button--outline { background: var(--b-rest, transparent); color: var(--b-o); }
.button:has(> .button__label, > .button__disc, > .button__glyph).button--outline::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--b-o); opacity: 0; transition: opacity var(--motion-button-pass); }
/* Over (the pointer or keyboard focus) and the press. */
.button:is(:hover, :focus-visible, :active) .button__glyph > .icon:first-child { translate: var(--b-win) 0; opacity: 0; }
.button:is(:hover, :focus-visible, :active) .button__glyph > .icon + .icon { translate: 0 0; opacity: 1; }
.button:has(> .button__label, > .button__disc, > .button__glyph):not(.button--outline, .button--icon):not(:has(> .button__disc)):is(:hover, :focus-visible) { background: var(--b-u); color: var(--b-o); } /* a solid without an icon turns over */
.button:has(> .button__label, > .button__disc, > .button__glyph).button--outline:is(:hover, :focus-visible) { color: var(--b-u); }
.button:has(> .button__label, > .button__disc, > .button__glyph).button--outline:is(:hover, :focus-visible)::before { opacity: 1; }
.button:has(> .button__label, > .button__disc, > .button__glyph):active { scale: 0.97; translate: 0 1px; }
@media (prefers-reduced-motion: reduce) {
	.button:has(> .button__label, > .button__disc, > .button__glyph), .button::before, .button__glyph > .icon { transition: none; }
	.button__glyph > .icon + .icon { display: none; }
	.button__glyph > .icon:first-child { translate: none !important; opacity: 1 !important; }
	.button:has(> .button__label, > .button__disc, > .button__glyph) { scale: none !important; translate: none !important; }
}

/* ------------------------------------------------------------------
   FORM CONTROLS — one system for every input in the store.
   .input / .select (sizes: --sm 34px, default 44px, --lg 50px),
   .tick (custom checkbox + radio), .stepper (quantity).
   Specialized search inputs (.searchpal__input, .search-sec__input)
   are documented variants; everything else consumes these.
   ------------------------------------------------------------------ */
.input,
.select,
.wcform .input-text,
.wcform select {
	height: var(--control-h);
	padding: 0 0.9em;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-field);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-base);
	transition: border-color var(--motion), box-shadow var(--motion);
}
.input:focus,
.select:focus,
.wcform .input-text:focus,
.wcform select:focus {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent);
}
.input--sm, .select--sm { height: var(--control-h-sm); padding-inline: 0.7em; border-radius: var(--radius-sm); font-size: var(--text-sm); }
/* A select that select.js enhanced hands its classes to its button
   (.dselect__btn), which keeps reading --radius-sm: the picker turns it into
   a pill and fuses it to the quantity, the wall builder sets its own. */
.input--sm, .select--sm:not(.dselect__btn) { border-radius: var(--radius-field-sm); }
.input--lg, .select--lg { height: var(--control-h-lg); }
textarea.input { height: auto; min-height: 6.5rem; padding-block: 0.7em; resize: vertical; }
.select,
.wcform select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b6e73'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 1em;
	text-overflow: ellipsis;
}

/* Custom select dropdown (select.js enhances the option-picker size select).
   Reference-measured "Select2" look: the panel attaches flush under the
   control (its bottom corners flatten while open), no border, deep soft
   shadow, selected/hovered rows filled with ink. The native select stays in
   the DOM visually hidden — forms and screen readers keep working. */
.dselect { position: relative; display: inline-block; max-width: 100%; }
.dselect__native {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	border: 0; clip-path: inset(50%); overflow: hidden;
}
/* Closed control — full reference state matrix:
   default  : borderless chip on --control-bg (reference uses the exact same
              flat #efede7), ink text, ink down-chevron
   hover    : fill darkens to 16% + soft shadow 0 2px 4px @ 8%
   open     : bottom corners flatten (panel attaches), chevron flips up
   disabled : surface fill, muted text, default cursor
   focus    : inherits the .select focus ring (a11y, ours)
   Rides --motion (the reference's own 0.35s curve until 2026-09-15). */
.dselect__btn {
	position: relative; display: block; text-align: left; cursor: pointer;
	border: 0;
	background-color: var(--control-bg);
	background-image: none; /* not the native select's grey chevron (.select): the one below */
	color: var(--color-text);
	transition: background-color var(--motion), box-shadow var(--motion);
}
/* The chevron in the text's own colour (owner, 2026-10-23: on the dark band
   it stayed black, a painted SVG): a mask filled with currentColor, where
   the native select's chevron sat; open, it turns up. */
.dselect__btn::after {
	content: ""; position: absolute; top: 50%; right: 0.6em; width: 1em; height: 1em; translate: 0 -50%;
	background-color: currentColor; pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dselect__btn[aria-expanded="true"]::after { rotate: 180deg; }
.dselect__btn:hover {
	background-color: var(--control-bg-hover);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.dselect__btn:disabled { background-color: var(--color-surface); color: var(--color-text-muted); cursor: default; }
/* The corners on the panel's side flatten; the other two keep the control's
   own radius (s or m), which is why only two corners are written here. */
.dselect__btn[aria-expanded="true"]:not(.dselect__btn--up) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dselect__btn--up[aria-expanded="true"] { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Zero-height stack of every option label: sizes the button to the longest
   one, so it never jumps when the selection changes. */
.dselect__sizer { display: block; height: 0; overflow: hidden; visibility: hidden; }
.dselect__sizer span { display: block; }
.dselect__list {
	position: absolute; top: 100%; left: 0; z-index: 40;
	min-width: 100%; width: max-content; max-height: 16rem; overflow: hidden;
	margin: 0; padding: 0;
	background: var(--color-bg);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	box-shadow: 0 20px 32px -8px rgba(40, 36, 27, 0.2), 0 0 1px rgba(40, 36, 27, 0.05);
}
/* Top layer (Popover API, select.js): the OPEN list escapes every overflow
   clip and transform above it (drawer, quick-buy panel, scroll lists). JS
   pins it flush under the control at the control's exact width (inline
   left/top/width), or above it when the viewport has no room below. The UA
   popover defaults (inset 0, auto margins, border, canvas colours,
   fit-content size) are reset here; z-index is meaningless in the top layer. */
.dselect__list[popover] {
	position: fixed; inset: auto; min-width: 0; height: auto;
	margin: 0; padding: 0; border: 0;
	color: var(--color-text);
}
.dselect__list--up {
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	box-shadow: 0 -20px 32px -8px rgba(40, 36, 27, 0.2), 0 0 1px rgba(40, 36, 27, 0.05);
}
/* Open, the panel is a column whose rows' box scrolls inside its max-height
   under our scrollbar (select.js; owner, 2026-10-31), the panel clipping it
   to its corners. Display only while open: an author display would beat the
   browser's hiding of a closed popover. Two rules, not one list: a browser
   without :popover-open would drop the whole list. */
.dselect__list:popover-open { display: flex; flex-direction: column; }
.dselect__list:not([popover], [hidden]) { display: flex; flex-direction: column; }
.dselect__rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.dselect__option { padding: 6px 10px; font-size: var(--text-sm); cursor: pointer; }
.dselect__option.is-selected,
.dselect__option.is-highlighted { background: var(--control-active); color: var(--color-accent-contrast); }

/* Custom checkbox / radio: label wrapper + appearance-reset input */
.tick { display: inline-flex; align-items: center; gap: 0.55em; font-size: var(--text-sm); cursor: pointer; }
.tick input {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-items: center;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-card);
	background: var(--color-bg);
	cursor: pointer;
	transition: background-color var(--motion), border-color var(--motion);
}
.tick input[type="radio"] { border-radius: 50%; }
.tick input:checked { background: var(--color-ink); border-color: var(--color-ink); }
.tick input[type="checkbox"]:checked::after {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tick input[type="radio"]:checked::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-bg); }
.tick input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 12%, transparent); }
/* Stray native ones (Woo templates etc.) at least pick up the ink accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-ink); }

/* A labelled field: caption (.opt__label) above its control. Used by the
   account forms; the contact form still carries the same shape as
   .contact__field. Controls fill the field's width. */
.field { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
.field > .input, .field > .select { width: 100%; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Woo's script wraps every password input in .password-input and adds an
   empty "show password" button: the wrapper fills the field, the button sits
   inside the control's right end with an eye (Woo's own CSS is not loaded). */
.field > .password-input { position: relative; display: flex; }
.field > .password-input > .input { flex: 1; min-width: 0; padding-right: 2.6em; }
.show-password-input {
	position: absolute; top: 0; right: 0; width: var(--control-h); height: 100%;
	border: 0; background: transparent no-repeat center / 1.15em; cursor: pointer; opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2315140e'%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'/%3E%3C/svg%3E");
}
.show-password-input:hover, .show-password-input:focus-visible { opacity: 1; outline: none; }
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2315140e'%3E%3Cpath d='M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z'/%3E%3C/svg%3E");
}

/* Quantity stepper: soft filled track, tight - / + (same language as the
   blocks cart stepper). Default s (34px); --m for product pages. The - / +
   are the registry's minus / plus icons since the Phosphor move (owner,
   2026-09-25), centred by the button's grid. */
.stepper {
	display: inline-flex;
	align-items: center;
	height: var(--control-h-sm);
	padding: 3px;
	background: var(--control-bg);
	border-radius: var(--radius-sm);
}
.stepper--m { height: var(--control-h); border-radius: var(--radius); }
.stepper__btn {
	display: inline-grid;
	place-items: center;
	width: 1.7rem;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	border-radius: calc(var(--radius-sm) - 2px);
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: 1;
	cursor: pointer;
	transition: color var(--motion);
}
.stepper--m .stepper__btn { width: 2.2rem; }
.stepper__btn:hover { color: var(--color-text); }
.stepper__input {
	width: 2rem;
	border: 0;
	background: none;
	text-align: center;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	-moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus { outline: none; }

/* Inline icon (d0_icon() registry) — sizes to the surrounding text. */
.icon { width: 1em; height: 1em; vertical-align: -0.125em; }
/* A control's label, trimmed to its capitals (owner, 2026-09-25): the box
   ends at the cap height and the baseline, so a centred control centres the
   letters themselves, not the font's box. DM Sans at 15.2px set its caps
   0.48px high in the pills (16px over them, 17px under); trimmed, 0. Any
   font, any size. The label must be its own element (a bare text run is an
   anonymous box the property cannot reach), and a rule for a control's
   OTHER spans (its chevron) must skip it: `> span:not(.label)`. Browsers
   without `text-box` (Firefox, 2026) keep the old half-pixel. Rolled out in
   phases: the hero, the curated cards, then the home's tabs, See all, the
   Enter pills and the wall buttons. */
.label { text-box: trim-both cap alphabetic; }

/* Round arrow button — shared by every horizontal scroller/slider nav
   (hero slider, wall-sheet cross-sell strip). One component, three sizes.
   The ladder is 38 / 44 / 50px: even the small one stays a thumb-sized
   target, which 32px was not. The chevron keeps one size throughout. */
.arrowbtn {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
	font-size: var(--text-base);
}
.arrowbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); } /* the small step is the small control (owner, 2026-09-11: one height scale) */
.arrowbtn--lg { width: var(--control-h-lg); height: var(--control-h-lg); }
/* Floating over imagery (PDP gallery): borderless white circle + soft shadow
   (reference: 0 2px 4px @ 8%). */
.arrowbtn--float { border: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
/* On a band: the shell tone (#FBFAF9), no visible border, no shadow; hover
   inverts to the zone's ink (owner, 2026-09-11 "bir üstteki sistemdeki beyaz
   zeminli gibi"; fixed as the one arrow of the home rows, 2026-09-15). */
.arrowbtn--paper { background: var(--zone-paper); border-color: var(--zone-paper); color: var(--zone-ink); } /* the glyph is ink on the paper button wherever it sits: a dark zone remaps the text colour to paper, which left the chevrons blank */
.arrowbtn--paper:hover { background: var(--zone-ink); border-color: var(--zone-ink); color: var(--zone-paper); }
/* On a dark zone an inked hover would sink into the ground: it warms to sand. */
:is(.zone--ink, .zone--sports, .zone--decor, .zone--dark) .arrowbtn--paper:hover { background: var(--zone-sand); border-color: var(--zone-sand); color: var(--zone-ink); }
.arrowbtn:disabled { color: var(--color-text-muted); cursor: default; }
.arrowbtn:disabled:hover { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); } /* a disabled arrow does not invert: its chevron stays muted on paper */

/* Scrollbar (assets/js/scrollbar.js; owner, 2026-10-23): our own bar on a
   scroll box marked [data-scrollbar]. The box keeps the browser's scrolling
   and loses the system's bar once ours is drawn; ours shows whenever the box
   has more to show, on every device. The box becomes a positioned box (a
   zero-specificity rule, so a component's own position wins) so that a bar
   inside it, a list's in a panel, scrolls along with it. */
:where(.has-scrollbar) { position: relative; }
.has-scrollbar { scrollbar-width: none; }
.has-scrollbar::-webkit-scrollbar { display: none; }
.scrollbar {
	position: absolute; top: 0; left: 0;
	box-sizing: border-box; width: var(--scrollbar-reach); padding: var(--scrollbar-inset);
	opacity: 0; pointer-events: none; touch-action: none;
	color: var(--color-text); /* the thumb's currentColor: the surface's text token, remapped by a band or zone (a dialog's UA colour is plain black) */
	transition: opacity var(--motion-reveal);
}
.scrollbar[hidden] { display: none; }
.scrollbar.is-shown { pointer-events: auto; } /* caught even at rest: a mouse there is over the box, which wakes it */
.scrollbar.is-shown.is-awake { opacity: 1; } /* up while the box moves or the mouse is on it, a moment after, then it fades */
.scrollbar__thumb {
	display: block; width: var(--scrollbar-size); margin-left: auto;
	border-radius: var(--radius-pill); background: var(--scrollbar-thumb);
	transition: width var(--motion), background var(--motion);
}
.scrollbar:hover .scrollbar__thumb, .scrollbar.is-held .scrollbar__thumb { width: var(--scrollbar-size-active); background: var(--scrollbar-thumb-active); }
@media (pointer: coarse) { .scrollbar.is-shown { pointer-events: none; } } /* a finger scrolls the box itself; the bar only says where it is */

/* ==================================================================
   FOOTER (owner, 2026-08-29, reference-shaped) — one dark plate on the shell:
   the pitch and its capture on the left, the map of the site on the right,
   a hairline bottom bar inside the same plate.
   ================================================================== */
/* Full-bleed colour, container-axis content (the standing layout rule): the
   dark runs edge to edge, the text stays on the same axis as everything else. */
.site-footer {
	background: var(--color-ink); color: var(--color-bg);
	font-size: var(--text-sm);
}
.site-footer__box { padding-block: var(--space-6) var(--space-4); }
.site-footer__top {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-6); align-items: start;
}
.site-footer__pitch {
	margin: 0 0 var(--space-4); max-width: 24ch;
	font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold);
	line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
/* Capture: one bar, the arrow sits inside it. */
.footer-nl { position: relative; display: flex; align-items: center; gap: var(--space-2); max-width: 24rem; padding: 4px 4px 4px var(--space-3); background: var(--color-bg); border-radius: var(--radius-field); }
.footer-nl__input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: var(--text-sm); }
.footer-nl__input:focus { outline: none; }
.footer-nl__input::placeholder { color: var(--color-text-muted); }
.footer-nl__btn {
	flex: none; width: var(--control-h-sm); height: var(--control-h-sm); display: grid; place-items: center;
	border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); cursor: pointer;
}
.footer-nl__btn:hover { background: var(--color-accent, #625a41); }
.footer-nl__btn svg { width: 0.9rem; height: 0.9rem; }
.footer-nl__msg { position: absolute; top: calc(100% + 0.4em); left: 0; margin: 0; font-size: var(--text-xs); color: var(--color-bg); }
.footer-nl__msg:empty { display: none; }
.site-footer__legal { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.site-footer__legal a { color: inherit; }

.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.site-footer__heading {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
	color: var(--color-bg);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-footer__list a { text-decoration: none; color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.site-footer__list a:hover { color: var(--color-bg); }

.site-footer__bottom {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
	margin-top: var(--space-6); padding-top: var(--space-4);
	border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
	font-size: var(--text-xs); color: color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.site-footer__copy, .site-footer__pay { margin: 0; }
/* The cards we take at the foot of the page (owner, 2026-11-12), after the
   checkout line; the marks carry their own white card on the ink. */
.site-footer__pay { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__marks { display: flex; align-items: center; gap: var(--space-1); }

@media (max-width: 860px) {
	.site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
	.site-footer__box { padding-block: var(--space-5) var(--space-4); }
}

/* ==================================================================
   WOOCOMMERCE (base; refined page by page)
   ================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}
.woocommerce ul.products li.product { text-align: left; }

/* ==================================================================
   ACCESSIBILITY
   ================================================================== */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ==================================================================
   HEADER BAR + HEADER (reference layout)
   The bar above the menu is the header's own first row, so it moves,
   hides and returns with the sticky header (the old topbar sat above it
   in the flow and the menu jumped as it scrolled away). No strip of its
   own (owner's pick of three, 2026-11-02; an ink strip, centred or with
   the clock in tiles, was left out): the header's ground and words in
   every state, the two facts on its grid (shipping under the mark, the
   sale under the cart), the header's hairline under the row. The menu's
   voice at the badge step: DM Sans in caps, tracked, the clock in tabular
   figures. Relative, so it paints over the stuck header's frost layer.
   ================================================================== */
:root:has(.site-header__bar) { --header-bar-h: 2rem; }
.site-header__bar { position: relative; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-badge); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1; transition: color var(--motion); } /* turns with the menu's words between beige and ink, never snaps (owner, 2026-11-08) */
.site-header__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-bar-h); border-bottom: 1px solid var(--color-hairline); transition: border-color var(--motion-reveal); } /* with the header's own hairline */
.site-header__bar-note { order: -1; margin: 0; }
.site-header__bar .countdown--inline { gap: 0.5em; margin: 0; font-size: inherit; color: inherit; }
.site-header__bar .countdown__time { color: inherit; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.site-header.is-clear .site-header__bar { color: var(--zone-paper); }
.site-header.is-clear .site-header__bar-inner { border-bottom-color: color-mix(in srgb, var(--zone-paper) 18%, transparent); }
.site-header.is-clear.is-ink .site-header__bar { color: var(--color-ink-bar-text); }
.site-header.is-clear.is-ink .site-header__bar-inner { border-bottom-color: var(--color-ink-bar-line); }

.site-header { position: sticky; top: 0; z-index: 50; }
.site-header__inner { justify-content: flex-start; }
.nav-toggle {
	display: none;
	width: 2.75rem; height: 2.75rem;
	border: none; background: none; color: var(--color-text);
	cursor: pointer; border-radius: 50%;
	align-items: center; justify-content: center;
	align-self: center; /* the header row stretches; a fixed-height toggle would pin to the top */
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); }
/* Header icon buttons (reference demo5): 50px round hit area, 21.6px icon;
   hover = soft 12%-gray circle scaling in behind the icon + accent icon. */
.header-actions__btn {
	position: relative;
	display: inline-grid; place-items: center;
	width: var(--control-h-lg); height: var(--control-h-lg);
	padding: 0; border: 0; background: none; cursor: pointer;   /* <a> and <button> render identically */
	border-radius: 50%; color: var(--color-text); text-decoration: none;
	transition: color var(--motion);
}
.header-actions__btn::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	/* Hover step, not the passive fill — the header itself sits on #EFEDE7,
	   so a #EFEDE7 circle would be invisible. */
	background: var(--control-bg-hover); transform: scale(0);
	transition: transform var(--motion);
}
.header-actions__btn:hover,
.cart-link:hover .header-actions__btn { color: var(--color-accent); }
.header-actions__btn:hover::after,
.cart-link:hover .header-actions__btn::after { transform: scale(1); }
.header-actions__btn svg { width: 1.35rem; height: 1.35rem; position: relative; z-index: 1; }

/* Cart: total on the left of the bag (reference), count bubble on the
   holder's top-right corner — 18px accent circle, 10px white numeral. */
.cart-link { display: inline-flex; align-items: center; color: var(--color-text); }
.header-actions .cart-count {
	position: absolute; top: 0; right: 0; z-index: 2;
	min-width: 1.125rem; height: 1.125rem; padding: 0 0.2em;
	font-size: 0.625rem; font-weight: var(--fw-normal); line-height: 1;
}

/* ==================================================================
   CATEGORY CARDS — the picture cards with a title on them: the collection
   doors and the wall cards (template-parts/cards/collection-door.php).
   ================================================================== */
.cat-card {
	position: relative; display: block; aspect-ratio: var(--cat-card-ratio, 3 / 4);
	border-radius: var(--radius-card-lg); overflow: hidden;
	text-decoration: none; color: #fff; background: var(--color-surface);
}
.cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-swap); }
.cat-card:hover .cat-card__img { transform: scale(1.04); }
.cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,20,14,0.6), rgba(0,0,0,0) 55%); }
@media (max-width: 640px) {
	.cat-card__overlay { background: linear-gradient(to top, rgba(21, 20, 14, 0.75), rgba(0, 0, 0, 0) 65%); }
}
/* The cover link fills the card; its words let clicks through to it. */
.cat-card__cover { position: absolute; inset: 0; display: block; }
/* A wall door (collection-door.php with a cover; owner, 2026-10-22: the
   cards are the walls themselves): the cover is the set on its room, the
   builder's stage enlarged and moved so the card shows the window
   d0_wall_card_view() chose (--vx, --vy, --vw, --vh: % of the photo), the
   frames drawn by the builder's own rules. */
.cat-card:has(.ws-view) { container-type: inline-size; aspect-ratio: auto; } /* a Wall Sets card is its own container: the small rules below follow the card's width, not the screen's */
.cat-card:has(.ws-view) .cat-card__cover { position: relative; aspect-ratio: 4 / 3; } /* D0_WALL_CARD_RATIO; the cover gives the card its height, so a phone's card can turn square (a container cannot query its own width) */
.ws-view { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; transition: transform var(--motion-swap); } /* isolate: the frames' own z-index (their hanging order) stays inside the cover; it had lifted them over the title and the line until a hover's scale made the cover a layer (owner, 2026-10-22: "posterler metnin üzerinde görünüyor, mouse'la üzerine gelince düzeliyor") */
.cat-card:hover .ws-view { transform: scale(1.04); }
.ws-view .wb__stage { position: absolute; margin: 0; width: calc(100% * 100 / var(--vw)); left: calc(-100% * var(--vx) / var(--vw)); top: calc(-100% * var(--vy) / var(--vh)); }
/* A small card: the title, the line and the buttons take more of it, so
   the wall gets the small window (--v*-s): smaller, higher; and the words
   take less: the title on one line when it fits (no break before its last
   word), and under 460px the line on one line (the Movies editorial's run
   two lines in capitals and pushed the title into the frames). The wide
   window clears the title only from a 640px card (measured 2026-10-22 on
   the Sports sets: -59px at 463, -11 at 549, 2 at 589, 20 at 644), the
   small one down to 520px. Under that a 4:3 card is too short for the
   words and a tall wall (on a 4:3 room the window is the whole photo, the
   wall cannot go higher): a phone's card is square, its window square
   (--v*-p, 'phone'), and its words keep the phone's padding on a tablet
   too (owner, 2026-10-22: "telefon ve tablet kartlarında da posterleri
   başlığın üstüne çek"; The Family Archive was 39px into its title). */
@container (max-width: 640px) {
	.ws-view .wb__stage { width: calc(100% * 100 / var(--vw-s)); left: calc(-100% * var(--vx-s) / var(--vw-s)); top: calc(-100% * var(--vy-s) / var(--vh-s)); }
}
@container (max-width: 520px) {
	.cat-card:has(.ws-view) .cat-card__cover { aspect-ratio: 1; }
	.ws-view .wb__stage { width: calc(100% * 100 / var(--vw-p)); left: calc(-100% * var(--vx-p) / var(--vw-p)); top: calc(-100% * var(--vy-p) / var(--vh-p)); }
}
.ws-view .wb-frame { cursor: inherit; transition: none; }

/* ==================================================================
   SEARCH — "product finder" ([d0_search] section).
   No panel, no background: a logo-like typewriter headline, a standalone
   full-width input with a soft shadow, and live results in a box ATTACHED
   to the input (small portrait cards). The no-results hint lives inside
   the input box, on the right. The header palette reuses the same engine
   with the compact list rows.
   ================================================================== */
.search-sec__head { margin-bottom: var(--space-4); text-align: center; }
.search-sec__title {
	margin: 0;
	font-size: var(--text-3xl); /* same display size as .section__title (reference heading) */
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}
/* Blinking caret after the typed text */
.search-sec__typer::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 0.08em;
	vertical-align: -0.06em;
	background: var(--color-accent);
	animation: d0-caret-blink 1.1s steps(1) infinite;
}
@keyframes d0-caret-blink { 50% { opacity: 0; } }
/* .search-sec__sub styling lives with .section__sub (shared reference spec). */
.search-sec__box { position: relative; }
.search-sec__icon {
	position: absolute;
	left: 1.4rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	color: var(--color-text-muted);
	font-size: var(--text-lg);   /* .icon sizes to 1em */
	pointer-events: none;
}
.search-sec__input {
	width: 100%;
	height: 4rem;
	padding: 0 11rem 0 3.6rem;   /* right space keeps typed text clear of hint + clear button */
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-lg);
	box-shadow: 0 6px 18px -8px rgba(40, 36, 27, 0.12);
	transition: border-color var(--motion), box-shadow var(--motion), border-radius var(--motion);
}
.search-sec__input:focus {
	outline: none;
	border-color: var(--control-border);
	box-shadow: 0 8px 22px -8px rgba(40, 36, 27, 0.16);
}
/* The native WebKit cancel button lands where the padding starts (far from
   the edge) — hide it; .search-sec__clear at the true right edge replaces it. */
.search-sec__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Right-edge order: … [No results found] [x] */
.search-sec__clear {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}
.search-sec__clear:hover { background: var(--color-surface); color: var(--color-text); }
.search-sec__clear[hidden] { display: none; } /* explicit display would defeat the hidden attr */
.search-sec__hint {
	position: absolute;
	right: 3.4rem;   /* sits BEFORE the clear button */
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	pointer-events: none;
}
/* Phones: the 11rem right padding left ~110px for typing in a 342px input
   (seen in the header palette, 2026-09-06). Room for the clear button only;
   the no-results hint drops UNDER the input instead of vanishing (the filter
   shell hides it, but a silent empty search is worse than one extra line). */
@media (max-width: 640px) {
	.search-sec__input { padding-right: 3rem; }
	.search-sec__hint { position: static; display: block; transform: none; margin: var(--space-2) 0 0 var(--space-3); }
	.search-sec__hint[hidden] { display: none; }
}
/* Results box: attached to the input — square the meeting corners and share
   the side borders so input + panel read as ONE control. */
.search-sec__box:has(~ .search-sec__results:not([hidden])) .search-sec__input {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
/* The results box, attached under the bar (`~`: the no-results hint may sit between). */
.search-sec__results {
	border: 1px solid var(--color-hairline);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--color-bg);
	padding: var(--space-3);
	box-shadow: 0 14px 28px -14px rgba(40, 36, 27, 0.14);
}
/* The finder as a page section (the [d0_search] band; the filter shell renders
   it bare, without .search-sec): the corners are the
   big cards' (--radius-card-lg, the panel's "Card corners"), and the results
   FLOAT under the bar over whatever follows, so typing never moves the page
   (owner, 2026-09-25: "hiçbir kısmı ileri geri kaydırmasın"). In the flow,
   six result cards grew the band by 309px and pushed everything under it. */
.search-sec .search-sec__inner { position: relative; }
.search-sec .search-sec__input { border-radius: var(--radius-card-lg); }
.search-sec .search-sec__results { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); }
@media (max-width: 640px) {
	.search-sec .search-sec__hint { position: absolute; top: 100%; left: 0; z-index: 30; } /* the phone's no-results line hangs under the bar too, rather than adding one */
	.search-sec .search-sec__results > :nth-child(n + 5 of .card) { display: none; } /* four results, two rows: six ran 728px, past the screen (owner, 2026-09-25); `of .card` skips the "Did you mean" line */
}
/* seam="yes" (owner, 2026-09-08): the finder sits at the END of a dark zone
   and its bar hangs half its height (2rem of 4rem) into the next band, so
   the seam runs through the bar. Inside the dark band the bar and its
   results are a LIGHT ISLAND: the colour tokens go back to the paper set,
   while the typewriter title and the sub above the bar stay light. */
/* The bar hangs by a TRANSFORM, not a negative margin: a negative margin
   stretched the band's box under the bar, and once the band carried a
   positioned grain layer that overlap painted over the next band as a
   strip (owner, 2026-09-08). Now the band ends exactly at the bar's
   midline and the bar itself is shifted down half its height. */
.search-sec--seam { position: relative; z-index: 3; }
.search-sec--seam .search-sec__inner { transform: translateY(2rem); }
.search-sec--seam .search-sec__inner { color: var(--color-text); } /* the paper palette itself: see PAPER ISLANDS by the zone rules */
.search-sec--seam .search-sec__title,
.search-sec--seam .search-sec__sub { color: var(--zone-paper); }
.search-sec--seam .search-sec__input { border-color: transparent; box-shadow: 0 18px 40px -18px rgba(21, 20, 14, 0.55); }
/* The seam bar (the home page's, the one finder that floats free of
   everything) is fully round, the pill otherwise kept for badges and
   selectors; its results box detaches (8px gap, all four corners, its own
   top hairline) and keeps the big cards' corner (owner, 2026-09-08 the
   pill, 2026-09-25 kept on the bar only). */
.search-sec--seam .search-sec__input,
.search-sec--seam .search-sec__box:has(~ .search-sec__results:not([hidden])) .search-sec__input { border-radius: var(--radius-pill); }
.search-sec--seam .search-sec__results { margin-top: var(--space-2); border-top: 1px solid var(--color-hairline); border-radius: var(--radius-card-lg); }

.search-sec__results.gallery__grid { gap: var(--space-3); }
.search-sec__results[hidden] { display: none; } /* .gallery__grid's display would defeat the hidden attr */
/* Finder cards are mini: tighten the shared card's text for this context */
.search-sec__results .card__body { padding-top: var(--space-2); }
.search-sec__results .card__title { font-size: var(--text-sm); line-height: var(--lh-heading); }
.search-sec__list { display: flex; flex-direction: column; gap: var(--space-1); }

/* Compact result row (the list layout) */
.search-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
}
.search-row:hover { background: var(--color-surface); }
.search-row__thumb { width: 2.75rem; height: 3.4rem; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); flex: none; }
.search-row__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--text-ui);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.search-row__go { display: inline-grid; place-items: center; color: var(--color-text-muted); }

/* Header search palette (inc/search-palette.php; owner, 2026-11-12: "yuvarlak köşeli olsun ve yeni stilde en gelişmiş
   haliyle", then "A · Command Bar" on docs/design/search-palette.html): a rounded panel under the header in the product
   grid's voice. The worlds as caps words with their counts over the chosen world's compact grid: its search bar and filter
   words on the band's ink, one row of posters on the paper under a head that links to all of them. It drops in and fades
   on the reveal clock; the page under it dims. */
.searchpal {
	--pgrid-search: 4.5rem;
	position: fixed; inset: calc(var(--header-h) + var(--space-3)) auto auto 50%;
	width: min(66rem, calc(100vw - 2 * var(--container-pad))); max-width: none; max-height: calc(100dvh - var(--header-h) - 2 * var(--space-3));
	margin: 0; padding: 0; border: 0; border-radius: var(--radius-card-lg); overflow: hidden;
	background: var(--color-bg); color: var(--color-text); box-shadow: var(--drawer-shadow);
	opacity: 0; translate: -50% calc(-1 * var(--space-2));
	transition: opacity var(--motion-reveal), translate var(--motion-reveal), overlay var(--motion-reveal) allow-discrete, display var(--motion-reveal) allow-discrete;
}
.searchpal[open] { display: flex; flex-direction: column; opacity: 1; translate: -50% 0; }
@starting-style { .searchpal[open] { opacity: 0; translate: -50% calc(-1 * var(--space-2)); } }
.searchpal::backdrop {
	background: rgba(0, 0, 0, 0);
	transition: background var(--motion-reveal), overlay var(--motion-reveal) allow-discrete, display var(--motion-reveal) allow-discrete;
}
.searchpal[open]::backdrop { background: rgba(21, 20, 14, 0.4); }
@starting-style { .searchpal[open]::backdrop { background: rgba(0, 0, 0, 0); } }
/* The worlds: the grid's filter words, a slanted stroke between them, the chosen one underlined; the close at the end. */
.searchpal__top { --pgrid-rule: color-mix(in srgb, var(--zone-paper) 22%, transparent); flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--container-pad) 0; background: var(--zone-ink); color: var(--zone-paper); }
.searchpal__worlds { display: flex; align-items: center; flex: 1; min-width: 0; height: 3.25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.searchpal__worlds::-webkit-scrollbar { display: none; }
.searchpal__world[aria-pressed="true"] { text-decoration: underline 2px currentColor; text-underline-offset: 0.3em; }
.searchpal__count { color: color-mix(in srgb, var(--zone-paper) 55%, transparent); font-size: var(--text-xs); letter-spacing: 0; }
.searchpal[aria-busy="true"] .searchpal__worlds { cursor: progress; }
.searchpal__close { flex: none; display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; border: 0; border-radius: var(--radius-button); background: color-mix(in srgb, var(--zone-paper) 12%, var(--zone-ink)); color: var(--zone-paper); cursor: pointer; transition: background-color var(--motion); }
.searchpal__close:hover { background: color-mix(in srgb, var(--zone-paper) 22%, var(--zone-ink)); }
.searchpal__close:focus-visible { outline: 2px solid var(--zone-paper); outline-offset: 2px; }
/* The chosen world's grid scrolls under the worlds; the page under the dialog cannot. */
.searchpal__boxes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.searchpal__box[hidden] { display: none; }
.searchpal__box .pgrid__band, .searchpal__box .pgrid__bar { border-top: 1px solid var(--pgrid-rule); }
/* The worlds' doors under All's row, while nothing is searched or ticked (product-grid.js .is-narrowed). */
.searchpal__doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-bottom: var(--space-5); }
.searchpal__box .pgrid.is-narrowed ~ .searchpal__doors { display: none; }
.searchpal__door { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-card-half); color: var(--zone-paper); text-decoration: none; }
.searchpal__door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale var(--motion-swap); }
.searchpal__door:hover img { scale: 1.04; }
.searchpal__door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--zone-ink) 70%, transparent), transparent 60%); }
.searchpal__door-words { position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); }
.searchpal__door-words small { font-size: var(--text-xs); font-weight: var(--fw-medium); opacity: 0.8; }
@media (max-width: 640px) {
	.searchpal { inset: calc(var(--header-h) + var(--space-2)) auto auto 50%; width: calc(100vw - 2 * var(--space-2)); max-height: calc(100dvh - var(--header-h) - 2 * var(--space-2)); }
	.searchpal__doors { grid-template-columns: minmax(0, 1fr); }
}
/* "Did you mean" line (JS: buildSuggestionLine; PHP: search-page.php). Sits
   first INSIDE the live results box, spanning the card grid, and under the
   results-page title. */
.search-suggest { grid-column: 1 / -1; margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.search-suggest__link { color: var(--color-text); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 0.15em; }
.search-suggest__link:hover { color: var(--color-accent); }
/* The other worlds' line (inc/search-elsewhere.php) closes the box when the scope's own cards lead it: the grid's gap is its space. */
.search-sec__results > .search-suggest:last-child { margin-bottom: 0; }
/* The results page's notice over the posters (template-parts/search-notice.php;
   owner, 2026-10-31, option B): a soft plate on the surface step with the
   Card corners, the search icon in a paper disc, the miss as a small display
   title, the worlds as links under it; "Also in" takes the slim plate. */
.search-notice { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card-lg); background: var(--color-surface); color: var(--color-text); }
.search-notice__icon { display: grid; place-items: center; flex: none; width: var(--control-h); height: var(--control-h); border-radius: 50%; background: var(--color-bg); font-size: var(--text-md); }
.search-notice__words { min-width: 0; }
.search-notice__title { margin: 0; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.search-notice__sub { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.search-notice__link { color: var(--color-text); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--motion); }
.search-notice__link:hover { color: var(--color-accent); }
.search-notice--slim { padding-block: var(--space-2); }
.search-notice--slim .search-notice__icon { width: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--text-ui); }
@media (max-width: 640px) {
	.search-notice { padding-inline: var(--space-3); }
	.search-notice:not(.search-notice--slim) { align-items: flex-start; padding-block: var(--space-3); } /* two lines that wrap: the disc stays on the first */
}

/* ==================================================================
   BUTTONS ON PICTURES AND INK
   ================================================================== */
.button--light { background: #fff; color: var(--color-ink); border-color: #fff; }
.button--light:hover { background: transparent; color: #fff; } /* inverts on its ink band (INTERACTION MOTION) */
/* On a photo, hollow: no fill, a 1px ring in the text colour, the label in
   caps; hover fills the shell tone with ink text. The arrow's `.arrowbtn--
   ghost` in button form (the curated cards' "Buy all 3", owner 2026-09-15:
   "kartlardaki tüm butonlar içi boş, ok butonu gibi, metin büyük"). */
.button--ghost { background: transparent; color: inherit; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: var(--ls-caps); }
.button--ghost:hover { background: var(--zone-paper); color: var(--zone-ink); border-color: var(--zone-paper); }

/* ==================================================================
   PRODUCT GRID + CARD (hover swap)
   ================================================================== */
.gallery__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--space-5) var(--space-4); }
/* --card-radius: the picture box's corner, which the phone's Quick buy
   square repeats on its own outer corner. The `full` card IS the framed
   poster, so it keeps the imagery corner: a round one would cut the frame. */
.card { display: flex; flex-direction: column; --card-radius: var(--radius-card-lg); }
.card--full { --card-radius: var(--radius-card); }
.card__media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--card-radius); overflow: hidden; background: var(--color-surface); }
.card--portrait .card__media,
.pdp-related .card__media { aspect-ratio: 3 / 4; } /* vertical poster crop (orientation="portrait"; the PDP related row is always portrait — owner, 2026-09-01) */
/* The picture and everything that rides it. On a normal card it IS the media
   box; on a frame card it shrinks to the poster (below), which is why the
   badge and the Quick buy button live inside it. */
.card__poster { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__img--primary { transition: opacity var(--motion-swap), transform var(--motion-swap); }
.card__img.is-loading { opacity: 0; } /* main.js initImageFade: a picture eases in once it has arrived */
/* The hover is the picture itself, a little closer (owner, 2026-10-23:
   "ana fotoğraf biraz daha zoom'lu olsun, başka bir görsel göstermeyelim"):
   every card, every section, the same. The second picture each section
   chose differently (a room scene here, another mockup there) is gone, and
   with it its download. Its zoom rides --motion-swap, as the category and
   art cards' do; the price -> Add to cart slide and the Quick buy overlay
   answer on --motion-reveal in the same beat. */
/* Frame-tight card (opt-in: media="frame"), the same measured crop the reel
   cards use — every studio mockup carries the framed poster at one centred
   rect of its 2000x2000 canvas, so 201.82% + centring drops the photographed
   wall.
   The card KEEPS its fixed 3/4 box (owner, 2026-09-09: "urun kartlarini eskisi
   gibi sabit bir orana getirelim") — letting the crop set the card's ratio made
   the box 1.424:1 tall AND blew the poster up to the full card width, which
   broke the grid's hierarchy. The box goes back to 3/4 with the card's ground
   under it, and the cropped poster hangs INSIDE it with the poster shadow: a
   hidden card with the real card in it. `overflow: visible` so that shadow is
   never clipped by the invisible box. */
.card--frame .card__media { border-radius: 0; background: var(--card-ground, var(--color-surface)); overflow: visible; }
.card--frame .card__poster {
	inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: var(--card-poster-w); height: auto; aspect-ratio: var(--poster-ratio);
	box-shadow: var(--shadow-poster);
}
/* The three displays (owner, 2026-09-11; inc/product-card.php): `standard`
   is the plain card above. `full` is the crop FILLING the media box: no
   hidden card, the box takes the poster's own ratio, the poster edge to
   edge with the poster shadow on the box and the imagery corners (the
   orientation prop has no say here). `crop` is the crop on the plate (the
   colour comes in as --card-ground, or the surface fallback) with the
   standard corners on the plate and the Quick buy button on the PLATE (the
   template puts it beside the poster). A SQUARE crop box keeps the poster's
   share of the height that the 3/4 box gives it (84%), so the poster
   shrinks to 59% of the box width. */
.card--full .card__media { aspect-ratio: var(--poster-ratio); border-radius: var(--card-radius); background: transparent; box-shadow: var(--shadow-poster); overflow: hidden; }
.card--full .card__poster { inset: 0; top: 0; left: 0; transform: none; width: auto; height: auto; aspect-ratio: auto; box-shadow: none; }
.card--crop .card__media { border-radius: var(--card-radius); }
.card--square.card--crop .card__poster { width: calc(var(--card-poster-w) * 0.75); }
.card--frame .card__img--primary {
	inset: auto; top: 50%; left: 50%;
	width: var(--poster-crop-w); height: auto; max-width: none;
	transform: translate(-50%, -50%);
}
@media (hover: hover) {
	.card:hover .card__img--primary { transform: scale(1.05); }
	.card--frame:hover .card__img--primary { transform: translate(-50%, -50%) scale(1.05); } /* the crop keeps its centring */
}
/* FRAME SCENE (inc/frame-scene.php; owner, 2026-10-26: "ana mockup görseline
   arkaplanı dahil en benzerini kodla", then "PDP sayfasına da işle"): the
   flat print in the wall builder's moulding (the same 9-slice art,
   assets/img/frames/) hung on the main mockup's studio wall. The framed
   card, the product page's first slide, its thumbnail and its full-screen
   view. Everything is fitted on mockup-1 at 2000px, where the canvas is the
   scene's height (--box-h, a size container, so a 3:4 card and a square
   slide read the same numbers):
   - the frame is 70.65% of the scene tall (1413 of 2000) and centred, at
     most --card-poster-w wide, the print at the site's framed shape (--r,
     from --frame-print-ratio: 7:10 since 2026-10-28, the print cropped to
     it); the moulding is 1.225% of the scene (24.5px);
   - the wall is lit from the right with a shade from the top;
   - the frame's shadow falls left and a little down (one layer, fitted to
     2.9% rms of the wall's light); the top and right edges throw a shade
     onto the print, which takes 91% of its light on the left, 95% on the
     right; no glass sheen (the studio shot has none);
   - the right moulding catches the light (lum 50 against 22 elsewhere);
   - unframed (mockup-5): the paper alone, the frame's size, a tight
     left-cast shadow (the wall keeps 93% of its light at the edge, all of
     it 20px out).
   The selectors carry .fscene twice so they outrank the card's own
   .card--frame rules, which the card's elements keep for the rest. */
.fscene {
	--box-h: 100cqh;
	position: relative; container-type: size; overflow: hidden; /* the shadow ends at the wall's edge */
	background: var(--mock-wall);
}
.fscene .fscene__frame {
	--r: var(--frame-print-ratio);
	--mould: calc(0.01225 * var(--box-h));
	--frame-face: var(--frame-black-face);
	--frame-lip: var(--frame-black-lip);
	position: absolute; inset: 50% auto auto 50%;
	width: calc(min(var(--card-poster-w) - 2 * var(--mould), (0.7065 * var(--box-h) - 2 * var(--mould)) * var(--r)) + 2 * var(--mould));
	height: auto; aspect-ratio: auto; padding: var(--mould); overflow: hidden; border-radius: 0;
	border-image: url(../img/frames/frame-black.webp) 128 / var(--mould) stretch;
	background: linear-gradient(var(--frame-lip), var(--frame-lip)) content-box, var(--frame-face); /* under the 9-slice: its seams and the hairline beside the print */
	transform: none; translate: -50% -50%; /* the centring as `translate`, which applies before `scale`: under transform the hover grew the frame from its bottom-right corner (owner, 2026-10-26) */
	box-shadow: calc(-0.0445 * var(--box-h)) calc(0.01 * var(--box-h)) calc(0.036 * var(--box-h)) calc(-0.01 * var(--box-h)) color-mix(in srgb, var(--mock-shadow) 57%, transparent);
	transition: scale var(--motion-swap);
}
.fscene .fscene__frame[data-frame="white"] { border-image-source: url(../img/frames/frame-white.webp); --frame-face: var(--frame-white-face); --frame-lip: var(--frame-white-lip); }
.fscene .fscene__frame[data-frame="natural"] { border-image-source: url(../img/frames/frame-natural.webp); --frame-face: var(--frame-natural-face); --frame-lip: var(--frame-natural-lip); }
.fscene .fscene__frame[data-frame="dark"] { border-image-source: url(../img/frames/frame-dark.webp); --frame-face: var(--frame-dark-face); --frame-lip: var(--frame-dark-lip); }
.fscene .fscene__frame[data-frame="unframed"] {
	--mould: 0px;
	border-image: none; background: none;
	box-shadow: calc(-0.004 * var(--box-h)) calc(0.002 * var(--box-h)) calc(0.01 * var(--box-h)) color-mix(in srgb, var(--mock-shadow) 30%, transparent), 0 0 0 0.5px rgb(0 0 0 / 0.08);
}
.fscene .fscene__frame::before {
	content: ""; position: absolute; inset: 0 0 0 auto; width: var(--mould); pointer-events: none;
	background: rgb(255 255 255 / 0.1);
	clip-path: polygon(0 var(--mould), 100% 0, 100% 100%, 0 calc(100% - var(--mould))); /* mitred like the moulding */
}
.fscene .fscene__frame[data-frame="unframed"]::before { content: none; }
.fscene .fscene__window { position: relative; display: block; }
.fscene .fscene__print { position: static; inset: auto; display: block; width: 100%; height: auto; max-width: none; aspect-ratio: var(--r); object-fit: cover; transform: none; border-radius: 0; }
/* The light on the print, the shade the top and right mouldings throw onto it, and the rabbet's line. */
.fscene .fscene__window::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.05));
	box-shadow: inset calc(-0.006 * var(--box-h)) calc(0.004 * var(--box-h)) calc(0.008 * var(--box-h)) color-mix(in srgb, var(--mock-shadow) 55%, transparent), inset 0 0 2px 0.5px rgb(0 0 0 / 0.35);
}
.fscene .fscene__frame[data-frame="unframed"] .fscene__window::after { box-shadow: none; } /* no moulding to throw a shade */
/* `framed` card: the scene fills the media box; the chip and the touch Quick buy ride the box over it. */
.card__media > .fscene { position: absolute; inset: 0; border-radius: inherit; }
.card--framed .card__media { border-radius: var(--card-radius); } /* the panel's Card corners (--radius-card-lg), over the hidden-card frame's square box (.card--frame) */
/* `flat`: the print in its frame alone (owner, 2026-11-08: "yeni stil sadece
   çerçeve", then "gölgesiz, düz"): no wall and no shadow on the ground, the
   moulding drawn at 2px so it still reads as a frame this small, the frame
   as tall as the box (--flat-fill of it). Complete the Look's cards and the
   cart drawer's lines. The unframed paper keeps its mould at 0 and a
   hairline edge, so a pale print still has one. */
.fscene.fscene--flat { background: none; }
.fscene--flat.fscene .fscene__frame { --mould: 2px; width: min(100cqw, calc((var(--flat-fill, 1) * var(--box-h) - 2 * var(--mould)) * var(--r) + 2 * var(--mould))); } /* as tall as its box, and never wider: a square or wide print (its own --r) fits the box's width */
.fscene--flat.fscene .fscene__frame[data-frame] { box-shadow: none; }
.fscene--flat.fscene .fscene__frame[data-frame="unframed"] { --mould: 0px; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08); }
@media (hover: hover) {
	.card--framed:hover .card__img--primary { transform: none; }
	.card--framed:hover .fscene__frame { scale: 1.05; } /* the whole frame comes closer, the print never slides inside it */
}
/* Badge (reference-measured): 12px/500 uppercase on the accent, 24px tall,
   10.4px side padding, --space-3 in from the box's corner (owner). */
.card__badge {
	position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
	display: inline-flex; align-items: center; height: 1.5rem;
	background: var(--color-accent); color: var(--color-accent-contrast);
	font-size: var(--text-badge); font-weight: var(--fw-medium);
	text-transform: uppercase; line-height: var(--lh-body);
	padding: 0 0.65rem; border-radius: var(--radius-card-lg); /* the card's corner, which the chip's height caps into round ends (owner, 2026-09-25) */
}
/* Card meta typography — matched to the Stockie demo5 "Most popular products"
   cards: muted regular category, quiet regular ink title, semibold ink price
   (old price = gray strike). All 0.95rem; line-height 1.6 sets the rhythm. */
.card__body { display: flex; flex-direction: column; gap: 0; padding-top: var(--space-3); }
/* Card text stack (reference-measured): plain-case category in the body ink,
   DM Sans medium title, semibold price — line-heights carry the rhythm,
   no margins between the three. Sale writing = shared del/ins block. */
.card__cat { font-size: var(--text-ui); line-height: var(--lh-body); color: var(--color-text); text-decoration: none; transition: color var(--motion); }
.card__cat:hover { color: var(--color-accent); }
.card__title { margin: 0; font-size: var(--text-card-title); font-weight: var(--fw-medium); line-height: var(--lh-body); letter-spacing: var(--ls-tight); }
.card__title a { text-decoration: none; transition: color var(--motion); }
.card__title a:hover { color: var(--color-accent); }
.card__price { font-size: var(--text-card-price); font-weight: var(--fw-semibold); line-height: var(--lh-body); }
/* The price stays put on hover: the CHOOSE OPTIONS line that took its place
   (2026-10-24) gave way to the notch below (owner, 2026-11-08). */
.card__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-2); } /* wraps: the rating takes its own line under the price (owner, 2026-09-11) */

/* The notch (owner, 2026-11-08, "B, Notch" on docs/design/card-disc.html,
   over the CHOOSE OPTIONS line: "çok belirgin olmuyor"): on a pointer,
   hovering the card cuts the picture's bottom-right corner away in the
   ground the card stands on (--color-bg, which every zone sets; a full
   plate's own colour), a quarter round 6px clear of a 44px disc that holds
   the Bold plus, with 10px fillets where the cut meets the picture's edges,
   so the picture seems to wrap the button. The cut grows out of the corner
   with the zoom; hovering the button fills the disc ink. Touch screens
   never see it: they keep the round plus beside the words (.card__plus). */
.card__notch { display: none; }
@media (hover: hover) {
	.card__notch {
		--notch-ground: var(--color-bg); --notch-disc: var(--control-h); --notch-gap: 6px; --notch-fillet: 10px;
		position: absolute; right: 0; bottom: 0; z-index: 3;
		display: grid; place-items: center;
		width: calc(var(--notch-disc) + 2 * var(--notch-gap)); height: calc(var(--notch-disc) + 2 * var(--notch-gap));
		padding: 0; border: 0; border-radius: 50% 0 0 0;
		background: var(--notch-ground); color: var(--color-ink); cursor: pointer;
		scale: 0; transform-origin: 100% 100%; transition: scale var(--motion-reveal);
	}
	.card__notch::before,
	.card__notch::after {
		content: ""; position: absolute; width: var(--notch-fillet); height: var(--notch-fillet); pointer-events: none;
		background: radial-gradient(circle at 0 0, transparent calc(var(--notch-fillet) - 0.5px), var(--notch-ground) var(--notch-fillet));
	}
	.card__notch::before { right: 0; bottom: 100%; } /* where the cut meets the right edge */
	.card__notch::after { right: 100%; bottom: 0; }  /* where it meets the bottom edge */
	.card:is(:hover, :focus-within) .card__notch { scale: 1; }
	.card__notch-disc { display: grid; place-items: center; width: var(--notch-disc); height: var(--notch-disc); border-radius: 50%; transition: background-color var(--motion), color var(--motion), scale var(--motion); }
	.card__notch-disc .icon { width: 1.1rem; height: 1.1rem; }
	.card__notch:hover .card__notch-disc { background: var(--color-ink); color: var(--notch-ground); } /* controls invert ink and paper */
	.card__notch:active .card__notch-disc { scale: 0.98; }
	.card__notch:focus-visible { outline: none; }
	.card__notch:focus-visible .card__notch-disc { outline: 2px solid var(--color-ink); outline-offset: 2px; }
	.card--compact .card__notch { --notch-disc: var(--control-h-sm); --notch-gap: 5px; --notch-fillet: 8px; }
	.card--plate-full .card__notch { --notch-ground: var(--card-ground, var(--color-surface)); }
}

/* Rating row (show_rating): five small stars, filled ones in the text ink,
   empty ones faint, and the review count; only rendered when the product
   has reviews. */
.card__rating { display: flex; align-items: center; gap: 0.35em; flex: 1 0 100%; font-size: var(--text-xs); line-height: var(--lh-body); color: var(--color-text-muted); } /* its own line, left, under the price (owner, 2026-09-11; was right of it) */
.card__stars { display: inline-flex; gap: 1px; color: var(--color-text); }
.card__star { display: inline-flex; }
.card__star .icon { width: 0.9em; height: 0.9em; opacity: 0.35; }
.card__star.is-filled .icon { opacity: 1; } /* the filled glyph comes from the template (star-fill) */
/* The card's CHROME does not follow the zone (owner, 2026-09-08: "metin
   renkleri disinda quick buy butonlari orijinalle ayni"): the badge is
   always the accent. Only the card's text takes the band's colours. */
.card__badge { background: var(--brand-accent); color: #ffffff; }

/* Compact card (owner, 2026-09-08: "daha küçük kart, daha fazla ürün"): the
   SAME markup one size down, for 6-8 column grids and the tabbed grid.
   Modifier on the one card, never a second card file (PRD v2 §5.5). */
.card--compact .card__body { padding-top: var(--space-2); }
.card--compact .card__cat { font-size: var(--text-xs); }
.card--compact .card__title { font-size: var(--text-sm); line-height: var(--lh-snug); }
.card--compact .card__price { font-size: var(--text-sm); line-height: var(--lh-snug); }
.card--compact .card__badge { top: var(--space-2); left: var(--space-2); height: 1.25rem; padding: 0 0.5rem; font-size: 0.6875rem; }
.gallery--compact .gallery__grid { gap: var(--space-4) var(--space-3); }

/* ==================================================================
   GRID TABS ([d0_product_tabs]) — one compact grid, several sources: a
   row of tabs above the cards switches the panel (owner, 2026-09-08:
   "üstünde menü, tıklanınca kartlar değişir"). Tabs wear the chip look
   (flat ladder fills), the active one takes --control-active. The panel
   rule below exists because .gallery__grid's display:grid would otherwise
   defeat the hidden attribute (author styles beat the UA sheet).
   ================================================================== */
.gtabs__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
/* ONE line of tabs at every width (owner, 2026-09-25: at 1024 the six Movies
   tabs wrapped onto a second line; "mobil moddaki gibi"): the row scrolls
   sideways and fades at its right edge, a hint that it goes on (the phone's
   rule since 2026-09-16). The row ends in a blank as wide as the fade, so
   the fade lands on that blank wherever the tabs fit, and on the last tab
   only while there is more to scroll to (at 1200 the six tabs fit with 20px
   to spare, and a bare fade dimmed the last one). */
.gtabs__tabs {
	--tabs-fade: 2.5rem;
	display: flex; flex: 1 1 auto; min-width: 0; max-width: 100%; gap: var(--space-2);
	padding-inline-end: var(--tabs-fade);
	overflow-x: auto; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--tabs-fade)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--tabs-fade)), transparent);
}
.gtabs__tabs::-webkit-scrollbar { display: none; }
.gtabs__tab {
	display: inline-flex; align-items: center;
	height: var(--control-h); padding-inline: var(--space-4); /* the button height (owner, 2026-09-11: tabs as tall as buttons) */
	border: 0; border-radius: var(--radius-pill); /* a selector, so the pill radius is within the rules (owner, 2026-09-08) */
	background: var(--control-bg); color: var(--color-ink);
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium);
	white-space: nowrap; /* the row scrolls on phones; a label must not fold inside its pill */
	cursor: pointer; transition: background var(--motion), color var(--motion);
}
.gtabs__tab:hover { background: var(--control-bg-hover); }
.gtabs__tab[aria-selected="true"] { background: var(--control-active); color: var(--color-bg); }
.gtabs [data-gtabs-panel][hidden] { display: none; }
/* The switch (main.js initGridTabs): the stage holds the height; the
   outgoing panel fades out on --motion-swap, the incoming one rises in
   from 10px below on --motion-reveal (owner, 2026-09-16: "güzelce sönüp,
   şap diye gelen"). */
.gtabs [data-gtabs-panel] { transition: opacity var(--motion-reveal), transform var(--motion-reveal); }
.gtabs [data-gtabs-panel].is-leaving { opacity: 0; transition: opacity var(--motion-swap); }
.gtabs [data-gtabs-panel].is-entering { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .gtabs [data-gtabs-panel] { transition: none; } }
/* The band (template-parts/sections/product-tabs-band.php; owner,
   2026-10-28: "arka planı renkli bir bar ... her tab tıklandığında arka
   planı değişen, üstteki ana metni değişen ve alttaki ürünleri değişen";
   then, after the hanging-edit v2 "What's your thing?" block: no gradient,
   "blok şeklinde renk üstüne tablarımızı koyalım, posterler sitenin kendi
   zemininde olsun"). A flat block on a pastel of the open tab's poster
   tone (--band-tone-share of it in the paper), meeting the hero on a
   straight edge: the tab's title left and its world's count right, a
   hairline from edge to edge (owner, 2026-10-28: "soldan ve sağdan
   kesiliyor; tam olsun"), then the tabs, the open one's word underlined,
   with See All and the arrows across from them. The cards below sit on
   the beige of the zone that follows (--zone-movies), one ground. A tab
   eases the block to its tone and swaps the title and the count
   (gtabs-band.js). */
.gtabs__block { overflow-x: clip; padding-top: var(--space-6); background-color: color-mix(in oklab, var(--band-tone) var(--band-tone-share), var(--zone-paper)); transition: background-color var(--motion-stage); }
.gtabs__lead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); padding-bottom: var(--space-6); } /* as much under the count as over the title (the block's padding-top; owner, 2026-10-29: "üstündeki ve altındaki boşluk eşit değil"): 70 and 67px to the glyphs at 1024 */
.gtabs__title { max-width: 16ch; margin: 0; text-wrap: balance; font-family: var(--font-display); font-size: var(--text-band-title); font-weight: var(--fw-mega); line-height: var(--lh-hflow); letter-spacing: var(--ls-hflow); color: var(--color-ink); }
.gtabs__figure { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: var(--space-2); margin: 0; text-align: right; }
.gtabs__figure strong { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-hflow); color: var(--color-ink); }
.gtabs__figure span { font-size: var(--text-sm); color: var(--color-text-muted); }
.gtabs__title, .gtabs__figure strong { transition: opacity var(--motion-swap), translate var(--motion-swap); }
:is(.gtabs__title, .gtabs__figure strong).is-swapping { opacity: 0; translate: 0 0.12em; }
/* The tabs (owner, 2026-10-28, a reference: SILKEN / PETAL / HYDRA):
   words, not pills. Caps in the display face, a thin slanted stroke
   between them, the open one's word underlined ("tabların altında çizgi
   olmasın, seçili metnin altı çizilsin"), faintly under the pointer. The
   hairline above them runs the screen's width from the row's top. */
.gtabs--band .gtabs__bar { position: relative; margin-bottom: 0; padding-block: var(--space-2); }
.gtabs--band .gtabs__bar::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; background: color-mix(in srgb, var(--color-ink) 22%, transparent); translate: -50% 0; }
.gtabs--band .gtabs__tabs { gap: 0; align-items: center; }
.gtabs--band .gtabs__tab { height: auto; padding: var(--space-4) 0; border-radius: 0; background: none; color: var(--color-ink); font-size: var(--text-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); text-transform: uppercase; padding-block: var(--space-3); }
.gtabs--band .gtabs__tab { position: relative; }
.gtabs--band .gtabs__tab + .gtabs__tab { padding-left: calc(2 * var(--band-tab-gap) + 1px); }
.gtabs--band .gtabs__tab + .gtabs__tab::before { content: ""; position: absolute; top: 50%; left: var(--band-tab-gap); width: 1px; height: 1.45em; background: color-mix(in srgb, var(--color-ink) 22%, transparent); translate: 0 -50%; rotate: 18deg; } /* about twice the caps tall, as in the reference; it lies in the gap ahead of its word, out of the flow, so every tab stands the same height and the line never takes it */
.gtabs--band .gtabs__tab .label { text-decoration: underline 2px transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--motion); }
.gtabs--band .gtabs__tab:hover { background: none; }
.gtabs--band .gtabs__tab:hover .label { text-decoration-color: color-mix(in srgb, var(--color-ink) 30%, transparent); }
.gtabs--band .gtabs__tab[aria-selected="true"] { background: none; color: var(--color-ink); }
.gtabs--band .gtabs__tab[aria-selected="true"] .label { text-decoration-color: currentColor; }
.gtabs__shelf { padding-top: var(--space-5); }
.gtabs--band { background-color: var(--zone-movies); } /* the cards' ground: the beige of the zone below, so the band runs on into it (owner, 2026-10-28) */
.gtabs__all { display: none; } /* phones only, across from the count */
/* The band's See All and arrows (owner, 2026-10-28): black on the pastel,
   white under the pointer: the paper pill's two states turned over. */
.gtabs--band .gtabs__nav > :is(.arrowbtn, .section__link) { background: var(--zone-ink); border-color: var(--zone-ink); color: var(--zone-paper); }
.gtabs--band .gtabs__nav > :is(.arrowbtn, .section__link):is(:hover, :focus-visible) { background: var(--zone-paper); border-color: var(--zone-paper); color: var(--zone-ink); }
.gtabs--band .gtabs__nav > :not(:first-child) { border-left-color: color-mix(in srgb, var(--zone-paper) 22%, var(--zone-ink)); } /* the segments' seam, light on the black */
/* The buttons keep their size under the pointer (owner, 2026-10-28: "buton
   büyümesin, sadece içindeki ikon büyüsün"): See All's label stays folded
   (it still names the link), and the glyph inside each button grows. */
.gtabs--band .gtabs__nav > .section__link:is(:hover, :focus-visible) { grid-template-columns: auto 0fr; column-gap: 0; }
.gtabs--band .gtabs__nav .icon { transition: scale var(--motion); }
.gtabs--band .gtabs__nav > :is(:hover, :focus-visible) .icon { scale: 1.25; }
@media (prefers-reduced-motion: reduce) { .gtabs__block, .gtabs__title, .gtabs__figure strong { transition: none; } }
@media (max-width: 640px) {
	.gtabs__block { padding-top: var(--space-5); }
	.gtabs__lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3) var(--space-4); padding-bottom: var(--space-5); } /* a phone's even space, a step down */
	.gtabs__figure strong { font-size: var(--text-2xl); } /* the count and its words a size down on a phone (owner, 2026-10-29) */
	.gtabs__figure span { font-size: var(--text-xs); }
	.gtabs__title { grid-column: 1 / -1; }
	.gtabs__all { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-ink); text-decoration: underline 1px; text-underline-offset: 0.35em; }
	.gtabs__figure { align-items: flex-start; text-align: left; }
	.gtabs--band .gtabs__tab { font-size: var(--text-base); }
	.gtabs--band { --band-tab-gap: var(--space-3); }
	.gtabs--band .gtabs__nav { display: none; } /* the arrows stay off (the row swipes) */
	.gtabs--band .gtabs__all { display: none; } /* View All left the count for the tabs' row (owner, 2026-10-30) */
	.gtabs--band .roundnav .roundbtn:not(.roundbtn--words) { display: none; } /* the round row keeps View All alone, across from the tabs */
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 900px) {
	.gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.gallery--compact .gallery__grid { grid-template-columns: repeat(4, 1fr); }
	.gtabs__bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (max-width: 640px) {
	.site-header__bar-inner:has(.countdown) .site-header__bar-note { display: none; } /* a phone's one line: the campaign while it runs, else the shipping */
	.site-header__bar-inner { justify-content: center; } /* the one fact a phone keeps, centred */
	.nav-toggle { display: inline-flex; }
	.site-logo { margin-right: auto; }
	/* .gallery__grid stays at the 900px rule's 2 columns: product cards go
	   2-by-2 on phones instead of a single column */
	.site-footer__top { grid-template-columns: 1fr; gap: var(--space-4); }
	.gallery--compact .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================================================================
   PRODUCT CARD: the image link + the touch screens' round plus. A pointer
   (and the keyboard) opens quick view from the notch in the picture's
   corner (.card__notch, above; owner, 2026-11-08); a touch screen from the
   round plus beside the words. The Quick buy over the picture (2026-09-11,
   on phones a trolley square in the corner) left the card the same day:
   no screen showed it any more.
   ================================================================== */
.card__link { position: absolute; inset: 0; z-index: 1; display: block; }
/* The phones' round plus across from the name and the price (owner,
   2026-10-30, over the corner trolley it replaced: "isim ve fiyatın iki satırını
   karşılayacak ... tam karşı hizasında"; "arka planı zemin renginde,
   border'ı koyu"): the body becomes two columns, the words on the left and
   the plus on the right at the round buttons' height (48px, owner:
   "genel buton yüksekliği ... 48"), held to the top, across from the
   category (owner: "kategori isminin karşısına"). The name keeps to one line so the
   two lines stay two (a long one ends in an ellipsis). The ground's own
   colour inside a dark ring. */
.card__plus { display: none; }
@media (hover: none) { /* every touch screen, phone, tablet or touch desktop (owner, 2026-10-30) */
	.card__body:has(.card__plus) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; }
	.card__body:has(.card__plus) > :not(.card__plus) { grid-column: 1; }
	.card__body:has(.card__plus) .card__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.card__plus {
		grid-column: 2; grid-row: 1 / span 2; align-self: start; /* from the first line, the category's, held to its top (owner: "en üste sabitle, kategori isminin karşısına") */
		display: grid; place-items: center; width: var(--roundbtn-h); height: var(--roundbtn-h); box-sizing: border-box; padding: 0;
		border: 1px solid var(--zone-ink); border-radius: 50%; background: transparent; color: var(--zone-ink); cursor: pointer;
		transition: background-color var(--motion), color var(--motion), scale var(--motion);
	}
	.card__plus .icon { width: 1.1rem; height: 1.1rem; }
	.card__plus:active { scale: 0.94; background: var(--zone-ink); color: var(--zone-paper); }
}

/* ==================================================================
   QUICK VIEW — native <dialog> right-side drawer (PRD v2 §6.1)
   Native ESC / focus-trap / focus-restore / ::backdrop. Enter+exit animate
   via @starting-style + allow-discrete (no JS timing).
   ================================================================== */
body.qv-lock { overflow: clip; } /* clip, not hidden: hidden made the body a scroll box under Lenis's stopped root, and every sticky stage (the home's wall stage) let go behind an open drawer (2026-10-29) */
/* Lenis's own sheet, verbatim (assets/vendor/lenis-1.3.27, smooth-scroll.js): a qv-lock stops it, so .lenis-stopped is the lock's twin */
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
.drawer {
	position: fixed; inset: var(--drawer-gap) var(--drawer-gap) var(--drawer-gap) auto; margin: 0;
	width: min(var(--drawer-w), calc(100vw - 2 * var(--drawer-gap)));
	height: calc(100dvh - 2 * var(--drawer-gap)); max-height: none;
	padding: 0; border: none; border-radius: var(--drawer-radius);
	background: var(--color-bg);
	box-shadow: var(--drawer-shadow);
	overflow-y: auto; overscroll-behavior: contain;
	transform: translateX(calc(100% + var(--drawer-gap)));
	transition: transform var(--motion-reveal), overlay var(--motion-reveal) allow-discrete, display var(--motion-reveal) allow-discrete;
}
.drawer[open] { transform: translateX(0); }
@starting-style { .drawer[open] { transform: translateX(calc(100% + var(--drawer-gap))); } }
.drawer::backdrop {
	background: rgba(0, 0, 0, 0);
	transition: background var(--motion-reveal), overlay var(--motion-reveal) allow-discrete, display var(--motion-reveal) allow-discrete;
}
.drawer[open]::backdrop { background: rgba(21, 20, 14, 0.4); }
@starting-style { .drawer[open]::backdrop { background: rgba(0, 0, 0, 0); } }
.drawer__close {
	position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
	width: var(--control-h); height: var(--control-h); display: grid; place-items: center;
	border: none; border-radius: 50%; background: var(--color-surface); color: var(--color-text);
	cursor: pointer;
}
.drawer__close:hover { background: var(--color-border); }
.drawer__close svg { width: 1.2rem; height: 1.2rem; }
/* In-flow variant: for drawers whose close button lives inside a header row
   (wall sheet) instead of floating over the content. */
.drawer__close--static { position: static; }
.drawer__content { padding: var(--space-5); min-height: 100%; }

/* ==================================================================
   QUICK VIEW — the wall sheet SHELL (head / .wallsheet__items body /
   suggest strip / dark foot), filled by template-parts/quick-view.php
   (owner, 2026-09-05: "same shell as the Buy all sheet"). The AJAX content
   lands in a display:contents wrapper, so head, body, strip and foot are
   the dialog's own flex rows and the quick-buy panel slots in like it
   does in the wall sheet. Feedback lives in the foot button (shared
   .button.is-added / .is-error states); no message line.
   ================================================================== */
.quickview__content { display: contents; }
/* Body = the shell's scroll rule (.wallsheet__items) + vertical rhythm. */
.qv__body { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-4); }
/* The gallery is the shared .pgal (template-parts/gallery.php): rail and
   square stage, not the product page's stage (owner, 2026-11-08: the
   drawer is not the PDP), with the stage's In a Room / To Scale on it
   (.pviews, .pscale: the wall lies over the gallery's box, thumbnails
   included, as on the PDP). No dots; no zoom button, a click on the
   picture still magnifies it in place (gallery.js). */
.qv__stage { position: relative; }
.qv__stage[data-view="scale"] > .pgal { visibility: hidden; } /* kept in the flow: the wall takes the gallery's box */
.qv__stage .pscale { border-radius: var(--radius-card); } /* the stage's own corners */
.quickview .pgal__zoom { display: none; }
/* The drawer's own arrows (owner, 2026-11-08: "bu drawer'a özel ... iki
   kenarına yapışık beyaz zeminli sabit iki yarı yuvarlak ... küçük", then
   a reference: "böyle bir tasarım olsun"): the drawer's white ground
   reaching into the picture from its left and right edges at the middle,
   a tab as deep as it is tall, flat on the edge, its inner end a full
   half circle, the arrow in it; always shown, ink under the pointer like
   the round buttons they replace, muted at either end. None on phones: a
   swipe and the thumbnails move it. */
.quickview .pgal__nav { inset: 50% 0 auto; translate: 0 -50%; justify-content: space-between; gap: 0; pointer-events: none; } /* the row spans the picture; only its two tabs take clicks */
.quickview .pgal__nav .roundbtn { width: 2rem; height: 2rem; background: var(--color-bg); color: var(--color-ink); pointer-events: auto; }
.quickview .pgal__nav [data-pgal-prev] { border-radius: 0 var(--radius-button) var(--radius-button) 0; } /* 999px on a 32px square: the inner end a 16px half circle, flat on the edge */
.quickview .pgal__nav [data-pgal-next] { border-radius: var(--radius-button) 0 0 var(--radius-button); }
.quickview .pgal__nav .roundbtn .icon { width: 1rem; height: 1rem; }
.quickview .pgal__nav .roundbtn:not(:disabled):hover { background: var(--color-ink); color: var(--color-bg); }
.quickview .pgal__nav .roundbtn:disabled:hover { background: var(--color-bg); } /* the gallery's disabled hover paints the zone's paper */
@media (max-width: 640px) {
	.quickview .pgal__nav { display: none; }
}
.qv__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.qv__desc p { margin: 0; }
.qv__desc p + p { margin-top: var(--space-2); }
/* "View full details": right-aligned, no underline, arrow-up-right icon (owner). */
.qv__full {
	display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-end;
	font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text);
	text-decoration: none;
}
.qv__full svg { width: 1em; height: 1em; }
.qv__full:hover { color: var(--color-accent); }
/* The quantity, the picker's last row (owner, 2026-11-08: "Adeti üst kısma
   taşıyalım"): named like its rows, at the tiles' 44px, full round like the
   PDP's (2026-11-02). Digital hides the stepper (one file) and so the row. */
.qv__qty-row:has(> .qv__qty[hidden]) { display: none; }
.qv__qty-row .qv__qty { height: var(--control-h); padding: 4px; border-radius: var(--radius-button); }
.qv__qty-row .qv__qty .stepper__btn { width: calc(var(--control-h) - 8px); border-radius: 50%; transition: background-color var(--motion), color var(--motion); }
.qv__qty-row .qv__qty .stepper__btn:hover { background-color: var(--control-bg-hover); }
/* Phones: the picker's tiles share the drawer's width, each row filled
   (owner, 2026-11-08: "Mobilde seçiciler alanı otomatik doldursun"); the
   size chips in even columns. The PDP keeps its own-width tiles. */
@media (max-width: 640px) {
	.quickview .opt__tiles > .opt__tile, .quickview .opt--tiles .opt__frame { flex: 1 1 0; }
	.quickview .opt__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
}

/* ==================================================================
   SINGLE PRODUCT (two-column: gallery left, summary right)
   ================================================================== */
/* Scoped to div.single (the PDP wrapper) so it never matches WP's
   body.single class. The two-tone bands start flush under the header —
   no spacer, the color change IS the transition (owner mockup). */
/* The product page ends with an explicit spacer like every other section gap
   (owner), so the wrapper adds nothing of its own — otherwise the last block
   carried a spacer PLUS a section's worth of padding. */
div.single { padding-block: 0; }
/* Breadcrumb sits at the top of the summary column (PDP only).
   Reference-measured: 14px links in the body ink, hover accent, the current
   page (trailing text node) muted, small ink chevron separators (delimiter
   filter in inc/woocommerce.php). */
.woocommerce-breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center;
	margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm);
}
.woocommerce-breadcrumb a { text-decoration: none; color: var(--color-text); }
.woocommerce-breadcrumb a:hover { color: var(--color-accent); }
/* The separator keeps the row's own font size: shrinking it to 0.55em made a
   5px chevron once the container was small too (owner). */
.crumb-sep { display: inline-flex; align-items: center; margin: 0 0.5em; color: var(--color-text-muted); }
.crumb-sep svg { width: 1em; height: 1em; display: block; }
/* The PDP's trail stops at the shelf, a step quieter (owner, 2026-11-02,
   PDP PANEL): the H1 under it names the product. */
.single .summary .woocommerce-breadcrumb { margin-bottom: var(--space-3); font-size: var(--text-xs); }
.single .summary .woocommerce-breadcrumb > .crumb:last-child,
.single .summary .woocommerce-breadcrumb > .crumb-sep:nth-last-child(2) { display: none; }

/* Two-tone split: media band | info band meet on the center axis and paint
   edge to edge; each cell caps at half the container so CONTENT stays on
   the container rhythm. Bands stretch to the taller side's height. */
.single div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.single div.product > .pdp-related { grid-column: 1 / -1; }
/* The sections and their spacers sit at the page level, below the
   related row, so they must span both summary columns like the zones. */
.single div.product > .revsec,
.single div.product > .d0-spacer { grid-column: 1 / -1; }
/* Complete the look: small title left, arrows right, an 8-card scroller
   showing 4 per view (shared [data-scroller] arrows, scroll-snap track)
   on the beige shell. The row browses CALM — no hover image crossfade
   (the lifestyle shot's different composition read as the image
   "jumping") and no price->Add-to-cart slide, the price just stays put. */
/* -------------------------------------------------------------------
 * ROW CONTROLS (the reviews rows' arrows) + TERM RAIL — the Movies-page
 * sections. Rows carry no outer spacing; the page gaps come from [d0_spacer].
 * ----------------------------------------------------------------- */
.prow__controls { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; } /* right-hand even in a row with no title (the untitled Wall Sets on Movies, owner 2026-10-21) */
.prow__nav { display: flex; gap: var(--space-2); }
/* Phones: arrows + See all (181px) do not fit beside a title, so the head
   wraps; the controls take the next line, right-aligned. (Edge arrows on
   the cards' middle were tried on 2026-09-16 and put back the same night.) */
@media (max-width: 640px) {
	.prow .section__head { flex-wrap: wrap; }
	.prow__controls { margin-left: auto; }
}
/* Every scroll track drags with the mouse (main.js initDragScroll): the
   open hand on hover-capable pointers, the closed one while pulling, and no
   text selection or link hover under a pull. */
@media (hover: hover) and (pointer: fine) {
	[data-scroll-track] { cursor: grab; }
	.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }
	.is-dragging a, .is-dragging .card__notch { pointer-events: none; }
}

/* COLLECTION DOOR (template-parts/cards/collection-door.php; owner,
   2026-10-28, after the plain hero's doors: "daha sade ama daha şık", the
   icons only under the pointer): the photo bare (no shade over it, owner,
   2026-10-29), the name in capitals and the count
   along the top, the line large at the foot with the arrow. Under the
   pointer the photo leans in, the arrow leans out and a Wall Set's two
   actions rise in beside it as icons (always shown where nothing hovers). */
.cat-card--door { container-type: inline-size; color: var(--zone-paper); } /* the words size to the door, not the screen */
.cat-card--door .cat-card__overlay { display: none; } /* no shade over the photo (owner, 2026-10-29: "kartlar üzerindeki gölgeyi kaldır") */
/* A Wall Set's door: where its tall window draws back past the room's height
   (inc/wall-cards.php 'tall'), the stage stands at the top and the room
   itself, blurred, fills the card under it, behind the words. */
.cat-card--door .ws-view { background: var(--ws-room) center bottom / cover no-repeat; }
.cat-card--door .ws-view::before { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.cat-card--door .wb__stage { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-6)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-6)), transparent); } /* the room's foot melts into its blur, no seam (a stage taller than the card hides the fade below the edge) */
.cat-card__top, .cat-card__bottom { position: absolute; left: var(--space-4); right: var(--space-4); z-index: 1; display: flex; justify-content: space-between; gap: var(--space-3); pointer-events: none; }
.cat-card__top { top: var(--space-4); align-items: flex-start; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-medium); line-height: var(--lh-title); }
.cat-card__top b { min-width: 0; font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; } /* a long name takes a second line on a narrow door, never an ellipsis */
.cat-card__top span { flex: none; margin-left: auto; white-space: nowrap; }
.cat-card__bottom { bottom: var(--space-4); align-items: flex-end; }
.cat-card__words { max-width: 14ch; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-tight); text-wrap: balance; }
.cat-card__end { display: flex; flex: none; align-items: center; gap: var(--space-2); font-size: var(--text-2xl); }
.cat-card__end > .icon { transition: transform var(--motion); }
.cat-card--door:hover .cat-card__end > .icon { transform: translate(2px, -2px); }
.cat-card__end { position: relative; }
@container (max-width: 20rem) {
	.cat-card__words { font-size: var(--text-lg); max-width: none; } /* a narrow door: the line two steps down and the door's width, so it keeps to two or three lines clear of the arrow */
	.cat-card__end { font-size: var(--text-xl); }
}
@media (max-width: 640px) {
	.cat-card__top, .cat-card__bottom { left: var(--space-3); right: var(--space-3); }
	.cat-card__top { top: var(--space-3); }
	.cat-card__bottom { bottom: var(--space-3); }
	.cat-card__words, .cat-card__end { font-size: var(--text-xl); }
}

/* Caption doors (door_style="caption"; owner, 2026-10-29, after desenio.com's
   three banners): the photo at 4:5, its corners its own, and the same words
   under it on the ground, in ink. The photo's height is the card's top
   padding (--caption-ratio times its width; --caption-width where the card
   is not its box's full width, a padding's % being of the box), so the words follow in the
   flow, under the cover link that spans the whole card (the words let clicks
   through anyway). */
.cat-card__photo { position: absolute; inset: 0; display: block; overflow: hidden; }
.cat-card.cat-card--caption { --caption-ratio: 1.25; aspect-ratio: auto; padding-top: calc(var(--caption-ratio) * var(--caption-width, 100%) + var(--space-3)); overflow: visible; border-radius: 0; background: none; color: var(--zone-ink); }
.cat-card.cat-card--caption .cat-card__cover { position: absolute; inset: 0; aspect-ratio: auto; }
.cat-card--caption .cat-card__photo { bottom: auto; height: 0; padding-top: calc(var(--caption-ratio) * 100%); border-radius: var(--radius-card-lg); background: var(--color-surface); }
.cat-card--caption :is(.cat-card__top, .cat-card__bottom, .cat-card__end) { position: static; }
.cat-card--caption .cat-card__top { margin-bottom: var(--space-1); align-items: baseline; }
.cat-card--caption .cat-card__bottom { align-items: flex-start; }
.cat-card--caption .cat-card__words { max-width: none; font-size: clamp(var(--text-base), 5.6cqw, var(--text-xl)); line-height: var(--lh-title); } /* sized to the door, so each sentence keeps to its line (24px on a 438px door, 17 on 301) */
.cat-card--caption .cat-card__words > span { display: block; } /* the line's two sentences, one a line (owner, 2026-10-29: "iki satır") */
.cat-card--caption .cat-card__end { font-size: var(--text-3xl); } /* the arrow large (owner, 2026-10-29: "ok işareti büyük olsun") */
.cat-card--caption .cat-card__end > .icon { transition: rotate var(--motion-reveal); }
.cat-card--caption:is(:hover, :focus-within) .cat-card__end > .icon { transform: none; rotate: 45deg; } /* under the pointer the arrow turns from up-right to straight ahead (owner, 2026-10-29: "tam karşıyı gösterecek şekilde çevir") */
/* A door photo's product spots (owner, 2026-10-29: "ürünlerin üzerinde
   tıklanabilir noktalar"; "daha efektif ve canlı", "ortalarında artı ikonu
   olsun"): over the photo, out of the cover link, on a frame of the photo's
   own ratio (--spots-ratio) cover-fitted and leaning in as the picture does,
   so each dot stays on its print at every crop; a dot the crop cuts off is
   clipped with it. A paper dot (a little see-through, owner 2026-10-29) with an ink plus and a halo opening and
   closing round it, slowly and all four together (owner: "hepsini aynı anda ... açılıp kapansın"); under the pointer the dot turns ink, the
   plus turns a quarter and the print's name shows (on the left of a dot on
   the right half). A dot opens its print's quick view. */
.cat-card__spots { position: absolute; top: 0; left: 0; z-index: 1; width: 100cqw; height: calc(var(--caption-ratio) * 100cqw); overflow: hidden; border-radius: var(--radius-card-lg); pointer-events: none; }
.cat-card__spots-frame { position: absolute; left: 50%; top: 50%; width: max(100cqw, var(--caption-ratio) * 100cqw * (var(--spots-ratio))); height: max(var(--caption-ratio) * 100cqw, 100cqw / (var(--spots-ratio))); translate: -50% -50%; transition: scale var(--motion-swap); }
.cat-card:hover .cat-card__spots-frame { scale: 1.04; } /* with the photo (.cat-card__img) */
.cat-card__spot { position: absolute; display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; border: 0; background: none; color: var(--zone-ink); font-size: 0.8125rem; translate: -50% -50%; cursor: pointer; pointer-events: auto; }
.cat-card__spot::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: color-mix(in srgb, var(--zone-paper) 85%, transparent); box-shadow: var(--shadow-soft); animation: spot-ring calc(var(--motion-beat) * 5) var(--ease-travel) infinite alternate; transition: scale var(--motion), background var(--motion); }
.cat-card__spot > .icon { position: relative; vertical-align: 0; transition: rotate var(--motion-reveal), color var(--motion); }
.cat-card__spot:is(:hover, :focus-visible)::before { scale: 1.15; background: var(--zone-ink); animation: none; }
.cat-card__spot:is(:hover, :focus-visible) > .icon { rotate: 90deg; color: var(--zone-paper); }
.cat-card__spot:focus-visible { outline: none; }
.cat-card__spot:focus-visible::before { outline: 2px solid var(--zone-paper); outline-offset: 0.25rem; }
@keyframes spot-ring {
	from { box-shadow: var(--shadow-soft), 0 0 0 0 color-mix(in srgb, var(--zone-paper) 55%, transparent); }
	to { box-shadow: var(--shadow-soft), 0 0 0 0.5rem color-mix(in srgb, var(--zone-paper) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cat-card__spot::before { animation: none; } }
.cat-card__spot-label { position: absolute; top: 50%; left: calc(100% + var(--space-1)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--zone-paper); color: var(--zone-ink); box-shadow: var(--shadow-soft); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-title); white-space: nowrap; opacity: 0; translate: 0 -50%; transition: opacity var(--motion-reveal); pointer-events: none; }
.cat-card__spot--end .cat-card__spot-label { left: auto; right: calc(100% + var(--space-1)); }
.cat-card__spot:is(:hover, :focus-visible) .cat-card__spot-label { opacity: 1; }
@container (max-width: 20rem) {
	.cat-card--caption .cat-card__end { font-size: var(--text-2xl); }
}

/* ==================================================================
   WALL STAGE ([d0_wall_stage], template-parts/sections/wall-stage.php;
   owner, 2026-10-29, after Sky's "Our Collections": a page inside the
   page). On the ink ground, the section is two screens tall and its pin a
   screen tall, held at the top for the second screen: under the header's
   height, the room (a window on the builder's stage, cover-fitted round
   its wall by wall-stage.js) and the row of every wall under it. The
   room's words sit in its own grid cell: the headline in the middle while
   the wall is bare, in the home hero's type (owner, the same day: "güçlü
   bir başlıkla karşılaşmak istiyorum"), giving way as the wall goes up
   (--wstage-hang, 0 → 1, wall-stage.js); the wall's name and buttons at
   its foot once it hangs (.is-set). Make It Yours brings the builder into
   the same cell and the row's (.wstage__editor; .is-opening while it
   comes, .is-editing once in): the room, the words and the row step back
   and the builder rises in on the same ink, its parts in one column beside
   the room (wall-builder-app.js `is-stage`, below). Phones: the room square (at most 46% of the
   screen high), the words under it. The frames are the builder's
   (d0:wall-frames); they hang by opacity and scale only, one beat each,
   staggered when a pick hangs a whole wall at once (.is-staggered).
   ================================================================== */
.zone--ink:has(.wstage) { --zone-bg: var(--color-ink-bar-bg); } /* the ink bar's own tone, as the hero's: bar and stage read as one ground */
.wstage { position: relative; height: 200svh; }
.wstage > .wb-sec--modal { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; } /* where the builder waits between visits (wall-sets.js puts it here): nothing of it in the flow */
.wstage__pin {
	position: sticky; top: var(--header-h); box-sizing: border-box; height: calc(100svh - var(--header-h)); /* under the pinned header, its ink bar over the stage's ink (owner, 2026-11-08: the header no longer leaves over it) */
	display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3);
	padding: var(--container-pad); /* the top gap is the sides' (owner, 2026-10-30: "sabit bir boşluk ... sağ ve sol boşlukları kadar"), and the bottom's ("üst ve alt boşluğu eşit yap") */
}
.wstage__room { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: var(--radius-card-lg); background: var(--color-surface); }
.wstage__layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--motion-swap); }
.wstage__layer.is-on { opacity: 1; }
.wstage__layer .wb__stage { position: absolute; margin: 0; width: var(--sw, 100%); left: var(--sx, 0px); top: var(--sy, 0px); } /* the script's crop; before it, the room from its corner */
.wstage__layer .wb-frame { opacity: 0; scale: 0.94; transition: opacity var(--motion-travel) var(--ease-travel), scale var(--motion-travel) var(--ease-travel); }
.wstage__layer.is-staggered .wb-frame { transition-delay: calc(var(--i, 0) * 90ms); }
.wstage__layer .wb-frame.is-hung { opacity: 1; scale: 1; }
.wstage__marks { position: absolute; inset: 0; z-index: 46; pointer-events: none; }
.wstage__ghost { position: absolute; translate: -50% -50%; border: 2px dashed color-mix(in srgb, var(--zone-paper) 85%, transparent); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18), inset 0 0 0 1px rgb(0 0 0 / 0.18); opacity: clamp(0, var(--wstage-hang, 0) * 4, 1); transition: opacity var(--motion-reveal); } /* the outlines come as the headline goes, then each leaves as its print hangs */
.wstage__ghost.is-hung { opacity: 0; }
.wstage__marks .cat-card__spot { opacity: 0; pointer-events: none; transition: opacity var(--motion-reveal); }
.wstage__marks .cat-card__spot.is-hung { opacity: 1; pointer-events: auto; }
.wstage__invite, .wstage__cap { grid-area: 1 / 1; z-index: 1; color: var(--zone-paper); transition: opacity var(--motion-swap), visibility var(--motion-swap); }
.wstage__invite { align-self: center; justify-self: center; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4); text-align: center; text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); opacity: clamp(0, 1 - var(--wstage-hang, 0) * 2.5, 1); }
.wstage__title { max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: var(--text-mega); font-weight: var(--fw-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-mega); text-transform: uppercase; text-wrap: balance; color: inherit; } /* the mega step of the type scale */
.wstage__sub { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.wstage__cap { align-self: end; display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-4) var(--space-4); border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); background: linear-gradient(180deg, transparent, rgb(21 20 14 / 0.58)); pointer-events: none; }
.wstage__cap > * { pointer-events: auto; }
.wstage.is-set .wstage__invite, .wstage:not(.is-set) .wstage__cap { opacity: 0; visibility: hidden; }
.wstage__words { display: grid; gap: var(--space-1); min-width: 0; transition: opacity var(--motion-swap); }
.wstage__words.is-swapping { opacity: 0; }
.wstage__world { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: 0.8; }
.wstage__name { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: inherit; }
.wstage__line { margin: 0; max-width: 46ch; font-size: var(--text-sm); }
.wstage__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; }
/* The row: the builder's own (.wb__strip, .wb-thumb: the ring inside each
   picture so the row's edge never clips it, arrows over its ends while more
   lies that way, a mouse dragging it), on the ink; a picture leans in under
   the pointer (Start your own left its end, owner 2026-10-30). */
.wb__strip.wstage__strip { grid-area: 2 / 1; --thumb-w: 9.5rem; padding: 0; background: none; } /* over the builder's own row rules, later in the file; placed, or the editor's span pushes it to a row of its own */
.wstage__strip .wb-thumb__pic .wb-mini { transition: scale var(--motion-swap) var(--ease-out); }
.wstage__strip .wb-thumb:hover .wb-thumb__pic .wb-mini { scale: 1.06; }
.wstage__strip .wb-thumb:focus-visible { outline: none; }
.wstage__strip .wb-thumb:focus-visible .wb-thumb__pic::after { box-shadow: inset 0 0 0 2px var(--color-ink); }
.wstage__strip .wb-thumb:active .wb-thumb__pic { scale: 0.97; } /* the press, as the button family's */
.wstage__strip .wb-thumb__pic { transition: box-shadow var(--motion), scale var(--motion); }
/* Making it yours (owner, 2026-10-29: "Opening app yerine ... güçlü
   animasyonlar ... burası kendi havasında, kendi hızında olan bir yer
   olmalı"): one move, no loading words. The words and the row of walls
   sink away; on a wide screen the room's own picture glides back to show
   the whole room beside the panel's place (wall-stage-host.js, .is-framed)
   while the panel slides in from the right, shimmering until the builder
   is in; then the builder's room fades in exactly over it and its controls
   slide into the panel one after another (.is-arriving). Done plays it
   backwards (.is-leaving, then the room glides back to its crop). */
@property --wstage-panel { syntax: "<length>"; inherits: true; initial-value: 0px; } /* read in px by wall-stage-host.js */
.wstage__strip, .wstage__cap, .wstage__invite { transition: opacity var(--motion-swap), translate var(--motion-travel) var(--ease-travel), visibility var(--motion-swap); }
.wstage:is(.is-opening, .is-editing) :is(.wstage__invite, .wstage__cap) { opacity: 0; visibility: hidden; translate: 0 1rem; pointer-events: none; transition-duration: var(--motion-reveal); }
.wstage:is(.is-opening, .is-editing) .wstage__strip { opacity: 0; visibility: hidden; translate: 0 3rem; pointer-events: none; }
.wstage:is(.is-opening, .is-editing) .wb__strip.wstage__strip .wb__strip-step { visibility: hidden; opacity: 0; } /* a row's arrow says visible for itself, and a child's visible beats its parent's hidden */
.wstage:is(.is-opening, .is-editing) .wstage__marks { opacity: 0; transition: opacity var(--motion); }
.wstage.is-editing .wstage__room { visibility: hidden; transition: visibility 0s calc(var(--wstage-wait, 0ms) + 400ms); } /* gone once the builder's room is over it; back at once when the builder starts to leave */
.wstage.is-framed .wstage__layer .wb__stage { border-radius: var(--radius-card-lg); transition: width 720ms var(--ease-travel), left 720ms var(--ease-travel), top 720ms var(--ease-travel); }
.wstage.is-framed .wstage__room { background: transparent; } /* the picture alone glides; the box it covered is the stage's ink */
.wstage__editor { grid-row: 1 / -1; grid-column: 1; position: relative; z-index: 2; min-height: 0; overflow: hidden; border-radius: var(--radius-card-lg); visibility: hidden; pointer-events: none; transition: visibility 0s 420ms; }
:is(.wstage, .wstudio):is(.is-opening, .is-editing) .wstage__editor { visibility: visible; pointer-events: auto; transition: none; }
/* The studio (lookbook sets="…", assets/js/wall-studio.js; owner,
   2026-10-31: Customize on a landing's wall "ana sayfada yaptığımız gibi"):
   the home's editor over the page in a dialog a screen tall, on the
   stage's ink with the stage's gaps; its one cell is the stage's editor
   cell (.wstage__editor, the rules above and below shared), the panel's
   ground sliding in while the editor comes. It fades in on the press and
   out with the editor on Done. */
.wstudio.zone--ink { --zone-bg: var(--color-ink-bar-bg); }
.wstudio { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--container-pad); border: 0; background: var(--zone-bg); color: var(--color-text); overscroll-behavior: contain; transition: opacity var(--motion-swap); }
.wstudio[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); animation: wstage-fade-in var(--motion-swap) var(--ease-out); }
.wstudio::backdrop { background: transparent; }
.wstudio.is-leaving { opacity: 0; }
.wstudio > .wb-sec--modal { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; } /* where the editor waits between visits (wall-sets.js puts it here) */
/* GALLERY BUILDER (template-gallery-builder.php; owner, 2026-11-12: "sıfırdan müşterinin girip duvar kurabileceği, tek
   başına, full screen bir sayfa"): the store's wall editor as a page of its own, the whole window on the stage's ink: a
   slim bar (the logo, back to Gallery Walls, the page's name, the cart) over the editor's one cell, the studio's
   (.wstudio) cell with its gaps. The site's header and footer step aside; their dialogs stay. The editor keeps Done to
   itself here: closing it would leave an empty page (gallery-builder.js opens it again should it close). */
.is-gbuilder :is(.site-header, .site-footer) { display: none; }
.gbuilder { --zone-bg: var(--color-ink-bar-bg); position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0 var(--container-pad) var(--container-pad); background: var(--zone-bg); color: var(--zone-paper); }
.gbuilder__bar { display: flex; align-items: center; gap: var(--space-4); height: var(--header-row-h); }
.gbuilder__logo { flex: none; display: block; }
.gbuilder__logo img { display: block; width: auto; height: 2.25rem; }
.gbuilder__back { display: inline-flex; align-items: center; gap: var(--space-1); color: color-mix(in srgb, var(--zone-paper) 72%, transparent); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none; transition: color var(--motion); }
.gbuilder__back:hover { color: var(--zone-paper); }
.gbuilder__title { margin: 0 auto; color: var(--zone-paper); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.gbuilder__cart { position: relative; flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--zone-paper); } /* the header's own cart button, its bag and bubble */
.gbuilder__cart svg { width: 1.35rem; height: 1.35rem; }
.gbuilder__cart .cart-count { position: absolute; top: 0; right: 0; min-width: 1.125rem; height: 1.125rem; padding: 0 0.2em; font-size: 0.625rem; line-height: 1; }
.gbuilder__editor { grid-row: 2; } /* the studio's cell (.wstage__editor) under the bar, not over it */
.gbuilder__wait { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; color: color-mix(in srgb, var(--zone-paper) 62%, transparent); font-size: var(--text-sm); text-align: center; }
.gbuilder.is-editing .gbuilder__wait { display: none; }
.gbuilder__again { padding: 0; border: 0; background: none; color: var(--zone-paper); font: inherit; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.gbuilder .wb-ink__done { display: none; }
@media (max-width: 640px) {
	.gbuilder { padding: 0 0 0; }
	.gbuilder__bar { gap: var(--space-3); padding-inline: var(--container-pad); }
	.gbuilder__back span { display: none; } /* the chevron alone on a phone */
	.gbuilder__editor { border-radius: 0; }
}
@keyframes wstage-fade-in { from { opacity: 0; } }
@keyframes wstage-fade-out { to { opacity: 0; } }
@keyframes wstage-rise { from { opacity: 0; translate: 0 1.25rem; } }
/* The builder in the stage (wall-builder-app.js `is-stage`; owner,
   2026-10-29: "siyah zemin üzerindeyiz, buradan tekrar beyaza
   kaymayalım"): no card, the card's parts laid out anew on the stage's own
   ink (the card's boxes step aside with display: contents, its parts take
   the grid's cells). The room is the picture only, the chosen print's
   capsule its one control (.wb__resize). Wide screens: the room on the
   left, the editing panel on the right (below). Under 901px: one column
   under the room.
   Three type levels: the name (display 700), the tabs (600), counts and
   hints (muted). */
.wb.is-stage { --zone-bg: var(--color-ink-bar-bg); --step: var(--space-3); --pad: var(--space-4); position: absolute; inset: 0; display: grid; border: 0; border-radius: 0; background: none; color: var(--color-text); }
.wb.is-stage :is(.wb__screen--wall, .wb__layout, .wb__main, .wb__panel), .wb.is-stage .wb__screen--wall[hidden] { display: contents; } /* the wall screen stays while the posters are open */
.wb.is-stage :is(.wb__sets, .wb__panel-head, .wb-bar, .wb__caption, .wb__app-hint, .wb__quick, .wb__tools, .wb__buysheet, .wb__posters-head > [data-wb-back], .wb__posters-foot, .wb__appbar > .arrowbtn) { display: none; }
.wb.is-stage .wb__view { grid-area: room; display: grid; place-items: center; min-height: 0; container-type: size; overflow: hidden; background: none; }
.wb__appbar-done, .wb-ink__groups, .wb-ink__sum, .wb-ink__tabs, .wb-ink__act, .wb-ink__foot { display: none; }
.wb.is-stage .wb__appbar { display: none; } /* the stage has its own summary and its own Done (wall-builder-ink.php) */
/* The panel's two halves as its header (owner, 2026-10-30: "en üstte iki tab
   CUSTOMIZE - BUY ALL", then "tam genişlikte ... bir header tab gibi"): the
   panel's whole width at its very top, its rounded top corners carried on,
   each half a tab; the open one is the panel's own ground with a paper line
   along its top, the other a step darker, and a hairline under the closed
   one. Under Customize its Posters and Rooms, under Buy All the prints. */
.wb.is-stage .wb-ink__groups { grid-area: groups; display: grid; grid-template-columns: 1fr 1fr; height: 3.5rem; overflow: hidden; border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0; }
.wb-ink__group { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; border-radius: 0; background: color-mix(in srgb, var(--zone-ink) 22%, var(--color-surface)); box-shadow: inset 0 -1px 0 var(--color-hairline); color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--motion), color var(--motion); }
.wb-ink__group:hover { color: var(--color-text); }
.wb-ink__group[aria-selected="true"] { background: var(--color-surface); box-shadow: inset 0 2px 0 var(--zone-paper); color: var(--color-text); }
.wb-ink__group[aria-selected="true"] .wb-ink__n { color: inherit; opacity: 0.6; }
.wb-ink__group:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.wb.is-stage[data-ink-group="buy"] .wb-ink__tabs { display: none; }
/* The stage's buttons at the round buttons' height (owner, 2026-10-30: "bu alandaki tüm butonları da standart olan 48px"): the family's (Customize, Buy All, Done, Continue, Add to Cart, Buy Now), undo and redo, the walls row's arrows. */
:is(.wstage, .wstudio) .button:has(> .button__label, > .button__disc, > .button__glyph) { --b-h: var(--roundbtn-h); }
.wb__strip.wstage__strip .wb__strip-step { width: var(--roundbtn-h); height: var(--roundbtn-h); }
/* Round corners inside the stage (owner, 2026-10-30: "buranın tasarımında yuvarlak köşelere yine geçiyoruz"): the store's corner tokens at their values before the square redesign (2026-10-26), here only, so every box in the stage and its editor (the search, the chips, the posters, the rooms, the print cards, the capsule) is rounded and the rest of the site stays square. */
.wstage, .wstudio { --radius: 10px; --radius-sm: 7px; --radius-lg: 15px; --radius-card: 4px; --radius-pill: 999px; }
/* The wall over the foot (owner, 2026-10-30: "Your Wall ve adet fiyat bilgilerini ... daha güzel bir layoutta", then "fiyat kısmını altta footer üstüne alalım"): its name and count on the left; on the right its total, and over it, while a sale is on, the price before the sale struck with the saving in the sale's green (wall-builder-list.js writes the figures, empty without a sale). The same under both halves. */
.wb.is-stage .wb-ink__sum { grid-area: sum; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: 0 var(--pad); padding: var(--step) 0; border-top: 1px solid var(--color-hairline); }
.wb-ink__who, .wb-ink__price { display: grid; gap: 2px; min-width: 0; }
.wb-ink__price { flex: none; justify-items: end; text-align: right; }
.wb-ink__name, .wb-ink__total { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: var(--ls-tight); color: var(--color-text); }
.wb-ink__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-ink__total { font-variant-numeric: tabular-nums; }
.wb-ink__count { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wb-ink__was { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wb-ink__was:has(> del:empty) { display: none; }
.wb-ink__off { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5rem; border-radius: var(--radius-pill); background: var(--color-sale); color: #ffffff; font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.wb.is-stage .wb-ink__tabs { grid-area: tabs; display: grid; grid-auto-flow: column; }
/* Undo and redo on the picture's bottom-right corner (owner, 2026-10-30: "editör panelinde değil, solda görsel sağ altta"): inside the stage, kept within the part of it the window shows (a phone's room covers its window and is cut at the sides). White round buttons, ink under the pointer. */
.wb.is-stage .wb-ink__act { position: absolute; right: calc(max(0px, (100% - 100cqw) / 2) + var(--space-3)); bottom: calc(max(0px, (100% - 100cqh) / 2) + var(--space-3)); z-index: 56; display: flex; gap: var(--space-2); }
.wb.is-stage .wb-ink__icon { width: var(--roundbtn-h); height: var(--roundbtn-h); background: var(--zone-paper); color: var(--zone-ink); box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); }
.wb.is-stage .wb-ink__icon:hover { background: var(--zone-ink); color: var(--zone-paper); }
.wb.is-stage .wb-ink__icon:disabled { opacity: 0.55; }
.wb-ink__scale { display: none; }
/* The own photo's wall width, across from undo and redo (owner, 2026-10-30): a white pill with the width; it opens the slider above it. */
.wb.is-stage .wb-ink__scale:not([hidden]) { position: absolute; left: calc(max(0px, (100% - 100cqw) / 2) + var(--space-3)); bottom: calc(max(0px, (100% - 100cqh) / 2) + var(--space-3)); z-index: 56; display: block; }
.wb-ink__scale-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--roundbtn-h); padding: 0 var(--space-4) 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--zone-paper); color: var(--zone-ink); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); cursor: pointer; transition: background-color var(--motion), color var(--motion); }
.wb-ink__scale-btn:hover, .wb-ink__scale.is-open .wb-ink__scale-btn { background: var(--zone-ink); color: var(--zone-paper); }
.wb-ink__scale-btn .icon { width: 1.125rem; height: 1.125rem; }
.wb-ink__scale-pop { position: absolute; left: 0; bottom: calc(100% + var(--space-2)); display: grid; gap: var(--space-2); width: 15rem; padding: var(--space-3); box-sizing: border-box; border-radius: var(--radius); background: rgb(23 25 20 / 0.9); color: var(--zone-paper); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.32); font-size: var(--text-xs); opacity: 0; visibility: hidden; translate: 0 4px; transition: opacity var(--motion), translate var(--motion), visibility 0s var(--motion); }
.wb-ink__scale.is-open .wb-ink__scale-pop { opacity: 1; visibility: visible; translate: 0 0; transition: opacity var(--motion), translate var(--motion); }
.wb-ink__scale-pop input { width: 100%; margin: 0; accent-color: var(--zone-paper); }
.wb.is-stage .wb__buy { display: none; } /* the foot buys here (Add to Cart, Buy Now) */
/* The foot, the panel's whole width (owner, 2026-10-30: "en alt kısmı da tam genişlikte", "altta açılan yere DONE butonunu alalım"): Done and Continue share it; under Buy All, Add to Cart and Buy Now (owner, the same day: "alttaki tüm butonlar tam genişlik ... Buy All kısmında Done olmasın"). The ground of the header's closed tab, its rounded bottom corners the panel's. */
.wb.is-stage .wb-ink__foot { grid-area: foot; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-height: 5rem; box-sizing: border-box; padding: var(--step) var(--pad); background: color-mix(in srgb, var(--zone-ink) 22%, var(--color-surface)); box-shadow: inset 0 1px 0 var(--color-hairline); border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); }
.wb.is-stage .wb-ink__foot > .button { flex: 1 1 0; min-width: 0; }
.wb.is-stage[data-ink-group="buy"] .wb-ink__done { display: none; }
/* In the cart: the button says View Cart in the sale's green (owner, 2026-10-30: "yalnızca View Cart ... yeşil"; wall-builder-buy.js), outline or solid alike. */
:is(.wstage, .wstudio) .button.is-added { --b-o: var(--color-sale); --b-u: #ffffff; --b-rest: var(--color-sale); color: #ffffff; }
.wb-ink__pay { display: none; flex: 1; gap: var(--space-2); }
.wb-ink__pay > .button { flex: 1 1 0; min-width: 0; }
.wb.is-stage[data-ink-group="buy"] .wb-ink__pay { display: flex; }
.wb.is-stage[data-ink-group="buy"] .wb-ink__continue { display: none; }
/* The tabs: words, the chosen one underlined (the line draws in from its left). */
.wb-ink__tab { position: relative; padding: 0 0 var(--step); border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-base); font-weight: var(--fw-semibold); text-align: left; white-space: nowrap; cursor: pointer; transition: color var(--motion); }
.wb-ink__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-ink); scale: 0 1; transform-origin: left; transition: scale var(--motion-reveal) var(--ease-out); }
.wb-ink__tab:hover, .wb-ink__tab[aria-selected="true"] { color: var(--color-text); }
.wb-ink__tab[aria-selected="true"]::after { scale: 1 1; }
.wb-ink__tab:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.wb-ink__n { margin-left: var(--space-1); color: var(--color-text-muted); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; }
/* What the chosen tab shows: one of four in the same cell, fading in where the last one was. */
.wb.is-stage :is(.wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters) { grid-area: what; min-height: 0; min-width: 0; }
.wb.is-stage :is(.wb__list, .wb__rooms, .wb__screen--posters) { overscroll-behavior: contain; scrollbar-width: none; animation: wstage-fade-in var(--motion-swap) var(--ease-out); }
.wb.is-stage :is(.wb__list, .wb__rooms, .wb__screen--posters, .wb__results-box)::-webkit-scrollbar { display: none; }
.wb.is-stage:not([data-ink-tab="prints"]) :is(.wb__list, .wb__list-empty), .wb.is-stage:not([data-ink-tab="rooms"]) .wb__rooms { display: none; }
.wb.is-stage .wb__list-empty { padding: 0; }
.wb.is-stage .wb__photo-note { padding: var(--space-2) 0 0; }
/* The posters page (owner, 2026-10-30, option A of docs/design/wall-search-options.html): one bar, then the posters,
   scrolling under it. In the bar the words, then on the right the world (its list opens under it) and Filters (owner,
   the same day: "arama kısmı solda kalsın, diğer iki seçici sağda"; wall-builder-worlds.js); the
   bar's ground is the page's own ::before across the row, so each part keeps its width. */
.wb__world-pick, .wb__filters-open { display: none; }
.wb.is-stage .wb__screen.wb__screen--posters { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: var(--control-h) auto minmax(0, 1fr); align-items: center; height: auto; padding: 0; gap: 0; overflow: hidden; }
.wb.is-stage .wb__screen--posters[hidden] { display: none; } /* the grid above would beat the hidden attribute: on Rooms the posters lay over the rooms */
.wb.is-stage .wb__screen--posters > * { grid-column: 1 / -1; }
.wb.is-stage .wb__screen--posters::before { content: ""; grid-area: 1 / 1 / 2 / -1; align-self: stretch; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); transition: box-shadow var(--motion); }
.wb.is-stage .wb__screen--posters:has(.search-sec__input:focus)::before { box-shadow: inset 0 0 0 1px var(--color-ink); }
.wb.is-stage .wb__posters-head { display: contents; }
.wb.is-stage .wb__search { grid-area: 1 / 1; min-width: 0; }
.wb.is-stage .wb__note { grid-row: 2; margin: var(--step) 0 0; }
.wb.is-stage .wb__results-box { grid-row: 3; align-self: stretch; min-height: 0; margin-top: var(--step); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.wb.is-stage :is(.wb__world-pick, .wb__filters-open) { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-h-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; transition: background-color var(--motion), color var(--motion); }
.wb.is-stage .wb__world-pick { grid-area: 1 / 2; margin-right: 0.3125rem; background: var(--color-ink); color: var(--color-accent-contrast); }
.wb.is-stage .wb__world-pick .icon { width: 0.75rem; height: 0.75rem; rotate: 180deg; transition: rotate var(--motion); }
.wb.is-stage .wb__world-pick[aria-expanded="true"] .icon { rotate: 0deg; }
.wb.is-stage .wb__filters-open { grid-area: 1 / 3; margin-right: 0.3125rem; background: none; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.wb.is-stage :is(.wb__filters-open:hover, .wb__filters-open[aria-expanded="true"]) { background: var(--color-ink); color: var(--color-accent-contrast); }
.wb.is-stage .wb__filters-open[hidden] { display: none; }
.wb__filters-n { display: grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-contrast); font-size: 0.6875rem; font-weight: var(--fw-bold); }
.wb.is-stage .wb__filters-open:is(:hover, [aria-expanded="true"]) .wb__filters-n { background: var(--color-accent-contrast); color: var(--color-ink); }
.wb__filters-n[hidden] { display: none; }
/* The worlds: a short list under the world, over the posters. */
.wb.is-stage .wb__posters-head .wb__chips { position: absolute; z-index: 4; top: calc(var(--control-h) + var(--space-1)); right: 0; display: flex; flex-direction: column; gap: 2px; width: 14rem; padding: var(--space-1); overflow: visible; border-radius: var(--radius); background: var(--color-surface-light); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); opacity: 0; visibility: hidden; translate: 0 -4px; transition: opacity var(--motion), translate var(--motion), visibility 0s var(--motion); }
.wb.is-stage .wb__screen--posters[data-worlds-open] .wb__chips { opacity: 1; visibility: visible; translate: 0 0; transition: opacity var(--motion), translate var(--motion); }
.wb.is-stage .wb__chips .fchip { justify-content: flex-start; height: 2.5rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font-weight: var(--fw-normal); }
.wb.is-stage .wb__chips .fchip:hover { background: var(--color-surface); }
.wb.is-stage .wb__chips .fchip[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--fw-semibold); }
/* The world's words, on the bar's ground. */
.wb.is-stage .wb__finder .filters__shell { position: static; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.wb.is-stage .wb__finder :is(.filters, .search-sec__inner) { margin: 0; }
.wb.is-stage .wb__finder .filters__bar, .wb.is-stage .wb__finder .filters__active { display: none; }
.wb.is-stage .search-sec__icon { left: var(--space-2); font-size: var(--text-base); }
.wb.is-stage .search-sec__input { height: var(--control-h); padding: 0 calc(var(--control-h-sm) + var(--space-1)) 0 calc(var(--space-2) * 2 + 1rem); border: 0; background: none; font-size: var(--text-sm); text-overflow: ellipsis; box-shadow: none; }
.wb.is-stage .search-sec__input:placeholder-shown { padding-right: var(--space-2); } /* the clear button shows only with words: the placeholder keeps its room */
.wb.is-stage .search-sec__input:focus { border: 0; box-shadow: none; }
.wb.is-stage .search-sec__clear { right: var(--space-1); width: var(--control-h-sm); height: var(--control-h-sm); }
.wb.is-stage .search-sec__clear:hover { background: var(--color-surface-light); }
/* Filters: the world's panel as a sheet over the posters, its groups in one column, one open at a time. */
.wb.is-stage .wb__finder .filters__panel { position: absolute; z-index: 3; inset: calc(var(--control-h) + var(--space-2)) 0 0; display: none; flex-direction: column; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--color-surface-light); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.4); }
.wb.is-stage .wb__finder .filters.is-open .filters__panel { display: flex; animation: wstage-fade-in var(--motion-swap) var(--ease-out); }
.wb.is-stage .wb__finder .filters__groups { display: block; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 var(--step); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.wb.is-stage .wb__finder .filters .fgroup:not([hidden]) { display: flex; padding: 0; border: 0; border-bottom: 1px solid var(--color-hairline); background: none; }
.wb.is-stage .wb__finder .fgroup__label { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; margin: 0; color: var(--color-text); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; cursor: pointer; user-select: none; }
.wb.is-stage .wb__finder .fgroup__label::after { content: ""; width: 0.45rem; height: 0.45rem; margin-right: 0.2rem; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); rotate: -45deg; transition: rotate var(--motion); }
.wb.is-stage .wb__finder .fgroup.is-current .fgroup__label::after { rotate: 45deg; }
.wb.is-stage .wb__finder .fgroup:not(.is-current) > :not(.fgroup__label) { display: none; }
.wb.is-stage .wb__finder .fgroup.is-current { padding-bottom: var(--step); }
.wb.is-stage .wb__finder .filters__foot { display: flex; gap: var(--space-2); padding: var(--step); border-top: 1px solid var(--color-hairline); }
.wb.is-stage .wb__finder .filters__selected { display: none; }
.wb.is-stage .wb__finder .filters__foot > .button { flex: 1 1 0; min-width: 0; height: var(--roundbtn-h); border-radius: var(--radius-pill); }
.wb.is-stage .wb-tile { gap: var(--space-1); }
.wb.is-stage .wb-tile img { transition: opacity var(--motion), scale var(--motion); }
.wb.is-stage .wb-tile:hover img { opacity: 1; outline: 1.5px solid var(--color-ink); outline-offset: -1.5px; }
.wb.is-stage .wb-tile:active img { scale: 0.97; }
.wb.is-stage .wb-tile__name { -webkit-line-clamp: 1; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Undo and redo. */
.wb-ink__icon { display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--color-hairline); cursor: pointer; transition: background-color var(--motion), color var(--motion), scale var(--motion), opacity var(--motion); }
.wb-ink__icon:hover { background: var(--color-ink); color: var(--color-accent-contrast); }
.wb-ink__icon:active { scale: 0.92; }
.wb-ink__icon:disabled { opacity: 0.35; pointer-events: none; }
.wb-ink__icon .icon { width: 1.1rem; height: 1.1rem; }
/* The chosen print's capsule: smoked glass over the room, its size, its frame, its remove. */
.wb.is-stage .wb__resize { --wb-dock: 0; gap: var(--space-1); height: 40px; padding: 0 var(--space-1); box-sizing: border-box; translate: -50% calc(-100% - 10px); background: rgb(23 25 20 / 0.86); color: var(--zone-paper); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.32); white-space: nowrap; animation: wb-capsule-in var(--motion-reveal) var(--ease-out); }
.wb.is-stage .wb__resize.is-below { translate: -50% 10px; }
.wb.is-stage .wb__resize.is-docked { top: calc(max(0px, (100% - 100cqh) / 2) + var(--space-2)); bottom: auto; translate: -50% 0; } /* a small room: the capsule waits at its top edge, never over the chosen print's own place, the foot's corner kept for undo and redo (wall-builder-resize.js reads --wb-dock) */
@keyframes wb-capsule-in { from { opacity: 0; scale: 0.94; } }
.wb.is-stage .wb__resize button:not(.wb__swatch):hover { background: var(--zone-paper); color: var(--zone-ink); }
.wb.is-stage .wb__resize-size { min-width: 4.2em; font-size: var(--text-sm); }
.wb.is-stage .wb__resize-more { display: contents; }
.wb__resize-sep { width: 1px; height: 20px; margin: 0 var(--space-1); background: rgb(255 255 255 / 0.18); }
.wb__resize-frames { display: flex; gap: var(--space-2); }
.wb.is-stage .wb__resize .wb__swatch { width: 18px; height: 18px; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); transition: box-shadow var(--motion), scale var(--motion); }
.wb.is-stage .wb__resize .wb__swatch:hover { scale: 1.12; }
.wb.is-stage .wb__resize .wb__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(23 25 20), 0 0 0 3.5px var(--zone-paper); }
/* What the tabs show, in a column (the panel's on a wide screen, the phone's under the room). */
.wb.is-stage .wb-ink__tabs { grid-auto-columns: 1fr; margin-top: var(--step); border-bottom: 1px solid var(--color-hairline); }
.wb.is-stage .wb-ink__tab { text-align: center; } /* owner, 2026-10-30: "Posters ve Rooms tab metinlerini ortalayalım"; the line under the open one runs its whole half */
.wb.is-stage .wb-ink__tab::after { transform-origin: center; }
.wb.is-stage :is(.wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters) { margin-top: var(--step); }
.wb.is-stage :is(.wb__list, .wb__rooms, .wb__screen--posters) { overflow-y: auto; }
.wb.is-stage .wb__list { align-content: start; }
.wb.is-stage .wb-row:first-child { border-top: 0; }
.wb.is-stage .wb-row:last-child { border-bottom: 0; }
.wb.is-stage .wb-row__edit { padding: 0 var(--space-2) var(--space-3) var(--space-4); } /* the size and the frames inside the row's own inset (owner, 2026-10-30: "sağa sola yapışık ... iç padding'e göre"): the left on the thumbnail's edge, the right on the chevron's */
.wb.is-stage .wb__rooms { align-content: start; }
.wb.is-stage .wb__rooms .wb__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--step) var(--space-2); padding: 3px; background: none; }
.wb.is-stage .wb__rooms :is(.wb__strip-view, .wb__strip-track) { display: contents; }
.wb.is-stage .wb__rooms .wb__strip-step { display: none; }
.wb.is-stage .wb__rooms .wb-thumb { width: auto; margin: 0; padding: 0; text-align: left; }
.wb.is-stage .wb__rooms .wb-thumb--own::before { display: none; }
/* The visitor's own wall first, across the grid, a button of its own (owner, 2026-10-30: "Kendi duvarını yükle ... en üste alalım"). */
.wb-thumb__own { display: none; }
.wb-thumb--camera { display: none; }
.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera) { order: -1; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--step); padding: var(--space-2); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-hairline); transition: background-color var(--motion), box-shadow var(--motion); }
.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera):hover { background: var(--color-surface-light); box-shadow: inset 0 0 0 1px var(--color-ink); }
.wb.is-stage .wb__rooms .wb-thumb--own[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera) .wb-thumb__pic { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; aspect-ratio: auto; border-radius: var(--radius-sm); background: var(--color-surface-light); font-size: 1.25rem; }
.wb.is-stage .wb__rooms .wb-thumb--own > .wb-thumb__name { display: none; }
.wb.is-stage .wb-thumb__own { display: grid; gap: 2px; min-width: 0; }
.wb-thumb__own strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.wb-thumb__own small { font-size: var(--text-xs); color: var(--color-text-muted); }
/* A touch screen gets Take a Photo beside it: the two share the row, each its icon over its words. */
@media (pointer: coarse) {
	.wb.is-stage .wb__rooms .wb-thumb--camera { display: flex; }
	.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera) { grid-column: auto; align-self: stretch; }
	.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera) .wb-thumb__pic { width: 2.75rem; height: 2.75rem; }
	.wb.is-stage .wb__rooms :is(.wb-thumb--own, .wb-thumb--camera) small { display: none; }
}
.wb.is-stage .wb__results { --wb-cols: 3; --wb-rows: 4; gap: var(--step) var(--space-2); } /* four rows at first (wall-builder-archive.js) */
/* Wide screens: the room on the left, whole, as large as its space allows;
   the panel on the right, the stage's height (owner, 2026-10-29, after the
   references, docs/design/wall-editor-refs.html: "panelin edit modda yan
   tarafta durması ... daha kullanışlı ve daha işlevsel"). Its ground is the
   stage's own (.wstage__editor::before), there before the builder is and
   sliding in from the right; its width is one number for both
   (--wstage-panel), so the room the stage glides to and the builder's room
   are the same picture. The header tabs at its top, Done, the tabs, the
   tab's page scrolling, and the foot. */
@media (min-width: 901px) {
	.wstage, .wstudio { --wstage-panel: 26rem; } /* the Gallery Builder page is a .wstudio too */
	.wstage__editor::before {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--wstage-panel);
		border-radius: var(--radius-card-lg); background: var(--color-surface);
		translate: calc(100% + var(--space-4)) 0; transition: translate 380ms cubic-bezier(0.55, 0, 0.75, 0.2);
	}
	:is(.wstage, .wstudio):is(.is-opening, .is-editing) .wstage__editor::before { translate: 0 0; transition: translate 680ms var(--ease-travel) 120ms; }
	:is(.wstage, .wstudio).is-opening .wstage__editor::before { background: linear-gradient(180deg, var(--color-surface) 30%, var(--color-surface-light) 50%, var(--color-surface) 70%) 0 0 / 100% 200%; animation: wstage-shimmer-down 1.4s linear 0.8s infinite; } /* waiting on the builder */
	.wb.is-stage {
		column-gap: var(--space-3);
		grid-template-columns: minmax(0, 1fr) var(--wstage-panel);
		grid-template-rows: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "room groups" "room tabs" "room what" "room sum" "room foot";
	}
	.wb.is-stage .wb__stage { width: min(100cqw, calc(100cqh * var(--ratio, 1.5))); border-radius: var(--radius-card-lg); } /* the whole room, as large as its space allows */
	.wb.is-stage .wb-ink__groups { margin: 0; } /* flush with the panel's top and sides */
	.wb.is-stage :is(.wb-ink__tabs, .wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters) { margin-inline: var(--pad); }
	.wb.is-stage :is(.wb__list, .wb__rooms, .wb__screen--posters) { margin-bottom: var(--step); }
	/* Coming in: the room fades in over the stage's, the panel's parts slide in one after another; going: the reverse. */
	.wb.is-stage .wb__view { animation: wstage-fade-in 260ms var(--ease-out) var(--wstage-wait, 0ms) both; }
	.wb.is-stage.is-arriving :is(.wb-ink__groups, .wb-ink__sum, .wb-ink__tabs, .wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters, .wb-ink__foot) { animation: wstage-slide-in 560ms var(--ease-travel) calc(var(--wstage-wait, 0ms) + var(--rise, 0ms)) both; }
	.wb.is-stage .wb-ink__tabs { --rise: 60ms; }
	.wb.is-stage :is(.wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters) { --rise: 100ms; }
	.wb.is-stage .wb-ink__sum { --rise: 140ms; }
	.wb.is-stage .wb-ink__foot { --rise: 180ms; }
	.wb.is-stage.is-leaving .wb__view { animation: wstage-fade-out 320ms var(--ease-out) both; }
	.wb.is-stage.is-leaving :is(.wb-ink__groups, .wb-ink__sum, .wb-ink__tabs, .wb__list, .wb__list-empty, .wb__rooms, .wb__screen--posters, .wb-ink__foot, .wb__resize, .wb-ink__act) { animation: wstage-slide-out 220ms ease-in both; }
}
@keyframes wstage-slide-in { from { opacity: 0; translate: 1.5rem 0; } }
@keyframes wstage-slide-out { to { opacity: 0; translate: 1rem 0; } }
@keyframes wstage-shimmer-down { to { background-position: 0 -200%; } }
/* Under 901px: the same parts in one column under the room (the phone's app gave way to it). */
@media (max-width: 900px) {
	.wb.is-stage {
		--pad: var(--space-3);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "room" "groups" "tabs" "what" "sum" "foot";
		animation: wstage-rise var(--motion-travel) var(--ease-travel) both;
	}
	.wb.is-stage.is-leaving { animation: wstage-fade-out 300ms var(--ease-out) both; }
	.wb.is-stage .wb__view { aspect-ratio: 4 / 3; max-height: 44svh; margin: 0 0 var(--step); border-radius: var(--radius-lg); background: var(--color-surface); }
	.wb.is-stage .wb__stage { justify-self: start; width: max(100cqw, calc(100cqh * var(--ratio, 1.5))); margin-left: calc((100cqw - max(100cqw, calc(100cqh * var(--ratio, 1.5)))) / 2); } /* the room covers the window, its middle kept: a grid lays an item wider than its cell from the start, so half the overflow goes left by hand */
	.wb.is-stage .wb__resize { --wb-dock: 1; }
	.wb.is-stage .wb-ink__groups { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
	.wb.is-stage .wb-ink__sum { margin: var(--step) 0 0; padding: var(--step) var(--pad) 0; border-top: 0; background: color-mix(in srgb, var(--zone-ink) 22%, var(--color-surface)); box-shadow: inset 0 1px 0 var(--color-hairline); } /* no panel ground on a phone: the wall and its foot share the foot's */
	.wb.is-stage .wb-ink__foot { box-shadow: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
	.wb.is-stage:not([data-ink-group="buy"]) .wb-ink__foot { margin-top: var(--step); } /* no summary over it under Customize: the foot keeps a step from the list */
	.wb.is-stage .wb__results { --wb-cols: 4; --wb-rows: 2; }
	.wb.is-stage:has(.wb__finder .filters.is-open, [data-worlds-open]) :is(.wb__view, .wb-ink__sum) { display: none; } /* the worlds' list and the filters need the column: the room and the total step aside while they are open */
}
/* A short or narrow screen (owner, 2026-10-30: "küçük ekran çözünürlüklerinde ve mobilde Customize kısmında fiyatlar
   görünmesin, Buy All'da daha küçük ve az yer kaplayacak şekilde"): the summary only under Buy All, in one slim line. */
@media (max-width: 900px), (max-height: 820px) {
	.wb.is-stage:not([data-ink-group="buy"]) .wb-ink__sum { display: none; }
	.wb.is-stage .wb-ink__sum { align-items: center; padding-block: var(--space-2); }
	/* Prices alone (owner, the same day: no "Your Wall · 5 prints" here): the saving on the left, then the price before
	   the sale struck and the total, white and larger, on the right. */
	.wb.is-stage .wb-ink__who { display: none; }
	.wb.is-stage .wb-ink__price { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: var(--space-2); }
	.wb.is-stage .wb-ink__was:not(:has(> del:empty)) { display: contents; font-size: var(--text-sm); }
	.wb.is-stage .wb-ink__was > del { font-size: var(--text-sm); color: var(--color-text-muted); }
	.wb.is-stage .wb-ink__off { order: -1; margin-right: auto; }
	.wb.is-stage .wb-ink__total { font-size: var(--text-xl); color: var(--color-text); }
}
@media (max-width: 640px) {
	.wstage__pin { grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); }
	.wstage__room { aspect-ratio: 1; max-height: min(46svh, calc(100svh - var(--header-h) - 25rem)); } /* square while the phone is tall (the room photo is 3:2, so the wall still spans it), lower on a short one: the 25rem keep a set's words and buttons clear of the walls row under them */
	.wstage__invite, .wstage__cap { grid-area: 2 / 1; align-self: center; justify-items: center; text-align: center; } /* in the middle of the room left between the room and the walls (owner, 2026-10-30: "ortada oluşan boşluğa") */
	.wstage__invite { justify-self: stretch; gap: var(--space-2); padding: 0; text-shadow: none; }
	.wstage__title { max-width: none; }
	.wstage__sub { font-size: var(--text-sm); }
	.wstage__cap { display: grid; padding: 0; background: none; }
	.wstage__acts { justify-content: center; }
	.wb.is-stage .wb-row__edit { padding-left: var(--space-3); } /* a phone's row starts its thumbnail a step in */
	.wb__strip.wstage__strip { grid-area: 3 / 1; --thumb-w: 7rem; }
	.wb__strip.wstage__strip { grid-template-columns: minmax(0, 1fr); }
	.wstage__editor { border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
	.wstage__layer, .wstage__layer .wb-frame, .wstage__ghost, .wstage__marks .cat-card__spot, .wstage__room, .wstage__strip, .wstage__editor, .wstage__strip .wb-thumb__pic .wb-mini { transition: none; }
	.wb.is-stage, .wb.is-stage *, .wstage__editor::before { animation: none !important; } /* every move of the builder coming and going, at once */
	.wstage.is-framed .wstage__layer .wb__stage, .wstage__editor::before, .wb-ink__tab::after { transition: none; }
}

/* COLLECTION INDEX ([d0_collection_index], the Collections page; owner,
   2026-10-28): a group per world, each the store's section head (title,
   count across) over a grid of doors, four across, three on a tablet, two
   on a phone; the Gallery Walls page's grid too. The doors are the home's
   caption doors, a 4:5 photo with the words under it (owner, 2026-11-08:
   "metinleri ... altında olsun"), each a wall on its room. */
.colidx__group + .colidx__group { margin-top: var(--space-6); }
.colidx__grid { --colidx-gap: var(--space-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--colidx-gap); }
@media (max-width: 980px) { .colidx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .colidx__grid { --colidx-gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The Collections page's mixed rows (owner, 2026-11-09: "iki küçük bir
   yatay, sonra tam altında solda bir yatay, iki küçük kart";
   d0_collection_index_wide()): a wide door spans two columns, its photo as
   tall as a small door's (the photo's padding is of the wide door's width,
   so half of it less the gap), its words a small door's size, its wall the
   whole room (inc/collection-walls.php, --v*-w). Under 980px two columns, a
   wide door a row of its own, the small ones in pairs. */
.colidx__cell--wide { grid-column: span 2; }
.colidx__cell--wide .cat-card--caption { --caption-width: calc((100% - var(--colidx-gap)) / 2); }
.colidx__cell--wide .cat-card--caption .cat-card__photo { padding-top: calc(var(--caption-ratio) * (100% - var(--colidx-gap)) / 2); }
.colidx__cell--wide .cat-card--caption .cat-card__words { font-size: clamp(var(--text-base), (100cqw - var(--colidx-gap)) * 0.028, var(--text-xl)); }
.colidx__cell--wide .cat-card--caption .ws-view .wb__stage { width: calc(100% * 100 / var(--vw-w)); left: calc(-100% * var(--vx-w) / var(--vw-w)); top: calc(-100% * var(--vy-w) / var(--vh-w)); }
@media (max-width: 980px) { .colidx__grid--mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The Gallery Walls page's tabs ([d0_wall_index]; owner, 2026-11-08: "sadece
   tab ve tabın arkasındaki bölümü kullanalım"; "sadece renkli alanın metin
   kısmı kalkacaktı"): the home's tab band without its title and count, a
   strip of the tab's tone right under the page band, so no room over the
   tabs and no hairline between them and the band. */
.windex .gtabs__block { padding-top: 0; }
.windex .gtabs__bar::before { content: none; }

/* The tab rows' arrows (scroll="yes"): the shared paper arrows
   (`.arrowbtn--paper`) at the right end of the tab row, as tall as the
   chips; the chips scroll beside them when the row is narrow.
   Hidden ≤640: the row swipes. */
.gtabs__nav { display: flex; flex: none; margin-left: auto; }
/* ROUND BUTTONS (owner, 2026-10-30): plain white circles at the large
   control height, a plain arrow in each; View All as a pill in words alone,
   the button family's type. The product tabs' trial (product-tabs-band.php,
   markup only for now) and the reviews' head (sections/reviews.php,
   wired to reviews.js). Under the pointer they turn ink, as every control. */
.roundnav { display: flex; flex: none; gap: var(--space-2); margin-left: var(--space-3); }
.roundbtn { display: grid; place-items: center; width: var(--roundbtn-h); height: var(--roundbtn-h); box-sizing: border-box; padding: 0; border: 0; border-radius: 50%; background: var(--zone-paper); color: var(--zone-ink); cursor: pointer; }
.roundbtn .icon { width: 1.1rem; height: 1.1rem; }
.roundbtn { transition: background-color var(--motion), color var(--motion); }
.roundbtn:hover { background: var(--zone-ink); color: var(--zone-paper); }
.roundbtn:focus-visible { outline: 2px solid var(--zone-ink); outline-offset: 2px; }
.roundbtn--words { text-decoration: none; width: auto; padding: 0 1.25em; border-radius: var(--radius-button); font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; margin-left: var(--space-2); } /* View All in words alone (owner, 2026-10-30): a pill at the circles' height, the button family's type in caps ("büyük yazalım"), set a little apart from the arrows ("arasını biraz daha açalım") */
.gtabs--band .gtabs__nav { display: none; } /* the black pill gives way to the trial (owner, 2026-10-30: "siyah olan butonları kaldır"); its markup stays in product-tabs-band.php for the trials */
.gtabs--band .roundnav { margin-left: auto; }
/* A landing's tabs on the page band's foot (band="page"; owner, 2026-10-30:
   "ana sayfadakinden örnek alarak ... üstteki header'ın son tarafına
   gömülelim"): the block takes the band's ink and its words turn paper (the
   ink token remapped, so the hairline, the strokes and the underline follow);
   no title or count, the band above says them; the cards sit on the zone's
   own ground. */
.gtabs--joined { background-color: transparent; }
.gtabs--joined .gtabs__block { --color-ink: var(--zone-paper); padding-top: 0; background-color: var(--zone-ink); color: var(--zone-paper); }
.gtabs--joined .roundbtn:hover { background: transparent; color: var(--zone-paper); box-shadow: inset 0 0 0 1px var(--zone-paper); } /* the paper button's turn-over would vanish into the ink: an outline instead */
.gtabs--joined .roundbtn:focus-visible { outline-color: var(--zone-paper); }
.gtabs [data-gtabs-link][hidden] { display: none; } /* the link's display would defeat the attribute */
.gtabs--scroll .gtabs__bar { flex-direction: row; align-items: center; }
.gtabs--scroll .gtabs__tabs { flex: 1 1 auto; min-width: 0; }
/* The tabs' See all is a paper pill in the arrows' grammar (owner,
   2026-09-16: "normal ok butonları gibi"): the control height, paper, ink
   label, inverts on hover. */
.gtabs .section__link { height: var(--control-h); padding-inline: var(--space-4); border-radius: var(--radius-pill); background: var(--zone-paper); color: var(--zone-ink); font-weight: var(--fw-medium); transition: background-color var(--motion), color var(--motion); } /* the chips' weight: bold read heavy in a pill (owner, 2026-09-16) */
.gtabs .section__link:hover { background: var(--zone-ink); color: var(--zone-paper); }
.gtabs .section__link > span:not(.label) { font-size: var(--text-base); } /* the arrows' chevron size (.arrowbtn), so the pill and the arrows beside it draw one glyph (owner, 2026-09-25) */
/* .segnav: a group of paper controls drawn as ONE pill in segments, a sand
   hairline between them (owner, 2026-09-25, their mock): the tab rows' See
   All + arrows, and the curated rows' arrows. See All sits without its
   chevron (the arrows beside it point already). Each segment still inverts
   on hover; the outer segments carry the pill's ends themselves, so no
   clipping box eats a focus ring. AFTER the See all pill above on purpose
   (equal weight, the later rule wins), and in this order: the hairline and
   the ends outrank the resets. Phones keep their own controls (each row's
   phone rule). */
@media (min-width: 641px) {
	/* One pill: no gap, a hairline between the segments (owner, 2026-09-25). */
	.segnav { gap: 0; }
	.segnav > .arrowbtn { border: 0; }
	.segnav > .arrowbtn,
	.segnav > .section__link { border-radius: 0; }
	.segnav > :not(:first-child) { border-left: 1px solid var(--zone-sand); }
	.segnav > :first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
	.segnav > :last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
	.segnav > [hidden] + * { border-left: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); } /* a tab without a page: the back arrow opens the pill */
	.segnav > .section__link > span:not(.label, .section__link-glyph) { display: none; }
	/* See all as an icon segment (owner, 2026-09-29: "See All butonları için
	   bir buton seç", the label on hover): the grid glyph alone, a square the
	   arrows' size, so it cannot be read as one more arrow. Hover or keyboard
	   focus opens the label beside it: its column grows from 0fr on the
	   reveal curve, so the label slides out instead of jumping, and the pill
	   grows to the left while the arrows stay put. The label is clipped, not
	   hidden, so the link keeps its name; the min-width 0 is what lets the
	   0fr column close. */
	.segnav > .section__link:not([hidden]) {
		display: inline-grid; grid-template-columns: auto 0fr; align-items: center; column-gap: 0;
		padding-inline: calc((var(--control-h) - var(--text-base)) / 2);
		transition: background-color var(--motion), color var(--motion), grid-template-columns var(--motion-reveal), column-gap var(--motion-reveal);
	}
	.segnav > .section__link > .section__link-glyph { display: inline-flex; font-size: var(--text-base); }
	.segnav > .section__link > .label { min-width: 0; overflow: hidden; white-space: nowrap; }
	.segnav > .section__link:is(:hover, :focus-visible) { grid-template-columns: auto 1fr; column-gap: var(--space-2); }
	/* .segnav--outline: the pill on the paper ground (the reviews rows, home
	   and PDP), where paper on paper would vanish, so a sand outline draws it
	   (owner, 2026-09-29: "beyaz, border çizgisiyle ayırt edici"). Every
	   segment but the last drops its right edge, so the next one's left
	   hairline is the one line between them; hover inks the outline with the
	   fill. Last in this block on purpose: it outranks the resets above at
	   equal weight, the hidden-segment rule included. */
	.segnav.segnav--outline > * { border: 1px solid var(--zone-sand); }
	.segnav.segnav--outline > :not(:last-child) { border-right: 0; }
	.segnav.segnav--outline > :not(:disabled):hover { border-color: var(--zone-ink); }
	/* The same outline wherever a row sits in a paper zone, with or without
	   the class (owner, 2026-10-21: the Movies tabs' and Wall Sets' arrows
	   had no edge on paper). A section placed straight on the page needs none
	   since 2026-10-31: the page ground is the beige (.site-main, by the zone
	   rules), where the paper segments read by their fill. Not the wall
	   sets' photo arrows (.hslider__nav), which sit on the picture. */
	.zone--paper .section .segnav:not(.hslider__nav) > * { border: 1px solid var(--zone-sand); }
	.zone--paper .section .segnav:not(.hslider__nav) > :not(:last-child) { border-right: 0; }
	.zone--paper .section .segnav:not(.hslider__nav) > :not(:disabled):hover { border-color: var(--zone-ink); }
}
/* Phones (owner, 2026-09-16, after a reference row): one line, the tab row
   fading at its right edge (a hint that it goes on) with See all beside it
   as the plain link it used to be; no arrows. The cards say "swipe" on
   their own: one card and the next one's edge per view, the track bleeding
   to the screen's edge with the first card on the gutter. */
@media (max-width: 640px) {
	.gtabs__nav > .arrowbtn { display: none; } /* the arrows only: See all rides in the same box */
	.gtabs .section__link { height: auto; padding: 0; border-radius: 0; background: none; color: var(--color-text); font-weight: var(--fw-bold); }
	.gtabs .section__link:hover { background: none; color: var(--color-accent); }
	.gtabs .section__link > span:not(.label) { font-size: 1.25rem; } /* the plain link's own chevron again (.section__link) */
	:is(.gtabs--scroll, .pdp-related) .prow__track > * { flex-basis: calc((100% - var(--space-4)) / 1.3); } /* the track bleeds to the screen's edge: the tablet rule under .prow__track */
}
.prow__track {
	display: flex; gap: var(--space-4);
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.prow__track::-webkit-scrollbar { display: none; }
.prow__track > * {
	flex: 0 0 calc((100% - (var(--per-view, 4) - 1) * var(--space-4)) / var(--per-view, 4));
	scroll-snap-align: start;
}
@media (max-width: 860px) {
	.prow__track > * { flex-basis: calc((100% - var(--space-4)) / 2); }
}
/* The tab rows, and the PDP's Complete the Look on the same rules (owner,
   2026-11-08), say "swipe" at every width: the phone's one card and the next
   one's edge, a size up each step (tablets: owner, 2026-09-25, "tablet
   modunda da gösterelim"; desktop: owner, 2026-11-02, "4lu urun kartlarinin
   saginda bir sonraki posterin kucuk bir kismini da gosterelim"). The
   columns and an edge on a desktop (--per-view + .3), three and an edge on a
   tablet on its side (861 to 1200, the landscape iPads at 1024 to 1194), two
   and an edge upright (641 to 860); the phone keeps its 1.3 (its own block,
   above). The track bleeds to the screen's edge, so the edge card runs off
   the screen rather than stopping at the gutter. */
:is(.gtabs--scroll, .pdp-related) .prow__track { margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--container-pad); scroll-padding-inline: var(--container-pad); }
@media (min-width: 1201px) {
	:is(.gtabs--scroll, .pdp-related) .prow__track > * { flex-basis: calc((100% - var(--per-view, 4) * var(--space-4)) / (var(--per-view, 4) + .3)); }
}
@media (min-width: 861px) and (max-width: 1200px) {
	:is(.gtabs--scroll, .pdp-related) .prow__track > * { flex-basis: calc((100% - 3 * var(--space-4)) / 3.3); }
}
@media (min-width: 641px) and (max-width: 860px) {
	:is(.gtabs--scroll, .pdp-related) .prow__track > * { flex-basis: calc((100% - 2 * var(--space-4)) / 2.3); }
}
/* The lookbook ([d0_lookbook], template-parts/sections/lookbook.php; the
   home's mixed sections, owner 2026-10-23): ONE row of four units on the
   store's card grid: product cards, collection doors or walls as doors
   (sets="…", the landings). */
.lookbook__row { --cat-card-ratio: 4 / 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
/* The cards' own box (template-parts/sections/lookbook.php): no box at all
   on a wider screen; a phone swipes it (below). */
.lookbook__cards { display: contents; }
.lookbook__row .cat-card:not(:has(.ws-view)) { aspect-ratio: auto; }
/* Doors (owner, 2026-10-28: "ilk sıranın üç eşit parçaya bölünmesini ...
   ürün kartlarından daha yüksek"): on a wide screen the row is three
   equal cards at 2:3, the doors' photos' own shape (438x656 at 1440 against
   the band's 498px product cards), 3:5 between 861 and 1199 where the
   product cards stand relatively taller (301x502 at 1024 against 449).
   Tablets: the doors at 2:3; phones keep 3:4. */
@media (min-width: 861px) {
	.lookbook__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lookbook__row .cat-card.cat-card--door { grid-column: auto; aspect-ratio: 2 / 3; }
}
@media (min-width: 861px) and (max-width: 1199px) {
	.lookbook__row .cat-card.cat-card--door { aspect-ratio: 3 / 5; }
}
@media (min-width: 641px) and (max-width: 860px) {
	.lookbook__row .cat-card.cat-card--door:not(:has(.ws-view)) { aspect-ratio: 2 / 3; }
}
@media (max-width: 860px) {
	.lookbook__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lookbook__row .cat-card:not(:has(.ws-view)) { aspect-ratio: 3 / 4; }
}
/* Caption doors (door_style="caption"): the card is its photo and its words,
   never a set shape. */
.lookbook__row .cat-card.cat-card--caption { aspect-ratio: auto; }
/* A wall as a caption door (sets="…", the landings; owner, 2026-10-31: the
   home's Collections cards, "görsel olarak bizim kendi oluşturduğumuz
   ekranları ... sadece bir Customize butonu"): its 4:5 photo is the wall on
   its room through the door window (inc/wall-cards.php 'door', --v*-d) at
   every width, a phone's swipe too; Customize on the photo's lower right,
   the button family's paper pill, as on the home's stage. */
.cat-card--caption .ws-view .wb__stage { width: calc(100% * 100 / var(--vw-d)); left: calc(-100% * var(--vx-d) / var(--vw-d)); top: calc(-100% * var(--vy-d) / var(--vh-d)); }
/* The product page's walls (inc/wall-door.php; owner, 2026-11-08: "kartların
   üstündeki posterlere + işareti koyalım"): a spot on each print's centre,
   on the stage so it rides with the window and the hover's scale, over the
   frames; the home doors' own spot, opening the print's quick view. */
.ws-spots { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ws-spots .cat-card__spot { translate: -50% -100%; } /* placed on the print's lower edge, lifted onto the print: the plus holds its foot's middle (owner, 2026-11-08: "alt orta kısmında tutunsun") */
.ws-spots .cat-card__spot-label { border-radius: var(--radius-button); } /* its name in a round-cornered pill (owner, the same day: "isim kutusunun köşelerini yuvarlak yap"); --radius-pill went square on 2026-10-26 */
.cat-card__customize { position: absolute; z-index: 2; top: calc(var(--caption-ratio) * 100cqw - var(--space-3)); right: var(--space-3); left: var(--space-3); transform: translateY(-100%); display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-2); pointer-events: none; }
.cat-card__customize > .button { pointer-events: auto; } /* the box itself lets clicks through to the photo */
/* The product page's pair, Customize and Buy All (owner, 2026-11-08:
   "Butonları kısaltalım. İki buton da sağ altta olsun. Sadece ikonları
   olsun, üstüne gelince açılsın. Mobilde kapalı dursun"): two round icons
   in the photo's corner; under the pointer (or keyboard focus) a button's
   words open to the left of its icon, the other one making room. Phones
   and touch screens keep them closed; each keeps its name for screen
   readers (aria-label). */
.cat-card__customize--icons { flex-wrap: nowrap; }
.cat-card__customize--icons > .button { gap: 0; padding-inline: calc((var(--b-h) - var(--b-icon)) / 2 - 1px); } /* a circle: the pill's 1px ring inside its height */
.cat-card__customize--icons .button__label { flex: 0 0 auto; max-width: 0; opacity: 0; transition: max-width var(--motion-reveal), margin var(--motion-reveal), opacity var(--motion); }
@media (hover: hover) and (min-width: 641px) {
	.cat-card__customize--icons > .button:is(:hover, :focus-visible) .button__label {
		max-width: 16em; opacity: 1;
		margin-inline: calc(var(--b-h) * var(--button-pad-ratio) - (var(--b-h) - var(--b-icon)) / 2 + 1px) calc(var(--b-h) * var(--button-gap-ratio)); /* the family's own padding before the words, its gap after them */
	}
}
@media (prefers-reduced-motion: reduce) {
	.cat-card__customize--icons .button__label { transition: none; }
}
/* Phones (owner, 2026-10-29: "Ürün kartı gibi ilk kart gözüksün, yanında
   köşeden ikinci kart kaydırılabilir, altında büyük kart"): the cards swipe
   as the product rows do (one card and the next one's edge, the track to
   the screen's edge, .prow__track), the doors at 2:3, a wall at its 4:5. */
@media (max-width: 640px) {
	.lookbook__row { grid-template-columns: minmax(0, 1fr); }
	.lookbook__cards { display: flex; gap: var(--space-4); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--container-pad); scroll-padding-inline: var(--container-pad); }
	.lookbook__cards::-webkit-scrollbar { display: none; }
	.lookbook__cards > * { --caption-width: calc((100% - var(--space-4)) / 1.3); flex: 0 0 var(--caption-width); scroll-snap-align: start; } /* a padding's % is of the track, not the card: a caption door's photo reads its width here */
	.lookbook__row .cat-card.cat-card--door:not(.cat-card--caption):not(:has(.ws-view)) { aspect-ratio: 2 / 3; }
	.lookbook__cards > .cat-card--caption { --caption-ratio: 1.5; } /* the photos' own 2:3, whole (owner, 2026-10-29: "görsel komple sığmadı"); the card about a product card's height */
	.lookbook__cards > .cat-card--caption:has(.ws-view) { --caption-ratio: 1.25; } /* a wall keeps its door window's 4:5 */
}
/* The builder a lookbook's Edit opens ([d0_wall_builder modal="yes"]): off
   the page, its head and its card hidden until wall-builder-app.js moves
   the card into the dialog (is-modal wide, is-app under 901px) and back.
   The section itself stays rendered: the dialog is made beside the card's
   place, and nothing under a hidden ancestor would show. */
.wb-sec--modal > .container > .section__head,
.wb-sec--modal .wb:not(.is-app, .is-modal) { display: none; }
/* A full plate (plate="full" on a crop card; owner, 2026-10-23: "arka planı
   ful olsun; metni de içine alacak"): the plate is the whole card, the
   poster on it and the words under it on one ground, the store's big
   corner; the words sit at the foot whatever the row's height. An accent or
   ink plate is dark: the card carries the .zone--dark remap on its own
   ground, so the words, the price and Quick buy turn paper. */
.card--plate-full { justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-card-lg); background: var(--card-ground, var(--color-surface)); color: var(--color-text); }
.card--plate-full.zone--dark { --zone-bg: var(--card-ground, var(--zone-ink)); }

/* Section heads sit tight over their rails (same rhythm as the gallery). */
.prow .section__head { margin-bottom: var(--space-4); }

/* The site's ONE background pattern: a 14px dot grid rising from the bottom
   of a band, erased upward into the band's own ground (`--dots-ground`).
   Shared by the term-rail surface band and `[d0_zone pattern="dots"]`; the
   dots take the band's border-strong, so a dark zone gets pale dots. */
.zone--dots {
	background-image:
		linear-gradient(to top, transparent 0%, var(--dots-ground) 52%),
		radial-gradient(color-mix(in srgb, var(--color-border-strong) 55%, transparent) 1px, transparent 1.5px);
	background-size: auto, 14px 14px;
}

.pdp-related { padding-block: 0; } /* outer rhythm comes from the spacer system (owner) */
.pdp-related__title { margin: 0; font-size: var(--text-2xl); } /* a section title like Made to Last, What Buyers Said and the FAQ (owner, 2026-10-31: one hierarchy) */
/* Its track is the home's tab row (.prow__track and its edge rules, shared under :is(.gtabs--scroll, .pdp-related)). */

.pdp-band--media { background: color-mix(in srgb, var(--pdp-facts-bg) var(--pdp-media-tint), var(--zone-paper)); --pdp-band-share: var(--pdp-media-share); } /* Discover More's colour, the poster's accent, under a white veil, round the stage; the stage keeps its own wall (owner, 2026-11-08) */
.pdp-band--info { background: var(--pdp-info-bg); --pdp-band-share: calc(1 - var(--pdp-media-share)); }
.pdp-band__cell {
	min-width: 0;
	width: min(100%, calc(var(--container-max) * var(--pdp-band-share, 0.5))); /* the band's share of the container: content keeps the container's rhythm */
	padding: var(--space-5) var(--container-pad); /* equal top/bottom (owner) */
}
/* When the info side is taller, the leftover splits evenly above and
   below the gallery instead of pooling at the bottom (owner): the band
   flexes so the cell takes the full band height, the cell centers. */
.pdp-band--media { display: flex; }
.pdp-band--media .pdp-band__cell {
	margin-left: auto;
	display: flex; flex-direction: column; justify-content: center;
}
.pdp-band--info .pdp-band__cell {
	/* Same gutter as every other column (--container-pad); a wider
	   padding-left here read as an extra edge (owner). The discovery box
	   below brings its own padding, so this cell adds none at the bottom.
	   The words fill the band inside the gutter (owner, 2026-11-02: Good
	   Mood's grammar; the 32rem cap of the same morning is gone). */
	width: 100%; padding-bottom: 0;
	/* No leftover height lands here or between Add to cart and the
	   discovery box (owner: "the gap after Add to cart"): the box takes it
	   (the Discovery box rules below). */
	display: flex; flex-direction: column; justify-content: center;
}

@media (max-width: 980px) {
	.single div.product { grid-template-columns: minmax(0, 1fr); } /* minmax is load-bearing: bare 1fr's auto-min let the gallery's natural width blow the page open */
	.pdp-band__cell { width: 100%; padding: var(--space-4) var(--container-pad); }
	.pdp-band--info .pdp-band__cell { padding-left: var(--container-pad); }
	.pdp-band--media { background: var(--pdp-info-bg); } /* stacked, the gallery band stands on the summary's ground, its thumbnails' row one piece with the page under it (owner, 2026-11-08: "arkaplan rengini zemin rengi yapalım"); the accent veil is for wide windows */
	.pstage .pgal__zoom { display: none; } /* no full-screen button on the picture: a tap on it opens full screen (owner, 2026-11-08) */
	.pstage .pgal__nav { display: none; } /* no arrows on the picture: a swipe and the thumbnails move it; wide windows keep them (owner, 2026-11-08) */
}

/* PDP HERO (owner, 2026-10-31: the first screen fits the window, the right
   side scrolls on, then the page does): the two bands in their own grid,
   then the trust strip in the flow. Which band holds on wide windows is
   set below (the gallery band until 2026-11-08, the info band since). The strip stopped
   holding to the foot on 2026-10-31 (owner: "güven barı yapışık olmasın,
   yer kazanalım"). Native scroll throughout (sticky). Short windows keep
   the bands at their content's height. */
.single div.product > .pdp-hero { grid-column: 1 / -1; }
.pdp-hero__bands {
	--pdp-info-col: max(calc((1 - var(--pdp-media-share)) * 100%), var(--pdp-info-min));
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--pdp-info-col));
}
@media (max-width: 980px) {
	.pdp-hero__bands { grid-template-columns: minmax(0, 1fr); }
}
/* On wide windows the gallery band stands still under the header at the
   window's height while the info band scrolls on (owner, 2026-11-08: one
   stage again, after a stacked gallery the same day). */
@media (min-width: 981px) {
	.pdp-hero__bands > .pdp-band--media { position: sticky; top: var(--header-h); align-self: start; height: calc(100dvh - var(--header-h)); }
	.pdp-band--info > :is(.pdp-band__cell, .pdp-more) { max-width: calc(var(--pdp-info-max) + 2 * var(--container-pad)); } /* the words cap from the left gutter (--pdp-info-max) */
	.pdp-details__inner { max-width: var(--pdp-info-max); } /* Discover More's words on the same cap, its colour to the edge */
	/* Discover More's title holds at the window's foot while the band scrolls,
	   and the whole box shows once the band's end does (owner, 2026-11-08:
	   "başlığını sağ alta yapıştırıyoruz, tamamen kayınca açılıyor"):
	   pdp-details-hold.js sets --pdp-details-peek, the title strip less the box. */
	.pdp-band--info > .pdp-details { position: sticky; bottom: var(--pdp-details-peek, 0px); z-index: 1; padding-top: 0; }
	.pdp-band--info .pdp-details__title { display: flex; align-items: center; min-height: var(--pdp-details-strip); margin-bottom: 0; } /* the strip is the title's own row, its words in the middle */
}

/* PDP STAGE VIEWS + TO SCALE (owner, 2026-11-02, from the docs/design/pdp.html
   canvas): the stage opens In a Room, the gallery as it was; To Scale lays a
   measured wall over the same box (template-parts/scale-wall.php,
   pdp-scale.js), and picking a size turns to it. On the wall everything is
   placed in inches: --floor is the inch at the wall's foot, --span the inches
   it shows (2 ft to 7 ft 8 in, so the 30 in console shows as a ledge), --u
   one inch on screen. The frame is the store's 9-slice moulding, the shadow
   and the light on the print are the frame scene's (.fscene). */
/* The stage takes the whole media band (owner, 2026-11-02, from the canvas:
   "sol kısımdaki büyük görsel tam bir arkaplan olarak davranıyor ve galeri
   görselleri daha küçük altta duruyor"): no gutter and no corners, the
   picture fills it as a background at any window size, and the thumbnails
   sit under it as a row of small squares on the band's ground. Scoped to
   the PDP's stage: the quick view keeps the shared gallery as it is. */
.pdp-band--media .pdp-band__cell { width: 100%; padding: 0; }
.pstage .pgal__stage { border-radius: 0; }
/* The PDP's thumbnails stay square (a 7px corner was tried on 2026-11-08). */
/* The PDP's walls are flat (owner, 2026-11-08: "düzleştir"): the scene, its thumbnail, its full-screen view and To Scale; the frame keeps its shadow, the cards keep the lit wall. */
.pstage .fscene, .pstage .pscale { background: var(--mock-wall-flat); }
.pstage .pgal--rail-bottom { gap: 0; }
.pstage .pgal--rail-bottom .pgal__thumbs { gap: var(--space-2); padding: var(--space-3) var(--container-pad) 0; } /* nothing under the row: the summary's cell sets the breadcrumb's gap */
.pdp-band--info > .pdp-band__cell:not(.pdp-promises-cell) { padding-top: calc(var(--space-4) + var(--space-2)); } /* 32px over the breadcrumb at every width, from the header or the thumbnails (owner, 2026-11-08: 16 and 20 tried, then "32 yap") */
.pstage .pgal--rail-bottom .pgal__thumb { flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: 1 / 1; } /* tablets and phones: the row's width shared out, however many (owner, 2026-11-08: "otomatik tüm genişliğe sığan"); wide windows set their own (PDP STAGE, WIDE) */
.pstage .pgal--rail-bottom .pgal__thumb :is(img, .fscene) { height: 100%; object-fit: cover; }
.pstage { position: relative; display: flex; flex-direction: column; min-height: 0; }
.pstage:has(> .pgal--fill) { flex: 1; } /* the fill gallery still takes the band's height through the stage */
.pstage[data-view="scale"] > .pgal { visibility: hidden; } /* kept in the flow: the wall takes the gallery's box */
.pviews { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-button); background: var(--color-bg); } /* full round, like the buttons (owner, 2026-11-02: "köşeleri tam radius"; --radius-pill went square on 2026-10-26) */
.pviews__btn {
	height: calc(var(--control-h-sm) - 6px); padding: 0 var(--space-3);
	border: 0; border-radius: var(--radius-button); background: none; color: var(--color-text-muted);
	font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer;
	transition: background-color var(--motion), color var(--motion);
}
.pviews__btn:hover { color: var(--color-text); }
.pviews__btn.is-active { background: var(--control-active); color: var(--color-accent-contrast); }

/* The wall shows 14 in to 82 in off the floor: low enough for the console's
   legs to read as a table (owner, 2026-11-02: the strip was not
   "anlaşılır"), high enough for a 40 in print hung 8 in above it. */
.pscale {
	--floor: 14; --span: 68; --u: calc(100cqh / var(--span));
	position: absolute; inset: 0; z-index: 2; overflow: hidden; container-type: size;
	background: var(--mock-wall);
}
.pscale[hidden] { display: none; }
.pscale__ruler { position: absolute; inset: 0 auto 0 0; width: 3rem; }
.pscale__ruler i { position: absolute; left: 0; bottom: calc((var(--in) - var(--floor)) * var(--u)); width: 6px; height: 1px; background: color-mix(in srgb, var(--color-text-muted) 40%, transparent); }
.pscale__ruler i.is-half { width: 10px; }
.pscale__ruler i.is-foot { width: 16px; background: var(--color-text-muted); }
.pscale__ruler b { position: absolute; left: 20px; bottom: calc((var(--in) - var(--floor)) * var(--u)); translate: 0 50%; font-size: var(--text-badge); font-weight: var(--fw-medium); line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A 30 in oak console table seen from the front: the box is its 1.25 in
   top, the apron of three drawers hangs under it (::before) and two legs
   run on past the view's foot (::after). One soft shadow, cast left like
   the frames', stands it off the wall. */
.pscale__console {
	--oak-shade: color-mix(in srgb, var(--wood-oak) 82%, var(--wood-walnut));
	--oak-line: color-mix(in srgb, var(--wood-oak) 45%, var(--wood-walnut));
	position: absolute; left: 50%; bottom: calc((30 - 1.25 - var(--floor)) * var(--u)); translate: -50% 0;
	width: min(calc(64 * var(--u)), calc(100% - 6 * var(--u))); height: calc(1.25 * var(--u)); /* never wider than the view: its legs must show */
	background: linear-gradient(color-mix(in srgb, var(--wood-oak) 70%, white) 0 22%, var(--wood-oak) 0);
	filter: drop-shadow(calc(-0.5 * var(--u)) calc(0.4 * var(--u)) calc(0.8 * var(--u)) color-mix(in srgb, var(--mock-shadow) 30%, transparent));
}
.pscale__console::before, .pscale__console::after { content: ""; position: absolute; left: calc(1 * var(--u)); right: calc(1 * var(--u)); top: 100%; }
.pscale__console::before {
	height: calc(6.5 * var(--u));
	background:
		linear-gradient(to right, transparent calc(100% / 6 - 1.5 * var(--u)), var(--oak-line) 0 calc(100% / 6 + 1.5 * var(--u)), transparent 0 calc(50% - 1.5 * var(--u)), var(--oak-line) 0 calc(50% + 1.5 * var(--u)), transparent 0 calc(500% / 6 - 1.5 * var(--u)), var(--oak-line) 0 calc(500% / 6 + 1.5 * var(--u)), transparent 0) center / 100% calc(0.4 * var(--u)) no-repeat,
		linear-gradient(to right, transparent calc(100% / 3 - 0.5px), var(--oak-line) 0 calc(100% / 3 + 0.5px), transparent 0 calc(200% / 3 - 0.5px), var(--oak-line) 0 calc(200% / 3 + 0.5px), transparent 0),
		var(--wood-oak);
	box-shadow: inset 0 calc(0.5 * var(--u)) calc(0.6 * var(--u)) calc(-0.3 * var(--u)) color-mix(in srgb, var(--mock-shadow) 45%, transparent); /* the top's shade on the drawers */
}
.pscale__console::after {
	margin-top: calc(6.5 * var(--u)); height: calc(30 * var(--u));
	background: linear-gradient(to right, var(--oak-shade) 0 calc(1.5 * var(--u)), transparent 0 calc(100% - 1.5 * var(--u)), var(--oak-shade) 0);
}
.pscale__note { position: absolute; left: 50%; bottom: calc((22.25 - var(--floor)) * var(--u) / 2); translate: -50% 50%; margin: 0; font-size: var(--text-xs); line-height: 1.2; white-space: nowrap; color: var(--color-ink); } /* a label on the wall between the console's legs, clear of the art at every size */
/* The frame is the main mockup's (owner, 2026-11-02: "Ana mockupta kullandığımız
   ile aynı yapalım"): its moulding is the scene frame's share at 18x24 (1.225% of
   the scene, 1.73% of the frame's height: 0.43 in), held in inches so a bigger
   print does not get a heavier frame, and its shadow, light and the print's
   shade are the .fscene values against --box, the scene this frame would fill
   (its height is 70.65% of it). */
.pscale__hang {
	--mould: 0.43;
	--box: calc((var(--h) + 2 * var(--mould)) * var(--u) / 0.7065);
	position: absolute; left: 50%; bottom: calc((38 - var(--floor)) * var(--u)); translate: -50% 0; margin: 0;
	width: calc((var(--w) + 2 * var(--mould)) * var(--u)); height: calc((var(--h) + 2 * var(--mould)) * var(--u));
	transition: width var(--motion-arrive), height var(--motion-arrive);
}
.pscale__frame {
	--m: calc(var(--mould) * var(--u));
	--frame-face: var(--frame-black-face); --frame-lip: var(--frame-black-lip);
	position: absolute; inset: 0; padding: var(--m);
	border-image: url(../img/frames/frame-black.webp) 128 / var(--m) stretch;
	background: linear-gradient(var(--frame-lip), var(--frame-lip)) content-box, var(--frame-face);
	box-shadow: calc(-0.0445 * var(--box)) calc(0.01 * var(--box)) calc(0.036 * var(--box)) calc(-0.01 * var(--box)) color-mix(in srgb, var(--mock-shadow) 57%, transparent);
}
/* The right moulding catches the light, mitred like the moulding (.fscene). */
.pscale__frame::before {
	content: ""; position: absolute; inset: 0 0 0 auto; width: var(--m); pointer-events: none;
	background: rgb(255 255 255 / 0.1);
	clip-path: polygon(0 var(--m), 100% 0, 100% 100%, 0 calc(100% - var(--m)));
}
.pscale__hang[data-frame="unframed"] .pscale__frame::before { content: none; }
.pscale__hang[data-frame="white"] .pscale__frame { border-image-source: url(../img/frames/frame-white.webp); --frame-face: var(--frame-white-face); --frame-lip: var(--frame-white-lip); }
.pscale__hang[data-frame="natural"] .pscale__frame { border-image-source: url(../img/frames/frame-natural.webp); --frame-face: var(--frame-natural-face); --frame-lip: var(--frame-natural-lip); }
.pscale__hang[data-frame="dark"] .pscale__frame { border-image-source: url(../img/frames/frame-dark.webp); --frame-face: var(--frame-dark-face); --frame-lip: var(--frame-dark-lip); }
.pscale__hang[data-frame="unframed"] { --mould: 0; }
.pscale__hang[data-frame="unframed"] .pscale__frame { border-image: none; background: none; box-shadow: calc(-0.004 * var(--box)) calc(0.002 * var(--box)) calc(0.01 * var(--box)) color-mix(in srgb, var(--mock-shadow) 30%, transparent), 0 0 0 0.5px rgb(0 0 0 / 0.08); }
/* The light on the print, the shade the top and right mouldings throw onto it, and the rabbet's line (.fscene__window). */
.pscale__frame::after { content: ""; position: absolute; inset: var(--m); pointer-events: none; background: linear-gradient(100deg, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.05)); box-shadow: inset calc(-0.006 * var(--box)) calc(0.004 * var(--box)) calc(0.008 * var(--box)) color-mix(in srgb, var(--mock-shadow) 55%, transparent), inset 0 0 2px 0.5px rgb(0 0 0 / 0.35); }
.pscale__hang[data-frame="unframed"] .pscale__frame::after { box-shadow: none; }
.pscale__print { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Dimension lines, drawn like an elevation: they measure the print, and the drop measures the hang. */
.pscale__dim { position: absolute; color: var(--color-ink); font-size: var(--text-badge); font-weight: var(--fw-medium); line-height: 1.3; font-variant-numeric: tabular-nums; pointer-events: none; }
.pscale__dim::before, .pscale__dim::after { content: ""; position: absolute; background: currentColor; }
.pscale__dim--w { left: calc(var(--mould) * var(--u)); right: calc(var(--mould) * var(--u)); top: calc(100% + 2 * var(--u)); border-top: 1px solid; }
.pscale__dim--w::before, .pscale__dim--w::after { top: -4px; width: 1px; height: 7px; }
.pscale__dim--w::before { left: 0; }
.pscale__dim--w::after { right: 0; }
.pscale__dim--w .pscale__label { position: absolute; left: 50%; top: 5px; translate: -50% 0; white-space: nowrap; }
.pscale__dim--h, .pscale__dim--drop { border-left: 1px solid; }
.pscale__dim--h { top: calc(var(--mould) * var(--u)); bottom: calc(var(--mould) * var(--u)); left: calc(100% + 2.4 * var(--u)); }
.pscale__dim--drop { top: 100%; height: calc(8 * var(--u)); right: calc(100% + 2.4 * var(--u)); }
.pscale__dim--h::before, .pscale__dim--h::after, .pscale__dim--drop::before, .pscale__dim--drop::after { left: -4px; width: 7px; height: 1px; }
.pscale__dim--h::before, .pscale__dim--drop::before { top: 0; }
.pscale__dim--h::after, .pscale__dim--drop::after { bottom: 0; }
.pscale__dim--h .pscale__label { position: absolute; top: 50%; left: 5px; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; } /* read upwards, as an elevation writes its heights */
.pscale__dim--drop .pscale__label { position: absolute; top: 50%; right: 5px; translate: 0 -50%; white-space: nowrap; }
@media (max-width: 640px) {
	.pscale__ruler b:last-of-type { display: none; } /* the top foot mark sits under the view switch on a phone */
}
@media (prefers-reduced-motion: reduce) {
	.pscale__hang { transition: none; }
}

/* MAKE IT A WALL (owner, 2026-11-02: "ana kategori sayfalarındaki 3'lü
   card'lı setleri koy. Make it a wall ismi kalabilir"): the landings'
   Collections row ([d0_lookbook sets=…], inc/pdp-wall.php) under the page's
   section title, at the size of the page's other section titles. */
.single div.product > .lookbook { grid-column: 1 / -1; }
.single div.product > .lookbook .section__title { font-size: var(--text-2xl); }

/* Gallery — custom slider (woocommerce/single-product/product-image.php +
   gallery.js). Stockie-measured: 60px thumb rail on the left (absolute, so a
   long rail scrolls instead of stretching the row), square stage with
   in-frame controls: arrows bottom right, vertical dots on the right edge,
   shared N% badge top left. */
.pgal { position: relative; min-width: 0; }
.pgal--rail { padding-left: calc(3.75rem + var(--space-3)); }
.pgal__thumbs {
	position: absolute; top: 0; bottom: 0; left: 0; width: 3.75rem;
	display: flex; flex-direction: column; gap: var(--space-3);
	overflow-y: auto; scrollbar-width: none;
}
.pgal__thumbs::-webkit-scrollbar { display: none; }
/* Active thumb: 2px ink border flush on the image (no inner gap). A border,
   not an outline — outlines get clipped by the rail's scroll container. */
.pgal__thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: var(--radius-card); flex: none; }
.pgal__thumb img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-card) - 2px); }
.pgal__thumb.is-active { border-color: var(--control-active); }

.pgal__stage { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); }
/* Panel option "Fill the column height" (owner): the gallery grows to the
   band's height, which the taller summary column sets, so no air is left
   above and below. The stage has no aspect-ratio in this mode, so the
   slides' object-fit: cover trims the mockup left and right instead. */
.pgal--fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pgal--fill .pgal__stage { flex: 1; min-height: 0; }
.pgal--fill.pgal--rail .pgal__thumbs { top: 0; bottom: 0; }
/* In-frame controls all share the --space-4 inset (reference: 25px). */
.pgal__track {
	display: flex; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__track:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.pgal__slide { margin: 0; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.pgal__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hover zoom (gallery.js): the image scales 2x around the cursor to show
   print detail; the slide clips it. Hover-capable devices only. */
@media (hover: hover) {
	.pgal__slide { cursor: zoom-in; }
	.pgal__slide img { transition: transform var(--motion-reveal); }
	.pgal__slide.is-zooming img { transform: scale(2); }
}
/* Sticky in-place zoom (galleries without a lightbox, i.e. the quick view):
   the zoom button or a tap toggles it, on touch too (gallery.js). */
.pgal__slide.is-zoomed { cursor: zoom-out; }
.pgal__slide.is-zoomed img { transform: scale(2); }
/* The coded frame scene as the first slide (inc/frame-scene.php; owner,
   2026-10-26): it fills the slide, and a zoom scales the whole wall, never
   the print inside its frame. Its thumbnail is the same scene, square. */
.pgal__slide--scene { position: relative; }
.pgal__slide--scene > .fscene { position: absolute; inset: 0; transition: transform var(--motion-reveal); }
.pgal__slide--scene.is-zooming > .fscene,
.pgal__slide--scene.is-zoomed > .fscene { transform: scale(2); }
.pgal__slide--scene.is-zooming .fscene__print,
.pgal__slide--scene.is-zoomed .fscene__print { transform: none; }
.pgal__thumb .fscene, .pgal-lb__thumb .fscene { aspect-ratio: 1 / 1; border-radius: calc(var(--radius-card) - 2px); }

.pgal__nav { position: absolute; bottom: var(--space-4); right: var(--space-4); z-index: 2; display: flex; gap: var(--space-2); }
/* The round buttons (the PDP, buttons="round") at the first or last picture: the arrow goes muted and does not invert, as the floating arrows do. */
.pgal__nav .roundbtn:disabled { color: var(--color-text-muted); cursor: default; }
.pgal__nav .roundbtn:disabled:hover { background: var(--zone-paper); color: var(--color-text-muted); }

/* Vertical dots on the right edge: inactive = 6px filled dot, active = the
   same dot inside a 14px ring (reference-measured). */
.pgal__dots {
	position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%);
	z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.pgal__dot { position: relative; width: 14px; height: 14px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.pgal__dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink); }
.pgal__dot.is-active { border-color: var(--control-active); }

/* Rail side is a panel choice (Hanging Club → Product gallery thumbnails). */
.pgal--rail-right { padding-left: 0; padding-right: calc(3.75rem + var(--space-3)); }
.pgal--rail-right .pgal__thumbs { left: auto; right: 0; }
/* Dots mirror AWAY from the thumbs (owner): left rail -> right edge (the
   default above), right rail -> left edge, bottom row -> bottom center. */
.pgal--rail-right .pgal__dots { right: auto; left: var(--space-4); }
.pgal--rail-bottom .pgal__dots {
	top: auto; right: auto; bottom: var(--space-4); left: 50%;
	transform: translateX(-50%); flex-direction: row;
}
@media (max-width: 640px) {
	/* Phones (PC + tablet keep them — owner): no gallery dots at all, in
	   any rail variant; thumbs + swipe already carry the position. */
	.pgal__dots { display: none; }
}
/* Bottom variant (panel option): stage on top, thumbs as an even full-width
   row below — every thumb takes an equal share of the stage width. */
.pgal--rail-bottom { display: flex; flex-direction: column; gap: var(--space-3); }
.pgal--rail-bottom .pgal__stage { order: -1; } /* markup keeps thumbs first for the rail variants */
.pgal--rail-bottom .pgal__thumbs { position: static; width: auto; flex-direction: row; overflow: visible; }
.pgal--rail-bottom .pgal__thumb { flex: 1 1 0; min-width: 0; }
.pgal--rail-bottom .pgal__thumb img { width: 100%; }

.pgal__zoom { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; }

/* PDP STAGE, WIDE (owner, 2026-11-08, after the day's tries: Good Mood's
   square with a thumbnail column, then every picture stacked down the page):
   on wide windows the stage fills the standing gallery band, its width by
   the window under the header ("sol tarafı full w×h"), the photos covering
   it, and the thumbnails sit on it in one row at the bottom centre ("sol
   tarafın merkez altına"), kept clear of the round arrows on the right (and
   as far from the left, so the row stays centred); more than fit scroll
   sideways. A click opens full screen, no hover zoom (product-image.php).
   After the gallery's rules so it wins by order; the quick view keeps its own. */
@media (min-width: 981px) {
	.pstage .pgal .pgal__thumbs {
		position: absolute; inset: auto auto var(--space-4) 50%; z-index: 2; translate: -50% 0; /* the base rail's top: 0 would stretch the row up the stage */
		display: flex; flex-direction: row; gap: var(--space-2);
		width: max-content; max-width: calc(100% - 2 * (2 * var(--roundbtn-h) + var(--space-2) + 2 * var(--space-4)));
		padding: 0; overflow-x: auto;
	}
	.pstage .pgal .pgal__thumb { flex: none; width: var(--pdp-thumb-size); aspect-ratio: 1 / 1; }
	.pstage .pgal .pgal__thumb :is(img, .fscene) { height: 100%; object-fit: cover; }
}

/* Lightbox — native <dialog> (ESC/focus handled by the platform). White
   near-opaque overlay (reference: 96%), centered image, floating controls. */
.pgal-lb {
	position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	overflow: hidden; /* the image FITS the screen — the dialog itself never scrolls */
	background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}
.pgal-lb::backdrop { background: none; }
/* Flex, not grid: a grid item's max-height:100% resolves against its
   content-sized row and never clamps — the image used to overflow the
   viewport and scroll the dialog. Flex percentages resolve against the
   stage itself, so the image auto-fits any screen. */
.pgal-lb__stage { position: absolute; inset: var(--space-6); margin: 0; display: flex; align-items: center; justify-content: center; }
.pgal-lb__stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.pgal-lb__scene { height: 100%; aspect-ratio: 1 / 1; max-width: 100%; } /* the first slide's scene, as tall as the stage */
/* Leave room for the bottom thumb strip so it never overlaps the image. */
.pgal-lb:has(.pgal-lb__thumbs) .pgal-lb__stage { bottom: 9rem; }
.pgal-lb__close { position: fixed; top: var(--space-4); right: var(--space-4); }
.pgal-lb__arrow { position: fixed; top: 50%; transform: translateY(-50%); }
.pgal-lb__arrow--prev { left: var(--space-4); }
.pgal-lb__arrow--next { right: var(--space-4); }
.pgal-lb__thumbs {
	position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
	display: flex; gap: var(--space-3); max-width: 80vw; overflow-x: auto; scrollbar-width: none;
}
.pgal-lb__thumbs::-webkit-scrollbar { display: none; }
.pgal-lb__thumb { width: 5rem; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: var(--radius-card); flex: none; }
.pgal-lb__thumb img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-card) - 2px); }
.pgal-lb__thumb.is-active { border-color: var(--color-ink); }

/* Summary — column order & type measured from the reference:
   breadcrumb → H1 → category → price → rating → short description →
   SKU/categories line → hairline-bounded option picker → actions.
   (Order lives in inc/woocommerce.php summary hooks.) */
.single .summary .product_title {
	font-size: var(--text-product-title); font-weight: var(--fw-bold);
	line-height: var(--lh-title); letter-spacing: var(--ls-tight);
	margin: 0; /* the price row below owns the gap, so it stays on the scale */
}
/* (.pdp-cat removed 2026-08-24 — the under-title category link is gone;
   cards and quick view keep their own category chip styles.) */
.single .summary .price { font-size: var(--text-xl); font-weight: var(--fw-semibold); display: block; }
/* Sale writing comes from the shared del/ins price block (top of file). */
/* Star rating (Woo's stylesheet is disabled; unicode stars, partial fill via
   the width% Woo puts on the inner span). Renders only when reviews exist. */
.single .woocommerce-product-rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-ui); }
.star-rating { position: relative; display: inline-block; height: 1em; line-height: 1; }
.star-rating::before { content: "★★★★★"; letter-spacing: 0.08em; color: var(--color-border-strong); }
.star-rating > span { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap; }
.star-rating > span::before { content: "★★★★★"; letter-spacing: 0.08em; color: var(--color-ink); }
.star-rating .rating, .star-rating > span > * { position: absolute; visibility: hidden; }
.woocommerce-review-link { color: var(--color-text-muted); text-decoration: none; }
.woocommerce-review-link:hover { color: var(--color-accent); }
/* Short description: body ink, not muted (reference-measured). Since
   2026-11-02 (PDP PANEL) it is the title group's one sentence, under the
   credit and over the price, at body size: the voice that talks, a step
   over the muted meta (it was a step under body, owner 2026-10-31, when it
   sat among the controls). */
.single .woocommerce-product-details__short-description { margin: var(--space-3) 0 0; font-size: var(--text-base); line-height: var(--lh-snug); }
.single .woocommerce-product-details__short-description p { margin: 0; }
/* Discovery box: Director / Cast / Genres links into the rest of the
   catalog. Dark warm brown (third band tone), white text, glued to the
   BOTTOM of the info band at full band width, the accordion's last row
   right on it (owner, 2026-10-31: "son akordiyondan sonra boşluk
   olmasın"). The summary holds to the band's top and any leftover height
   of the band deepens the box below its rows (owner, 2026-10-31: the gap
   above the breadcrumb on tall windows). Content shares the summary's left
   axis (space-5 = the cell's inner padding). */
.pdp-band--info { display: flex; flex-direction: column; }
.pdp-band--info .pdp-band__cell { flex: none; }
.pdp-band--info > .pdp-details { flex-grow: 1; }
.pdp-details {
	background: var(--pdp-facts-bg); color: #fff;
	padding: var(--space-4) var(--container-pad); /* shares the summary's gutter */
	font-size: var(--text-sm);
}
.pdp-details__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: #fff; }
.pdp-details__list { margin: 0; }
.pdp-details__row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.pdp-details__row:first-child { border-top: 0; } /* the title already bounds it */
.pdp-details dt { flex: 0 0 5.5rem; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.pdp-details dd { margin: 0; }
.pdp-details a { color: #fff; text-decoration: none; transition: color var(--motion); }
.pdp-details a:hover { color: #cac3af; } /* light ladder step on the dark ground */
.pdp-details__sep { margin: 0 0.5em; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 980px) {
	.pdp-details { padding-left: var(--container-pad); }
}
/* Add-to-cart + variations form */
.single form.cart { margin: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.single form.cart .quantity { display: inline-flex; }
.single form.cart .quantity input.qty {
	width: 4rem; height: var(--control-h); text-align: center; font: inherit;
	border: 1px solid var(--control-border); border-radius: var(--radius);
	-moz-appearance: textfield;
}
.single form.cart input.qty::-webkit-outer-spin-button,
.single form.cart input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single form.cart .single_add_to_cart_button { padding: 0.85em 2em; }
.single table.variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.single table.variations th { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; font-weight: var(--fw-semibold); vertical-align: middle; width: 1%; white-space: nowrap; }
.single table.variations td { padding: var(--space-2) 0; }
.single table.variations select {
	font: inherit; height: var(--control-h); padding: 0 2.4em 0 1.1em; min-width: 12rem;
	border: 1px solid var(--control-border); border-radius: var(--radius);
	background-color: var(--color-bg); color: var(--color-text); cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256' fill='%2324262b'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1em center;
}
.single .reset_variations { margin-left: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.single .woocommerce-variation-price { margin-bottom: var(--space-3); font-size: var(--text-lg); font-weight: var(--fw-semibold); }

/* The description's sections and Shipping & Returns (owner, 2026-10-31):
   one accordion under the buy box on the band's own ground, hairlines and
   arrows only (no cards, no discs). The hairlines cross the full band; the
   words and arrows keep the summary's axis (the band cell's cap). Nothing
   after the last row: Discover More meets it, and the plate's edge is the
   last row's bottom line. */
.pdp-more { margin-top: var(--space-4); }
/* The promises: a band cell of their own under the summary's (the same cap
   and gutter), none of the leftover height, 24px above and below (owner,
   2026-11-01: "Üst ve alt eşit olsun"): above, the buy box's own 16px and
   8 more; below, the accordion's own margin. */
.pdp-band--info > .pdp-promises-cell { margin-top: 0; padding-block: var(--space-2) 0; }
@media (max-width: 980px) {
	/* One column (owner, 2026-10-31: "mobilde Pay with'den sonra Discover
	   More gelsin, diğer bilgiler ondan sonra"): Pay with closes the
	   promises since 2026-11-02, so the promises come right after the buy
	   box, then Discover More, then the accordion and its Report line. */
	.pdp-band--info > .pdp-promises-cell { order: 1; padding-bottom: var(--space-4); }
	.pdp-band--info > .pdp-details { order: 2; }
	.pdp-band--info > .pdp-more { order: 3; }
}
/* The rows and their hairlines run inside the info band's gutter, the
   summary's width (owner, 2026-11-02). */
.pdp-acc__item { margin-inline: var(--container-pad); border-top: 1px solid var(--color-hairline); }
.pdp-acc__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding-block: var(--space-3); cursor: pointer; list-style: none;
	font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-normal); /* not bold, like the FAQ's questions (owner, 2026-10-31: "akordiyon başlıkları kalın olmasın") */
	color: var(--color-ink);
}
.pdp-acc__q::-webkit-details-marker { display: none; }
.pdp-acc__mark { display: grid; flex: none; transition: transform var(--motion); }
.pdp-acc__mark svg { width: 1rem; height: 1rem; }
.pdp-acc__item[open] .pdp-acc__mark { transform: rotate(90deg); }
.pdp-acc__a { padding-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.pdp-acc__a p { margin: 0 0 var(--space-2); }
.pdp-acc__a p:last-child { margin-bottom: 0; }
.pdp-acc__a ul { margin: 0 0 var(--space-2); padding-left: 1.2em; }
.pdp-acc__a li { margin-bottom: var(--space-1); }
/* Inside the rows (owner, 2026-11-08): a claim's name in ink before its
   line (template-parts/pdp-quality.php), and the policy links in the
   Shipping & Returns text wearing the Report It link's underline. */
.pdp-quality ul { padding-left: 0; } /* the site's lists carry no markers: the claims stand on the intro's edge, not indented under nothing */
.pdp-quality__term { color: var(--color-ink); }
.pdp-acc__a a {
	color: var(--color-ink);
	text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em;
	transition: text-decoration-color var(--motion);
}
.pdp-acc__a a:hover { text-decoration-color: currentColor; }
/* The facts' line under the accordion (inc/woocommerce.php
   d0_pdp_report_line; owner, 2026-11-02): its hairline closes the last row,
   the muted sentence asks, the link answers in ink. */
.pdp-report {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4em;
	margin: 0 var(--container-pad); padding: var(--space-3) 0 var(--space-4);
	border-top: 1px solid var(--color-hairline);
	font-size: var(--text-sm); color: var(--color-text-muted);
}
.pdp-report svg { flex: none; width: 1em; height: 1em; }
.pdp-report__link {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-weight: var(--fw-semibold); color: var(--color-ink);
	text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em;
	transition: text-decoration-color var(--motion);
}
.pdp-report__link:hover { text-decoration-color: currentColor; }

/* Reviews (Woo comments_template markup inside the reviews panel) */
/* Woo's own "N reviews for X" heading is replaced by our head row. */
:is(#reviews, #shop-reviews) .woocommerce-Reviews-title { display: none; }
:is(#reviews, #shop-reviews) .commentlist {
	display: flex; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
:is(#reviews, #shop-reviews) .commentlist::-webkit-scrollbar { display: none; }
:is(#reviews, #shop-reviews) .commentlist > li {
	/* Cells of .revlist now, not items in a scroller. TWO variants, not three
	   (owner, 2026-08-30): the old third tone was #DFDBCF at full strength,
	   heavy enough to read as a different component. Both variants now sit on
	   the ladder's two LIGHTEST steps and are told apart by a transparent
	   texture instead — the tone stays calm, the row still alternates.
	   The border is declared transparent here so both variants keep the same
	   padding box whether or not their hairline is painted. */
	display: flex;
	/* min-width 0 down the chain (li, container, comment-text): a one-line poster
	   name in the item row inflated the min-content width and a card spilled
	   52px out of its 316px cell (owner, 2026-09-06). */
	min-width: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-card-lg); padding: var(--space-4); /* the product cards' corner (owner, 2026-09-29) */
	transition: transform var(--motion), box-shadow var(--motion);
}
/* A — flat (owner). A 45° hairline weave came first and read as hatching; a
   fractal-noise paper grain replaced it and read well, but the owner's call is
   that this card carries no texture at all. The two variants are now told
   apart by TONE and by B's bloom alone, which is enough at this size. */
:is(#reviews, #shop-reviews) .commentlist > li:nth-of-type(odd) {
	background-color: var(--color-surface);
}
/* B — a soft bloom off the top-right corner, like light falling on paper. */
:is(#reviews, #shop-reviews) .commentlist > li:nth-of-type(even) {
	background-color: var(--color-bg);
	border-color: var(--color-border);
	background-image: radial-gradient(
		115% 85% at 100% 0%,
		color-mix(in srgb, var(--color-border) 60%, transparent) 0%,
		transparent 62%
	);
}
:is(#reviews, #shop-reviews) .commentlist > li:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(21, 20, 14, 0.07); }
:is(#reviews, #shop-reviews) .commentlist > li > .comment_container,
:is(#reviews, #shop-reviews) .commentlist > li article { display: flex; flex: 1; min-width: 0; }
.revlist.is-grid .commentlist { flex-wrap: wrap; overflow: visible; }
@media (max-width: 860px) {
	:is(#reviews, #shop-reviews) .commentlist > li { flex-basis: 92%; }
}
:is(#reviews, #shop-reviews) img.avatar { display: none; }
/* Card interior (reference-adapted): a quote mark and the score on top, the
   REVIEW carrying the card, the person signing at the bottom. The old layout
   put the name and oversized stars in a column beside the text, which read
   the wrong way round — the customer's words are the point. */
:is(#reviews, #shop-reviews) .comment-text { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-width: 0; }
.revcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
/* The quote is the movement, in a tone quiet enough to stay behind the words.
   Serif, not display: see --font-quote. A serif " needs no faked weight and
   sits lower, so it is nudged back up onto the score chip's line. */
.revcard__quote {
	font-family: var(--font-quote); font-size: 5rem; font-weight: var(--fw-normal);
	line-height: 1;
	/* A " is ~27% ink in a 100% box, all of it far above the baseline, so the
	   glyph box says nothing about where the mark LOOKS like it sits. Both
	   margins are measured, not guessed: -0.07em drops the ink's centre onto
	   the score chip's centre, -0.58em collapses the empty box beneath it so
	   the chip alone sets the row height. */
	margin-top: -0.07em; margin-bottom: -0.58em;
	color: var(--color-border-strong); user-select: none;
}
.revcard__score {
	display: inline-flex; align-items: center; gap: 0.3em;
	padding: 0.25em 0.6em; border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
	color: var(--color-ink);
}
.revcard__score-star { color: var(--color-accent); }
:is(#reviews, #shop-reviews) .comment-text > .description { flex: 1; }
:is(#reviews, #shop-reviews) .description p { margin: 0 0 var(--space-2); }
:is(#reviews, #shop-reviews) .description p:last-child { margin-bottom: 0; }

.revcard__by {
	display: flex; align-items: center; gap: var(--space-3);
	margin-top: auto; padding-top: var(--space-3);
	border-top: 1px solid var(--color-hairline);
}
/* No avatars: we have no customer photographs, and a stock face would be a
   lie. The initial does the same job honestly.
   Tried inverted (ink tile, light letter) and reverted at the owner's call:
   a solid dark dot is too hard for a card this warm, and it pulled the eye
   away from the words. Softness wins over contrast here. */
.revcard__initial {
	flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--color-surface);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
	color: var(--color-ink);
}
.revcard__who { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.revcard__name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-ink); }
.revcard__meta { display: flex; align-items: center; gap: 0.5em; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Borrowed card (shop-reviews block): which poster the review belongs to, as
   Etsy shows the purchased item under a review — thumb + name + chevron, one
   hairline row right above the signature. A hairline, not a fill, so it sits
   on both card variants. It first lived in the meta line and wrapped to three
   lines in the 107px between the initial tile and the Verified badge. */
.revcard__item {
	display: flex; align-items: center; gap: var(--space-2);
	margin-top: auto; padding: var(--space-2);
	border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	color: var(--color-ink); text-decoration: none;
	transition: border-color var(--motion);
}
.revcard__item:hover { border-color: var(--color-border-strong); }
.revcard__item-thumb { flex: none; width: 2.25rem; height: 2.25rem; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); }
.revcard__item-name {
	flex: 1; min-width: 0;
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.revcard__item svg { flex: none; width: 1rem; height: 1rem; color: var(--color-text-muted); }
/* The signature keeps its own hairline; the item row above it adds no second one. */
.revcard__item + .revcard__by { margin-top: 0; }
/* Verification badge, pushed to the far edge of the signature row (owner's
   pick of seven, docs/design/review-signature.html). It left the meta line
   because sharing that line with the date read as a run-on, and "Verified
   purchase" broke onto two words on a narrow card. Outlined rather than
   filled so it does not fight the score chip at the top of the same card.
   --radius-pill is correct here: this is a badge, never a button.
   The word is trimmed to "Verified" for the space; the full phrase is still
   announced, via the screen-reader half. */
.revcard__verified {
	margin-left: auto; flex: none;
	display: inline-flex; align-items: center; gap: 0.3em;
	padding: 0.2em 0.55em;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	/* --text-badge, not --text-xs: 12px is the scale's badge step and this is a
	   badge. Padding stays in em, so it shrinks with the type by itself. */
	font-size: var(--text-badge); font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	white-space: nowrap;
}
.revcard__verified svg { width: 1em; height: 1em; }
/* Customer photo (Etsy import, 2026-09-05): a square window between the score
   row and the words. A buyer's own shot is the strongest proof a card can
   carry, so it takes the card's full width; the other cards of the row
   stretch to match, their signature staying pinned to the bottom. */
.revcard__photo {
	display: block; aspect-ratio: 1; overflow: hidden;
	border-radius: var(--radius-sm); background: var(--color-surface);
}
.revcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion); }
.revcard__photo:hover img { transform: scale(1.03); }
/* Full-size customer photo: the gallery lightbox's shell (white 96% overlay,
   fitted image, floating close), for one image and no thumb strip. */
.revphoto {
	position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: hidden;
	background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}
.revphoto::backdrop { background: none; }
.revphoto__stage { position: absolute; inset: var(--space-6); margin: 0; display: flex; align-items: center; justify-content: center; }
.revphoto__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-card); }
.revphoto__close { position: fixed; top: var(--space-4); right: var(--space-4); }
:is(#reviews, #shop-reviews) .comment-text .description { align-self: start; }
:is(#reviews, #shop-reviews) .comment-text .description p { margin: 0 0 var(--space-2); }
@media (max-width: 640px) {
	:is(#reviews, #shop-reviews) .comment-text { grid-template-columns: 1fr; row-gap: var(--space-3); }
}
/* Surface fallback keeps a neutral circle when the gravatar can't load (dev). */
:is(#reviews, #shop-reviews) img.avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; flex: none; background: var(--color-surface); }
:is(#reviews, #shop-reviews) .comment-text { flex: 1; }
:is(#reviews, #shop-reviews) .comment-text .star-rating { margin-bottom: var(--space-1); font-size: var(--text-sm); }
:is(#reviews, #shop-reviews) .comment-text .meta { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
:is(#reviews, #shop-reviews) .woocommerce-review__author { font-weight: var(--fw-semibold); color: var(--color-text); }
:is(#reviews, #shop-reviews) .comment-text .description p { margin: 0 0 var(--space-1); }
:is(#reviews, #shop-reviews) .woocommerce-noreviews { color: var(--color-text-muted); }

/* Review form: raw Woo inputs mapped onto the control tokens (submit gets
   the shared .button class via woocommerce_product_review_comment_form_args). */
#review_form .comment-reply-title { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-4); }
#review_form p { margin: 0 0 var(--space-3); }
#review_form label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); }
#review_form input[type="text"],
#review_form input[type="email"] {
	width: 100%; height: var(--control-h); padding: 0 0.9em;
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg);
}
#review_form textarea {
	width: 100%; min-height: 10rem; padding: 0.7em 0.9em;
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg);
}
#review_form input:focus-visible, #review_form textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -1px; }
/* Star picker (wc-single-product turns the rating select into p.stars links) */
#review_form p.stars { display: inline-flex; gap: 0.15em; margin: 0; font-size: 1.75rem; line-height: 1; }
#review_form p.stars a { position: relative; display: inline-block; width: 1.1em; height: 1.1em; text-indent: -999em; text-decoration: none; }
#review_form p.stars a::before { content: "\2605"; position: absolute; inset: 0; text-indent: 0; color: var(--color-border); }
#review_form p.stars:hover a::before { color: var(--color-ink); }
#review_form p.stars a:hover ~ a::before { color: var(--color-border); }
#review_form p.stars.selected a::before { color: var(--color-ink); }
#review_form p.stars.selected a.active ~ a::before { color: var(--color-border); }

/* Review form, two-column (owner): rating (big stars) + name + email on
   the left, the review textarea filling the right, submit under it.
   The "email will not be published" note is dropped — the fields say it. */
#review_form_wrapper { border-top: 1px solid var(--color-hairline); padding-top: var(--space-5); }
#review_form .comment-form {
	display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
	column-gap: var(--space-6); row-gap: var(--space-3); align-items: start;
}
#review_form .comment-notes { display: none; }
#review_form .comment-form-rating,
#review_form .comment-form-author,
#review_form .comment-form-email,
#review_form .comment-form-cookies-consent { grid-column: 1; margin: 0; }
#review_form .comment-form-comment { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; margin: 0; }
#review_form .comment-form-comment textarea { flex: 1; min-height: 14rem; }
#review_form .form-submit { grid-column: 2; justify-self: end; margin: 0; }
#review_form .comment-form-rating > label,
#review_form .comment-form-author > label,
#review_form .comment-form-email > label,
#review_form .comment-form-comment > label {
	font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted);
}
#review_form .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
#review_form .comment-form-cookies-consent label { margin: 0; font-size: var(--text-xs); }
@media (max-width: 860px) {
	#review_form .comment-form { grid-template-columns: 1fr; }
	#review_form .comment-form-comment { grid-column: 1; grid-row: auto; }
	#review_form .form-submit { grid-column: 1; justify-self: stretch; }
}


/* Related products */
.single .related { margin-top: var(--space-section); }
.single .related > h2 { margin-bottom: var(--space-5); }

/* (Pre-split leftover removed: the 980px stack now lives with the
   .pdp-band rules — bands must touch, so no row gap.) */

/* ==================================================================
   MINI-CART DRAWER (Woo mini-cart markup, styled)
   ================================================================== */
/* The dialog reuses the .wallsheet shell (head / flex column / overflow), so
   both panels speak one language. The Woo fragment inside is re-ordered with
   flex order: items(1) → suggest strip(2) → dark total(3) → buttons(4). */
.mini-cart .widget_shopping_cart_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.mini-cart .woocommerce-mini-cart {
	order: 1;
	flex: 1 1 0; /* leftover height only, like .wallsheet__items: the quick-buy panel is never squeezed */
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0 var(--space-4);
	list-style: none;
}
/* A line (owner, 2026-11-08; woocommerce/cart/mini-cart.php): the print in
   its frame, flat (.fscene--flat); the name over the choice; opposite them
   the line's price over its quantity; the remove disc. */
.mini-cart .mini_cart_item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-4);
}
.mini-cart .mini_cart_item + .mini_cart_item { border-top: 1px solid var(--color-border); }
.mcart__thumb { display: block; width: 3rem; height: 4rem; }
.mcart__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); } /* a line without a flat print: WooCommerce's thumbnail */
.mcart__scene { width: 100%; height: 100%; }
.mcart__text, .mcart__figures { display: grid; gap: 2px; min-width: 0; }
.mcart__figures { justify-items: end; text-align: right; }
.mcart__name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* a long title takes two lines, never pushes the price */
	font-size: var(--text-ui); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
	color: var(--color-text); text-decoration: none;
	transition: color var(--motion);
}
a.mcart__name:hover { color: var(--color-accent); }
.mcart__price { font-size: var(--text-ui); font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcart__choice,
.mini-cart .mini_cart_item .quantity { font-size: var(--text-sm); color: var(--color-text-muted); }
.mini-cart .mini_cart_item .quantity { white-space: nowrap; }
/* A line without the store's options lists WooCommerce's item data: bare values, no "Frame:"/"Size:" labels (house style). */
.mini-cart .mini_cart_item dl.variation { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.mini-cart .mini_cart_item dl.variation dt { display: none; }
.mini-cart .mini_cart_item dl.variation dd { display: block; margin: 0; }
.mini-cart .mini_cart_item dl.variation dd p { margin: 0; }
/* Round remove disc (wall-sheet trash convention), the drawn close icon
   centred in it (the stock "×" glyph sat off its centre, owner 2026-11-08). */
.mini-cart .remove_from_cart_button {
	display: grid;
	place-items: center;
	width: var(--control-h-sm);
	height: var(--control-h-sm);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: 1rem;
	text-decoration: none;
	transition: background-color var(--motion), color var(--motion);
}
.mini-cart .remove_from_cart_button .icon { display: block; }
.mini-cart .remove_from_cart_button:hover { background: var(--color-border); color: var(--color-text); }
/* Phones: the gaps tighten so the name keeps its room. */
@media (max-width: 640px) {
	.mini-cart .mini_cart_item { column-gap: var(--space-2); }
}
/* Dark summary bar: the total and the buttons share the ink, so they read
   as ONE footer (same as .wallsheet__foot). The total (d0_mini_cart_total(),
   owner 2026-11-08): the Subtotal label with the sale's countdown under it,
   and opposite them the price stack (.pricestack). */
.mini-cart .woocommerce-mini-cart__total {
	order: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4) var(--space-4) var(--space-3);
	background: var(--color-ink);
	color: var(--color-accent-contrast);
}
.mcart__sum { flex: 1 1 auto; display: grid; gap: var(--space-1); min-width: 0; }
.mini-cart .woocommerce-mini-cart__total .pricestack { flex: none; } /* the price keeps its width; the countdown takes what is left (on a phone its time drops under its words) */
.mcart__label {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-accent-contrast) 65%, transparent);
}
.mini-cart .woocommerce-mini-cart__buttons {
	order: 4;
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-4);
	background: var(--color-ink);
}
.mini-cart .woocommerce-mini-cart__buttons .button { flex: 1 1 0; text-align: center; }
.mini-cart .woocommerce-mini-cart__buttons .button.checkout { background: var(--color-bg); color: var(--color-ink); }
.mini-cart .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--color-surface); }
.mini-cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: none;
	color: var(--color-accent-contrast);
	border: 1px solid color-mix(in srgb, var(--color-accent-contrast) 35%, transparent);
}
.mini-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover { border-color: var(--color-accent-contrast); }
.woocommerce-mini-cart__empty-message { order: 1; flex: 1 1 auto; margin: 0; padding: var(--space-4); color: var(--color-text-muted); }
/* Head sub: the live cart count renders as a plain number here (the bubble
   look is scoped to .header-actions) */
.wallsheet__sub .cart-count {
	display: inline;
	min-width: 0;
	height: auto;
	border-radius: 0;
	background: none;
	font: inherit;
	color: inherit;
}

/* ==================================================================
   WOO BLOCKS — cart + checkout pages.
   The block markup is WooCommerce's; this block only maps its components
   onto our tokens (buttons, controls, chips, cards) so both pages speak
   the theme's design language. Measured against Woo blocks defaults.
   ================================================================== */
/* Cart/checkout use the site's standard page width, not the narrow 60rem
   .page container. */
body.woocommerce-cart .container.page,
body.woocommerce-checkout .container.page { max-width: var(--container-max); }

/* Buttons (Proceed to checkout, Place order, Apply): our .button geometry,
   a pill like every button (--radius-button) */
.wc-block-components-button:not(.is-link) {
	height: var(--control-h);
	border: 0;
	border-radius: var(--radius-button);
	background: var(--color-ink);
	color: var(--color-accent-contrast);
	font-size: var(--text-ui);
	font-weight: var(--fw-semibold);
	transition: background-color var(--motion);
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background: #28241b;
	color: var(--color-accent-contrast);
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit; }

/* Form controls: keep the 50px large-control height, our borders + radius */
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-select select,
.wc-blocks-components-select__select,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-textarea {
	border: 1px solid var(--control-border) !important;
	border-radius: var(--radius-field) !important;
	background: var(--color-bg);
	color: var(--color-text);
}
/* Woo 11's country and state select (.wc-blocks-components-select__select)
   is see-through over its container, which paints white on Woo's own 4px
   corners: the container takes the field's ground and corners. */
.wc-blocks-components-select .wc-blocks-components-select__container { border-radius: var(--radius-field); background: var(--color-bg); }
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--color-ink) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent);
	outline: none;
}
.wc-block-components-form input[type="checkbox"],
.wc-block-components-form input[type="radio"],
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control__input { accent-color: var(--color-ink); }

/* Step titles (Contact information, Billing address, Payment options) */
.wc-block-checkout__form .wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__title {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold) !important;
	letter-spacing: var(--ls-heading);
}

/* Order summary / totals sidebar: ONE bordered card — the sidebar is the
   box; the summary block's own border would nest a box in a box. It rounds
   with the product page's boxes (--radius-card-lg, the panel's Card corners). */
.wc-block-components-sidebar {
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card-lg);
	background: var(--color-bg);
	padding: var(--space-4) !important;
}
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0 !important;
	border-radius: 0;
}
/* Inner separators between summary sections: hairline, like everywhere else */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
	border-color: var(--color-hairline) !important;
}

/* Product rows: name, thumbs, prices, "Save $X" chips */
.wc-block-components-product-name {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--color-accent); }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img { border-radius: var(--radius-card); }
.wc-block-components-product-price del { color: var(--color-text-muted); }
.wc-block-components-sale-badge {
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-sale);
	color: #fff;
	font-weight: var(--fw-medium);
}

/* Quantity stepper (cart page): minimalist — soft filled track, no border,
   tight - / + spacing (Stockie cart reference) */
.wc-block-components-quantity-selector {
	display: flex !important;
	align-items: center;
	border: 0;
	background: var(--control-bg);
	border-radius: var(--radius-field-sm);
	height: 1.9rem;
	width: 4.75rem !important;
}
.wc-block-components-quantity-selector::after { border: 0 !important; }
/* Children must FIT the 4.75rem track — blocks' default widths overflow it */
.wc-block-components-quantity-selector input {
	flex: 1 1 auto;
	min-width: 0 !important;
	width: 1.6rem !important;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	background: none;
	text-align: center;
}
.wc-block-components-quantity-selector button {
	flex: 0 0 auto;
	min-width: 1.4rem !important;
	width: 1.4rem !important;
	padding: 0 !important;
	color: var(--color-text-muted);
}
.wc-block-components-quantity-selector button:hover { color: var(--color-text); }

/* Cart item rows — one grid per row:
   [portrait thumb] [name / format / size] [qty centered] [total] [round trash]
   Blocks nests everything inside td.product > .wrap > .quantity; all three
   are flattened with display:contents so their children become grid items
   and can be placed into columns. */
table.wc-block-cart-items,
table.wc-block-cart-items tbody { display: block; }
table.wc-block-cart-items thead { display: none; }
.wc-block-cart-items__row {
	display: grid;
	grid-template-columns: auto 1fr auto minmax(7rem, auto) auto;
	/* Filler rows 1+4 center the name/meta pair against the taller thumb */
	grid-template-rows: 1fr auto auto 1fr;
	align-items: center;
	column-gap: var(--space-4);
	row-gap: 2px;
	padding-block: 0;
	border-bottom: 1px solid var(--color-hairline);
}
.wc-block-cart-items__row:first-child { border-top: 1px solid var(--color-hairline); }
/* Grid-ified cells must not keep the blocks table's own cell borders
   (they surfaced as stray short lines above the totals) */
.wc-block-cart-items__row td,
.wc-block-cart-item__image,
.wc-block-cart-item__total { border: 0 !important; }
/* !important throughout this row block: the blocks stylesheet loads AFTER
   the theme CSS, so equal-specificity overrides lose without it. */
.wc-block-cart-item__product,
.wc-block-cart-item__wrap,
.wc-block-cart-item__quantity { display: contents !important; }
.wc-block-cart-item__image { grid-column: 1; grid-row: 1 / 5; width: 4.5rem; padding: 0; }
.wc-block-cart-item__image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--color-surface);
}
/* Info column: name / unit price / bare variation values */
table.wc-block-cart-items .wc-block-components-product-name {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	font-size: var(--text-ui);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}
.wc-block-cart-item__prices { display: none !important; }   /* line total on the right is enough */
.wc-block-components-product-price ins { text-decoration: none; }
.wc-block-components-product-price del { margin-right: 0.35em; }
.wc-block-components-product-metadata { grid-column: 2; grid-row: 3; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Value-only variation lines: hide the "Frame:"/"Size:" labels and the "/"
   separator, stack each value on its own line */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details__name,
.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }
/* Middle column: quantity, vertically centered on the row */
.wc-block-cart-items__row .wc-block-components-quantity-selector {
	grid-column: 3;
	grid-row: 1 / 5;
	justify-self: center;
	align-self: center;
	margin: 0;
}
/* Total column */
.wc-block-cart-item__total { grid-column: 4; grid-row: 1 / 5; justify-self: end; align-self: center; text-align: right; padding: 0; }
.wc-block-cart-item__total .wc-block-components-product-price { font-size: var(--text-ui); font-weight: var(--fw-semibold); }
/* Round trash button, after the total */
table.wc-block-cart-items .wc-block-cart-item__remove-link {
	grid-column: 5;
	grid-row: 1 / 5;
	align-self: center;
	display: inline-grid !important;
	place-items: center;
	width: 2.25rem !important;
	height: 2.25rem !important;
	border-radius: 50% !important;
	background: var(--color-surface) !important;
	color: var(--color-text-muted);
	transition: background-color var(--motion), color var(--motion);
}
table.wc-block-cart-items .wc-block-cart-item__remove-link:hover { background: var(--color-border) !important; color: var(--color-text); }

@media (max-width: 640px) {
	/* Stack: thumb spans the info rows; qty / total / trash drop to row 5 */
	.wc-block-cart-items__row { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto auto 1fr auto; }
	.wc-block-cart-item__image { grid-row: 1 / 5; }
	table.wc-block-cart-items .wc-block-components-product-name { grid-column: 2 / 4; }
	.wc-block-components-product-metadata { grid-column: 2 / 4; }
	.wc-block-cart-items__row .wc-block-components-quantity-selector { grid-column: 2; grid-row: 5; justify-self: start; margin-block: var(--space-2); }
	.wc-block-cart-item__total { grid-column: 3; grid-row: 5; }
	table.wc-block-cart-items .wc-block-cart-item__remove-link { grid-column: 1; grid-row: 5; justify-self: start; margin-block: var(--space-2); }
}

/* Coupon toggle + inline links */
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}
.wc-block-components-totals-coupon-link:hover,
.wc-block-components-panel__button:hover { color: var(--color-accent); }

/* Totals row emphasis */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: var(--fw-semibold);
}

/* ---- Order confirmation (classic thank-you template) ---- */
.woocommerce-order h2 { font-size: var(--text-xl); }
.woocommerce-thankyou-order-received { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
/* Order meta strip: number / date / total / payment as one bordered card */
ul.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: var(--space-4) 0 var(--space-5);
	padding: var(--space-4);
	list-style: none;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius);
}
ul.woocommerce-thankyou-order-details li {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
ul.woocommerce-thankyou-order-details li strong {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-text);
}
/* The order's lines, totals and addresses are the account's order set
   (woocommerce/order/*.php: .order-lines, .order-totals, .order-addresses). */

/* ==================================================================
   MOBILE MENU (native <dialog>, a page under the header)
   ================================================================== */
/* A panel under the header (owner, 2026-11-10, after desenio.com's menu: "çok fazla margin ve padding ... menünün altına yakışan", then "tam sayfa yapma, örnekteki gibi yap"): the dialog starts where the header ends (--menu-top, main.js) and runs to the screen's foot, a strip of the page left beside it; the header stays in view over it, its button a cross. Rows in caps on one line height, a hairline under each; an entry with more opens a level of its own. */
.mobile-menu { position: fixed; inset: var(--menu-top, var(--header-h)) auto 0 0; width: min(calc(100% - 2rem), 26rem); max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--color-hairline); background: var(--color-bg); color: var(--color-text); box-shadow: 0 0 0 100vmax rgb(21 20 14 / 45%); clip-path: inset(0 -100vmax 0 0); } /* as the reference's: not the whole width, the page dimmed in the strip beside it. The dim is the panel's own shadow, cut off above it, so the header over the panel stays clear */
.mobile-menu[open] { animation: mobile-menu-in var(--motion-travel) both; } /* it slides in from the left edge, under the header */
@keyframes mobile-menu-in { from { translate: -100% 0; } to { translate: 0 0; } }
.mobile-menu::backdrop { background: transparent; }
.mobile-menu__body { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* a column: the foot keeps to the panel's foot when the rows end above it */
.mobile-menu__list { --row: 3.25rem; margin: 0; padding: 0; list-style: none; }
.mobile-menu__list > li { position: relative; border-bottom: 1px solid var(--color-hairline); }
.mobile-menu__list > li > a, .mobile-menu__rows a {
	display: flex; align-items: center; min-height: var(--row); padding-inline: var(--container-pad); text-decoration: none; color: var(--color-ink);
	font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); text-transform: uppercase;
}
/* An entry's own sub-menu from the menu editor (About's Shipping, FAQ, Contact): small links under its row. */
.mobile-menu__list .sub-menu { display: grid; gap: var(--space-2); margin: 0; padding: 0 var(--container-pad) var(--space-3); list-style: none; }
.mobile-menu__list .sub-menu a { color: var(--color-text); font-size: var(--text-sm); line-height: var(--lh-snug); text-decoration: none; }
/* An entry with more (inc/nav-mobile.php): its chevron on the row's right opens its level. */
.mobile-menu__toggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: calc(var(--row) + var(--container-pad) - var(--space-3)); height: var(--row); padding: 0; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
.mobile-menu__toggle svg { width: 1.1rem; height: 1.1rem; }
.mobile-menu__toggle:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -4px; }
/* An opened level: the other entries step out, the entry's row turns into the way back (its chevron on the left, turned round) on a tinted ground, and its body follows. */
.mobile-menu__list.is-deep > li:not(.is-open) { display: none; }
.mobile-menu__list > li.is-open { border-bottom: 0; }
.mobile-menu__list > li.is-open > a { padding-left: calc(var(--row) + var(--container-pad) - var(--space-3)); background: var(--color-surface); font-weight: var(--fw-bold); }
.mobile-menu__list > li.is-open > .mobile-menu__toggle { right: auto; left: 0; }
.mobile-menu__list > li.is-open > .mobile-menu__toggle svg { rotate: 180deg; }
.mobile-menu__rows { margin: 0; padding: 0; list-style: none; }
.mobile-menu__rows > li { border-bottom: 1px solid var(--color-hairline); }
.mobile-menu__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); padding: var(--space-4) var(--container-pad) var(--space-5); }
.mobile-menu__group:only-child { grid-column: 1 / -1; }
.mobile-menu__group:only-child .mobile-menu__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); } /* a level with one group lays its links on both columns */
.mobile-menu__head { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-ink); }
.mobile-menu__links { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mobile-menu__links a { color: var(--color-text); font-size: var(--text-sm); line-height: var(--lh-snug); text-decoration: none; }
.mobile-menu :is(.mobile-menu__list > li > a, .mobile-menu__rows a, .mobile-menu__links a, .mobile-menu__meta a):focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
/* The foot: the account and help side by side on the tinted ground, held at the panel's foot (owner, 2026-11-10). */
.mobile-menu__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding: var(--space-2) var(--container-pad); border-top: 1px solid var(--color-hairline); background: var(--color-surface); }
.mobile-menu__list.is-deep ~ .mobile-menu__meta, .mobile-menu__nav:has(.is-deep) ~ .mobile-menu__meta { display: none; } /* a level shows its own links only */
.mobile-menu__meta a { display: flex; align-items: center; gap: var(--space-2); min-height: 3rem; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); text-transform: uppercase; text-decoration: none; }
.mobile-menu__meta a + a { padding-left: var(--space-4); border-left: 1px solid var(--color-hairline); }
.mobile-menu__meta svg { width: 1.1rem; height: 1.1rem; }
/* The header's button while the menu is open: the cross in the lines' place. */
.nav-toggle__open, .nav-toggle__shut { display: grid; place-items: center; }
.nav-toggle__shut, .is-menu-open .nav-toggle__open { display: none; }
.is-menu-open .nav-toggle__shut { display: grid; }
@media (prefers-reduced-motion: reduce) { .mobile-menu[open] { animation: none; } }

/* ==================================================================
   GENERIC PAGE (privacy, FAQ, etc.)
   ================================================================== */
/* Scoped to .container.page so it never matches WP's body.page class. */
/* Pages sit on the SITE width like every other surface (owner). The top space
   now belongs to the header band above, so the container starts flush. */
/* Page band (owner, 2026-10-20, "Depth"; template-parts/page-band.php): the
   dark band at the top of every page but the home page. The page's name on
   the container axis with its search inside, and behind them five columns of
   the posters' own pictures (data/art/) drifting up and down at different
   depths: the far ones small, dim, slow and soft, the near ones large, bright
   and quick. Scrolling lifts each by its depth and the pointer leans them
   (page-band.js); a scrim keeps the words' side ink. The words set the
   height, never the pictures, so nothing shifts while they load. The drift
   is ambient and minutes long, the one clock here outside the motion tokens. */
/* The band's dim words and lines, shared with the wall builder's dark card
   (its poster chooser wears the band's search). */
.page-head, .wb {
	--band-dim: color-mix(in srgb, var(--zone-paper) 62%, transparent);
	--band-line: color-mix(in srgb, var(--zone-paper) 22%, transparent);
}
.page-head {
	position: relative; isolation: isolate; z-index: 20; /* its search's dropdowns float over the page below, the cards' badges (z-index 2) included; the sticky header (50) stays above */
	background: var(--zone-ink); color: var(--zone-paper); /* no gap of its own: a spacer under it sets it (owner, 2026-10-31: "Tüm sayfalarda bu tarz boşluklar için spacer kullanalım"; template-parts/page-head.php, archive-product.php, a landing's content) */
}
.page-head__art {
	position: absolute; inset: 0; z-index: -1; overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.page-head__art::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--zone-ink) 0%, var(--zone-ink) 34%, color-mix(in srgb, var(--zone-ink) 70%, transparent) 46%, transparent 64%);
}
.page-head__col {
	position: absolute; top: -10%; bottom: -10%; left: var(--x); width: var(--w);
	translate: calc(var(--lean-x, 0) * var(--depth) * -26px) calc(var(--lean-y, 0) * var(--depth) * -14px);
	transition: translate var(--motion-stage);
	animation: band-lift linear both; animation-timeline: view(); animation-range: exit;
}
.page-head__col:nth-child(1) { --i: 0; --x: 44%; --w: 8%; --depth: 0.3; --speed: 120s; }
.page-head__col:nth-child(2) { --i: 1; --x: 53.5%; --w: 12.5%; --depth: 1; --speed: 80s; --dir: reverse; }
.page-head__col:nth-child(3) { --i: 2; --x: 68%; --w: 10%; --depth: 0.6; --speed: 100s; }
.page-head__col:nth-child(4) { --i: 3; --x: 80%; --w: 12.5%; --depth: 0.85; --speed: 75s; --dir: reverse; }
.page-head__col:nth-child(5) { --i: 4; --x: 94%; --w: 8%; --depth: 0.3; --speed: 130s; }
.page-head__run { display: grid; gap: 14px; animation: band-drift var(--speed) linear infinite var(--dir, normal); }
.page-head__col img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-card);
	box-shadow: 0 20px 30px -18px #000;
	filter: brightness(calc(0.3 + var(--depth) * 0.62)) saturate(calc(0.4 + var(--depth) * 0.6)) blur(calc((1 - var(--depth)) * 3px));
}
@keyframes band-lift { to { transform: translateY(calc(var(--depth) * -140px)); } }
@keyframes band-drift { to { transform: translateY(calc(-50% - 7px)); } } /* one copy and its gap: the run is the column twice over */
.page-head__inner {
	position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	min-height: clamp(18rem, 12rem + 12vw, 24rem);
	padding-block: var(--space-6);
}
.page-head__crumbs {
	display: flex; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3);
	font-size: var(--text-sm); color: var(--band-dim);
}
.page-head__crumbs a { color: inherit; text-decoration: none; }
.page-head__crumbs a:hover, .page-head__crumbs [aria-current] { color: var(--zone-paper); }
.page__title { margin: 0; font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.page-head .page__title { color: var(--zone-paper); font-size: clamp(2.8rem, 2rem + 3.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.04em; }
.page-head__sub { margin: var(--space-3) 0 0; max-width: 44ch; font-size: var(--text-base); color: var(--band-dim); }

/* The search inside the band: the store's own controls (the filter panel on a
   list, the finder elsewhere) in dark glass. The tokens they are built from
   are remapped here, as a zone remaps them; their dropdowns stay paper
   islands (the rule by the zones). The wall builder's poster chooser
   wore the same glass while its card was dark; on the paper card the
   world's own panel, copied, is the plain filters card. */
.page-head__search {
	--color-bg: transparent;
	--color-surface: color-mix(in srgb, var(--zone-paper) 8%, transparent);
	--color-surface-light: color-mix(in srgb, var(--zone-paper) 6%, transparent);
	--color-text: var(--zone-paper); --color-text-muted: var(--band-dim);
	--color-ink: var(--zone-paper); --color-accent: var(--zone-paper); --color-accent-contrast: var(--zone-ink);
	--color-hairline: color-mix(in srgb, var(--zone-paper) 14%, transparent);
	--color-border: var(--band-line); --control-border: var(--band-line);
	--control-active: var(--zone-paper);
	--control-bg: color-mix(in srgb, var(--zone-paper) 8%, transparent);
	--control-bg-hover: color-mix(in srgb, var(--zone-paper) 14%, transparent);
	color: var(--zone-paper);
}
.page-head__search { width: 100%; margin-top: var(--space-5); }
.page-head .filters { margin-bottom: 0; }
.page-head .filters__shell,
.page-head__search > .search-sec__inner .search-sec__input {
	border: 1px solid var(--band-line);
	background: color-mix(in srgb, var(--zone-ink) 58%, transparent);
	box-shadow: none;
	border-radius: var(--radius-card-lg); /* the panel's Card corners, like the drawers (owner, 2026-10-30: "arama kutusu kenarlarına da radius") */
	-webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.page-head .filters .search-sec__input { border: 0; border-bottom: 1px solid var(--color-hairline); border-radius: calc(var(--radius-card-lg) - 1px) calc(var(--radius-card-lg) - 1px) 0 0; background: transparent; backdrop-filter: none; }
.page-head .filters__bar { border: 0; }
/* The band's filters are one line of words, a hairline between them (owner,
   2026-10-30: "kutu içinde kutu gibi ... aralarında sadece birer çizgi"):
   no pill boxes; the open one and the hovered one come up to full paper.
   The hairlines run the bar's full height, from the line under the search
   to the shell's edge (owner, 2026-11-08: "bölücü çizgi tam boy olsun"):
   the words reach over the bar's own padding, so each is as tall as the
   bar (a bigger target too), in the hairline the search's line is drawn in. */
.page-head .filters__bar { padding-left: 0; } /* the first word on the search icon's axis: the pills' own 1.4rem is the icon's */
.page-head .filters__pills { gap: 0; align-self: stretch; margin-block: calc(-1 * var(--space-2)); } /* the bar's padding-block */
.page-head .filters__pill { position: relative; height: auto; min-height: var(--control-h-sm); padding: 0 1.4rem; border: 0; background: none; color: var(--color-text-muted); }
.page-head .filters__pill:is(:hover, [aria-expanded="true"]) { background: none; color: var(--color-text); }
.page-head .filters__pill:not([hidden]) ~ .filters__pill::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--color-hairline); }
.page-head .filters__panel { border: 0; border-top: 1px solid var(--color-hairline); border-radius: 0 0 calc(var(--radius-card-lg) - 1px) calc(var(--radius-card-lg) - 1px); } /* its clip follows the shell's corners */
.page-head__search > .search-sec__inner { position: relative; max-width: 40rem; }
.page-head__search > .search-sec__inner .search-sec__results {
	position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: 30;
	border-radius: var(--radius-card-lg); box-shadow: 0 24px 48px -16px rgb(0 0 0 / 55%);
}
.page-head .search-sec__input::placeholder { color: var(--band-dim); }
.page-head__search .search-sec__icon { z-index: 1; } /* over the glass the input now paints */

/* The band climbs under the header (owner, 2026-10-21: "header menüyü
   anasayfadaki gibi siyah yapalım; bu bölüm bitince orijinal rengine
   dönsün"): the bar stands clear over it (the home hero's .is-clear, printed
   by header.php and kept by page-band.js) and the band reaches up behind it
   by the bar's height, the CSS token first, the measured one once the script
   runs. The pictures start below the bar, so the menu sits on plain ink. */
.has-band .page-head {
	margin-top: calc(-1 * var(--band-over, var(--header-h)));
	padding-top: var(--band-over, var(--header-h));
}
.has-band .page-head__art {
	-webkit-mask-image: linear-gradient(transparent, transparent var(--band-over, var(--header-h)), #000 calc(var(--band-over, var(--header-h)) + 4rem), #000 86%, transparent);
	mask-image: linear-gradient(transparent, transparent var(--band-over, var(--header-h)), #000 calc(var(--band-over, var(--header-h)) + 4rem), #000 86%, transparent);
}

/* Its windows are dark too (owner, 2026-10-21: the search's results opened
   white): the results, the quick entries and the Sort list in the band's
   glass, every word in the band's remapped tokens. */
.page-head__search :is(.search-sec__results, .dselect__list) {
	border: 1px solid var(--band-line);
	background: color-mix(in srgb, var(--zone-ink) 94%, transparent);
	color: var(--color-text);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.page-head .filters .search-sec__results { border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); } /* hangs from the search box's foot, on its corners */

@media (max-width: 640px) {
	/* Phones: the pictures fill the whole band, from the header down to the search row (owner, 2026-11-10: "görseller arama bandına kadar görünsün"; they showed in a dim strip under the header only). Four columns, larger, behind the words; an even veil of the band's own colour keeps the words readable, deepest where they stand, and nothing fades out at the band's foot. */
	.page-head__col { width: 27%; left: calc(var(--i) * 29.5% - 7%); }
	.page-head__col:nth-child(5) { display: none; }
	.page-head__art::after { background: linear-gradient(0deg, color-mix(in srgb, var(--zone-ink) 58%, transparent) 0%, color-mix(in srgb, var(--zone-ink) 68%, transparent) 30%, color-mix(in srgb, var(--zone-ink) 68%, transparent) 62%, color-mix(in srgb, var(--zone-ink) 30%, transparent)); }
	.has-band .page-head__art { -webkit-mask-image: linear-gradient(transparent, transparent var(--band-over, var(--header-h)), #000 calc(var(--band-over, var(--header-h)) + 2rem), #000); mask-image: linear-gradient(transparent, transparent var(--band-over, var(--header-h)), #000 calc(var(--band-over, var(--header-h)) + 2rem), #000); }
	.page-head--art :is(.page-head__crumbs, .page__title, .page-head__sub) { text-shadow: 0 1px 14px var(--zone-ink); } /* the words over pictures: a soft dark of the band's colour behind each line */
	.page-head .page__title { font-size: clamp(2.4rem, 11vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
	.page-head__run, .page-head__col { animation: none; }
	.page-head__col { transition: none; }
}

.container.page { padding-block: 0 var(--space-section); }

/* The page runs at site width. A page that embeds a component uses all of it.
   PROSE is different: a 170-character line cannot be read, because the eye
   loses its place on the return sweep. Short prose gets one centred reading
   column; a long page gets a sticky index beside it, so the leftover width
   carries something useful instead of stretching the text (owner). */
.page__article--prose { max-width: 62ch; margin-inline: auto; }
.page__article--prose .page__content > * { max-width: 62ch; }
/* Indexed pages: the text fills its column (owner). */
.page__article--indexed .page__layout {
	display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--space-6); align-items: start;
}
/* A section rendered INSIDE a page already sits in the page container: let its
   own container stop constraining, or the block ends up inset twice and reads
   as narrower than everything else on the site. */
.page__content .container { max-width: none; padding-inline: 0; }

.page-index { position: sticky; top: 6rem; }
.page-index__label {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted);
}
.page-index__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.page-index__list a {
	display: block; font-size: var(--text-sm); line-height: 1.35;
	color: var(--color-text-muted); text-decoration: none;
	border-left: 2px solid transparent; padding-left: 0.7em;
	transition: color var(--motion), border-color var(--motion);
}
.page-index__list a:hover { color: var(--color-ink); }
.page-index__list a.is-current { color: var(--color-ink); border-left-color: var(--color-ink); }
/* Anchors must clear the sticky header when jumped to. */
.page__content h3 { scroll-margin-top: 6rem; }

@media (max-width: 860px) {
	.page__article--indexed .page__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.page-index { position: static; }
}

.page__content > * { margin-bottom: var(--space-3); }
/* Direct children only: a section rendered inside the content has its own
   spacing, and this prose rule was pushing its card titles down 40px. */
.page__content > h2, .page__content > h3 { margin-top: var(--space-5); }
.page__content a { color: var(--color-accent); text-underline-offset: 2px; }
/* Blog index (home.php): one picture shape for every post, whatever its
   featured image's own proportions; the title reads as a heading, not a link. */
.blog-entry + .blog-entry { margin-top: var(--space-6); }
.blog-entry img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.page__content .blog-entry h2 a { color: var(--color-ink); text-decoration: none; }
.page__content .blog-entry h2 a:hover { color: var(--color-accent); }
/* A button link inside page content keeps the button's colours (the rule
   above is for prose links; the account's View / Pay / Confirm buttons are not). */
.page__content a.button { color: var(--color-accent-contrast); }
.page__content a.button--outline { color: var(--color-ink); }
.page__content a.button--outline:hover { color: var(--color-accent-contrast); }

/* ==================================================================
   MY ACCOUNT — the login card; the account shell follows in the next block.
   Woo prints its notices (errors, "address saved") above the content in
   .woocommerce-notices-wrapper; they read as one quiet bar each.
   ================================================================== */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info {
	margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); list-style: none;
	background: var(--color-surface); border-radius: var(--radius-card-half); font-size: var(--text-sm); color: var(--color-text);
}
.woocommerce-error { color: #b3261e; }
.woocommerce-error li + li, .woocommerce-message li + li { margin-top: var(--space-1); }
.page__content .woocommerce-notices-wrapper a { color: inherit; }
/* A notice that carries a button (Woo's "Confirm Email Address" on Orders): its words first, the small
   button at the row's end, wrapping under them on a phone (Woo prints the button before the words). */
.woocommerce-info:has(> .button), .woocommerce-message:has(> .button) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.woocommerce-info .button, .woocommerce-message .button {
	order: 1; flex: none; display: inline-flex; height: var(--control-h-sm); padding: 0 0.95em;
	border-radius: var(--radius-button); font-size: var(--text-sm);
}

/* The login: one card at reading width. With registration on, the register
   card takes the login card's place from the line under Log in (owner,
   2026-09-11: one at a time, never side by side; assets/js/account.js). */
.account-login { display: grid; grid-template-columns: minmax(0, 26rem); justify-content: center; align-items: start; gap: var(--space-5); margin-block: var(--space-4) var(--space-6); }
.account-login__card[hidden] { display: none; }
.account-login__card {
	display: flex; flex-direction: column; gap: var(--space-3);
	padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card-lg); /* a big box: the panel's Card corners, as the contact form's */
}
.account-login__title { margin: 0; font-size: var(--text-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.account-login__sub, .account-login__note { margin: calc(-1 * var(--space-2)) 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.account-login__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.page__content .account-login__lost { color: var(--color-text-muted); text-decoration: none; }
.page__content .account-login__lost:hover { color: var(--color-ink); }
.account-login__submit { width: 100%; margin-top: var(--space-1); }
.account-login__back { align-self: center; margin-top: var(--space-1); }
.account-login__switch { margin: var(--space-1) 0 0; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.account-login__switchlink { padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.account-login__switchlink:hover { color: var(--color-accent); }
/* Woo's privacy line in the register card (woocommerce_register_form). */
.account-login .woocommerce-privacy-policy-text { font-size: var(--text-xs); color: var(--color-text-muted); }
.account-login .woocommerce-privacy-policy-text p { margin: 0; }
.page__content .account-login .woocommerce-privacy-policy-text a { color: inherit; }

/* The shell: menu beside content (the indexed page's 3/9 split), the menu
   sticky under the header. On phones the menu becomes a scrolling chip row
   above the content (chips are selectors: the pill radius is within the
   rules, as on the grid tabs). */
.account { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.account__nav { position: sticky; top: 6rem; }
.account__menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.page__content .account__link {
	display: flex; align-items: center; gap: var(--space-3);
	height: var(--control-h); padding-inline: var(--space-3); border-radius: var(--radius-card-half); /* a small box, as the help tiles: --radius reads 0 since the square sweep */
	color: var(--color-text-muted); text-decoration: none;
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium);
	transition: background var(--motion), color var(--motion);
}
.page__content .account__link:hover { background: var(--color-surface); color: var(--color-ink); }
.page__content .account__link.is-current { background: var(--control-active); color: var(--color-bg); }
.account__link .icon { flex: none; font-size: 1.15em; }
.account__menu .is-logout { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.account__content { min-width: 0; }

/* The dashboard: a greeting and the tiles. */
.account-dash__head { margin-bottom: var(--space-5); }
.account-dash__title { margin: 0; font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.account-dash__sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.page__content .account-dash__sub a { color: inherit; }
.page__content .account-dash__sub a:hover { color: var(--color-ink); }
.account-dash__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.page__content .account-tile {
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-card-half);
	color: var(--color-text); text-decoration: none; transition: background var(--motion);
}
.page__content .account-tile:hover { background: var(--control-bg-hover); }
.account-tile__icon { display: inline-flex; font-size: 1.35rem; color: var(--color-ink); margin-bottom: var(--space-2); }
.account-tile__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.account-tile__line { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 860px) {
	.account { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.account__nav { position: static; }
	.account__menu { flex-direction: row; gap: var(--space-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
	.account__menu::-webkit-scrollbar { display: none; }
	.page__content .account__link { padding-inline: var(--space-4); border-radius: var(--radius-button); background: var(--control-bg); color: var(--color-ink); white-space: nowrap; } /* chips a finger presses: the buttons' corners */
	.page__content .account__link:hover { background: var(--control-bg-hover); }
	.page__content .account__link.is-current { background: var(--control-active); color: var(--color-bg); }
	.account__menu .is-logout { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 640px) {
	.account-dash__tiles { grid-template-columns: minmax(0, 1fr); }
}

/* A status chip (orders): the badge's type, tone by state. done = filled
   ink, open = outlined, wait = accent, off = muted. */
.status-chip {
	display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.65rem;
	border: 1px solid var(--color-ink); border-radius: var(--radius-card-lg); /* the card badge's corners, capped into round ends by the chip's height */
	background: var(--color-ink); color: var(--color-bg);
	font-size: var(--text-badge); font-weight: var(--fw-medium); text-transform: uppercase; line-height: var(--lh-body); white-space: nowrap;
}
.status-chip[data-tone="open"] { background: transparent; color: var(--color-ink); }
.status-chip[data-tone="wait"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.status-chip[data-tone="off"] { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }

/* The Orders list: one row per order, hairlines between. */
.order-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-hairline); }
.order-row {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
	padding-block: var(--space-4); border-bottom: 1px solid var(--color-hairline);
}
.order-row__shots { display: flex; flex-shrink: 0; }
.order-row__thumb {
	width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--radius-card);
	background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-bg);
}
.order-row__thumb + .order-row__thumb { margin-left: -0.9rem; }
.order-row__body { min-width: 0; }
.order-row__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.page__content .order-row__number { color: var(--color-ink); text-decoration: none; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-semibold); }
.page__content .order-row__number:hover { color: var(--color-accent); }
.order-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.order-row__actions { display: flex; gap: var(--space-2); }
.order-list__pages { display: flex; justify-content: space-between; margin-top: var(--space-4); }
.order-list__pages > :only-child { margin-left: auto; }

/* An empty section: a title, a line, a way forward. */
.account-empty { padding: var(--space-6) var(--space-4); text-align: center; background: var(--color-surface); border-radius: var(--radius-card-lg); }
.account-empty__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); }
.account-empty__line { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 640px) {
	.order-row { grid-template-columns: auto minmax(0, 1fr); }
	.order-row__head { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
	.order-row__thumb { width: 2.75rem; height: 2.75rem; }
	.order-row__thumb + .order-row__thumb { margin-left: -1.1rem; }
	.order-row__actions { grid-column: 1 / -1; }
	.order-row__actions .button { flex: 1; }
}

/* One order: the status line, then sections (downloads, items, addresses)
   with one title style. */
.order-view__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.order-view__line { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.page__content .order-view__back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.page__content .order-view__back:hover { color: var(--color-ink); }
.order-section__title {
	margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted);
}
.order-details, .order-downloads, .order-notes { margin-bottom: var(--space-6); }

.order-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-hairline); }
.order-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-hairline); }
.order-line__media { display: block; line-height: 0; }
.order-line__img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); }
.order-line__body { min-width: 0; }
.order-line__name { margin: 0; font-family: var(--font-display); font-size: var(--text-card-title); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.page__content .order-line__name a { color: var(--color-ink); text-decoration: none; }
.page__content .order-line__name a:hover { color: var(--color-accent); }
.order-line__opts, .order-line__qty { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.order-line__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.order-line__note p { margin: var(--space-1) 0 0; }
.order-line__total { margin: 0; font-size: var(--text-card-price); font-weight: var(--fw-semibold); white-space: nowrap; }

/* The totals: right-aligned rows under the lines, the last one the total. */
.order-totals { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 0 auto; max-width: 22rem; }
.order-totals__row { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.order-totals__row dt { font-weight: var(--fw-normal); }
.order-totals__row dd { margin: 0; text-align: right; }
.order-totals__row--order_total { padding-top: var(--space-2); border-top: 1px solid var(--color-hairline); font-size: var(--text-base); color: var(--color-ink); }
.order-totals__row--order_total dd { font-weight: var(--fw-semibold); }
.order-details__note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.order-details__note-label { font-weight: var(--fw-semibold); color: var(--color-ink); }
.order-details__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
/* Woo's Order again (hooked after the table; order/order-again.php). */
.order-again { margin: var(--space-4) 0 0; }

/* Addresses: two cards. */
.order-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.order-address { padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-card-half); }
.order-address .order-section__title { margin-bottom: var(--space-2); }
.order-address__body { font-style: normal; font-size: var(--text-sm); line-height: var(--lh-body); }

/* Notes from the shop: a dated list. */
.order-notes__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.order-note { padding: var(--space-3) var(--space-4); background: var(--color-surface); border-radius: var(--radius-card-half); }
.order-note__date { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.order-note__text p { margin: 0; font-size: var(--text-sm); }

/* Downloads: a row per file, the Download button at the end. */
.dl-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-hairline); }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-hairline); }
.dl-row__body { min-width: 0; }
.dl-row__name { margin: 0; font-family: var(--font-display); font-size: var(--text-card-title); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.page__content .dl-row__name a { color: var(--color-ink); text-decoration: none; }
.page__content .dl-row__name a:hover { color: var(--color-accent); }
.dl-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.dl-row > .button { flex: none; }

/* The account's forms (address, account details): a two-column field
   grid, wide fields across both. Woo's own rows (.form-row, from
   woocommerce_form_field) sit in the same grid as the theme's .field. */
.account-intro { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.account-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 40rem; }
.account-form__title { margin: 0; font-size: var(--text-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.wcform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wcform__grid .field--wide, .wcform__grid .form-row-wide { grid-column: 1 / -1; }
.wcform .form-row { display: flex; flex-direction: column; gap: 0.4em; margin: 0; min-width: 0; }
.wcform .form-row label { display: block; }
.wcform .form-row .required { color: var(--color-text-muted); text-decoration: none; }
.wcform .form-row .optional { font-weight: var(--fw-normal); letter-spacing: 0; text-transform: none; }
.wcform .woocommerce-input-wrapper { display: block; }
.wcform .input-text, .wcform select { width: 100%; }
.wcform .form-row[style*="display: none"] { display: none !important; } /* wc-country-select hides rows a country lacks */
.account-form__group { margin: 0; padding: var(--space-4); border: 1px solid var(--color-hairline); border-radius: var(--radius-card-half); }
.account-form__legend { padding: 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-semibold); }
.account-form__hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.account-form__actions { display: flex; gap: var(--space-2); }
/* Woo's strength meter (wc-password-strength-meter) writes under the new password. */
.woocommerce-password-strength, .woocommerce-password-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { color: #b3261e; }
.woocommerce-password-strength.good, .woocommerce-password-strength.strong { color: var(--color-ink); }
.order-address__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.page__content .order-address__edit { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.page__content .order-address__edit:hover { color: var(--color-ink); }
.order-address__empty { color: var(--color-text-muted); }

@media (max-width: 640px) {
	.wcform__grid { grid-template-columns: minmax(0, 1fr); }
	.account-form__actions { flex-direction: column; }
	.order-addresses { grid-template-columns: minmax(0, 1fr); }
	.order-totals { max-width: none; }
	.dl-row { flex-wrap: wrap; }
	.dl-row > .button { flex: 1 0 100%; }
}

/* ==================================================================
   HEADER NAV — compact header, hover underline, dropdown + image mega
   ================================================================== */
/* Full-height items so dropdowns hang flush from the header's bottom line. */
/* Positioning context for the mega panel, so it can align to the container's
   content edge (right: 0 = inside the page gutter) instead of the nav item. */
.site-header__inner { position: relative; align-items: stretch; min-height: var(--header-row-h); padding-block: 0; }
.site-header__inner > .site-logo,
.site-header__inner > .custom-logo-link { display: inline-flex; align-items: center; }

/* Primary nav (right-aligned: pushed to the right, next to the icon cluster) */
.d0-nav { margin-left: auto; display: flex; }
/* Custom logo image */
.custom-logo-link { line-height: 0; }
.custom-logo { height: 40px; width: auto; display: block; }
.d0-nav__list { display: flex; align-items: stretch; gap: var(--nav-gap); }
.d0-nav__item { position: relative; display: flex; }
.d0-nav__link {
	display: inline-flex; align-items: center; gap: 0.32em;
	/* Reference (demo5) menu type: DM Sans ~15.4px / 500 in the body ink. */
	/* The owner's menu spec (2026-10-24): DM Sans 14px regular, line 1.4, no extra tracking, in caps ("tüm metinleri büyük yazalım"). */
	font-family: var(--font-display); font-weight: var(--fw-normal); font-size: var(--text-nav); line-height: var(--lh-snug); text-decoration: none; color: var(--color-text);
	text-transform: uppercase;
}
.d0-nav__link > span { position: relative; }
/* Hover: full-width underline grows from the left. */
.d0-nav__link > span::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform var(--motion-reveal);
}
.d0-nav__item:hover > .d0-nav__link > span::after,
.d0-nav__item:focus-within > .d0-nav__link > span::after { transform: scaleX(1); }

/* Dropdown / mega panels — hang flush from the header line, opening downward
   like part of the menu. Top corners stay square against the bar; bottom
   corners round on the cards' and drawers' token. */
.d0-nav__panel {
	/* Panels share the MENU's surface tone (#EFEDE7) — they grow out of
	   the header bar, so they must not read as white shell (owner). */
	--panel-bg: var(--color-surface);
	/* Smart mega wings (rail + right zones) sit a tick LIGHTER than the
	   middle, for depth (owner, 2026-09-03). */
	--panel-wing-bg: var(--color-surface-light);
	--panel-r: var(--radius-card-lg); /* the panel's Card corners, as the drawers (owner, 2026-10-31: "açılan pencerede de yuvarlak köşe") */
	position: absolute; top: 100%; left: 0; z-index: 60;
	background: var(--panel-bg);
	/* Same hairline as the header, on every edge but the top — the panel
	   grows out of the header bar, so the top stays seamless. */
	border: 1px solid var(--color-hairline);
	border-top: 0;
	border-radius: 0 0 var(--panel-r) var(--panel-r);
	/* No box-shadow: it painted over the header bar (blur > y-offset bleeds
	   upward) and tinted the frost surfaces apart. See the frost tokens note. */
	/* Hidden, the panel is wiped shut from its foot and opens downward from
	   the menu line inside its own box (owner, 2026-11-10: "mega menü
	   açılırken menünün üstüne taşıyor"). It used to wait 6-8px above its
	   place and slide down, over the row's foot: unseen while panel and bar
	   shared one ground, plain once the bar took a band's colour and the
	   row went to 60px. */
	opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0);
	/* The surface and corners ride the reveal clock too: an open panel
	   crossing the hero's edge fades between glass and frost, never snaps. */
	transition: opacity var(--motion-reveal), clip-path var(--motion-reveal), visibility var(--motion-reveal),
		background-color var(--motion-reveal), border-color var(--motion-reveal), border-radius var(--motion-reveal),
		backdrop-filter var(--motion-reveal), -webkit-backdrop-filter var(--motion-reveal);
}
.d0-nav__item:hover > .d0-nav__panel,
.d0-nav__item:focus-within > .d0-nav__panel { opacity: 1; visibility: visible; clip-path: inset(0); }

/* Stuck (scrolled) header: dropdown panels go translucent + blurred to match
   — the SAME frost token as the bar, so the two surfaces can never drift. */
.site-header.is-stuck .d0-nav__panel {
	--panel-bg: var(--frost-bg);
	--panel-wing-bg: color-mix(in srgb, var(--color-surface-light) var(--frost-alpha), transparent);
	backdrop-filter: var(--frost-filter);
	-webkit-backdrop-filter: var(--frost-filter);
}

/* Simple text dropdown */
.d0-nav__panel:not(.d0-nav__panel--mega) { min-width: 210px; padding: var(--space-2); }
.d0-nav__sublist { display: flex; flex-direction: column; }
.d0-nav__sublist a {
	display: block; padding: 0.6em 0.8em; text-decoration: none;
	color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium);
}
/* No chip: its background spilled past the panel as the link grew; the
   mega links' grow + ink is the one hover (owner, 2026-10-31). */
.d0-nav__sublist a:hover { color: var(--color-text); }

/* Long auto-generated lists (genre shelves) flow into two columns. */
.d0-nav__sublist--cols { display: block; columns: 2; column-gap: var(--space-1); min-width: 380px; }
.d0-nav__sublist--cols a { break-inside: avoid; }

/* Catalog mega panels. A world's is Shop By (inc/nav-mega-world.php; owner,
   2026-11-12, after desenio.com's Canvas Art Prints panel): a strip of the
   world's doors, four columns of the filter engine's best options, the best
   sellers two by two, the world's walls on its room photo, as wide as the
   page. The Collections panel (.d0-mega--smart) shares the surfaces.
   Doubled selectors on purpose: the base --mega / .d0-mega rules are declared
   later in this file and would win at equal specificity. */
.d0-nav__panel--mega:is(.d0-nav__panel--smart, .d0-nav__panel--world) {
	/* Depth (owner, 2026-09-03): the panel itself paints nothing; every
	   column paints its own surface edge to edge, so the side wings read a
	   tick LIGHTER than the middle and the separators run full height.
	   Frost stays consistent: each column mixes at the shared --frost-alpha. */
	padding: 0; background: transparent;
}
.d0-nav__panel--mega.d0-nav__panel--world { width: min(84rem, calc(100vw - 2 * var(--container-pad))); }
.d0-mega.d0-mega--smart { display: grid; gap: 0; align-items: stretch; }
.d0-mega.d0-mega--world { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto 12rem; gap: 0; align-items: stretch; }
:is(.d0-mega--smart, .d0-mega--world) > * { padding: var(--space-4); background: var(--panel-bg); transition: background-color var(--motion-reveal), border-color var(--motion-reveal), border-radius var(--motion-reveal); }
/* Inner corners follow the panel frame (outer radius minus the 1px border). */
:is(.d0-mega--smart, .d0-mega--world) > :last-child { border-bottom-right-radius: calc(var(--panel-r) - 1px); }
.d0-mega__head {
	display: block; margin-bottom: var(--space-1); color: var(--color-text-muted);
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: 0.08em; text-transform: uppercase;
}
/* A heading led by its icon (inc/nav-mega-world.php D0_MEGA_COLUMNS; owner,
   2026-09-24, a trial on the Movies panel): the icon a touch taller than
   the caps, in the heading's own muted ink. */
.d0-mega__head--icon { display: flex; align-items: center; gap: 0.5em; }
.d0-mega__head--icon .icon { flex: none; width: 1.3em; height: 1.3em; }
/* The strip: the world's doors, then the store's, in capitals; on the wing's ground. */
.d0-mega__strip { display: flex; flex-direction: column; gap: var(--space-3); border-right: 1px solid var(--color-hairline); background: var(--panel-wing-bg); border-bottom-left-radius: calc(var(--panel-r) - 1px); }
.d0-mega__quick { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; transition: color var(--motion); }
.d0-mega__quick.is-strong { font-weight: var(--fw-bold); }
.d0-mega__quick:hover { color: var(--color-accent); }
/* The columns: a head, the links, the world's own list closing on All N … →. */
.d0-mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.d0-mega__col { min-width: 0; }
.d0-mega__col .d0-mega__mini { margin-bottom: var(--space-1); }
.d0-mega__col .d0-mega__mini a { overflow: hidden; text-overflow: ellipsis; }
.d0-mega__more { display: block; padding: 0.35em 0; color: var(--color-text); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); text-decoration: none; }
/* The best sellers, two by two. A tile shows the POSTER, the product card's
   `full` look (owner, 2026-09-24): the studio mockup cropped to its frame on
   the shared crop pair, the poster shadow on the box, nothing painted behind
   it (inc/nav-mega.php d0_mega_card_poster). The hover zoom moves the whole
   poster: scaling inside the window would cut the moulding off. */
.d0-mega__best { border-left: 1px solid var(--color-hairline); }
.d0-mega__tiles { display: grid; grid-template-columns: repeat(2, 5.75rem); gap: var(--space-3) var(--space-2); }
.d0-mega__tile { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--color-text); text-decoration: none; }
.d0-mega--world .d0-mega__media { position: relative; display: block; aspect-ratio: var(--poster-ratio); overflow: hidden; border-radius: 0; background: transparent; box-shadow: var(--shadow-poster); transition: transform var(--motion-swap); }
.d0-mega--world .d0-mega__img { position: absolute; top: 50%; left: 50%; width: var(--poster-crop-w); height: auto; max-width: none; transform: translate(-50%, -50%); }
.d0-mega__tile:hover .d0-mega__media { transform: scale(1.05); }
.d0-mega__caption { overflow: hidden; font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
/* The world's walls on its room photo, on the wing's ground. */
.d0-mega__story { display: flex; flex-direction: column; gap: var(--space-2); border-left: 1px solid var(--color-hairline); background: var(--panel-wing-bg); color: var(--color-text); text-decoration: none; }
.d0-mega__story-head { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); }
.d0-mega__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card-half); }
.d0-mega__mini { display: flex; flex-direction: column; list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.d0-mega__mini--cols { display: block; columns: var(--cols, 2); column-gap: var(--space-2); }
.d0-mega__mini li { break-inside: avoid; }
.d0-mega__mini a {
	display: block; padding: 0.35em 0; text-decoration: none; color: var(--color-text-muted);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.d0-mega__mini a:hover { color: var(--color-text); }
/* The Collections panel (inc/nav-collections.php): a column per world on
   the smart panels' surfaces, as wide as its lists, a hairline between the
   worlds (the world panels' separator). Should five list columns across
   three worlds ever outgrow the page, a name wraps onto a second line
   instead of running past the panel. */
.d0-nav__panel--mega.d0-nav__panel--collections { width: auto; max-width: calc(100vw - 2 * var(--container-pad)); }
.d0-mega.d0-mega--smart.d0-mega--collections { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.d0-mega--collections .d0-mega__mini a { white-space: normal; }
.d0-mega--collections > * + * { border-left: 1px solid var(--color-hairline); }
.d0-mega--collections > :first-child { border-bottom-left-radius: calc(var(--panel-r) - 1px); }
.d0-mega--collections .d0-mega__mini { margin-bottom: 0; }
.d0-mega--collections .d0-mega__mini--cols { column-gap: var(--space-4); }

/* Text links inside nav panels grow VERY slightly on hover (owner,
   2026-09-03): a 5% scale from the left edge, so the text column stays
   flush with the section heads. Was 0.15s ease-out on purpose (owner: the
   old 0.35s --motion felt slow here); --motion itself is ease-out since
   2026-09-15. Chip/background hovers were tried and rejected the same day. */
.d0-nav__panel :is(.d0-nav__sublist a, .d0-mega__mini a) {
	transform-origin: left center;
	transition: transform var(--motion), color var(--motion);
}
.d0-nav__panel :is(.d0-nav__sublist a, .d0-mega__mini a):hover { transform: scale(1.05); }

/* Image mega panel — anchored to .site-header__inner (static item lets the
   panel's containing block bubble up), right edge flush with the page gutter. */
.d0-nav__item.has-mega { position: static; }
.d0-nav__panel--mega {
	left: auto; right: var(--container-pad);   /* right edge = page content gutter */
	width: min(36rem, calc(100vw - 2 * var(--container-pad)));
	padding: var(--space-4);
}
.d0-mega { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: var(--space-3); }
.d0-mega__card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--color-text); }
.d0-mega__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); }
.d0-mega__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-swap); }
.d0-mega__card:hover .d0-mega__media img { transform: scale(1.05); }
.d0-mega__label { font-weight: var(--fw-semibold); font-size: var(--text-sm); }

/* Icon cluster: divider before it + tighter buttons for a shorter header */
/* Short centered separator between the nav links and the icon cluster
   (a border-left would stretch the full header height). */
.header-actions { position: relative; padding-left: var(--space-3); }
.header-actions::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.25rem;
	background: var(--color-border);
}
.header-actions__btn { width: 2.4rem; height: 2.4rem; }

/* The menu folds into the drawer under 1200px (owner, 2026-11-08: "Küçük
   ekranda mobil menüye geçiş yap"): seven entries since Gallery Walls fit
   one line from 1200px; between 981 and 1199 three of them broke onto two.
   The page's other 980px steps (cards, the product page) stay where they are. */
@media (max-width: 1199px) {
	.d0-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	/* Compact cluster (owner): everything stays in the LEFT flow inside the
	   gutter — tighter gaps, no cart total (the count bubble carries it),
	   Account lives in the mobile menu drawer already. */
	/* Compact header (owner: price + Account STAY visible on mobile):
	   smaller wordmark, tighter gaps, xs cart total — everything fits the
	   16px mobile gutter without hiding anything. */
	.site-header__inner { gap: var(--space-2); }
	.site-logo--wordmark { font-size: 1.15rem; }
	/* No nav on mobile -> the nav/icons divider is meaningless. The nav's
	   auto margin is gone with it, so the cluster pins itself to the right
	   (owner: icons stay right-aligned at every width). */
	.header-actions { padding-left: 0; margin-left: auto; gap: 0; }
	.header-actions::before { content: none; }
}

/* ==================================================================
   STICKY HEADER — slight translucency once it sticks on scroll
   ================================================================== */
/* The hairline and the shadow fade with the frost (the clear bar, below). */
.site-header { transition: background-color var(--motion), border-color var(--motion-reveal), box-shadow var(--motion-reveal), top var(--motion-travel); } /* one list for every page: a page's own rule that set `transition` again dropped the colour's fade (the grid pages' bar snapped from the band's colour to beige until 2026-11-12). Pinned on every page (owner, 2026-11-08: "Menüyü her yerde sabitleyelim"; the hide-on-scroll of 2026-10-30 is gone) */
.site-header.is-stuck {
	background: transparent;
	/* No box-shadow: it painted behind the translucent dropdown panels, which
	   sampled the darkened page and rendered a different tone than the bar. */
}
/* The frosted bar lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter on the header element would make it a "backdrop root", which
   stops the descendant dropdown panels' own backdrop-filter from sampling the
   page (they'd sample the header instead and show no blur). Moving the filter to
   ::before keeps the header a plain stacking context, so the panels frost the
   page identically to the bar. */
.site-header.is-stuck::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--frost-bg);
	backdrop-filter: var(--frost-filter);
	-webkit-backdrop-filter: var(--frost-filter);
	/* The frost arrives and leaves on the reveal clock (the hero's clear bar
	   below empties it instead of removing it, so there is something to fade;
	   owner, 2026-09-15: "menünün arka planı pat diye geliyor"). */
	transition: background-color var(--motion-reveal), backdrop-filter var(--motion-reveal), -webkit-backdrop-filter var(--motion-reveal);
}

/* Over the hero's first screen the bar is CLEAR: no fill, no frost, no
   hairline, every glyph and word in paper (owner, 2026-09-15: "ilk sayfada
   header transparan, metin beyaz; ilk sayfayı geçince şimdiki haline
   dönsün"). main.js initHeroStack toggles `is-clear` on the scroll. */
.site-header.is-clear { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-header.is-clear::before { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Over a page band the header is not see-through (owner, 2026-11-10: "arkası dolu siyah olsun ... rengi oradan gelsin"): it takes the band's own colour (page-band.js reads it into --band-ground), so the band's title and pictures pass under it, not through it. The home's hero keeps the clear header. */
.has-band .site-header.is-clear { background: var(--band-ground, var(--zone-ink)); }
.site-header :is(.site-logo, .d0-nav__link, .nav-toggle) { transition: color var(--motion); }
.site-header.is-clear :is(.site-logo, .d0-nav__link, .header-actions__btn, .nav-toggle) { color: var(--zone-paper); }
.site-header.is-clear .header-actions__btn::after { background: color-mix(in srgb, var(--zone-paper) 18%, transparent); }
.site-header.is-clear .header-actions__btn:hover, .site-header.is-clear .cart-link:hover .header-actions__btn { color: var(--zone-paper); }
/* The ink bar over the plain home hero (owner, 2026-10-24): the clear bar's
   paper glyphs on an ink fill and a hairline, so the hero's words never
   show through as they scroll under it; hero-doors.js drops both classes
   once the hero's band has passed, and the beige frost fades back in. */
.site-header.is-clear.is-ink { background: var(--color-ink-bar-bg); border-bottom-color: var(--color-ink-bar-line); }
.site-header.is-clear.is-ink .d0-nav__item:is(:hover, :focus-within) > .d0-nav__link { color: var(--color-acid); } /* the ink bar's hover: lime (owner, 2026-10-24) */
.site-header.is-clear.is-ink .header-actions::before { background: var(--color-ink-bar-line); } /* the divider before the icons, on the same line tone */
.site-header.is-clear.is-ink :is(.site-logo, .d0-nav__link, .header-actions__btn, .nav-toggle), .site-header.is-clear.is-ink .header-actions__btn:hover, .site-header.is-clear.is-ink .cart-link:hover .header-actions__btn { color: var(--color-ink-bar-text); }
/* The windows the clear bar opens are clear too (owner, 2026-09-24): dark
   glass on the photo, paper words. They hang flush under the menu line,
   so the panel never jumps as the bar turns solid (owner, 2026-10-31:
   "arada yükseklik olmasın; sürekli bejdeki gibi davransın"), but close
   their top edge with the hairline and round all four corners, a window
   of their own on the photo ("üst kısımda da border ve radius olsun").
   The colour tokens are remapped on the panel, so every word, head,
   hairline and hover inside follows from one place. */
.site-header.is-clear .d0-nav__panel {
	--panel-bg: var(--glass-bg);
	--panel-wing-bg: var(--glass-wing-bg);
	--color-text: var(--zone-paper);
	--color-text-muted: color-mix(in srgb, var(--zone-paper) 72%, transparent);
	--color-hairline: color-mix(in srgb, var(--zone-paper) 16%, transparent);
	--color-accent: var(--zone-paper);
	--color-surface: color-mix(in srgb, var(--zone-paper) 10%, transparent); /* the image mega's picture box while it loads */
	border-top: 1px solid var(--color-hairline);
	border-radius: var(--panel-r);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}
.site-header.is-clear :is(.d0-mega--world, .d0-mega--collections) > :first-child { border-top-left-radius: calc(var(--panel-r) - 1px); }
.site-header.is-clear :is(.d0-mega--smart, .d0-mega--world) > :last-child { border-top-right-radius: calc(var(--panel-r) - 1px); }
/* Over a page band the bar is filled with the band's colour (--band-ground), so its panels are the bar's own again (owner, 2026-11-10: "her birinin arka planında ... üst tarafı üst menü barına yapışık olsun"): the band's colour, opaque, no rule and no round corners along the top; the wings a tone lighter. The glass window above stays the home hero's. */
.has-band .site-header.is-clear .d0-nav__panel {
	--panel-bg: var(--band-ground, var(--zone-ink));
	--panel-wing-bg: color-mix(in srgb, var(--zone-paper) 6%, var(--band-ground, var(--zone-ink)));
	border-top: 0;
	border-radius: 0 0 var(--panel-r) var(--panel-r);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.has-band .site-header.is-clear :is(.d0-mega--world, .d0-mega--collections) > :first-child { border-top-left-radius: 0; }
.has-band .site-header.is-clear :is(.d0-mega--smart, .d0-mega--world) > :last-child { border-top-right-radius: 0; }

/* ==================================================================
   REPORT DIALOG (owner, 2026-08-28) — one door, two audiences.
   Reuses the .drawer shell (native <dialog>, ESC, focus trap, backdrop).
   The product identifies itself in a sticky header: a report about the
   wrong listing is worse than no report. Fields swap with the type, so a
   shopper fixing a year never reads a rights declaration.
   ================================================================== */

.report[open] { display: flex; flex-direction: column; } /* open only, as .wallsheet[open]: a bare .report beat the closed dialog's display: none, and the drawer waiting off the right edge cast its shadow into every page (owner, 2026-11-08) */
.report__form { display: flex; flex-direction: column; min-height: 100%; }

/* The product identifies itself in one row: poster, then its name at heading
   size (owner) — no SKU, that is our number and not the reporter's. */
.report__head {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.report__thumb { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg); }
.report__title {
	min-width: 0; margin: 0 auto 0 0;
	font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold);
	line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-ink);
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* Same shape as the mini-cart: the BODY takes the leftover space and scrolls,
   so the footer lands at the bottom because the content filled the panel, not
   because the footer pushed itself down. */
.report__body {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5);
}

.report__types { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.report__types legend { margin-bottom: var(--space-2); padding: 0; }
.report__type {
	display: flex; align-items: center; gap: 0.6em;
	padding: 0.75em 0.9em;
	border: 1px solid var(--color-border); border-radius: var(--radius-field-sm);
	background: var(--color-bg); cursor: pointer;
	font-size: var(--text-sm);
	transition: border-color var(--motion), background var(--motion);
}
.report__type:hover { border-color: var(--control-active); }
.report__type:has(input:checked) { border-color: var(--control-active); box-shadow: 0 0 0 1px var(--control-active); }
.report__type input { accent-color: var(--color-ink); }

.report__step { display: flex; flex-direction: column; gap: var(--space-3); }
.report__step[hidden] { display: none; }
.report__field { display: flex; flex-direction: column; gap: 0.4em; }
.report__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.report__note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.report__check { display: flex; gap: 0.6em; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); cursor: pointer; }
.report__check input { flex: none; margin-top: 0.2em; accent-color: var(--color-ink); }

.report__pot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.report__status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.report__status[data-tone="bad"] { color: #b3261e; } /* same error red as the cart/newsletter messages */
.report__status:empty { display: none; }

.report__done { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.report__done-title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-ink); }
.report__done p { margin: 0; }

.report__foot [hidden] { display: none; } /* .button sets display, which beats the hidden attribute */
.report__foot {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.report__support { margin: 0; margin-right: auto; font-size: var(--text-xs); color: var(--color-text-muted); }
.report__support a { color: var(--color-ink); }

@media (max-width: 480px) {
	.report__row { grid-template-columns: 1fr; }
	.report__head, .report__body, .report__foot { padding-inline: var(--space-4); }
	/* Match the review dialog: one full-width target under the thumb. */
	.report__foot .button { width: 100%; }
	.report__support { margin-right: 0; }
}

/* ==================================================================
   HELP PAGES (owner, 2026-11-12: option B of docs/design/help-shipping.html,
   help-faq.html and help-contact.html): the [d0_help_*] sections. Small
   boxes (tiles, the mail box, the FAQ's questions) round at half the cards'
   corners, the big ones (the cards, the band) at the cards' own.
   ================================================================== */
.help-lead { max-width: 60ch; margin-inline: auto; font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-ink); }
.page__content > .help-lead { margin-bottom: 0; text-align: center; }
.help-h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--text-2xl); }
.help-h2 .icon { width: 1.5rem; height: 1.5rem; }
.help-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
:is(.help-steps, .help-card, .help-band, .faq__row) { scroll-margin-top: 6rem; }
.help-card :is(h2, h3)[id] { scroll-margin-top: 6rem; }

/* Tiles: an icon, a title, a sentence, and a way on when there is one. */
.help-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.help-tiles--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.help-tile { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5) var(--space-4); background: var(--color-surface); border-radius: var(--radius-card-half); color: var(--color-ink); }
.help-tile > .icon { width: 1.5rem; height: 1.5rem; margin-bottom: var(--space-1); }
.help-tile__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.help-tile__text { flex: 1; font-size: var(--text-sm); color: var(--color-text-muted); }
.help-tile__more { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-ink); text-decoration: none; }
.page__content .help-tile__more { color: var(--color-ink); }
.help-tile__more .icon { width: 0.8em; height: 0.8em; transition: translate var(--motion); }
.help-tile__more:hover .icon { translate: 2px 0; }
a.help-tile { text-decoration: none; transition: background-color var(--motion); }
.page__content a.help-tile { color: var(--color-ink); }
a.help-tile:hover { background: var(--control-bg-hover); }

/* The order's trip: numbered discs joined by a hairline, in a row. */
.help-steps__list { counter-reset: help-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.help-steps__list li { counter-increment: help-step; position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding-right: var(--space-4); }
.help-steps__list li::before { content: counter(help-step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-ink); color: var(--color-bg); font-family: var(--font-display); font-weight: var(--fw-bold); }
.help-steps__list li:not(:last-child)::after { content: ""; position: absolute; top: 1.125rem; left: calc(2.25rem + var(--space-2)); right: var(--space-2); height: 1px; background: var(--color-border-strong); }
.help-steps__list strong { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-ink); }
.help-steps__list span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Two cards side by side ([d0_help_pair] around two [d0_help_card]). */
.help-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.help-card { padding: var(--space-6) var(--space-5); background: var(--color-surface); border-radius: var(--radius-card-lg); }
.help-card h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
.help-card > :is(p, ul, ol) { margin: 0 0 var(--space-3); }
.help-card > :last-child { margin-bottom: 0; }
.help-card ul { display: grid; gap: var(--space-2); padding-left: 1.2em; }
.help-card li::marker { color: var(--color-text-muted); }

/* An ink band with one way out. */
.help-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-6); background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-card-lg); }
.help-band__icon .icon { display: block; width: 2.5rem; height: 2.5rem; }
.help-band__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); color: var(--color-bg); }
.help-band__text p { margin: 0; max-width: 60ch; font-size: var(--text-sm); color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.help-band__text a { color: var(--color-bg); }
.help-band__btn, .page__content a.help-band__btn { background: var(--color-bg); color: var(--color-ink); }
.help-band__btn:hover, .page__content a.help-band__btn:hover { background: var(--color-surface); color: var(--color-ink); }

/* The address to write to, large, with a word on what helps. */
.help-mail { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-card-half); }
.help-mail__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }
.help-mail__address, .page__content .help-mail__address { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.help-mail__address:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-mail__note { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 980px) {
	.help-tiles, .help-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.help-tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.help-steps__list li:nth-child(2)::after { display: none; }
	.help-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.help-tiles, .help-steps__list { grid-template-columns: minmax(0, 1fr); }
	.help-tiles--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.help-steps__list li::after { display: none; }
	.help-card { padding: var(--space-5) var(--space-4); }
	.help-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
}

/* ==================================================================
   FAQ (owner, 2026-08-29; by topic since 2026-11-12, option B of
   docs/design/help-faq.html): the topics as tiles, then a row per topic,
   its title held beside its questions, then Still Need Help ([d0_help_band]).
   Rows are native <details>, so answers stay in the DOM (and in the index)
   when closed.
   ================================================================== */
.faq__inner { display: flex; flex-direction: column; gap: var(--space-5); }
.faq__title { margin: 0; font-size: var(--text-2xl); }
.faq__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-hairline); }
.faq__row--plain { grid-template-columns: minmax(0, 1fr); }
.faq__row-title { position: sticky; top: 6rem; align-self: start; display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xl); }
.faq__row-title .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.faq__list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq__item {
	background: var(--color-surface); border-radius: var(--radius-card-half);
	transition: box-shadow var(--motion);
}
.faq__item[open] { box-shadow: 0 1px 2px rgba(21, 20, 14, 0.06); }
.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
	font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-normal); /* accordion titles are not bold, as the PDP's (owner, 2026-10-31) */
	color: var(--color-ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q-mark {
	flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--color-bg); color: var(--color-ink);
	transition: transform var(--motion), background-color var(--motion);
}
.faq__q-mark svg { width: 0.9rem; height: 0.9rem; }
.faq__q:hover .faq__q-mark { background: var(--control-bg-hover); }
.faq__item[open] .faq__q-mark { transform: rotate(90deg); }
.faq__a { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.faq__a p { margin: 0 0 var(--space-2); }
.faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
	.faq__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
	.faq__row-title { position: static; }
}

/* ==================================================================
   STICKY BUY CARD (owner, 2026-08-29) — bottom-right once the real buy bar
   has scrolled away. Mirrors price + picked options; the button proxies the
   real Add to cart (see commerce.js).
   ================================================================== */
.stickybuy {
	position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + var(--stickybuy-lift, 0px)); z-index: 40; /* the lift: what of Discover More stands at the window's foot on a wide PDP (pdp-details-hold.js) */
	display: flex; align-items: center; gap: var(--space-3);
	width: min(24rem, calc(100vw - 2 * var(--space-4)));
	padding: var(--space-3);
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-card-lg); box-shadow: var(--drawer-shadow); /* the drawers' corner, set on the panel's Card corners (owner, 2026-11-01) */
	transform: translateY(calc(100% + var(--space-4))); opacity: 0;
	pointer-events: none; visibility: hidden;
	transition: transform var(--motion-reveal), opacity var(--motion-reveal), visibility var(--motion-reveal);
}
.stickybuy.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
.stickybuy__thumb { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface); }
.stickybuy__thumb.fscene { width: 40px; } /* the print in its frame, flat (.fscene--flat): as tall as the photo was, as wide as the frame */
.stickybuy__text { min-width: 0; flex: 1; }
.stickybuy__title {
	margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
	color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stickybuy__price { margin: 0.1em 0 0; font-size: var(--text-sm); }
.stickybuy__price del { color: var(--color-text-muted); margin-right: 0.35em; }
.stickybuy__pick { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__pick:empty { display: none; }
.stickybuy__add { flex: none; }
.stickybuy__add svg { width: 1em; height: 1em; }
@media (max-width: 600px) {
	/* A corner card would cover the content on a phone: run it edge to edge. */
	.stickybuy { right: 0; left: 0; bottom: 0; width: auto; border-radius: 0; border-inline: 0; border-bottom: 0; }
	.stickybuy.is-visible { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .stickybuy { transition: opacity var(--motion), visibility var(--motion); } }

/* ==================================================================
   CONTACT PAGE (page-contact.php) — the answers across the page (owner,
   2026-11-12, option B: [d0_help_tiles] above the content's "more" line),
   then the words left, the form right.
   ================================================================== */
.contact__answers { margin-bottom: var(--space-6); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); align-items: start; }
.contact__intro { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.contact__intro > * { margin: 0; }
.contact__intro h2 { font-size: var(--text-2xl); color: var(--color-ink); }
.contact__intro .help-lead { margin: 0; font-size: var(--text-lg); color: var(--color-ink); }
.contact__formwrap { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card-lg); } /* a big box, as the help cards (2026-11-12) */
.contact__form { display: flex; flex-direction: column; gap: var(--space-3); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.contact__field { display: flex; flex-direction: column; gap: 0.4em; }
.contact__pot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact__notice {
	margin: 0 0 var(--space-4); padding: var(--space-3);
	background: var(--color-bg); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.contact__notice[data-tone="bad"] { color: #b3261e; }
@media (max-width: 860px) {
	.contact__grid { grid-template-columns: minmax(0, 1fr); }
	.contact__row { grid-template-columns: 1fr; }
}

/* ==================================================================
   STATEMENT SECTION (REBUILT 2026-09-08, owner) — the manifesto. Two rows:
   the claim with its figures opposite, then the claims as equal columns
   under the full width, each opening on a hairline. Zone-blind: it paints
   nothing and hardcodes no colour, so the same block reads on the About
   page's paper and on the home page's ink zone. (The old band="ink" plate
   painted var(--color-ink), which a dark zone remaps to PAPER: white text
   on a white plate. Bands belong to the zone.)
   ================================================================== */
/* The claims' band, outside the container (statement.php), one gap under the words. */
.statement__band { margin-top: var(--space-6); }
/* The figures sit on the statement's last line, not above it. */
.statement__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-6); align-items: end; }
.statement__lead { max-width: 40rem; }
.statement__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-xs); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted);
}
/* The page's voice for a big sentence: the statement face, at the size the
   zone openers use (.section__title--display). */
.statement__title {
	/* Measured in the title's OWN face: ~18 characters of the 54px serif is
	   two lines, which is what a manifesto sentence wants. */
	margin: 0; max-width: 18ch;
	font-family: var(--font-statement); font-weight: var(--fw-statement);
	font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--ls-statement);
	color: var(--color-ink);
}
.statement__link { margin-top: var(--space-4); }
/* Figures: supporting type, so they stay a step under the statement. */
.statement__stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin: 0; }
.statement__stats > div { min-width: 0; }
.statement__figure {
	font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold);
	line-height: 1; letter-spacing: var(--ls-tight); color: var(--color-ink);
}
.statement__caption { margin: var(--space-2) 0 0; max-width: 16ch; font-size: var(--text-sm); color: var(--color-text-muted); }

/* The claims: equal columns across the full width, each opening on a
   hairline with its numeral. The 96px watermark numeral is retired — it
   crowded the titles and went invisible on a dark ground. */
.statement__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.statement__card { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); }
.statement__num {
	display: block; margin-bottom: var(--space-3);
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); color: var(--color-text-muted);
}
.statement__card-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--lh-heading); color: var(--color-ink); }
.statement__card-text { margin: 0; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--color-text-muted); }

/* face="display" (the home, owner 2026-10-29: "daha düzgün ve güzel ... farklı
   font kullanmayalım"): the sentence and the claims in the site's own display
   face, the sentence at a section title's size, the claims' words a step
   larger and kept to a comfortable measure. */
.statement--display .statement__title { max-width: 21ch; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-3xl); letter-spacing: var(--ls-tight); text-wrap: balance; }
.statement--display .statement__card-title { font-family: var(--font-display); font-weight: var(--fw-bold); }
.statement--display .statement__card-text { max-width: 34ch; font-size: var(--text-base); }
.statement--display .statement__caption { max-width: 18ch; }
@media (max-width: 980px) {
	.statement__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.statement__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
	.statement__lead { max-width: none; }
}
@media (max-width: 560px) {
	.statement__cards { grid-template-columns: minmax(0, 1fr); }
}
/* The spoken sub under the statement (prop sub). */
.statement__sub { margin: var(--space-3) 0 0; max-width: 36ch; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); line-height: var(--lh-heading); color: var(--color-text); }

/* layout="joined" (the home's Who We Are, owner 2026-10-31, option B of
   docs/design/who-we-are-options.html; on the zone's own ground, owner: "eski
   zemin rengine"): the home's head anatomy (words left, the pill right), the
   claims as four joined columns like the joined reviews, no numerals. The
   band is ruled edge to edge above and below and sits right on the footer
   (owner: "sağa ve sola full width ... footer ile birleştirelim"); the
   dividers run from rule to rule. */
.statement--joined .statement__band { margin-top: var(--space-5); border-block: 1px solid var(--color-border); }
.statement--joined .statement__title { max-width: 22ch; }
.statement--joined .statement__more { display: inline-flex; gap: var(--space-2); justify-self: start; margin: 0; }
.statement--joined .statement__cards { gap: 0; }
.statement--joined .statement__card { padding: var(--space-4); border-top: 0; border-left: 1px solid var(--color-border); }
.statement--joined .statement__card:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 980px) {
	.statement--joined .statement__card:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
	.statement--joined .statement__card { padding-inline: 0; border-left: 0; }
	.statement--joined .statement__card + .statement__card { padding-top: 0; }
}

/* ==================================================================
   PDP PRICE ROW (owner, 2026-08-30) — price left, rating opposite it on the
   same line. The score costs no extra row and links to the reviews.
   ================================================================== */
/* Two spacing steps in this column, on purpose: 24 between groups, 16 within
   one. Uniform spacing would read as a flat list and lose the grouping. The
   price row is a group of its own: 24 above and below (owner, 2026-11-01:
   "Fiyat kısmının üst ve alt boşluklarını eşitler misin"). */
.pdp-priceline {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
	column-gap: var(--space-4);
	margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); /* the hairline closes the title group (PDP PANEL, 2026-11-02) */
}
.pdp-priceline .price { margin: 0; }
/* The price block's two lines join the row's grid: the price and the rating
   share the first line at every width (a wrapping flex row dropped the
   rating onto a line of its own on phones); the sale line runs under the
   price (owner, 2026-10-31). Report moved under the buy buttons, across
   from Pay with (owner, 2026-11-01). */
.pdp-price { display: contents; }
.pdp-price .price { grid-column: 1; grid-row: 1; }
.pdp-priceline > .pdp-rating { grid-column: 2; grid-row: 1; justify-self: end; }
.pdp-price__sale { grid-column: 1; grid-row: 2; }
/* The price (owner, 2026-10-31, from a reference): "Now $29.99" large in
   the display face, the old price struck after it, lighter and smaller;
   under them one green line, "20% off • Sale ends in 03:50:53". The green
   is the sale token deepened toward ink, so the small words keep their
   contrast on paper. */
.single .pdp-price .price {
	font-family: var(--font-display); font-size: var(--text-price); font-weight: var(--fw-bold); /* the price token (22px; owner, 2026-10-31, after 33, 26, 20 and 24) */
	line-height: var(--lh-title); color: var(--color-ink); /* set close to the sale line (owner, 2026-10-31: "iki satır arası boşluğu düşür") */
}
.single .pdp-price .price ins { color: inherit; }
.single .pdp-price .price del { margin: 0 0 0 0.1em; font-size: 0.75em; font-weight: var(--fw-normal); }
.pdp-price__sale {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em;
	margin-top: 0; line-height: var(--lh-snug); /* right under the price, no extra gap */
	font-size: var(--text-xs); font-weight: var(--fw-semibold); /* steps down with the price (owner, 2026-10-31: 16, 14.4, then 13 under the 22px price) */
	color: color-mix(in srgb, var(--color-sale) 70%, var(--color-ink));
}
.pdp-price__sale[hidden] { display: none; }
.pdp-price__sale .countdown--inline { gap: 0.35em; margin: 0; font-size: inherit; color: inherit; } /* the same gap on both sides of the dot */
.pdp-price__sale .countdown--inline::before { content: "\2022" / ""; }
.pdp-price__sale .countdown__time { font-weight: inherit; color: inherit; }
.pdp-rating {
	display: inline-flex; align-items: center; gap: 0.5em;
	text-decoration: none; color: var(--color-text-muted);
	font-size: var(--text-sm);
	transition: color var(--motion);
}
.pdp-rating:hover { color: var(--color-ink); }
/* Same slot when a product has no reviews yet, in the quiet-link voice of
   the Report link under it (owner, 2026-10-31): medium weight, the same
   gap and icon size. */
.pdp-rating--write { gap: 0.35em; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; font-weight: var(--fw-medium); }
.pdp-rating--write svg { width: 1em; height: 1em; }
.pdp-rating__score { font-weight: var(--fw-semibold); color: var(--color-ink); }
.pdp-rating .star-rating { margin: 0; }
.pdp-rating svg { width: 0.9em; height: 0.9em; }

/* ==================================================================
   REVIEWS SECTION (owner, 2026-08-30) — out of the tabs and into the open,
   but deliberately quiet: the write form lives in a dialog, so the section
   itself is only the proof. A product with no reviews renders nothing.
   ================================================================== */
/* Every reviews block renders the shared .section__head with the home's
   controls (`.revsec.prow`, .roundnav; owner, 2026-10-30/31): the title, then
   the white round arrows, View All in words and, on the PDP, the invitation
   (.revsec__write) in the same words. The PDP keeps its section-title size
   (.revsec__title, the page's other H2s); the front page's is a plain
   section title. reviews.js hides View All where the row already shows
   every card. */
.revsec__title { margin: 0; font-size: var(--text-2xl); }
.roundbtn[hidden] { display: none; } /* the grid display would defeat the attribute */
/* One row of four: summary + three reviews. `display: contents` on Woo's <ol>
   lets its <li> items be cells of THIS grid rather than of a nested list. */
/* dense: a two-column photo card that cannot fit beside the plate on a
   two-column screen must not leave a hole; the next one-column card takes it. */
.revlist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; grid-auto-flow: dense; }
/* Four cells only survive a wide screen: at 78px each they were unreadable. */
@media (max-width: 1100px) {
	.revlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.revlist { grid-template-columns: minmax(0, 1fr); }
	.revsum { padding: var(--space-5) var(--space-4); }
}
/* Woo nests the list two wrappers deep (#reviews > #comments > ol), so every
   layer has to dissolve for the <li> items to become cells of .revlist. */
.revlist .woocommerce-Reviews,
.revlist #comments,
.revlist #shop-reviews,
:is(#reviews, #shop-reviews) .commentlist { display: contents; }
/* Which reviews are on screen is paged in JS (pdp-tabs.js); display:flex must
   yield to the hidden attribute or the paging would do nothing. */
:is(#reviews, #shop-reviews) .commentlist > li[hidden] { display: none; }
/* The reviews row on tablets and phones, front page and PDP alike (owner,
   2026-09-29): no paging,
   one swipe row with the next card's edge showing, the tab rows' counts and
   bleed (.gtabs--scroll .prow__track): three and an edge on a tablet on its
   side, two upright, one on a phone, the track running off the screen's edge
   with the plate on the gutter. reviews.js reads the overflow to know the
   list scrolls. The block padding gives the cards' hover lift and shadow room
   inside the scroll box; the negative margin hands it back to the page.
   The ids in the card selector outrank the old 92% scroller basis.
   position: relative makes the row the containing block of the cards'
   absolutely placed screen-reader texts: left to <body>, they escaped the
   scroll box and widened the phone page to 3,400px. */
@media (max-width: 1200px) {
	.revsec.prow .revlist {
		position: relative;
		display: flex; gap: var(--space-3);
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x proximity; scrollbar-width: none;
		margin: calc(-1 * var(--space-3)) calc(-1 * var(--container-pad));
		padding: var(--space-3) var(--container-pad);
		scroll-padding-inline: var(--container-pad);
		--rev-per-view: 3.3;
	}
	.revsec.prow .revlist::-webkit-scrollbar { display: none; }
	.revsec.prow .revlist > .revsum,
	.revsec.prow :is(#reviews, #shop-reviews) .commentlist > li {
		flex: 0 0 calc((100% - var(--space-3) * (var(--rev-per-view) - 0.3)) / var(--rev-per-view));
		scroll-snap-align: start;
	}
}
@media (max-width: 860px) {
	.revsec.prow .revlist { --rev-per-view: 2.3; }
}
@media (max-width: 640px) {
	.revsec.prow .revlist { --rev-per-view: 1.3; }
	/* The row swipes, like every home row on a phone: the arrows and View All
	   go. What stays is the PDP's invitation: it takes the line under the
	   title whole, the way the dialogs place their submit. With nothing left
	   (the front page) the cluster goes too, so no empty line opens a gap. */
	.revsec.prow .roundnav > :not(.revsec__write) { display: none; }
	.revsec.prow .prow__controls { flex: 1 0 100%; }
	.revsec.prow .prow__controls:not(:has(.revsec__write)) { display: none; }
	.revsec.prow .roundnav { flex: 1; margin-left: 0; }
	.revsec__write { flex: 1; margin-left: 0; }
}

/* The fixed cell: the darkest step, so the figures read as a plate rather than
   as another review. */
.revsum {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	gap: var(--space-4); text-align: center;
	padding: var(--space-5) var(--space-4);
	/* A fan of rays rising off the bottom edge (owner). Same trick as the review
	   cards: the pattern is the BOTTOM layer and an "eraser" gradient sits on
	   top of it — transparent along the bottom, solid plate colour above — so
	   the pattern stops existing rather than being clipped. No mask, no
	   pseudo-element, and the figures in the middle keep a clean field.
	   The lines are light because the plate is dark. background-color has to be
	   declared SEPARATELY: putting the colour in the `background` shorthand
	   would reset background-image and silently drop both layers. */
	background-color: var(--color-ink);
	/* Two layers, painted front to back: the ERASER, then the rays.
	   The vanishing point sits at 145% — BELOW the plate — which is the whole
	   trick: from off the card the rays arrive nearly parallel, so the fan
	   opens gently instead of bursting out of a visible point on the edge.
	   Rejected on the way, all still rendered in docs/design/: a dot grid at
	   every pitch from 14 down to 6 (summary-plate-dots.html), and rings, a
	   centre-origin fan and a rings+rays radar (summary-plate-radial.html). */
	background-image:
		linear-gradient(to top, transparent 0%, var(--color-ink) 56%),
		repeating-conic-gradient(at 50% 145%,
			color-mix(in srgb, var(--color-border) 30%, transparent) 0deg 0.4deg,
			transparent 0.4deg 6deg);
	color: var(--color-bg);
	border-radius: var(--radius-card-lg); /* the review cards' corner */
}
.revsum__zone { display: flex; flex-direction: column; align-items: center; gap: 0.2em; }
.revsum__label {
	font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase;
	color: color-mix(in srgb, var(--color-bg) 62%, transparent);
}
.revsum__big { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1; }
/* Stars lead the cell and have to read on the dark plate. Beige rather than
   white (owner): warmer, and it lets the EMPTY portion sit dark enough that a
   part-filled star is visible — at 4.6 the fifth star was reading as full
   because the unfilled remainder was nearly the colour of the fill. */
.revsum__stars { font-size: var(--text-2xl); letter-spacing: 0.04em; }
.revsum__stars::before { color: color-mix(in srgb, var(--color-bg) 18%, transparent); }
.revsum__stars > span::before { color: var(--color-border); }
/* Shop-reviews plate: the seller's record needs its scope spelled out. */
.revsum__note { font-size: var(--text-xs); color: color-mix(in srgb, var(--color-bg) 62%, transparent); }

/* COMPACT (template-parts/sections/reviews.php, every page; owner,
   2026-10-28, on the home: "çok geniş ve çok büyük ... efektli gradientler
   ... daha küçük"): the same row, quieter and smaller. The plate loses its
   rays and the cards their bloom and their lift; the photo is 4:3 and the
   words stop at four lines; five cells across (the plate and four cards,
   reviews.js pages four), the swipe rows one more card in view. */
.revsec--compact .revlist { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.revsec--compact .revsum { gap: var(--space-3); padding: var(--space-4); background-image: none; }
.revsec--compact .revsum__stars { font-size: var(--text-lg); }
.revsec--compact .revsum__big { font-size: var(--text-xl); }
.revsec--compact :is(#reviews, #shop-reviews) .commentlist > li { padding: var(--space-3); background-image: none; }
.revsec--compact :is(#reviews, #shop-reviews) .commentlist > li:hover { transform: none; box-shadow: none; }
.revsec--compact :is(#reviews, #shop-reviews) .comment-text { gap: var(--space-2); }
.revsec--compact .revcard__photo { aspect-ratio: 4 / 3; }
.revsec--compact .revcard__quote { font-size: 3rem; }
.revsec--compact .revcard__by { gap: var(--space-2); }
.revsec--compact .revcard__initial { display: none; } /* the narrow card keeps the name and date on one line each, the tick beside them */
.revsec--compact .revcard__who { flex: 1; }
.revsec--compact .revcard__meta { white-space: nowrap; }
.revsec--compact :is(#reviews, #shop-reviews) .comment-text > .description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: var(--text-sm); line-height: var(--lh-snug); }
/* JOINED (reviews.php, every page; owner, 2026-10-29, on the home:
   "aralıklarını kaldırıp birbirine yapışık düz kutular", "full width"):
   the row runs the page's whole width, flat boxes side by side with a
   hairline between, no gap, no corners, no lift, all on the light step but
   the record plate; the head keeps the store's own (title, arrows across)
   at the container's width. A card stays small but its words read whole
   (owner, the same day: "yorumlar eksik çıkmış"): the score with the
   buyer's photo as a little preview beside it, the words across the full
   card (up to six lines), the poster as one quiet line, the name. */
.revsec--joined > .container { max-width: none; padding-inline: 0; }
.revsec--joined .section__head { box-sizing: border-box; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.revsec--joined .revlist { gap: 0; }
.revsec--joined .revsum { gap: var(--space-2); border-radius: 0; }
.revsec--joined :is(#reviews, #shop-reviews) .commentlist > li { padding: var(--space-3) var(--space-4) var(--space-4); border: 0; border-left: 1px solid var(--color-border); border-radius: 0; background-color: var(--color-surface); background-image: none; }
.revsec--joined :is(#reviews, #shop-reviews) .commentlist > li:hover { transform: none; box-shadow: none; }
.revsec--joined :is(#reviews, #shop-reviews) .comment-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top photo" "text text" "item item" "by by"; grid-template-rows: auto 1fr auto auto; align-items: center; gap: var(--space-2) var(--space-3); }
.revsec--joined .revcard__quote { display: none; }
.revsec--joined .revcard__top { grid-area: top; }
.revsec--joined .revcard__photo { grid-area: photo; width: 2.75rem; aspect-ratio: 1; }
.revsec--joined :is(#reviews, #shop-reviews) .comment-text > .description { grid-area: text; align-self: start; -webkit-line-clamp: 6; }
.revsec--joined .revcard__item { grid-area: item; gap: var(--space-2); margin: 0; padding: 0; border: 0; color: var(--color-text-muted); }
.revsec--joined .revcard__item:hover { color: var(--color-text); }
.revsec--joined .revcard__item-thumb { width: 1.5rem; height: 1.5rem; }
.revsec--joined .revcard__item-name { font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-normal); }
.revsec--joined .revcard__item svg { width: 0.85rem; height: 0.85rem; }
.revsec--joined .revcard__by { grid-area: by; }
@media (max-width: 1200px) { .revsec--joined.prow .revlist { gap: 0; margin: 0; padding: 0; scroll-padding-inline: 0; } }
/* A window with its title inside (exit.php `exit--caption`: a title, no link; the home's Who We Are, owner 2026-10-29): the title rides the window's foot in paper (#FBFAF9), no shade under it (owner: "shadowu kaldır"); a bare window keeps the shade. */
.exit.exit--caption { position: relative; --exit-ink: var(--zone-paper); --exit-paper: var(--zone-ink); } /* .exit, later in the file, sets the ink: both classes outrank it */
.exit--caption .exit__box { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.exit--caption .exit__title { color: inherit; } /* an h2 here: the heading colour would beat the band's paper */
.exit--bare .exit__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(to bottom, transparent, rgb(21 20 14 / 0.62)); }
@media (max-width: 1200px) { .revsec--compact.prow .revlist { --rev-per-view: 4.3; } }
@media (max-width: 860px) { .revsec--compact.prow .revlist { --rev-per-view: 2.6; } }
@media (max-width: 640px) { .revsec--compact.prow .revlist { --rev-per-view: 1.6; } }

/* In the four-cell row every cell shares the row's height, so the summary and
   the reviews line up top and bottom. (They used to align to the top, which
   left the shortest card floating against a taller neighbour.) */

/* The write dialog wears the report dialog's shell: identity on top, fields in
   the middle, one action pinned at the bottom. Woo's markup is restyled here
   rather than rebuilt, so its nonce and POST stay untouched. */
/* Same shape as the mini-cart and the report dialog: the BODY takes the
   leftover space and scrolls; the footer is its own row after it. Nothing
   pushes anything. */
.revdialog__shell { display: flex; flex-direction: column; height: 100%; }
.revdialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.revdialog__foot {
	flex: 0 0 auto;
	display: flex; flex-direction: column; gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.revdialog__status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.revdialog__status:empty { display: none; }
.revdialog__status[data-tone="bad"] { color: #b3261e; }
.revdialog__status[data-tone="good"] { color: var(--color-ink); font-weight: var(--fw-semibold); }
.revdialog #respond { margin: 0; }
.revdialog #reply-title,
.revdialog .comment-reply-title { display: none; } /* the header already names it */
.revdialog #respond { margin: 0; }

/* Order is the order of thought: score, words, who you are, then send. */
.revdialog .comment-form { display: flex; flex-direction: column; gap: var(--space-4); }
.revdialog .comment-form-rating { order: 1; }
.revdialog .comment-form-comment { order: 2; }
.revdialog .comment-form-author { order: 3; }
.revdialog .comment-form-email { order: 4; }
.revdialog .comment-form-cookies-consent { order: 5; }
.revdialog .comment-notes { order: 6; }
.revdialog .form-submit { order: 7; }
.revdialog .comment-form > p { margin: 0; }

.revdialog .comment-form label {
	display: block; margin-bottom: 0.4em;
	font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted);
}
.revdialog .comment-form .required { color: inherit; }
.revdialog .comment-form input[type="text"],
.revdialog .comment-form input[type="email"],
.revdialog .comment-form textarea {
	width: 100%; padding: 0.6em 0.9em;
	border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	background: var(--color-bg); color: var(--color-text);
	font: inherit; font-size: var(--text-sm);
	transition: border-color var(--motion), box-shadow var(--motion);
}
.revdialog .comment-form textarea { min-height: 8rem; resize: vertical; }
/* Woo ships rows="8"; on a phone that pushes name and email below the fold. */
@media (max-width: 620px) {
	.revdialog .comment-form textarea { min-height: 0; height: 7rem; }
}
.revdialog .comment-form input:focus,
.revdialog .comment-form textarea:focus {
	outline: none; border-color: var(--color-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent);
}
/* The consent line is a choice, not a heading: it keeps sentence case. */
.revdialog .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.6em; }
.revdialog .comment-form-cookies-consent label {
	margin: 0; font-size: var(--text-sm); font-weight: var(--fw-normal);
	letter-spacing: normal; text-transform: none; line-height: 1.45;
}
.revdialog .comment-form-cookies-consent input { margin-top: 0.25em; accent-color: var(--color-ink); }
.revdialog .comment-notes { font-size: var(--text-xs); color: var(--color-text-muted); }

/* The row stays in the form holding its hidden fields; only the button left,
   so the row itself has nothing to show. */
.revdialog .form-submit { margin: 0; }
/* The wrapper the form left behind (see pdp-tabs.js). */
#review_form_wrapper.is-moved { display: none; }
.revdialog__foot input[type="submit"],
.revdialog__foot button[type="submit"] {
	width: 100%; height: var(--control-h); padding-inline: var(--space-4);
	border: 0; border-radius: var(--radius); cursor: pointer;
	background: var(--color-ink); color: var(--color-bg);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
}
.revdialog__foot input[type="submit"]:hover { background: var(--color-accent, #625a41); }
.revdialog .form-submit input[type="submit"] {
	width: 100%; height: var(--control-h); padding-inline: var(--space-4);
	border: 0; border-radius: var(--radius); cursor: pointer;
	background: var(--color-ink); color: var(--color-bg);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold);
}
.revdialog .form-submit input[type="submit"]:hover { background: var(--color-accent, #625a41); }

/* Star picker. Woo ships this as five text links and styles them with its own
   stylesheet, which we do not load — without this it reads "1 of 5 stars
   2 of 5 stars…".
   Filling "this star and every one before it" needs :has(): a sibling combinator
   can only reach FORWARD, and reversing the row to cheat that reversed the
   meaning of the stars too. */
.revdialog p.stars { display: inline-flex; gap: 0.1em; margin: 0; }
.revdialog p.stars a {
	/* inline-block is load-bearing: on a plain inline anchor the width and the
	   overflow clip do nothing, so the label text stays on screen. */
	display: inline-block; position: relative; width: 1.6em; height: 1.6em;
	overflow: hidden; text-indent: -999em; text-decoration: none;
}
.revdialog p.stars a::before {
	content: "\2605"; position: absolute; inset: 0; text-indent: 0;
	font-size: 1.5em; line-height: 1; text-align: center;
	color: var(--color-border-strong); transition: color var(--motion);
}
.revdialog p.stars:has(.star-1:hover) .star-1::before,
.revdialog p.stars:has(.star-2:hover) :is(.star-1, .star-2)::before,
.revdialog p.stars:has(.star-3:hover) :is(.star-1, .star-2, .star-3)::before,
.revdialog p.stars:has(.star-4:hover) :is(.star-1, .star-2, .star-3, .star-4)::before,
.revdialog p.stars:has(.star-5:hover) a::before,
.revdialog p.stars.selected:has(.star-1.active) .star-1::before,
.revdialog p.stars.selected:has(.star-2.active) :is(.star-1, .star-2)::before,
.revdialog p.stars.selected:has(.star-3.active) :is(.star-1, .star-2, .star-3)::before,
.revdialog p.stars.selected:has(.star-4.active) :is(.star-1, .star-2, .star-3, .star-4)::before,
.revdialog p.stars.selected:has(.star-5.active) a::before { color: var(--color-accent, #9d916c); }

/* ==================================================================
   ARCHIVE FILTERS (template-parts/filters.php, assets/js/filters.js)
   The owner's reference: one card holding the finder + sort, a pill per
   group, a four-column panel of groups, a footer (selected count, Reset,
   Show N results); the active selections as chips under the card.
   Every option is a link; the panel opens through :target without JS.
   ================================================================== */
.filters { margin-bottom: var(--space-5); }
/* One control in the finder's grammar: the home-page input on top, the pill
   bar attached under it, the panel attached under the bar. The shell carries
   the finder's soft shadow; the input keeps its own border and squares its
   bottom corners so the bar continues it; the live results box overlays the
   bar and the panel in the same slot (position: absolute inside the finder). */
.filters__shell { position: relative; border-radius: var(--radius); background: var(--color-bg); box-shadow: 0 6px 18px -8px rgba(40, 36, 27, 0.12); }
.filters__shell .search-sec__inner { position: relative; }
.filters .search-sec__input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.filters .search-sec__input:focus { box-shadow: none; }
.filters .search-sec__results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.filters__bar {
	display: flex; align-items: center; gap: var(--space-2) var(--space-3);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-hairline); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}
.filters.is-open .filters__bar, .filters__shell:has(.filters__panel:target) .filters__bar { border-radius: 0; }

/* Pills: one per group, the open one in ink, a counter when the group has selections. */
.filters__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.filters__pill {
	display: inline-flex; align-items: center; gap: 0.45em;
	height: var(--control-h-sm); padding: 0 0.9em;
	border: 1px solid var(--control-border); border-radius: var(--radius-sm);
	background: var(--color-bg); color: var(--color-ink);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium);
	text-decoration: none; white-space: nowrap;
	transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.filters__pill:hover { background: var(--color-surface); }
.filters__pill[aria-expanded="true"] { background: var(--control-active); border-color: var(--control-active); color: var(--color-accent-contrast); }
.filters__pill-icon { display: inline-grid; font-size: 0.85em; transform: rotate(90deg); transition: transform var(--motion); }
.filters__pill[aria-expanded="true"] .filters__pill-icon { transform: rotate(-90deg); }
.filters__badge {
	display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35em;
	border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-contrast);
	font-size: var(--text-badge); font-weight: var(--fw-semibold); line-height: 1;
}
.filters__pill[aria-expanded="true"] .filters__badge { background: var(--color-accent-contrast); color: var(--color-ink); }
.filters__badge[hidden] { display: none; }

/* Panel: hidden until a pill opens it (JS) or the no-JS link targets it.
   Groups sit in a hairline-ruled grid (owner: lines between every cell):
   each cell draws its RIGHT + BOTTOM rule, so every group is a closed box
   whatever the count; a row left short (six groups on four columns) keeps
   the lines under the groups above its gap and beside its last group
   (owner, 2026-11-08: "alt çizgileri yok, yan çizgileri yok ...
   tamamlayalım"; the top + left rules they drew before left those open).
   The panel's top border and the shell's side are the outer lines: the grid
   reaches one pixel past the right edge for the panel to clip, and its own
   last pixel row is clipped so the last row's rules do not double the
   foot's (the band's hairline is translucent: two would read brighter). */
.filters__panel {
	display: none; overflow: hidden;
	border: 1px solid var(--color-hairline); border-top: 1px solid var(--color-hairline);
	border-radius: 0 0 var(--radius) var(--radius);
}
.filters.is-open .filters__panel, .filters__panel:target { display: block; }
.filters__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: -1px; clip-path: inset(0 0 1px 0); }
.filters__groups > .fgroup { border-right: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); } /* the panel's cells */
.fgroup {
	display: flex; flex-direction: column; min-width: 0;
	padding: var(--space-4) var(--space-3);
	transition: background var(--motion);
}
.fgroup.is-focus { background: var(--color-surface-light); }
/* Explicit display values above would defeat the hidden attribute (the
   2026-08-25 lesson): a group or pill filters.js hides must really go. */
.fgroup[hidden], .filters__pill[hidden] { display: none; }
.fgroup__label {
	margin: 0 0 var(--space-2); color: var(--color-text-muted);
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.fgroup__list { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.fgroup--chips .fgroup__list, .fgroup--swatch .fgroup__list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
/* Overflowing groups (owner, 2026-09-04: the open list must not stretch the
   panel): collapsed = the first rows; expanded (filters.js loaded every row)
   = a seven-row scroll box with a find field above it narrowing rows in
   place. :where() keeps the collapsed rule's specificity BELOW the expanded
   rules (an nth-child pseudo-class would otherwise outrank them). Only
   checkbox groups collapse: a 9-chip decade row stays whole. */
.fgroup--check:not(.is-expanded) .fgroup__list :where(li:nth-child(n + 9)) { display: none; }
/* Expanded, the list keeps the folded list's eight rows of height (.fopt's
   2rem, the list's 0.15rem gap) as a fixed height, not a cap: "Show all"
   turns into the search without moving, and the search stays put while the
   words narrow the rows (a group expands only past 8 rows, so the full list
   always fills it). */
.fgroup.is-expanded .fgroup__list { height: calc(8 * 2rem + 7 * 0.15rem); overflow-y: auto; }
.fgroup.is-expanded .fgroup__list li.is-out { display: none; }
.fgroup__empty { flex: none; margin: 0; font-size: var(--text-xs); white-space: nowrap; } /* in the search, before its ×: the box says it, nothing moves */
.fgroup__empty[hidden] { display: none; }
.fgroup__label { order: 0; }
.fgroup__list { order: 2; }

/* Option registers: checkbox row, chip, swatch. */
.fopt {
	display: flex; align-items: center; gap: 0.6em; min-height: 2rem; padding: 0.15rem 0.3rem;
	border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); text-decoration: none;
	transition: background var(--motion);
}
.fopt:hover { background: var(--color-surface-light); }
.fopt__box {
	flex: 0 0 auto; display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
	border: 1px solid var(--control-border); border-radius: var(--radius-card); background: var(--color-bg);
	transition: background var(--motion), border-color var(--motion);
}
.fopt.is-on .fopt__box { background: var(--control-active); border-color: var(--control-active); }
.fopt.is-on .fopt__box::after {
	content: ""; width: 0.32rem; height: 0.6rem; margin-top: -0.12rem;
	border: solid var(--color-accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fopt__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt__count { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.fchip {
	display: inline-flex; align-items: center; gap: 0.4em; height: var(--control-h-sm); padding-inline: var(--space-3);
	border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--color-bg);
	color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none;
	transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.fchip:hover { background: var(--color-surface); }
.fchip.is-on { background: var(--control-active); border-color: var(--control-active); color: var(--color-accent-contrast); }
.fswatch {
	display: inline-block; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sw);
	border: 1px solid rgb(0 0 0 / 8%); transition: transform var(--motion), box-shadow var(--motion);
}
.fswatch:hover { transform: scale(1.12); }
.fswatch.is-on { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
/* "Show all N", a full-width flat control at the FOOT of the group (owner),
   turns into the group's search in the same place (owner, 2026-10-23: "Show
   All dediğimizde bu buton bir arama kutusuna dönüşsün"): one box with the
   button's size and fill holds both. Pressed, filters.js loads every row
   into the list above and the label gives way to a field (the glass, the
   words, a × that folds the list back), a crossfade in place; the one not
   showing is out of reach too (visibility). */
.fgroup__seek {
	order: 3; display: grid; margin-top: auto; height: var(--control-h-sm);
	border-radius: var(--radius-sm); background: var(--control-bg);
	transition: box-shadow var(--motion);
}
.fgroup__seek[hidden] { display: none; }
.fgroup__list ~ .fgroup__seek { margin-top: var(--space-3); } /* `~`: the list's scrollbar sits between them */
.fgroup__seek > * { grid-area: 1 / 1; min-width: 0; }
.fgroup__more {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	padding: 0; border: 0; border-radius: inherit; background: transparent; color: var(--color-ink); cursor: pointer;
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold);
	transition: background var(--motion), opacity var(--motion-reveal), visibility 0s;
}
.fgroup__more:hover { background: var(--control-bg-hover); }
.fgroup__find {
	display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) 0 0.75em;
	color: var(--color-text-muted); font-size: var(--text-sm);
	transition: opacity var(--motion-reveal), visibility var(--motion-reveal);
}
/* Each side turns visible at once as it arrives (the focus moves onto it in
   the same moment, and a box still hidden refuses it) and hidden only once
   its fade is over. */
.fgroup.is-expanded .fgroup__find { transition: opacity var(--motion-reveal), visibility 0s; }
.fgroup.is-expanded .fgroup__more { transition: background var(--motion), opacity var(--motion-reveal), visibility var(--motion-reveal); }
.fgroup__find-icon { display: inline-grid; flex: none; }
.fgroup__find-input {
	flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
	background: transparent; color: var(--color-text); font: inherit;
}
.fgroup__find-input::placeholder { color: var(--color-text-muted); }
.fgroup__find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* The ×: the finder's round clear button (.search-sec__clear) at this box's size. */
.fgroup__find-close {
	display: inline-grid; place-items: center; flex: none;
	width: calc(var(--control-h-sm) - 2 * var(--space-1)); aspect-ratio: 1; padding: 0;
	border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
	transition: background var(--motion), color var(--motion);
}
.fgroup__find-close:hover { background: var(--control-bg-hover); color: var(--color-text); }
.fgroup:not(.is-expanded) .fgroup__find, .fgroup.is-expanded .fgroup__more { opacity: 0; visibility: hidden; }
.fgroup.is-expanded .fgroup__seek:focus-within { box-shadow: inset 0 0 0 1px var(--color-ink); }
.fgroup { padding-bottom: var(--space-4); }
.fgroup:has(.fgroup__seek:not([hidden])) .fgroup__list { margin-bottom: 0; }

/* Live update: while the store recomputes, the groups dim and a small ring
   spins beside the count; the new rows fade back in on the standard curve. */
.filters__groups { transition: opacity var(--motion); }
.filters.is-loading .filters__groups { opacity: 0.55; pointer-events: none; }
.filters__spinner {
	display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	border: 2px solid var(--color-border); border-top-color: var(--color-ink);
	animation: d0-spin 0.8s linear infinite;
}
.filters__spinner[hidden] { display: none; }
@keyframes d0-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .filters__spinner { animation-duration: 2s; } }

/* Footer + active chips under the card. */
.filters__foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--color-hairline); }
.filters__selected { flex: 1 1 auto; font-size: var(--text-sm); color: var(--color-text); }
.filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.fchip--active { background: var(--color-surface); border-color: transparent; }
.fchip--active:hover { background: var(--color-border); }
.fchip__x { display: inline-grid; font-size: 0.8em; color: var(--color-text-muted); }
.filters__clear { margin-left: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.filters__clear:hover { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 980px) { .filters__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	/* The finder's 11rem right padding (room for the inline hint + clear
	   button) left "Search by" of the placeholder on a phone: keep the clear
	   button's room only, and drop the inline hint, which would sit on the text. */
	.filters .search-sec__input { padding-right: 3rem; }
	.filters .search-sec__hint { display: none; }
	.filters__bar { flex-wrap: wrap; }
	.filters__pills { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.filters__groups { grid-template-columns: 1fr; }
	/* One group open at a time, the others folded to their names over and
	   under it (owner, 2026-11-08, the wall builder's sheet: "bir tane filtre
	   tıklandı ... diğer filtreler kapalı ... tıklanan açılıyordu"; before,
	   the tapped group was the whole panel and the others hid). The tapped
	   pill's group opens (filters.js); a group's name opens it and folds the
	   one open before, pressed again it folds (filters-fold.js). The full
	   stack ran 2,400px tall, so only a panel no script has bound (the hash
	   alone) lists every group open. The wall builder folds its own copy. */
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups > .fgroup { padding-block: 0; }
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups > .fgroup.is-current { padding-bottom: var(--space-4); }
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups > .fgroup:not(.is-current) > :not(.fgroup__label) { display: none; }
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups .fgroup__label {
		display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; margin: 0;
		color: var(--color-text); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
		letter-spacing: 0; text-transform: none; cursor: pointer; user-select: none;
	}
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups .fgroup__label::after { content: ""; width: 0.45rem; height: 0.45rem; margin-right: 0.2rem; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); rotate: -45deg; transition: rotate var(--motion); } /* the builder's chevron: right when folded, down when open */
	:where(.filters[data-filters-bound]:not([data-filters-embed])) .filters__groups .fgroup.is-current .fgroup__label::after { rotate: 45deg; }
	.filters__foot { flex-wrap: wrap; }
	.filters__selected { width: 100%; }
}

/* ==================================================================
   ZONES ([d0_zone]) — full-bleed colour bands that group sections (owner,
   2026-09-08: "arka plan renkleri ile bölümler"). The band paints itself and
   REMAPS the colour tokens for everything inside, so sections stay zone-blind
   and keep consuming the same tokens. `color` is re-declared on the zone
   because body's computed ink would otherwise be inherited as a value, not
   as the variable. Dark tones share one remap: light ink and text, plates
   and hairlines are the band lifted by a few percent of paper, buttons
   invert (light fill, band-coloured label, surface on hover).
   ================================================================== */
.zone { background-color: var(--zone-bg, var(--color-bg)); color: var(--color-text); } /* background-COLOR: the shorthand would erase the dots pattern declared earlier */
.zone--dots { --dots-ground: var(--zone-bg); }
/* grain="yes": a fine film grain (SVG fractal noise, paper-tinted) over the
   band's ground and UNDER its content: the zone isolates its stacking
   context and the grain layer sits at z-index -1, so text and photos stay
   crisp. `--grain-opacity` is the knob. */
/* The grain lies OVER the whole band like real film grain (photos included),
   never under it: an isolated under-layer left a tone step at the slider's
   foot and trapped the seam finder inside the band's stacking context (the
   next band then covered the bar's hanging half; owner, 2026-09-08, at 50%).
   No isolation: positioned elements with z-index >= 2 (the finder, slider
   navs) still rise above the texture; clicks pass through it. */
.zone--grain { position: relative; }
.zone--grain::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	opacity: var(--grain-opacity); mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
}
/* pattern="glow": one soft light rising from the bottom of the band (owner:
   "bir isik gibi"). Three knobs: how strong (paper alpha), where it sits,
   how far up it reaches (owner: 30% of the band, not half). */
.zone--glow, .zone--glow-top, .zone--glow-both {
	--glow-strength: 14%;
	--glow-at: 50% 100%;
	--glow-reach: 40%;
	--glow: color-mix(in srgb, var(--zone-paper) var(--glow-strength), transparent);
}
.zone--glow { background-image: radial-gradient(ellipse 80% var(--glow-reach) at var(--glow-at), var(--glow) 0%, transparent 100%); }
.zone--glow-top { background-image: radial-gradient(ellipse 80% var(--glow-reach) at 50% 0%, var(--glow) 0%, transparent 100%); }
.zone--glow-both {
	background-image:
		radial-gradient(ellipse 80% var(--glow-reach) at 50% 0%, var(--glow) 0%, transparent 100%),
		radial-gradient(ellipse 80% var(--glow-reach) at 50% 100%, var(--glow) 0%, transparent 100%);
}
/* pattern="shade-top": a small shade falling from the band's top edge, so
   a world opens under whatever stood above it (owner, 2026-09-15: "ufak bir
   gölgeleme ile giriş yapılsın"; the yellow exit → Sports, the ink hero →
   Movies). Painted as a ::before so it composes with a glow; sits under the
   content (z-index 0 against the sections' own stacking). Two knobs. */
.zone--shade-top { position: relative; --shade-strength: 9%; --shade-reach: 9rem; }
.zone--shade-top::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--shade-reach); pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--zone-ink) var(--shade-strength), transparent), transparent); }
.zone--paper   { --zone-bg: var(--zone-paper); --color-bg: var(--zone-bg); --color-surface: var(--zone-surface); --control-bg: var(--zone-surface); } /* the shell's own palette back, inside the beige page ground (.site-main below) */
.zone--surface { --zone-bg: var(--zone-surface); --color-bg: var(--zone-bg); --color-surface: var(--zone-paper); --control-bg: var(--zone-paper); }
.zone--sand {
	--zone-bg: var(--zone-sand); --color-bg: var(--zone-bg);
	--color-surface: var(--zone-surface); --color-surface-light: var(--zone-paper);
	--color-border: #cac3af; --color-hairline: #cac3af; --color-border-strong: #b4aa8e;
	--control-bg: var(--zone-surface); --control-bg-hover: var(--zone-paper); --control-border: #cac3af;
}
.zone--stone {
	--zone-bg: var(--zone-stone); --color-bg: var(--zone-bg);
	--color-surface: var(--zone-surface); --color-surface-light: var(--zone-paper);
	--color-text-muted: #433e2d; --color-accent: #433e2d; /* #625A41 (muted, accent: the eyebrow) reads 4.0:1 on this step; one step deeper clears 4.5:1 */
	--color-border: #b4aa8e; --color-hairline: #b4aa8e; --color-border-strong: #9d916c;
	--control-bg: var(--zone-surface); --control-bg-hover: var(--zone-paper); --control-border: #b4aa8e;
}
.zone--ink    { --zone-bg: var(--zone-ink); }
.zone--sports { --zone-bg: var(--zone-sports); }
.zone--movies, .zone--light { --zone-bg: var(--zone-movies); --color-bg: var(--zone-bg); --color-surface: var(--zone-paper); --control-bg: var(--zone-paper); } /* light band: the same remap as surface, one step off it; `light` = the same ground for any world (the sports zone since 2026-09-15: one ground, the band between them does the separating) */
.zone--decor  { --zone-bg: var(--zone-decor); }
/* THE PAGE GROUND (owner, 2026-10-31: "anasayfa zemininde kullanılan bej
   rengin diğer tüm sayfalarda olmasını istiyorum"): the main column wears the
   home's beige with the light band's remap, so a list, a search, a landing,
   the cart and every other page read as the home's beige zones do. The
   header, its panels, the drawers and the footer sit outside it and keep the
   shell. --zone-bg stays unset here: it names a zone's own tone. */
.site-main { --color-bg: var(--zone-movies); --color-surface: var(--zone-paper); --control-bg: var(--zone-paper); background-color: var(--color-bg); }
/* The product page's summary band keeps the shell (--pdp-info-bg), so it
   keeps the shell's palette too: the picker, the size select and the
   stepper fill one step deeper than the paper, not paper on paper. */
.pdp-band--info { --color-bg: var(--zone-paper); --color-surface: var(--zone-surface); --control-bg: var(--zone-surface); }
/* PAPER ISLANDS: elements that must read on the paper palette wherever a
   zone remaps the tokens around them: every drawer (the hero's wall sheets
   are rendered inside the world zones and took their tones, so the sheet
   opened from Buy all three changed colour per zone while the mini-cart,
   rendered in the footer, stayed paper; owner, 2026-09-11: "sepette açılan
   panel ile aynı renkler"), and the finder bar on a zone's seam. The same
   values as :root; a zone never reaches inside. */
.drawer,
.search-sec--seam .search-sec__inner {
	--color-bg: var(--zone-paper); --color-ink: var(--zone-ink); --color-text: var(--zone-ink);
	--color-text-muted: #625a41; --color-accent: #625a41; --color-accent-contrast: #ffffff;
	--color-surface: var(--zone-surface); --color-surface-light: color-mix(in srgb, var(--zone-surface) 50%, var(--zone-paper));
	--color-border: var(--zone-sand); --color-border-strong: #cac3af; --color-hairline: var(--zone-sand);
	--control-border: var(--zone-sand); --control-bg: var(--zone-surface); --control-bg-hover: var(--zone-sand);
	--control-active: var(--zone-ink);
}
.drawer { color: var(--color-text); }
/* `.zone--dark` = the dark remap for any custom `--zone-bg` (the styleguide's
   ladder previews use it for the mid and deep steps). */
.zone--ink, .zone--sports, .zone--decor, .zone--dark {
	--color-bg: var(--zone-bg);
	--color-ink: var(--zone-paper);
	--color-text: var(--zone-paper);
	--color-text-muted: #cac3af;
	--color-accent: #cac3af;
	--color-accent-contrast: var(--zone-bg);
	--color-surface: color-mix(in srgb, var(--zone-paper) 8%, var(--zone-bg));
	--color-surface-light: color-mix(in srgb, var(--zone-paper) 12%, var(--zone-bg));
	--color-border: color-mix(in srgb, var(--zone-paper) 18%, var(--zone-bg));
	--color-border-strong: color-mix(in srgb, var(--zone-paper) 28%, var(--zone-bg));
	--color-hairline: color-mix(in srgb, var(--zone-paper) 18%, var(--zone-bg));
	--control-border: color-mix(in srgb, var(--zone-paper) 18%, var(--zone-bg));
	--control-bg: color-mix(in srgb, var(--zone-paper) 10%, var(--zone-bg));
	--control-bg-hover: color-mix(in srgb, var(--zone-paper) 18%, var(--zone-bg));
	--control-active: var(--zone-paper);
}

/* ------------------------------------------------------------------
 * CORNER INDEX (template-parts/zone-nav.php; owner, 2026-09-29: the long
 * front page). The owner's reference: "BACK TO TOP" set vertically in the
 * eyebrow's caps over a white circle with an up caret, the list of labelled
 * bands opening beside it on hover. It floats over every band, so it paints
 * with the fixed shell tones (a paper island, like the drawers); the label
 * alone turns paper over dark ground (main.js reads the colour under it:
 * the exit bands, the footer). The PDP buy bar's corner (.stickybuy).
 * Scroll-toggled, so it fades rather than snaps: the paint empties, the
 * element stays.
 * ---------------------------------------------------------------- */
.zone-nav {
	position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 40;
	transform: translateY(var(--space-2)); opacity: 0; visibility: hidden;
	transition: transform var(--motion-reveal), opacity var(--motion-reveal), visibility var(--motion-reveal);
}
.zone-nav.is-visible { transform: none; opacity: 1; visibility: visible; }
.zone-nav__button {
	display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
	padding: 0; border: 0; background: none; color: var(--zone-ink); cursor: pointer;
}
/* Read bottom to top, as in the reference. */
.zone-nav__label {
	writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase;
	transition: color var(--motion);
}
.zone-nav.is-on-dark .zone-nav__label { color: var(--zone-paper); }
.zone-nav__circle {
	display: grid; place-items: center; width: var(--control-h-lg); height: var(--control-h-lg);
	border-radius: 50%; background: var(--zone-paper); color: var(--zone-ink); box-shadow: var(--shadow-soft);
	font-size: 1.25rem; /* the plain link's chevron size (.section__link) */
	transition: background-color var(--motion), color var(--motion);
}
.zone-nav__button:hover .zone-nav__circle,
.zone-nav.is-open .zone-nav__circle { background: var(--zone-ink); color: var(--zone-paper); }
/* The list opens to the left, its foot on the circle's foot. Its radius minus
   its padding is the rows' radius, so the hover fill nests in the corner. */
.zone-nav__panel {
	position: absolute; right: calc(100% + var(--space-3)); bottom: 0;
	min-width: 13rem; padding: var(--space-2);
	border: 1px solid var(--zone-sand); border-radius: var(--radius-lg);
	background: var(--zone-paper); color: var(--zone-ink); box-shadow: var(--drawer-shadow);
	transform: translateX(var(--space-2)); opacity: 0; visibility: hidden;
	transition: transform var(--motion-reveal), opacity var(--motion-reveal), visibility var(--motion-reveal);
}
/* The hover bridge: the gap between the list and the button stays "inside",
   so the pointer can cross it without the list closing. */
.zone-nav__panel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--space-3); }
/* Open: hover on a mouse, keyboard focus anywhere inside, a tap on touch
   (.is-open, main.js). :focus-visible, not :focus-within: a tap focuses the
   button too, and the list must close again on the next tap. */
@media (hover: hover) {
	.zone-nav:hover .zone-nav__panel { transform: none; opacity: 1; visibility: visible; }
}
.zone-nav:has(:focus-visible) .zone-nav__panel,
.zone-nav.is-open .zone-nav__panel { transform: none; opacity: 1; visibility: visible; }
.zone-nav__list { margin: 0; padding: 0; list-style: none; }
.zone-nav__link,
.zone-nav__top {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-2) var(--space-3); border-radius: calc(var(--radius-lg) - var(--space-2));
	font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium);
	color: var(--zone-ink); text-decoration: none; transition: background-color var(--motion);
}
.zone-nav__link:hover,
.zone-nav__top:hover { background: var(--zone-surface); }
/* The band you are in: a dot at the row's end. */
.zone-nav__link.is-current::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--zone-ink); }
.zone-nav__top { margin-top: var(--space-2); border-top: 1px solid var(--zone-sand); border-top-left-radius: 0; border-top-right-radius: 0; color: var(--color-text-muted); } /* printed at body level (wp_footer), outside every zone, so the token is the shell's */

/* ------------------------------------------------------------------
 * THE INK OPENING ([d0_hero_flow] on the home): its band on the ink bar's
 * own tone, and the mega type step a size down on phones.
 * ---------------------------------------------------------------- */
.zone--ink:has(.hflow) { --zone-bg: var(--color-ink-bar-bg); } /* the hero's band on the ink bar's own tone, so bar and hero read as one ground (owner, 2026-10-24) */
@media (max-width: 640px) {
	:root { --text-mega: clamp(2.9rem, 13.5vw, 5.9rem); }
}

/* ------------------------------------------------------------------
 * HERO FLOW ([d0_hero_flow]) — the poster-flow opening, a gallery after
 * hours (owner, 2026-10-28, five rounds; the story in the section's
 * header, template-parts/sections/hero-flow.php).
 * - The hero fills the screen and climbs under the clear bar by its
 *   height (--hflow-over, measured by hero-flow.js; the token first).
 * - The wall: columns --hflow-col wide on a --hflow-pitch, placed from
 *   half a pitch off the left edge; flat prints in the wall builder's
 *   moulding (the same 9-slice art and colours as .wb-frame and .fscene,
 *   at --hflow-mould), the wood dealt by place (inc/hero-flow.php). The
 *   script moves columns and tracks (drift, wrap, drag, glide) and marks
 *   the hero .is-live; before that the CSS drift below runs. The columns
 *   rise in one after another on load.
 * - The light: .hflow__shade is a dark field twice the hero's size with a
 *   lit hole in its middle, .hflow__glow a warm disc soft-lit over the
 *   wall; the script moves both whole (translate), so nothing repaints.
 *   Under the cut-out words the shade waits faded and comes in with a
 *   pointer, as the words go.
 * - The words: the H1 cut out of a dark veil (below); the line and See
 *   All bottom left over an ink rise from the foot.
 * - The badge (pointer screens): a paper disc, a caret on each side (the
 *   wall drags every way); a glass ring reading View over a print.
 * Tablet and phone: narrower columns; a finger
 *   drags sideways (touch-action: pan-y keeps the page's scroll). Reduced
 *   motion: nothing drifts or rises; the light only answers the pointer.
 * ---------------------------------------------------------------- */
.hflow { position: relative; isolation: isolate; overflow: hidden; height: clamp(36rem, 100svh, 64rem); margin-top: calc(-1 * var(--hflow-over, var(--header-h))); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hflow.has-cursor, .hflow.has-cursor :is(a, button) { cursor: none; }
.hflow__wall { position: absolute; inset: 0; }
.hflow__col { position: absolute; top: 0; left: calc((var(--col) - 0.5) * var(--hflow-pitch)); width: var(--hflow-col); animation: hflow-arrive var(--motion-stage) both; animation-delay: calc(var(--col) * 110ms); }
.hflow__track { will-change: transform; animation: hflow-up var(--flow-time) linear infinite; }
.hflow__col--down .hflow__track { animation-direction: reverse; }
.hflow.is-live .hflow__col { will-change: transform; }
.hflow.is-live .hflow__track { animation: none; }
@keyframes hflow-up { to { transform: translateY(-50%); } }
@keyframes hflow-arrive { from { opacity: 0; translate: 0 var(--space-6); } }
.hflow__poster { display: block; margin-bottom: var(--hflow-gap); -webkit-user-drag: none; transition: scale var(--motion-reveal); }
.hflow__poster:focus-visible { outline-offset: 6px; }
.hflow:not(.is-dragging) .hflow__poster:hover, .hflow__poster:focus-visible { position: relative; z-index: 1; scale: 1.12; } /* owner, 2026-10-28: "üstüne gelince biraz daha fazla büyüyecekti"; inside the 40px gap either side */
/* The moulding, on the wall and in the room (the room's wood is the grid's, one button for all). */
:is(.hflow__frame, .hflow-all__frame) {
	--frame-face: var(--frame-black-face);
	--frame-lip: var(--frame-black-lip);
	display: block; padding: var(--hflow-mould);
	border-image: url(../img/frames/frame-black.webp) 128 / var(--hflow-mould) stretch;
	background: linear-gradient(var(--frame-lip), var(--frame-lip)) content-box, var(--frame-face); /* under the 9-slice: its seams and the hairline beside the print (as .wb-frame) */
	box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.7), 0 2px 4px rgb(0 0 0 / 0.4);
}
:is(.hflow__frame[data-frame="white"], .hflow-all__grid[data-frame="white"] .hflow-all__frame) { border-image-source: url(../img/frames/frame-white.webp); --frame-face: var(--frame-white-face); --frame-lip: var(--frame-white-lip); }
:is(.hflow__frame[data-frame="natural"], .hflow-all__grid[data-frame="natural"] .hflow-all__frame) { border-image-source: url(../img/frames/frame-natural.webp); --frame-face: var(--frame-natural-face); --frame-lip: var(--frame-natural-lip); }
:is(.hflow__frame[data-frame="dark"], .hflow-all__grid[data-frame="dark"] .hflow-all__frame) { border-image-source: url(../img/frames/frame-dark.webp); --frame-face: var(--frame-dark-face); --frame-lip: var(--frame-dark-lip); }
.hflow__img { display: block; width: 100%; height: auto; aspect-ratio: var(--frame-print-ratio); object-fit: cover; -webkit-user-drag: none; }
.hflow__price, .hflow__price .amount { color: inherit; }
/* The light: both layers sit centred on the light's point; before the
   script it stands at 50% / 40%, then the script writes it as a translate
   from the corner. */
.hflow__shade, .hflow__glow { position: absolute; top: 40%; left: 50%; pointer-events: none; transform: translate(-50%, -50%); will-change: translate; }
.hflow.is-live :is(.hflow__shade, .hflow__glow) { top: 0; left: 0; }
.hflow__shade { width: 200%; height: 200%; background: radial-gradient(circle var(--hflow-light) at center, transparent 0%, color-mix(in srgb, var(--zone-bg) 36%, transparent) 42%, color-mix(in srgb, var(--zone-bg) 80%, transparent) 100%); }
.hflow__glow { width: calc(2 * var(--hflow-light)); aspect-ratio: 1; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--hflow-light-tint) 70%, transparent) 0%, color-mix(in srgb, var(--hflow-light-tint) 22%, transparent) 55%, transparent 100%); mix-blend-mode: soft-light; }
/* The bar's ground at the top (its words read on the wall) and the ink rise under the title card. */
.hflow::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
	linear-gradient(to top, var(--zone-bg) 0%, color-mix(in srgb, var(--zone-bg) 78%, transparent) 24%, transparent 54%),
	linear-gradient(to bottom, color-mix(in srgb, var(--zone-bg) 88%, transparent) 0%, transparent calc(var(--hflow-over, var(--header-h)) + var(--space-6))); }
/* The words cut out of the dark (owner, 2026-10-28: "Cut out güzel ...
   mouse gelince yok olsun ve duvara bakalım, mouse gidince geri gelsin;
   tek font"): a veil multiplied over the wall, the H1 in paper letters on
   it, so the prints flow at full light inside them. The whole H1 is one
   lowercase lockup, one face and weight, centred (below). While
   a pointer is on the hero
   (.is-near, hero-flow.js) the veil fades and the light comes in; it
   comes back as the pointer leaves. Clicks pass through to the wall. */
.hflow__knock { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: color-mix(in srgb, var(--zone-bg) 82%, transparent); mix-blend-mode: multiply; pointer-events: none; transition: opacity var(--motion-stage); }
.hflow:has(.hflow__knock) .hflow__shade { opacity: 0; transition: opacity var(--motion-stage); }
.hflow.is-near .hflow__knock { opacity: 0; }
.hflow.is-near .hflow__shade { opacity: 1; }
.hflow__cut { display: flex; flex-direction: column; align-items: center; gap: var(--hflow-cut-gap); margin: 0; font-family: var(--font-display); font-size: var(--text-hflow-giant); font-weight: var(--fw-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-hflow-giant); color: var(--zone-paper); text-align: center; white-space: nowrap; animation: hflow-arrive var(--motion-arrive) both; animation-delay: 0.5s; }
/* Two lines (owner, 2026-10-28: "follow your / obsessions. ... ilk satır
   tam merkezde üstte olsun"): the first, smaller, centred over the key
   word, set close so its descender nearly meets the key word's ascender. */
.hflow__cut-lead, .hflow__cut-end { font-size: calc(var(--hflow-cut-k) * 1em); letter-spacing: var(--ls-hflow); }
/* See All in the hero's bottom-right corner (owner, 2026-10-30, after a try
   under the H1: "hover durumunda kaybolduğu için ... butonu sağ köşeye
   koyalım"): out of the words' way, so it never fades and always takes a
   press. The paper outline of the home's round buttons, its arrow kept. */
.hflow__copy { position: absolute; left: 0; right: 0; bottom: var(--space-6); z-index: 2; display: flex; justify-content: flex-end; pointer-events: none; }
.hflow__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); max-width: 19rem; text-align: right; pointer-events: auto; }
.hflow__note { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); line-height: var(--lh-snug); color: var(--band-dim, var(--color-text-muted)); }
.roundbtn.hflow__all { display: inline-flex; gap: var(--space-2); margin: 0; border: 1px solid var(--zone-paper); background: transparent; color: var(--zone-paper); } /* an outline in paper on the dark wall, words and arrow paper too (owner, 2026-10-30: "arka planı beyaz değil, sadece border ... metin de beyaz, ikon da"); it fills with paper under the pointer (.roundbtn:hover turns it ink otherwise) */
.roundbtn.hflow__all:hover { background: var(--zone-paper); color: var(--zone-ink); }
/* It arrives as the H1's words do, a beat after them. */
.hflow__aside { animation: hflow-arrive var(--motion-arrive) both; animation-delay: 0.65s; }
.hflow__all .icon { width: 1rem; height: 1rem; transition: transform var(--motion); }
.hflow__all:hover .icon { transform: translate(2px, -2px); }
/* The badge: centred on the pointer (the script writes its translate). */
.hflow__cursor { position: absolute; top: 0; left: 0; z-index: 3; display: grid; place-items: center; width: var(--hflow-cursor); aspect-ratio: 1; margin: calc(var(--hflow-cursor) / -2) 0 0 calc(var(--hflow-cursor) / -2); border: 1px solid var(--zone-paper); border-radius: 50%; background: var(--zone-paper); color: var(--zone-ink); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold); pointer-events: none; opacity: 0; scale: 0.4; transition: opacity var(--motion-reveal), scale var(--motion-reveal), background var(--motion), color var(--motion); }
.hflow__carets { position: absolute; inset: var(--space-2); }
.hflow__carets .icon { position: absolute; width: 0.7rem; height: 0.7rem; opacity: 0.55; }
.hflow__carets .icon:nth-child(1) { top: 0; left: 50%; translate: -50% 0; }
.hflow__carets .icon:nth-child(2) { top: 50%; right: 0; translate: 0 -50%; }
.hflow__carets .icon:nth-child(3) { bottom: 0; left: 50%; translate: -50% 0; rotate: 180deg; }
.hflow__carets .icon:nth-child(4) { top: 50%; left: 0; translate: 0 -50%; }
.hflow.has-cursor .hflow__cursor.is-on { opacity: 1; scale: 1; }
.hflow.is-dragging .hflow__cursor.is-on { scale: 0.86; }
.hflow__cursor.is-view { background: color-mix(in srgb, var(--zone-ink) 30%, transparent); color: var(--zone-paper); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hflow:has(.hflow-all[open]) .hflow__cursor { opacity: 0; }
/* ALL POSTERS — the room See All opens (template-parts/sections/hero-flow-room.php):
   a dark room of its own, a warm light easing after the pointer, every
   print filling an equal 7:10 frame (--frame-print-ratio), a wall label
   under each; one button for the wood of
   every frame, which answer in a short ripple. It rises in, its frames
   arriving one after another. */
.hflow-all { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--zone-bg, var(--color-ink-bar-bg)); color: var(--zone-paper); cursor: auto; -webkit-user-select: text; user-select: text; opacity: 0; translate: 0 var(--space-5); transition: opacity var(--motion-stage), translate var(--motion-stage), overlay var(--motion-stage) allow-discrete, display var(--motion-stage) allow-discrete; }
.hflow-all[open] { opacity: 1; translate: 0 0; }
@starting-style { .hflow-all[open] { opacity: 0; translate: 0 var(--space-5); } }
.hflow-all::backdrop { background: var(--zone-ink); }
.hflow .hflow-all :is(a, button) { cursor: pointer; } /* outranks the hero's cursor: none */
.hflow-all__scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.hflow-all__light { position: absolute; top: 0; left: 0; z-index: 2; width: 200vw; height: 200vh; pointer-events: none; transform: translate(-50%, -50%); translate: 50vw 35vh; background: radial-gradient(circle var(--hflow-light) at center, color-mix(in srgb, var(--hflow-light-tint) 12%, transparent) 0%, transparent 55%, color-mix(in srgb, var(--zone-bg) 38%, transparent) 100%); transition: translate var(--motion-stage); }
.hflow-all__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); padding-block: var(--space-6) var(--space-5); background: linear-gradient(to bottom, var(--color-ink-bar-bg) 72%, transparent); }
.hflow-all__title { margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--fw-mega); line-height: var(--lh-hflow); letter-spacing: var(--ls-hflow); color: var(--zone-paper); }
.hflow-all__sub { max-width: 46ch; margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--lh-snug); color: var(--band-dim, var(--color-text-muted)); }
.hflow-all__tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.hflow-all__wood { --frame-face: var(--frame-natural-face); display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 1.1em; border: 1px solid color-mix(in srgb, var(--zone-paper) 30%, transparent); border-radius: var(--radius-pill); background: none; color: var(--zone-paper); font-family: var(--font-display); font-size: var(--text-ui); font-weight: var(--fw-medium); transition: background var(--motion), border-color var(--motion); }
.hflow-all__wood:hover { background: color-mix(in srgb, var(--zone-paper) 10%, transparent); border-color: var(--zone-paper); }
.hflow-all__wood[data-frame="black"] { --frame-face: var(--frame-black-face); }
.hflow-all__wood[data-frame="white"] { --frame-face: var(--frame-white-face); }
.hflow-all__wood[data-frame="dark"] { --frame-face: var(--frame-dark-face); }
.hflow-all__swatch { width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--frame-face); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); transition: background var(--motion); }
.hflow-all .drawer__close { background: color-mix(in srgb, var(--zone-paper) 12%, transparent); color: var(--zone-paper); }
.hflow-all .drawer__close:hover { background: color-mix(in srgb, var(--zone-paper) 22%, transparent); }
.hflow-all__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 40vw), 1fr)); gap: var(--space-6) var(--space-5); margin-block: var(--space-4) var(--space-6); list-style: none; }
.hflow-all__cell { animation: hflow-arrive var(--motion-arrive) both; animation-delay: calc(0.2s + var(--i) * 25ms); }
.hflow-all__item { display: block; color: inherit; text-decoration: none; }
.hflow-all__frame { transition: translate var(--motion-reveal); }
.hflow-all__item:hover .hflow-all__frame, .hflow-all__item:focus-visible .hflow-all__frame { translate: 0 -6px; }
.hflow-all__grid.is-rehung .hflow-all__frame { animation: hflow-rehang var(--motion-swap) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes hflow-rehang { from { opacity: 0.35; scale: 0.97; } }
.hflow-all__print { display: block; width: 100%; height: auto; aspect-ratio: var(--frame-print-ratio); object-fit: cover; }
.hflow-all__label { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.hflow-all__label b { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); line-height: var(--lh-title); }
.hflow-all__label .hflow__price { font-size: var(--text-xs); color: var(--band-dim, var(--color-text-muted)); }
body.hflow-lock { overflow: hidden; }
@media (max-width: 980px) {
	:root { --hflow-col: 23vw; --hflow-gap: var(--space-4); }
}
@media (max-width: 640px) {
	:root { --hflow-col: 32vw; --hflow-gap: var(--space-3); }
	.hflow { height: clamp(32rem, 92svh, 46rem); }
	.hflow__copy { bottom: var(--space-5); }
	.hflow__note { font-size: var(--text-sm); }
	.hflow-all__head { flex-direction: column; align-items: stretch; gap: var(--space-4); padding-block: var(--space-5) var(--space-4); }
	.hflow-all__tools { justify-content: space-between; }
	.hflow-all__grid { gap: var(--space-5) var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
	.hflow__track, .hflow__col, .hflow__cut, .hflow__aside, .hflow-all__cell, .hflow-all__grid.is-rehung .hflow-all__frame { animation: none; }
	.hflow-all, .hflow-all__light { transition: none; }
}

/* ------------------------------------------------------------------
 * EXIT ([d0_exit]) — a world's way out, one bright piece at the foot of
 * its zone (the owner's pick on the canvas, "C · Tek parça", 2026-09-15,
 * then smaller with the world's categories riding across the top). The
 * one section that paints its own colour (`--exit-bg`, brighter than the
 * ladder on purpose: the eye resets between worlds); ink on it (paper with `ink="paper"`). TOP: a
 * rail of the world's categories as plain caps words with dots between
 * (owner: "metin tarzında"), on a track riding half its width (the
 * template lays the list twice), paused under the pointer so a word can
 * be clicked; hover underlines it.
 * THEN the link: the title in ONE display face at the hero size
 * (`--text-hero`, ~67px at 1280), a 72px ring arrow that draws itself. ARRIVAL: the words
 * slide in from the left one after another and the ring draws when
 * main.js marks the block `is-in`; hover fills the ring with ink (paper
 * glyph). Reduced motion: everything at once, the rail still.
 * ---------------------------------------------------------------- */
.exit { --exit-ink: var(--zone-ink); --exit-paper: var(--zone-paper); background: var(--exit-bg, var(--color-ticket)); color: var(--exit-ink); }
.exit--paper { --exit-ink: var(--zone-paper); --exit-paper: var(--zone-ink); } /* `ink="paper"`: the words turn paper on a dark bg (the Home Decor indigo reads 2.7:1 with ink, 6.4:1 with paper); hover inverts with them */
.exit__rail { display: block; overflow: hidden; padding-block: var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--exit-ink) 22%, transparent); }
.exit__track { display: flex; align-items: center; gap: var(--space-4); width: max-content; white-space: nowrap; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; animation: exit-rail 48s linear infinite; }
.exit__rail:hover .exit__track { animation-play-state: paused; }
@keyframes exit-rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.exit__chip { color: var(--exit-ink); text-decoration: none; text-underline-offset: 0.3em; }
.exit__chip:hover { text-decoration: underline; }
.exit__dot { opacity: 0.45; }
.exit__link { display: block; color: var(--exit-ink); text-decoration: none; }
.exit__main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); }
.exit__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.exit__eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: 0.75; }
.exit__title { display: flex; flex-wrap: wrap; gap: 0 0.24em; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } /* one step above the opener (owner, 2026-09-15: "biraz daha büyütelim") */
.exit--small .exit__title { margin: 0; font-size: var(--text-3xl); } /* `size="small"`: a section title's size (the home's What Buyers Say band, owner 2026-10-29) */
.exit--small .exit__main { padding-block: var(--space-4); }
.exit__word { display: inline-block; opacity: 0; transform: translateX(-0.3em); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--i, 0) * 150ms); }
.exit__box.is-in .exit__word { opacity: 1; transform: none; }
.exit__arrow { position: relative; flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 1.75rem; color: var(--exit-ink); opacity: 0; transition: opacity 0.7s var(--ease-out), color var(--motion); transition-delay: calc(var(--i, 0) * 150ms), 0s; }
.exit__box.is-in .exit__arrow { opacity: 1; }
.exit__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.exit__ring circle { stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.1s var(--ease-out), fill var(--motion); transition-delay: calc(var(--i, 0) * 150ms + 200ms), 0s; }
.exit__box.is-in .exit__ring circle { stroke-dashoffset: 0; }
.exit__arrow .icon { position: relative; }
.exit__link:hover .exit__arrow { color: var(--exit-paper); }
/* The hover fills the RING, not the box (owner, 2026-09-25): the ring's
   stroke sits ~1px inside the 72px box, so an ink background showed a thin
   dark band outside the paper line; filled inside the stroke, the paper
   line is the disc's edge. */
.exit__link:hover .exit__ring circle { fill: var(--exit-ink); }
@media (max-width: 640px) {
	.exit__main { padding-block: var(--space-4); }
	.exit__arrow { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.exit__word, .exit__arrow { opacity: 1; transform: none; transition: none; }
	.exit__ring circle { stroke-dashoffset: 0; transition: none; }
	.exit__track { animation: none; }
}
/* WINDOW, second make (figure="id"; owner, 2026-09-16: the Shorthand
   window's feel, "kutu kayarken görselin üstünden kayması", kept; its
   geometry rebuilt after five rounds). The figure is FIXED to the screen
   and shows through a window in the band (the media box, in flow under
   the rail and the link, `clip-path` clipping a fixed child), so as the
   band scrolls the figure stands still and the band slides over it. What
   changed: (1) the figure is always its own ratio at the band's width
   (width 100%, height auto; never cover), so no screen shape cuts its
   sides; the ratio comes inline from the attachment (the phone cut's
   under 640), and 100cqw is the band's true width. (2) Taller than the
   screen it keeps its top (the heads); shorter, it stands on the screen's
   foot: `top: max(0, screen - figure)`. (3) The window is never taller
   than the figure: `min(--exit-window-h, figure)`, so a portrait tablet's
   window is the figure's own height. (4) A figure shorter than the screen
   would leave ground over itself once the window's top passed its top:
   through the `contain` range (the band fully in view, rising from the
   foot to the top) it glides up by exactly that shortfall on the band's
   view timeline, then stands still again as the band leaves. A figure as
   tall as the screen or taller (wide desktops) has no shortfall: the pure
   window. No zoom (it cut the sides), no script. */
.exit--window { --exit-window-h: 50vh; container-type: inline-size; }
.exit--window .exit__media { --exit-ratio: var(--exit-figure-ratio, 3 / 2); --exit-fig-h: calc(100cqw / (var(--exit-ratio))); --exit-short: max(0px, calc(100vh - var(--exit-fig-h))); position: relative; height: min(var(--exit-window-h), var(--exit-fig-h)); clip-path: inset(0); overflow: clip; pointer-events: none; view-timeline: --exit-window block; } /* the timeline is the WINDOW's, not the band's: `contain` must mean the window fully in view, or the glide runs out before the window's top has reached the figure's */
.exit--window .exit__figure { position: fixed; left: 0; top: var(--exit-short); width: 100%; height: auto; animation: exit-glide linear both, exit-zoom linear both; animation-timeline: --exit-window, --exit-window; animation-range: contain 0% contain 100%, entry 0% exit 0%; }
@keyframes exit-glide { from { translate: 0 0; } to { translate: 0 calc(-1 * var(--exit-short)); } }
/* … and it breathes (owner, 2026-09-16, once the window held: "ortaya
   gelene kadar zoom in, en üste yapıştığında zoom out olup sıfırlanacak",
   "1.2 ile, biraz fazla olsun"): scale 1 as the window enters, --exit-zoom
   as its top crosses the screen's middle, 1 again as it reaches the top,
   where the figure then stands still (the glide and the zoom are separate
   properties, they compose). It grows from the edge it stands on: the
   foot when short, the top (the heads) when tall; the origin flips on
   --exit-short (0 = tall). The known cost: at the peak a full-width
   figure loses (1 - 1/zoom)/2 of each side, 8% at 1.2, and gets it back. */
.exit--window { --exit-zoom: 1.2; }
.exit--window .exit__figure { transform-origin: 50% clamp(0px, calc(var(--exit-short) * 1000), 100%); }
.exit--window .exit__figure { aspect-ratio: var(--exit-ratio); } /* the cut on screen, not the <img>'s width and height: a phone's portrait cut under the landscape figure's attributes came out squashed (owner, 2026-10-30), and the window then showed ground under it, the title over nothing */
@keyframes exit-zoom { 0% { scale: 1; } 50% { scale: var(--exit-zoom); } 100% { scale: 1; } }
@supports (height: 100dvh) {
	.exit--window { --exit-window-h: 50dvh; }
	.exit--window .exit__media { --exit-short: max(0px, calc(100dvh - var(--exit-fig-h))); }
}
/* window="short": the same window as a slit, about a quarter of the screen
   (the home's Build Your Own Wall band, owner 2026-10-24). */
.exit--window.exit--short { --exit-window-h: 24vh; }
@supports (height: 100dvh) {
	.exit--window.exit--short { --exit-window-h: 24dvh; }
}
@media (max-width: 640px) {
	.exit--window .exit__media { --exit-ratio: var(--exit-figure-ratio-phone, var(--exit-figure-ratio, 3 / 2)); }
}
@media (prefers-reduced-motion: reduce) {
	.exit--window .exit__figure { animation: none; }
}

/* ------------------------------------------------------------------
 * COUNTDOWN (a campaign's end, ticking; inc/countdown.php)
 * Band: [d0_countdown] on the home or a category landing, never at the top
 * of a list (owner, 2026-10-31). Inline: one quiet line under the product
 * page's price and over Checkout in the cart drawer and on the cart page.
 * Tokens only, so it inherits any zone's remap.
 * ---------------------------------------------------------------- */
.countdown--band {
	background: var(--color-surface);
	border-top: 1px solid var(--color-hairline);
	border-bottom: 1px solid var(--color-hairline);
	padding-block: var(--space-4);
}
.countdown__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.countdown__copy { display: grid; gap: var(--space-1); }
.countdown__eyebrow { margin: 0; }
.countdown__title {
	margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
	font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-ink);
}
.countdown__until { font-size: var(--text-sm); color: var(--color-text-muted); }
.countdown__clock { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.countdown__unit {
	display: grid; justify-items: center; gap: 0.15rem; min-width: 3.25rem;
	padding: var(--space-2); background: var(--color-bg);
	border: 1px solid var(--color-hairline); border-radius: var(--radius-sm);
}
.countdown__unit b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: 1; color: var(--color-ink); }
.countdown__unit small { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
.countdown--short :is(.countdown__days) { display: none; }
.countdown.is-over .countdown__clock { opacity: 0.5; }
.countdown__cta { flex: 0 0 auto; }

/* Inline: one quiet line, a minimal clock (the sale icon in the
   badge's accent, the words, then 2d 04:12:33, the days dropping on the last
   day); right under .pdp-priceline and over the cart's Checkout. At zero the
   words say "Sale ended" and the time leaves. */
.countdown--inline {
	display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
	margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted);
}
.countdown--inline .icon { font-size: var(--text-lg); color: var(--brand-accent); }
.countdown__time { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
.countdown.is-over .countdown__time { display: none; }
/* The cart drawer: in its dark total, under the Subtotal label (d0_mini_cart_total()); the saving's chip beside the price carries the percent, so the badge icon stays out. */
.mini-cart .countdown--inline { margin: 0; font-size: var(--text-sm); color: color-mix(in srgb, var(--color-accent-contrast) 65%, transparent); }
.mini-cart .countdown--inline .icon { display: none; }
.mini-cart .countdown__time { color: var(--color-accent-contrast); }

@media (max-width: 40rem) {
	.countdown__inner { justify-content: flex-start; }
	.countdown__cta { width: 100%; }
}

/* ==================================================================
   BUILD YOUR WALL ([d0_wall_builder]; owner, 2026-10-22: "kendi galeri
   duvarını kurabileceği bir yer", then "bu alanı hem duvar yapıcı hem de
   fikir verici olarak kullanacağız", then "eski Gallery Wall gibi beyaz").
   One PAPER card with a hairline, as the wall slider's basket card was:
   the photo runs to the card's own edges, the panel joins it on the right.
   Two modes on one DOM (data-mode): IDEA shows a saved wall live on its
   room with its words over the photo, the saved walls as previews under
   it and the list of prints with their prices on the right; EDIT turns the
   same card into the builder (the rooms under the photo, a row's chevron
   opening its size and frame, the search bar across the foot). Two screens
   (data-screen): the WALL, and the POSTERS screen the search bar turns the
   whole card into, at the height the wall screen had, scrolling as one.
   Under 901px "Edit this wall" opens the card as a full-screen app
   (.wb.is-app inside a dialog): a bar across the top, the stage, tools
   across the foot, each tool a sheet over the stage.
   A frame is drawn by CSS at real size: --inch is an inch in % of the
   photo's width, --w and --h the print in inches, --m the moulding; the
   moulding is a seamless wood tile laid along each side (assets/img/frames,
   data/decor/frames/make_textures.py) with a dark mitre at each corner
   (owner: "köşe çizgilerinin siyah hâli") and the print set a hair behind
   it. Every button and chip inside the card is a pill (owner exception,
   2026-10-22), at the wall slider's size.
   ================================================================== */
.wb {
	--zone-bg: var(--zone-paper);
	position: relative; overflow: hidden;
	border: 1px solid var(--color-border); border-radius: var(--radius-card-lg);
	background: var(--zone-paper);
	color: var(--color-text);
	scroll-margin-top: calc(var(--header-h) + var(--space-3)); /* the search brings the card's head into view, under the sticky header */
}
.wb [hidden] { display: none; } /* the parts' own display (grid, flex) would beat the attribute */
.wb .fchip, .wb .button { border-radius: var(--radius-pill); } /* the dropdown keeps the store's own corners: a pill looked broken open */
.wb .fchip { flex: none; cursor: pointer; }
.wb .fchip[aria-pressed="true"] { background: var(--control-active); border-color: var(--control-active); color: var(--color-accent-contrast); } /* .fchip.is-on, from the pressed state */
.wb .dselect, .wb .dselect__btn { width: 100%; }
/* The modes: what each one hides. */
.wb[data-mode="idea"] :is(.wb-row__edit, .wb-row__remove, .wb-row__toggle) { display: none; } /* a set's list reads as what it is, prints and prices: the trash and the chevron come with editing (owner, 2026-10-23: "kafasının karışmaması gerekiyor") */
.wb[data-mode="edit"] .wb__caption { display: none; }
.wb__screen--wall { display: grid; }

.wb__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(22rem, 1fr); } /* the panel never under 22rem: Buy all and Edit wall share its row with their words (owner, 2026-10-22: "desktop modda niye Edit'i sadece ikona çevirdin ... satırı iki buton paylaşsın") */
.wb__main { display: grid; align-content: start; min-width: 0; }

/* The photo, edge to edge. A room (3:2) fills the view; the visitor's own
   photo keeps its shape inside the same 3:2, a tall one narrowing to the
   middle. */
.wb__view { position: relative; overflow: hidden; container-type: inline-size; background: var(--zone-surface); }
/* d0:wall-frames start: the stage, the frames and the miniatures, also
   drawn by the panel's wall editor (Hanging Club › Walls), which cuts this
   block out of this file between the two markers (inc/admin-walls.php):
   one source for both. Inside it only rules that hold without the card
   around them, and only the tokens the panel defines for them (admin.css,
   .d0-walls). */
.wb__stage {
	position: relative; overflow: hidden;
	aspect-ratio: var(--ratio, 1.5);
	width: min(100cqw, calc(100cqw / 1.5 * var(--ratio, 1.5)));
	margin-inline: auto;
	user-select: none;
}
.wb__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb__wall { position: absolute; inset: 0; }

/* The frame. The moulding is the button's padding, and the moulding art
   (assets/img/frames/frame-<wood>.webp, a flat wood photograph cut into a
   9-slice by data/decor/frames/make_frames.py: four mitred corners of 128
   px, the grain turning the corner, a lit profile across the moulding) is
   laid round it with border-image at the moulding's width: --mw and --mh
   are its share of the frame's own width and height. The sides stretch
   along their length, which only draws the grain longer, so the one
   source reads right from a 4 px moulding on a phone to the app's zoom. */
.wb-frame {
	--mw: calc(100% * var(--m) / (var(--w) + 2 * var(--m)));
	--mh: calc(100% * var(--m) / (var(--h) + 2 * var(--m)));
	position: absolute; display: block;
	left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); /* its centre, in % of the stage (wall-builder-stage.js, d0_builder_frame_parts()) */
	width: calc((var(--w) + 2 * var(--m)) * var(--inch) * 1%);
	padding: calc(var(--m) * var(--inch) * 1%);
	border: 0; outline: 0; cursor: pointer;
	translate: -50% -50%;
	--frame-face: var(--frame-black-face);
	--frame-lip: var(--frame-black-lip);
	background: linear-gradient(var(--frame-lip), var(--frame-lip)) content-box, var(--frame-face); /* under the 9-slice: its seams and the hairline beside the print show the moulding, not the wall (owner, 2026-10-26, as on the framed card) */
	border-image-source: url(../img/frames/frame-black.webp);
	border-image-slice: 128;
	border-image-width: var(--mh) var(--mw);
	border-image-repeat: stretch;
	box-shadow: 0 2px 5px -1px rgb(0 0 0 / 0.24), 0 1px 1.5px rgb(0 0 0 / 0.16); /* a small one (owner, 2026-10-23: the deep drop shadow went, "çerçeveler biraz kayboldu" without any): enough to lift the frame off the wall */
	transition: width var(--motion-travel), padding var(--motion-travel), translate var(--motion-travel), scale var(--motion);
}
.wb[data-mode="edit"] .wb-frame { cursor: grab; touch-action: none; } /* on the page the finger scrolls; in edit mode it drags */
.wb[data-mode="edit"] .wb-frame:active { cursor: grabbing; }
/* Edit mode (owner, 2026-10-22: "çizgi çizgi hâle, edit moduna getirelim"):
   a dashed line on the frame's own edge, never a ring around it, with a
   dark hairline either side so it reads on a pale wall and a white frame. */
.wb-frame::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border: 2px dashed var(--zone-paper);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(0 0 0 / 0.35);
	opacity: 0; transition: opacity var(--motion);
}
.wb-frame.is-selected::after { opacity: 1; }
/* The room's light on the frame (owner, 2026-10-23: "Photoshop'taki
   Multiply gibi ... posterleri bulunduğu duvara hafif daha yedirmek ...
   odanın en azından ışığını yer"): over the frame, the room's own photo
   (--room, on the stage) cut to exactly where the frame hangs, multiplied
   at --wb-light. The sun on the wall warms the print, a shadow deepens
   it, the wall's tone tints its paper; the frame (a stacking context, its
   translate) keeps the blend to itself. --fw and --fh are the frame's size
   in % of the stage, so the photo is the stage's size and sits at the
   frame's corner. The previews' miniature frames take it too, and the
   Wall Sets cards (owner, 2026-10-23: "önizlemeler ve wall sets
   kısmındakiler için yapılmamış"): each feeds --room the very file it
   draws (a preview its thumb, a card the size its srcset picked, set by
   wall-sets.js once it loads), so nothing loads twice; without a --room
   there is no layer. */
:is(.wb-frame, .wb-mini__frame)::before {
	--fw: calc((var(--w) + 2 * var(--m)) * var(--inch));
	--fh: calc((var(--h) + 2 * var(--m)) * var(--inch) * var(--ratio));
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-image: var(--room, none); background-repeat: no-repeat;
	background-size: calc(100% * 100 / var(--fw)) calc(100% * 100 / var(--fh));
	background-position: calc((var(--x) - var(--fw) / 2) / (100 - var(--fw)) * 100%) calc((var(--y) - var(--fh) / 2) / (100 - var(--fh)) * 100%);
	mix-blend-mode: multiply; opacity: var(--wb-light, 0.5);
}
.wb-frame:focus-visible::after { opacity: 1; }
.wb-frame[data-frame="white"] { border-image-source: url(../img/frames/frame-white.webp); --frame-face: var(--frame-white-face); --frame-lip: var(--frame-white-lip); }
.wb-frame[data-frame="natural"] { border-image-source: url(../img/frames/frame-natural.webp); --frame-face: var(--frame-natural-face); --frame-lip: var(--frame-natural-lip); }
.wb-frame[data-frame="dark"] { border-image-source: url(../img/frames/frame-dark.webp); --frame-face: var(--frame-dark-face); --frame-lip: var(--frame-dark-lip); }
.wb-frame[data-frame="unframed"] { border-image-source: none; background: none; }
.wb-frame__inner { position: relative; display: block; }
.wb-frame[data-frame="unframed"] .wb-frame__inner { box-shadow: none; }
.wb-frame__print { display: block; width: 100%; aspect-ratio: var(--w) / var(--h); object-fit: cover; pointer-events: none; background: var(--zone-surface); }
.wb-frame__glass {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(118deg, transparent 30%, rgb(255 255 255 / 0.14) 45%, transparent 60%), linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 40%);
	/* The rabbet's shade on the print, drawn on this layer OVER the picture (an inset shadow on the box under it hides beneath the picture): the same thin dark hairline on every side (owner, 2026-10-22, after trying a deeper right and bottom). */
	box-shadow: inset 0 0 2px 0.5px rgb(0 0 0 / 0.35);
}
.wb-frame[data-frame="unframed"] .wb-frame__glass { display: none; }
.wb__guide { position: absolute; z-index: 50; pointer-events: none; background: color-mix(in srgb, var(--zone-paper) 80%, transparent); box-shadow: 0 0 6px rgb(255 255 255 / 0.6); }
.wb__guide--x { top: 0; bottom: 0; width: 1px; }
.wb__guide--y { left: 0; right: 0; height: 1px; }
/* The selected print's size buttons (wall-builder-resize.js): a paper
   capsule over its top edge, centred on it (under its bottom edge when
   there is no room above), − the size +. Edit mode only; the app keeps its
   own strip at the stage's foot (main.css, .wb.is-app). */
.wb__resize { position: absolute; z-index: 55; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); translate: -50% calc(-100% - 8px); background: var(--zone-paper); color: var(--zone-ink); box-shadow: 0 2px 10px rgb(0 0 0 / 0.22); }
.wb__resize.is-below { translate: -50% 8px; }
.wb__resize[hidden] { display: none; }
.wb__resize button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color var(--motion); }
.wb__resize button:hover { background: var(--zone-ink); color: var(--zone-paper); } /* inverts like every control */
.wb__resize button:disabled { opacity: 0.35; cursor: default; background: none; }
.wb__resize .icon { width: 16px; height: 16px; }
.wb__resize-size { min-width: 3.2em; padding: 0 2px; font-size: 12px; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb__resize-more { display: none; } /* the frames and the remove: the wall stage's capsule only (.wb.is-stage) */
/* A wall in miniature on its room: the preview is the set itself. The
   frame's box is the frame's true size on the room; its moulding is one
   pixel INSIDE that box (a ring outside it ate the gaps between the
   prints: at this scale a 3-inch gap is 2 px; owner, 2026-10-22), the
   print filling the rest. */
.wb-mini { position: absolute; inset: 0; display: block; overflow: hidden; }
.wb-mini > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-mini__frame { position: absolute; display: block; box-sizing: border-box; padding: 1px; translate: -50% -50%; background: var(--zone-ink); box-shadow: 0 1px 1.5px rgb(0 0 0 / 0.3); }
.wb-mini__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-mini__frame[data-frame="white"] { background: #f3f1ec; }
.wb-mini__frame[data-frame="natural"] { background: var(--wood-oak); }
.wb-mini__frame[data-frame="dark"] { background: var(--wood-walnut); }
.wb-mini__frame[data-frame="unframed"] { padding: 0; background: none; }
/* d0:wall-frames end */
/* A Gallery Walls set the owner framed (the panel's editor; owner,
   2026-10-22: "zoom in ve zoom out yapıp sağa sola kaydırabileyim";
   d0_wall_frame_window()): in idea mode, outside the app, the SCENE (the
   room and its prints, never the words and buttons over them) is enlarged
   --fz times with the window's corner (--fx, --fy: % of the photo) at the
   stage's corner; editing, another room or the app eases back to the whole
   room (wall-builder-framing.js). */
.wb__scene { position: absolute; inset: 0; transform-origin: 0 0; transition: transform var(--motion-travel); }
.wb:not(.is-app) .wb__stage[data-framed] .wb__scene { transform: translate(calc(-1% * var(--fx) * var(--fz)), calc(-1% * var(--fy) * var(--fz))) scale(var(--fz)); }
/* An empty wall in edit mode asks for its first poster: an ink pill in the
   middle of the room that opens the posters screen. It shows while the
   list's own "Nothing hangs yet" does (the old test, the list being
   :empty, never held: the list keeps its whitespace). */
.wb__empty { display: none; position: absolute; left: 50%; top: 42%; z-index: 40; translate: -50% -50%; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); white-space: nowrap; }
.wb__empty .icon { width: 1.1rem; height: 1.1rem; }
.wb[data-mode="edit"] .wb__screen--wall:has(.wb__list-empty:not([hidden])) .wb__empty { display: inline-flex; }
/* The set's words over the photo's foot in idea mode. */
.wb__caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; pointer-events: none;
	padding: var(--space-6) var(--space-4) var(--space-4);
	background: linear-gradient(180deg, transparent, rgb(21 20 14 / 0.58));
	color: var(--zone-paper);
}
.wb__hook { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.wb__sub { margin: 0.25rem 0 0; font-size: var(--text-sm); line-height: var(--lh-body); opacity: 0.88; }
.wb__hook:empty, .wb__sub:empty { display: none; }
/* The toolbar (owner, 2026-10-23: "bir uygulamanın toolbarı gibi bir alan
   kuralım ... küçük butonlar vardır ama desktop modda mouse ile üstüne
   gelince açılır"): ONE place, the photo's foot on the right, for every
   control the wall has. Idea mode: MAKE IT YOURS alone, a paper pill with
   its pencil in an ink capsule (the set's words keep clear of it). Edit
   mode: DONE in its place, a check in the capsule, and to its left one
   paper capsule of tools, each an icon that opens to its name under the
   pointer: search (it opens into a field), undo, redo, the chosen poster's
   frame (off while none is chosen; there is no every frame at once) and, on
   the visitor's photo, the wall's width (each opens its swatches or its
   slider beside the icon, under the pointer or on a press), start over,
   clear. The app keeps its own bars for searching (Posters) and leaving
   (the close button): there the capsule sits at the stage's top. */
.wb-bar { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 48; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); max-width: calc(100% - 2 * var(--space-4)); }
.wb__caption { padding-right: calc(var(--space-4) + 13rem); } /* the set's words keep clear of Make it yours */
.wb-bar__tools { display: none; align-items: center; gap: 2px; min-width: 0; padding: 4px; border-radius: var(--radius-pill); background: var(--zone-paper); color: var(--zone-ink); box-shadow: 0 2px 12px rgb(0 0 0 / 0.2); }
.wb[data-mode="edit"] .wb-bar__tools { display: flex; }
.wb[data-mode="edit"] .wb__make, .wb[data-mode="idea"] .wb__finish, .wb.is-modal .wb__finish { display: none; } /* one pill, one place: Make it yours becomes Done (the dialog closes from its own bar) */
.wb-bar__sep { flex: none; width: 1px; height: 1.25rem; margin: 0 3px; background: var(--color-hairline); }
.wb-tool { display: flex; align-items: center; min-width: 0; border-radius: var(--radius-pill); }
.wb-tool__btn {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 calc((var(--control-h-sm) - 1.15rem) / 2);
	border: 0; border-radius: var(--radius-pill); background: none; color: inherit; cursor: pointer;
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap;
	transition: background-color var(--motion), color var(--motion);
}
.wb-tool__btn .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.wb-tool__btn:not(:disabled):hover, .wb-tool.is-open > .wb-tool__btn { background: var(--zone-ink); color: var(--zone-paper); }
.wb-tool__btn:disabled { opacity: 0.35; cursor: default; }
.wb-tool__label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--motion-travel), margin var(--motion-travel), opacity var(--motion); }
.wb-tool__pop { display: flex; align-items: center; gap: var(--space-2); max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--motion-travel), padding var(--motion-travel), opacity var(--motion); }
.wb-tool.is-open .wb-tool__pop { max-width: 16rem; padding-inline: var(--space-2); opacity: 1; }
.wb-tool__pop.wb__swatches { flex-wrap: nowrap; padding-block: 4px; }
.wb-tool__range { color: var(--zone-ink); }
.wb-tool__range output { min-width: 6.5em; font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-tool__range input { width: 8rem; accent-color: var(--zone-ink); }
.wb-tool__input { width: 0; min-width: 0; height: var(--control-h-sm); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-sm); opacity: 0; transition: width var(--motion-travel), padding var(--motion-travel), opacity var(--motion); }
.wb-tool__input:focus { outline: none; }
.wb-tool--search.is-open { background: var(--zone-surface); }
.wb-tool--search.is-open .wb-tool__input { width: min(14rem, 30cqw); padding-inline: var(--space-2) var(--space-3); opacity: 1; }
/* Under the pointer, on a photo wide enough for the capsule to grow: a
   tool's name, and the frame's swatches or the width's slider. */
@media (hover: hover) {
	@container (min-width: 701px) {
		.wb-tool__btn:not(:disabled):hover .wb-tool__label, .wb-tool__btn:focus-visible .wb-tool__label { max-width: 7rem; margin-left: 0.4em; opacity: 1; }
		.wb-tool--pop:hover:not(:has(> .wb-tool__btn:disabled)) .wb-tool__pop { max-width: 16rem; padding-inline: var(--space-2); opacity: 1; } /* the frame tool waits for a chosen poster */
	}
	.wb-tool--search.is-open .wb-tool__label { max-width: 0; margin: 0; opacity: 0; } /* the field says it */
}
/* A narrow photo (the app on a phone, a small laptop's card): a tool opens
   on a press only, and while it is open the capsule holds it alone, as an
   app's sub-bar does; the same press closes it. */
@container (max-width: 700px) {
	.wb-bar__tools:has(.wb-tool.is-open) > :not(.wb-tool.is-open) { display: none; }
	.wb-tool--search.is-open .wb-tool__input { width: min(14rem, calc(100cqw - 12rem)); }
}
.wb-bar__go { flex: none; gap: var(--space-3); padding: 0 calc((var(--control-h) - var(--control-h-sm)) / 2 - 1px) 0 1.25em; border: 1px solid var(--zone-paper); background: var(--zone-paper); color: var(--zone-ink); box-shadow: 0 2px 12px rgb(0 0 0 / 0.2); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; }
.wb-bar__go:hover { border-color: var(--zone-ink); background: var(--zone-ink); color: var(--zone-paper); }
.wb-bar__go:hover .wb__disc { background: var(--zone-paper); color: var(--zone-ink); }
@media (hover: hover) {
	.wb[data-mode="idea"]:not(.is-app) .wb-frame:hover { scale: 1.03; } /* a frame you can take: it grows to the pointer; a press makes the wall yours with it chosen */
}
/* An awake card (wall-builder-invite.js: in view, its tab shown, editing
   not begun) moves on its own (owner, 2026-10-23: "Meksika dalgası, böyle
   hafif ... topluca değil de biraz aşağı, biraz yukarı"; then "'Make it
   yours' butonunu da nefes efekti gibi büyüyüp küçülen"). The posters
   sway up and down by --wave-a, each --wave-step behind the one on its
   left (--wave-i), so a wave runs across the wall; a sine drawn in eight
   straight steps, so it never stops at the rest line. It runs while the
   pointer is off the photo (is-waving) and holds where it is otherwise;
   editing takes it off, and the frame's own translate transition settles
   it. Make it yours grows a little and back, on the travel curve, holding
   under the pointer. These are ambient loops, not transitions: their
   periods are their own. */
@keyframes wb-wave {
	0%, 50%, 100% { translate: -50% -50%; }
	12.5%, 37.5% { translate: -50% calc(-50% - 0.707 * var(--wave-a)); }
	25% { translate: -50% calc(-50% - var(--wave-a)); }
	62.5%, 87.5% { translate: -50% calc(-50% + 0.707 * var(--wave-a)); }
	75% { translate: -50% calc(-50% + var(--wave-a)); }
}
@keyframes wb-breathe {
	0%, 100% { scale: 1; }
	50% { scale: var(--breathe); }
}
.wb.is-wave .wb-frame { --wave-a: 0.3rem; --wave-step: 0.22s; animation: wb-wave 2.4s linear calc(var(--wave-i, 0) * var(--wave-step)) infinite paused; }
.wb.is-wave.is-waving .wb-frame { animation-play-state: running; }
.wb { --breathe: 1.06; }
.wb.is-awake .wb__make { animation: wb-breathe 2.4s var(--ease-travel) infinite; }
.wb.is-awake .wb__make:hover { animation-play-state: paused; }
/* The walls take turns (owner, 2026-10-23: "ok tuşlarının bulunduğu koyu
   alanın üstünde modern bir çizgi dolansın; her biri 4-5 saniyede bir
   otomatik geçsin"): along the ink row's top a hairline track, and over it
   a paper line filling left to right in --cycle; its end shows the next
   wall (wall-builder-invite.js listens for it). It shows while one of the
   store's walls is up and editing has not begun (is-cycle) and fills while
   the card is awake and nobody is on it (is-cycling); held otherwise. */
@keyframes wb-clock {
	from { scale: 0 1; }
	to { scale: 1 1; }
}
.wb__sets { position: relative; }
.wb__clock { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--zone-paper) 16%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--motion); }
.wb__clock-fill { display: block; height: 100%; background: var(--zone-paper); transform-origin: 0 50%; scale: 0 1; }
.wb.is-cycle .wb__clock { opacity: 1; }
.wb.is-cycle .wb__clock-fill { animation: wb-clock var(--cycle, 4.5s) linear forwards paused; }
.wb.is-cycle.is-cycling .wb__clock-fill { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
	.wb .wb-frame, .wb .wb__make, .wb .wb__clock-fill { animation: none; }
}
/* The app's quick size over the stage's foot: the selected print one step smaller or larger. */
.wb__quick { display: none; position: absolute; left: 50%; bottom: var(--space-3); z-index: 47; translate: -50% 0; align-items: center; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--zone-paper); box-shadow: 0 4px 14px rgb(0 0 0 / 0.18); }
.wb.is-app .wb__quick:not([hidden]) { display: flex; }
.wb.is-app .wb__view:has(.wb__quick:not([hidden])) .wb__app-hint { display: none; } /* the quick size takes the hint's place */
.wb__quick .arrowbtn { border-color: transparent; }
.wb__quick-size { min-width: 4.5rem; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.wb__app-hint { display: none; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

/* A row of previews under the photo (the saved walls in idea mode, the
   rooms in edit mode): named underneath, across the row's whole width up
   to the visitor's own entry, the same size, which holds the row's end.
   Its two arrows take no room of their own (owner, 2026-10-23: "oklar
   biraz fazla yer kaplıyor ... görseller tam alanı kaplasın ... okları
   üstüne koysak daha tatlı olacak"): small paper rings riding over the
   pictures at the row's ends, each only while more lies that way, over a
   fade of the row (wall-builder-strip.js sets is-back and is-more); they
   come and go on --motion. A mouse drags the row as a finger does; a
   touch screen keeps the finger alone. The row is INK (owner, the same
   day: "bu alt barı da koyu yapalım ... siyah ve koyu renkli olsun"):
   `zone--ink` on it remaps the tokens, so the names, the rings, the
   separator and the arrows (`arrowbtn--paper`) read on the dark. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.wb__strip {
	--thumb-w: 6.5rem;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg); color: var(--color-text);
}
.wb__strip-view { position: relative; min-width: 0; }
.wb__strip-track {
	display: flex; gap: var(--space-2);
	margin: -3px; padding: 3px; /* room for the pressed ring, which the scroll box would clip */
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 3px; scrollbar-width: none; /* the snap counts the ring's room: at rest the row starts at 0, so no arrow back */
	cursor: grab; user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
	transition: --fade-l var(--motion), --fade-r var(--motion);
}
.wb__strip.is-back .wb__strip-track { --fade-l: 3rem; }
.wb__strip.is-more .wb__strip-track { --fade-r: 3rem; }
.wb__strip.wstage__strip.is-back .wb__strip-track { --fade-l: 8rem; } /* the wall stage's row: a longer fade under its 48px arrows (owner, 2026-10-30: "fade'i daha da arttır") */
.wb__strip.wstage__strip.is-more .wb__strip-track { --fade-r: 8rem; }
.wb__strip-track.is-dragging { scroll-snap-type: none; } /* the row follows the pointer; it settles on a preview when let go */
.wb__strip-track.is-dragging, .wb__strip-track.is-dragging * { cursor: grabbing; }
.wb__strip-track::-webkit-scrollbar { display: none; }
.wb__strip-step {
	position: absolute; top: calc(var(--thumb-w) / 3); z-index: 2; translate: 0 -50%; /* the middle of the pictures (3:2), not of their names */
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
	opacity: 0; visibility: hidden;
	transition: opacity var(--motion), visibility 0s var(--motion), background-color var(--motion), border-color var(--motion), color var(--motion);
}
.wb__strip-step[data-wb-strip-step="-1"] { left: var(--space-1); }
.wb__strip-step[data-wb-strip-step="1"] { right: var(--space-1); }
.wb__strip.is-back .wb__strip-step[data-wb-strip-step="-1"], .wb__strip.is-more .wb__strip-step[data-wb-strip-step="1"] { opacity: 1; visibility: visible; transition: opacity var(--motion), visibility 0s, background-color var(--motion), border-color var(--motion), color var(--motion); }
@media (hover: none) {
	.wb__strip-step { display: none; } /* a finger slides the row */
}
.wb-thumb {
	flex: 0 0 var(--thumb-w); display: grid; gap: 0.4rem; width: var(--thumb-w); min-width: 0;
	padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--color-text-muted); text-align: center; scroll-snap-align: start;
}
.wb-thumb__pic {
	position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden;
	border-radius: var(--radius-sm); background: var(--color-surface); /* the ink row's own step while a picture loads */
	box-shadow: 0 0 0 1px var(--color-border);
	transition: box-shadow var(--motion);
}
.wb-thumb__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-thumb__pic .icon { width: 1.4rem; height: 1.4rem; }
.wb-thumb__name { overflow: hidden; font-size: var(--text-xs); line-height: var(--lh-heading); white-space: nowrap; text-overflow: ellipsis; transition: color var(--motion); }
/* The ring INSIDE the picture, on a layer over it (an inset shadow on the box
   itself hides under the picture); outside, the row's edge clipped it at a
   corner (owner, 2026-10-22). */
.wb-thumb__pic::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--color-ink); transition: box-shadow var(--motion); }
.wb-thumb:hover .wb-thumb__pic::after { box-shadow: inset 0 0 0 1px var(--color-ink); }
.wb-thumb[aria-pressed="true"] .wb-thumb__pic::after { box-shadow: inset 0 0 0 2px var(--color-ink); }
.wb-thumb[aria-pressed="true"] .wb-thumb__name { color: var(--color-text); font-weight: var(--fw-semibold); }
.wb-thumb--own { position: relative; margin-left: var(--space-2); padding-left: var(--space-3); box-sizing: content-box; }
.wb-thumb--own::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--space-3)); bottom: calc(-1 * var(--space-3)); width: 1px; background: var(--color-hairline); } /* the separator runs the row's full height (owner, 2026-10-22) */
.wb-thumb--own.has-photo .icon { display: none; }
.wb-thumb--own.is-empty .wb-thumb__pic { background: none; box-shadow: none; border: 1px dashed var(--color-border-strong); color: var(--color-text); transition: border-color var(--motion), background-color var(--motion); } /* "Start your own": a place to add to, not one more set */
.wb-thumb--own.is-empty:hover .wb-thumb__pic { border-color: var(--color-ink); background: var(--color-surface-light); }
.wb-thumb--own.is-empty .wb-thumb__name { color: var(--color-text); }
.wb__rooms { display: grid; }
.wb__photo-note { margin: 0; padding: 0 var(--space-4) var(--space-3); }

/* The panel: the wall's name and count, the list, the buying. Rows run
   the panel's full width (the basket panel's grammar, owner): the other
   parts keep the side padding. */
.wb__panel {
	display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
	padding: var(--space-4) 0;
	border-left: 1px solid var(--color-border);
	overflow-x: hidden;
}
/* The head: the wall's name and its count, their capitals on one middle
   (owner, 2026-10-22: "metin biraz aşağıda, tam ortada değil"): both are
   trimmed to cap height and centred, not set on a baseline. The count
   reads "6 PRINTS", on a phone "6" (the word stays for screen readers). */
.wb__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); }
.wb__step { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }
.wb__panel-head .wb__step { margin: 0; color: var(--color-text); text-box: trim-both cap alphabetic; }
.wb__count { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; min-width: 1.6rem; height: 1.6rem; margin: 0; padding: 0 0.7em; border-radius: var(--radius-pill); background: var(--zone-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb__count > span { text-box: trim-both cap alphabetic; }
@media (max-width: 640px) {
	.wb__count { padding: 0 0.5em; }
	.wb__count-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.wb__lead { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-body); }
.wb__list-empty { padding: 0 var(--space-4); }
.wb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wb-row { border-top: 1px solid var(--color-border); }
.wb-row:last-child { border-bottom: 1px solid var(--color-border); }
.wb-row__line { display: flex; align-items: center; gap: var(--space-1); padding-right: var(--space-2); }
.wb-row__line .arrowbtn { flex: none; } /* the store's own round bordered arrow button (owner, 2026-10-22) */
.wb-row__line .arrowbtn:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-contrast); } /* ...turning ink under the pointer */
.wb-row__line .arrowbtn .icon { width: 1.1rem; height: 1.1rem; }
.wb-row__pick {
	display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-4); border: 0; background: none; cursor: pointer;
	color: inherit; font: inherit; text-align: left;
}
.wb-row__line, .wb-row__edit { transition: background-color var(--motion); }
.wb-row:hover .wb-row__line { background: var(--color-surface-light); }
.wb-row.is-selected :is(.wb-row__line, .wb-row__edit) { background: var(--color-surface-light); }
/* The print in its frame: the product's own frame mock-up (a square studio
   picture), cropped to the frame by the basket panel's measured pair
   (--poster-ratio + --poster-crop-w: the paper of the unframed shot sits
   exactly where the frame sits in the framed ones), so no
   wall shows at the corners (owner, 2026-10-22). */
.wb-row__thumb { position: relative; flex: none; height: 3.5rem; aspect-ratio: var(--poster-ratio); overflow: hidden; background: var(--zone-surface); }
.wb-row__thumb img { position: absolute; top: 50%; left: 50%; width: var(--poster-crop-w); height: auto; max-width: none; transform: translate(-50%, -50%); }
.wb-row__thumb--flat { background: none; }
.wb-row__thumb--flat img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; } /* a print with no studio shot to crop (a square or wide one): its flat picture, whole */
.wb-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; line-height: var(--lh-heading); }
.wb-row__name { overflow: hidden; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap; text-overflow: ellipsis; }
.wb-row__at { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-text); }
.wb-row__price { font-size: var(--text-xs); color: var(--color-text-muted); }
.wb-row__price del { margin-right: 0.25em; color: var(--color-text-muted); }
.wb-row__price ins { text-decoration: none; color: var(--color-text); }
.wb-row__toggle .icon { transform: rotate(90deg); transition: transform var(--motion); } /* the filter pills' chevron: down closed, up open */
.wb-row.is-selected .wb-row__toggle .icon { transform: rotate(-90deg); }
/* The open row: the size, then the store's frame tiles, stacked (owner: "hep dikey"). */
.wb-row__edit { display: none; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.wb[data-mode="edit"] .wb-row.is-selected .wb-row__edit { display: grid; } /* the selected print's row is the open one */
.wb-row__edit > * { min-width: 0; }
/* A row's frames and the toolbar's frame tool as round colour swatches (owner,
   2026-10-22: the photographed tiles did not fit the panel, "eski stilde
   yuvarlak ... renk seçeneği şeklinde"): the filters' .fswatch, pressed
   like it, a ring round the chosen one; each frame its moulding's colour,
   Unframed the paper with a stroke through it. */
.wb__swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 4px 0 2px 4px; } /* the pressed ring's 4px */
.wb__swatch {
	width: 1.75rem; height: 1.75rem; padding: 0;
	border: 1px solid var(--color-border); border-radius: 50%; background: var(--sw); cursor: pointer;
	transition: box-shadow var(--motion);
}
.wb__swatch[hidden] { display: none; } /* a frame the chosen print's price list does not offer */
.wb__swatch:hover { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-border-strong); }
.wb__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
.wb__swatch:is([data-wb-row-frame="black"], [data-wb-frame="black"]) { --sw: var(--zone-ink); }
.wb__swatch:is([data-wb-row-frame="white"], [data-wb-frame="white"]) { --sw: #fff; }
.wb__swatch:is([data-wb-row-frame="natural"], [data-wb-frame="natural"]) { --sw: var(--wood-oak); }
.wb__swatch:is([data-wb-row-frame="dark"], [data-wb-frame="dark"]) { --sw: var(--wood-walnut); }
.wb__swatch:is([data-wb-row-frame="unframed"], [data-wb-frame="unframed"]) { --sw: linear-gradient(135deg, transparent 45%, var(--color-text-muted) 46% 54%, transparent 55%), var(--color-surface); }
.wb__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wb__link { padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; transition: color var(--motion); }
.wb__link:hover { color: var(--color-ink); }
.wb__note { margin: 0; color: var(--color-text); font-size: var(--text-sm); }
.wb__note .wb__link { color: inherit; font-size: inherit; }
.wb__hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.wb__buy { display: grid; gap: var(--space-2); margin-top: auto; padding: 0 var(--space-4); min-width: 0; container-type: inline-size; }
/* BUY ALL · $627.95, the panel's one button: the Wall Sets card's on the
   panel's paper (owner, 2026-10-22: "Wall Set'teki gibi satın al ikonlarını
   yuvarlak içine al ... en kısa metni yaz, gerekirse hepsini büyük yaz";
   "üzerine gelince içleri siyaha dönüşsün"; 2026-10-23: the total in its
   words, nothing beside it): a hollow pill with an ink hairline, the words
   in medium capitals centred in the room left of an ink capsule held at
   the right end (the basket and the count), as far in from the end as from
   the top and the bottom; the pill fills with ink under the pointer and
   its capsule turns paper. */
.wb__buy-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
/* The wall in the cart (wall-builder-buy.js: is-added): Buy all gives way
   to VIEW CART, a check in its capsule, and CHECKOUT in ink, an arrow in a
   paper capsule, sharing the row; another wall, or this one changed,
   brings Buy all back. A state on the way (adding, a failure) is words in
   Buy all's own label, its basket kept. */
.wb__buy-row:not(.is-added) :is(.wb__view-cart, .wb__go-checkout), .wb__buy-row.is-added .wb__cart { display: none; }
.wb__buy-row.is-added { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb__buy-row.is-added .button { padding-left: 0.75em; gap: 0.3em; } /* VIEW CART and CHECKOUT whole in a half of the 22rem panel (they ran 3px over at 1em) */
.wb__buy-row .wb__go-checkout { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-accent-contrast); }
.wb__buy-row .wb__go-checkout .wb__disc { background: var(--color-accent-contrast); color: var(--color-ink); }
.wb__buy-row .wb__go-checkout:hover { background: var(--color-bg); color: var(--color-ink); }
.wb__buy-row .wb__go-checkout:hover .wb__disc { background: var(--color-ink); color: var(--color-accent-contrast); }
.wb__buy-row .button {
	min-width: 0; padding: 0 calc((var(--control-h) - var(--control-h-sm)) / 2 - 1px) 0 1em; border-width: 1px;
	white-space: nowrap; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.wb__buy-row .button > .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; padding-block: 0.3em; margin-block: -0.3em; } /* the label is trimmed to its capitals (.label), so a clip would cut the glyphs: the padding gives them their room back, the margin keeps the box where it was */
.wb__disc {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
	height: var(--control-h-sm); min-width: var(--control-h-sm); padding-inline: calc((var(--control-h-sm) - 1em) / 2); border-radius: var(--radius-pill);
	background: var(--color-ink); color: var(--color-accent-contrast);
	transition: background-color var(--motion), color var(--motion);
}
.wb__buy-row .button:hover .wb__disc { background: var(--color-accent-contrast); color: var(--color-ink); }
.wb__cart .wb__disc .icon { translate: 0 0.047em; } /* Phosphor's basket sits high on its grid */
.wb__cart-count { letter-spacing: 0; }
/* The app's pair (Add wall to cart, Checkout): the same hairline, one line. */
.wb__buysheet .button { border-width: 1px; padding-inline: 1em; white-space: nowrap; }

/* The posters screen: the whole card, at the wall screen's height, scrolling as one under its head. */
.wb__screen--posters { display: flex; flex-direction: column; gap: var(--space-3); height: var(--wb-h, auto); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); }
.wb__posters-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-3); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); background: var(--zone-paper); border-bottom: 1px solid var(--color-hairline); }
.wb__posters-head .wb__chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.wb__posters-head .wb__chips::-webkit-scrollbar { display: none; }
.wb__search { display: grid; }
.wb__finder { min-width: 0; }
.wb__finder .filters { margin-bottom: 0; }
.wb__finder .search-sec__inner { position: relative; }
.wb__results-box { display: grid; align-content: start; gap: var(--space-3); }
/* One row of posters; "Show more" adds rows (wall-builder-archive.js reads --wb-cols). */
.wb__results { --wb-cols: 8; display: grid; grid-template-columns: repeat(var(--wb-cols), minmax(0, 1fr)); gap: var(--space-3); }
.wb__results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--motion); }
.wb-tile {
	position: relative; display: grid; align-content: start; gap: var(--space-2);
	padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--color-text);
}
.wb-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--zone-surface); transition: opacity var(--motion); }
.wb-tile__name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--text-sm); line-height: var(--lh-heading); }
.wb-tile:hover img { opacity: 0.85; }
.wb-tile.is-hung img { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.wb-tile.is-hung::after {
	content: "On the wall"; position: absolute; top: var(--space-2); left: var(--space-2);
	padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
	background: var(--color-ink); color: var(--color-accent-contrast); font-size: 0.68rem; font-weight: var(--fw-bold);
}
.wb__more { justify-self: center; }
.wb__end { color: var(--color-text-muted); text-align: center; } /* where Show more stops short of the store: the archive goes D0_BUILDER_PAGES deep */
.wb__posters-foot { margin: auto 0 0; padding-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

/* The app: the card inside a full-screen dialog, a bar across the top, the
   stage, tools across the foot; a tool's sheet rises over the stage. */
.wb__appbar, .wb__tools { display: none; }
.wb-app {
	position: fixed; inset: 0; width: 100dvw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--zone-paper);
}
.wb-app::backdrop { background: rgb(21 20 14 / 0.5); }
.wb.is-app { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; border-radius: 0; }
.wb.is-app .wb__appbar { display: flex; align-items: center; gap: var(--space-3); grid-row: 1; padding: var(--space-2) var(--space-3); padding-top: calc(var(--space-2) + env(safe-area-inset-top)); border-bottom: 1px solid var(--color-hairline); background: var(--zone-paper); }
.wb__appbar-title { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; line-height: var(--lh-heading); }
.wb__appbar-title > span:first-child { overflow: hidden; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-bold); white-space: nowrap; text-overflow: ellipsis; }
.wb__appbar-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wb.is-app .wb__tools { display: grid; grid-template-columns: repeat(4, 1fr); grid-row: 3; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--color-hairline); background: var(--zone-paper); }
.wb__tool { display: grid; justify-items: center; gap: 0.2rem; padding: var(--space-2) 0; border: 0; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-xs); transition: color var(--motion); }
.wb__tool .icon { width: 1.35rem; height: 1.35rem; }
.wb__tool[aria-pressed="true"], .wb__tool:hover { color: var(--color-text); }
.wb.is-app .wb__screen--wall { grid-row: 2; position: relative; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.wb.is-app .wb__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.wb.is-app .wb__main { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.wb.is-app .wb__view { display: grid; place-items: center; min-height: 0; container-type: size; background: var(--zone-surface); touch-action: none; overflow: hidden; }
.wb.is-app .wb__stage { width: min(100cqw, calc(100cqh * var(--ratio, 1.5))); transform-origin: 0 0; will-change: transform; } /* the whole room in sight, whatever the screen's shape; fingers may grow and pull it (wall-builder-zoom.js) */
.wb.is-app .wb__buy { display: none; } /* the app buys from its Buy tool */
.wb.is-app :is(.wb__sets, .wb__caption, .wb__photo-note, .wb__resize, .wb-bar__go, .wb-tool--search, .wb-tool--search + .wb-bar__sep) { display: none; }
.wb.is-app .wb-bar { top: var(--space-3); right: auto; bottom: auto; left: 50%; translate: -50% 0; } /* the tools at the stage's top: the hint and the quick size hold its foot */
.wb.is-app .wb__app-hint { display: block; position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
.wb.is-app .wb__panel, .wb.is-app .wb__rooms, .wb.is-app .wb__buysheet {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
	max-height: 64%; overflow-y: auto; overscroll-behavior: contain;
	border-left: 0; border-top: 1px solid var(--color-border); background: var(--zone-paper); box-shadow: 0 -12px 32px -16px rgb(0 0 0 / 0.25);
	visibility: hidden; transform: translateY(100%);
	transition: transform var(--motion-travel), visibility 0s var(--motion-travel);
}
.wb.is-app .wb__panel { top: 0; max-height: none; box-shadow: none; } /* Prints is a page of the app, not a sheet (owner) */
.wb.is-app[data-tool="prints"] .wb__panel, .wb.is-app[data-tool="rooms"] .wb__rooms, .wb.is-app[data-tool="buy"] .wb__buysheet { visibility: visible; transform: translateY(0); transition: transform var(--motion-travel); }
.wb.is-app .wb__rooms[hidden] { display: grid; } /* the box is always drawn in the app (edit mode); the sheet shows it */
.wb__buysheet { display: none; gap: var(--space-3); padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.wb.is-app .wb__buysheet { display: grid; }
.wb__buysheet .wb__step { margin: 0; }
.wb__buysheet-line { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wb__buysheet-line strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); }
.wb__buysheet .button { width: 100%; }
.wb__buysheet .wb__hint { text-align: center; }
.wb.is-app .wb__screen--posters { grid-row: 2; height: auto; min-height: 0; }
/* A Wall Sets card's Edit on a wide screen (wall-builder-app.js): the card
   itself in a dialog over the page, its own wide layout under the app's
   bar (close, the wall's name, its count and total), sized so the room and
   its rows fit the screen's height. The panel's own button buys here. */
.wb-app--modal {
	inset: 0; margin: auto;
	width: min(1320px, calc(100vw - 2 * var(--space-6)), calc((100dvh - 2 * var(--space-6) - 12rem) * 2));
	height: fit-content; max-height: calc(100dvh - 2 * var(--space-6));
	overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-card-lg);
}
.wb.is-modal { display: flex; flex-direction: column; border: 0; border-radius: 0; }
.wb.is-modal .wb__appbar { order: -1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-hairline); background: var(--zone-paper); }
.wb.is-modal .wb__appbar [data-wb-tool="buy"] { display: none; }

@media (min-width: 901px) {
	/* The photo and the rooms set the row's height, never the panel: the
	   LIST alone scrolls inside it, the head above and every frame and the
	   buying below standing still (owner, 2026-10-22: "scroll yalnızca
	   listenin içinde çıksın"). */
	.wb__panel { contain: size; overflow: hidden; }
	.wb__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
	.wb__buy { padding-top: var(--space-2); }
}
@media (min-width: 901px) and (max-width: 1200px) {
	.wb__layout { grid-template-columns: minmax(0, 2fr) minmax(22rem, 1fr); }
	.wb__results { --wb-cols: 6; }
}
@media (max-width: 900px) {
	.wb__layout { grid-template-columns: minmax(0, 1fr); }
	.wb__panel { border-left: 0; border-top: 1px solid var(--color-border); }
	.wb__results { --wb-cols: 5; }
}
@media (max-width: 640px) {
	.wb__strip { --thumb-w: 5.25rem; padding: var(--space-3); }
	.wb__panel { padding-block: var(--space-3); }
	.wb__panel-head, .wb__buy, .wb__list-empty { padding-inline: var(--space-3); }
	.wb-row__pick { padding-left: var(--space-3); }
	.wb-row__line { padding-right: var(--space-2); }
	.wb-row__edit { padding-inline: var(--space-3); }
	.wb__screen--posters { padding-inline: var(--space-3); }
	.wb__posters-head { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
	.wb__posters-head .wb__done { display: none; } /* the arrow goes back; the chips need the width */
	.wb__results { --wb-cols: 3; gap: var(--space-2); }
	.wb-tile__name { font-size: var(--text-xs); }
	.wb__hook { font-size: var(--text-lg); }
	.wb__caption { padding: var(--space-5) var(--space-3) var(--space-3); }
	/* Make it yours sits under the set's words over the photo's foot, a
	   smaller paper pill (owner, 2026-10-23: "mobilde ayrı beyaz bir alanda
	   duruyor ... başlık altı açıklamanın altına koyalım"); the words make
	   room for it under them. (Editing is the app here, where the tools sit
	   at the stage's top.) */
	.wb:not(.is-app) .wb-bar { right: var(--space-3); left: var(--space-3); bottom: var(--space-3); max-width: none; } /* the photo's width (owner, the same day: "tam genişlik yapalım") */
	.wb[data-mode="idea"] .wb__caption { padding-bottom: calc(var(--space-3) + var(--control-h-sm) + var(--space-2)); }
	.wb__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line, as a Wall Sets card's line under 460px: with the pill under it, two lines lifted the set's name into the frames (a 320px phone) */
	.wb__make { flex: 1 1 auto; height: var(--control-h-sm); gap: var(--space-2); padding: 0 4px 0 1em; font-size: var(--text-sm); box-shadow: none; }
	.wb__make > .label { flex: 1 1 auto; text-align: center; }
	.wb { --breathe: 1.03; } /* across the photo a deeper breath would reach its edges */
	.wb__make .wb__disc { height: calc(var(--control-h-sm) - 8px); min-width: calc(var(--control-h-sm) - 8px); padding-inline: 0; }
	.wb__make .wb__disc .icon { width: 0.95rem; height: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wb-frame, .wb__scene, .wb.is-app .wb__panel, .wb.is-app .wb__rooms, .wb.is-app .wb__buysheet, .wb-row__toggle .icon { transition: none; }
}

/* ==== WORLD GROUNDS: on a world's pages (body.world-{slug}, inc/page-band.php) the page band, the grid's controls and the phone's filter sheet read the world's colour as their ink, so every rule that mixes from --zone-ink follows; the header over the band takes it from the band (page-band.js, --band-ground). ==== */
.world-movies-tv :is(.page-head, .pgrid__band, .pgrid__bar, .pgrid__sheet) { --zone-ink: var(--world-movies-tv); }
.world-home-decor :is(.page-head, .pgrid__band, .pgrid__bar, .pgrid__sheet) { --zone-ink: var(--world-home-decor); }
/* The header over a world's band starts in the world's colour, the value page-band.js then reads from the band: the bar's colour fades (2026-11-12), so a black first paint would fade into the world's tone on every load. */
.world-movies-tv .site-header { --band-ground: var(--world-movies-tv); }
.world-home-decor .site-header { --band-ground: var(--world-home-decor); }

/* ==== PRODUCT GRID ([d0_product_grid], owner 2026-11-10): a world's shop on
   its landing. Its controls continue the page band above on the band's own
   ground (--zone-ink: a world on another ground carries its colour down):
   two rows in one voice: the search across the page, then the world's
   filter panel with the order at its end, which holds under the header while the grid scrolls. Under them the posters: four to
   a row on every desktop, two on a phone (owner: no more columns on wider
   screens), a wall two cards wide and a row tall between them. ==== */
.pgrid { --pgrid-search: 5rem; scroll-margin-top: var(--header-h); } /* the search row's height: the pinned row moves the filters down by it */
.pgrid__band, .pgrid__bar { --zone-bg: var(--zone-ink); --pgrid-rule: color-mix(in srgb, var(--zone-paper) 22%, transparent); --pgrid-row: 3.75rem; background: var(--zone-ink); color: var(--zone-paper); }
.pgrid__band { margin-top: -1px; padding-top: 1px; } /* under the band's last pixel: at a fractional height the page's paper showed between the two as a hairline */
/* One voice for both rows: the home's band tabs (GRID TABS, .gtabs--band): caps words, a slanted stroke between them, the chosen one underlined. */
.pgrid__word { position: relative; height: auto; padding: var(--space-3) 0; border: 0; border-radius: 0; background: none; color: var(--zone-paper); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.pgrid__word { display: inline-flex; align-items: center; gap: 0.45em; }
.pgrid__word[hidden], .pgrid__fold[hidden] { display: none; }
.pgrid__word:not([hidden]) ~ .pgrid__word { padding-left: calc(2 * var(--band-tab-gap) + 1px); } /* `~`, not `+`: a hidden group leaves no stroke behind */
.pgrid__word:not([hidden]) ~ .pgrid__word::before { content: ""; position: absolute; top: 50%; left: var(--band-tab-gap); width: 1px; height: 1.45em; background: var(--pgrid-rule); translate: 0 -50%; rotate: 18deg; }
.pgrid__word:hover, .pgrid__word[aria-expanded="true"] { text-decoration: underline 2px color-mix(in srgb, var(--zone-paper) 30%, transparent); text-underline-offset: 0.3em; }
.pgrid__word[aria-expanded="true"] { text-decoration-color: currentColor; }
.pgrid__word[aria-expanded="true"] .filters__pill-icon { transform: rotate(-90deg); }
.pgrid__word:focus-visible { outline: 2px solid var(--zone-paper); outline-offset: 2px; }
.pgrid__bar .filters__badge { border-radius: var(--radius-button); background: var(--zone-paper); color: var(--zone-ink); }
/* The search: a bar across the page in the band's own ground, no box (owner, 2026-11-10: the first bar, "o alanın bir parçası gibi"): large words, its world's lines typing in it. */
.pgrid__search { display: flex; align-items: center; gap: var(--space-3); cursor: text; }
.pgrid__search-icon { flex: none; display: grid; font-size: var(--text-xl); color: var(--zone-paper); }
.pgrid__input { flex: 1; min-width: 0; height: var(--pgrid-search); padding: 0; border: 0; border-radius: 0; background: none; color: var(--zone-paper); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); }
.pgrid__input::placeholder { color: color-mix(in srgb, var(--zone-paper) 62%, transparent); }
.pgrid__input:focus { outline: none; }
.pgrid__input::-webkit-search-cancel-button { display: none; } /* the browser's own cross: ours stands in (.pgrid__search-clear) */
.pgrid__search-clear { flex: none; display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0; border-radius: var(--radius-button); background: color-mix(in srgb, var(--zone-paper) 12%, var(--zone-ink)); color: var(--zone-paper); font-size: var(--text-md); cursor: pointer; transition: background var(--motion); }
.pgrid__search-clear[hidden] { display: none; }
.pgrid__search-clear:hover { background: color-mix(in srgb, var(--zone-paper) 22%, var(--zone-ink)); }
.pgrid__search-clear:focus-visible { outline: 2px solid var(--zone-paper); outline-offset: 2px; }
.pgrid__band { transition: background-color var(--motion); }
.pgrid__band:focus-within { background: color-mix(in srgb, var(--zone-paper) 6%, var(--zone-ink)); }
/* The filters ("A · Popover", product-grid-filters.js): the groups as words under a rule; the row holds under the header. A word opens only its own rows in a popover under itself, round-cornered as the store's cards are. */
.pgrid__bar { position: sticky; top: var(--pgrid-stick, var(--header-h)); z-index: 20; margin-bottom: var(--space-4); border-top: 1px solid var(--pgrid-rule); transition: top var(--motion-travel); } /* the rule on top stays when the row holds under the menu: a line between the two (owner, 2026-11-12) */
/* While the grid scrolls, the header's strip steps away (owner, 2026-11-10: "o gizlensin, mini dursun ve alttaki filtre yapışıp gelsin"): the header slides up by the strip's height, its place in the page unchanged, and the filter row holds under the menu's row alone (product-grid.js sets .is-strip-away once the search row is under the menu's own row, so the filter row is already held and rides up with the header). */
html.is-strip-away { --pgrid-stick: calc(var(--header-row-h) + 1px); }
/* The header's search button pins the search row (product-grid.js): it holds between the menu and the filter row, which moves down by its height.
   It comes out from under the menu as the filter row makes room, and goes back under it as the row closes up, on one clock
   (owner, 2026-11-12: "kapattığımızda silinirken tak diye yok oluyor. Arası boş gözüküyor"): .is-search-leaving holds it
   pinned while it slides away. */
.pgrid:is(.is-search-pinned, .is-search-leaving) .pgrid__band { position: sticky; top: var(--pgrid-stick, var(--header-h)); z-index: 21; transition: top var(--motion-travel), background-color var(--motion); } /* rides with the header when its strip steps away */
.pgrid.is-search-pinned .pgrid__band { animation: pgrid-search-in var(--motion-travel); } /* no fill after it: a held row's `top` transition takes over when the strip steps away */
.pgrid.is-search-leaving .pgrid__band { animation: pgrid-search-out var(--motion-travel) forwards; }
.pgrid.is-search-pinned .pgrid__bar { top: calc(var(--pgrid-stick, var(--header-h)) + var(--pgrid-search)); }
/* Every move here is `top`, never `translate` (owner, 2026-11-12: "sorun devam ediyor"): a translate runs on the compositor
   and a sticky row's top on the page, so the header, the search row and the filter row drew a frame or two apart and a hairline of
   the page showed between them as they moved. On one mechanism and one clock they are drawn in the same frame. */
@keyframes pgrid-search-in { from { top: calc(var(--pgrid-stick, var(--header-h)) - var(--pgrid-search)); } }
@keyframes pgrid-search-out { to { top: calc(var(--pgrid-stick, var(--header-h)) - var(--pgrid-search)); } }
html.is-strip-away .site-header { top: calc(-1 * var(--header-bar-h)); }
@media (prefers-reduced-motion: reduce) { .pgrid__bar, html:has(.pgrid) .site-header { transition: none; } .pgrid .pgrid__band { animation: none; } }
.pgrid__tools { position: relative; }
/* A compact grid (the header's search palette, product-grid.php compact): nothing holds under the header, no walls, no
   pages; one row of posters under a head that names it and links to all of them (product-grid.js head()). */
.pgrid--compact :is(.pgrid__band, .pgrid__bar) { position: static; }
.pgrid--compact .pgrid__bar { margin-bottom: var(--space-4); }
.pgrid--compact :is(.pgrid__foot, .pgrid__wall) { display: none; }
.pgrid--compact .pgrid__grid { padding-bottom: var(--space-4); }
.pgrid__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.pgrid__title { margin: 0; font-size: var(--text-lg); }
.pgrid__all { flex: none; color: var(--color-text); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); text-decoration: none; transition: color var(--motion); }
.pgrid__all:hover { color: var(--color-text-muted); }
.pgrid__words { display: flex; align-items: center; height: var(--pgrid-row); } /* a whole number of pixels: the words' own line height added a part pixel to the row */
.pgrid__pop { position: absolute; top: calc(100% - 1px); left: clamp(var(--container-pad), var(--pop-x, 0px), calc(100% - 19rem - var(--container-pad))); z-index: 3; width: 19rem; padding: var(--space-3); border: 1px solid var(--pgrid-rule); border-top: 0; border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); background: var(--zone-ink); box-shadow: 0 1.2rem 2.4rem rgb(21 20 14 / 30%); }
.pgrid__find { width: 100%; height: var(--control-h-sm); margin-bottom: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--pgrid-rule); border-radius: var(--radius-button); background: color-mix(in srgb, var(--zone-paper) 8%, var(--zone-ink)); color: var(--zone-paper); font-size: var(--text-sm); }
.pgrid__find::placeholder { color: color-mix(in srgb, var(--zone-paper) 62%, transparent); }
.pgrid__find:focus { border-color: var(--zone-paper); outline: none; }
.pgrid__opts { max-height: 19rem; padding-right: var(--space-2); overflow-y: auto; } /* our own scrollbar (data-scrollbar, scrollbar.js) on the box's edge, clear of the counts */
.pgrid__opts .fopt { border-radius: var(--radius-card-half); }
.pgrid__opts .fopt__box { border-radius: 4px; }
.pgrid__opts.fgroup__list:has(.fchip, .fswatch) { flex-flow: row wrap; gap: var(--space-2); }
.pgrid__opts .fchip { border-radius: var(--radius-button); }
.pgrid__clear { padding: 0; border: 0; background: none; color: inherit; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
/* Show All: a whole block at the box's foot, its words in the middle, a tone off the box's ground (owner, 2026-11-10). */
.pgrid__more { display: block; width: 100%; height: var(--control-h); margin-top: var(--space-3); padding: 0; border: 0; border-radius: var(--radius-button); background: color-mix(in srgb, var(--zone-paper) 10%, var(--zone-ink)); color: inherit; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: center; cursor: pointer; transition: background var(--motion); }
.pgrid__more:hover { background: color-mix(in srgb, var(--zone-paper) 18%, var(--zone-ink)); }
.pgrid__more:focus-visible { outline: 2px solid var(--zone-paper); outline-offset: 2px; }
.pgrid__none { margin: 0; font-size: var(--text-sm); color: color-mix(in srgb, var(--zone-paper) 62%, transparent); }
/* What a search says over its posters: the results page's own lines (.search-suggest, .search-notice). */
.pgrid__notice:empty { display: none; }
.pgrid__notice .search-suggest { margin-bottom: var(--space-3); font-size: var(--text-base); }
/* The chosen filters, over the grid: each a pill that lets go on a press. */
.pgrid__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.pgrid__chips[hidden] { display: none; }
.pgrid__chip { display: inline-flex; align-items: center; gap: 0.5em; height: var(--control-h-sm); padding-inline: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-button); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--motion), border-color var(--motion); }
.pgrid__chip:hover { border-color: var(--color-ink); background: var(--color-surface); }
.pgrid__chips .pgrid__clear { margin-left: var(--space-2); color: var(--color-ink); }
/* A phone's sheet: the groups folded, one open at a time; it rises from the foot, its head's corners round. */
.pgrid__sheet { --zone-bg: var(--zone-ink); position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 85dvh; margin: 0; padding: 0; border: 0; border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0; background: var(--zone-ink); color: var(--zone-paper); }
.pgrid__sheet[open] { display: flex; flex-direction: column; }
.pgrid__sheet::backdrop { background: rgb(21 20 14 / 55%); }
.pgrid__sheet-head, .pgrid__sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.pgrid__sheet-head { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pgrid__sheet-close { display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; border: 0; border-radius: var(--radius-button); background: color-mix(in srgb, var(--zone-paper) 12%, var(--zone-ink)); color: inherit; cursor: pointer; }
.pgrid__sheet-foot { border-top: 1px solid color-mix(in srgb, var(--zone-paper) 22%, transparent); }
.pgrid__sheet-foot .button { flex: 1; justify-content: center; background: var(--zone-paper); color: var(--zone-ink); }
.pgrid__folds { flex: 1; min-height: 0; overflow-y: auto; }
.pgrid__fold { border-top: 1px solid color-mix(in srgb, var(--zone-paper) 22%, transparent); }
.pgrid__fold summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); text-transform: uppercase; list-style: none; cursor: pointer; }
.pgrid__fold summary::-webkit-details-marker { display: none; }
.pgrid__fold summary::after { content: ""; width: 0.45em; height: 0.45em; margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; transition: rotate var(--motion); }
.pgrid__fold[open] summary::after { rotate: -135deg; }
.pgrid__fold .filters__badge { border-radius: var(--radius-button); background: var(--zone-paper); color: var(--zone-ink); }
.pgrid__fold-body { position: relative; padding: 0 var(--space-4) var(--space-4); }
.pgrid__fold-body .pgrid__opts { max-height: 22rem; }
.pgrid__filter { display: none; }
.pgrid__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); transition: opacity var(--motion); }
.pgrid.is-loading .pgrid__grid { opacity: 0.45; }
.pgrid__wall { position: relative; isolation: isolate; grid-column: span 2; min-height: 18rem; overflow: hidden; border-radius: var(--radius-card-lg); background: var(--zone-ink); }
.pgrid__wall-photo { position: absolute; inset: 0; display: block; }
.pgrid__wall::after { content: ""; position: absolute; inset: auto 0 0; z-index: 21; height: 45%; background: linear-gradient(transparent, color-mix(in srgb, var(--zone-ink) 82%, transparent)); pointer-events: none; }
.pgrid__wall-words { position: absolute; inset: auto var(--space-4) var(--space-4); z-index: 22; display: grid; gap: var(--space-1); color: var(--zone-paper); font-size: var(--text-sm); pointer-events: none; }
.pgrid__wall-words b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.pgrid__wall-actions { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 22; display: flex; gap: var(--space-2); }
.pgrid__empty { margin: var(--space-5) 0; color: var(--color-text-muted); }
.pgrid__foot { display: flex; justify-content: center; margin-top: var(--space-5); }
.pgrid__foot > [hidden] { display: none; } /* .button's display would defeat the hidden attr: Show More stayed on the last page and under no results */
@media (min-width: 641px) and (max-width: 1100px) { .pgrid__words { overflow-x: auto; scrollbar-width: none; } } /* the row stays one line: the groups slide */
@media (max-width: 640px) {
	.pgrid__band, .pgrid__bar { --pgrid-row: 3.25rem; }
	.pgrid { --pgrid-search: 3.75rem; }
	.pgrid__input { font-size: var(--text-md); }
	.pgrid__search-icon { font-size: var(--text-lg); }
	/* No filter row on a phone (owner, 2026-11-10: "filters butonu bir blokta tek başına kalıyor ... arama kutusunun içine koyalım, yapışan şey arama kutusu olsun"): the search row holds under the header and carries the Filters button, which opens the sheet. */
	.pgrid__bar { display: none; }
	.pgrid__band { position: sticky; top: var(--pgrid-stick, var(--header-h)); z-index: 20; margin-bottom: var(--space-4); transition: top var(--motion-travel), background-color var(--motion); }
	.pgrid__filter { display: inline-flex; align-items: center; gap: 0.45em; flex: none; height: var(--control-h-sm); margin-left: var(--space-3); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-button); background: var(--zone-paper); color: var(--zone-ink); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); text-transform: uppercase; cursor: pointer; }
	.pgrid__filter .filters__badge { background: var(--zone-ink); color: var(--zone-paper); }
	.pgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
	.pgrid__wall { min-height: 0; aspect-ratio: 4 / 3; } /* alone on its row: its window's own shape */
	.pgrid__wall-words { inset: auto var(--space-3) var(--space-3); }
	.pgrid__wall-words b { font-size: var(--text-lg); }
}
@media (prefers-reduced-motion: reduce) { .pgrid__grid, .pgrid__input { transition: none; } }