/* ==========================================================================
   K.A. Fashion Milano — shared stylesheet (index.php, products.php,
   privacy.php, error.php). One file, one place to adjust colors, spacing,
   or component styles for the whole site.

   Structure:
     1. Palette (default "mono" + 10 alternates, footer theme switcher)
     2. Base / reset / typography
     3. Header / nav / theme toggle
     4. Homepage-only sections (hero, catalog, shipping, timeline, contact)
     5. Category/product page (cat-hero, chip row, product grid, dialog)
     6. Legal page (privacy.php)
     7. 404 page (error.php)
     8. Footer (shared) + responsive + motion
   ========================================================================== */

@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */
:root {
  /* "default" — the original K.A. Fashion Milano brand pink, refined for
     the new editorial layout, with a matching dark theme */
  color-scheme: light;
  --ink: #241f1a;
  --paper: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f1ebe1;
  --muted: #86796d;
  --border: #e7dfd2;
  --accent: #ca2b63;
  --accent-2: #a11c4b;
  --accent-soft: #f7e1e9;
  --heading: #ab8a56;
  --on-accent: #fff8f7;
  --shadow: 0 1px 2px rgba(36,31,26,.06), 0 20px 44px rgba(36,31,26,.10);
  --radius: 22px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --serif-alt: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', Arial, sans-serif;
}
html[data-theme="dark"] {
  /* "default" — dark */
  color-scheme: dark;
  --ink: #f4ede3;
  --paper: #131110;
  --surface: #1b1815;
  --surface-2: #211d19;
  --muted: #a49889;
  --border: #342c25;
  --accent: #ff6fa1;
  --accent-2: #ca2b63;
  --accent-soft: rgba(255,111,161,.14);
  --heading: #c9a668;
  --on-accent: #1b1815;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

/* alternate palettes — picked from the footer theme switcher; "default"
   (above) stays the default whenever no data-palette attribute is set */
html[data-palette="mono"] {
  /* monochrome + one accent — near-black/white/gray, terracotta reserved
     for links and CTAs only; headings stay plain ink on purpose */
  --ink: #1a1a1a; --paper: #f9f9f7; --surface: #ffffff; --surface-2: #ececea;
  --muted: #6e6e6b; --border: rgba(26, 26, 26, 0.12); --accent: #b3552f; --accent-2: #c96a42;
  --accent-soft: rgba(179, 85, 47, .10); --heading: #1a1a1a; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(26,26,26,.06), 0 20px 44px rgba(26,26,26,.10);
}
html[data-palette="mono"][data-theme="dark"] {
  --ink: #f0f0ee; --paper: #121212; --surface: #1a1a1a; --surface-2: #232323;
  --muted: #9a9a96; --border: rgba(240, 240, 238, 0.12); --accent: #e07a4f; --accent-2: #b3552f;
  --accent-soft: rgba(224, 122, 79, .16); --heading: #f0f0ee; --on-accent: #121212;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="airbnb"] {
  --ink: #222222; --paper: #f7f7f7; --surface: #ffffff; --surface-2: #ebebeb;
  --muted: #717171; --border: rgba(34,34,34,.14); --accent: #E00B41; --accent-2: #FF385C;
  --accent-soft: rgba(224,11,65,.10); --heading: #00A699; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(34,34,34,.06), 0 20px 44px rgba(34,34,34,.10);
}
html[data-palette="airbnb"][data-theme="dark"] {
  --ink: #f5f5f5; --paper: #121212; --surface: #181818; --surface-2: #2b2b2b;
  --muted: #9a9a9a; --border: rgba(245,245,245,.14); --accent: #E00B41; --accent-2: #FF385C;
  --accent-soft: rgba(224,11,65,.18); --heading: #00A699; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="gioielli"] {
  --ink: #241f1a; --paper: #f8f5ef; --surface: #ffffff; --surface-2: #efe6d8;
  --muted: #7d7266; --border: rgba(36,31,26,.12); --accent: #8c2f39; --accent-2: #b23a46;
  --accent-soft: rgba(140,47,57,.10); --heading: #a9803f; --on-accent: #fff8f6;
  --shadow: 0 1px 2px rgba(36,31,26,.06), 0 20px 44px rgba(36,31,26,.10);
}
html[data-palette="gioielli"][data-theme="dark"] {
  --ink: #f3ede4; --paper: #16130f; --surface: #201b16; --surface-2: #2a231c;
  --muted: #a89a89; --border: rgba(243,237,228,.12); --accent: #d1555f; --accent-2: #8c2f39;
  --accent-soft: rgba(209,85,95,.16); --heading: #c9a668; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="sepia"] {
  --ink: #2b2b2b; --paper: #f4ecd8; --surface: #faf5e8; --surface-2: #ece0c4;
  --muted: #8b7b6a; --border: rgba(43,43,43,.12); --accent: #c2945a; --accent-2: #c2945a;
  --accent-soft: rgba(194,148,90,.14); --heading: #c2945a; --on-accent: #2b2b2b;
  --shadow: 0 1px 2px rgba(43,43,43,.06), 0 20px 44px rgba(43,43,43,.10);
}
html[data-palette="sepia"][data-theme="dark"] {
  --ink: #e8e4df; --paper: #0c0b0e; --surface: #161318; --surface-2: #201c22;
  --muted: #948f8a; --border: rgba(232,228,223,.12); --accent: #9a7b7c; --accent-2: #9a7b7c;
  --accent-soft: rgba(154,123,124,.16); --heading: #9a7b7c; --on-accent: #0c0b0e;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="emerald"] {
  --ink: #20241f; --paper: #f6f4ee; --surface: #fbfaf5; --surface-2: #ece7d8;
  --muted: #6b6f61; --border: rgba(32,36,31,.12); --accent: #2f5d4f; --accent-2: #3f7562;
  --accent-soft: rgba(47,93,79,.10); --heading: #9c7c3f; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(32,36,31,.06), 0 20px 44px rgba(32,36,31,.10);
}
html[data-palette="emerald"][data-theme="dark"] {
  --ink: #ece8df; --paper: #10130f; --surface: #171b16; --surface-2: #1f251e;
  --muted: #9aa093; --border: rgba(236,232,223,.12); --accent: #6fae94; --accent-2: #3f7562;
  --accent-soft: rgba(111,174,148,.16); --heading: #d1b06a; --on-accent: #10130f;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="sapphire"] {
  --ink: #141c28; --paper: #f4f5f7; --surface: #ffffff; --surface-2: #e6e8ec;
  --muted: #666f7a; --border: rgba(20,30,45,.12); --accent: #1f3a5f; --accent-2: #2c527f;
  --accent-soft: rgba(31,58,95,.10); --heading: #a9863f; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 20px 44px rgba(20,30,45,.10);
}
html[data-palette="sapphire"][data-theme="dark"] {
  --ink: #e7ebf2; --paper: #0a0e16; --surface: #121722; --surface-2: #1a212e;
  --muted: #8b95a5; --border: rgba(231,235,242,.12); --accent: #5b86b3; --accent-2: #2c527f;
  --accent-soft: rgba(91,134,179,.16); --heading: #d1b06a; --on-accent: #0a0e16;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="rosegold"] {
  --ink: #2e2422; --paper: #fbf4f1; --surface: #ffffff; --surface-2: #f2e3dd;
  --muted: #8a7570; --border: rgba(46,36,34,.12); --accent: #b76e79; --accent-2: #c98793;
  --accent-soft: rgba(183,110,121,.10); --heading: #b08d57; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(46,36,34,.06), 0 20px 44px rgba(46,36,34,.10);
}
html[data-palette="rosegold"][data-theme="dark"] {
  --ink: #f2e6e2; --paper: #171012; --surface: #201619; --surface-2: #2b1e21;
  --muted: #a8938d; --border: rgba(242,230,226,.12); --accent: #d98a95; --accent-2: #b76e79;
  --accent-soft: rgba(217,138,149,.16); --heading: #d1b06a; --on-accent: #171012;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="noir"] {
  --ink: #000000; --paper: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0;
  --muted: #555555; --border: rgba(0,0,0,.14); --accent: #000000; --accent-2: #333333;
  --accent-soft: rgba(0,0,0,.06); --heading: #000000; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 44px rgba(0,0,0,.10);
}
html[data-palette="noir"][data-theme="dark"] {
  --ink: #ffffff; --paper: #000000; --surface: #111111; --surface-2: #1c1c1c;
  --muted: #aaaaaa; --border: rgba(255,255,255,.14); --accent: #ffffff; --accent-2: #cccccc;
  --accent-soft: rgba(255,255,255,.10); --heading: #ffffff; --on-accent: #000000;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.6);
}

html[data-palette="terracotta"] {
  --ink: #332e27; --paper: #f6f1e7; --surface: #ffffff; --surface-2: #ece3d2;
  --muted: #79705f; --border: rgba(51,46,39,.12); --accent: #8f5a3c; --accent-2: #a9714f;
  --accent-soft: rgba(143,90,60,.10); --heading: #5f7a5e; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(51,46,39,.06), 0 20px 44px rgba(51,46,39,.10);
}
html[data-palette="terracotta"][data-theme="dark"] {
  --ink: #ece4d8; --paper: #181410; --surface: #221c17; --surface-2: #2b241d;
  --muted: #a89c8a; --border: rgba(236,228,216,.12); --accent: #c98a5f; --accent-2: #8f5a3c;
  --accent-soft: rgba(201,138,95,.16); --heading: #8fae86; --on-accent: #181410;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

html[data-palette="lavender"] {
  --ink: #2a2433; --paper: #f7f5f9; --surface: #ffffff; --surface-2: #ece7f0;
  --muted: #756e82; --border: rgba(42,36,51,.12); --accent: #6b4a7a; --accent-2: #815a91;
  --accent-soft: rgba(107,74,122,.10); --heading: #9c8a3f; --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(42,36,51,.06), 0 20px 44px rgba(42,36,51,.10);
}
html[data-palette="lavender"][data-theme="dark"] {
  --ink: #ece8f2; --paper: #14111a; --surface: #1c1824; --surface-2: #241f2d;
  --muted: #9a93a8; --border: rgba(236,232,242,.12); --accent: #a17fb0; --accent-2: #6b4a7a;
  --accent-soft: rgba(161,127,176,.16); --heading: #c9b06a; --on-accent: #14111a;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   2. Base / reset / typography
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* film-grain texture, purely decorative */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .grain { opacity: .06; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Header / nav / theme toggle (shared by every page)
   -------------------------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  padding: 22px 0;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
header.site.is-solid {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--border);
  padding: 14px 0;
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px;
  flex: none;
}
.brand-word { font-family: var(--serif); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.brand-word b { color: var(--accent); font-weight: 500; }
nav.links { display: flex; align-items: center; gap: 30px; }
nav.links a {
  font-size: 13px; letter-spacing: .04em; color: var(--muted);
  position: relative; padding: 4px 0; transition: color .2s var(--ease);
}
nav.links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right .3s var(--ease);
}
nav.links a:hover { color: var(--ink); }
nav.links a:hover::after { right: 0; }
.theme-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .moon { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: none; }
html[data-theme="dark"] .theme-btn .moon { display: block; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   4. Homepage (index.php)
   -------------------------------------------------------------------------- */
.hero { position: relative; z-index: 2; padding: 92px 0 40px; }
.hero h1.display {
  font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7vw, 84px);
  line-height: 1.02; letter-spacing: -.01em; max-width: 16ch; margin: 0;
  color: var(--heading);
}
.hero h1.display em { font-style: italic; font-weight: 500; color: var(--accent); }
.hero-foot { display: flex; gap: 48px; margin-top: 56px; flex-wrap: wrap; align-items: flex-end; }
blockquote.pull {
  margin: 0; max-width: 70ch; font-family: var(--serif); font-style: italic; font-size: 19px;
  color: var(--muted); line-height: 1.5; border-left: 1px solid var(--border); padding-left: 22px;
}
blockquote.pull cite { display: block; margin-top: 14px; font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

section { position: relative; z-index: 2; padding: 108px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
h2.display {
  font-family: var(--serif-alt); font-weight: 600; font-style: italic; font-size: clamp(30px, 4vw, 44px); margin: 10px 0 0;
  color: var(--heading);
}
.section-note { max-width: 34ch; color: var(--muted); font-size: 14px; }

/* catalog grid — all cards the same size */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-cat {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card-cat:hover { transform: translateY(-6px); }
.card-cat a { display: block; }
.card-art {
  aspect-ratio: 4/3; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--surface-2), var(--accent-soft));
  color: var(--ink); overflow: hidden;
}
.card-art svg { width: 34%; height: 34%; opacity: .85; transition: transform .6s var(--ease); }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card-cat:hover .card-art svg { transform: scale(1.12) rotate(-4deg); }
.card-cat:hover .card-art img { transform: scale(1.06); }
.card-body { padding: 22px 24px 26px; }
.card-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); }
.card-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 6px 0 8px; color: var(--heading); }
.card-desc { font-size: 13px; color: var(--muted); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-cta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.card-cta svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.card-cat:hover .card-cta svg { transform: translateX(4px); }

/* shipping / accordion */
.ship-grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; }
.ship-info { position: sticky; top: 130px; align-self: start; }
.ship-info .icon-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.ship-info .icon-row svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.ship-info p { margin: 0; font-size: 14px; color: var(--muted); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.pill { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }

details.acc-item { border-bottom: 1px solid var(--border); }
details.acc-item summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 400;
}
details.acc-item summary::-webkit-details-marker { display: none; }
.acc-chevron { width: 15px; height: 15px; color: var(--muted); transition: transform .3s var(--ease); flex: none; }
details.acc-item[open] .acc-chevron { transform: rotate(180deg); color: var(--accent); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
details.acc-item[open] .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-body-inner p, .acc-body-inner ul { margin: 0 0 20px; padding: 0 0 0 18px; color: var(--muted); font-size: 14px; }
.acc-body-inner li { margin-bottom: 8px; }

/* timeline */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.tl-item { position: relative; }
.tl-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/9; margin-bottom: 20px; }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.02); transition: transform .6s var(--ease), filter .5s var(--ease); }
.tl-item:hover .tl-photo img { transform: scale(1.06); filter: grayscale(0) contrast(1.04); }
.tl-year-badge {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--surface); color: var(--ink);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px;
  padding: 5px 16px; border-radius: 999px; box-shadow: var(--shadow);
}
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin: 4px 0 14px; }
.tl-item p { font-size: 14px; color: var(--muted); margin: 0; }
.tl-item b { color: var(--ink); font-weight: 600; }

/* contact */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: stretch; }
.contact-list .icon-row { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-list .icon-row svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.contact-list h4 { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--heading); }
.contact-list p, .contact-list a { font-size: 14px; color: var(--muted); margin: 0; }
.contact-list a:hover { color: var(--accent); }
.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); min-height: 340px; }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.25) contrast(1.02); }
html[data-theme="dark"] .map-frame iframe { filter: invert(92%) hue-rotate(180deg) contrast(90%); }

/* --------------------------------------------------------------------------
   5. Category / product listing (products.php)
   -------------------------------------------------------------------------- */
.cat-hero { position: relative; z-index: 2; padding: 56px 0 20px; }
.cat-hero .kicker { margin-bottom: 18px; }
.cat-hero h1.display {
  font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04; margin: 0 0 14px; max-width: 18ch; color: var(--heading);
}
.cat-desc { max-width: 52ch; color: var(--muted); font-size: 15px; }

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 28px 0 64px; position: relative; z-index: 2; }
.chip { font-size: 12px; letter-spacing: .04em; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); background: var(--surface); transition: all .2s var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
html[data-theme="dark"] .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

section.grid-wrap { position: relative; z-index: 2; padding-bottom: 120px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.p-card { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; transition: transform .4s var(--ease); }
.p-card:hover { transform: translateY(-6px); }
.p-art { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--surface-2), var(--accent-soft)); overflow: hidden; }
.p-art svg { width: 30%; height: 30%; opacity: .8; transition: transform .5s var(--ease); }
.p-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.p-card:hover .p-art svg, .p-card:hover .p-art img { transform: scale(1.1); }
.p-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 2; }
.badge { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.badge.alt { background: var(--ink); color: var(--paper); }
.p-body { padding: 20px 22px 24px; }
.p-code { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--heading); }
.p-name { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 6px 0 6px; line-height: 1.25; color: var(--heading); }
.p-desc { font-size: 13px; color: var(--muted); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-price { font-size: 15px; font-weight: 600; }

.p-card.placeholder { cursor: default; border-style: dashed; box-shadow: none; }
.p-card.placeholder:hover { transform: none; }
.p-card.placeholder .p-art { background: var(--surface-2); }
.p-card.placeholder .p-art svg { opacity: .3; }
.p-card.placeholder .p-name { color: var(--muted); font-style: italic; }

/* quick-view dialog */
dialog#quickView { border: none; border-radius: var(--radius); padding: 0; width: min(760px, 92vw); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog#quickView::backdrop { background: rgba(20,16,13,.66); backdrop-filter: blur(3px); }
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.qv-art { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--surface-2), var(--accent-soft)); overflow: hidden; }
.qv-art img { width: 100%; height: 100%; object-fit: cover; }
.qv-art svg { width: 34%; height: 34%; opacity: .85; }
.qv-body { padding: 34px; position: relative; }
.qv-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qv-close svg { width: 14px; height: 14px; }
.qv-code { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); }
.qv-name { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 10px 0 12px; color: var(--heading); }
.qv-desc { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.qv-price { font-size: 22px; font-weight: 600; margin-bottom: 22px; }
.qv-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); padding: 12px 20px; border-radius: 10px; font-size: 13px; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   6. Legal page (privacy.php)
   -------------------------------------------------------------------------- */
.legal { padding: 92px 0 120px; position: relative; z-index: 2; }
.legal h1.display {
  font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 6vw, 62px);
  line-height: 1.05; letter-spacing: -.01em; max-width: 18ch; margin: 0 0 44px; color: var(--heading);
}
.legal-body { max-width: 760px; }
.legal-body h2 { font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--heading); margin: 52px 0 16px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin: 30px 0 10px; }
.legal-body p { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.legal-body strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. 404 page (error.php)
   -------------------------------------------------------------------------- */
.not-found {
  position: relative; z-index: 2; min-height: calc(100vh - 300px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 80px 0;
}
.not-found .kicker { justify-content: center; }
.not-found .kicker::before { display: none; }
.not-found-code {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(96px, 20vw, 190px); line-height: 1; color: var(--heading);
  margin: 0 0 8px;
}
.not-found h1.display {
  font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 38px);
  color: var(--ink); margin: 0 0 18px;
}
.not-found p {
  max-width: 44ch; margin: 0 auto 36px; color: var(--muted); font-size: 15px;
}
.btn-home {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--on-accent);
  padding: 13px 26px; border-radius: 10px; font-size: 13px; letter-spacing: .04em;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.btn-home:hover { transform: translateY(-2px); }
.btn-home svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   8. Footer (shared) + responsive + motion
   -------------------------------------------------------------------------- */
footer.site { position: relative; z-index: 2; border-top: 1px solid var(--border); padding: 48px 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-left { display: flex; flex-direction: column; gap: 4px; }
.footer-row p, .made-with { margin: 0; font-size: 12px; color: var(--muted); }
.made-with span { color: var(--accent); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--ease);
}
.social-row a svg { width: 15px; height: 15px; }
.social-row a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); }

.footer-right { display: flex; align-items: center; gap: 14px; }
.theme-picker {
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 12px; color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 30px 7px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
  cursor: pointer; transition: border-color .2s var(--ease);
}
.theme-picker:hover, .theme-picker:focus-visible { border-color: var(--accent); outline: none; }

@media (max-width: 900px) {
  nav.links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: 6px 0;
  }
  nav.links a { padding: 14px 24px; }
  nav.links a::after { display: none; }
  header.site.nav-open nav.links { display: flex; }
  .menu-btn { display: inline-flex; }
  .bento { grid-template-columns: 1fr; }
  .ship-grid, .contact-grid { grid-template-columns: 1fr; }
  .ship-info { position: static; }
  .timeline { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .qv-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}