/* Zano — desain "Atelier": butik editorial, ivory & hitam, serif klasik. */

:root {
    --zf-ink: #141414;
    --zf-ink-2: #3b3936;
    --zf-muted: #7a756e;
    --zf-line: #e9e3da;
    --zf-line-strong: #d8d0c4;
    --zf-bg: #ffffff;
    --zf-surface: #ffffff;
    --zf-soft: #f8f5f0;
    --zf-sand: #efe8de;
    --zf-accent: #b3261e;
    --zf-accent-soft: #fbe9e7;
    --zf-gold: #a8823f;

    --zf-font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --zf-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --zf-display-weight: 600;
    --zf-display-transform: none;
    --zf-display-tracking: -.01em;

    --zf-radius-sm: 3px;
    --zf-radius: 6px;
    --zf-radius-lg: 12px;
    --zf-radius-btn: 6px;
    --zf-radius-media: 6px;
}

/* ---------- Karakter editorial ---------- */

/* Eyebrow dengan garis rambut ala majalah */
[data-theme="atelier"] .zf-eyebrow::before,
[data-theme="atelier"] .zf-body .store-subtitle::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: currentColor;
    opacity: .7;
}
[data-theme="atelier"] .zf-section-head:not(.zf-section-head--row) .zf-eyebrow::after,
[data-theme="atelier"] .zf-body .store-header .store-subtitle::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    margin-left: 10px;
    vertical-align: middle;
    background: currentColor;
    opacity: .7;
}
[data-theme="atelier"] .zf-eyebrow { color: var(--zf-gold); }
[data-theme="atelier"] .zf-eyebrow--light { color: rgba(255, 255, 255, .9) !important; }

/* Hero: bingkai tipis di dalam foto & judul serif miring */
[data-theme="atelier"] .zf-hero__slide > .zf-hero__content::before {
    content: "";
    position: absolute;
    left: var(--zf-gutter);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}
[data-theme="atelier"] .zf-hero__content > * { padding-left: 22px; }
[data-theme="atelier"] .zf-hero__title { font-style: italic; font-weight: 500 !important; }
[data-theme="atelier"] .zf-hero::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .38);
    pointer-events: none;
}
[data-theme="atelier"] .zf-hero__badge { background: var(--zf-ink); border: 1px solid var(--zf-gold); }
[data-theme="atelier"] .zf-hero__badge strong { font-style: italic; color: #f1e3c6; }
@media (min-width: 992px) { [data-theme="atelier"] .zf-hero::after { inset: 22px; } }

/* Judul section: serif dengan aksen emas di bawah */
[data-theme="atelier"] .zf-title,
[data-theme="atelier"] .zf-body .store-title-main { font-weight: 500; }
[data-theme="atelier"] .zf-link-arrow { border-bottom-color: var(--zf-gold); }

/* Tile editorial berbingkai */
[data-theme="atelier"] .zf-editorial { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -12px; }
[data-theme="atelier"] .zf-editorial__inner strong { font-style: italic; font-weight: 500; }

/* Kartu produk: judul serif kecil, harga emas tua */
[data-theme="atelier"] .zf-card__price { color: var(--zf-ink); letter-spacing: .02em; }
[data-theme="atelier"] .zf-body .product__item:hover .zf-card__title a { color: var(--zf-accent); }

/* Kartu toko: tanpa bayangan, garis rambut & judul serif */
[data-theme="atelier"] .zf-body .store-card { box-shadow: none; border-color: var(--zf-line); }
[data-theme="atelier"] .zf-body .store-card:hover { box-shadow: 0 18px 40px rgba(20, 20, 20, .08) !important; }
[data-theme="atelier"] .zf-body .store-title { font-style: italic; font-weight: 500; }
[data-theme="atelier"] .zf-body .store-title::after {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    margin: 10px auto 0;
    background: var(--zf-gold);
}
[data-theme="atelier"] .zf-body .store-badge { background: rgba(255, 255, 255, .94); color: var(--zf-ink); letter-spacing: .06em; font-size: 11px; text-transform: uppercase; }

/* Section lembut: garis rambut atas-bawah */
[data-theme="atelier"] .zf-section--soft { border-top: 1px solid var(--zf-line); border-bottom: 1px solid var(--zf-line); }

[data-theme="atelier"] .zf-footer h4,
[data-theme="atelier"] .zf-footer h5 { font-family: var(--zf-font-display); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Cormorant bertinggi-x kecil: judul sedikit lebih besar */
[data-theme="atelier"] .zf-title,
[data-theme="atelier"] .zf-body .store-title-main { font-size: clamp(32px, 5vw, 52px); letter-spacing: 0; line-height: 1.05; }
[data-theme="atelier"] .zf-hero__title { font-size: clamp(42px, 8vw, 88px) !important; line-height: .98 !important; }


/* ---------- Kategori: galeri bingkai lengkung (arch) ---------- */
[data-theme="atelier"] .zf-cats { grid-template-columns: repeat(var(--zf-cat-cols, 5), minmax(0, 1fr)); gap: 26px; }
[data-theme="atelier"] .zf-cats .zf-cat,
[data-theme="atelier"] .zf-cats .zf-cat--feature,
[data-theme="atelier"] .zf-cats--5 .zf-cat:nth-child(n+4) {
    grid-column: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: none;
    border-radius: 0;
    text-align: center;
    color: var(--zf-ink) !important;
}
[data-theme="atelier"] .zf-cat::after { display: none; }
[data-theme="atelier"] .zf-cat__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 3 / 4.2;
    border-radius: 999px 999px 6px 6px;
    box-shadow: 0 0 0 1px var(--zf-line-strong), 0 18px 40px rgba(20, 20, 20, .08);
}
[data-theme="atelier"] .zf-cat__media::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: inherit;
    pointer-events: none;
    transition: inset .5s var(--zf-ease);
}
[data-theme="atelier"] .zf-cat:hover .zf-cat__media::after { inset: 18px; }
[data-theme="atelier"] .zf-cat__no {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--zf-font-display);
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
[data-theme="atelier"] .zf-cat__label { position: static; align-items: center; gap: 4px; margin-top: 16px; }
[data-theme="atelier"] .zf-cat__label strong { font-style: italic; font-weight: 600; font-size: 28px; color: var(--zf-ink); }
[data-theme="atelier"] .zf-cat__label small { display: block; color: var(--zf-muted); opacity: 1; }
[data-theme="atelier"] .zf-cat__label em { color: var(--zf-gold); opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (max-width: 767px) {
    [data-theme="atelier"] .zf-cats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none; margin-right: calc(-1 * var(--zf-gutter)); padding: 4px var(--zf-gutter) 8px 2px; }
    [data-theme="atelier"] .zf-cats::-webkit-scrollbar { display: none; }
    [data-theme="atelier"] .zf-cats .zf-cat { flex: 0 0 56%; scroll-snap-align: start; }
    [data-theme="atelier"] .zf-cat__label strong { font-size: 24px; }
}