:root{
  color-scheme:light;
  --bg:#FAFAF7;
  --ink:#111111;
  --accent:#4B3EF0;
  --grey:#8C8C88;
  --line:rgba(17,17,17,0.13);
  --surface:#ffffff;
  --hover-bg:rgba(17,17,17,0.06);
  --btn-bg:#111111;
  --btn-text:#ffffff;
  --empty-icon:rgba(17,17,17,0.18);
  --danger-bg:#FBEAEA;
  --danger-border:#E3B3B3;
  --danger-text:#8A2E2E;
  --success-bg:#EAF6EC;
  --success-border:#B7D9BC;
  --success-text:#2E6B36;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(17,17,17,0.07);
  --shadow-md:0 10px 32px rgba(17,17,17,0.12);
  /* Flat placeholder swatches standing in for a product photo — these are
     UI, not real photo content, so they should repaint with the theme. */
  --palette-0:#D8CFC2;
  --palette-1:#C9BFB2;
  --palette-2:#B7C2BE;
  --palette-3:#EAE3D6;
  --palette-4:#DCD5C8;
  --palette-5:#C3B8B0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121213;
    --ink:#F2F1EE;
    --accent:#8B7CFF;
    --grey:#9C9C97;
    --line:rgba(255,255,255,0.14);
    --surface:#1D1D1F;
    --hover-bg:rgba(255,255,255,0.08);
    --btn-bg:#F2F1EE;
    --btn-text:#111111;
    --empty-icon:rgba(255,255,255,0.18);
    --danger-bg:#3A1F1F;
    --danger-border:#6B3434;
    --danger-text:#F1A8A8;
    --success-bg:#1E3324;
    --success-border:#3E6B4A;
    --success-text:#9AD9AA;
    --shadow-sm:0 2px 10px rgba(0,0,0,0.35);
    --shadow-md:0 10px 32px rgba(0,0,0,0.5);
    --palette-0:#4A4038;
    --palette-1:#423E38;
    --palette-2:#3A4240;
    --palette-3:#4A473E;
    --palette-4:#46423A;
    --palette-5:#403A34;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121213;
  --ink:#F2F1EE;
  --accent:#8B7CFF;
  --grey:#9C9C97;
  --line:rgba(255,255,255,0.14);
  --surface:#1D1D1F;
  --hover-bg:rgba(255,255,255,0.08);
  --btn-bg:#F2F1EE;
  --btn-text:#111111;
  --empty-icon:rgba(255,255,255,0.18);
  --danger-bg:#3A1F1F;
  --danger-border:#6B3434;
  --danger-text:#F1A8A8;
  --success-bg:#1E3324;
  --success-border:#3E6B4A;
  --success-text:#9AD9AA;
  --shadow-sm:0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:0 10px 32px rgba(0,0,0,0.5);
  --palette-0:#4A4038;
  --palette-1:#423E38;
  --palette-2:#3A4240;
  --palette-3:#4A473E;
  --palette-4:#46423A;
  --palette-5:#403A34;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
.display{ font-family:'Space Grotesk', sans-serif; }

.app{ max-width:480px; margin:0 auto; background:var(--bg); min-height:100vh; position:relative; }

/* NAV */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 16px;
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.logo{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.5px; text-decoration:none; color:var(--ink); }
.logo .dot{ color:var(--accent); }
.nav-icons{ display:flex; gap:6px; align-items:center; }
.nav-icons a{ color:var(--ink); text-decoration:none; position:relative; display:flex; padding:9px; border-radius:999px; transition:background-color .15s ease; }
.nav-icons a:hover{ background:var(--hover-bg); }
.icon-btn{ width:22px; height:22px; cursor:pointer; }
.nav-icons a.nav-user{ align-items:center; gap:8px; padding:8px 14px 8px 10px; }
.nav-user-name{ font-size:14px; font-weight:500; white-space:nowrap; }
.theme-toggle{ background:none; border:none; color:var(--ink); display:flex; padding:9px; border-radius:999px; cursor:pointer; transition:background-color .15s ease; }
.theme-toggle:hover{ background:var(--hover-bg); }

/* HERO — one big rounded, elevated photo directly under nav */
.hero{
  position:relative; width:calc(100% - 32px); margin:0 16px; aspect-ratio:4/5;
  background-size:cover; background-position:center;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
}
.hero.has-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:60%;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events:none; z-index:1;
}
/* Photos shown whole (never cropped): the frame is filled with a blurred copy of the photo
   itself and the sharp photo sits on top, so a portrait in a wide frame leaves no empty bars.
   --photo is set inline by the photo_style macro. */
.fit-photo{ background-image:var(--photo); background-size:cover; background-position:center; }
.fit-photo::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--photo) center/contain no-repeat;
  -webkit-backdrop-filter:blur(28px) brightness(0.85); backdrop-filter:blur(28px) brightness(0.85);
}
/* Without backdrop-filter the plain palette colour is the fallback rather than a hard-edged duplicate. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fit-photo{ background-image:none; }
}
.hero-placeholder-hint{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding:0 40px; font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:17px; color:var(--grey);
}
.hero-placeholder-hint svg{ width:38px; height:38px; opacity:0.5; }
.hero-info{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:12px;
  color:#fff;
}
.hero-info .name{ font-family:'Space Grotesk', sans-serif; font-size:23px; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,0.5); }
.hero-info .sub{ font-size:14px; opacity:0.95; margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.hero-like{
  display:flex; align-items:center; gap:6px; font-family:'Space Grotesk', sans-serif;
  font-size:16px; font-weight:600; border:1px solid rgba(255,255,255,0.6);
  border-radius:999px; padding:9px 15px; background:rgba(17,17,17,0.3);
  backdrop-filter:blur(6px); flex:0 0 auto;
}
.hero-like svg{ width:16px; height:16px; }

/* HORIZONTAL THUMB STRIP */
.strip{ display:flex; gap:10px; overflow-x:auto; padding:20px 16px 4px; }
.strip::-webkit-scrollbar{ display:none; }
.thumb{ flex:0 0 auto; width:92px; height:114px; background-color:var(--bg); background-size:cover; background-position:center; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); }

/* SECTION HEADER */
.section-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 20px 14px;
}
.section-head h2{ font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:600; }
.section-head--showcase{ padding-top:40px; padding-bottom:20px; }
.section-head a{ font-size:14px; color:var(--grey); text-decoration:none; }

/* PRODUCT GRID — soft rounded cards with a gentle shadow, no hairlines */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 16px; }
.card{
  text-decoration:none; color:var(--ink); display:block; background:var(--surface);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card-photo{ position:relative; width:100%; aspect-ratio:3/4; background-size:cover; background-position:center; }
.card-photo.has-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:45%;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}
.card-photo-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--empty-icon); }
.card-photo-empty svg{ width:56px; height:56px; }
.card-stats{ position:absolute; left:10px; bottom:10px; z-index:1; display:flex; gap:6px; }
.card-stats .stat{
  display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  font-family:'Space Grotesk', sans-serif; color:#fff;
  background:rgba(17,17,17,0.35); backdrop-filter:blur(6px);
  border-radius:999px; padding:5px 9px;
}
.card-stats svg{ width:13px; height:13px; }
.card-stats .stat-cta{
  background:#fff; color:var(--accent); backdrop-filter:none; box-shadow:var(--shadow-sm);
}
.card-body{ padding:14px 14px 16px; }
.card-name{ font-size:15px; font-weight:500; margin-bottom:4px; }
.cart-row-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; min-width:0; }
.cart-row-header .card-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-row-header .photo-delete-form{ flex-shrink:0; }
.photo-delete-btn{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; height:30px; background:transparent; border:1px solid var(--danger-border); color:var(--danger-text); border-radius:999px; cursor:pointer; transition:background-color .15s ease; }
.photo-delete-btn:hover{ background:var(--danger-bg); }
.photo-delete-btn svg{ width:15px; height:15px; }
.my-pending-photos{ text-align:left; margin-top:4px; }
.pending-photo-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.pending-photo-thumb{ width:40px; height:50px; border-radius:var(--radius-sm); flex-shrink:0; background-size:cover; background-position:center; }
.pending-photo-row .size{ flex:1; font-size:13px; text-align:left; margin-bottom:0 !important; }
.card-price{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:600; margin-bottom:11px; }
.sizes{ display:flex; gap:6px; margin-bottom:11px; flex-wrap:wrap; }
.size{ font-size:13px; color:var(--grey); }
.size-chip{ font-size:13px; color:var(--grey); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.size-chip.active{ color:var(--ink); border-color:var(--ink); }

footer{
  padding:32px 20px 44px; border-top:1px solid var(--line);
  margin-top:20px;
  font-size:14px; color:var(--grey); line-height:2;
}
footer .cols{ display:flex; gap:36px; margin-bottom:18px; }
footer a{ color:var(--ink); text-decoration:none; display:block; }
footer .brand{ font-family:'Space Grotesk', sans-serif; color:var(--ink); font-size:16px; font-weight:600; margin-bottom:8px; }

/* PRODUCT DETAIL — same side padding as the hero above it, so edges line up */
.detail-body{ padding:0 16px 24px; }
.form-field{ display:flex; flex-direction:column; }
.form-field label{ margin-bottom:6px; }
.empty-showcase{ text-align:center; padding:32px 20px; border:1.5px dashed var(--line); border-radius:var(--radius-md); }
.empty-showcase-emoji{ display:flex; justify-content:center; margin-bottom:10px; color:var(--grey); }
.empty-showcase-emoji svg{ width:32px; height:32px; }
.empty-showcase-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15px; margin-bottom:6px; }
.empty-showcase-sub{ font-size:13px; color:var(--grey); line-height:1.5; max-width:320px; margin:0 auto; }

/* Customer photo upload card */
.upload-teaser-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:14px 18px; font-size:14px; font-weight:500; color:var(--ink); font-family:'Inter', sans-serif; cursor:pointer;
}
.upload-teaser-btn[hidden]{ display:none; }
.upload-teaser-btn:hover{ background:var(--hover-bg); }
.upload-teaser-btn svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.upload-card{
  background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:24px 20px; text-align:center;
}
.upload-card.upload-card-locked{ opacity:0.85; }
.upload-card .upload-icon{ color:var(--accent); margin-bottom:10px; display:flex; justify-content:center; }
.upload-card .upload-icon svg{ width:30px; height:30px; }
.upload-card-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; margin-bottom:4px; }
.upload-card-sub{ font-size:13px; color:var(--grey); line-height:1.5; max-width:320px; margin:0 auto 18px; }
.upload-form-fields{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.upload-form-fields select{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); padding:11px 12px; font-size:16px; width:100%; }
.upload-size-fixed{ font-size:14px; color:var(--grey); }
.upload-size-fixed strong{ color:var(--ink); }
.file-picker{
  display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line); border-radius:var(--radius-sm);
  padding:14px; cursor:pointer; color:var(--grey); font-size:14px; transition:border-color .15s ease, color .15s ease;
}
.file-picker:hover{ border-color:var(--accent); color:var(--ink); }
.file-picker svg{ width:20px; height:20px; flex:0 0 auto; }
.upload-preview-list{ display:flex; flex-wrap:wrap; gap:8px; }
.upload-preview-item{ position:relative; width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; flex:0 0 auto; }
.upload-preview-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.upload-preview-remove{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(17,17,17,0.65); color:#fff; border:none; font-size:15px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.upload-preview-remove:hover{ background:var(--accent); }
.upload-consent{ font-size:12px; line-height:1.5; color:var(--grey); }
.upload-consent a{ color:var(--ink); }
.upload-progress{ height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.upload-progress-bar{ height:100%; width:0%; background:var(--accent); transition:width .15s ease; }

/* AUTH FORMS */
.auth-form{ padding:0 20px 40px; max-width:360px; margin:0 auto; }
.auth-form label{ display:block; font-size:14px; color:var(--grey); margin:16px 0 6px; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text]{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:12px 14px; font-family:'Inter', sans-serif; font-size:16px; color:var(--ink);
}
.auth-form input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.auth-form ul{ color:var(--danger-text); font-size:13px; margin:4px 0 0; padding-left:16px; }
.btn-primary{ margin-top:20px; width:100%; background:var(--btn-bg); color:var(--btn-text); border:none; border-radius:999px; padding:15px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; cursor:pointer; transition:background-color .15s ease, transform .15s ease; }
.btn-primary:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); }
.auth-alt{ margin-top:18px; font-size:14px; color:var(--grey); }
.auth-alt a{ color:var(--ink); text-decoration:underline; }
.form-error{ background:var(--danger-bg); border:1px solid var(--danger-border); border-radius:var(--radius-sm); color:var(--danger-text); padding:11px 14px; font-size:13px; margin-bottom:6px; }
.mock-payment-badge{ display:inline-block; background:var(--danger-bg); color:var(--danger-text); border:1px solid var(--danger-border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; margin-bottom:12px; }
.btn-mock-reject{ margin-top:10px; width:100%; background:transparent; color:var(--danger-text); border:1px solid var(--danger-border); border-radius:999px; padding:15px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; cursor:pointer; transition:background-color .15s ease; }
.btn-mock-reject:hover{ background:var(--danger-bg); }
.flash{ margin:0 20px 16px; padding:12px 14px; font-size:13px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.flash-success{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.flash-error{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); }

/* CART & CHECKOUT */
.empty-state{ padding:0 16px 40px; color:var(--grey); font-size:15px; }
.cart-list{ padding:0 16px; display:flex; flex-direction:column; gap:12px; }
.cart-row{ display:flex; gap:14px; padding:14px; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); align-items:flex-start; }
.cart-row-photo{ width:84px; height:105px; flex:0 0 auto; border-radius:var(--radius-sm); background-size:cover; background-position:center; position:relative; }
.grid-overlay{ display:none; }
.grid-overlay-name{ display:block; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; }
.grid-overlay-meta{ display:flex; align-items:center; gap:6px; font-size:13px; opacity:0.9; margin-top:2px; }
.grid-overlay-meta svg{ width:14px; height:14px; }
.cart-row-photo.zoomable{ cursor:zoom-in; }

/* LIGHTBOX */
.lightbox-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(17,17,17,0.85);
  display:flex; align-items:center; justify-content:center; padding:24px;
  cursor:zoom-out;
}
.lightbox-overlay img{
  max-width:100%; max-height:100%; border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  cursor:default;
}
.lightbox-overlay--with-panel{
  flex-direction:column; justify-content:flex-start; overflow-y:auto; padding:56px 16px 24px; cursor:default;
}
.lightbox-overlay--with-panel img{ max-height:56vh; flex-shrink:0; }
.lightbox-panel{
  margin-top:16px; width:100%; max-width:520px; background:var(--surface); color:var(--ink);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:18px 20px;
  max-height:34vh; overflow-y:auto; cursor:default; text-align:left;
}
.lightbox-close{
  position:fixed; top:20px; right:20px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.15); color:#fff; border:none; font-size:26px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.25); }
.cart-row-body{ flex:1; min-width:0; }
.cart-row-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.cart-qty-form{ display:inline-flex; align-items:center; gap:8px; }
.cart-qty-form input[type=number]{ width:60px; height:34px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); padding:0 10px; font-size:14px; text-align:center; }
.cart-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; text-decoration:none; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:13px; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
.cart-btn:hover{ background:var(--line); }
.cart-btn svg{ width:15px; height:15px; }
.cart-btn-primary{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.cart-btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:760px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 18px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.cookie-banner p{ flex:1 1 320px; font-size:13px; line-height:1.55; }
.cookie-banner a{ color:var(--ink); }
.cookie-banner-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.auth-form .cookie-heading{ font-family:'Space Grotesk', sans-serif; font-size:15px; margin:28px 0 10px; }
.cookie-settings{ display:flex; flex-direction:column; gap:8px; }
.auth-form .cookie-option{ display:flex; align-items:flex-start; gap:12px; margin:0; padding:12px 14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
.cookie-option input{ width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
.cookie-option span{ display:flex; flex-direction:column; gap:3px; }
.cookie-option strong{ font-size:14px; }
.cookie-option small{ font-size:12px; line-height:1.5; color:var(--grey); }
.cookie-settings-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cookie-status{ margin-top:12px; font-size:13px; color:var(--success-text); }
.cookie-list{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.6; }
.auth-form ul.cookie-list{ color:var(--ink); margin:0; padding:0; font-size:13px; }
.cookie-list em{ color:var(--grey); }
.cart-btn-danger{ color:var(--danger-text); border-color:var(--danger-border); }
.cart-btn-danger:hover{ background:var(--danger-bg); }
.cart-row-total{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; }
.cart-summary{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); margin:4px 16px 0; font-size:15px; }
.checkout-cta{ padding:0 16px 40px; }

/* Like button (heart toggle) */
.like-btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; font-size:14px; font-weight:500; color:var(--grey); cursor:pointer; font-family:'Inter', sans-serif; }
.like-btn svg{ width:19px; height:19px; }
.like-btn.is-liked{ color:var(--accent); }

/* Inline comment composer */
.comment-list{ max-height:180px; overflow-y:auto; padding-right:4px; }
.comment-list-top{ font-size:11px; color:var(--grey); text-align:center; min-height:0; }
.comment-item{ font-size:13px; margin-top:8px; }
.comment-item:first-child{ margin-top:0; }
.comment-time{ font-size:11px; color:var(--grey); display:block; margin-top:1px; }
.comment-add-toggle{ margin-top:10px; background:none; border:none; padding:0; color:var(--grey); font-size:13px; font-family:'Inter', sans-serif; cursor:pointer; }
.comment-add-toggle:hover{ color:var(--ink); text-decoration:underline; }
.comment-form{ margin-top:10px; display:flex; gap:8px; }
.comment-form[hidden]{ display:none; }
.comment-form input[type=text]{ flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); padding:9px 15px; font-size:14px; font-family:'Inter', sans-serif; }
.comment-form input[type=text]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.comment-form button{ background:var(--btn-bg); color:var(--btn-text); border:none; border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; font-family:'Space Grotesk', sans-serif; cursor:pointer; white-space:nowrap; transition:background-color .15s ease; }
.comment-form button:hover{ background:var(--accent); color:#fff; }
.add-to-cart-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:6px; }
.add-to-cart-form label{ display:block; font-size:14px; color:var(--grey); margin-bottom:6px; }
.add-to-cart-form select, .add-to-cart-form input[type=number]{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); padding:11px 12px; font-size:16px; }
.add-to-cart-form select{ min-width:80px; }
.add-to-cart-form input[type=file]{ color:var(--ink); font-size:14px; max-width:220px; }
.add-to-cart-form input[type=number]{ width:70px; }
.add-to-cart-form .btn-primary{ margin-top:0; width:auto; padding:13px 22px; }
.checkout-form{ padding:0 20px 40px; max-width:420px; margin:0 auto; }
.checkout-form label{ display:block; font-size:14px; color:var(--grey); margin:16px 0 6px; }
.checkout-form input[type=text], .checkout-form input[type=email]{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); padding:12px 14px; font-size:16px; }
.delivery-options{ display:flex; flex-direction:column; gap:8px; }
.checkout-form .delivery-option{ display:flex; align-items:center; gap:12px; margin:0; padding:12px 14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
.delivery-option:has(input:checked){ border-color:var(--accent); }
.delivery-option input{ width:18px; height:18px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.delivery-option-body{ display:flex; flex-direction:column; gap:2px; }
.delivery-option-name{ font-size:15px; font-weight:600; }
.delivery-option-meta{ font-size:13px; color:var(--grey); }
.inpost-dialog{ margin:auto; width:min(1100px, 100vw); height:min(760px, 100dvh); max-width:100vw; max-height:100dvh; padding:0; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); color:var(--ink); overflow:hidden; }
.inpost-dialog[open]{ display:flex; flex-direction:column; }
.inpost-dialog::backdrop{ background:rgba(0,0,0,.55); }
.inpost-dialog-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.inpost-map{ flex:1; min-height:0; }
.inpost-map inpost-geowidget{ display:block; width:100%; height:100%; }
.account-page{ padding:0 16px 40px; display:flex; flex-direction:column; gap:16px; }
.account-card{ background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:20px; min-width:0; }
.account-card-title{ font-family:'Space Grotesk', sans-serif; font-size:16px; margin-bottom:4px; }
.account-profile{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; }
.account-avatar{ flex:0 0 auto; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); border:1px solid var(--line); font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:600; }
.account-profile-body{ flex:1 1 200px; min-width:0; }
.account-profile-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.account-columns{ display:flex; flex-direction:column; gap:16px; }
.checkout-form.account-shipping{ padding:0; max-width:none; margin:0; }
.account-shipping .btn-primary{ width:auto; margin-top:20px; padding:12px 32px; }
.account-shipping > form + form{ margin-top:12px; }
.account-orders{ display:flex; flex-direction:column; margin-top:8px; }
.account-order{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); }
.account-order:first-child{ border-top:0; }
.account-order:hover .card-name{ text-decoration:underline; }
.account-order-body{ flex:1; min-width:0; }
.status-badge{ flex:0 0 auto; font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--grey); white-space:nowrap; }
.status-paid, .status-shipped{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.status-cancelled{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); }
@media (min-width:700px){
  .account-page{ padding:0 32px 60px; }
}
@media (min-width:900px){
  .account-columns{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start; }
  .account-page{ gap:20px; }
}
@media (min-width:1024px){
  .account-page{ padding:0 40px 60px; }
}
.checkout-side-title, .checkout-section-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; margin:28px 0 10px; }
.checkout-section + .checkout-section{ margin-top:32px; padding-top:8px; border-top:1px solid var(--line); }
.checkout-section .checkout-section-title{ margin:16px 0 0; }
.checkout-form .checkout-items{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0; font-size:14px; color:var(--ink); }
.checkout-items li{ display:flex; justify-content:space-between; gap:12px; }
.checkout-items small{ display:block; font-size:12px; color:var(--grey); margin-top:2px; }
.checkout-items li span:last-child{ white-space:nowrap; font-weight:600; }
.checkout-items + .checkout-summary{ margin-top:16px; }
@media (min-width:900px){
  .checkout-form.checkout-layout{ max-width:none; margin:0; padding:0 32px 60px; }
  .checkout-layout form{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start; }
  .checkout-section-fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; align-items:start; }
  .checkout-side{ position:sticky; top:24px; }
  .checkout-side-title{ margin-top:16px; }
}
@media (min-width:1024px){
  .checkout-form.checkout-layout{ padding:0 40px 60px; }
}
.checkout-hint{ margin:18px 0 0; font-size:13px; color:var(--grey); }
.checkout-hint a{ color:var(--ink); }
@media (max-width:640px){
  .inpost-dialog{ width:100vw; height:100dvh; border-radius:0; }
}
.inpost-chosen{ margin:10px 0 0; font-size:14px; font-weight:600; }
.inpost-or{ margin:12px 0 0; font-size:13px; color:var(--grey); }
.checkout-form .inpost-or + input{ margin-top:6px; }
.link-btn{ background:none; border:none; padding:0; font-size:13px; color:var(--grey); text-decoration:underline; cursor:pointer; margin-left:10px; }
.checkout-form .checkout-save{ display:flex; align-items:center; gap:10px; margin:18px 0 0; color:var(--ink); cursor:pointer; }
.checkout-save input[type=checkbox]{ width:18px; height:18px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.checkout-form ul{ color:var(--danger-text); font-size:13px; margin:4px 0 0; padding-left:16px; }
.checkout-summary{ display:flex; justify-content:space-between; padding:16px 18px; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); margin-top:20px; font-size:15px; }

/* NAV account/cart badge */
.cart-count{ position:absolute; top:-2px; right:-2px; background:var(--accent); color:#fff; font-size:11px; font-family:'Space Grotesk', sans-serif; font-weight:600; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }

.product-price{ font-size:22px; margin-bottom:14px; }
.product-description{ font-size:14px; color:var(--grey); line-height:1.6; margin-bottom:14px; }

/* PRODUCT PAGE ON PHONES — bigger customer photos and text than the compact cart-style rows */
@media (max-width:699px){
  .section-head--product h2{ font-size:24px; }
  .product-price{ font-size:26px; }
  .product-description{ font-size:16px; }
  .add-to-cart-form label{ font-size:15px; }
  .add-to-cart-form select, .add-to-cart-form input[type=number]{ font-size:17px; padding:12px 14px; }
  .add-to-cart-form .btn-primary{ font-size:17px; padding:14px 26px; }

  .photo-showcase .cart-row{ gap:16px; }
  .photo-showcase .cart-row-photo{ width:min(36vw, 190px); height:auto; aspect-ratio:4/5; }
  .photo-showcase .card-name{ font-size:17px; }
  .photo-showcase .size{ font-size:15px; }
  .photo-showcase .like-btn{ font-size:16px; }
  .photo-showcase .like-btn svg{ width:22px; height:22px; }
  .photo-showcase .comment-list{ max-height:220px; }
  .photo-showcase .comment-item{ font-size:15px; }
  .photo-showcase .comment-time{ font-size:12px; }
  .photo-showcase .comment-add-toggle{ font-size:15px; }
  .photo-showcase .comment-form input[type=text]{ font-size:16px; padding:10px 16px; }
  .photo-showcase .comment-form button{ font-size:14px; padding:10px 18px; }
}

/* TABLET — widen the frame, move to a 3-column grid */
@media (min-width:700px){
  .app{ max-width:820px; }
  nav{ padding:24px 32px 18px; }
  .logo{ font-size:24px; }
  .hero{ width:calc(100% - 64px); margin:0 32px; aspect-ratio:16/8; }
  .hero-info{ left:32px; right:32px; bottom:28px; }
  .hero-info .name{ font-size:27px; }
  .strip{ padding:24px 32px 4px; }
  .thumb{ width:120px; height:150px; }
  .section-head{ padding:32px 32px 16px; }
  .grid{ grid-template-columns:repeat(3, 1fr); padding:0 32px; }
  .detail-body{ padding:0 32px 24px; }
  .cart-list{ padding:0 32px; }
  .cart-row-photo{ width:130px; height:162px; }
  .cart-summary{ margin:4px 32px 0; }
  .empty-state{ padding:0 32px 40px; }
  .checkout-cta{ padding:0 32px 40px; }
  footer{ padding:36px 32px 48px; }
}

/* DESKTOP — 4-column grid, wide banner hero */
@media (min-width:1024px){
  .app{ max-width:1160px; }
  nav{ padding:28px 40px 20px; }
  .logo{ font-size:26px; }
  .hero{ width:calc(100% - 80px); margin:0 40px; aspect-ratio:16/6; }
  .hero-info{ left:40px; right:40px; bottom:36px; }
  .hero-info .name{ font-size:33px; }
  .hero-info .sub{ font-size:15px; }
  .hero-like{ font-size:17px; padding:10px 17px; }
  .strip{ padding:28px 40px 4px; }
  .thumb{ width:150px; height:186px; }
  .section-head{ padding:40px 40px 20px; }
  .section-head h2{ font-size:25px; }
  .grid{ grid-template-columns:repeat(4, 1fr); padding:0 40px; }
  .detail-body{ padding:0 40px 24px; }
  .cart-list{ padding:0 40px; }
  .cart-row-photo{ width:170px; height:212px; }
  .photo-showcase{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
  .photo-showcase .cart-row{ display:block; padding:0; overflow:hidden; }
  .photo-showcase .cart-row-photo{ width:100%; height:520px; border-radius:0; }
  .photo-showcase .cart-row-photo.zoomable{ cursor:pointer; }
  .photo-showcase .cart-row-body{ display:none; }
  .photo-showcase .grid-overlay{
    display:block; position:absolute; left:0; right:0; bottom:0; padding:34px 18px 16px;
    background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); color:#fff; pointer-events:none;
  }
  .photo-showcase .grid-overlay-name, .photo-showcase .grid-overlay-meta{ text-shadow:0 1px 3px rgba(0,0,0,0.45); }
  .cart-summary{ margin:4px 40px 0; }
  .empty-state{ padding:0 40px 40px; }
  .checkout-cta{ padding:0 40px 40px; }
  footer{ padding:44px 40px 56px; }
}