/* =========================================================
   TABLOYA — YouCan theme stylesheet
   Colors/fonts are injected as CSS custom properties from
   config/settings_schema.json via the {% style %} block in
   layouts/theme.liquid — this file only contains structure.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input, select, textarea{ font-family:inherit; }

h1,h2,h3,h4{
  font-family: var(--font-heading);
  font-weight:500;
  margin:0;
  color: var(--color-ink);
  letter-spacing:-.01em;
}

.wrap{
  max-width: var(--page-width);
  margin-inline:auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-accent-dark);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 28px; border-radius: var(--radius);
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--color-ink); color:#fff; }
.btn-primary:hover{ background: var(--color-accent-dark); }
.btn-outline{ background:transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover{ background: var(--color-ink); color:#fff; }
.btn-accent{ background: var(--color-accent); color:#fff; }
.btn-accent:hover{ background: var(--color-accent-dark); }
.btn-block{ width:100%; }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--color-ink);
  color: var(--color-bg);
  font-size:11.5px; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center; gap:32px;
  padding:9px 20px; flex-wrap:wrap; text-align:center;
}
.topbar a{ text-decoration:underline; font-weight:600; }
.topbar-seg{ display:flex; align-items:center; gap:8px; opacity:.92; }

/* ---------- Header ---------- */
.site-header{ background: var(--color-bg); border-bottom:1px solid var(--color-line); position:sticky; top:0; z-index:60; }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px; }
.logo-link img{ display:block; width: var(--logo-width); height:auto; }
.header-actions{ display:flex; align-items:center; gap:20px; }
.icon-btn{ position:relative; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn .count{
  position:absolute; top:-8px; right:-9px; background: var(--color-accent); color:#fff;
  font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.search-toggle-panel{
  border-top:1px solid var(--color-line); padding:14px 0; display:none;
}
.search-toggle-panel.open{ display:block; }
.search-toggle-panel .wrap{ display:flex; gap:10px; }
.search-toggle-panel input{
  flex:1; border:1px solid var(--color-line); border-radius: var(--radius); padding:11px 16px; font-size:14px; background: var(--color-paper);
}

/* ---------- Main nav + mega menu ---------- */
.main-nav{ display:flex; gap:30px; }
.nav-item{ position:relative; }
.nav-item > a{
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 0; color: var(--color-ink);
}
.nav-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background: var(--color-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-item:hover > a::after{ transform:scaleX(1); }
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--color-line); box-shadow:0 24px 48px -20px rgba(30,25,15,.18);
  padding:28px; display:none; gap:40px; min-width:420px; border-radius: var(--radius);
  z-index:70;
}
.nav-item:hover .mega-menu{ display:flex; }
.mega-col h5{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--color-accent-dark);
  margin-bottom:12px; font-weight:700;
}
.mega-col a{ display:block; font-size:13.5px; padding-block:6px; color: var(--color-ink); }
.mega-col a:hover{ color: var(--color-accent-dark); }
.mega-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.mega-swatch{ width:22px; height:22px; border-radius:50%; border:1px solid var(--color-line); }

.mobile-nav-toggle{ display:none; }
.mobile-nav{ display:none; }

/* ---------- Hero banner ---------- */
.hero{
  position:relative; display:flex; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media.mobile-only{ display:none; }
.hero-overlay{ position:absolute; inset:0; background:rgba(20,18,14,var(--overlay,0.25)); }
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; max-width:560px; padding: clamp(32px, 6vw, 90px); gap:16px; }
.hero-content.align-center{ margin-inline:auto; text-align:center; align-items:center; }
.hero-content.align-right{ margin-left:auto; text-align:right; align-items:flex-end; }
.hero-title{ font-size:clamp(30px, 4.4vw, 54px); line-height:1.08; }
.hero-subtitle{ font-size:15.5px; max-width:44ch; line-height:1.6; }

/* ---------- Sections ---------- */
.section{ padding-block: clamp(48px, 7vw, 100px); }
.section-alt{ background: var(--color-paper); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(24px,3vw,36px); margin-top:8px; }

/* ---------- Product grid & card ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.p-card{ display:flex; flex-direction:column; }
.p-media{
  position:relative; aspect-ratio:4/5; border-radius: var(--radius); overflow:hidden; background: var(--color-paper);
  border:1px solid var(--color-line);
}
.p-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease; }
.p-media img.hover-img{ opacity:0; }
.p-card:hover .p-media img.hover-img{ opacity:1; }
.p-card:hover .p-media img.main-img{ opacity:0; }
.p-badge{ position:absolute; top:12px; left:12px; z-index:2; background: var(--color-sale); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:5px 10px; border-radius:20px; }
.p-fav{ position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.p-fav svg{ width:15px; height:15px; stroke: var(--color-ink); fill:none; }
.p-fav.active svg{ fill: var(--color-accent); stroke: var(--color-accent); }
.p-quick{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  background: var(--color-ink); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:11px; border-radius: var(--radius); text-align:center;
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease;
}
.p-card:hover .p-quick{ opacity:1; transform:translateY(0); }
.p-info{ padding-top:14px; }
.p-cat{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--color-accent-dark); }
.p-name{ font-family: var(--font-heading); font-size:16.5px; margin-top:4px; }
.p-price-row{ display:flex; align-items:center; gap:9px; margin-top:7px; }
.p-price{ font-weight:600; font-size:14.5px; }
.p-price-compare{ font-size:12.5px; color:#948d80; text-decoration:line-through; }
.p-unavailable{ font-size:11.5px; color:#a3552f; margin-top:6px; }

/* ---------- Collection list (themes) ---------- */
.coll-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:20px; }
.coll-card{ position:relative; border-radius: var(--radius); overflow:hidden; color:#fff; }
.coll-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.coll-card .content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; background:linear-gradient(0deg, rgba(20,18,14,.6), rgba(20,18,14,0) 55%); }
.coll-card.big{ grid-column:span 2; grid-row:span 2; }

/* ---------- Editorial / interior inspiration ---------- */
.editorial{ display:grid; grid-template-columns:1.1fr .9fr; }
.editorial-media{ position:relative; min-height:520px; }
.editorial-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editorial-text{ background: var(--color-ink); color: var(--color-bg); display:flex; flex-direction:column; justify-content:center; gap:18px; padding: clamp(32px,5vw,80px); }
.editorial-text .eyebrow{ color: var(--color-accent); }
.editorial-text h2{ color:#fff; font-size:clamp(24px,3vw,36px); }
.editorial-text p{ font-size:14.5px; color:#cfc9bc; line-height:1.75; max-width:44ch; }

/* ---------- Artists ---------- */
.artist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.artist-card{ text-align:center; }
.artist-photo{ aspect-ratio:1/1; border-radius:50%; overflow:hidden; margin-inline:auto; width:70%; border:1px solid var(--color-line); }
.artist-photo img{ width:100%; height:100%; object-fit:cover; }
.artist-card h4{ margin-top:14px; font-size:15px; }
.artist-card span{ display:block; font-size:12px; color: var(--color-accent-dark); margin-top:2px; }

/* ---------- Testimonials ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card{ background:#fff; border:1px solid var(--color-line); border-radius: var(--radius); padding:26px; }
.stars{ color: var(--color-accent-dark); letter-spacing:2px; font-size:13px; }
.review-card p{ font-size:14px; line-height:1.7; margin:14px 0 18px; }
.review-who b{ font-size:13px; display:block; }
.review-who span{ font-size:11.5px; color:#948d80; }

/* ---------- Newsletter ---------- */
.newsletter{ text-align:center; }
.newsletter h2{ font-size:clamp(24px,3vw,34px); }
.newsletter p{ max-width:52ch; margin:12px auto 26px; font-size:14.5px; color:#5c5648; }
.newsletter-form{ display:flex; gap:10px; max-width:440px; margin-inline:auto; }
.newsletter-form input{ flex:1; padding:14px 18px; border:1px solid var(--color-line); border-radius: var(--radius); font-size:14px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-ink); color:#d7d2c4; padding-top:64px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:26px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.92; }
.footer-brand p{ font-size:13px; line-height:1.7; color:#b3ad9d; max-width:32ch; }
.footer-col h5{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; color:#e7e2d4; }
.footer-col a{ display:block; font-size:13px; color:#b3ad9d; padding-block:5px; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; margin-top:14px; }
.footer-social a{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:14px; height:14px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:22px; font-size:11.5px; color:#8f8977; flex-wrap:wrap; gap:12px; }
.payments{ display:flex; gap:8px; }
.payments span{ border:1px solid rgba(255,255,255,.2); border-radius:4px; font-size:10px; padding:4px 8px; }

/* ---------- Category / collection page ---------- */
.coll-hero{ position:relative; padding:52px 0; background: var(--color-paper); }
.breadcrumb{ font-size:11.5px; color:#948d80; margin-bottom:12px; }
.coll-hero h1{ font-size:clamp(28px,4vw,42px); }
.coll-hero p{ margin-top:10px; max-width:60ch; font-size:14px; color:#5c5648; }
.coll-body{ display:grid; grid-template-columns:240px 1fr; gap:44px; padding-block:44px; }
.filter-group{ border-top:1px solid var(--color-line); padding-block:16px; }
.filter-group summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.filter-group summary::-webkit-details-marker{ display:none; }
.filter-group summary::after{ content:"+"; color: var(--color-accent-dark); }
.filter-group[open] summary::after{ content:"–"; }
.filter-opts{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.chk{ display:flex; align-items:center; gap:9px; font-size:13px; }
.chk input{ accent-color: var(--color-accent); }
.color-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.color-swatch{ width:22px; height:22px; border-radius:50%; border:1px solid var(--color-line); cursor:pointer; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.result-count{ font-size:12.5px; color:#948d80; }
.sort-select{ border:1px solid var(--color-line); border-radius: var(--radius); padding:9px 14px; font-size:12.5px; background:#fff; }
.filters-drawer-toggle{ display:none; }

/* ---------- Product page ---------- */
.product-page{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; padding-block:44px; align-items:flex-start; }
.gallery-main{ position:relative; aspect-ratio:4/5; border-radius: var(--radius); overflow:hidden; border:1px solid var(--color-line); margin-bottom:12px; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.gallery-thumbs button{ aspect-ratio:1/1; border-radius: var(--radius); overflow:hidden; border:1px solid var(--color-line); padding:0; }
.gallery-thumbs button.active{ border-color: var(--color-accent); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pd-sticky{ position:sticky; top:110px; }
.pd-cat{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--color-accent-dark); }
.pd-title{ font-size:clamp(26px,3vw,34px); margin-top:8px; }
.pd-price-row{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.pd-price{ font-size:21px; font-weight:600; }
.pd-price-compare{ font-size:15px; color:#948d80; text-decoration:line-through; }
.pd-desc{ font-size:14px; color:#5c5648; line-height:1.75; margin-top:20px; max-width:52ch; }
.pd-option{ margin-top:26px; }
.pd-option-label{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.opt-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{ border:1px solid var(--color-line); border-radius: var(--radius); padding:10px 15px; font-size:12.5px; background:#fff; }
.pill.active{ background: var(--color-ink); color:#fff; border-color: var(--color-ink); }
.pill[disabled]{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.qty-box{ display:flex; align-items:center; border:1px solid var(--color-line); border-radius: var(--radius); }
.qty-box button{ width:36px; height:42px; font-size:15px; }
.qty-box span{ width:32px; text-align:center; font-size:13.5px; }
.pd-ctas{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.pd-reassure{ margin-top:30px; border-top:1px solid var(--color-line); padding-top:20px; display:flex; flex-direction:column; gap:12px; }
.pd-reassure li{ display:flex; gap:10px; font-size:12.5px; color:#5c5648; }
.pd-accordions details{ border-top:1px solid var(--color-line); padding-block:14px; }
.pd-accordions summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.pd-accordions summary::-webkit-details-marker{ display:none; }
.pd-accordions summary::after{ content:"+"; color: var(--color-accent-dark); }
.pd-accordions details[open] summary::after{ content:"–"; }
.pd-accordions .acc-body{ font-size:13px; color:#5c5648; margin-top:10px; line-height:1.7; }

/* ---------- Cart ---------- */
.cart-page{ padding-block:48px; display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:flex-start; }
.cart-row{ display:grid; grid-template-columns:90px 1fr auto; gap:16px; padding-block:20px; border-bottom:1px solid var(--color-line); }
.cart-row img{ width:90px; height:108px; object-fit:cover; border-radius: var(--radius); }
.cart-summary{ background: var(--color-paper); border:1px solid var(--color-line); border-radius: var(--radius); padding:26px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; padding-block:8px; }
.summary-total{ font-weight:700; font-size:16px; border-top:1px solid var(--color-line); margin-top:8px; padding-top:14px; }
.cart-empty{ text-align:center; padding-block:80px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px);
  background: var(--color-ink); color:#fff; padding:13px 20px; border-radius: var(--radius);
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:150;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   MOBILE — this is not a scaled-down desktop, distinct rules
   ========================================================= */
@media (max-width: 1080px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .coll-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; }
  .coll-card.big{ grid-column:span 2; grid-row:span 1; }
  .artist-grid{ grid-template-columns:repeat(3,1fr); }
  .review-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px 20px; }
}

@media (max-width: 860px){
  .main-nav{ display:none; }
  .mobile-nav-toggle{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
  .header-row{ padding-block:14px; }
  .logo-link img{ width: calc(var(--logo-width) * 0.8); }

  .mobile-nav{
    display:block; position:fixed; inset:0 0 0 auto; width:min(360px,88vw); background:#fff; z-index:100;
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .mobile-nav.open{ transform:translateX(0); }
  .mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--color-line); }
  .mobile-nav-list a{ display:block; padding:15px 20px; font-size:14px; border-bottom:1px solid var(--color-line); }
  .mobile-nav-overlay{ position:fixed; inset:0; background:rgba(20,18,14,.4); z-index:99; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .mobile-nav-overlay.open{ opacity:1; pointer-events:auto; }

  .hero{ min-height:70vh; }
  .hero-media.desktop-only{ display:none; }
  .hero-media.mobile-only{ display:block; }
  .hero-content{ max-width:100%; padding:28px; }

  .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .coll-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .coll-card.big{ grid-column:span 2; grid-row:span 1; }
  .editorial{ grid-template-columns:1fr; }
  .editorial-media{ min-height:280px; }
  .artist-grid{ grid-template-columns:repeat(2,1fr); }
  .review-grid{ grid-template-columns:1fr; }

  .coll-body{ grid-template-columns:1fr; gap:20px; }
  .filters-col{ display:none; }
  .filters-drawer-toggle{ display:inline-flex; }
  .filters-col.drawer-open{
    display:block; position:fixed; inset:0 auto 0 0; width:min(320px,86vw); background:#fff;
    z-index:100; padding:20px; overflow-y:auto;
  }

  .product-page{ grid-template-columns:1fr; gap:30px; }
  .pd-sticky{ position:static; }

  .cart-page{ grid-template-columns:1fr; gap:30px; }

  .footer-top{ grid-template-columns:1fr; }
}