/* ==========================================================================
   Example website: "Clay & Co." (fictional) — clean online shop for handmade goods
   ========================================================================== */
:root{
  --sh-bg:#fafaf7; --sh-surface:#fff; --sh-ink:#1f2421; --sh-muted:#6b726c;
  --sh-brand:#4f6b5c; --sh-brand-2:#c9805b; --sh-line:#e7e7df;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.sh-lock{ overflow:hidden; }
body{ margin:0; background:var(--sh-bg); color:var(--sh-ink); font:400 1rem/1.7 'Prompt', system-ui, sans-serif; }
h1, h2, h3{ margin:0; line-height:1.15; }
h1, h2{ font-family:'DM Serif Display','Prompt', serif; font-weight:400; }
a{ color:inherit; }
svg{ display:block; width:100%; height:100%; }

.sh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.4rem; border-radius:12px; border:0;
  background:var(--sh-ink); color:#fff; font:500 .95rem 'Prompt', sans-serif; text-decoration:none; cursor:pointer;
}
.sh-btn:hover{ background:#000; }
.sh-btn--block{ width:100%; }
.sh-btn--line{ width:100%; background:#06c755; }
.sh-btn--line:hover{ background:#05a948; }
.sh-kicker{ margin:0 0 .7rem; font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sh-brand); }

/* nav */
.sh-nav{ position:sticky; top:48px; z-index:50; display:flex; align-items:center; gap:1.5rem; max-width:1180px; margin:0 auto; padding:.9rem 20px; background:rgba(250,250,247,.92); backdrop-filter:blur(10px); }
.sh-logo{ display:inline-flex; align-items:center; min-height:44px; font:400 1.5rem 'DM Serif Display', serif; text-decoration:none; }
.sh-logo span{ color:var(--sh-brand-2); }
.sh-nav__links{ display:flex; gap:1.4rem; margin-left:auto; }
.sh-nav__links a{ text-decoration:none; color:var(--sh-muted); }
.sh-nav__links a:hover{ color:var(--sh-ink); }
.sh-cart-btn{ position:relative; width:46px; height:46px; border-radius:12px; border:1px solid var(--sh-line); background:var(--sh-surface); font-size:1.05rem; cursor:pointer; }
.sh-cart-btn__count{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--sh-brand-2); color:#fff; font-size:.72rem; line-height:20px; }
.sh-cart-btn__count.is-empty{ display:none; }
@media (max-width:760px){ .sh-nav__links{ display:none; } .sh-cart-btn{ margin-left:auto; } .sh-nav{ top:48px; } }

/* hero */
.sh-hero{ display:grid; gap:2.5rem; align-items:center; max-width:1180px; margin:0 auto; padding:clamp(2rem, 6vw, 5rem) 20px clamp(2rem, 5vw, 3.5rem); }
@media (min-width:900px){ .sh-hero{ grid-template-columns:1fr 1.1fr; } }
.sh-hero h1{ font-size:clamp(2.6rem, 7vw, 4.8rem); }
.sh-hero h1 em{ color:var(--sh-brand); }
.sh-lead{ margin:1.2rem 0 1.8rem; max-width:30rem; font-size:1.05rem; color:var(--sh-muted); }
.sh-hero__art{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr; gap:.9rem; aspect-ratio:1.2 / 1; }
.sh-hero__art .sh-art{ border-radius:20px; overflow:hidden; }
.sh-hero__art .sh-art:first-child{ grid-row:1 / 3; }

.sh-perks{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2rem; max-width:1180px; margin:0 auto; padding:1rem 20px; list-style:none; border-top:1px solid var(--sh-line); border-bottom:1px solid var(--sh-line); font-size:.92rem; color:var(--sh-muted); }
.sh-perks i{ color:var(--sh-brand); margin-right:.4rem; }
.sh-perks strong{ color:var(--sh-ink); font-weight:600; }

/* products */
.sh-section{ max-width:1180px; margin:0 auto; padding:clamp(3rem, 7vw, 5rem) 20px 0; }
.sh-section h2{ font-size:clamp(1.9rem, 4.5vw, 2.8rem); }
.sh-section__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.sh-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.sh-chips button{ min-height:40px; padding:0 1rem; border-radius:999px; border:1px solid var(--sh-line); background:var(--sh-surface); color:var(--sh-muted); font:500 .88rem 'Prompt', sans-serif; cursor:pointer; }
.sh-chips button.is-active{ background:var(--sh-ink); border-color:var(--sh-ink); color:#fff; }
.sh-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; }
@media (min-width:760px){ .sh-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.3rem; } }
.sh-card{ border-radius:18px; overflow:hidden; background:var(--sh-surface); border:1px solid var(--sh-line); transition:box-shadow .3s ease, transform .3s ease; }
.sh-card:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(0,0,0,.35); }
.sh-card .sh-art{ position:relative; aspect-ratio:1; }
.sh-badge{ position:absolute; left:10px; top:10px; padding:.15rem .6rem; border-radius:999px; background:var(--sh-ink); color:#fff; font-size:.75rem; }
.sh-card__body{ padding:.9rem 1rem 1rem; }
.sh-card__cat{ margin:0; font-size:.78rem; color:var(--sh-muted); }
.sh-card h3{ margin-top:.15rem; font-size:1rem; font-weight:500; line-height:1.4; }
.sh-card__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.6rem; }
.sh-price{ font:400 1.35rem 'DM Serif Display', serif; }
.sh-add{ display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:0 .85rem; border-radius:10px; border:1px solid var(--sh-ink); background:transparent; font:500 .82rem 'Prompt', sans-serif; cursor:pointer; }
.sh-add:hover{ background:var(--sh-ink); color:#fff; }
@media (max-width:420px){ .sh-add{ width:100%; justify-content:center; } }
.sh-note{ margin:1.2rem 0 0; font-size:.8rem; color:var(--sh-muted); text-align:center; }

/* steps + shipping */
.sh-steps{ display:grid; gap:1rem; margin:1.6rem 0 0; padding:0; list-style:none; }
@media (min-width:760px){ .sh-steps{ grid-template-columns:repeat(3, 1fr); } }
.sh-steps li{ padding:1.4rem; border-radius:18px; background:var(--sh-surface); border:1px solid var(--sh-line); }
.sh-steps span{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--sh-brand); color:#fff; font-weight:600; }
.sh-steps h3{ margin-top:.8rem; font-size:1.05rem; font-weight:600; }
.sh-steps p{ margin:.3rem 0 0; font-size:.9rem; color:var(--sh-muted); }
.sh-shipping{ display:grid; gap:2rem; padding-bottom:clamp(3rem, 7vw, 5rem); }
@media (min-width:760px){ .sh-shipping{ grid-template-columns:1fr 1fr; } }
.sh-shipping p{ color:var(--sh-muted); }

.sh-footer{ padding:2.4rem 20px 3rem; text-align:center; border-top:1px solid var(--sh-line); }
.sh-footer p{ margin:.6rem 0 0; font-size:.82rem; color:var(--sh-muted); }

/* cart drawer */
.sh-overlay{ position:fixed; inset:0; z-index:1050; background:rgba(15,20,18,.45); }
.sh-cart{
  position:fixed; top:0; right:0; bottom:0; z-index:1060;
  display:flex; flex-direction:column; width:min(420px, 100vw);
  background:var(--sh-surface); box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);
  transform:translateX(105%); visibility:hidden; transition:transform .35s ease, visibility 0s linear .35s;
}
.sh-cart.open{ transform:none; visibility:visible; transition:transform .35s ease; }
.sh-cart__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem; border-bottom:1px solid var(--sh-line); }
.sh-cart__head h2{ font-size:1.5rem; }
.sh-cart__head button{ width:42px; height:42px; border-radius:10px; border:1px solid var(--sh-line); background:transparent; cursor:pointer; }
.sh-cart__items{ flex:1; overflow-y:auto; padding:.6rem 1.2rem; }
.sh-line{ display:grid; grid-template-columns:64px 1fr auto; gap:.8rem; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--sh-line); }
.sh-line .sh-art{ width:64px; height:64px; border-radius:12px; overflow:hidden; }
.sh-line__info strong{ display:block; font-weight:500; font-size:.92rem; line-height:1.35; }
.sh-line__info > span{ display:block; font-size:.85rem; color:var(--sh-muted); }
.sh-qty{ display:inline-flex; align-items:center; gap:.6rem; margin-top:.3rem; }
.sh-qty button{ width:34px; height:34px; border-radius:8px; border:1px solid var(--sh-line); background:transparent; font-size:1rem; cursor:pointer; }
.sh-line__remove{ width:40px; height:40px; border:0; background:transparent; color:var(--sh-muted); cursor:pointer; }
.sh-empty{ display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:3rem 0; color:var(--sh-muted); }
.sh-empty i{ font-size:2rem; opacity:.5; }
.sh-cart__foot{ padding:1rem 1.2rem 1.4rem; border-top:1px solid var(--sh-line); }
.sh-cart__foot:empty{ display:none; }
.sh-free{ margin:0 0 .6rem; padding:.55rem .8rem; border-radius:10px; background:#f3f1ea; font-size:.86rem; }
.sh-free.is-ok{ background:#e8f2ea; color:var(--sh-brand); }
.sh-sum{ margin:0 0 1rem; }
.sh-sum div{ display:flex; justify-content:space-between; padding:.25rem 0; font-size:.92rem; }
.sh-sum dt{ color:var(--sh-muted); }
.sh-sum dd{ margin:0; }
.sh-sum .is-total{ padding-top:.5rem; margin-top:.3rem; border-top:1px dashed var(--sh-line); font-weight:600; font-size:1.05rem; }
.sh-sum .is-total dt{ color:var(--sh-ink); }

/* checkout dialog */
.sh-dialog{ width:min(440px, calc(100vw - 24px)); padding:1.5rem; border:0; border-radius:20px; box-shadow:0 40px 100px -30px rgba(0,0,0,.5); }
.sh-dialog::backdrop{ background:rgba(15,20,18,.5); }
.sh-dialog h2{ font-size:1.7rem; padding-right:2.5rem; }
.sh-dialog__close{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:10px; border:1px solid var(--sh-line); background:#fff; cursor:pointer; }
.sh-dialog__msg{ margin:1rem 0; padding:1rem; border-radius:12px; background:#f6f6f1; white-space:pre-wrap; font:400 .86rem/1.7 'Prompt', sans-serif; }
.sh-dialog__note{ display:flex; gap:.5rem; margin-bottom:1rem; font-size:.82rem; line-height:1.6; color:var(--sh-muted); }
.sh-dialog__note i{ margin-top:.3rem; color:var(--sh-brand); }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .sh-cart, .sh-card{ transition:none; } }