:root {            --bg-body: #f7f5f2;            --bg-panel: #f3f1ec;            --text-main: #1e1b18;            --text-muted: #6f685f;            --line-soft: #e0ddd7;            --accent: #b23b3b;            --accent-soft: #c89b3c;            --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.04);            --radius-md: 8px;            --radius-lg: 12px;            --spacing-2: 8px;            --spacing-3: 12px;            --spacing-4: 16px;            --spacing-5: 20px;            --spacing-6: 24px;            --spacing-7: 32px;            --spacing-8: 40px;        }
        * {            box-sizing: border-box;        }
        html, body {            margin: 0;            padding: 0;        }
        body {            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;            background-color: var(--bg-body);            color: var(--text-main);            line-height: 1.6;        }
        a {            color: var(--accent);            text-decoration: none;        }
        a:hover,        a:focus {            text-decoration: underline;        }
        .page {            min-height: 100vh;            display: flex;            flex-direction: column;        }
        main {            flex: 1;        }
        .container {            width: 100%;            max-width: 960px;            margin: 0 auto;            padding: 0 var(--spacing-4);        }
        @media (min-width: 768px) {            .container {                padding: 0 var(--spacing-7);            }        }
        h1, h2 {            margin: 0 0 var(--spacing-3);            font-weight: 600;            color: var(--text-main);        }
        h1 {            font-size: 1.8rem;            line-height: 1.25;        }
        h2 {            font-size: 1.25rem;        }
        p {            margin: 0 0 var(--spacing-3);        }
        /* Header */        header {            border-bottom: 1px solid var(--line-soft);            background-color: rgba(247, 245, 242, 0.96);        }
        .top-bar {            display: flex;            align-items: center;            justify-content: space-between;            padding: var(--spacing-3) 0;            font-size: 0.9rem;        }
        .wordmark {            font-size: 1.05rem;            letter-spacing: 0.08em;            text-transform: uppercase;        }
        .back-link {            color: var(--text-muted);            font-size: 0.85rem;        }
        .back-link:hover,        .back-link:focus {            color: var(--accent);            text-decoration: none;        }
        /* Buttons */        .btn-row {            display: flex;            flex-wrap: wrap;            gap: var(--spacing-3);            margin-top: var(--spacing-4);        }
        .btn {            display: inline-flex;            align-items: center;            justify-content: center;            padding: 0.6rem 1.4rem;            border-radius: var(--radius-md);            border: 1px solid transparent;            font-size: 0.95rem;            font-weight: 500;            cursor: pointer;            text-decoration: none;            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;        }
        .btn-primary {            background-color: var(--accent);            color: #fdfbf8;            box-shadow: var(--shadow-soft);        }
        .btn-primary:hover,        .btn-primary:focus {            background-color: #962f2f;            color: #ffffff;            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);            text-decoration: none;        }
        .btn-outline {            background-color: transparent;            color: var(--accent);            border-color: var(--accent);        }
        .btn-outline:hover,        .btn-outline:focus {            background-color: rgba(178, 59, 59, 0.06);            text-decoration: none;        }
        .btn:focus-visible {            outline: 2px solid #111;            outline-offset: 2px;        }
        /* Product block */        .product {            padding: var(--spacing-7) 0 var(--spacing-6);        }
        .product-panel {            background-color: var(--bg-panel);            border-radius: var(--radius-lg);            padding: var(--spacing-6);            box-shadow: var(--shadow-soft);        }

        .product-panel--gallery {            padding: var(--spacing-6) var(--spacing-5) var(--spacing-6);        }
        .gallery-header {            margin-bottom: var(--spacing-4);        }
        .gallery-header h1 {            font-size: 1.6rem;        }
        .gallery-header .product-subtitle {            max-width: 32rem;        }
        .about-misumai {            margin-top: var(--spacing-5);            padding-top: var(--spacing-4);            border-top: 1px dashed var(--line-soft);            font-size: 0.85rem;            color: var(--text-muted);        }        .product-layout {            display: grid;            grid-template-columns: 1fr;            gap: var(--spacing-6);            align-items: center;        }
        @media (min-width: 840px) {            .product-layout {                grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);            }        }
        /* Gallery variant of layout */        .product-layout--gallery {            align-items: flex-start;        }
        .product-cover {            max-width: 320px;            margin: 0 auto;        }
        .product-cover-inner {            border-radius: var(--radius-lg);            padding: var(--spacing-5);            background: radial-gradient(circle at 12% 6%, #fdf8f5, #e4d7cf);            box-shadow: var(--shadow-soft);            border: 1px solid rgba(200, 155, 60, 0.28);            position: relative;            overflow: hidden;        }
        .product-cover-border {            position: absolute;            inset: 12% 14%;            border-radius: 6px;            border: 1px solid rgba(255, 255, 255, 0.8);            pointer-events: none;        }
        .product-overline {            font-size: 0.8rem;            letter-spacing: 0.16em;            text-transform: uppercase;            color: var(--text-muted);            margin-bottom: var(--spacing-2);        }
        .product-cover-title {            font-size: 1.15rem;            margin-bottom: var(--spacing-2);        }
        .product-cover-tagline {            font-size: 0.85rem;            color: var(--text-muted);        }
        .product-cover-stamp {            margin-top: var(--spacing-5);            border-radius: 999px;            padding: 0.3rem 0.9rem;            border: 1px solid rgba(178, 59, 59, 0.5);            font-size: 0.7rem;            letter-spacing: 0.16em;            text-transform: uppercase;            color: var(--accent);            background-color: rgba(247, 245, 242, 0.9);            display: inline-block;        }
        .product-copy h1 {            margin-bottom: var(--spacing-3);        }
        .product-subtitle {            color: var(--text-muted);            font-size: 0.95rem;            margin-bottom: var(--spacing-3);        }
        .tag-row {            display: flex;            flex-wrap: wrap;            gap: var(--spacing-2);            margin-bottom: var(--spacing-3);            font-size: 0.8rem;        }
        .tag {            padding: 0.2rem 0.6rem;            border-radius: 999px;            border: 1px solid rgba(30, 27, 24, 0.08);            color: var(--text-muted);            background-color: #fbfaf7;        }
        .tag--accent {            border-color: rgba(178, 59, 59, 0.4);            color: var(--accent);            background-color: rgba(178, 59, 59, 0.04);        }
        .product-meta {            display: flex;            flex-wrap: wrap;            gap: var(--spacing-4);            font-size: 0.85rem;            color: var(--text-muted);            margin-bottom: var(--spacing-3);        }
        .product-meta span {            white-space: normal;        }
        .product-price {            font-size: 1rem;            font-weight: 600;            margin-top: var(--spacing-2);        }
        .product-reassurance {            margin-top: var(--spacing-3);            font-size: 0.85rem;            color: var(--text-muted);        }
        /* Gallery grid & cards */        .product-gallery-grid {            margin-top: var(--spacing-4);            display: grid;            grid-template-columns: 1fr;            gap: var(--spacing-4);        }
        @media (min-width: 640px) {            .product-gallery-grid {                grid-template-columns: repeat(2, minmax(0, 1fr));            }        }
        .product-card {            background-color: #fbfaf7;            border-radius: var(--radius-md);            border: 1px solid rgba(30, 27, 24, 0.06);            box-shadow: var(--shadow-soft);            overflow: hidden;            transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;        }
        .product-card:hover,        .product-card:focus-within {            transform: translateY(-2px);            border-color: rgba(178, 59, 59, 0.35);            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);        }
        .product-card-link {            display: flex;            flex-direction: row;            gap: var(--spacing-4);            padding: var(--spacing-4);            color: inherit;            text-decoration: none;        }
        @media (max-width: 480px) {            .product-card-link {                flex-direction: column;            }        }
        .product-card-cover {            flex: 0 0 96px;            max-width: 120px;        }
        .product-card-body {            flex: 1;            display: flex;            flex-direction: column;            gap: var(--spacing-2);        }
        .product-card-release {            font-size: 0.75rem;            letter-spacing: 0.16em;            text-transform: uppercase;            color: var(--text-muted);        }
        .product-card-title {            font-size: 1rem;            margin: 0 0 4px;        }
        .product-card-meta {            font-size: 0.8rem;            color: var(--text-muted);            display: flex;            flex-wrap: wrap;            gap: var(--spacing-2);        }
        .product-card-meta span {            white-space: normal;        }
        .product-card-price {            margin-top: auto;            font-size: 0.95rem;            font-weight: 600;            color: var(--accent);        }
        /* Story & details */        .story {            padding: 0 0 var(--spacing-7);        }
        .story-inner {            max-width: 720px;        }
        .quote-block {            margin-top: var(--spacing-4);            padding: var(--spacing-4);            border-radius: var(--radius-md);            border-left: 3px solid rgba(178, 59, 59, 0.6);            background-color: #fbfaf7;            font-size: 0.94rem;            color: var(--text-muted);        }
        .subheading {            font-size: 0.9rem;            font-weight: 500;            margin-top: var(--spacing-4);            margin-bottom: var(--spacing-2);        }
        .list-like {            font-size: 0.9rem;            color: var(--text-muted);        }
        .list-like span {            display: block;        }
        /* Footer */        footer {            border-top: 1px solid var(--line-soft);            background-color: #f0ece6;            padding: var(--spacing-5) 0;            font-size: 0.8rem;        }
        .footer-inner {            display: flex;            flex-direction: column;            gap: var(--spacing-3);            color: var(--text-muted);        }
        @media (min-width: 640px) {            .footer-inner {                flex-direction: row;                align-items: center;                justify-content: space-between;            }        }