/* ═══════════════════════════════════════════════════════════════ Product card layout variants (preview for client) Toggle via classic = current kraft scrapbook card (default, unchanged) ═══════════════════════════════════════════════════════════════ */ .gallery__card-layouts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-4); padding: 10px 12px; border: 1px dashed rgba(30, 27, 24, 0.28); border-radius: var(--kraft-radius-card, 10px); background: rgba(255, 248, 236, 0.55); } .gallery__card-layouts-label { font-family: var(--kraft-font-note, inherit); font-size: 12px; font-weight: 700; color: var(--kraft-brown, #6b4f3a); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; } .gallery__card-layout-btn { appearance: none; border: 1px solid var(--kraft-border, rgba(30, 27, 24, 0.25)); background: var(--kraft-offwhite, #fff8ec); color: var(--kraft-ink, #1e1b18); font-family: var(--kraft-font-note, inherit); font-size: 12px; font-weight: 700; line-height: 1.2; padding: 8px 12px; min-height: 44px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .gallery__card-layout-btn:hover { transform: translateY(-1px); } .gallery__card-layout-btn.is-active { background: var(--kraft-ink, #1e1b18); color: var(--kraft-offwhite, #fff8ec); border-color: var(--kraft-ink, #1e1b18); } /* Meta wrapper: transparent by default so classic/square/overlay keep stacking/grid */ .product-card__meta { display: contents; } /* Shared price split (works for all layouts) */ .product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; } .product-card__amount { display: inline-block; } .product-card__currency { display: inline-block; font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; } /* ───────────────────────────────────────────────────────────── A) COMPACT — same scrapbook stack, less vertical air ───────────────────────────────────────────────────────────── */ :root[data-theme="kraft"][data-card-layout="compact"] .product-card { padding: 10px 10px 10px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card::after { inset: 5px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__image-wrap { margin: 4px 4px 8px; aspect-ratio: 1; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__image { border-width: 3px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__image-wrap::before { top: -10px; width: 52px; height: 18px; margin-left: -26px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__image-wrap::after { width: 16px; height: 16px; bottom: -5px; right: -3px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__info { padding: 0 2px 0; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__series { font-size: 10px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__name { font-size: 13px; margin-bottom: 4px; -webkit-line-clamp: 1; line-clamp: 1; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__price { margin-bottom: 0; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; } :root[data-theme="kraft"][data-card-layout="compact"] .product-card__stock { flex-shrink: 0; font-size: 9px; padding: 2px 8px; } /* ───────────────────────────────────────────────────────────── B) SQUARE — whole card ~square; photo fills, tight footer ───────────────────────────────────────────────────────────── */ :root[data-theme="kraft"][data-card-layout="square"] .product-card { display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 8px; min-height: 0; max-height: none; overflow: hidden; /* keep true square; washi stays inside */ } :root[data-theme="kraft"][data-card-layout="square"] .product-card::after { inset: 4px; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__image-wrap { flex: 1 1 0; aspect-ratio: unset; min-height: 0; margin: 6px 2px 4px; /* top room for washi inside the clip */ overflow: hidden; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__image { border-width: 3px; width: 100%; height: 100%; object-fit: cover; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__image-wrap::before { top: -9px; width: 48px; height: 16px; margin-left: -24px; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__image-wrap::after { display: none; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__info { flex: 0 0 auto; padding: 0 2px 2px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "series series" "name name" "price stock"; column-gap: 6px; row-gap: 2px; align-items: center; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__series { grid-area: series; font-size: 9px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__name { grid-area: name; font-size: 12px; margin: 0; -webkit-line-clamp: 1; line-clamp: 1; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__price { grid-area: price; margin: 0; font-size: 12px; flex-direction: row; align-items: baseline; gap: 4px; } :root[data-theme="kraft"][data-card-layout="square"] .product-card__stock { grid-area: stock; justify-self: end; font-size: 9px; padding: 2px 7px; } /* ───────────────────────────────────────────────────────────── C) OVERLAY — square polaroid; text sits on a paper strip ───────────────────────────────────────────────────────────── */ :root[data-theme="kraft"][data-card-layout="overlay"] .product-card { display: grid; grid-template: 1fr / 1fr; aspect-ratio: 1 / 1; padding: 8px; min-height: 0; overflow: hidden; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card::after { inset: 4px; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__image-wrap { grid-area: 1 / 1; aspect-ratio: unset; margin: 4px 0 0; min-height: 0; height: 100%; border-radius: var(--kraft-radius-photo, 6px); overflow: hidden; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__image { border-width: 0; box-shadow: none; border-radius: 4px; width: 100%; height: 100%; object-fit: cover; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__image-wrap::before { top: -8px; width: 56px; height: 18px; margin-left: -28px; z-index: 4; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__image-wrap::after { display: none; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__info { grid-area: 1 / 1; align-self: end; z-index: 2; margin: 0 6px 6px; padding: 8px 10px 9px; border-radius: 8px; background: rgba(255, 248, 236, 0.94); box-shadow: 0 2px 8px rgba(30, 27, 24, 0.12); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name stock" "price price"; column-gap: 8px; row-gap: 2px; align-items: center; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__series { display: none; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__name { grid-area: name; font-size: 13px; margin: 0; -webkit-line-clamp: 1; line-clamp: 1; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__price { grid-area: price; margin: 0; font-size: 13px; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__stock { grid-area: stock; justify-self: end; font-size: 9px; padding: 2px 8px; } :root[data-theme="kraft"][data-card-layout="overlay"] .product-card__preorder-badge { z-index: 3; } /* Mobile: keep 2-col grid; square/overlay already short */ @media (max-width: 639px) { .gallery__card-layouts { padding: 8px 10px; } .gallery__card-layout-btn { padding: 8px 10px; font-size: 11px; } }