/* =====================================================================
   looksprettyonyou.com

   MOBILE FIRST. Every base rule below targets a 320px phone. Media
   queries are min-width only and add capability as the screen grows —
   nothing here is written for desktop and then clawed back.

   Two rules to keep it that way:
     1. Never put layout in an inline style attribute. Inline beats a
        media query, so it silently pins that element to one layout at
        every width. (This is what broke checkout.)
     2. Form controls stay at 16px. Below 16px, iOS Safari zooms the
        whole page when a field takes focus and never zooms back.
   ===================================================================== */

:root{
  --paper:#F6F4EE; --ink:#16161A; --accent:#2A3CE0; --accent-dark:#1b2bc4;
  --muted:#706C64; --line:#E2DDD1; --card:#FFFFFF; --sold:#9A958C;
  --ok:#1f7a4d; --danger:#b3261e;
  --tap:44px;                 /* minimum comfortable touch target */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;        /* long words/URLs can't force sideways scroll */
}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.08}

/* Hover styling only where a real pointer exists — on touch, :hover
   sticks after a tap and leaves cards stuck mid-zoom. */
@media (hover:hover){
  a:hover{text-decoration:underline}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---- layout ---- */
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px}

/* Sticky so Cart is always one thumb-reach away, never scrolled past. */
.nav{
  position:sticky;top:0;z-index:20;background:var(--paper);
  max-width:1080px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line)
}
.nav__brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:.04em;font-size:16px;color:var(--ink);line-height:1.2}
.nav__links{display:flex;align-items:center;gap:4px;font-size:15px}
/* Padding, not margin, so the tap area is the link itself. */
.nav__links a{color:var(--ink);display:inline-flex;align-items:center;min-height:var(--tap);padding:0 10px}
.badge{display:inline-block;min-width:20px;text-align:center;background:var(--accent);color:#fff;border-radius:20px;font-size:12px;font-weight:600;padding:1px 7px;margin-left:5px}
.foot{
  max-width:1080px;margin:0 auto;padding:24px 16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:14px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))   /* clear the iPhone home bar */
}
.foot__muted{color:var(--muted)}
.foot__links{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--muted)}
.foot__links a{color:var(--muted)}
.flash{background:#eef1ff;border:1px solid #cdd4ff;color:#26308f;padding:12px 14px;border-radius:6px;margin-bottom:18px;font-size:14.5px}

@media (min-width:700px){
  .wrap{padding:28px 24px 60px}
  .nav{padding:20px 24px;align-items:baseline}
  .nav__brand{font-size:18px;letter-spacing:.05em}
  .nav__links{gap:18px}
  .nav__links a{min-height:0;padding:0}
  .foot{padding:28px 24px;justify-content:space-between;gap:12px 30px}
}
.legal-page{max-width:720px;margin:0 auto}
.legal-page h1{font-size:32px;margin:0 0 6px}
.legal-page h2{font-size:18px;margin:28px 0 8px}
.legal-page p{margin:0 0 14px}
.legal-page__updated{color:var(--muted);font-size:14px;margin-bottom:24px !important}
.admin-page .wrap{padding-top:12px}
.admin-page .admin-bar{
  padding:8px 12px;align-items:center;gap:8px;max-width:1080px
}
.admin-page .admin-bar .nav__brand{
  font-size:15px;letter-spacing:0;white-space:nowrap;line-height:1
}
.admin-page .admin-bar .nav__links{
  flex:1;justify-content:flex-end;gap:0;font-size:13px
}
.admin-page .admin-bar .nav__links a{
  min-height:34px;padding:0 5px;white-space:nowrap
}
@media (min-width:700px){
  .admin-page .wrap{padding-top:20px}
  .admin-page .admin-bar{padding:14px 24px}
  .admin-page .admin-bar .nav__links{gap:14px;font-size:15px}
}

/* ---- buttons ----
   Full width by default: on a phone a button that only spans its text
   is a small target in an unpredictable place. They shrink to content
   once there's room for a real button row. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:12px 18px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:4px;font-weight:600;font-size:16px;cursor:pointer;
  transition:background .15s;text-align:center
}
.btn:disabled,.btn--disabled{background:var(--accent);color:#fff;border-color:var(--accent);opacity:.5;pointer-events:none}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--danger{background:transparent;color:var(--danger);border-color:#e6c9c7}
.btn--sm{min-height:var(--tap);padding:8px 14px;font-size:14px;width:auto}
@media (hover:hover){
  .btn:hover{background:var(--accent-dark);text-decoration:none}
  .btn--ghost:hover{background:#efece4;color:var(--ink)}
  .btn--danger:hover{background:#fbeeed}
}
@media (min-width:560px){
  .btn{width:auto}
}

/* Button rows: stacked on a phone, inline once there's width.
   Replaces the inline `display:flex;gap:10px` wrappers. */
.btn-row{display:flex;flex-direction:column;gap:10px;margin-top:16px}
@media (min-width:560px){
  .btn-row{flex-direction:row;align-items:center}
}

/* ---- product grid (storefront) ---- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;margin-top:24px}
@media (min-width:560px){.grid{gap:34px 18px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr);gap:34px 28px;margin-top:34px}}
.card{position:relative;padding-bottom:18px}
@media (min-width:560px){.card{padding-bottom:0;border-bottom:0}}
.card__top{display:block;margin-top:12px}
.card__info{min-width:0;color:var(--ink)}
.card__frame{position:relative;aspect-ratio:4/5;background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .card:hover .card__img{transform:scale(1.035)}
  .card a:hover{text-decoration:none}
}
.card__ph{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,rgba(42,60,224,.10),transparent 60%),var(--card)}
.card__ph--fill{height:100%}
.card__ph span{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:0 12px;text-align:center}
.card__tag{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:2px}
.card__row{display:grid;grid-template-columns:1fr;gap:1px;min-height:42px}
.card__name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;line-height:1.12;color:var(--ink)}
.card__price{font-weight:700;font-size:13px;white-space:nowrap;color:var(--ink)}
.icon-btn{
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  display:inline-grid;place-items:center;font:inherit;font-weight:800;line-height:1;cursor:pointer
}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.copy-link.copied{background:#e5f3ec;border-color:#b7dbc9;color:var(--ok)}
.card__copy{width:30px;height:30px;font-size:14px}
@media (min-width:560px){
  .card__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:0}
  .card__name{font-size:19px}
  .card__price{font-size:15px}
  .card__copy{width:36px;height:36px;font-size:16px}
}
.login-shop-link{display:inline-block;margin:0 0 16px;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:800;color:var(--ink)}

/* ---- shop intro ---- */
.shop-intro{padding:4px 0 0}
.shop-intro__title{font-size:clamp(30px,8vw,58px);margin:0}
.shop-intro__sub{color:var(--muted);margin:8px 0 0;max-width:34ch}
.shop-intro__sub--solo{margin:0 0 18px;max-width:none;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:18px}
.back-link{margin:0 0 14px}

/* ---- product detail / two-pane pages ---- */
.pd{display:grid;grid-template-columns:1fr;gap:24px;margin-top:12px}
@media (min-width:780px){
  .pd{grid-template-columns:minmax(280px,.82fr) 1fr;gap:44px;align-items:start}
  /* Checkout and the admin order page: equal-ish panes instead of the
     gallery split. Use this class, never an inline grid-template. */
  .pd--split{grid-template-columns:1fr 1fr}
  .pd > .gallery{max-width:420px;width:100%}
}
.gallery--with-thumbs{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;align-items:start}
.gallery__main{aspect-ratio:4/5;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--card)}
.gallery__main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumbs{display:flex;flex-direction:column;gap:8px;margin-top:0}
.gallery__thumb{width:58px;height:72px;min-width:58px;border:1px solid var(--line);border-radius:2px;overflow:hidden;cursor:pointer;background:var(--card);padding:0}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumb.is-active{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
@media (min-width:780px){
  .gallery--with-thumbs{display:block}
  .gallery__thumbs{flex-direction:row;gap:10px;margin-top:12px;flex-wrap:wrap}
}
.pd__head{display:flex;justify-content:space-between;gap:16px;align-items:start}
.pd__title{font-size:clamp(26px,6.5vw,42px);margin:0}
.pd__price{font-size:22px;font-weight:600;margin:10px 0 18px}
.pd__desc{color:#2c2c30;margin:0 0 20px;white-space:pre-line}
.pd__ship{color:var(--muted);font-size:14px;margin-top:10px}
.buy-panel{margin-top:20px}

/* ---- forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:6px}
select,input[type=text],input[type=email],input[type=number],input[type=password],textarea{
  width:100%;min-height:var(--tap);padding:11px 12px;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  font-family:inherit;color:var(--ink);
  font-size:16px          /* do not lower: <16px makes iOS zoom on focus */
}
select:focus,input:focus,textarea:focus{outline:2px solid rgba(42,60,224,.35);outline-offset:1px;border-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--accent);flex:none}
.qty{max-width:92px}
.qty-field{max-width:92px}
.num-sm{max-width:78px}
.soldout-note{color:var(--sold);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr;gap:0 24px}
@media (min-width:660px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid .full{grid-column:1/-1}
.hint{color:var(--muted);font-size:13px;margin-top:6px}
.hint--checkout{margin-top:10px}

.option-group{margin-bottom:18px}
.option-group__label{font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choice-grid--colors .choice span{justify-content:flex-start;column-gap:14px}
.choice-grid--colors .color-dot{margin-right:6px}
.choice{display:block;position:relative;min-width:0}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:10px 12px;border:1px solid var(--line);
  border-radius:4px;background:#fff;color:var(--ink);font-weight:600;text-align:center
}
.choice input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice input:focus-visible + span{outline:2px solid rgba(42,60,224,.35);outline-offset:2px}
.choice input:disabled + span,
.choice input[data-unavailable="1"] + span{
  color:var(--sold);background:#f1eee7;border-style:dashed;box-shadow:none;opacity:.58
}
.choice input:disabled + span .color-dot,
.choice input[data-unavailable="1"] + span .color-dot{filter:grayscale(1);opacity:.55}
@media (min-width:480px){
  .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.buy-panel .buy-row{display:flex !important;gap:10px;align-items:flex-end;width:100%}
.buy-panel .buy-row .field{margin-bottom:0;flex:0 0 64px}
.buy-panel .buy-row .qty{width:64px;max-width:64px;text-align:center}
.buy-panel .buy-row .btn{width:auto !important;flex:1 1 auto;min-width:0;height:46px}
.qty-alert{margin-top:8px;color:var(--danger);font-size:14px;font-weight:700}

/* Shipping rate choices — whole row is the tap target. */
.rate-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-weight:400;min-height:var(--tap)}
.rate-opt__body{flex:1;min-width:0}
.rate-opt__price{font-weight:600;white-space:nowrap}

/* ---- cart ---- */
.cart-head{margin-top:-8px;margin-bottom:12px}
.cart-head h1{margin:0}
.cart-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.cart-list-head{
  display:grid;grid-template-columns:minmax(0,1fr) 54px 96px;gap:10px;padding:4px 0 8px;margin-left:74px;
  color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase
}
.cart-list-head span:nth-child(2){text-align:center}
.cart-list-head span:nth-child(3){text-align:right}
.cart-line{display:grid;grid-template-columns:64px minmax(0,1fr) 54px 96px;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line__img,.cart-line__ph{width:64px;height:78px;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:var(--card)}
.cart-line__title{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:16px}
.cart-line__meta{color:var(--muted);font-size:13.5px;margin-top:3px}
.cart-line__qtybox{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cart-line__qty{
  width:54px;min-height:38px;display:grid;place-items:center;font-weight:800;font-variant-numeric:tabular-nums
}
.cart-line__price{font-weight:600;text-align:right}
.cart-line__remove{
  background:transparent;border:0;color:var(--danger);font:inherit;font-size:13px;font-weight:600;
  padding:5px 0 0;cursor:pointer
}
@media (min-width:560px){
  .cart-line{grid-template-columns:76px minmax(0,1fr) 58px 112px;gap:14px}
  .cart-list-head{grid-template-columns:minmax(0,1fr) 58px 112px;gap:14px;margin-left:90px}
  .cart-line__img,.cart-line__ph{width:76px;height:92px}
  .cart-line__qty{width:58px}
}
.totals{margin-top:22px}
.totals__row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px}
.totals__row--grand{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:700;font-size:18px}
.totals__row--rule{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.cart-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.cart-note{color:var(--muted);font-size:13px;margin:10px 0 0}
@media (min-width:560px){
  .totals{margin-left:auto;max-width:320px}
  .cart-note{margin-left:auto;max-width:320px}
  .cart-actions{flex-direction:row;justify-content:flex-end;gap:12px}
}
.empty{padding:48px 0;text-align:center;color:var(--muted)}

/* ---- checkout ---- */
.section-title{font-size:20px;margin:0 0 14px}
.section-title--small{font-size:18px;margin-top:6px}
.checkout-summary{order:2}
.checkout-form{order:1}
@media (min-width:780px){
  .checkout-summary,.checkout-form{order:initial}
}

/* ---- admin ---- */
.admin-bar{background:var(--ink);color:#fff}
.admin-bar .nav__brand,.admin-bar .nav__links a{color:#fff}
.admin-head{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.admin-search{flex:1 1 auto;min-width:145px}
.admin-search input{
  width:100%;min-height:42px;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;
  padding:8px 2px;font-size:17px;font-weight:700;font-family:"Bricolage Grotesque",sans-serif
}
.admin-search input:focus{outline:0;border-color:var(--ink);box-shadow:none}
.admin-search input::placeholder{color:var(--muted);opacity:.7}
.admin-head__tools{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.show-hidden-toggle{
  display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 8px;border:1px solid var(--line);
  border-radius:3px;background:#fff;font-size:12px;font-weight:800;white-space:nowrap
}
.show-hidden-toggle input{width:16px;height:16px;margin:0}
.admin-list-empty{margin:18px 0 0}
@media (min-width:560px){
  .admin-head{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (max-width:420px){
  .admin-head{gap:6px}
  .admin-search{min-width:120px}
  .admin-search input{font-size:15px}
  .show-hidden-toggle{font-size:12px;padding:8px 7px}
  .show-hidden-toggle input{margin:0}
}
/* Admin tables carry more columns than a phone can show. Rather than
   crushing them, let the table scroll sideways inside this wrapper so
   the page itself never does. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px}
.admin-table{width:100%;min-width:0;border-collapse:collapse;font-size:14.5px}
.admin-table th,.admin-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.admin-table th:last-child,.admin-table td:last-child{padding-right:2px}
.admin-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.admin-table .wrapcell{white-space:normal;min-width:180px}
.admin-thumb-link{display:inline-block;line-height:0}
.admin-thumb{width:50px;height:61px;object-fit:cover;border-radius:2px;border:1px solid var(--line)}
.admin-thumb-cell{width:52px;padding-left:2px !important;padding-right:2px !important}
.admin-title-cell{width:auto;white-space:normal !important;min-width:0}
.is-hidden-product .admin-thumb{filter:grayscale(1);opacity:.48}
.admin-thumb-link:hover .admin-thumb{border-color:var(--ink)}
.admin-title-link{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ink)}
.admin-meta-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.admin-edit-meta{margin-top:0;margin-left:auto}
.id-copy{
  border:0;background:transparent;color:var(--muted);padding:0;font:inherit;
  font-size:12px;font-weight:800
}
.price-copy:hover{color:var(--accent)}
.admin-price{font-weight:700}
.link-copy-btn{
  width:28px;height:28px;margin-left:6px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  display:inline-grid;place-items:center;vertical-align:middle;cursor:pointer
}
.link-copy-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link-copy-btn:hover{border-color:var(--ink);color:var(--accent)}
.admin-status{
  font-size:12px;color:var(--muted);font-weight:700
}
.price-copy{border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.qty-total{font-weight:800;font-variant-numeric:tabular-nums}
.admin-swatches{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.color-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;
  background:var(--swatch);border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)
}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.pill--button{border:0;cursor:pointer;font-family:inherit}
.pill--on{background:#e5f3ec;color:var(--ok)}
.pill--off{background:#f0ede6;color:var(--muted)}
.pill--sold{background:#f4e9e8;color:var(--danger)}
.admin-edit-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.admin-edit-head h1{font-size:22px;margin:0}
.admin-back{
  width:32px;height:32px;border:1px solid var(--line);border-radius:4px;
  display:grid;place-items:center;color:var(--ink);background:#fff;font-weight:700
}
.admin-back--wide{width:auto;height:34px;padding:0 12px;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.sr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.editor-grid{display:grid;grid-template-columns:1fr;gap:0 18px}
@media (min-width:720px){
  .editor-grid{grid-template-columns:1fr 1fr}
}
.editor-grid .full{grid-column:1/-1}
.editor-grid--top{grid-template-columns:minmax(0,1fr) 86px;gap:8px;align-items:start}
.editor-grid--top .field{margin-bottom:10px}
.title-field input{font-weight:700}
.price-field input{text-align:right}
.weight-slider__row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:10px;align-items:center}
.weight-slider__row.has-flat{grid-template-columns:minmax(0,1fr) 46px 96px}
.weight-slider input[type=range]{width:100%;accent-color:var(--accent)}
.weight-slider output{font-weight:700;text-align:right;white-space:nowrap}
.flat-shipping-field{margin:0}
.flat-shipping-field[hidden]{display:none}
.option-editor-grid{display:grid !important;grid-template-columns:1fr;gap:14px;align-items:start}
@media (min-width:560px){
  .option-editor-grid{grid-template-columns:minmax(190px,.8fr) minmax(360px,1.2fr);align-items:start}
}
.option-panel{min-width:0}
.color-picker{display:grid;grid-template-columns:repeat(8,28px);gap:10px;align-items:center}
.color-choice{position:relative;display:block}
.color-choice input[type=checkbox]{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;min-height:0}
.color-choice span{
  width:28px;height:28px;display:block;border-radius:50%;background:var(--swatch);
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)
}
.color-choice input[type=checkbox]:checked + span{outline:3px solid var(--ink);outline-offset:2px}
.color-choice input:focus-visible + span{outline:2px solid rgba(42,60,224,.35);outline-offset:2px}
.size-picker{display:grid;gap:6px}
.size-group{display:grid;grid-template-columns:repeat(5,minmax(22px,1fr));gap:5px;align-items:center}
.size-group__name{grid-column:1/-1;color:var(--muted);font-size:10px;font-weight:700;line-height:1}
.size-choice{position:relative;display:block}
.size-choice input[type=checkbox],
.size-choice .ui-check{position:absolute !important;opacity:0 !important;inset:0;width:100% !important;height:100% !important;margin:0 !important;min-height:0 !important;appearance:none !important}
.size-choice span{
  height:30px;padding:0 4px;border:1px solid var(--line);border-radius:4px;
  background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px
}
.size-choice input[type=checkbox]:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.size-choice input:focus-visible + span{outline:2px solid rgba(42,60,224,.35);outline-offset:2px}
.variant-inventory{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.variant-inventory[hidden]{display:none}
.variant-inventory__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.variant-inventory__head label{margin:0}
.variant-inventory__head span{color:var(--muted);font-size:12px;font-weight:700}
.variant-inventory__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.variant-row{
  display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:8px;align-items:center;
  min-height:38px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#fff
}
.variant-label{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700}
.variant-label .color-dot{width:12px;height:12px}
.variant-size{font-family:"Bricolage Grotesque",sans-serif}
.variant-qty-input{min-height:30px !important;padding:5px 6px !important;text-align:center;font-weight:800}
@media (min-width:720px){
  .variant-inventory__rows{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.editor-toggles{display:flex;gap:8px;flex-wrap:wrap}
.editor-toggles .check-row{min-height:44px;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:#fff}
.visibility-field{margin-top:16px;margin-bottom:0}
.visibility-field .check-row{display:inline-flex;margin:0;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:#fff}
.autosave-status{display:inline-block;margin-left:10px;color:var(--muted);font-size:12px;font-weight:700}
.autosave-status[data-state=error]{color:var(--danger)}
.autosave-status[data-state=saved]{color:var(--ok)}
.soft-rule{border:0;border-top:1px solid var(--line);margin:24px 0}
.img-manage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
@media (min-width:560px){.img-manage{grid-template-columns:repeat(4,minmax(0,1fr))}}
.img-manage figure{margin:0}
.img-manage img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);border-radius:2px;display:block}
.img-manage__ph{width:100%;aspect-ratio:4/5;border:1px dashed var(--line);border-radius:2px;display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center}
.photo-tile{cursor:grab}
.photo-tile.is-dragging{opacity:.45}
.photo-tile__bar{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:7px}
.drag-handle{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;touch-action:none;cursor:grab}
.photo-delete-button{
  border:0;background:transparent;color:var(--danger);padding:4px 0;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer
}
.pending-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.photo-tile--pending img{opacity:.82}
.upload-field{margin:0}
.photo-add-tile{
  aspect-ratio:4/5;border:1px dashed var(--muted);border-radius:3px;background:rgba(255,255,255,.55);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);font:inherit;width:100%;padding:0
}
.photo-add-tile span{font-size:44px;line-height:1;font-weight:400}
.photo-add-tile.is-dragover{border-color:var(--accent);background:#eef1ff;color:var(--accent)}
.sr-only-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-count{color:var(--muted);font-size:13px;margin:8px 0 0}
.editor-actions{margin-top:22px}
.delete-product-form{margin-top:10px}
.delete-product-form .btn{width:100%}
.hidden-form{display:none}
@media (min-width:560px){
  .delete-product-form{display:flex;justify-content:flex-end}
  .delete-product-form .btn{width:auto}
}
.toast{
  position:fixed;left:50%;top:20px;transform:translateX(-50%) translateY(-8px);
  z-index:1000;background:var(--ink);color:#fff;border-radius:999px;padding:9px 14px;
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s
}
.toast.is-showing{opacity:1;transform:translateX(-50%) translateY(-100%)}
.check-row{font-weight:400;display:flex;gap:10px;align-items:center;margin-bottom:10px;min-height:var(--tap)}
.login-box{max-width:360px;margin:32px auto;padding:22px 18px;background:#fff;border:1px solid var(--line);border-radius:6px}
@media (min-width:560px){
  .login-box{margin:60px auto;padding:30px}
}
.err{background:#fbeeed;border:1px solid #e6c9c7;color:var(--danger);padding:11px 13px;border-radius:6px;margin-bottom:16px;font-size:14px}