/* Dream of Fashions v20.0.0 - buyer speed + premium loading animations */
:root{
  --brand:#C13584;
  --brand-dark:#8B1F63;
  --brand-ink:#831843;
  --brand-soft:#FFF6FB;
  --brand-soft-2:#FFF9FD;
  --brand-line:#EBC7DC;
  --ink:#101827;
  --text:#1f2937;
  --muted:#64748b;
  --soft:#f8fafc;
  --line:#e5e7eb;
  --card:#ffffff;
  --ok:#047857;
  --warn:#b45309;
  --danger:#be123c;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 10px 28px rgba(15,23,42,.055);
  --shadow:0 18px 54px rgba(15,23,42,.085);
  --shadow-brand:0 22px 62px rgba(193,53,132,.16);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;text-rendering:optimizeLegibility}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0%,#fff 48%,#fff9fd 100%);line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* Header / navigation */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(229,231,235,.92)}
.nav{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:14px;padding:12px 20px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:max-content}
.brand img{width:176px;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(193,53,132,.11))}
.navlink{font-weight:850;color:#344054;padding:9px 3px;border-radius:999px;white-space:nowrap;transition:color .18s ease,background .18s ease}
.navlink:hover,.navlink.active{color:var(--brand)}
.account-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:999px;padding:7px 11px;font-weight:900;color:var(--brand);white-space:nowrap}
.account-pill img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.search{flex:1;min-width:220px;border:1px solid var(--line);border-radius:999px;padding:12px 17px;outline:none;background:#fff;font-size:15px;transition:border-color .16s ease,box-shadow .16s ease}
.search:focus{border-color:var(--brand-line);box-shadow:0 0 0 4px rgba(255,246,251,.95)}
.cart-link{position:relative;white-space:nowrap}
.cart-count{position:absolute;top:-7px;right:-8px;background:var(--brand);color:#fff;border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:950;box-shadow:0 7px 16px rgba(193,53,132,.22)}

/* Buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(193,53,132,.18);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 35px rgba(193,53,132,.24)}
.btn:active:not(:disabled){transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.68;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid var(--brand-line);box-shadow:none}
.btn.secondary:hover:not(:disabled){background:var(--brand-soft)}
.btn.ghost{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);box-shadow:none}
.btn.small{min-height:38px;padding:9px 13px;font-size:13px}
.btn.full{width:100%;margin-top:12px}
.btn-spinner{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:dofSpin .8s linear infinite}
.text-btn{background:transparent;border:0;color:var(--brand);font-weight:900;cursor:pointer;padding:0}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--brand);font-weight:950;cursor:pointer;transition:background .18s ease,transform .18s ease}
.icon-btn:hover{background:var(--brand-soft);transform:translateY(-1px)}
.field{display:block;width:100%;border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin:10px 0;background:#fff;outline:none;color:var(--text);transition:border-color .16s ease,box-shadow .16s ease}
.field:focus{border-color:var(--brand-line);box-shadow:0 0 0 4px var(--brand-soft)}
select.field{appearance:auto}

/* Shared layout */
.hero{max-width:var(--max);margin:24px auto;padding:40px;border:1px solid rgba(235,199,220,.75);border-radius:34px;background:radial-gradient(circle at 90% 8%,#f8d7eb 0,transparent 26%),linear-gradient(135deg,#fff,#fff8fc);box-shadow:var(--shadow);display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;overflow:hidden}
.hero-logo-card{background:linear-gradient(135deg,#fff,#fff7fb);border:1px solid var(--brand-line);border-radius:30px;min-height:318px;display:flex;align-items:center;justify-content:center;padding:28px;box-shadow:0 22px 58px rgba(193,53,132,.12)}
.hero-logo-card img{width:min(100%,410px);height:auto;display:block}
.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.02;margin:0;letter-spacing:-.055em;color:var(--ink);max-width:760px}
.hero p{color:var(--muted);font-size:17px;max-width:720px;line-height:1.62}
.hero-actions,.hero-badges,.card-actions,.buy-actions,.swatches{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-actions{margin-top:18px}
.hero-badges{margin-bottom:18px}
.layout{max-width:var(--max);margin:0 auto 72px;display:grid;grid-template-columns:250px 1fr;gap:24px;padding:0 20px}
.side{border:1px solid rgba(229,231,235,.92);border-radius:26px;padding:18px;height:max-content;position:sticky;top:92px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-sm)}
.side h3{margin:0 0 12px;color:var(--ink)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.section-head h1,.section-head h2{font-size:32px;line-height:1.08;letter-spacing:-.04em;margin:0;color:var(--ink)}
.panel,.panel-lite{border:1px solid rgba(229,231,235,.96);border-radius:28px;padding:24px;background:#fff;box-shadow:var(--shadow-sm)}
.panel-lite{padding:16px;margin:14px 0;border-radius:20px;box-shadow:none;background:var(--brand-soft-2);border-color:rgba(235,199,220,.74)}
.panel h1,.sticky-buy h1{font-size:clamp(31px,4vw,42px);line-height:1.08;margin:8px 0 14px;letter-spacing:-.05em;color:var(--ink)}
.auth-layout{max-width:1040px;margin:30px auto 74px;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.footer{border-top:1px solid var(--line);padding:36px 20px;text-align:center;color:var(--muted);background:#fff}
.footer-logo{display:block;width:184px;margin:0 auto 14px}
.muted{color:var(--muted)}
.small-text{font-size:14px}
.code{font-size:12px;color:var(--brand);font-weight:950;letter-spacing:.075em;text-transform:uppercase}
.pill,.chip,.mini-chip,.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:900}
.pill{border:1px solid var(--brand-line);background:#fff;color:var(--brand);padding:8px 12px;font-size:13px}
.chip,.mini-chip{border:1px solid var(--line);background:#fff;padding:8px 12px;margin:3px;cursor:pointer;color:#334155;transition:background .16s ease,border-color .16s ease,color .16s ease}
.mini-chip{font-size:12px;padding:6px 9px;max-width:100%}
.chip.active,.chip:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.badge{background:var(--brand-soft);color:var(--brand);border:1px solid rgba(235,199,220,.8);padding:5px 9px;font-size:12px;line-height:1}
.dot{width:18px;height:18px;border-radius:50%;border:1px solid #d1d5db;display:inline-block;box-shadow:inset 0 0 0 2px #fff;flex:0 0 auto}

/* Product grid / cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.card{height:100%;display:flex;flex-direction:column;border:1px solid rgba(229,231,235,.96);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 14px 38px rgba(17,24,39,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-brand);border-color:rgba(235,199,220,.95)}
.card>a{display:block}
.imgwrap{aspect-ratio:1/1;background:linear-gradient(135deg,#fff7fb,#fff);overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(229,231,235,.72);position:relative}
.imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .34s ease,opacity .24s ease}
.imgwrap img[src$=".svg"],.imgwrap img[src*="dof-logo-brand"]{object-fit:contain;padding:42px;background:#fff9fd}
.card:hover .imgwrap img{transform:scale(1.035)}
.cardbody{padding:15px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.title{font-size:17px;font-weight:950;margin:0;line-height:1.28;letter-spacing:-.02em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.price{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;min-height:30px}
.sell{font-size:21px;font-weight:950;color:var(--ink)}
.mrp{text-decoration:line-through;color:var(--muted);font-size:14px}
.card .swatches{min-height:34px;max-height:38px;overflow:hidden;margin-top:1px}
.card .small-text{min-height:40px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card-actions .btn{width:100%;white-space:nowrap}

/* Product detail */
.product-page{max-width:var(--max);margin:30px auto 74px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:28px;padding:0 20px;align-items:start}
.gallery{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start}
.thumbs{display:flex;flex-direction:column;gap:10px;max-height:680px;overflow:auto;padding:2px}
.thumbs img{width:88px;height:88px;object-fit:cover;border:1px solid var(--line);border-radius:18px;cursor:pointer;background:var(--brand-soft);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.thumbs img:hover,.thumbs img.active{border-color:var(--brand);box-shadow:0 10px 24px rgba(193,53,132,.14);transform:translateY(-1px)}
.mainimg{width:100%;aspect-ratio:1/1;max-height:640px;border-radius:28px;border:1px solid var(--line);object-fit:contain;background:#fff;box-shadow:var(--shadow);display:block}
.sticky-buy{position:sticky;top:94px;height:max-content}
.specs{display:grid;gap:10px;margin:18px 0}
.spec{display:grid;grid-template-columns:45% 1fr;gap:14px;border-bottom:1px solid var(--line);padding-bottom:9px;align-items:start}
.spec b{color:var(--ink)}
.spec span{text-align:right;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.custom-product-callout{background:linear-gradient(135deg,#fff9fd,#fff);border-color:var(--brand-line)}
.buy-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buy-actions .btn{width:100%}
.buy-actions .btn.ghost{grid-column:1 / -1}

/* Cart / checkout / orders / account */
.cart-list{display:grid;gap:12px}
.cart-row{display:grid;grid-template-columns:76px minmax(0,1fr) 78px 104px;gap:13px;align-items:center;border:1px solid rgba(229,231,235,.9);border-radius:18px;padding:10px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.035)}
.cart-row img{width:76px;height:76px;object-fit:cover;border-radius:15px;background:var(--brand-soft);border:1px solid var(--line)}
.cart-row p{margin:4px 0}
.cart-row input{width:76px;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;outline:none}
.cart-row input:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)}
.checkout-custom-preview{margin:7px 0 8px;border:1px solid var(--brand-line);border-radius:14px;padding:9px 11px;background:var(--brand-soft-2);color:var(--brand-ink);font-size:13px;line-height:1.48;overflow-wrap:anywhere}
.total-line{display:flex;justify-content:space-between;align-items:center;padding-top:16px;font-size:20px;color:var(--ink)}
.toast{margin:14px 0;border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;color:#334155;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.toast.ok{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}
.toast.warn{border-color:#fed7aa;background:#fff7ed;color:var(--warn)}
.order-card{border:1px solid var(--line);border-radius:24px;padding:18px;margin-bottom:14px;background:#fff;box-shadow:var(--shadow-sm)}
.order-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.payment-pill{display:inline-flex;margin:8px 0 14px;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-weight:900;font-size:12px}
.order-items{display:grid;gap:8px}
.order-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.order-item small{grid-column:1/-1;color:var(--muted);overflow-wrap:anywhere}
.profile-row{display:flex;align-items:center;gap:16px}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.account-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}

/* Color selection */
.color-layout{max-width:var(--max);margin:30px auto 74px;padding:0 20px;display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:start}
.color-product{border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:center;padding:16px}
.color-product img{width:210px;height:210px;object-fit:contain;border-radius:22px;background:var(--brand-soft-2);border:1px solid var(--brand-line)}
.color-note{margin-top:18px}
.color-row{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.color-row small{display:block;color:var(--muted);margin-top:4px}
.selected-color-chip{background:linear-gradient(135deg,#fff,var(--brand-soft-2));border-color:var(--brand-line)}

/* Loading / skeleton / image reveal */
.loading,.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--brand-line);border-radius:24px;background:var(--brand-soft-2)}
.loading-panel{border:1px solid var(--brand-line);border-radius:24px;background:linear-gradient(135deg,#fff,#fff8fc);padding:24px;text-align:center;color:var(--muted);box-shadow:var(--shadow-sm)}
.loading-panel b{display:block;color:var(--brand);margin:8px 0 14px}
.loading-brand-mark{width:34px;height:34px;border-radius:50%;margin:0 auto;background:radial-gradient(circle at 34% 30%,#fff 0 18%,var(--brand) 20% 100%);box-shadow:0 10px 22px rgba(193,53,132,.18);animation:dofPulse 1.3s ease-in-out infinite}
.loading-lines{display:grid;gap:9px;max-width:460px;margin:0 auto}
.skeleton-line,.skeleton-box,.skeleton-actions span{display:block;border-radius:999px;background:linear-gradient(90deg,#f6e8f1 0%,#fff 42%,#f6e8f1 78%);background-size:240% 100%;animation:dofShimmer 1.15s linear infinite}
.skeleton-line{height:13px;width:100%}
.skeleton-line.tiny{width:34%;height:10px}
.skeleton-line.title-line{width:82%;height:18px;border-radius:10px}
.skeleton-line.short{width:58%}
.skeleton-card{pointer-events:none}
.skeleton-card .imgwrap{border-bottom:1px solid rgba(235,199,220,.6)}
.skeleton-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.skeleton-actions span{height:38px;border-radius:999px}
.image-reveal{opacity:0;filter:blur(5px)}
.image-reveal.is-loaded{opacity:1;filter:blur(0);transition:opacity .26s ease,filter .26s ease}
.preview-loading{position:absolute;inset:58px 16px 72px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:rgba(5,5,8,.88);color:#fff;font-weight:900;z-index:2;text-align:center;padding:20px;line-height:1.45;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.preview-loading::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#f9a8d4;margin-right:10px;animation:dofSpin .8s linear infinite}
.preview-loading.is-hidden{display:none}

/* Customization modal */
.modal-open{overflow:hidden}
.custom-modal-shell{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.custom-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(10px)}
.custom-modal{position:relative;width:min(1220px,100%);max-height:min(92vh,900px);overflow:auto;background:#fff;border:1px solid var(--brand-line);border-radius:28px;box-shadow:0 34px 90px rgba(15,23,42,.28);padding:24px}
.custom-modal-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.custom-modal-head h2{font-size:32px;line-height:1;margin:4px 0 6px;color:var(--ink);letter-spacing:-.04em}
.custom-modal h3{font-size:18px;margin:8px 0 10px;color:var(--ink)}
.custom-form{margin:0}
.custom-workbench{display:grid;grid-template-columns:minmax(350px,.95fr) minmax(420px,1.05fr);gap:22px;align-items:start}
.custom-preview-panel{position:sticky;top:0;border:1px solid var(--brand-line);border-radius:24px;background:linear-gradient(135deg,#fff,#fff7fb);padding:16px;box-shadow:0 16px 42px rgba(193,53,132,.09);overflow:hidden}
.custom-preview-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.custom-preview-title b{font-size:18px;color:var(--ink)}
.custom-preview-title span{font-size:12px;font-weight:900;color:var(--brand);background:#fff;border:1px solid var(--brand-line);border-radius:999px;padding:6px 10px;text-align:right}
.dst-preview-canvas{width:100%;aspect-ratio:1/1;display:block;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#050507;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 32px rgba(15,23,42,.14);image-rendering:auto;transform:translateZ(0);contain:layout paint style}
.preview-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px;align-items:center}.preview-part-select,.preview-render-mode{background:#0f1117!important;color:#fff!important;border-color:rgba(255,255,255,.16)!important}.preview-render-mode{min-width:132px}.preview-quality-note{margin-top:9px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(8,9,14,.92),rgba(16,12,20,.92));color:#f8d7ea;border-radius:14px;padding:9px 11px;font-size:12px;line-height:1.45}.preview-progress-bar{height:5px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.preview-progress-bar span{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#f9a8d4,#f43f8b,#fbbf24);transition:width .18s ease}
.custom-preview-fallback{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;border:1px solid var(--line);border-radius:20px;background:#fff;padding:10px}
.custom-controls-panel{min-width:0}
.custom-stack{display:block;margin-bottom:10px}
.custom-stack span{display:block;color:var(--muted);font-size:13px;margin:0 0 6px}
.custom-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.custom-field-row small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.measurement-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.custom-live-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;border:1px solid var(--brand-line);border-radius:20px;padding:14px;background:var(--brand-soft-2)}
.custom-live-summary div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(235,199,220,.75);padding-bottom:8px}
.custom-live-summary b{color:var(--ink)}
.custom-live-summary span{text-align:right;color:var(--muted);overflow-wrap:anywhere}
.custom-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}
.part-color-sections{display:grid;gap:14px;margin:10px 0 16px}
.part-color-card{border:1px solid var(--brand-line);border-radius:18px;background:#fff;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.05)}
.part-color-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;color:var(--ink)}
.part-color-head b{font-weight:900}.part-color-head span{color:var(--muted);font-size:12px;font-weight:800}
.part-slot-row{border-top:1px solid #f1f5f9;padding-top:10px;margin-top:10px}
.custom-color-picker{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center}
.custom-color-picker .field{margin:0}
.custom-color-swatch{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 3px #fff,0 8px 18px rgba(15,23,42,.08);background:#fff}

/* Utility/debug */
.debug,.readable-json{font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;color:#334155;overflow:auto}

/* Motion */
@keyframes dofFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dofShimmer{to{background-position:-240% 0}}
@keyframes dofSpin{to{transform:rotate(360deg)}}
@keyframes dofPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.hero,.panel,.card,.side,.order-card,.color-product,.loading-panel{animation:dofFadeUp .38s ease both}
.grid .card:nth-child(2){animation-delay:.035s}.grid .card:nth-child(3){animation-delay:.07s}.grid .card:nth-child(4){animation-delay:.105s}.grid .card:nth-child(5){animation-delay:.14s}.grid .card:nth-child(6){animation-delay:.175s}

/* Responsive */
@media(max-width:1020px){
  .hero{grid-template-columns:1fr;margin:16px 20px;padding:30px}
  .layout{grid-template-columns:1fr}.side{position:static}
  .grid{grid-template-columns:1fr 1fr}
  .product-page,.auth-layout,.account-grid,.color-layout{grid-template-columns:1fr}
  .sticky-buy{position:static}
  .custom-workbench{grid-template-columns:1fr}.custom-preview-panel{position:static}
}
@media(max-width:760px){
  .nav{flex-wrap:wrap;gap:10px;padding:10px 14px}.brand img{width:146px}.search{order:5;flex-basis:100%;min-width:0}
  .navlink{font-size:14px}.hero{padding:24px;border-radius:26px}.hero-logo-card{min-height:220px}.hero-logo-card img{width:min(100%,320px)}
  .layout,.product-page,.auth-layout,.color-layout{padding:0 14px;margin-bottom:50px}
  .section-head{display:block}.grid{grid-template-columns:1fr;gap:16px}
  .gallery{grid-template-columns:1fr}.thumbs{flex-direction:row;overflow:auto;max-height:none}.thumbs img{width:76px;height:76px;flex:0 0 76px}.mainimg{border-radius:22px;max-height:none}
  .buy-actions{grid-template-columns:1fr}.buy-actions .btn.ghost{grid-column:auto}
  .cart-row{grid-template-columns:64px minmax(0,1fr);align-items:start}.cart-row img{width:64px;height:64px}.cart-row input,.cart-row>b{grid-column:2}.cart-row>b{text-align:left}
  .color-product{grid-template-columns:1fr}.color-product img{width:100%;height:auto;max-height:320px}.color-row{grid-template-columns:1fr}
  .custom-modal-shell{padding:10px}.custom-modal{border-radius:20px;padding:16px}.custom-modal-head h2{font-size:28px}.custom-field-row,.measurement-grid,.custom-live-summary{grid-template-columns:1fr}.custom-modal-actions{flex-direction:column}.custom-modal-actions .btn{width:100%}.custom-live-summary div{display:block}.custom-live-summary span{text-align:left;display:block;margin-top:4px}
}
@media(max-width:520px){
  .brand img{width:132px}.navlink[href="orders.html"],.navlink[href="account.html"],.navlink[href="color-selection.html"]{display:none}
  .panel{padding:18px;border-radius:22px}.card-actions{grid-template-columns:1fr}.hero h1{letter-spacing:-.04em}.spec{grid-template-columns:1fr}.spec span{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .image-reveal{opacity:1!important;filter:none!important}
}

/* v19.9.8 loading resilience */
.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand-line);border-radius:999px;background:#fff;color:var(--brand);font-weight:900;padding:9px 14px;box-shadow:var(--shadow-sm)}
.status-pill.ok{color:#047857;border-color:#bbf7d0;background:#f0fdf4}
.buffer-panel{position:relative;overflow:hidden;border:1px solid var(--brand-line);border-radius:26px;background:linear-gradient(135deg,#fff,#fff7fb 60%,#fff);padding:26px;text-align:center;color:var(--muted);box-shadow:var(--shadow-sm)}
.buffer-panel b{display:block;color:var(--brand);font-size:17px;margin:10px 0 6px}.buffer-panel p{margin:0 auto;max-width:560px}
.dof-loader{width:42px;height:42px;margin:0 auto;position:relative;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--brand-line),0 10px 28px rgba(193,53,132,.14)}
.dof-loader.large{width:54px;height:54px}.dof-loader::before{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid rgba(193,53,132,.14);border-top-color:var(--brand);animation:dofSpin .85s linear infinite}.dof-loader span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(193,53,132,.10)}.dof-loader span:nth-child(1){transform:translate(0,-18px)}.dof-loader span:nth-child(2){transform:translate(16px,9px);background:#e879b9}.dof-loader span:nth-child(3){transform:translate(-16px,9px);background:#f9a8d4}
.buffer-bar{height:8px;max-width:420px;margin:18px auto 0;border-radius:999px;background:#f7ddea;overflow:hidden}.buffer-bar span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#f9a8d4);animation:dofBuffer 1.35s ease-in-out infinite}
.error-state{border:1px solid #fecdd3;background:linear-gradient(135deg,#fff,#fff1f5);border-radius:26px;padding:24px;text-align:center;color:#7f1d1d;box-shadow:var(--shadow-sm)}.error-state h3{margin:8px 0 8px;color:#9f1239}.error-state p{color:#7f1d1d;max-width:720px;margin:0 auto 16px}.error-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin:0 auto;background:#ffe4e6;color:#be123c;font-weight:1000}.error-state details{margin:14px auto;max-width:760px;text-align:left;background:#fff;border:1px solid #fecdd3;border-radius:16px;padding:12px}.error-state summary{cursor:pointer;font-weight:900;color:#9f1239}.error-state pre{white-space:pre-wrap;overflow:auto;font-size:12px;color:#475569;max-height:220px}.account-nav-link{font-weight:950!important;color:var(--brand)!important;background:var(--brand-soft-2);padding:9px 12px!important;border:1px solid var(--brand-line)}
@keyframes dofBuffer{0%{transform:translateX(-105%)}55%{transform:translateX(85%)}100%{transform:translateX(240%)}}
@media(max-width:520px){#accountNav{display:inline-flex}.account-nav-link{display:inline-flex!important}.nav .cart-link{padding:9px 12px}.status-pill{white-space:normal;border-radius:18px;text-align:left}.buffer-panel,.error-state{padding:20px;border-radius:22px}}
@media(prefers-reduced-motion:reduce){.buffer-bar span,.dof-loader::before,.preview-loading::before{animation:none!important}.buffer-bar span{width:100%}.preview-progress-bar span{transition:none}}

/* v19.9.8 preview payload fallback */
.custom-preview-fallback-wrap{display:grid;gap:12px;align-content:start}
.custom-preview-fallback-wrap p{margin:0;border:1px solid var(--line);background:#fff7fb;color:var(--muted);border-radius:16px;padding:12px 14px;font-size:13px;line-height:1.45}

/* v19.9.9 preview availability fallback */
.preview-option-note{
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid var(--line, #fbcfe8);
  border-radius:14px;
  background:#fff7fb;
  color:var(--muted, #64748b);
  font-size:13px;
  line-height:1.45;
}

@media(max-width:640px){.preview-toolbar{grid-template-columns:1fr}.preview-render-mode{width:100%}}

/* v20.0.0 buyer speed + premium loading polish */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--dock-bg:rgba(255,255,255,.86)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -18%,rgba(193,53,132,.08),transparent 28%);z-index:-1}.topbar{box-shadow:0 6px 24px rgba(15,23,42,.035)}
.global-loading-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;overflow:hidden;opacity:0;pointer-events:none;background:transparent}.global-loading-bar span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--brand),#f9a8d4,var(--brand),transparent);transform:translateX(-120%)}.global-loading-bar.is-active{opacity:1}.global-loading-bar.is-active span{animation:dofTopLoad 1.05s var(--ease-out) infinite}.global-loading-bar.is-complete{opacity:1}.global-loading-bar.is-complete span{width:100%;transform:translateX(0);animation:none;background:linear-gradient(90deg,var(--brand),#f9a8d4)}
.bottom-status-dock{position:fixed;left:50%;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;max-width:min(92vw,520px);padding:11px 15px;border:1px solid rgba(235,199,220,.72);border-radius:999px;background:var(--dock-bg);box-shadow:0 18px 48px rgba(15,23,42,.16);backdrop-filter:blur(18px);color:#334155;font-size:13px;font-weight:850;opacity:0;pointer-events:none;transform:translate(-50%,16px) scale(.98);transition:opacity .18s ease,transform .18s ease}.bottom-status-dock.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}.bottom-status-dock .dock-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(193,53,132,.12);flex:0 0 auto}.bottom-status-dock[data-state="loading"] .dock-dot{animation:dofPulse .9s ease-in-out infinite}.bottom-status-dock[data-state="ok"] .dock-dot{background:#059669;box-shadow:0 0 0 5px rgba(5,150,105,.12)}.bottom-status-dock[data-state="warn"] .dock-dot{background:#d97706;box-shadow:0 0 0 5px rgba(217,119,6,.12)}.bottom-status-dock[data-state="error"] .dock-dot{background:#e11d48;box-shadow:0 0 0 5px rgba(225,29,72,.12)}
@keyframes dofTopLoad{0%{transform:translateX(-120%)}55%{transform:translateX(88%)}100%{transform:translateX(220%)}}
.nav{transition:min-height .18s ease,padding .18s ease}.brand img{transition:transform .18s ease,filter .18s ease}.brand:hover img{transform:translateY(-1px);filter:drop-shadow(0 12px 22px rgba(193,53,132,.14))}.search{box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.cart-link{min-height:40px}
.hero{animation-duration:.46s}.hero h1{font-weight:980}.hero-logo-card{position:relative}.hero-logo-card::after{content:"";position:absolute;inset:18px;border-radius:24px;border:1px solid rgba(235,199,220,.62);pointer-events:none}.side,.panel,.card{will-change:transform}.card{contain:layout paint;background:linear-gradient(180deg,#fff,#fff)}.card:hover{transform:translate3d(0,-3px,0)}.imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(255,255,255,.5));pointer-events:none;opacity:.45}.imgwrap img[src*="dof-logo-brand"]{max-width:74%;max-height:74%;margin:auto}.custom-badge{background:#fff1f7;color:#be185d;border-color:#fbcfe8}.card .code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .price{align-items:center}.card-actions .btn{min-width:0}.status-pill.warn{color:#b45309;border-color:#fed7aa;background:#fff7ed}.promo-skeleton .imgwrap{padding:22px;text-align:center}.promo-skeleton .imgwrap span,.skeleton-promo{position:relative;z-index:1;color:var(--brand);font-weight:950;font-size:15px;line-height:1.25;background:rgba(255,255,255,.78);border:1px solid var(--brand-line);border-radius:999px;padding:9px 12px;box-shadow:0 10px 22px rgba(193,53,132,.08)}
.loading-panel,.buffer-panel,.error-state{animation:dofFadeUp .22s var(--ease-out) both}.skeleton-line,.skeleton-box,.skeleton-actions span{background-image:linear-gradient(90deg,#f9eaf3 0%,#fff 38%,#f6dbe9 64%,#f9eaf3 100%)}.buffer-panel{min-height:154px;display:grid;place-items:center}.buffer-panel .dof-loader{margin-bottom:2px}.inline-progress{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;border:1px solid var(--brand-line);background:linear-gradient(135deg,#fff,#fff8fc);border-radius:18px;padding:12px 14px;color:var(--brand-ink);font-weight:900}.inline-progress div{grid-column:1/-1;height:7px;background:#f7ddea;border-radius:999px;overflow:hidden}.inline-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#f9a8d4);transition:width .18s ease}.toast{animation:dofFadeUp .18s ease both}.error-state details:not([open]) pre{display:none}
.product-page{animation:dofFadeUp .22s var(--ease-out) both}.gallery{min-width:0}.mainimg{background:linear-gradient(135deg,#fff,#fff8fc);max-height:620px}.thumbs img{background:#fff8fc}.sticky-buy{box-shadow:0 18px 54px rgba(15,23,42,.07)}.custom-product-callout{box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)}.buy-actions .btn{min-height:48px}.cart-row{transition:transform .16s ease,box-shadow .16s ease}.cart-row:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(15,23,42,.06)}.cart-row input{background:#fff}.panel-lite{box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.custom-modal-backdrop{animation:dofFadeIn .16s ease both}.custom-modal{animation:dofModalIn .22s var(--ease-out) both}.custom-preview-panel{background:linear-gradient(135deg,#fff,#fff8fc)}.dst-preview-canvas{min-height:360px}.preview-loading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-content:center}.preview-loading .preview-progress-bar{grid-column:1/-1;width:min(360px,82%);justify-self:center}.preview-quality-note{box-shadow:0 10px 22px rgba(15,23,42,.08)}.part-color-card{transition:border-color .16s ease,box-shadow .16s ease}.part-color-card:focus-within{border-color:var(--brand-line);box-shadow:0 12px 30px rgba(193,53,132,.08)}.custom-color-picker select{min-width:0}.custom-color-swatch{transition:background .14s ease,transform .14s ease}.custom-color-picker:focus-within .custom-color-swatch{transform:scale(1.04)}
@keyframes dofFadeIn{from{opacity:0}to{opacity:1}}@keyframes dofModalIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.bottom-status-dock{bottom:12px;border-radius:20px;max-width:calc(100vw - 24px);font-size:12px}.hero{margin:14px;padding:22px}.hero h1{font-size:34px}.hero p{font-size:15px}.side{border-radius:22px}.mainimg{aspect-ratio:1/1}.custom-modal{max-height:94vh}.custom-preview-panel{padding:12px}.preview-loading{inset:50px 12px 70px}.dst-preview-canvas{min-height:310px}.part-color-card{padding:12px}.card:hover{transform:none}}
@media(max-width:520px){.nav{min-height:auto}.brand img{width:138px}.search{padding:11px 14px}.hero-logo-card{display:none}.cart-link{font-size:13px}.bottom-status-dock{left:12px;right:12px;transform:translateY(16px) scale(.98);max-width:none}.bottom-status-dock.is-visible{transform:translateY(0) scale(1)}.grid{gap:14px}.card{border-radius:22px}.cardbody{padding:14px}.sell{font-size:19px}.title{font-size:16px}.buffer-panel{padding:20px}.custom-modal-head{gap:10px}.custom-modal-head h2{font-size:24px}.preview-toolbar{gap:8px}.custom-preview-title{display:block}.custom-preview-title span{display:inline-flex;margin-top:8px}.bottom-status-dock{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){.global-loading-bar span,.bottom-status-dock .dock-dot,.hero,.panel,.card,.side,.order-card,.color-product,.loading-panel,.buffer-panel,.custom-modal,.custom-modal-backdrop{animation:none!important}.card,.btn,.imgwrap img,.cart-row,.part-color-card,.custom-color-swatch{transition:none!important}.global-loading-bar{display:none}.bottom-status-dock{transition:none}}

/* v20.0.1 premium fast micro-animations: all one-shot UI motion <= 280ms */
:root{
  --motion-fast:120ms;
  --motion-ui:180ms;
  --motion-modal:240ms;
  --motion-max:280ms;
  --ease-premium:cubic-bezier(.2,.8,.2,1);
}

.topbar{transition:box-shadow var(--motion-ui) var(--ease-premium),background-color var(--motion-ui) var(--ease-premium),border-color var(--motion-ui) var(--ease-premium)}
.topbar.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(15,23,42,.07);border-bottom-color:rgba(235,199,220,.72)}
.navlink,.account-pill,.search,.field,.chip,.mini-chip,.btn,.icon-btn,.text-btn{transition-duration:var(--motion-ui)!important;transition-timing-function:var(--ease-premium)!important}
.btn{transition:transform var(--motion-fast) var(--ease-premium),box-shadow var(--motion-ui) var(--ease-premium),background var(--motion-ui) var(--ease-premium),border-color var(--motion-ui) var(--ease-premium),opacity var(--motion-ui) var(--ease-premium)!important}
.btn:active:not(:disabled),.icon-btn:active{transform:translateY(0) scale(.985)!important;transition-duration:110ms!important}

.card,.cart-row,.order-card,.panel,.panel-lite,.color-product,.part-color-card{transition:transform var(--motion-ui) var(--ease-premium),box-shadow var(--motion-ui) var(--ease-premium),border-color var(--motion-ui) var(--ease-premium),opacity var(--motion-ui) var(--ease-premium)!important}
.card:hover{transform:translate3d(0,-2px,0)!important}
.imgwrap img{transition:transform 220ms var(--ease-premium),opacity 220ms var(--ease-premium),filter 220ms var(--ease-premium)!important}
.card:hover .imgwrap img{transform:scale(1.025)!important}
.image-reveal.is-loaded{transition:opacity 220ms var(--ease-premium),filter 220ms var(--ease-premium)!important}

.animate-in{opacity:0;transform:translate3d(0,8px,0);transition:opacity var(--motion-ui) var(--ease-premium),transform var(--motion-ui) var(--ease-premium);transition-delay:var(--entry-delay,0ms)}
.animate-in.is-visible{opacity:1;transform:translate3d(0,0,0)}
.product-card.animate-in{transform:translate3d(0,9px,0) scale(.992)}
.product-card.animate-in.is-visible{transform:translate3d(0,0,0) scale(1)}

.cart-count.is-pop,.soft-pop{animation:dofSoftPop 160ms var(--ease-premium) both}
.custom-color-swatch.soft-pop{animation:dofSwatchPop 150ms var(--ease-premium) both}
@keyframes dofSoftPop{0%{transform:scale(.88);opacity:.72}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes dofSwatchPop{0%{transform:scale(.92)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

.loading-panel,.buffer-panel,.error-state,.toast,.product-page{animation:dofFadeUp var(--motion-ui) var(--ease-premium) both!important}
.hero{animation:dofFadeUp var(--motion-modal) var(--ease-premium) both!important}
.skeleton-line,.skeleton-box,.skeleton-actions span{animation-duration:1.05s!important;opacity:.92}
.bottom-status-dock{transition:opacity 220ms var(--ease-premium),transform 220ms var(--ease-premium)!important}
.global-loading-bar.is-complete span{transition:transform var(--motion-fast) var(--ease-premium),width var(--motion-fast) var(--ease-premium)}

.custom-modal-backdrop{animation:dofFadeIn 180ms var(--ease-premium) both!important}
.custom-modal{animation:dofModalIn var(--motion-modal) var(--ease-premium) both!important}
.custom-modal-shell{opacity:1}
.custom-preview-panel.is-switching{transform:translate3d(0,-1px,0);box-shadow:0 18px 46px rgba(193,53,132,.13)}
.preview-loading{display:grid!important;opacity:1;visibility:visible;transform:scale(1);transition:opacity 220ms var(--ease-premium),transform 220ms var(--ease-premium),visibility 0ms linear 0ms!important}
.preview-loading.is-hidden{display:grid!important;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.985);transition:opacity 220ms var(--ease-premium),transform 220ms var(--ease-premium),visibility 0ms linear 220ms!important}
.dst-preview-canvas{transition:opacity 240ms var(--ease-premium),filter 240ms var(--ease-premium),transform 240ms var(--ease-premium)!important}
.dst-preview-canvas.is-rendering{filter:none;opacity:.88}
.dst-preview-canvas.preview-ready{animation:dofPreviewReady 240ms var(--ease-premium) both}
@keyframes dofPreviewReady{0%{opacity:.88;filter:none;transform:scale(.998)}100%{opacity:1;filter:none;transform:scale(1)}}
.preview-progress-bar span,.inline-progress i{transition:width var(--motion-ui) var(--ease-premium)!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .animate-in{opacity:1!important;transform:none!important;transition:none!important}
  .preview-loading.is-hidden{display:none!important}
}

/* v20.0.3 multi-provider Firebase Auth */
.auth-layout-wide{max-width:1120px;grid-template-columns:1.02fr .98fr}
.auth-panel-main .provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.auth-panel-main .provider-btn{margin-top:0;min-height:48px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,filter .18s ease}
.auth-panel-main .provider-btn.is-loading,.auth-stack-panel .btn.is-loading{animation:dofProviderLoad .26s ease both}
.auth-message{margin-top:16px}
.auth-stack-panel{min-height:100%}
.auth-tabs{display:inline-flex;gap:6px;padding:5px;border:1px solid var(--brand-line);background:var(--brand-soft-2);border-radius:999px;margin-bottom:14px}
.auth-tab{border-radius:999px;padding:9px 14px;color:var(--muted)}
.auth-tab.is-active{background:#fff;color:var(--brand);box-shadow:0 8px 18px rgba(193,53,132,.1)}
.auth-pane{display:none;animation:dofFadeUp .24s ease both}
.auth-pane.is-active{display:block}
.otp-form{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.phone-recaptcha{min-height:1px;margin-top:10px}
.provider-btn[disabled]#instagramBtn{opacity:.58;background:#fff;color:var(--muted);border:1px dashed var(--brand-line);box-shadow:none}
@keyframes dofProviderLoad{from{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.01)}to{transform:translateY(0) scale(1)}}
@media(max-width:760px){.auth-panel-main .provider-grid{grid-template-columns:1fr}.auth-layout-wide{grid-template-columns:1fr}.auth-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.auth-tab{width:100%;text-align:center}}

/* v20.0.4 secure onboarding / verification */
.onboarding-layout{max-width:1180px;margin:34px auto;padding:0 18px;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:18px;align-items:start}
.onboarding-hero{position:sticky;top:92px}
.onboarding-form{display:grid;gap:18px}
.onboarding-step{position:relative;overflow:hidden}
.step-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:rgba(193,53,132,.1);color:#9d1f65;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;margin-bottom:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid label,.onboarding-step label{font-size:13px;font-weight:700;color:#3b2c35;display:grid;gap:6px}
.checkline{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px;margin:10px 0;font-weight:700}
.checkline input{width:18px;height:18px;margin-top:2px;accent-color:#C13584}
.verification-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.verification-stack.compact{margin:8px 0 12px}
.verification-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;background:#fff2d7;color:#7a4a00;border:1px solid rgba(122,74,0,.16)}
.verification-pill.ok{background:#eafaf1;color:#167044;border-color:rgba(22,112,68,.18)}
.verification-pill.warn{background:#fff4e8;color:#985100;border-color:rgba(152,81,0,.18)}
.verification-card{border:1px solid rgba(193,53,132,.14);border-radius:18px;padding:14px;margin:12px 0;background:rgba(255,255,255,.72)}
.verify-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.checkout-warning{margin:12px 0}
.legal-footer{display:flex;justify-content:center;gap:10px;align-items:center;padding:20px;color:#7b6571;font-size:13px}
.legal-footer a{color:#9d1f65;text-decoration:none;font-weight:800}
.legal-page{max-width:920px;margin:34px auto;padding:28px;line-height:1.65}
.legal-page h1{margin-top:4px}.legal-page h2{margin-top:24px}.legal-page p{color:#604b56}
@media (max-width:860px){.onboarding-layout{grid-template-columns:1fr;margin-top:18px}.onboarding-hero{position:relative;top:auto}.form-grid{grid-template-columns:1fr}.verify-actions{display:grid}.verify-actions .btn{width:100%}}

/* v20.0.5 dedicated signup / profile / email verification routes */
.signin-only-layout .signup-callout{margin-top:20px;border:1px solid rgba(193,53,132,.16);border-radius:22px;background:linear-gradient(135deg,#fff,#fff7fb);padding:16px}
.signin-only-layout .signup-callout p{margin:6px 0 0}.signin-only-layout .auth-pane h2{margin-top:0}.signin-only-layout .auth-pane a{color:#9d1f65;font-weight:900}
.signup-layout .onboarding-hero h1{font-size:clamp(30px,4vw,43px);line-height:1.08;margin:8px 0 12px;color:var(--ink);letter-spacing:-.05em}
.signup-layout .onboarding-step h2{margin:4px 0 14px;letter-spacing:-.03em;color:var(--ink)}
.signup-layout textarea.field{resize:vertical;min-height:112px}.signup-actions{align-items:center}.form-grid .span-2{grid-column:1/-1}
.verify-email-layout{grid-template-columns:minmax(0,760px);justify-content:center}.verify-email-card{max-width:760px}.verify-email-card code{font-size:12px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:8px;padding:2px 5px;color:#8b1f63}
@media(max-width:760px){.signin-only-layout .signup-callout{padding:14px}.signup-actions .btn{width:100%}.verify-email-layout{grid-template-columns:1fr}}

/* v20.0.7 premium import loader integration */
.import-loader-stage{position:relative;width:100%;margin:0 0 18px;color:#444}.import-loader-preview{position:relative;overflow:hidden;border:1px solid rgba(193,53,132,.10);border-radius:34px;background:radial-gradient(circle at 50% 48%,rgba(252,231,243,.72),transparent 36%),linear-gradient(180deg,#fff 0%,#fff8fc 100%);box-shadow:0 30px 90px rgba(193,53,132,.13);padding:clamp(24px,4vw,42px) 14px}.import-loader-shine{position:absolute;inset:-42%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.68) 48%,transparent 58%);transform:translateX(-52%);animation:dofImportStageSweep 4.8s ease-in-out infinite;pointer-events:none}.import-loader-visual{position:relative;z-index:1;width:min(860px,100%);min-height:224px;margin:auto;display:grid;grid-template-columns:150px minmax(54px,90px) minmax(0,1fr);align-items:center}.import-loader-logo-shell{position:relative;width:140px;height:140px;display:grid;place-items:center}.import-loader-halo{position:absolute;inset:-18px;border-radius:999px;background:#fce7f3;opacity:.54;filter:blur(.1px)}.import-loader-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 24px rgba(193,53,132,.12))}.import-loader-ring-base,.import-loader-ring-progress,.import-loader-ring-gold{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}.import-loader-ring-base{stroke:#fce7f3;stroke-width:11}.import-loader-ring-progress{stroke:url(#unused);stroke:#c13584;stroke-width:11;stroke-dasharray:358;stroke-dashoffset:86;animation:dofImportRing 1.28s cubic-bezier(.22,.9,.3,1) infinite}.import-loader-ring-gold{stroke:#d4af37;stroke-width:2;stroke-dasharray:302;stroke-dashoffset:302;opacity:0}.import-loader-orbit{position:absolute;left:50%;top:7px;width:7px;height:7px;border-radius:999px;background:#d4af37;box-shadow:0 0 0 6px rgba(212,175,55,.12);transform:translateX(-50%);opacity:.8;animation:dofImportOrbit 1.9s linear infinite}.import-loader-logo-card{position:relative;width:112px;height:112px;border-radius:999px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 46%,#fff 0 55%,rgba(252,231,243,.72) 100%);box-shadow:inset 0 0 0 1px rgba(235,199,220,.82),0 18px 42px rgba(193,53,132,.14)}.import-loader-logo-card::before{content:"";position:absolute;inset:8px;border-radius:inherit;border:1.3px solid rgba(212,175,55,.78);box-shadow:inset 0 0 0 1px rgba(255,243,191,.72),0 0 24px rgba(212,175,55,.18);opacity:.88;transform:scale(.98)}.import-loader-logo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,246,188,.04) 42%,rgba(255,246,188,.72) 50%,rgba(255,255,255,.62) 54%,transparent 66%);transform:translateX(-130%);opacity:.78;animation:dofImportLogoShine 2.8s ease-in-out infinite;pointer-events:none}.import-loader-logo-card img{width:76px;height:auto;display:block;position:relative;z-index:1;filter:drop-shadow(0 0 .9px #d4af37) drop-shadow(0 10px 18px rgba(193,53,132,.10));animation:dofImportLogoIn .72s cubic-bezier(.22,.9,.3,1) both}.import-loader-logo-fallback{display:none;position:relative;z-index:1;align-items:center;justify-content:center;color:#c13584;font-size:36px;font-weight:1000;letter-spacing:-.08em}.import-loader-line{height:2px;background:linear-gradient(90deg,rgba(193,53,132,.76),#c13584,rgba(212,175,55,.88));border-radius:999px;transform-origin:left center;transform:scaleX(.16);box-shadow:0 0 16px rgba(193,53,132,.12);animation:dofImportLine 1.65s cubic-bezier(.22,.9,.3,1) infinite}.import-loader-card{min-height:118px;border:1px solid rgba(193,53,132,.12);border-radius:0 22px 22px 0;background:rgba(255,255,255,.94);box-shadow:0 18px 48px rgba(15,23,42,.06);display:flex;flex-direction:column;justify-content:center;padding:22px 28px;text-align:left;overflow:hidden}.import-loader-kicker{margin:0 0 10px;color:#c13584;font-size:11px;line-height:1;font-weight:850;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}.import-loader-message{margin:0;color:#c13584;font-size:clamp(18px,2vw,24px);line-height:1.2;font-weight:900;letter-spacing:-.035em}.import-loader-helper{margin:8px 0 0;color:#856476;font-size:12px;font-weight:650;letter-spacing:.01em}.import-loader-stage.is-complete .import-loader-ring-progress{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .42s ease}.import-loader-stage.is-complete .import-loader-ring-gold{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .62s ease .08s,opacity .2s ease}.import-loader-stage.is-complete .import-loader-orbit{opacity:0;animation:none}.import-loader-stage.is-complete .import-loader-line{animation:none;transform:scaleX(1);transition:transform .48s cubic-bezier(.22,.9,.3,1)}.import-loader-stage.is-complete .import-loader-card{animation:dofImportCardDone .5s cubic-bezier(.22,.9,.3,1) both}.import-loader-stage.is-error .import-loader-ring-progress{stroke:#be123c;animation:none}.import-loader-stage.is-error .import-loader-message{color:#be123c}.import-loader-stage.is-reduced-motion .import-loader-shine,.import-loader-stage.is-reduced-motion .import-loader-ring-progress,.import-loader-stage.is-reduced-motion .import-loader-orbit,.import-loader-stage.is-reduced-motion .import-loader-logo-card::after,.import-loader-stage.is-reduced-motion .import-loader-line,.import-loader-stage.is-reduced-motion .import-loader-logo-card img{animation:none!important}.import-loader-stage.is-reduced-motion .import-loader-line{transform:scaleX(1)}.import-loader-stage.is-reduced-motion .import-loader-ring-progress{stroke-dashoffset:0}@keyframes dofImportStageSweep{0%,42%{transform:translateX(-52%) rotate(.001deg);opacity:0}58%{opacity:1}100%{transform:translateX(52%) rotate(.001deg);opacity:0}}@keyframes dofImportRing{0%{stroke-dashoffset:342;transform:rotate(-90deg)}52%{stroke-dashoffset:86}100%{stroke-dashoffset:342;transform:rotate(270deg)}}@keyframes dofImportOrbit{to{transform:translateX(-50%) rotate(360deg);transform-origin:50% 63px}}@keyframes dofImportLogoShine{0%,38%{transform:translateX(-130%);opacity:0}58%{opacity:.78}100%{transform:translateX(130%);opacity:0}}@keyframes dofImportLogoIn{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dofImportLine{0%{transform:scaleX(.14);opacity:.5}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.38);opacity:.7}}@keyframes dofImportCardDone{0%{transform:translateY(0) scale(1)}48%{transform:translateY(-2px) scale(1.012)}100%{transform:translateY(0) scale(1)}}@media(max-width:720px){.import-loader-preview{border-radius:26px;padding:24px 8px 30px}.import-loader-visual{min-height:auto;grid-template-columns:1fr;gap:13px;place-items:center}.import-loader-logo-shell{width:126px;height:126px}.import-loader-logo-card{width:104px;height:104px}.import-loader-logo-card img{width:70px}.import-loader-line{width:min(240px,72vw);transform-origin:center}.import-loader-card{width:min(100%,420px);min-height:auto;border-radius:22px;text-align:center;padding:18px 16px}.import-loader-kicker{font-size:10px;letter-spacing:.15em}.import-loader-message{font-size:18px;line-height:1.25}.import-loader-helper{font-size:11.5px}}@media(prefers-reduced-motion:reduce){.import-loader-shine,.import-loader-ring-progress,.import-loader-orbit,.import-loader-logo-card::after,.import-loader-line,.import-loader-logo-card img{animation:none!important}.import-loader-line{transform:scaleX(1)}.import-loader-ring-progress{stroke-dashoffset:0}.import-loader-stage.is-complete .import-loader-card{animation:none}}

/* v20.0.7.2 premium import loader polish: prototype-matched SVG animation and fast handoff */
.catalog-import-slot{margin:0 0 18px;display:block!important}.import-loader-stage{position:relative;width:100%;color:#444}.import-loader-preview{width:100%;display:grid;place-items:center;padding:clamp(24px,4vw,42px) 10px;border:1px solid rgba(193,53,132,.09);border-radius:34px;background:rgba(255,255,255,.88);box-shadow:0 30px 90px rgba(193,53,132,.13);overflow:hidden;position:relative}.import-loader-preview::before{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.65) 48%,transparent 58%);transform:translateX(-45%);animation:dofImportStageSweepV2 5.2s ease-in-out infinite;pointer-events:none}.import-loader-svg{width:min(860px,100%);height:auto;overflow:visible;position:relative;z-index:1;display:block}.import-loader-card-bg{fill:rgba(255,255,255,.94);opacity:0}.import-loader-frame-path{fill:none;stroke:url(#catalogFrameGradient);stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1426;stroke-dashoffset:1180;animation:dofImportFrameDrawV2 1.45s cubic-bezier(.22,.9,.3,1) infinite}.import-loader-svg-halo{fill:#fce7f3;opacity:.54}.import-loader-svg-base{fill:none;stroke:#fce7f3;stroke-width:11}.import-loader-svg-progress{fill:none;stroke:url(#catalogRingGradient);stroke-width:11;stroke-linecap:round;filter:url(#catalogPinkGlow);stroke-dasharray:434;stroke-dashoffset:314;animation:dofImportRingV2 1.65s cubic-bezier(.22,.9,.3,1) infinite}.import-loader-svg-gold{fill:none;stroke:url(#catalogGoldGradient);stroke-width:2;stroke-linecap:round;filter:url(#catalogGoldGlow);opacity:0;stroke-dasharray:371;stroke-dashoffset:371}.import-loader-svg-dot{fill:#d4af37;opacity:.9;filter:url(#catalogGoldGlow);animation:dofImportDotV2 1.9s linear infinite;transform-origin:154px 137px}.import-loader-logo-shell{width:124px;height:124px;position:relative;display:grid;place-items:center;border-radius:999px;overflow:hidden;background:radial-gradient(circle at 50% 46%,#fff 0 55%,rgba(252,231,243,.72) 100%)}.import-loader-logo-shell::before{content:"";position:absolute;inset:8px;border-radius:inherit;border:1.3px solid rgba(212,175,55,.78);box-shadow:inset 0 0 0 1px rgba(255,243,191,.72),0 0 24px rgba(212,175,55,.18);opacity:.9;transform:scale(.98)}.import-loader-logo-shell::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,246,188,.02) 42%,rgba(255,246,188,.72) 50%,rgba(255,255,255,.62) 54%,transparent 66%);transform:translateX(-130%) rotate(.001deg);opacity:.8;animation:dofImportLogoShineV2 2.6s ease-in-out infinite;pointer-events:none}.import-loader-brand-logo{width:82px;height:auto;display:block;opacity:1;position:relative;z-index:1;filter:drop-shadow(0 0 .9px #d4af37) drop-shadow(0 0 1.7px #d4af37) drop-shadow(0 10px 18px rgba(193,53,132,.10));animation:dofImportLogoInV2 .72s cubic-bezier(.22,.9,.3,1) both}.import-loader-logo-fallback{display:none;position:relative;z-index:1;align-items:center;justify-content:center;color:#c13584;font-size:38px;font-weight:1000;letter-spacing:-.08em}.import-loader-card-copy{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:0 26px;text-align:left}.import-loader-kicker{margin:0 0 10px;color:#c13584;font-size:11px;line-height:1;font-weight:850;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}.import-loader-message{margin:0;color:#c13584;font-size:clamp(18px,2vw,24px);line-height:1.2;font-weight:900;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.import-loader-helper{margin:7px 0 0;color:#856476;font-size:12px;font-weight:620;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.import-loader-stage.is-complete .import-loader-frame-path{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .62s cubic-bezier(.22,.9,.3,1)}.import-loader-stage.is-complete .import-loader-card-bg{opacity:1;transition:opacity .28s ease}.import-loader-stage.is-complete .import-loader-svg-progress{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .42s ease}.import-loader-stage.is-complete .import-loader-svg-gold{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .64s ease .08s,opacity .2s ease}.import-loader-stage.is-complete .import-loader-svg-dot{opacity:0;animation:none;transition:opacity .18s ease}.import-loader-stage.is-complete .import-loader-card-copy{animation:dofImportCardDoneV2 .5s cubic-bezier(.22,.9,.3,1) both}.import-loader-stage.is-error .import-loader-svg-progress{stroke:#be123c;animation:none}.import-loader-stage.is-error .import-loader-message{color:#be123c}.import-loader-stage.is-reduced-motion .import-loader-preview::before,.import-loader-stage.is-reduced-motion .import-loader-frame-path,.import-loader-stage.is-reduced-motion .import-loader-svg-progress,.import-loader-stage.is-reduced-motion .import-loader-svg-dot,.import-loader-stage.is-reduced-motion .import-loader-logo-shell::after,.import-loader-stage.is-reduced-motion .import-loader-brand-logo{animation:none!important}.import-loader-stage.is-reduced-motion .import-loader-frame-path,.import-loader-stage.is-reduced-motion .import-loader-svg-progress,.import-loader-stage.is-reduced-motion .import-loader-svg-gold{stroke-dashoffset:0}.import-loader-stage.is-reduced-motion .import-loader-svg-gold{opacity:1}@keyframes dofImportStageSweepV2{0%,42%{transform:translateX(-52%) rotate(.001deg);opacity:0}58%{opacity:1}100%{transform:translateX(52%) rotate(.001deg);opacity:0}}@keyframes dofImportRingV2{0%{stroke-dashoffset:414}52%{stroke-dashoffset:98}100%{stroke-dashoffset:414}}@keyframes dofImportDotV2{to{transform:rotate(360deg)}}@keyframes dofImportFrameDrawV2{0%{stroke-dashoffset:1426;opacity:.55}56%{stroke-dashoffset:520;opacity:1}100%{stroke-dashoffset:980;opacity:.82}}@keyframes dofImportLogoShineV2{0%,38%{transform:translateX(-130%) rotate(.001deg);opacity:0}58%{opacity:.78}100%{transform:translateX(130%) rotate(.001deg);opacity:0}}@keyframes dofImportLogoInV2{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dofImportCardDoneV2{0%{transform:translateY(0) scale(1)}48%{transform:translateY(-2px) scale(1.012)}100%{transform:translateY(0) scale(1)}}@media(max-width:640px){.import-loader-preview{border-radius:26px;padding:24px 8px 30px}.import-loader-svg{width:min(396px,100%)}.import-loader-logo-shell{width:112px;height:112px}.import-loader-brand-logo{width:74px}.import-loader-card-copy{text-align:center;padding:0 16px}.import-loader-kicker{margin-bottom:10px;font-size:10px;letter-spacing:.15em}.import-loader-message{white-space:normal;font-size:18px;line-height:1.25}.import-loader-helper{white-space:normal;font-size:11.5px}}@media(prefers-reduced-motion:reduce){.import-loader-preview::before,.import-loader-frame-path,.import-loader-svg-progress,.import-loader-svg-dot,.import-loader-logo-shell::after,.import-loader-brand-logo{animation:none!important}.import-loader-frame-path,.import-loader-svg-progress{stroke-dashoffset:0}.import-loader-svg-gold{stroke-dashoffset:0;opacity:1}}


/* v21.0.6 static routing rescue */
.route-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:22px}
.page-shell.narrow{max-width:880px;margin:0 auto;padding:42px 16px}
.signin-required-panel{border:1px solid rgba(193,53,132,.15);background:#fff;border-radius:28px;padding:24px;box-shadow:0 16px 46px rgba(193,53,132,.10)}

/* v22.1.0 option-specific preview image support */
.option-specific-preview{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:22px;margin-top:12px;background:#fff7fc;border:1px solid rgba(193,53,132,.14);box-shadow:0 18px 44px rgba(193,53,132,.12)}
.price-breakdown,.cart-price-breakdown{font-size:.92rem;color:#6d5b66}.price-breakdown strong,.cart-price-breakdown strong{color:#c13584}

/* v22.1.8 buyer stitched gallery */
.gallery-thumb-btn{border:0;background:transparent;padding:0;margin:0;display:grid;gap:6px;text-align:center;color:#7a5b6b;font-weight:800;font-size:11px;cursor:pointer}.gallery-thumb-btn img{width:88px;height:88px;border-radius:18px;object-fit:cover;border:2px solid transparent;box-shadow:0 10px 28px rgba(193,53,132,.10)}.gallery-thumb-btn.active img{border-color:var(--brand,#c13584)}.gallery-thumb-btn span{max-width:96px;white-space:normal;line-height:1.2}.thumbs img.active{border-color:var(--brand,#c13584)}@media(max-width:760px){.gallery-thumb-btn img{width:74px;height:74px}.gallery-thumb-btn span{max-width:82px;font-size:10px}}

/* v22.2.1 regression fix: stitched photos stay primary; DST preview is secondary */
.stitched-live-preview[hidden],.machine-preview-secondary[hidden]{display:none!important}
.machine-preview-secondary{display:grid;gap:10px;margin-top:12px}
.stitched-live-preview .custom-preview-fallback{background:#fff;object-fit:contain}


/* v22.2.7 embroidery-only live preview */
.custom-preview-fallback-wrap.stitched-live-preview{background:#fff7fb;border:1px dashed var(--brand-line);border-radius:22px;padding:14px;min-height:320px;place-items:center}.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{max-width:150px;opacity:.62;border:none;background:transparent}.machine-preview-secondary:not([hidden]){display:block}.preview-quality-note{font-size:12px;color:var(--muted)}
/* v23.4: sharper DST canvas with lower GPU cost on low-end mobiles. */
.dst-preview-canvas.preview-ready{will-change:auto}
@media(max-width:760px){.dst-preview-canvas{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 22px rgba(15,23,42,.12)}}


/* v23.2 Vintex PDF catalog manual shade picker */
.color-slot-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.color-slot-actions .field{margin:0}.catalog-pdf-btn{white-space:nowrap;box-shadow:none}.catalog-picker-shell{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:18px}.catalog-picker-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(10px)}.catalog-picker-modal{position:relative;width:min(1120px,100%);max-height:min(94vh,920px);overflow:hidden;background:#fff;border:1px solid var(--brand-line);border-radius:28px;box-shadow:0 32px 90px rgba(15,23,42,.28);padding:20px;animation:dofModalIn .22s var(--ease-out) both}.catalog-picker-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}.catalog-picker-head .eyebrow{margin:0 0 4px;color:var(--brand);font-weight:950;text-transform:uppercase;font-size:12px;letter-spacing:.08em}.catalog-picker-head h2{margin:0 0 4px;color:var(--ink);font-size:28px;letter-spacing:-.04em}.catalog-picker-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px;align-items:start}.catalog-pdf-panel,.catalog-code-panel{border:1px solid var(--brand-line);border-radius:22px;background:linear-gradient(135deg,#fff,#fff8fc);padding:14px}.catalog-pdf-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.catalog-pdf-frame{width:100%;height:min(66vh,680px);border:1px solid var(--line);border-radius:16px;background:#f8fafc}.catalog-mobile-note{font-size:13px;color:var(--muted);margin:10px 2px 0}.catalog-selected-preview{margin:10px 0}.catalog-selected-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--brand-line);border-radius:18px;background:#fff;padding:10px}.catalog-selected-card>span,.catalog-match-swatch{display:block;width:42px;height:42px;border-radius:14px;border:1px solid rgba(15,23,42,.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}.catalog-selected-card small{display:block;color:var(--muted);margin-top:2px}.catalog-selected-empty,.catalog-no-match{border:1px dashed var(--brand-line);border-radius:16px;background:#fff;padding:12px;color:var(--muted);font-size:14px}.catalog-match-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:2px}.catalog-match-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:16px;background:#fff;padding:9px 10px;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.catalog-match-card:hover{transform:translateY(-1px);border-color:var(--brand-line);box-shadow:0 8px 20px rgba(193,53,132,.08)}.catalog-match-card.is-selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.catalog-match-card small{display:block;color:var(--muted);margin-top:2px}.catalog-picker-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:860px){.color-slot-actions{grid-template-columns:1fr}.catalog-pdf-btn{width:100%}.catalog-picker-shell{padding:8px;align-items:flex-end}.catalog-picker-modal{border-radius:24px 24px 0 0;max-height:96vh;overflow:auto}.catalog-picker-grid{grid-template-columns:1fr}.catalog-pdf-frame{height:56vh}.catalog-picker-actions{display:grid;grid-template-columns:1fr}.catalog-picker-actions .btn{width:100%}}
.custom-color-picker-catalog{grid-template-columns:38px minmax(0,1fr) auto}.custom-color-picker-catalog .catalog-pdf-btn{align-self:center}@media(max-width:860px){.custom-color-picker-catalog{grid-template-columns:38px minmax(0,1fr)}.custom-color-picker-catalog .catalog-pdf-btn{grid-column:1/-1;width:100%}}

/* v23.3 Clear Vintex strip catalog - 30 mobile-friendly strip pages */
.catalog-strip-panel{min-width:0}.catalog-strip-toolbar{align-items:center}.catalog-strip-controls{display:grid;grid-template-columns:auto minmax(140px,1fr) auto;gap:10px;align-items:end;margin-bottom:12px}.catalog-strip-select-label{display:block}.catalog-strip-select-label span{display:block;font-size:12px;font-weight:900;color:var(--muted);margin:0 0 4px}.catalog-strip-select-label .field{margin:0;padding:10px 12px;border-radius:14px}.catalog-strip-viewer{height:min(66vh,690px);overflow:auto;border:1px solid var(--line);border-radius:18px;background:#f8fafc;padding:10px;scrollbar-gutter:stable;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}.catalog-strip-viewer img{display:block;width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.10)}.catalog-picker-modal .catalog-mobile-note{line-height:1.45}.catalog-match-list{max-height:min(38vh,360px)}@media(max-width:860px){.catalog-strip-controls{grid-template-columns:1fr 1fr;gap:8px}.catalog-strip-select-label{grid-column:1/-1;order:-1}.catalog-strip-controls .btn{width:100%}.catalog-strip-viewer{height:48vh;padding:8px;border-radius:16px}.catalog-picker-head h2{font-size:24px}.catalog-picker-head .muted{font-size:14px}.catalog-picker-grid{gap:12px}.catalog-pdf-panel,.catalog-code-panel{padding:12px;border-radius:20px}.catalog-picker-modal{padding:14px}.catalog-match-list{max-height:260px}}@media(max-width:520px){.catalog-strip-viewer{height:44vh}.catalog-picker-head{gap:8px}.catalog-picker-head h2{font-size:22px}.catalog-pdf-toolbar{align-items:flex-start;flex-direction:column}.catalog-pdf-toolbar .btn{width:100%}}

/* v23.1.0 Offer Page / Sale Launch */
.navlink.active{color:var(--accent,#d11c78);font-weight:800}.sale-badge{background:linear-gradient(135deg,#d11c78,#ff6ba6)!important;color:#fff!important}.offer-badge{background:#fff4fb!important;color:#b01866!important;border:1px solid #f4b8d9!important}.offer-page-shell{max-width:1180px;margin:0 auto;padding:22px}.apple-panel{border:1px solid rgba(214,28,120,.14);background:linear-gradient(180deg,#fff,rgba(255,248,252,.92));border-radius:32px;box-shadow:0 20px 60px rgba(20,18,28,.08);padding:28px}.offer-hero{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:stretch;margin:18px 0 24px}.offer-hero h1{font-size:clamp(2rem,5vw,4.2rem);line-height:.98;margin:12px 0;letter-spacing:-.06em;color:#111827}.sale-pill{background:#fff0f8;color:#c01c73;border:1px solid #f0b5d3}.offer-hero-card{border-radius:26px;background:radial-gradient(circle at top left,#fff 0,#ffeaf5 38%,#111827 39%,#020617 100%);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:26px;min-height:220px}.offer-hero-card b{font-size:1.8rem}.offer-hero-card span{color:#f5d8e9}.offer-countdown{display:inline-flex;align-items:center;gap:10px;border:1px solid #f2c2dc;background:#fff;border-radius:999px;padding:10px 14px;margin-top:10px;color:#9f165f}.offer-countdown b{color:#111827}.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 28px}.offer-card{overflow:hidden;border-radius:28px;border:1px solid rgba(17,24,39,.08);box-shadow:0 14px 38px rgba(17,24,39,.07);transition:transform .18s ease,box-shadow .18s ease}.offer-card:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(17,24,39,.12)}.offer-image{display:block;aspect-ratio:1/1;background:#f8fafc;overflow:hidden}.offer-image img{width:100%;height:100%;object-fit:cover;display:block}.offer-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.offer-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.offer-price .sell{font-size:1.45rem;color:#111827}.offer-price .mrp{text-decoration:line-through;color:#8a8f9c}.offer-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px}.bulk-offer-panel{text-align:center;margin:24px 0 36px}.bulk-offer-panel h2{font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.04em}.offer-card-preview{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;border:1px solid #f0d7e5;border-radius:22px;padding:14px;background:#fff}.offer-card-preview .imgwrap{aspect-ratio:1;border-radius:18px;overflow:hidden;background:#f8fafc}.offer-card-preview img{width:100%;height:100%;object-fit:cover}.offer-admin-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:10px;border:1px solid #eee;border-radius:16px;margin:8px 0;background:#fff}.offer-admin-row.active{border-color:#f2b8d7;background:#fff8fc}.offer-admin-row button:first-child{text-align:left;background:transparent;border:0}.offer-admin-row small{display:block;color:#777}.offer-product-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:360px;overflow:auto;padding:12px;border:1px solid #eee;border-radius:18px;background:#fff}.mini-check{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}.mini-check input{margin-top:3px}@media(max-width:860px){.offer-page-shell{padding:14px}.offer-hero{grid-template-columns:1fr}.offer-grid{grid-template-columns:1fr}.apple-panel{border-radius:24px;padding:20px}.offer-hero-card{min-height:170px}.offer-product-picker{grid-template-columns:1fr}.offer-admin-row{grid-template-columns:1fr 1fr}.offer-actions{gap:8px}}


/* v23.1.1 responsive sale banner system */
.offer-responsive-shell{
  width:min(100% - 24px, 1360px);
  max-width:1360px;
  padding:clamp(12px,2vw,24px) 0 32px;
}
.offer-sale-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(220px,22vw,320px);
  gap:clamp(12px,1.8vw,22px);
  margin:14px 0 clamp(14px,2vw,24px);
  align-items:stretch;
}
.offer-coupon-banner{
  position:relative;
  min-height:clamp(210px,22vw,320px);
  border-radius:clamp(18px,2.4vw,34px);
  padding:clamp(14px,2.2vw,28px);
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.26) 0 9%, transparent 10%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.18) 0 7%, transparent 8%),
    linear-gradient(135deg,#7b16ff 0%,#9b38ff 42%,#d11c78 100%);
  box-shadow:0 18px 54px rgba(105,38,170,.18);
}
.offer-coupon-banner::after{
  content:"";
  position:absolute;
  inset:auto -8% -24% auto;
  width:min(42vw,420px);
  aspect-ratio:1;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  pointer-events:none;
}
.coupon-paper{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,32%);
  gap:clamp(14px,2vw,28px);
  align-items:center;
  min-height:clamp(168px,17vw,245px);
  padding:clamp(18px,2.5vw,34px);
  border:2px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.94);
  color:#171023;
  border-radius:clamp(16px,2vw,28px);
  box-shadow:0 16px 34px rgba(48,12,77,.18);
  clip-path:polygon(0 0,100% 0,100% 38%,97.8% 42%,97.8% 58%,100% 62%,100% 100%,0 100%,0 62%,2.2% 58%,2.2% 42%,0 38%);
}
.coupon-copy h1{
  margin:10px 0;
  font-size:clamp(2rem,5vw,5.35rem);
  line-height:.91;
  max-width:780px;
  letter-spacing:-.075em;
  color:#7a18f2;
}
.coupon-copy p{
  max-width:680px;
  margin:0;
  color:#6b6072;
  font-size:clamp(.95rem,1.15vw,1.12rem);
}
.coupon-deal-box{
  border-left:2px dashed rgba(123,24,242,.35);
  padding-left:clamp(16px,2vw,28px);
  display:flex;
  flex-direction:column;
  gap:7px;
}
.coupon-deal-box span{
  color:#7a18f2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
}
.coupon-deal-box b{
  color:#7a18f2;
  font-size:clamp(1.55rem,3vw,3.35rem);
  line-height:.95;
}
.coupon-deal-box small{color:#6b6072;line-height:1.35}
.coupon-countdown{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  background:rgba(255,255,255,.94);
  color:#7a18f2;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 8px 18px rgba(62,18,97,.12);
}
.offer-side-stack{display:grid;gap:clamp(10px,1.4vw,16px)}
.offer-mini-banner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:clamp(98px,10.4vw,152px);
  padding:clamp(16px,2vw,22px);
  text-decoration:none;
  color:#151124;
  background:linear-gradient(135deg,#fff,#fff4fb);
  border:1px solid rgba(214,28,120,.15);
  border-radius:clamp(16px,1.8vw,26px);
  box-shadow:0 14px 32px rgba(17,24,39,.08);
}
.offer-mini-banner span{font-weight:800;color:#d11c78;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.offer-mini-banner b{font-size:clamp(1.1rem,1.7vw,1.55rem);line-height:1.05}.offer-mini-dark{color:#fff;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.22),transparent 34%),linear-gradient(135deg,#111827,#4c1d95 55%,#7c3aed);border-color:rgba(255,255,255,.12)}.offer-mini-dark span{color:#f6c9e1}.offer-strip-nav{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:3px 2px 14px;margin:0 0 10px;-webkit-overflow-scrolling:touch}.offer-strip-nav a{scroll-snap-align:start;min-width:clamp(124px,16vw,190px);border:1px solid rgba(17,24,39,.08);border-radius:18px;padding:13px 15px;background:#fff;text-decoration:none;color:#111827;box-shadow:0 10px 24px rgba(17,24,39,.05)}.offer-strip-nav b{display:block}.offer-strip-nav span{font-size:.86rem;color:#707784}.offer-deal-shelf{margin:14px 0 22px;border-radius:clamp(18px,2vw,28px);padding:clamp(12px,1.4vw,18px);background:linear-gradient(135deg,#ff7a00,#ff8b1f 30%,#7a18f2 100%);box-shadow:0 16px 42px rgba(150,55,15,.14)}.shelf-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;padding:4px 6px 13px}.shelf-title h2{margin:0;font-size:clamp(1.25rem,2vw,2rem);letter-spacing:-.035em}.shelf-title a,.shelf-title span{color:rgba(255,255,255,.92);font-weight:800;text-decoration:none}.offer-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}.deal-tile{min-width:0;text-decoration:none;color:#111827;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 26px rgba(17,24,39,.1)}.deal-img{aspect-ratio:1.36;background:#f6f7fb;overflow:hidden}.deal-img img{width:100%;height:100%;object-fit:cover;display:block}.deal-tile div:last-child{padding:12px}.deal-tile span{display:block;color:#4b5563;font-size:.9rem}.deal-tile b{display:block;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.1;margin:2px 0}.deal-tile small{color:#6b7280}.deal-tile.skeleton{height:180px;animation:pulse 1.4s ease-in-out infinite;background:rgba(255,255,255,.6)}.offer-section-head{margin-top:clamp(14px,2vw,24px)}.responsive-offer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.6vw,20px)}.offer-card{border-radius:clamp(18px,1.8vw,28px);content-visibility:auto;contain-intrinsic-size:420px 560px}.offer-card .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}.offer-image{aspect-ratio:1.05}.offer-image img{transform:translateZ(0)}.bulk-offer-upgraded{background:radial-gradient(circle at 20% 10%,#fff 0,#fff4fb 38%,#f7fbff 100%)}
@media (min-width:1440px){.offer-responsive-shell{width:min(100% - 52px,1480px)}.responsive-offer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.offer-image{aspect-ratio:1.08}.coupon-copy h1{font-size:clamp(4.4rem,4.6vw,6.1rem)}}
@media (max-width:1180px){.offer-sale-stage{grid-template-columns:1fr}.offer-side-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-mini-grid{grid-template-columns:repeat(4,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x proximity}.deal-tile{scroll-snap-align:start}.responsive-offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.offer-responsive-shell{width:min(100% - 18px,720px);padding-top:10px}.coupon-paper{grid-template-columns:1fr;clip-path:none}.coupon-deal-box{border-left:0;border-top:2px dashed rgba(123,24,242,.28);padding:16px 0 0}.offer-side-stack{grid-template-columns:1fr 1fr}.responsive-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-actions{grid-template-columns:1fr}.offer-mini-grid{grid-template-columns:repeat(4,minmax(190px,1fr))}.offer-deal-shelf{padding:12px}.coupon-copy h1{letter-spacing:-.055em}}
@media (max-width:560px){.offer-responsive-shell{width:min(100% - 14px,420px)}.offer-sale-stage{gap:10px}.offer-coupon-banner{padding:10px;min-height:unset;border-radius:20px}.coupon-paper{padding:18px;border-radius:18px}.coupon-copy h1{font-size:2.05rem;line-height:.96}.coupon-copy p{font-size:.9rem}.coupon-deal-box b{font-size:1.55rem}.offer-side-stack{grid-template-columns:1fr}.offer-strip-nav a{min-width:132px}.offer-mini-grid{grid-template-columns:repeat(4,minmax(160px,1fr))}.responsive-offer-grid{grid-template-columns:1fr}.offer-card{contain-intrinsic-size:360px 560px}.offer-image{aspect-ratio:1.12}.offer-price .sell{font-size:1.3rem}.offer-section-head{align-items:flex-start;gap:10px}.offer-section-head .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.offer-card,.deal-tile,.offer-coupon-banner{transition:none!important;animation:none!important}}

/* v23.1.2 Home hero offer display */
.offer-hero-cta{background:linear-gradient(135deg,#7a18f2,#d11c78);color:#fff;border-color:transparent;box-shadow:0 16px 34px rgba(193,53,132,.22)}
.hero-offer-feature{min-width:0;align-items:stretch;justify-content:stretch;padding:18px;overflow:hidden}
.hero-offer-feature.is-offer-loaded{background:radial-gradient(circle at 100% 0,#ffe1f1 0,transparent 36%),linear-gradient(135deg,#fff,#fff7fb);display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px}
.home-offer-ticket{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,38%);gap:clamp(12px,1.6vw,18px);align-items:center;min-height:270px;border:1px solid rgba(193,53,132,.18);border-radius:24px;padding:clamp(16px,2vw,24px);background:linear-gradient(135deg,#ffffff 0%,#fff4fb 48%,#fdf2ff 100%);box-shadow:0 16px 42px rgba(193,53,132,.10)}
.home-offer-copy{min-width:0}.home-offer-kicker{display:inline-flex;align-items:center;border:1px solid #f2b8d7;background:#fff;color:#c13584;border-radius:999px;padding:7px 11px;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.home-offer-copy h2{font-size:clamp(2rem,3.4vw,4.25rem);line-height:.9;margin:14px 0 8px;color:#7a18f2;letter-spacing:-.07em}.home-offer-copy p{margin:0;color:#64748b;font-weight:750;line-height:1.35}.home-offer-price{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:13px 0 14px}.home-offer-price span{font-size:clamp(1.35rem,2vw,2.1rem);font-weight:1000;color:#111827}.home-offer-price del{color:#8a8f9c;font-weight:800}.home-offer-price b{font-size:12px;color:#be185d;background:#fff;border:1px solid #f2b8d7;border-radius:999px;padding:6px 9px}.home-offer-actions{display:flex;gap:10px;flex-wrap:wrap}.home-offer-visual{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:22px;background:#fff;overflow:hidden;border:1px solid rgba(193,53,132,.14);box-shadow:0 14px 32px rgba(15,23,42,.08)}.home-offer-visual img{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}.home-offer-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.home-offer-chip-card{min-width:0;text-decoration:none;color:#111827;background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.06)}.home-offer-chip-card img{display:block;width:100%;aspect-ratio:1.28;object-fit:cover;background:#f8fafc}.home-offer-chip-card span,.home-offer-chip-card b{display:block;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-offer-chip-card span{padding-top:8px;color:#6b7280;font-size:12px;font-weight:850}.home-offer-chip-card b{padding-bottom:9px;color:#111827;font-size:14px}
@media(min-width:1440px){.hero{max-width:min(100% - 72px,1600px)}.home-offer-ticket{min-height:330px}.home-offer-visual{max-height:330px}.home-offer-rail{gap:12px}.home-offer-chip-card img{aspect-ratio:1.38}}
@media(max-width:1100px){.home-offer-ticket{grid-template-columns:1fr}.home-offer-visual{display:none}.home-offer-rail{grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto;scroll-snap-type:x proximity}.home-offer-chip-card{scroll-snap-align:start}}
@media(max-width:860px){.hero-offer-feature.is-offer-loaded{display:grid}.home-offer-ticket{min-height:auto}.home-offer-copy h2{font-size:clamp(2.1rem,9vw,4rem)}.home-offer-rail{grid-template-columns:repeat(4,minmax(150px,1fr));padding-bottom:4px}.home-offer-actions .btn{flex:1;justify-content:center}}
@media(max-width:520px){.hero-logo-card.hero-offer-feature{display:block;min-height:auto;padding:12px}.hero-offer-feature:not(.is-offer-loaded){display:none}.home-offer-ticket{border-radius:20px;padding:16px}.home-offer-kicker{font-size:11px}.home-offer-copy h2{font-size:2.2rem}.home-offer-copy p{font-size:13px}.home-offer-rail{grid-template-columns:repeat(4,minmax(132px,1fr));gap:8px}.home-offer-chip-card{border-radius:16px}.home-offer-chip-card span{font-size:11px}.home-offer-chip-card b{font-size:13px}.offer-hero-cta{width:100%;justify-content:center}}

/* v23.1.3 premium promotional sale banner system */
.home-sale-strip{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,16px);
  width:100%;padding:10px 16px;text-decoration:none;color:#fff;
  background:linear-gradient(90deg,#7a18f2,#c026d3 45%,#e11d48);
  box-shadow:0 8px 24px rgba(122,24,242,.16);font-weight:900;letter-spacing:-.01em;
  contain:layout paint;transform:translateZ(0)
}
.home-sale-strip span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.home-sale-strip b{font-size:clamp(.95rem,1.35vw,1.16rem)}.home-sale-strip em{font-style:normal;font-size:.86rem;opacity:.88}
.hero-offer-feature.is-sale-banner-mode{background:linear-gradient(135deg,#fff,#fff3fb);padding:14px;gap:10px}.home-sale-banner-card{position:relative;min-height:clamp(250px,28vw,440px);border-radius:clamp(20px,2.2vw,34px);overflow:hidden;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.28),transparent 22%),linear-gradient(135deg,#7a18f2 0%,#a21caf 42%,#db2777 100%);box-shadow:0 22px 56px rgba(122,24,242,.18);isolation:isolate}.home-uploaded-sale-art{position:absolute;inset:0;display:block;z-index:1;background:#7a18f2}.home-uploaded-sale-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;image-rendering:auto;transform:translateZ(0)}.home-sale-copy-layer{position:absolute;inset:auto 18px 18px 18px;z-index:2;border-radius:22px;padding:clamp(14px,1.6vw,20px);background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72));border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 38px rgba(15,23,42,.12);backdrop-filter:blur(10px)}.home-sale-banner-card.no-uploaded-banner .home-sale-copy-layer{inset:50%;transform:translate(-50%,-50%);width:min(86%,520px);text-align:center}.sale-ribbon-mini{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;background:#fff;color:#c026d3;border:1px solid rgba(192,38,211,.18);font-size:.75rem;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.home-sale-copy-layer h2{margin:10px 0 6px;font-size:clamp(1.55rem,2.8vw,3.6rem);line-height:.94;letter-spacing:-.065em;color:#111827}.home-sale-copy-layer p{margin:0;color:#475569;font-weight:760;line-height:1.35}.home-sale-price-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.home-sale-price-line b{font-size:clamp(1.1rem,1.7vw,1.65rem);color:#be185d}.home-sale-price-line span{font-size:.9rem;color:#64748b;font-weight:850}.home-sale-rail{padding-top:2px}.home-sale-rail .home-offer-chip-card{transition:transform .18s ease,box-shadow .18s ease}.home-sale-rail .home-offer-chip-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.10)}
.offer-coupon-banner.has-uploaded-offer-banner{padding:0;overflow:hidden;background:#7a18f2}.offer-page-uploaded-banner{display:block;width:100%;aspect-ratio:16/5;background:#7a18f2}.offer-page-uploaded-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.offer-coupon-banner.has-uploaded-offer-banner .coupon-paper{margin:clamp(10px,1.3vw,16px);background:rgba(255,255,255,.94);box-shadow:0 16px 34px rgba(15,23,42,.12)}.offer-coupon-banner.has-uploaded-offer-banner .coupon-countdown{margin:0 clamp(12px,1.5vw,18px) clamp(12px,1.5vw,18px)}.offer-admin-detailer{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #f2b8d7;background:linear-gradient(135deg,#fff,#fff5fb);border-radius:18px;padding:14px 16px;margin:8px 0 16px}.offer-admin-detailer b{display:block;color:#111827}.offer-admin-detailer small{display:block;color:#64748b}.offer-admin-detailer span{border-radius:999px;background:#c13584;color:#fff;padding:7px 11px;font-weight:900}.offer-banner-admin{border:1px solid #f2b8d7;background:#fff8fc;border-radius:22px;padding:16px;margin:14px 0}.admin-sale-banner-preview{position:relative;overflow:hidden;border-radius:22px;min-height:190px;background:linear-gradient(135deg,#7a18f2,#db2777);display:grid;place-items:center;padding:18px;color:#fff}.admin-sale-banner-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.admin-sale-banner-preview div{position:relative;z-index:1;max-width:420px;border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.9);color:#111827;box-shadow:0 14px 36px rgba(15,23,42,.12)}.admin-sale-banner-preview span{display:inline-flex;color:#c13584;font-weight:1000;text-transform:uppercase;font-size:.75rem}.admin-sale-banner-preview h2{margin:5px 0;font-size:clamp(1.4rem,2.3vw,2.4rem);line-height:1}.admin-sale-banner-preview p{margin:0;color:#64748b}.admin-sale-banner-preview b{display:inline-flex;margin-top:9px;color:#fff;background:#c13584;border-radius:999px;padding:7px 10px}
@media(max-width:1100px){.home-sale-copy-layer{inset:auto 14px 14px 14px}.home-sale-banner-card{min-height:300px}.offer-page-uploaded-banner{aspect-ratio:16/6}}
@media(max-width:720px){.home-sale-strip{justify-content:flex-start;overflow-x:auto;padding:9px 12px}.home-sale-strip b{white-space:nowrap}.hero-offer-feature.is-sale-banner-mode{padding:10px}.home-sale-banner-card{min-height:260px;border-radius:22px}.home-sale-copy-layer{position:relative;inset:auto;margin:12px;transform:none!important;width:auto!important;background:rgba(255,255,255,.94);backdrop-filter:none}.home-uploaded-sale-art{position:relative;display:block;aspect-ratio:16/8}.home-sale-copy-layer h2{font-size:1.6rem}.home-sale-copy-layer p{font-size:.92rem}.offer-page-uploaded-banner{aspect-ratio:16/8}.offer-coupon-banner.has-uploaded-offer-banner .coupon-paper{clip-path:none;grid-template-columns:1fr}.offer-admin-detailer{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.home-sale-strip em{display:none}.home-sale-banner-card{min-height:unset}.home-uploaded-sale-art{aspect-ratio:16/9}.home-sale-copy-layer{padding:13px;border-radius:18px}.home-sale-copy-layer h2{font-size:1.42rem}.home-sale-price-line b{font-size:1rem}.home-sale-price-line span{font-size:.82rem}.home-sale-copy-layer .home-offer-actions .btn{width:100%;justify-content:center}.offer-page-uploaded-banner{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.home-sale-rail .home-offer-chip-card,.home-sale-strip{transition:none!important;animation:none!important}}

/* v23.3.0 Design Review & Confirm + part-focused color editing */
.color-copy-tools{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}.color-copy-tools .btn{box-shadow:none}.copy-color-status{border:1px solid var(--brand-line);background:#fff8fc;color:var(--brand);border-radius:14px;padding:9px 11px;font-weight:850;font-size:13px;margin:0 0 10px}.part-color-card.is-active-preview{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),0 14px 34px rgba(193,53,132,.11)}

/* v25.0.0 cloth color selection */
.custom-preview-panel{--selected-cloth-color:#07080b}
.custom-preview-fallback-wrap,.machine-preview-secondary,.dst-preview-canvas,.review-preview-canvas{background:var(--selected-cloth-color,#07080b)}
.custom-preview-fallback-wrap{border-radius:22px;padding:10px;transition:background-color .18s ease,background .18s ease}
.custom-preview-fallback-wrap .custom-preview-fallback{background:transparent}
.cloth-preview-status{display:grid;grid-template-columns:34px auto minmax(0,1fr);align-items:center;gap:8px;margin:10px 0 12px;border:1px solid rgba(193,53,132,.16);border-radius:16px;background:rgba(255,255,255,.76);padding:9px 10px;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.cloth-preview-swatch{display:block;width:34px;height:34px;border-radius:12px;border:1px solid rgba(15,23,42,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);background:#07080b}
.cloth-preview-status b{color:var(--ink);font-size:13px}.cloth-preview-status small{color:var(--muted);font-weight:850;overflow-wrap:anywhere}
.cloth-color-card{border:1px solid var(--brand-line);border-radius:20px;background:linear-gradient(135deg,#fff,#fff8fc);padding:13px;display:grid;gap:12px;margin-bottom:14px}
.cloth-color-copy b{display:block;color:var(--ink);margin-bottom:6px}.cloth-color-copy ul{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.45}.cloth-color-picker{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}.cloth-color-picker .field{margin:0}
.review-option-strip.review-option-strip-four{grid-template-columns:1.25fr repeat(3,minmax(0,1fr))}.review-cloth-card small{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35}.review-cloth-line{display:flex!important;gap:7px;align-items:center}.review-cloth-line i{display:inline-block;width:18px;height:18px;border-radius:7px;border:1px solid rgba(15,23,42,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
@media(max-width:980px){.review-option-strip.review-option-strip-four{grid-template-columns:1fr 1fr}.cloth-color-picker{grid-template-columns:38px minmax(0,1fr)}.cloth-color-picker .catalog-pdf-btn{grid-column:1/-1;width:100%}}
@media(max-width:640px){.review-option-strip.review-option-strip-four{grid-template-columns:1fr}.cloth-preview-status{grid-template-columns:30px minmax(0,1fr)}.cloth-preview-status small{grid-column:1/-1}.cloth-preview-swatch{width:30px;height:30px}}

.design-review-shell,.review-zoom-shell{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:18px}.design-review-backdrop,.review-zoom-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(12px);animation:dofFadeIn .18s var(--ease-premium) both}.design-review-modal{position:relative;width:min(1180px,100%);max-height:min(94vh,920px);overflow:auto;background:#fff;border:1px solid var(--brand-line);border-radius:30px;box-shadow:0 36px 100px rgba(15,23,42,.32);padding:22px;animation:dofModalIn .24s var(--ease-premium) both}.design-review-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.design-review-head .eyebrow{color:var(--brand);font-weight:1000;letter-spacing:.1em;text-transform:uppercase;font-size:12px}.design-review-head h2{font-size:clamp(1.7rem,4vw,3rem);line-height:1;margin:4px 0 6px;letter-spacing:-.055em;color:var(--ink)}.review-product-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border:1px solid var(--brand-line);border-radius:18px;background:linear-gradient(135deg,#fff,#fff8fc);padding:12px 14px;margin-bottom:12px}.review-product-line b{color:var(--brand);font-weight:1000}.review-option-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.review-option-strip div,.review-detail-grid section{border:1px solid var(--line);border-radius:18px;background:#fff;padding:12px}.review-option-strip b,.review-measure-grid b{display:block;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.055em}.review-option-strip span,.review-measure-grid span{display:block;margin-top:3px;color:var(--muted);font-weight:850}.review-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.review-preview-card{border:1px solid var(--brand-line);border-radius:22px;background:linear-gradient(135deg,#fff,#fff8fc);padding:12px;box-shadow:0 14px 34px rgba(15,23,42,.06)}.review-preview-head{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:10px}.review-preview-head b{color:var(--ink)}.review-preview-head small{color:var(--brand);font-weight:900;text-align:right}.review-preview-media{width:100%;border:0;padding:0;background:transparent;cursor:zoom-in;text-align:inherit}.review-preview-media img,.review-preview-canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:18px;border:1px solid rgba(15,23,42,.10);background:#050507;object-fit:contain}.review-canvas-wrap{position:relative}.review-canvas-wrap .preview-loading{inset:12px}.review-preview-empty{display:grid;place-items:center;aspect-ratio:1/1;border:1px dashed var(--brand-line);border-radius:18px;background:#fff;color:var(--muted);font-weight:900;padding:16px;text-align:center}.review-thread-list{display:grid;gap:7px;margin-top:10px}.review-thread-chip{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;border:1px solid rgba(15,23,42,.08);border-radius:13px;background:#fff;padding:7px 8px}.review-thread-swatch{width:28px;height:28px;border-radius:10px;border:1px solid rgba(15,23,42,.15);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}.review-thread-chip b{display:block;font-size:12px;color:var(--ink)}.review-thread-chip small{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}.review-detail-grid{display:grid;grid-template-columns:1.1fr .9fr .85fr;gap:12px;margin-top:14px}.review-detail-grid h3{font-size:16px;margin:0 0 10px}.review-measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.review-notes{margin:0;color:var(--muted);line-height:1.5;white-space:pre-wrap}.review-price-list{display:grid;gap:8px}.review-price-list div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:7px}.review-price-list span{color:var(--muted)}.review-price-list b{color:var(--ink);text-align:right}.design-review-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px}.review-zoom-modal{position:relative;width:min(960px,100%);max-height:92vh;background:#fff;border:1px solid var(--brand-line);border-radius:26px;box-shadow:0 34px 90px rgba(15,23,42,.32);padding:16px;animation:dofModalIn .2s var(--ease-premium) both;text-align:center}.review-zoom-modal img{display:block;max-width:100%;max-height:78vh;object-fit:contain;margin:auto;border-radius:18px;background:#050507}.review-zoom-modal b{display:block;margin-top:10px;color:var(--ink)}.review-zoom-close{position:absolute;top:12px;right:12px;z-index:2;background:#fff!important}
@media(max-width:980px){.review-preview-grid,.review-detail-grid{grid-template-columns:1fr}.review-option-strip{grid-template-columns:1fr 1fr}.design-review-modal{border-radius:24px;padding:16px}.review-preview-card{padding:10px}}
@media(max-width:640px){.design-review-shell,.review-zoom-shell{padding:8px;align-items:flex-end}.design-review-modal{max-height:96vh;border-radius:24px 24px 0 0}.design-review-head{gap:10px}.review-option-strip{grid-template-columns:1fr}.review-measure-grid{grid-template-columns:1fr}.design-review-actions{display:grid;grid-template-columns:1fr}.design-review-actions .btn{width:100%}.color-copy-tools{display:grid;grid-template-columns:1fr}.color-copy-tools .btn{width:100%}.review-product-line{display:block}.review-zoom-modal{border-radius:22px 22px 0 0;max-height:94vh}.review-zoom-modal img{max-height:72vh}}
@media(prefers-reduced-motion:reduce){.design-review-backdrop,.design-review-modal,.review-zoom-backdrop,.review-zoom-modal{animation:none!important}}

/* v23.3.1 review modal open hardening */
body.design-review-open{overflow:hidden}.design-review-shell.design-review-open{position:fixed!important;inset:0!important;z-index:240!important;display:flex!important;align-items:center;justify-content:center;pointer-events:auto}.design-review-shell.design-review-open .design-review-backdrop{z-index:0}.design-review-shell.design-review-open .design-review-modal{z-index:1}.review-zoom-shell{z-index:260!important}.design-review-actions [data-review-confirm],.design-review-actions [data-review-edit]{visibility:visible!important;opacity:1!important}

/* v23.3.2 final review modal polish: fast, reusable, accessible */
.design-review-shell{display:none!important;opacity:0;pointer-events:none;contain:layout style paint}.design-review-shell.design-review-open{display:flex!important;opacity:1;pointer-events:auto}.design-review-shell.is-open .design-review-backdrop{animation:dofReviewBackdropIn 180ms var(--ease-premium) both}.design-review-shell.is-open .design-review-modal{animation:dofReviewModalIn 220ms var(--ease-premium) both}.design-review-shell.is-closing .design-review-backdrop{animation:dofReviewBackdropOut 160ms var(--ease-premium) both}.design-review-shell.is-closing .design-review-modal{animation:dofReviewModalOut 160ms var(--ease-premium) both}.design-review-modal{will-change:transform,opacity;overscroll-behavior:contain;scrollbar-gutter:stable;transform-origin:50% 60%;padding:clamp(14px,2.2vw,24px)}.design-review-backdrop{will-change:opacity;touch-action:none}.design-review-head{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,#fff 88%,rgba(255,255,255,.82));backdrop-filter:blur(10px)}.review-preview-card{content-visibility:auto;contain-intrinsic-size:360px;transform:translate3d(0,8px,0);opacity:0;will-change:transform,opacity}.design-review-shell.is-open .review-preview-card{animation:dofReviewCardIn 260ms var(--ease-premium) both}.design-review-shell.is-open .review-preview-card:nth-child(1){animation-delay:50ms}.design-review-shell.is-open .review-preview-card:nth-child(2){animation-delay:95ms}.design-review-shell.is-open .review-preview-card:nth-child(3){animation-delay:140ms}.review-preview-media{border-radius:18px;touch-action:manipulation}.review-preview-media:focus-visible{outline:3px solid rgba(193,53,132,.24);outline-offset:3px}.review-preview-media img,.review-preview-canvas,.review-preview-empty{aspect-ratio:1/1;min-height:0;transform:translateZ(0);backface-visibility:hidden}.review-preview-media img{image-rendering:auto}.review-thread-list{max-height:168px;overflow:auto;overscroll-behavior:contain;padding-right:2px}.review-thread-chip{min-height:42px}.design-review-actions{position:sticky;bottom:0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.84),#fff 34%);padding-top:12px}.design-review-actions .btn[disabled]{opacity:.68;cursor:not-allowed;transform:none!important}.review-zoom-shell{opacity:0;transition:opacity 160ms var(--ease-premium);contain:layout style paint}.review-zoom-shell.is-open{opacity:1}.review-zoom-shell.is-closing{opacity:0}.review-zoom-modal{will-change:transform,opacity;animation:dofReviewZoomIn 180ms var(--ease-premium) both}.review-zoom-shell.is-closing .review-zoom-modal{animation:dofReviewZoomOut 150ms var(--ease-premium) both}.review-zoom-modal img{width:auto;height:auto;max-width:100%;max-height:78vh;transform:translateZ(0)}@keyframes dofReviewBackdropIn{from{opacity:0}to{opacity:1}}@keyframes dofReviewBackdropOut{from{opacity:1}to{opacity:0}}@keyframes dofReviewModalIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.975)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes dofReviewModalOut{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,10px,0) scale(.985)}}@keyframes dofReviewCardIn{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes dofReviewZoomIn{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}@keyframes dofReviewZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.985)}}
@media(max-width:980px){.review-preview-grid{grid-template-columns:repeat(3,minmax(260px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}.review-preview-card{scroll-snap-align:start}.review-detail-grid{grid-template-columns:1fr}.design-review-head{position:relative;backdrop-filter:none}.review-thread-list{max-height:138px}}
@media(max-width:640px){.design-review-shell.design-review-open{align-items:flex-end!important}.design-review-modal{width:100%;max-height:96dvh;border-radius:24px 24px 0 0;padding:14px}.review-preview-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-2px;margin-right:-2px;padding:2px 2px 8px}.review-preview-card{flex:0 0 86%;scroll-snap-align:center}.review-preview-head{display:block}.review-preview-head small{text-align:left;display:block;margin-top:3px}.review-thread-list{max-height:132px}.review-detail-grid section{padding:11px}.review-zoom-shell{align-items:flex-end}.review-zoom-modal{width:100%;border-radius:22px 22px 0 0;padding:13px}.review-zoom-modal img{max-height:70dvh}.design-review-actions{padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media(max-width:420px){.review-preview-card{flex-basis:91%}.design-review-head h2{font-size:1.55rem}.review-product-line,.review-option-strip div,.review-detail-grid section{border-radius:15px}.review-thread-chip{grid-template-columns:24px minmax(0,1fr);padding:6px}.review-thread-swatch{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.design-review-shell.is-open .design-review-backdrop,.design-review-shell.is-open .design-review-modal,.design-review-shell.is-closing .design-review-backdrop,.design-review-shell.is-closing .design-review-modal,.design-review-shell.is-open .review-preview-card,.review-zoom-modal,.review-zoom-shell.is-closing .review-zoom-modal{animation:none!important;transition:none!important}.review-preview-card{opacity:1!important;transform:none!important}.review-zoom-shell{transition:none!important}}

/* v24.0.1: Offer banner text-fit hardening + v23.3 modal polish retained.
   Keeps long sale titles readable without overlapping the discount block. */
.offer-page-shell,
.offer-responsive-shell,
.offer-sale-stage,
.offer-coupon-banner,
.coupon-paper,
.coupon-copy,
.coupon-deal-box{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.offer-page-shell,
.offer-responsive-shell{
  overflow-x:clip;
}
.offer-coupon-banner{
  container-type:inline-size;
}
.coupon-paper{
  grid-template-columns:minmax(0,1fr) minmax(210px,31%);
  overflow:hidden;
}
.coupon-copy{
  overflow:hidden;
  display:block;
}
.coupon-copy h1{
  width:100%;
  max-width:min(100%,820px);
  margin:clamp(8px,1.1vw,12px) 0;
  font-size:clamp(2rem,8.2cqw,4.85rem);
  line-height:1;
  letter-spacing:-.045em;
  text-wrap:balance;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.coupon-copy p{
  max-width:min(100%,680px);
  overflow-wrap:break-word;
}
.coupon-deal-box{
  align-self:stretch;
  justify-content:center;
  overflow:hidden;
}
.coupon-deal-box span,
.coupon-deal-box b,
.coupon-deal-box small{
  max-width:100%;
  overflow-wrap:anywhere;
}
.coupon-deal-box b{
  font-size:clamp(1.5rem,5.5cqw,3.1rem);
  line-height:.98;
}
.coupon-countdown,
.offer-countdown{
  max-width:100%;
  flex-wrap:wrap;
  white-space:normal;
  overflow-wrap:anywhere;
}
@media (min-width:1440px){
  .coupon-paper{grid-template-columns:minmax(0,1fr) minmax(250px,30%)}
  .coupon-copy h1{font-size:clamp(3.1rem,6.2cqw,5.25rem);max-width:900px}
}
@media (max-width:1180px){
  .coupon-paper{grid-template-columns:minmax(0,1fr) minmax(220px,30%)}
  .coupon-copy h1{font-size:clamp(2.25rem,7.4cqw,4.2rem)}
}
@media (max-width:860px){
  .coupon-paper{grid-template-columns:1fr;overflow:visible}
  .coupon-copy h1{font-size:clamp(2rem,10.5cqw,3.45rem);letter-spacing:-.04em;line-height:1.02}
  .coupon-deal-box{border-left:0;border-top:2px dashed rgba(123,24,242,.28);padding-left:0;padding-top:16px}
}
@media (max-width:560px){
  .coupon-copy h1{font-size:clamp(1.72rem,11vw,2.35rem);line-height:1.03;letter-spacing:-.03em}
  .coupon-deal-box b{font-size:clamp(1.35rem,8vw,1.9rem)}
  .coupon-countdown,.offer-countdown{display:flex;width:100%;justify-content:center;text-align:center}
}
@media (max-width:380px){
  .coupon-copy h1{font-size:clamp(1.5rem,10.2vw,1.95rem)}
  .coupon-paper{padding:14px}
}
@supports not (font-size: 1cqw){
  .coupon-copy h1{font-size:clamp(2rem,4.2vw,4.6rem)}
  .coupon-deal-box b{font-size:clamp(1.5rem,2.7vw,3.1rem)}
  @media(max-width:860px){.coupon-copy h1{font-size:clamp(2rem,7vw,3.45rem)}}
  @media(max-width:560px){.coupon-copy h1{font-size:clamp(1.72rem,11vw,2.35rem)}}
}

/* v24.0.2: mobile offer banner fit + checkout payment popup */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .topbar,.nav,.hero,.hero-logo-card.hero-offer-feature,.hero-offer-feature.is-sale-banner-mode,.home-sale-banner-card,.offer-coupon-banner,.coupon-paper{max-width:100%;min-width:0}
  .topbar{overflow-x:hidden}
  .nav{width:100%;align-items:center}
  .nav>*{min-width:0}
  .brand{flex:0 1 auto;min-width:0}
  .brand img{max-width:min(138px,38vw)}
  .hero{width:auto;max-width:calc(100vw - 28px);overflow:hidden}
  .hero-logo-card.hero-offer-feature{width:100%;overflow:hidden}
  .hero-offer-feature.is-sale-banner-mode{padding:8px}
  .home-sale-banner-card{width:100%;box-shadow:0 14px 34px rgba(122,24,242,.14)}
  .home-uploaded-sale-art,.offer-page-uploaded-banner{background:linear-gradient(135deg,#7a18f2,#db2777)}
  .home-uploaded-sale-art img,.offer-page-uploaded-banner img{object-fit:contain;object-position:center;background:linear-gradient(135deg,#7a18f2,#db2777)}
  .home-sale-copy-layer{max-width:calc(100% - 16px);margin:8px}
  .home-sale-copy-layer h2{line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:balance}
  .home-sale-price-line{gap:7px}
  .home-offer-rail,.home-sale-rail{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .home-offer-chip-card{min-width:0}
  .offer-responsive-shell{width:min(100% - 12px,720px)}
}
@media(max-width:420px){
  .hero{margin:10px 8px;padding:14px;border-radius:22px}
  .hero-logo-card.hero-offer-feature{padding:8px;border-radius:18px}
  .home-sale-copy-layer{padding:11px;border-radius:16px}
  .home-sale-copy-layer h2{font-size:1.3rem}
  .home-sale-copy-layer p{font-size:.85rem}
  .home-sale-price-line b{font-size:.95rem}
  .home-sale-price-line span{font-size:.78rem}
}

body.payment-popup-open{overflow:hidden}
.payment-popup-shell{position:fixed;inset:0;z-index:280;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity 160ms var(--ease-out)}
.payment-popup-shell.is-open{opacity:1;pointer-events:auto}
.payment-popup-shell.is-closing{opacity:0}
.payment-popup-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(12px)}
.payment-popup-modal{position:relative;z-index:1;width:min(560px,100%);max-height:92vh;overflow:auto;border:1px solid var(--brand-line);border-radius:28px;background:#fff;box-shadow:0 34px 90px rgba(15,23,42,.32);padding:20px;animation:dofModalIn .2s var(--ease-out) both}
.payment-popup-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.payment-popup-head h2{margin:4px 0 6px;color:var(--ink);font-size:clamp(1.55rem,4vw,2.25rem);line-height:1.02;letter-spacing:-.04em}
.payment-popup-head p{margin:0;line-height:1.45}
.payment-popup-kicker{display:inline-flex;color:var(--brand);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}
.payment-number-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;border:1px solid var(--brand-line);border-radius:20px;background:linear-gradient(135deg,#fff,#fff7fb);padding:14px;margin-bottom:12px}
.payment-number-card span{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.payment-number-card b{color:var(--brand-ink);font-size:clamp(1.35rem,4vw,1.9rem);line-height:1;overflow-wrap:anywhere}
.payment-popup-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.payment-popup-summary div{border:1px solid var(--line);border-radius:16px;background:#fff;padding:11px}
.payment-popup-summary span{display:block;color:var(--muted);font-size:12px;font-weight:850}
.payment-popup-summary b{display:block;color:var(--ink);font-size:1.08rem}
.payment-instruction-list{display:grid;gap:8px;margin:12px 0}
.payment-instruction-list div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;border:1px solid rgba(235,199,220,.72);border-radius:16px;background:var(--brand-soft-2);padding:10px}
.payment-instruction-list b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px}
.payment-instruction-list span{color:var(--text);font-weight:760;line-height:1.4}
.payment-whatsapp-actions,.payment-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.payment-popup-actions{border-top:1px solid var(--line);padding-top:12px}
.payment-popup-actions .btn,.payment-whatsapp-actions .btn{width:100%}
@media(max-width:640px){
  .payment-popup-shell{align-items:flex-end;padding:8px}
  .payment-popup-modal{width:100%;max-height:94dvh;border-radius:24px 24px 0 0;padding:16px}
  .payment-popup-head{gap:10px}
  .payment-number-card,.payment-popup-summary,.payment-whatsapp-actions,.payment-popup-actions{grid-template-columns:1fr}
  .payment-number-card .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .payment-popup-shell,.payment-popup-modal{animation:none!important;transition:none!important}
}


/* v24.0.3: checkout delivery address selector */
.delivery-address-panel{background:linear-gradient(135deg,#fff,#fff8fc);border-color:rgba(235,199,220,.86)}
.delivery-address-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.delivery-address-head b{display:block;color:var(--ink);font-size:1.02rem}
.delivery-address-head p{margin:3px 0 0}
.checkout-address-cards{display:grid;gap:10px;margin:10px 0 12px}
.delivery-address-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:flex-start;border:1px solid rgba(229,231,235,.96);border-radius:18px;background:#fff;padding:12px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}
.delivery-address-card:hover{border-color:var(--brand-line);box-shadow:0 12px 28px rgba(193,53,132,.08);transform:translateY(-1px)}
.delivery-address-card.selected{border-color:var(--brand);background:linear-gradient(135deg,#fff,#fff6fb);box-shadow:0 14px 34px rgba(193,53,132,.12)}
.delivery-address-card input{width:18px;height:18px;margin-top:3px;accent-color:var(--brand)}
.delivery-address-card-body{display:grid;gap:3px;min-width:0;color:var(--text);font-size:14px;line-height:1.42}
.delivery-address-card-body strong{color:var(--ink);font-size:15px}
.delivery-address-card-body span{overflow-wrap:anywhere}
.delivery-address-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--brand)}
.delivery-address-title em{font-style:normal;border:1px solid #a7f3d0;background:#ecfdf5;color:#047857;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900}
.delivery-address-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.delivery-address-actions.compact{margin-top:6px}
.checkout-address-empty{border:1px dashed var(--brand-line);border-radius:18px;padding:14px;background:#fff;text-align:left}
.checkout-address-empty p{margin:4px 0 0}
.checkout-address-form{margin-top:14px;border:1px solid var(--brand-line);border-radius:20px;background:#fff;padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}
.address-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.address-form-grid .field{margin:0}
.address-line-field{grid-column:1/-1;min-height:76px;resize:vertical}
.checkout-address-status{margin-top:10px;border:1px solid rgba(180,83,9,.2);border-radius:14px;background:#fff7ed;color:#9a3412;padding:10px 12px;font-size:13px;font-weight:800}
@media(max-width:640px){
  .delivery-address-head{align-items:flex-start}
  .delivery-address-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .delivery-address-actions .btn{width:100%}
  .address-form-grid{grid-template-columns:1fr}
  .delivery-address-card{grid-template-columns:24px minmax(0,1fr);padding:11px;border-radius:16px}
}

/* v25.0.2: mobile offer/sale hero scale-to-screen fix.
   Keep desktop premium layout, but let mobile content size itself instead of clipping. */
@media(max-width:768px){
  .offer-page-shell.offer-responsive-shell{
    width:calc(100% - 24px);
    max-width:none;
    padding:10px 0 28px;
    margin-left:auto;
    margin-right:auto;
    overflow-x:clip;
  }
  .offer-sale-stage{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    gap:12px;
    margin:10px 0 16px;
    width:100%;
    min-width:0;
  }
  .offer-coupon-banner{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0!important;
    height:auto!important;
    padding:16px;
    border-radius:22px;
    overflow:visible;
    box-sizing:border-box;
  }
  .offer-coupon-banner.has-uploaded-offer-banner{
    padding:16px;
    overflow:visible;
  }
  .offer-page-uploaded-banner{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:16/9;
    border-radius:16px;
    overflow:hidden;
  }
  .offer-coupon-banner::after{
    display:none;
  }
  .coupon-paper{
    display:grid;
    grid-template-columns:1fr!important;
    gap:12px;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0!important;
    height:auto!important;
    padding:16px;
    border-radius:20px;
    clip-path:none!important;
    overflow:visible!important;
    box-sizing:border-box;
  }
  .coupon-copy{
    min-width:0;
    max-width:100%;
    overflow:visible!important;
  }
  .coupon-copy h1{
    max-width:100%;
    font-size:clamp(1.8rem,9vw,3rem)!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    overflow-wrap:anywhere;
    word-break:normal;
    text-wrap:balance;
    hyphens:auto;
  }
  .coupon-copy p{
    max-width:100%;
    font-size:clamp(.9rem,3.6vw,1rem);
    line-height:1.42;
    overflow-wrap:anywhere;
  }
  .coupon-deal-box{
    width:100%;
    max-width:100%;
    min-width:0;
    border-left:0!important;
    border-top:2px dashed rgba(123,24,242,.28);
    padding-left:0!important;
    padding-top:12px!important;
    gap:6px;
    overflow:visible;
    align-self:auto;
  }
  .coupon-deal-box b{
    font-size:clamp(1.2rem,6vw,2rem)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere;
  }
  .coupon-deal-box span,
  .coupon-deal-box small{
    overflow-wrap:anywhere;
  }
  .coupon-countdown,
  .offer-countdown{
    display:flex;
    width:100%;
    max-width:100%;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 8px;
    margin:12px 0 0;
    padding:10px 12px;
    white-space:normal;
    text-align:center;
    overflow:visible;
    box-sizing:border-box;
  }
  .offer-side-stack{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .offer-mini-banner{
    min-width:0;
    min-height:0;
    height:auto;
    justify-content:flex-start;
    padding:14px;
    overflow-wrap:anywhere;
  }
  .offer-mini-banner b{
    font-size:clamp(1rem,4.5vw,1.25rem);
    line-height:1.14;
    overflow-wrap:anywhere;
  }
  .offer-strip-nav,
  .offer-mini-grid,
  .home-offer-rail,
  .home-sale-rail{
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .offer-deal-shelf,
  .bulk-offer-panel{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .responsive-offer-grid{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Home hero offer card also scales to content on phones. */
  .hero{
    grid-template-columns:1fr;
    width:auto;
    max-width:calc(100vw - 24px);
    height:auto;
    padding:16px;
    gap:16px;
    overflow:visible;
  }
  .hero h1{
    font-size:clamp(2rem,10vw,3rem);
    line-height:1.04;
    overflow-wrap:anywhere;
  }
  .hero-logo-card.hero-offer-feature,
  .hero-offer-feature.is-sale-banner-mode{
    width:100%;
    min-height:0;
    height:auto;
    overflow:visible;
    padding:10px;
  }
  .hero-offer-feature.is-offer-loaded{
    grid-template-rows:auto auto;
  }
  .home-sale-banner-card{
    width:100%;
    min-height:0!important;
    height:auto!important;
    overflow:visible;
  }
  .home-uploaded-sale-art{
    position:relative;
    display:block;
    aspect-ratio:16/9;
  }
  .home-uploaded-sale-art img,
  .offer-page-uploaded-banner img{
    object-fit:contain;
    object-position:center;
  }
  .home-sale-copy-layer{
    position:relative;
    inset:auto;
    width:auto!important;
    max-width:calc(100% - 16px);
    margin:8px;
    transform:none!important;
    overflow:visible;
    backdrop-filter:none;
  }
  .home-sale-banner-card.no-uploaded-banner .home-sale-copy-layer{
    position:relative;
    inset:auto;
    width:auto!important;
    max-width:calc(100% - 16px);
    margin:8px;
    transform:none!important;
    text-align:left;
  }
  .home-sale-copy-layer h2{
    font-size:clamp(1.35rem,7.8vw,2.2rem)!important;
    line-height:1.05;
    letter-spacing:-.035em;
    overflow-wrap:anywhere;
    text-wrap:balance;
  }
  .home-sale-price-line b{
    font-size:clamp(1rem,5vw,1.35rem);
  }
}
@media(max-width:480px){
  .offer-page-shell.offer-responsive-shell{
    width:calc(100% - 20px);
    padding-top:8px;
  }
  .offer-coupon-banner{
    padding:14px;
    border-radius:20px;
  }
  .coupon-paper{
    padding:14px;
    border-radius:18px;
  }
  .offer-side-stack{
    grid-template-columns:1fr;
  }
  .responsive-offer-grid{
    grid-template-columns:1fr;
  }
  .coupon-copy h1{
    font-size:clamp(1.72rem,9vw,2.3rem)!important;
  }
  .coupon-deal-box b{
    font-size:clamp(1.2rem,7vw,1.75rem)!important;
  }
  .offer-page-uploaded-banner{
    aspect-ratio:16/9;
  }
}


/* v25.0.4 auth cleanup: keep beta-only providers/phone OTP disabled without breaking layout. */
.provider-grid-single{grid-template-columns:1fr!important}
.auth-beta-note{margin:10px 0 0;color:#7a6270}
.beta-pill,.verification-pill.beta{display:inline-flex;align-items:center;gap:4px;border:1px solid #ead3aa;background:#fff8e8;color:#7a4b00;border-radius:999px;font-size:.78rem;font-weight:900;letter-spacing:.01em;padding:4px 9px;vertical-align:middle}
.verification-pill.beta{font-size:.85rem;padding:8px 11px}
.auth-beta-card{border-style:dashed;background:linear-gradient(180deg,#fffdf7,#fff7fb)}
.auth-beta-disabled[hidden]{display:none!important}
@media(max-width:760px){.provider-grid-single{grid-template-columns:1fr!important}.auth-beta-note{font-size:.88rem}}

/* V25.1.0 - buyer order stage timeline / production / shipment tracker */
.order-tracker-card{padding:0;overflow:hidden;border-radius:30px;border:1px solid rgba(229,231,235,.96);background:#fff;box-shadow:0 16px 44px rgba(15,23,42,.07);}
.order-summary-top{display:grid;grid-template-columns:112px minmax(0,1fr) minmax(220px,auto);gap:18px;align-items:center;padding:22px;background:linear-gradient(135deg,#fff,#fff7fb);border-bottom:1px solid rgba(229,231,235,.9);}
.order-product-preview{width:112px;height:112px;border-radius:24px;border:1px solid var(--brand-line);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--brand);font-weight:950;font-size:30px;box-shadow:0 12px 28px rgba(193,53,132,.08);}
.order-product-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.order-main-meta{min-width:0;}.order-main-meta h2{margin:2px 0 4px;font-size:clamp(1.25rem,4vw,1.85rem);overflow-wrap:anywhere;}.order-main-meta p{margin:4px 0;overflow-wrap:anywhere;}
.order-total-box{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;}.order-total-box>b{font-size:1.35rem;color:var(--brand-dark);}.status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);font-weight:900;font-size:12px;line-height:1.1;text-align:center;}.status-badge.danger{background:#FEF2F2;border-color:#FECACA;color:#B91C1C;}
.order-tracker-card .order-items{padding:14px 22px;border-bottom:1px solid rgba(229,231,235,.8);}.order-tracker-card .order-item{border:1px solid rgba(229,231,235,.8);border-radius:18px;padding:12px 14px;margin:8px 0;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;}.order-tracker-card .order-item small{grid-column:1/-1;color:var(--muted);}
.order-timeline{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 22px 22px;position:relative;}
.order-stage{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;border:1px solid rgba(229,231,235,.9);border-radius:22px;padding:15px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.035);}
.order-stage h3{margin:0 0 4px;font-size:1rem;line-height:1.25;}.order-stage p{margin:4px 0;overflow-wrap:anywhere;}.stage-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:950;border:1px solid var(--line);background:#F8FAFC;color:#64748B;}.order-stage.done{border-color:#BBF7D0;background:#F0FDF4;}.order-stage.done .stage-dot{background:#16A34A;color:#fff;border-color:#16A34A;}.order-stage.active{border-color:var(--brand-line);background:#FFF7FB;box-shadow:0 10px 26px rgba(193,53,132,.09);}.order-stage.active .stage-dot{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-color:transparent;}.order-stage.pending{opacity:.74;}
.production-substeps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px;}.production-chip{min-width:0;border:1px solid var(--line);border-radius:16px;padding:9px 10px;background:#fff;display:flex;flex-direction:column;gap:3px;}.production-chip b{font-size:12px;line-height:1.2;}.production-chip em{font-style:normal;font-size:11px;color:var(--muted);}.production-chip.done{border-color:#BBF7D0;background:#F0FDF4;color:#15803D;}.production-chip.active{border-color:#F9A8D4;background:#FFF7FB;color:var(--brand);}
.shipment-card,.damage-card{border:1px dashed var(--brand-line);border-radius:18px;padding:12px;margin-top:10px;background:#fff;}.shipment-card p{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0;}.shipment-card .btn{margin-top:8px;}.damage-card{background:#F0FDF4;border-color:#BBF7D0;}.damage-card.expired{background:#F8FAFC;border-color:#E2E8F0;}.timeline-history{margin:0 22px 22px;border:1px solid var(--line);border-radius:20px;padding:12px 14px;background:#fff;}.timeline-history summary{font-weight:950;cursor:pointer;color:var(--brand);}.timeline-history div{border-top:1px solid var(--line);padding:10px 0;}.timeline-history small{display:block;color:var(--muted);}.timeline-history p{margin:4px 0 0;color:#334155;}
@media(max-width:768px){.order-summary-top{grid-template-columns:84px minmax(0,1fr);padding:16px;gap:12px;}.order-product-preview{width:84px;height:84px;border-radius:18px;}.order-total-box{grid-column:1/-1;align-items:stretch;}.order-total-box .btn,.order-total-box .status-badge{width:100%;justify-content:center;}.order-tracker-card .order-items,.order-timeline{padding-left:14px;padding-right:14px;}.order-stage{grid-template-columns:36px minmax(0,1fr);padding:13px;border-radius:18px;}.stage-dot{width:30px;height:30px;}.production-substeps{grid-template-columns:1fr 1fr;}.shipment-card p{display:block;}.order-main-meta h2{font-size:1.25rem;}}
@media(max-width:430px){.order-summary-top{grid-template-columns:1fr;}.order-product-preview{width:100%;height:150px;}.production-substeps{grid-template-columns:1fr;}.order-stage{grid-template-columns:1fr;}.stage-dot{margin-bottom:4px;}.timeline-history{margin-left:14px;margin-right:14px;}}

/* V25.1.1 - My Orders summary list + dedicated tracking page redesign */
.orders-page-shell{max-width:1180px;margin:30px auto 80px;padding:0 20px;}
.orders-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;}
.orders-page-head h1{margin:.2rem 0 .35rem;}
.orders-list-grid{display:grid;gap:16px;}
.orders-list-card{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(210px,auto);gap:18px;align-items:center;border:1px solid rgba(229,231,235,.96);border-radius:28px;padding:16px;background:#fff;box-shadow:0 14px 40px rgba(15,23,42,.065);overflow:hidden;}
.orders-list-image{width:132px;height:132px;border-radius:22px;border:1px solid var(--brand-line);background:linear-gradient(135deg,#fff7fb,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--brand);font-weight:950;font-size:32px;text-decoration:none;}
.orders-list-image img{width:100%;height:100%;object-fit:cover;display:block;}
.orders-list-info,.orders-list-actions,.tracking-hero-main,.tracking-hero-side{min-width:0;}
.orders-list-info h2,.tracking-hero-main h1{margin:2px 0 6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:normal;line-height:1.14;}
.orders-list-info h2{font-size:clamp(1.15rem,2.4vw,1.6rem);}
.tracking-hero-main h1{font-size:clamp(1.45rem,4vw,2.3rem);}
.orders-list-info p{margin:4px 0;min-width:0;overflow-wrap:break-word;}
.orders-list-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;min-width:0;}
.orders-list-badges .status-badge{max-width:100%;white-space:normal;text-align:left;}
.orders-list-badges .status-badge b{margin-right:3px;}
.orders-list-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.orders-list-actions .btn{min-width:160px;justify-content:center;}
.orders-list-total{font-size:1.35rem;color:var(--brand-dark);}
.order-tracking-detail{display:grid;gap:16px;}
.tracking-hero-card{display:grid;grid-template-columns:154px minmax(0,1fr) minmax(210px,auto);gap:18px;align-items:center;border:1px solid rgba(229,231,235,.96);border-radius:30px;padding:20px;background:linear-gradient(135deg,#fff,#fff7fb);box-shadow:0 16px 44px rgba(15,23,42,.07);}
.tracking-image{width:154px;height:154px;}
.tracking-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.tracking-hero-side>b{font-size:1.6rem;color:var(--brand-dark);}
.tracking-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:1px solid var(--line);border-radius:24px;background:#fff;padding:14px;box-shadow:var(--shadow-sm);}
.tracking-summary-grid div{border:1px solid rgba(229,231,235,.85);border-radius:18px;padding:12px;min-width:0;background:#fff;}
.tracking-summary-grid b{display:block;color:var(--brand);margin-bottom:5px;}
.tracking-summary-grid span{display:block;color:#334155;overflow-wrap:anywhere;}
.shipment-substeps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;}
.shipment-step{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:14px;padding:8px 9px;font-size:12px;font-weight:850;background:#fff;color:#475569;min-width:0;}
.shipment-step i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#F1F5F9;color:#64748B;font-style:normal;flex:0 0 auto;font-size:11px;}
.shipment-step.done{border-color:#BBF7D0;background:#F0FDF4;color:#15803D;}.shipment-step.done i{background:#16A34A;color:#fff;}
.shipment-step.active{border-color:var(--brand-line);background:#FFF7FB;color:var(--brand);}.shipment-step.active i{background:var(--brand);color:#fff;}
.delivery-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.delivery-option-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:18px;background:#fff;padding:12px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.delivery-option-card.selected{border-color:var(--brand-line);box-shadow:0 10px 24px rgba(193,53,132,.09);background:#FFF7FB;}
.delivery-option-card input{accent-color:var(--brand);}.delivery-option-card small{display:block;color:var(--muted);margin-top:3px;line-height:1.3;}.delivery-option-card strong{color:var(--brand-dark);white-space:nowrap;}
.delivery-total-line{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#334155;}.delivery-total-line.final{border-top:1px solid var(--line);padding-top:10px;font-size:1.1rem;font-weight:950;color:var(--ink);}
@media(max-width:768px){
  .orders-page-shell{padding:0 14px;margin-top:18px;}.orders-page-head{display:grid;gap:12px;}
  .orders-list-card,.tracking-hero-card{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:13px;border-radius:22px;}
  .orders-list-image{width:96px;height:96px;border-radius:18px;}.tracking-image{width:96px;height:96px;}
  .orders-list-actions,.tracking-hero-side{grid-column:1/-1;align-items:stretch;}.orders-list-actions .btn,.tracking-hero-side .btn{width:100%;min-width:0;}
  .orders-list-info h2,.tracking-hero-main h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:normal;overflow-wrap:break-word;}
  .tracking-summary-grid{grid-template-columns:1fr 1fr;padding:12px;}.shipment-substeps{grid-template-columns:1fr 1fr;}.delivery-option-grid{grid-template-columns:1fr;}
}
@media(max-width:430px){
  .orders-list-card,.tracking-hero-card{grid-template-columns:1fr;}
  .orders-list-image,.tracking-image{width:100%;height:180px;}.tracking-summary-grid,.shipment-substeps{grid-template-columns:1fr;}
  .orders-list-info h2,.tracking-hero-main h1{font-size:1.15rem;}
}


/* v26 preview sync and production zip */
.product-preview-gallery,.stitched-gallery-admin.single{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;min-width:0}.preview-upload-block{border:1px solid rgba(193,53,132,.16);border-radius:18px;padding:14px;margin:14px 0;background:rgba(255,255,255,.72)}.preview-upload-block h4{margin:0 0 4px}.production-zip-panel,.production-zip-order-panel{border:1px dashed rgba(20,92,166,.28);border-radius:18px;padding:14px;margin:14px 0;background:rgba(20,92,166,.06)}.gallery-thumb-btn span{white-space:normal;overflow-wrap:normal;word-break:normal}.custom-preview-fallback{object-fit:contain;max-width:100%;max-height:min(56vh,520px)}@media(max-width:768px){.preview-upload-block{padding:12px}.production-zip-panel,.production-zip-order-panel{padding:12px}.gallery{min-width:0}.thumbs{max-width:100%;overflow-x:auto}.gallery-thumb-btn{min-width:112px}.mainimg{max-width:100%;height:auto;object-fit:contain}}

/* v26.0.1 buyer multi-preview gallery fix */
.product-page .gallery{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}
.product-page .thumbs{
  min-width:0;
  max-width:100%;
  scrollbar-width:thin;
}
.product-page .gallery-thumb-btn{
  min-width:0;
  width:100%;
  max-width:104px;
  border-radius:18px;
}
.product-page .gallery-thumb-btn img{
  display:block;
  width:88px;
  height:88px;
  object-fit:cover;
  background:#fff8fc;
}
.product-page .gallery-thumb-btn.active img,
.product-page .gallery-thumb-btn[aria-pressed="true"] img{
  border-color:var(--brand,#c13584);
  box-shadow:0 0 0 3px rgba(193,53,132,.14),0 10px 28px rgba(193,53,132,.12);
}
.product-page .gallery-thumb-btn span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  word-break:normal;
}
.product-page .mainimg{
  object-fit:contain;
  height:auto;
  max-width:100%;
  background:linear-gradient(135deg,#fff,#fff8fc);
}
@media(max-width:760px){
  .product-page .gallery{
    grid-template-columns:1fr;
    gap:12px;
  }
  .product-page .mainimg{
    width:100%;
    max-height:min(68vh,440px);
    aspect-ratio:1/1;
    object-fit:contain;
  }
  .product-page .thumbs{
    order:2;
    display:flex;
    flex-direction:row;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 10px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .product-page .gallery-thumb-btn{
    flex:0 0 92px;
    width:92px;
    max-width:92px;
    scroll-snap-align:start;
  }
  .product-page .gallery-thumb-btn img{
    width:76px;
    height:76px;
    margin:0 auto;
  }
  .product-page .gallery-thumb-btn span{
    font-size:10px;
    line-height:1.18;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}
@media(max-width:420px){
  .product-page .mainimg{
    max-height:min(62vh,360px);
    border-radius:20px;
  }
  .product-page .gallery-thumb-btn{
    flex-basis:86px;
    width:86px;
    max-width:86px;
  }
  .product-page .gallery-thumb-btn img{
    width:70px;
    height:70px;
    border-radius:16px;
  }
}

/* v26.0.2 buyer preview image loading/error fix */
.product-page .product-main-preview-shell{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  aspect-ratio:1/1;
  min-height:clamp(260px,42vw,520px);
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#fff,#fff8fc);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.product-page .product-main-preview-shell .mainimg{
  width:100%;
  height:100%;
  max-height:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  object-fit:contain;
  display:block;
  opacity:0;
  transition:opacity .18s ease;
}
.product-page .product-main-preview-shell[data-preview-state="loaded"] .mainimg,
.product-page .product-main-preview-shell .mainimg.is-loaded{
  opacity:1;
}
.product-page .product-main-preview-shell[data-preview-state="failed"] .mainimg{
  opacity:0;
}
.product-preview-loading,
.product-preview-error{
  position:absolute;
  inset:16px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  border-radius:22px;
  color:#5f4150;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,248,252,.96));
  border:1px solid rgba(193,53,132,.12);
  padding:18px;
}
.product-preview-loading[hidden],
.product-preview-error[hidden],
.thumb-error[hidden]{display:none!important}
.dof-mini-spinner{
  width:24px;
  height:24px;
  border-radius:999px;
  border:3px solid rgba(193,53,132,.16);
  border-top-color:var(--brand,#c13584);
  animation:dofSpin .8s linear infinite;
}
@keyframes dofSpin{to{transform:rotate(360deg)}}
.preview-error-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.preview-error-actions .btn{min-height:42px}
.product-page .thumb-image-wrap{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  margin:0 auto;
  border-radius:18px;
  background:#fff8fc;
}
.product-page .thumb-image-wrap img{margin:0}.product-page .thumb-error{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:2px dashed rgba(193,53,132,.28);
  border-radius:18px;
  color:#9a1d5c;
  background:linear-gradient(135deg,#fff,#fff4fb);
  font-weight:900;
  font-size:18px;
}
.product-page .thumb-error small{font-size:9px;letter-spacing:.02em;text-transform:uppercase}.product-page .gallery-thumb-btn.thumb-load-failed img{display:none}.product-page .gallery-thumb-btn.thumb-load-failed .thumb-error{display:flex!important}.product-page .gallery-thumb-btn.thumb-load-failed span:last-child{color:#9a1d5c}
@media(max-width:760px){
  .product-page .product-main-preview-shell{min-height:clamp(240px,82vw,420px);border-radius:22px}.product-preview-loading,.product-preview-error{inset:10px;border-radius:18px;padding:14px}.product-page .thumb-image-wrap{width:76px;height:76px;border-radius:16px}.product-page .thumb-error{border-radius:16px}.preview-error-actions{width:100%}.preview-error-actions .btn{flex:1 1 140px;min-width:0}
}
@media(max-width:420px){.product-page .product-main-preview-shell{min-height:clamp(220px,84vw,340px);border-radius:20px}.product-page .thumb-image-wrap{width:70px;height:70px}.product-preview-error p{font-size:12px}}

/* v26.1.0 buyer page flip navigation animation */
.page-transition-enabled body{
  perspective:1200px;
  perspective-origin:50% 28%;
}
.page-transition-shell{
  transform-origin:50% 32%;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
body.page-transition-ready .page-transition-shell{
  will-change:auto;
}
body.page-transition-enter .page-transition-shell{
  animation:dofPageFlipEnter 460ms cubic-bezier(.2,.75,.22,1) both;
  will-change:transform,opacity;
}
body.page-transition-exit .page-transition-shell{
  animation:dofPageFlipExit 420ms cubic-bezier(.55,.08,.28,.99) both;
  pointer-events:none;
  will-change:transform,opacity;
}
html.page-is-navigating,
body.page-is-navigating{
  cursor:progress;
}
body.page-is-navigating a,
body.page-is-navigating button{
  pointer-events:none;
}
@keyframes dofPageFlipExit{
  0%{opacity:1;transform:perspective(1200px) rotateY(0deg) translateY(0) scale(1);filter:none}
  45%{opacity:.74;transform:perspective(1200px) rotateY(-6deg) translateY(4px) scale(.994)}
  100%{opacity:.18;transform:perspective(1200px) rotateY(-13deg) translateY(12px) scale(.985);filter:blur(.4px)}
}
@keyframes dofPageFlipEnter{
  0%{opacity:0;transform:perspective(1200px) rotateY(10deg) translateY(12px) scale(.988);filter:blur(.35px)}
  60%{opacity:1;transform:perspective(1200px) rotateY(-1.4deg) translateY(0) scale(1)}
  100%{opacity:1;transform:perspective(1200px) rotateY(0deg) translateY(0) scale(1);filter:none}
}
@media(max-width:760px){
  .page-transition-enabled body{perspective:900px;perspective-origin:50% 20%}
  body.page-transition-enter .page-transition-shell{animation-duration:360ms}
  body.page-transition-exit .page-transition-shell{animation-duration:330ms}
  @keyframes dofPageFlipExit{
    0%{opacity:1;transform:perspective(900px) rotateX(0deg) translateY(0) scale(1)}
    100%{opacity:.2;transform:perspective(900px) rotateX(4deg) translateY(10px) scale(.99);filter:blur(.25px)}
  }
  @keyframes dofPageFlipEnter{
    0%{opacity:0;transform:perspective(900px) rotateX(-3deg) translateY(10px) scale(.992);filter:blur(.25px)}
    100%{opacity:1;transform:perspective(900px) rotateX(0deg) translateY(0) scale(1);filter:none}
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-enter .page-transition-shell,
  body.page-transition-exit .page-transition-shell{
    animation:dofPageFadeReduced 90ms ease-out both!important;
    filter:none!important;
  }
  .page-transition-shell{transition:none!important;will-change:auto!important}
  @keyframes dofPageFadeReduced{
    from{opacity:.72}
    to{opacity:1}
  }
}

/* v26.1.1 customization preview regression fix: uploaded part previews render full-size and fail visibly. */
.custom-preview-fallback-wrap.stitched-live-preview{
  display:grid;
  gap:10px;
  justify-items:center;
  align-items:center;
  min-height:clamp(300px,42vw,520px);
  overflow:hidden;
  background:var(--selected-cloth-color,#07080b);
}
.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{
  display:block;
  width:100%;
  max-width:min(100%,720px)!important;
  height:clamp(260px,38vw,480px);
  max-height:520px;
  object-fit:contain;
  opacity:1!important;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.14);
}
.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback[hidden]{display:none!important}
.custom-preview-image-error{
  width:min(100%,460px);
  border:1px solid rgba(190,18,60,.22);
  border-radius:18px;
  background:#fff1f2;
  color:#9f1239;
  padding:14px;
  text-align:center;
  box-shadow:0 12px 28px rgba(190,18,60,.10);
}
.custom-preview-image-error b{display:block;margin-bottom:4px;font-size:15px}
.custom-preview-image-error small{display:block;color:#9f1239;line-height:1.45}
.custom-preview-fallback-wrap.stitched-live-preview[data-preview-state="loading"] .custom-preview-fallback{filter:saturate(.92);opacity:.72!important}
.custom-preview-fallback-wrap.stitched-live-preview[data-preview-state="failed"]{background:#fff7f8}
@media(max-width:760px){
  .custom-preview-fallback-wrap.stitched-live-preview{min-height:300px;padding:12px}
  .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{height:300px;border-radius:16px}
}


/* v26.1.2 buyer UI animation + customization modal polish */
body.modal-open .page-transition-shell,
body.design-review-open .page-transition-shell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  will-change:auto!important;
}
.custom-modal-shell,
.custom-modal-shell *{box-sizing:border-box;min-width:0}
.custom-modal-shell{
  z-index:220;
  padding:clamp(10px,2vw,16px);
  align-items:center;
  justify-content:center;
  overflow:hidden;
  overscroll-behavior:contain;
  pointer-events:auto;
}
.custom-modal-backdrop{
  background:rgba(15,23,42,.34)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
.custom-modal{
  width:min(1220px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  height:auto!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  padding:0!important;
  border-radius:26px;
  isolation:isolate;
}
.custom-modal-head{
  flex:0 0 auto;
  position:relative;
  z-index:3;
  margin:0!important;
  padding:clamp(14px,2vw,20px) clamp(14px,2vw,22px)!important;
  background:linear-gradient(180deg,#fff 88%,rgba(255,255,255,.94));
  border-bottom:1px solid var(--line);
}
.custom-modal-head .icon-btn{
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:4;
  background:#fff!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.custom-modal-head h2{font-size:clamp(1.65rem,3.2vw,2.45rem)!important;line-height:1.04!important;overflow-wrap:normal;word-break:normal}
.custom-modal .muted{overflow-wrap:normal;word-break:normal}
.custom-form{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding:clamp(14px,2vw,22px)!important;
}
.custom-workbench{
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr)!important;
  gap:clamp(14px,2vw,22px)!important;
  align-items:start;
}
.custom-preview-panel{
  top:12px!important;
  overflow:visible!important;
  border-radius:22px;
  padding:clamp(12px,1.6vw,16px)!important;
}
.custom-preview-title{gap:10px;align-items:flex-start}.custom-preview-title span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.custom-preview-fallback-wrap.stitched-live-preview{
  min-height:clamp(340px,38vw,540px)!important;
  padding:12px!important;
  border-radius:22px;
  place-items:center;
}
.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{
  width:100%!important;
  height:clamp(300px,36vw,500px)!important;
  max-height:52vh!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  opacity:1!important;
  filter:none!important;
  background:rgba(255,255,255,.96)!important;
}
.custom-preview-fallback-wrap.stitched-live-preview[data-preview-state="loading"] .custom-preview-fallback{
  opacity:.94!important;
  filter:saturate(.98)!important;
}
.custom-preview-fallback-wrap.stitched-live-preview p{
  width:100%;
  margin:0!important;
  font-size:12.5px;
  line-height:1.42;
  background:rgba(255,255,255,.92)!important;
}
.machine-preview-secondary{position:relative;border-radius:22px;padding:10px;background:var(--selected-cloth-color,#07080b)}
.dst-preview-canvas{min-height:min(52vh,520px)!important;object-fit:contain}
.preview-loading{inset:18px!important;border-radius:18px;background:rgba(5,5,8,.78)!important;backdrop-filter:blur(2px)}
.cloth-preview-status{grid-template-columns:34px auto minmax(0,1fr);max-width:100%;overflow:hidden}
.cloth-preview-status small{white-space:normal;overflow-wrap:anywhere;word-break:normal}
.cloth-color-card{overflow:hidden}.cloth-color-copy ul{line-height:1.42}.cloth-color-picker{grid-template-columns:38px minmax(0,1fr) auto!important}.cloth-color-picker .field,.custom-color-picker .field,.custom-stack .field{width:100%;max-width:100%;min-width:0}.cloth-color-picker .catalog-pdf-btn,.custom-color-picker-catalog .catalog-pdf-btn{white-space:nowrap;max-width:100%}
.custom-controls-panel{min-width:0;overflow:visible}.custom-stack{min-width:0}.custom-stack>span{font-weight:850}.custom-field-row{grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:12px;min-width:0}.custom-field-row span,.custom-field-row small{min-width:0;overflow-wrap:normal;word-break:normal}.custom-color-picker-catalog{grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center}.part-color-card{overflow:hidden}.part-slot-row{min-width:0}.color-copy-tools{gap:8px}.color-copy-tools .btn{min-width:0;white-space:normal}.custom-live-summary{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 0}.custom-modal-actions{position:sticky;bottom:calc(-1 * clamp(14px,2vw,22px));z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.86),#fff 36%);padding-top:12px;padding-bottom:2px;margin-top:16px!important}.custom-modal-actions .btn{min-width:0}
.design-review-backdrop,.review-zoom-backdrop{background:rgba(15,23,42,.42)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
@media(max-width:1020px){
  .custom-workbench{grid-template-columns:1fr!important}.custom-preview-panel{position:relative!important;top:auto!important}.custom-preview-fallback-wrap.stitched-live-preview{min-height:clamp(310px,52vw,480px)!important}.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{height:clamp(280px,48vw,440px)!important;max-height:none!important}.custom-field-row{grid-template-columns:minmax(0,1fr)}.custom-color-picker-catalog{grid-template-columns:38px minmax(0,1fr)!important}.custom-color-picker-catalog .catalog-pdf-btn{grid-column:1/-1;width:100%}
}
@media(max-width:760px){
  .custom-modal-shell{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important;align-items:center!important}.custom-modal{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:22px!important}.custom-modal-head{padding:13px 14px!important;gap:10px!important}.custom-modal-head h2{font-size:1.7rem!important}.custom-modal-head p{font-size:13px;line-height:1.35}.custom-form{padding:12px!important}.custom-preview-panel{padding:12px!important;border-radius:20px}.custom-preview-title{display:grid!important;grid-template-columns:1fr}.custom-preview-title span{display:inline-flex!important;margin-top:0!important;justify-self:start;text-align:left}.cloth-preview-status{grid-template-columns:30px minmax(0,1fr)!important;padding:8px}.cloth-preview-status b{font-size:12px}.cloth-preview-status small{grid-column:1/-1;font-size:12px}.cloth-preview-swatch{width:30px;height:30px}.custom-preview-fallback-wrap.stitched-live-preview{min-height:clamp(270px,76vw,390px)!important;padding:10px!important}.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{height:clamp(245px,70vw,350px)!important;border-radius:16px}.dst-preview-canvas{min-height:clamp(245px,70vw,350px)!important}.preview-toolbar{grid-template-columns:1fr!important}.preview-render-mode{min-width:0!important}.cloth-color-picker{grid-template-columns:34px minmax(0,1fr)!important}.cloth-color-picker .catalog-pdf-btn{grid-column:1/-1;width:100%;white-space:normal}.custom-live-summary{grid-template-columns:1fr!important}.custom-live-summary div{display:grid!important;grid-template-columns:1fr;gap:3px}.custom-modal-actions{display:grid!important;grid-template-columns:1fr!important;bottom:-12px!important;padding-bottom:max(10px,env(safe-area-inset-bottom))}.custom-modal-actions .btn{width:100%}.part-color-card{padding:12px}.custom-field-row{padding:11px 0}.measurement-grid{grid-template-columns:1fr!important}.custom-color-picker{grid-template-columns:34px minmax(0,1fr)!important}.custom-color-swatch{width:34px;height:34px}.custom-color-picker-catalog .catalog-pdf-btn{grid-column:1/-1;width:100%;white-space:normal}.preview-loading{inset:12px!important;padding:14px;font-size:13px}
}
@media(max-width:420px){
  .custom-modal{border-radius:20px!important}.custom-modal-head{align-items:flex-start}.custom-modal-head .icon-btn{width:38px;height:38px}.custom-preview-fallback-wrap.stitched-live-preview{min-height:250px!important}.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{height:232px!important}.cloth-color-copy ul{font-size:12px}.custom-preview-fallback-wrap.stitched-live-preview p{font-size:12px;padding:10px}.part-color-head{display:grid;grid-template-columns:1fr;gap:4px}.part-color-head span{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .custom-modal,.custom-modal-backdrop,.custom-preview-panel,.custom-preview-fallback,.custom-color-swatch{animation:none!important;transition:none!important}.page-transition-shell{animation:none!important;transition:none!important;transform:none!important}
}

/* v26.1.3 customization modal scroll + half flip transition fix */
html.modal-open,
body.modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.modal-open .page-transition-shell,
body.design-review-open .page-transition-shell{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
}
.page-transition-enabled body{
  perspective:1200px;
  perspective-origin:50% 42%;
}
.page-transition-shell{
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
body.page-transition-exit .page-transition-shell{
  animation:dofHalfPageFlipOut 240ms cubic-bezier(.55,.08,.32,.98) both!important;
  will-change:transform,opacity;
  pointer-events:none;
}
body.page-transition-enter .page-transition-shell{
  animation:dofHalfPageFlipIn 280ms cubic-bezier(.18,.75,.24,1) both!important;
  will-change:transform,opacity;
}
@keyframes dofHalfPageFlipOut{
  0%{opacity:1;transform:perspective(1200px) rotateY(0deg);filter:none}
  100%{opacity:.06;transform:perspective(1200px) rotateY(-90deg);filter:blur(.2px)}
}
@keyframes dofHalfPageFlipIn{
  0%{opacity:.04;transform:perspective(1200px) rotateY(90deg);filter:blur(.2px)}
  100%{opacity:1;transform:perspective(1200px) rotateY(0deg);filter:none}
}
.custom-modal-shell.customization-modal{
  position:fixed!important;
  inset:0!important;
  z-index:240!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100vw!important;
  height:100dvh!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  isolation:isolate;
}
.custom-modal-shell.customization-modal .custom-modal-backdrop{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:rgba(15,23,42,.30)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
.custom-modal-shell.customization-modal .custom-modal{
  position:relative!important;
  z-index:1!important;
  width:min(1240px,calc(100vw - 32px))!important;
  height:min(900px,calc(100dvh - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:24px!important;
  background:#fff!important;
}
.custom-modal-shell.customization-modal .custom-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:3!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:16px 20px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
}
.custom-modal-shell.customization-modal .custom-modal-head .icon-btn{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  flex:0 0 auto!important;
  z-index:4!important;
}
.custom-modal-shell.customization-modal .custom-form{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 20px max(18px,env(safe-area-inset-bottom))!important;
  scrollbar-gutter:stable;
}
.custom-modal-shell.customization-modal .custom-workbench{
  display:grid!important;
  grid-template-columns:minmax(340px,.88fr) minmax(0,1.12fr)!important;
  gap:18px!important;
  align-items:start!important;
  min-width:0!important;
}
.custom-modal-shell.customization-modal .custom-preview-panel{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
  max-height:none!important;
  overflow:visible!important;
}
.custom-modal-shell.customization-modal .custom-preview-fallback-wrap.stitched-live-preview{
  min-height:0!important;
  height:auto!important;
  padding:10px!important;
  overflow:hidden!important;
}
.custom-modal-shell.customization-modal .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{
  width:100%!important;
  height:clamp(250px,32vw,430px)!important;
  max-height:min(430px,42dvh)!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
}
.custom-modal-shell.customization-modal .machine-preview-secondary{
  max-height:none!important;
  overflow:visible!important;
}
.custom-modal-shell.customization-modal .dst-preview-canvas{
  width:100%!important;
  min-height:clamp(250px,32vw,430px)!important;
  max-height:min(430px,42dvh)!important;
  object-fit:contain!important;
}
.custom-modal-shell.customization-modal .custom-controls-panel,
.custom-modal-shell.customization-modal .custom-stack,
.custom-modal-shell.customization-modal .part-color-card,
.custom-modal-shell.customization-modal .custom-field-row,
.custom-modal-shell.customization-modal .measurement-grid,
.custom-modal-shell.customization-modal .custom-live-summary{
  min-width:0!important;
  max-width:100%!important;
}
.custom-modal-shell.customization-modal .cloth-color-picker,
.custom-modal-shell.customization-modal .custom-color-picker,
.custom-modal-shell.customization-modal .custom-color-picker-catalog{
  min-width:0!important;
  max-width:100%!important;
}
.custom-modal-shell.customization-modal .field,
.custom-modal-shell.customization-modal select,
.custom-modal-shell.customization-modal textarea,
.custom-modal-shell.customization-modal input{
  min-width:0!important;
  max-width:100%!important;
}
.custom-modal-shell.customization-modal .custom-modal-actions{
  position:static!important;
  bottom:auto!important;
  z-index:2!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin:18px 0 0!important;
  padding:16px 0 max(2px,env(safe-area-inset-bottom))!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
  box-shadow:none!important;
}
.custom-modal-shell.customization-modal .custom-modal-actions .btn{
  flex:0 1 auto!important;
  min-width:180px!important;
}
@media(max-width:1020px){
  .custom-modal-shell.customization-modal .custom-workbench{grid-template-columns:1fr!important}
  .custom-modal-shell.customization-modal .custom-preview-panel{position:relative!important;top:auto!important}
  .custom-modal-shell.customization-modal .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
  .custom-modal-shell.customization-modal .dst-preview-canvas{height:clamp(260px,50vw,420px)!important;max-height:none!important}
}
@media(max-width:760px){
  .page-transition-enabled body{perspective:900px;perspective-origin:50% 38%}
  body.page-transition-exit .page-transition-shell{animation-duration:200ms!important}
  body.page-transition-enter .page-transition-shell{animation-duration:240ms!important}
  @keyframes dofHalfPageFlipOut{
    0%{opacity:1;transform:perspective(900px) rotateX(0deg);filter:none}
    100%{opacity:.08;transform:perspective(900px) rotateX(88deg);filter:blur(.15px)}
  }
  @keyframes dofHalfPageFlipIn{
    0%{opacity:.05;transform:perspective(900px) rotateX(-88deg);filter:blur(.15px)}
    100%{opacity:1;transform:perspective(900px) rotateX(0deg);filter:none}
  }
  .custom-modal-shell.customization-modal{
    align-items:center!important;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  .custom-modal-shell.customization-modal .custom-modal{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:20px!important;
  }
  .custom-modal-shell.customization-modal .custom-modal-head{padding:12px 14px!important}
  .custom-modal-shell.customization-modal .custom-modal-head h2{font-size:1.55rem!important;line-height:1.08!important}
  .custom-modal-shell.customization-modal .custom-modal-head p{font-size:12.5px!important;line-height:1.32!important}
  .custom-modal-shell.customization-modal .custom-form{padding:12px 12px max(14px,env(safe-area-inset-bottom))!important}
  .custom-modal-shell.customization-modal .custom-workbench{display:flex!important;flex-direction:column!important;gap:14px!important}
  .custom-modal-shell.customization-modal .custom-preview-panel{order:1!important}
  .custom-modal-shell.customization-modal .custom-controls-panel{order:2!important}
  .custom-modal-shell.customization-modal .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
  .custom-modal-shell.customization-modal .dst-preview-canvas{height:clamp(230px,66vw,330px)!important;max-height:none!important}
  .custom-modal-shell.customization-modal .cloth-color-picker,
  .custom-modal-shell.customization-modal .custom-color-picker-catalog,
  .custom-modal-shell.customization-modal .custom-color-picker{grid-template-columns:34px minmax(0,1fr)!important}
  .custom-modal-shell.customization-modal .catalog-pdf-btn{grid-column:1/-1!important;width:100%!important;white-space:normal!important}
  .custom-modal-shell.customization-modal .custom-modal-actions{display:grid!important;grid-template-columns:1fr!important;padding-top:14px!important}
  .custom-modal-shell.customization-modal .custom-modal-actions .btn{width:100%!important;min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{animation:dofPageFadeReduced 80ms ease-out both!important;transform:none!important;filter:none!important}
}

/* v26.2.4 customization modal position fix
   Keep the modal anchored to the viewport, not the scrolled page or page flip shell. */
html.modal-open,
body.modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.modal-open .page-transition-shell,
body.design-review-open .page-transition-shell{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
}
.custom-modal-shell.customization-modal{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  z-index:9000!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  width:100dvw!important;
  min-height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  transform:none!important;
  contain:layout style!important;
  isolation:isolate!important;
}
.custom-modal-shell.customization-modal .custom-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  margin:0!important;
  background:rgba(15,23,42,.34)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  transform:none!important;
}
.custom-modal-shell.customization-modal .custom-modal{
  position:relative!important;
  z-index:9010!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none;
  margin:0!important;
  width:min(1240px,calc(100dvw - 32px))!important;
  max-width:calc(100dvw - 32px)!important;
  height:auto!important;
  max-height:calc(100dvh - 32px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(15,23,42,.28)!important;
}
.custom-modal-shell.customization-modal .custom-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  padding:16px 20px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
}
.custom-modal-shell.customization-modal .custom-modal-head .icon-btn{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  z-index:3!important;
}
.custom-modal-shell.customization-modal .custom-form{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 20px max(18px,env(safe-area-inset-bottom))!important;
}
.custom-modal-shell.customization-modal .custom-modal-actions{
  position:static!important;
  bottom:auto!important;
  margin:18px 0 0!important;
  padding:16px 0 max(4px,env(safe-area-inset-bottom))!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  .custom-modal-shell.customization-modal{
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  .custom-modal-shell.customization-modal .custom-modal{
    width:calc(100dvw - 16px)!important;
    max-width:calc(100dvw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:20px!important;
  }
  .custom-modal-shell.customization-modal .custom-modal-head{padding:12px 14px!important}
  .custom-modal-shell.customization-modal .custom-form{padding:12px 12px max(14px,env(safe-area-inset-bottom))!important}
}

/* v26.2.5 customization center + preview resolver fix
   The final modal layout is always viewport-centered. Button/card positions are
   never used for final top/left placement. */
html.modal-open,
body.modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.modal-open .page-transition-shell,
body.design-review-open .page-transition-shell{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
}
.custom-modal-shell.customization-modal{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  display:block!important;
  width:100vw!important;
  width:100dvw!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  transform:none!important;
  contain:none!important;
  isolation:isolate!important;
}
.custom-modal-shell.customization-modal .custom-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  display:block!important;
  margin:0!important;
  background:rgba(15,23,42,.32)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  transform:none!important;
  animation:dofFadeIn 180ms ease-out both!important;
}
.custom-modal-shell.customization-modal .custom-modal{
  position:fixed!important;
  z-index:9010!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate3d(-50%,-50%,0)!important;
  margin:0!important;
  width:min(96vw,1500px)!important;
  max-width:calc(100dvw - 32px)!important;
  height:auto!important;
  max-height:calc(100dvh - 32px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(15,23,42,.30)!important;
  animation:dofCustomizeCenterIn 200ms ease-out both!important;
}
.custom-modal-shell.customization-modal .custom-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  padding:16px 20px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
}
.custom-modal-shell.customization-modal .custom-modal-head .icon-btn{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  z-index:3!important;
}
.custom-modal-shell.customization-modal .custom-form{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 20px max(18px,env(safe-area-inset-bottom))!important;
}
.custom-modal-shell.customization-modal .custom-modal-actions{
  position:static!important;
  bottom:auto!important;
  margin:18px 0 0!important;
  padding:16px 0 max(4px,env(safe-area-inset-bottom))!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
  box-shadow:none!important;
}
.custom-modal-shell.customization-modal .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
.custom-modal-shell.customization-modal .dst-preview-canvas{
  width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
}
@keyframes dofCustomizeCenterIn{
  from{opacity:0;transform:translate3d(-50%,-48%,0) scale(.985)}
  to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
}
@media(max-width:760px){
  .custom-modal-shell.customization-modal .custom-modal{
    width:calc(100dvw - 16px)!important;
    max-width:calc(100dvw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:20px!important;
  }
  .custom-modal-shell.customization-modal .custom-modal-head{padding:12px 14px!important}
  .custom-modal-shell.customization-modal .custom-form{padding:12px 12px max(14px,env(safe-area-inset-bottom))!important}
  .custom-modal-shell.customization-modal .custom-workbench{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important}
  .custom-modal-shell.customization-modal .custom-modal-actions{display:grid!important;grid-template-columns:1fr!important}
  .custom-modal-shell.customization-modal .custom-modal-actions .btn{width:100%!important;min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  .custom-modal-shell.customization-modal .custom-modal,
  .custom-modal-shell.customization-modal .custom-modal-backdrop{animation:none!important;transition:none!important}
}

/* v26.2.6 customization display center position fix
   Final modal layout is always centered in the current visible viewport.
   Button/card coordinates and page scroll are never used for final placement. */
#dof-customization-modal-root{
  position:fixed!important;
  inset:0!important;
  z-index:8999!important;
  width:100dvw!important;
  height:100dvh!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform:none!important;
  contain:none!important;
  isolation:isolate!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  width:100dvw!important;
  height:100dvh!important;
  min-width:100dvw!important;
  min-height:100dvh!important;
  display:grid!important;
  align-items:center!important;
  justify-items:center!important;
  place-items:center!important;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  transform:none!important;
  opacity:1!important;
  contain:none!important;
  isolation:isolate!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  width:100dvw!important;
  height:100dvh!important;
  display:block!important;
  margin:0!important;
  background:rgba(15,23,42,.30)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  transform:none!important;
  animation:dofFadeIn 160ms ease-out both!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal{
  position:relative!important;
  z-index:9010!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  translate:none!important;
  margin:auto!important;
  width:min(96vw,1500px)!important;
  max-width:calc(100dvw - 32px)!important;
  height:auto!important;
  max-height:min(88dvh,calc(100dvh - 32px))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(15,23,42,.30)!important;
  animation:dofCustomizeSafeCenterIn 190ms ease-out both!important;
  will-change:opacity,transform;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal.is-open .custom-modal{
  transform:none!important;
  opacity:1!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  padding:16px 20px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-form{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 20px max(18px,env(safe-area-inset-bottom))!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions{
  position:static!important;
  bottom:auto!important;
  margin:18px 0 0!important;
  padding:16px 0 max(4px,env(safe-area-inset-bottom))!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
  box-shadow:none!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal.customization-force-viewport-center .custom-modal{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:auto!important;
}
@keyframes dofCustomizeSafeCenterIn{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}
@media(max-width:760px){
  #dof-customization-modal-root .custom-modal-shell.customization-modal{
    padding:max(12px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal{
    width:calc(100dvw - 16px)!important;
    max-width:calc(100dvw - 16px)!important;
    max-height:min(86dvh,calc(100dvh - 24px))!important;
    border-radius:20px!important;
  }
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-head{padding:12px 14px!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-form{padding:12px 12px max(14px,env(safe-area-inset-bottom))!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-workbench{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions{display:grid!important;grid-template-columns:1fr!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions .btn{width:100%!important;min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal,
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-backdrop{animation:none!important;transition:none!important;will-change:auto!important}
}

/* v26.2.8 customization modal TRUE display-center fix
   This is the final authoritative customization modal block. It deliberately
   overrides older duplicated modal rules and keeps final layout centered in the
   visible viewport. Click/button coordinates are used only for transform-based
   enter animation, never for final top/left layout. */
html.modal-open,
body.modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.modal-open .page-transition-shell,
body.design-review-open .page-transition-shell{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  will-change:auto!important;
}
#dof-customization-modal-root{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  width:100dvw!important;
  height:100dvh!important;
  z-index:8999!important;
  pointer-events:none!important;
  overflow:hidden!important;
  transform:none!important;
  contain:none!important;
  isolation:isolate!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  width:100dvw!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  min-width:100dvw!important;
  min-height:100dvh!important;
  z-index:9000!important;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  margin:0!important;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  transform:none!important;
  translate:none!important;
  contain:none!important;
  isolation:isolate!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  width:100dvw!important;
  height:100dvh!important;
  z-index:9000!important;
  display:block!important;
  margin:0!important;
  background:rgba(15,23,42,.32)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  transform:none!important;
  opacity:1!important;
  animation:dofCustomizationBackdropIn 160ms ease-out both!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal{
  position:relative!important;
  z-index:9010!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  margin:auto!important;
  width:min(96vw,1500px)!important;
  max-width:calc(100dvw - 32px)!important;
  height:auto!important;
  max-height:min(82dvh,calc(100dvh - 32px))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(15,23,42,.30)!important;
  opacity:1!important;
  translate:none!important;
  transform:translate3d(0,0,0) scale(1)!important;
  transform-origin:var(--customize-origin-x,50%) var(--customize-origin-y,50%)!important;
  will-change:auto;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal.customize-modal-preopen:not(.is-open) .custom-modal{
  opacity:0!important;
  transform:translate3d(var(--customize-enter-x,0),var(--customize-enter-y,0),0) scale(.12)!important;
  will-change:opacity,transform!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal.is-open .custom-modal,
#dof-customization-modal-root .custom-modal-shell.customization-modal.customize-modal-ready .custom-modal,
#dof-customization-modal-root .custom-modal-shell.customization-modal.customization-force-viewport-center .custom-modal{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  margin:auto!important;
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  will-change:auto!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal.customize-modal-opening .custom-modal{
  transition:opacity 260ms ease-out,transform 300ms cubic-bezier(.2,.8,.2,1)!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  padding:16px 20px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-head .icon-btn{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  z-index:3!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-form{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 20px max(18px,env(safe-area-inset-bottom))!important;
}
#dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions{
  position:static!important;
  bottom:auto!important;
  margin:18px 0 0!important;
  padding:16px 0 max(4px,env(safe-area-inset-bottom))!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
  box-shadow:none!important;
}
@keyframes dofCustomizationBackdropIn{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  #dof-customization-modal-root .custom-modal-shell.customization-modal{
    padding:max(12px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal{
    width:calc(100dvw - 16px)!important;
    max-width:calc(100dvw - 16px)!important;
    max-height:min(84dvh,calc(100dvh - 24px))!important;
    border-radius:20px!important;
  }
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-head{padding:12px 14px!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-form{padding:12px 12px max(14px,env(safe-area-inset-bottom))!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-workbench{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions{display:grid!important;grid-template-columns:1fr!important}
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-actions .btn{width:100%!important;min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal,
  #dof-customization-modal-root .custom-modal-shell.customization-modal .custom-modal-backdrop{
    animation:none!important;
    transition:none!important;
    transform:translate3d(0,0,0) scale(1)!important;
    will-change:auto!important;
  }
}

/* V26.3.0 route-based customization page: no fixed modal positioning. */
body.customize-page-body{
  min-height:100dvh;
  background:
    radial-gradient(circle at top left,rgba(255,47,142,.14),transparent 32rem),
    linear-gradient(135deg,#fff7fb 0%,#fff 44%,#f8fbff 100%);
  overflow-x:hidden;
}
.customize-route-page{
  width:min(1540px,100%);
  margin:0 auto;
  padding:clamp(16px,3vw,36px);
  min-height:calc(100dvh - 160px);
  display:grid;
  align-items:start;
}
.customize-route-page-card{
  width:min(1500px,100%);
  margin:0 auto;
  border-radius:32px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(225,38,126,.14);
  box-shadow:0 28px 90px rgba(120,30,80,.14);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.customize-route-page .customization-route-shell.custom-modal-shell,
.customization-route-shell.custom-modal-shell{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:block!important;
  place-items:initial!important;
  align-items:initial!important;
  justify-content:initial!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
  z-index:auto!important;
  background:transparent!important;
}
.customization-route-shell .custom-modal-backdrop{display:none!important}
.customization-route-shell .custom-modal{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
  animation:dofCustomizeRouteIn 180ms ease-out both!important;
  border-radius:32px!important;
  box-shadow:none!important;
}
.customization-route-shell .custom-modal-head{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94))!important;
  backdrop-filter:blur(12px);
}
.customization-route-shell .custom-form{
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
}
.customization-route-shell .custom-workbench{align-items:start!important}
.customization-route-shell .custom-modal-actions{
  position:relative!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:2!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),#fff)!important;
  border-top:1px solid rgba(16,24,40,.08)!important;
}
.customization-route-success .empty{padding:42px;text-align:center}
.customize-route-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@keyframes dofCustomizeRouteIn{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:768px){
  .customize-route-page{padding:10px;min-height:calc(100dvh - 120px)}
  .customize-route-page-card{border-radius:22px}
  .customization-route-shell .custom-modal{border-radius:22px!important}
  .customization-route-shell .custom-modal-head{position:sticky!important;top:0!important}
}
@media(prefers-reduced-motion:reduce){
  .customization-route-shell .custom-modal{animation:none!important}
}

/* V26.3.2 separate customization redirect page
   Customization is now a normal buyer page. These rules intentionally avoid
   fixed modal positioning, overlays, body scroll locks, and source-button layout. */
body.customize-page-body{
  min-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(225,38,126,.13),transparent 34rem),
    radial-gradient(circle at 88% 12%,rgba(30,111,255,.08),transparent 30rem),
    linear-gradient(135deg,#fff7fb 0%,#fff 48%,#f8fbff 100%)!important;
}
body.customize-page-body.modal-open,
html:has(body.customize-page-body).modal-open{
  overflow-y:auto!important;
}
.customize-route-page{
  width:min(1540px,100%)!important;
  margin:0 auto!important;
  padding:clamp(14px,3vw,38px)!important;
  min-height:calc(100dvh - 150px)!important;
  display:block!important;
}
.customize-route-page-card,
.customize-route-page .customization-page-shell{
  width:min(1500px,100%)!important;
  margin:0 auto!important;
}
.customization-page-shell,
.customize-route-page .customization-page-shell{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0 auto!important;
  transform:none!important;
  opacity:1!important;
  background:transparent!important;
  z-index:auto!important;
  pointer-events:auto!important;
}
.customization-page-shell .custom-modal-backdrop,
.customization-page-shell.custom-modal-shell .custom-modal-backdrop{
  display:none!important;
}
.customization-page-form-card,
.customize-route-page .customization-page-form-card{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
  animation:dofCustomizePageEnter 300ms var(--ease-out, ease-out) both!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
}
.customize-route-page > .customize-route-page-card:has(.customization-page-shell),
.customize-route-page-card:has(.customization-page-shell){
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(225,38,126,.14)!important;
  box-shadow:0 24px 80px rgba(120,30,80,.12)!important;
  border-radius:32px!important;
  overflow:hidden!important;
  backdrop-filter:blur(8px)!important;
}
.customization-page-form-card .custom-modal-head,
.customization-page-head{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  margin:0!important;
  padding:clamp(16px,2vw,26px)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94))!important;
  border-bottom:1px solid rgba(16,24,40,.08)!important;
  backdrop-filter:blur(10px)!important;
}
.customization-page-form-card .custom-form{
  display:block!important;
  max-height:none!important;
  overflow:visible!important;
  padding:clamp(14px,2.2vw,26px)!important;
  overscroll-behavior:auto!important;
}
.customization-page-form-card .custom-workbench{
  align-items:start!important;
}
.customization-page-form-card .custom-preview-panel{
  position:sticky;
  top:calc(var(--topbar-height,74px) + 16px);
  align-self:start;
}
.customization-page-form-card .custom-modal-actions{
  position:relative!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin:20px 0 0!important;
  padding:18px clamp(14px,2vw,22px) max(18px,env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(16,24,40,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),#fff)!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:2!important;
}
.customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
.customization-page-form-card .dst-preview-canvas{
  object-fit:contain!important;
}
@keyframes dofCustomizePageEnter{
  from{opacity:0;transform:perspective(900px) rotateX(3deg) scale(.985)}
  to{opacity:1;transform:perspective(900px) rotateX(0) scale(1)}
}
@media(max-width:980px){
  .customization-page-form-card .custom-workbench{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:relative!important;
    top:auto!important;
    width:100%!important;
  }
}
@media(max-width:768px){
  .customize-route-page{padding:10px!important;min-height:calc(100dvh - 118px)!important}
  .customize-route-page-card:has(.customization-page-shell){border-radius:22px!important}
  .customization-page-form-card .custom-modal-head{padding:14px!important}
  .customization-page-form-card .custom-form{padding:12px!important}
  .customization-page-form-card .custom-modal-actions{display:grid!important;grid-template-columns:1fr!important;padding:14px!important}
  .customization-page-form-card .custom-modal-actions .btn{width:100%!important;min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  .customization-page-form-card{animation:none!important;transition:none!important;transform:none!important}
}

/* V26.4.0 mobile customization page polish: lazy one-hand layout + preview fit.
   Customization remains a normal /customize route page, not a popup/modal. */
body.customize-page-body{
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(225,38,126,.12),transparent 32rem),
    radial-gradient(circle at 90% 14%,rgba(30,111,255,.07),transparent 28rem),
    linear-gradient(135deg,#fff7fb 0%,#fff 48%,#f8fbff 100%)!important;
}
.customize-route-page{
  box-sizing:border-box!important;
  width:min(1540px,100%)!important;
  max-width:100vw!important;
  overflow-x:hidden!important;
  padding:clamp(14px,2.6vw,34px)!important;
}
.customize-route-page-card:has(.customization-page-shell),
.customization-page-form-card{
  max-width:100%!important;
}
.customization-page-form-card,
.customization-page-form-card *{
  box-sizing:border-box;
}
.customization-page-form-card .custom-modal-head{
  gap:14px!important;
}
.customization-page-form-card .custom-modal-head .code{
  width:max-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.customization-page-form-card .custom-workbench{
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr)!important;
  gap:clamp(16px,2vw,26px)!important;
  align-items:start!important;
  min-width:0!important;
}
.customization-page-form-card .custom-preview-panel,
.customization-page-form-card .custom-controls-panel{
  min-width:0!important;
  max-width:100%!important;
}
.customization-page-form-card .custom-preview-panel{
  border-radius:26px!important;
  padding:clamp(14px,1.8vw,20px)!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#fff,#fff7fb)!important;
}
.custom-step-kicker,
.custom-section-title::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:26px;
  border-radius:999px;
  padding:5px 10px;
  background:#fff0f7;
  border:1px solid rgba(225,38,126,.16);
  color:#be185d;
  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:.01em;
}
.custom-step-kicker{
  margin:0 0 10px;
}
.custom-section-title{
  display:flex!important;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:20px 0 10px!important;
  line-height:1.2!important;
}
.custom-section-title::before{
  content:attr(data-step-label);
  flex:0 0 auto;
}
.custom-section-title-notes::before{
  content:'Optional';
}
.customization-page-form-card .custom-preview-title{
  min-width:0!important;
  margin-bottom:10px!important;
}
.customization-page-form-card .custom-preview-title b,
.customization-page-form-card .custom-preview-title span{
  min-width:0!important;
}
.customization-page-form-card .custom-preview-title span{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  max-width:100%!important;
}
.customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:10px!important;
  width:100%!important;
  height:clamp(360px,45vw,620px)!important;
  min-height:0!important;
  max-height:620px!important;
  padding:12px!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:var(--selected-cloth-color,#07080b)!important;
}
.customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  border:0!important;
  border-radius:18px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview p{
  align-self:end!important;
  margin:0!important;
  max-width:100%!important;
  border-radius:15px!important;
  padding:9px 11px!important;
  font-size:12px!important;
  line-height:1.35!important;
  background:rgba(255,255,255,.92)!important;
  color:#475467!important;
  overflow-wrap:anywhere!important;
}
.customization-page-form-card .machine-preview-secondary:not([hidden]){
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto!important;
  gap:10px!important;
  width:100%!important;
  height:clamp(360px,45vw,620px)!important;
  min-height:0!important;
  max-height:620px!important;
  overflow:hidden!important;
  border-radius:24px!important;
  padding:12px!important;
  background:var(--selected-cloth-color,#07080b)!important;
}
.customization-page-form-card .dst-preview-canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:18px!important;
  background:var(--selected-cloth-color,#07080b)!important;
  overflow:hidden!important;
}
.customization-page-form-card .preview-toolbar{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.customization-page-form-card .cloth-preview-status{
  max-width:100%!important;
  min-width:0!important;
}
.customization-page-form-card .custom-controls-panel{
  display:block!important;
}
.customization-page-form-card .cloth-color-card,
.customization-page-form-card .part-color-card,
.customization-page-form-card .custom-stack,
.customization-page-form-card .measurement-grid,
.customization-page-form-card .part-color-sections,
.customization-page-form-card .customization-notes-field{
  max-width:100%!important;
  min-width:0!important;
}
.customization-page-form-card .field,
.customization-page-form-card select.field,
.customization-page-form-card input.field,
.customization-page-form-card textarea.field,
.customization-page-form-card .btn{
  min-height:46px;
  font-size:15px;
}
.customization-page-form-card select.field,
.customization-page-form-card input.field,
.customization-page-form-card textarea.field{
  width:100%!important;
}
.customization-page-form-card .cloth-color-picker,
.customization-page-form-card .custom-color-picker,
.customization-page-form-card .custom-color-picker-catalog{
  min-width:0!important;
  max-width:100%!important;
}
.customization-page-form-card .catalog-pdf-btn{
  min-height:44px;
  white-space:normal!important;
}
.customization-page-form-card .custom-modal-actions{
  border-top:1px solid rgba(16,24,40,.08)!important;
  background:#fff!important;
}
.customization-page-form-card .custom-modal-actions .btn{
  min-height:48px;
}
@media(max-width:980px){
  .customization-page-form-card .custom-workbench{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  .customization-page-form-card .custom-preview-panel{
    order:1!important;
    position:relative!important;
    top:auto!important;
    width:100%!important;
  }
  .customization-page-form-card .custom-controls-panel{
    order:2!important;
    width:100%!important;
  }
}
@media(max-width:768px){
  body.customize-page-body .topbar{
    position:sticky;
    top:0;
    z-index:40;
  }
  .customize-route-page{
    padding:10px 10px calc(96px + env(safe-area-inset-bottom))!important;
    min-height:auto!important;
  }
  .customize-route-page-card:has(.customization-page-shell),
  .customize-route-page-card{
    border-radius:22px!important;
    overflow:visible!important;
  }
  .customization-page-form-card .custom-modal-head{
    position:relative!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:14px!important;
    border-radius:22px 22px 0 0!important;
  }
  .customization-page-form-card .custom-modal-head h2{
    font-size:clamp(1.45rem,7vw,2rem)!important;
    line-height:1.05!important;
  }
  .customization-page-form-card .custom-modal-head p{
    font-size:13px!important;
    line-height:1.4!important;
  }
  .customization-page-form-card .custom-form{
    padding:12px!important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
  .custom-step-kicker,
  .custom-section-title::before{
    min-height:24px;
    padding:5px 9px;
    font-size:11px;
  }
  .customization-page-form-card .custom-preview-panel{
    padding:12px!important;
    border-radius:20px!important;
  }
  .customization-page-form-card .custom-preview-title{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .customization-page-form-card .custom-preview-title b{
    font-size:17px!important;
  }
  .customization-page-form-card .custom-preview-title span{
    justify-self:start!important;
    display:inline-flex!important;
    text-align:left!important;
    margin:0!important;
  }
  .customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview,
  .customization-page-form-card .machine-preview-secondary:not([hidden]){
    height:min(72vw,420px)!important;
    min-height:260px!important;
    max-height:420px!important;
    padding:10px!important;
    border-radius:20px!important;
  }
  .customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
  .customization-page-form-card .dst-preview-canvas{
    border-radius:15px!important;
  }
  .customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview p{
    font-size:11.5px!important;
    padding:8px 9px!important;
    max-height:58px;
    overflow:auto;
  }
  .customization-page-form-card .cloth-preview-status{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px!important;
    border-radius:15px!important;
  }
  .customization-page-form-card .cloth-preview-status small{
    grid-column:1/-1;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .customization-page-form-card .cloth-preview-swatch,
  .customization-page-form-card .custom-color-swatch{
    width:36px!important;
    height:36px!important;
  }
  .customization-page-form-card .cloth-color-card,
  .customization-page-form-card .part-color-card,
  .customization-page-form-card .custom-stack,
  .customization-page-form-card .measurement-grid{
    border-radius:18px!important;
  }
  .customization-page-form-card .cloth-color-card,
  .customization-page-form-card .part-color-card{
    padding:13px!important;
  }
  .customization-page-form-card .cloth-color-copy ul{
    padding-left:18px;
    margin:8px 0 0;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .customization-page-form-card .cloth-color-picker,
  .customization-page-form-card .custom-color-picker,
  .customization-page-form-card .custom-color-picker-catalog{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
  }
  .customization-page-form-card .cloth-color-picker .catalog-pdf-btn,
  .customization-page-form-card .custom-color-picker-catalog .catalog-pdf-btn,
  .customization-page-form-card .custom-color-picker .catalog-pdf-btn{
    grid-column:1/-1!important;
    width:100%!important;
  }
  .customization-page-form-card .color-copy-tools,
  .customization-page-form-card .preview-toolbar,
  .customization-page-form-card .custom-live-summary,
  .customization-page-form-card .measurement-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .customization-page-form-card .field,
  .customization-page-form-card select.field,
  .customization-page-form-card input.field,
  .customization-page-form-card textarea.field,
  .customization-page-form-card .btn{
    min-height:48px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }
  .customization-page-form-card textarea.field{
    min-height:92px!important;
  }
  .customization-page-form-card .custom-modal-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:18px -12px -12px!important;
    padding:12px 12px max(14px,env(safe-area-inset-bottom))!important;
    border-radius:0 0 22px 22px!important;
    box-shadow:0 -14px 28px rgba(16,24,40,.08)!important;
  }
  .customization-page-form-card .custom-modal-actions .btn{
    width:100%!important;
    min-height:52px!important;
    font-weight:950!important;
  }
  .customization-page-form-card .custom-modal-actions .btn.secondary{
    order:2;
  }
  .customization-page-form-card .custom-modal-actions .btn:not(.secondary){
    order:1;
  }
}
@media(max-width:430px){
  .customize-route-page{padding-left:8px!important;padding-right:8px!important}
  .customization-page-form-card .custom-preview-fallback-wrap.stitched-live-preview,
  .customization-page-form-card .machine-preview-secondary:not([hidden]){
    height:min(72vw,390px)!important;
    min-height:250px!important;
  }
  .customization-page-form-card .cloth-color-copy ul li:nth-child(n+4){
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .customization-page-form-card,
  .customization-page-form-card *{
    animation:none!important;
    transition:none!important;
  }
}

/* V26.4.2 single live preview only: one smart preview stage for stitched, safe DST, fallback, empty, or error. */
.customization-page-form-card .custom-live-preview-stage{
  display:grid!important;
  width:100%!important;
  height:clamp(360px,45vw,620px)!important;
  min-height:0!important;
  max-height:620px!important;
  overflow:hidden!important;
  border-radius:24px!important;
  padding:12px!important;
  background:var(--selected-cloth-color,#07080b)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 16px 34px rgba(15,23,42,.12)!important;
}
.customization-page-form-card .custom-live-preview-stage [hidden]{display:none!important}
.customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview,
.customization-page-form-card .custom-live-preview-stage .machine-preview-secondary:not([hidden]){
  display:grid!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview{
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:10px!important;
}
.customization-page-form-card .custom-live-preview-stage .machine-preview-secondary:not([hidden]){
  grid-template-rows:minmax(0,1fr) auto auto!important;
  gap:10px!important;
}
.customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
.customization-page-form-card .custom-live-preview-stage .dst-preview-canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  border:0!important;
  border-radius:16px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.customization-page-form-card .custom-live-preview-stage .custom-preview-empty,
.customization-page-form-card .custom-live-preview-stage .custom-preview-image-error{
  align-self:stretch!important;
  justify-self:stretch!important;
  display:grid;
  place-items:center;
  gap:8px;
  min-height:0;
  border:1px dashed rgba(255,255,255,.42);
  border-radius:16px;
  padding:18px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,rgba(15,23,42,.22),rgba(255,255,255,.08));
}
.customization-page-form-card .custom-live-preview-stage .custom-preview-empty b,
.customization-page-form-card .custom-live-preview-stage .custom-preview-image-error b{font-size:15px;line-height:1.25;color:#fff}
.customization-page-form-card .custom-live-preview-stage .custom-preview-empty small,
.customization-page-form-card .custom-live-preview-stage .custom-preview-image-error small{font-size:12px;line-height:1.4;color:rgba(255,255,255,.84)}
.customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
  align-self:end!important;
  margin:0!important;
  max-width:100%!important;
  max-height:62px!important;
  overflow:auto!important;
  border-radius:15px!important;
  padding:9px 11px!important;
  font-size:12px!important;
  line-height:1.35!important;
  background:rgba(255,255,255,.93)!important;
  color:#475467!important;
  overflow-wrap:anywhere!important;
}
.customization-page-form-card .custom-live-preview-stage .preview-toolbar{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.customization-page-form-card .custom-live-preview-stage .preview-quality-note{
  margin:0!important;
  max-height:58px!important;
  overflow:auto!important;
}
.customization-page-form-card .custom-preview-panel > .custom-preview-fallback-wrap.stitched-live-preview,
.customization-page-form-card .custom-preview-panel > .machine-preview-secondary{
  display:none!important;
}
@media(max-width:768px){
  .customization-page-form-card .custom-live-preview-stage{
    height:min(72vw,420px)!important;
    min-height:260px!important;
    max-height:420px!important;
    padding:10px!important;
    border-radius:20px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-empty,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-image-error{
    border-radius:15px!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
    font-size:11.5px!important;
    padding:8px 9px!important;
    max-height:54px!important;
  }
}
@media(max-width:430px){
  .customization-page-form-card .custom-live-preview-stage{
    height:min(72vw,390px)!important;
    min-height:250px!important;
  }
}
.customization-page-form-card .custom-live-preview-stage [hidden],
.customization-page-form-card .custom-live-preview-stage .custom-preview-empty[hidden],
.customization-page-form-card .custom-live-preview-stage .custom-preview-image-error[hidden],
.customization-page-form-card .custom-live-preview-stage .machine-preview-secondary[hidden],
.customization-page-form-card .custom-live-preview-stage .custom-preview-fallback[hidden]{display:none!important}
.customization-page-form-card .custom-live-preview-stage{grid-template-rows:minmax(0,1fr) auto!important;gap:10px!important}

/* V26.4.3 balanced customization scroll layout: stable sticky preview + natural control scroll. */
:root{
  --site-header-height: 96px;
  --customize-preview-sticky-gap: 16px;
}
body.customize-page-body{
  overflow-x:hidden!important;
}
.customize-route-page,
.customize-route-page-card,
.customization-page-shell,
.customization-page-form-card,
.customization-page-form-card .custom-form,
.customization-page-form-card .custom-workbench,
.customization-page-form-card .custom-preview-panel,
.customization-page-form-card .custom-controls-panel{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.customization-page-form-card .custom-workbench{
  display:grid!important;
  grid-template-columns:minmax(340px, .86fr) minmax(0, 1.14fr)!important;
  gap:clamp(18px,2.2vw,30px)!important;
  align-items:start!important;
}
.customization-page-form-card .custom-preview-panel{
  position:sticky!important;
  top:calc(var(--site-header-height, 96px) + var(--customize-preview-sticky-gap, 16px))!important;
  align-self:start!important;
  max-height:calc(100dvh - var(--site-header-height, 96px) - 32px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges;
  padding:clamp(14px,1.6vw,20px)!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,#fff,#fff8fc)!important;
}
.customization-page-form-card .custom-controls-panel{
  align-self:start!important;
  overflow:visible!important;
  padding-bottom:20px!important;
}
.customization-page-form-card .custom-live-preview-stage{
  height:clamp(300px, calc(100dvh - var(--site-header-height, 96px) - 250px), 520px)!important;
  max-height:520px!important;
  min-height:300px!important;
}
.customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
.customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
.customization-page-form-card .custom-live-preview-stage canvas,
.customization-page-form-card .custom-live-preview-stage img{
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.customization-page-form-card .custom-preview-title,
.customization-page-form-card .cloth-preview-status,
.customization-page-form-card .custom-live-preview-stage p[data-preview-caption],
.customization-page-form-card .preview-toolbar,
.customization-page-form-card .preview-quality-note{
  max-width:100%!important;
  min-width:0!important;
}
.customization-page-form-card .custom-modal-actions{
  position:relative!important;
  bottom:auto!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:12px!important;
  margin:22px 0 0!important;
  padding:18px clamp(14px,2vw,22px) max(18px,env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(16,24,40,.08)!important;
  background:#fff!important;
  box-shadow:none!important;
}
@media(min-width:981px){
  .customization-page-form-card .custom-preview-panel{
    order:0!important;
  }
  .customization-page-form-card .custom-controls-panel{
    order:0!important;
  }
}
@media(max-width:1180px) and (min-width:981px){
  :root{--site-header-height: 88px;}
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(310px,.9fr) minmax(0,1.1fr)!important;
    gap:18px!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(280px, calc(100dvh - var(--site-header-height, 88px) - 245px), 480px)!important;
    min-height:280px!important;
  }
}
@media(max-width:980px){
  .customization-page-form-card .custom-workbench{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    scrollbar-gutter:auto!important;
    width:100%!important;
    order:1!important;
  }
  .customization-page-form-card .custom-controls-panel{
    order:2!important;
    width:100%!important;
  }
}
@media(max-width:768px){
  .customize-route-page{
    padding:10px 10px calc(104px + env(safe-area-inset-bottom))!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:min(72vw,420px)!important;
    min-height:260px!important;
    max-height:420px!important;
  }
  .customization-page-form-card .custom-modal-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:18px -12px -12px!important;
    padding:12px 12px max(14px,env(safe-area-inset-bottom))!important;
    border-radius:0 0 22px 22px!important;
    box-shadow:0 -14px 28px rgba(16,24,40,.08)!important;
  }
  .customization-page-form-card .custom-modal-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
  }
}
@media(max-width:430px){
  .customization-page-form-card .custom-live-preview-stage{
    height:min(72vw,390px)!important;
    min-height:250px!important;
  }
}

/* v26.4.4 perfect 200ms page flip transition
   Final authoritative override: 100ms exit + 100ms enter, no artificial gap. */
.page-transition-enabled body{
  perspective:1000px!important;
  perspective-origin:50% 42%!important;
}
.page-transition-shell{
  transform-origin:50% 50%!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofPerfectPageFlipExit 100ms cubic-bezier(.5,0,.3,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofPerfectPageFlipEnter 100ms cubic-bezier(.2,.72,.18,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofPerfectPageFlipExit{
  0%{opacity:1;transform:perspective(1000px) rotateY(0deg) scale(1);filter:none}
  100%{opacity:.3;transform:perspective(1000px) rotateY(-9deg) scale(.99);filter:none}
}
@keyframes dofPerfectPageFlipEnter{
  0%{opacity:.3;transform:perspective(1000px) rotateY(9deg) scale(.99);filter:none}
  100%{opacity:1;transform:perspective(1000px) rotateY(0deg) scale(1);filter:none}
}
@media(max-width:760px){
  .page-transition-enabled body{perspective:850px!important;perspective-origin:50% 36%!important}
  body.page-transition-exit .page-transition-shell{animation:dofPerfectMobilePageFlipExit 100ms cubic-bezier(.5,0,.3,1) both!important}
  body.page-transition-enter .page-transition-shell{animation:dofPerfectMobilePageFlipEnter 100ms cubic-bezier(.2,.72,.18,1) both!important}
  @keyframes dofPerfectMobilePageFlipExit{
    0%{opacity:1;transform:perspective(850px) rotateX(0deg) scale(1);filter:none}
    100%{opacity:.34;transform:perspective(850px) rotateX(4deg) scale(.992);filter:none}
  }
  @keyframes dofPerfectMobilePageFlipEnter{
    0%{opacity:.34;transform:perspective(850px) rotateX(-4deg) scale(.992);filter:none}
    100%{opacity:1;transform:perspective(850px) rotateX(0deg) scale(1);filter:none}
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
}

/* v26.4.5 smooth page transition balanced delay
   Final authoritative override: 170ms exit + 170ms enter, continuous 340ms total. */
.page-transition-enabled body{
  perspective:1050px!important;
  perspective-origin:50% 42%!important;
}
.page-transition-shell{
  transform-origin:50% 50%!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  transition:none!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofSmoothPageTransitionExit 170ms cubic-bezier(.22,.8,.24,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofSmoothPageTransitionEnter 170ms cubic-bezier(.22,.8,.24,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofSmoothPageTransitionExit{
  0%{opacity:1;transform:perspective(1050px) rotateY(0deg) scale(1);filter:none}
  100%{opacity:.25;transform:perspective(1050px) rotateY(-5deg) scale(.985);filter:none}
}
@keyframes dofSmoothPageTransitionEnter{
  0%{opacity:.25;transform:perspective(1050px) rotateY(5deg) scale(.985);filter:none}
  100%{opacity:1;transform:perspective(1050px) rotateY(0deg) scale(1);filter:none}
}
@media(max-width:760px){
  .page-transition-enabled body{
    perspective:900px!important;
    perspective-origin:50% 36%!important;
  }
  body.page-transition-exit .page-transition-shell{
    animation:dofSmoothMobilePageTransitionExit 170ms cubic-bezier(.22,.8,.24,1) both!important;
  }
  body.page-transition-enter .page-transition-shell{
    animation:dofSmoothMobilePageTransitionEnter 170ms cubic-bezier(.22,.8,.24,1) both!important;
  }
  @keyframes dofSmoothMobilePageTransitionExit{
    0%{opacity:1;transform:perspective(900px) rotateX(0deg) scale(1);filter:none}
    100%{opacity:.28;transform:perspective(900px) rotateX(3deg) scale(.988);filter:none}
  }
  @keyframes dofSmoothMobilePageTransitionEnter{
    0%{opacity:.28;transform:perspective(900px) rotateX(-3deg) scale(.988);filter:none}
    100%{opacity:1;transform:perspective(900px) rotateX(0deg) scale(1);filter:none}
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
  .page-transition-shell{
    will-change:auto!important;
  }
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
}

/* v26.4.6 crisp 480ms page flip transition
   Final authoritative override: 240ms exit + 240ms enter, continuous 480ms total. */
.page-transition-enabled body{
  perspective:1200px!important;
  perspective-origin:50% 42%!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  transition:none!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofCrispPageFlipExit 240ms cubic-bezier(.2,.75,.2,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofCrispPageFlipEnter 240ms cubic-bezier(.2,.75,.2,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofCrispPageFlipExit{
  0%{opacity:1;transform:perspective(1200px) rotateY(0deg) translateY(0) scale(1);filter:none}
  100%{opacity:.22;transform:perspective(1200px) rotateY(-8deg) translateY(8px) scale(.985);filter:none}
}
@keyframes dofCrispPageFlipEnter{
  0%{opacity:.22;transform:perspective(1200px) rotateY(8deg) translateY(8px) scale(.985);filter:none}
  100%{opacity:1;transform:perspective(1200px) rotateY(0deg) translateY(0) scale(1);filter:none}
}
@media(max-width:760px){
  .page-transition-enabled body{
    perspective:980px!important;
    perspective-origin:50% 36%!important;
  }
  body.page-transition-exit .page-transition-shell{
    animation:dofCrispMobilePageFlipExit 240ms cubic-bezier(.2,.75,.2,1) both!important;
  }
  body.page-transition-enter .page-transition-shell{
    animation:dofCrispMobilePageFlipEnter 240ms cubic-bezier(.2,.75,.2,1) both!important;
  }
  @keyframes dofCrispMobilePageFlipExit{
    0%{opacity:1;transform:perspective(980px) rotateX(0deg) translateY(0) scale(1);filter:none}
    100%{opacity:.24;transform:perspective(980px) rotateX(4deg) translateY(8px) scale(.988);filter:none}
  }
  @keyframes dofCrispMobilePageFlipEnter{
    0%{opacity:.24;transform:perspective(980px) rotateX(-4deg) translateY(8px) scale(.988);filter:none}
    100%{opacity:1;transform:perspective(980px) rotateX(0deg) translateY(0) scale(1);filter:none}
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
  .page-transition-shell{
    will-change:auto!important;
  }
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
}


/* v26.4.7 spring bounce OS-style page transition
   Final authoritative override: no flip/rotation, 180ms exit + 340ms spring enter. */
.page-transition-enabled body{
  perspective:none!important;
  perspective-origin:50% 50%!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:visible!important;
  transform-style:flat!important;
  transition:none!important;
  contain:paint!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofOsSpringPageExit 180ms cubic-bezier(.4,0,.2,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofOsSpringPageEnter 340ms cubic-bezier(.16,1,.3,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofOsSpringPageExit{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
  100%{
    opacity:0;
    transform:translate3d(0,-8px,0) scale(.985);
    filter:none;
  }
}
@keyframes dofOsSpringPageEnter{
  0%{
    opacity:0;
    transform:translate3d(0,18px,0) scale(.975);
    filter:none;
  }
  62%{
    opacity:1;
    transform:translate3d(0,-3px,0) scale(1.006);
    filter:none;
  }
  82%{
    opacity:1;
    transform:translate3d(0,1px,0) scale(.998);
    filter:none;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
}
@media(max-width:760px){
  .page-transition-enabled body{
    perspective:none!important;
    perspective-origin:50% 50%!important;
  }
  body.page-transition-exit .page-transition-shell{
    animation:dofOsSpringPageExit 180ms cubic-bezier(.4,0,.2,1) both!important;
  }
  body.page-transition-enter .page-transition-shell{
    animation:dofOsSpringPageEnter 340ms cubic-bezier(.16,1,.3,1) both!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:dofOsReducedPageFade 80ms ease-out both!important;
    transform:none!important;
    filter:none!important;
  }
  @keyframes dofOsReducedPageFade{
    0%{opacity:.92}
    100%{opacity:1}
  }
  .page-transition-shell{
    will-change:auto!important;
    contain:paint!important;
  }
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
  transform:none!important;
  opacity:1!important;
}


/* v26.4.8 horizontal spring/bounce OS-style page transition
   Final authoritative override: no flip, no rotation, no vertical movement. */
html.page-is-navigating,
body.page-is-navigating{
  overflow-x:hidden!important;
}
.page-transition-enabled body{
  perspective:none!important;
  perspective-origin:50% 50%!important;
  overflow-x:hidden!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:visible!important;
  transform-style:flat!important;
  transition:none!important;
  contain:paint!important;
  max-width:100%!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofHorizontalSpringPageExit 180ms cubic-bezier(.4,0,.2,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofHorizontalSpringPageEnter 340ms cubic-bezier(.16,1,.3,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofHorizontalSpringPageExit{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
  100%{
    opacity:0;
    transform:translate3d(-28px,0,0) scale(.985);
    filter:none;
  }
}
@keyframes dofHorizontalSpringPageEnter{
  0%{
    opacity:0;
    transform:translate3d(34px,0,0) scale(.985);
    filter:none;
  }
  62%{
    opacity:1;
    transform:translate3d(-5px,0,0) scale(1.004);
    filter:none;
  }
  82%{
    opacity:1;
    transform:translate3d(2px,0,0) scale(.998);
    filter:none;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
}
@media(max-width:760px){
  html.page-is-navigating,
  body.page-is-navigating{
    overflow-x:hidden!important;
  }
  .page-transition-enabled body{
    perspective:none!important;
    overflow-x:hidden!important;
  }
  body.page-transition-exit .page-transition-shell{
    animation:dofHorizontalSpringPageExit 180ms cubic-bezier(.4,0,.2,1) both!important;
  }
  body.page-transition-enter .page-transition-shell{
    animation:dofHorizontalSpringPageEnter 340ms cubic-bezier(.16,1,.3,1) both!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:dofHorizontalReducedPageFade 80ms ease-out both!important;
    transform:none!important;
    filter:none!important;
  }
  @keyframes dofHorizontalReducedPageFade{
    0%{opacity:.92}
    100%{opacity:1}
  }
  .page-transition-shell{
    will-change:auto!important;
    contain:paint!important;
  }
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
  transform:none!important;
  opacity:1!important;
}

/* v26.4.9 instant loading + high-FPS horizontal spring transitions
   Final authoritative override for buyer-site navigation/loading performance. */
html.page-is-navigating,
body.page-is-navigating{
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}
.page-transition-enabled body{
  perspective:none!important;
  overflow-x:hidden!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform-style:flat!important;
  transition:none!important;
  contain:paint!important;
  max-width:100%!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofHighFpsPageExit 220ms cubic-bezier(.4,0,.2,1) both!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofHighFpsPageEnter 380ms cubic-bezier(.16,1,.3,1) both!important;
  will-change:transform,opacity!important;
}
@keyframes dofHighFpsPageExit{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  100%{opacity:0;transform:translate3d(-24px,0,0) scale(.99);filter:none}
}
@keyframes dofHighFpsPageEnter{
  0%{opacity:0;transform:translate3d(32px,0,0) scale(.99);filter:none}
  65%{opacity:1;transform:translate3d(-4px,0,0) scale(1.003);filter:none}
  85%{opacity:1;transform:translate3d(1px,0,0) scale(.999);filter:none}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
}
body.page-is-navigating .page-transition-shell{
  will-change:transform,opacity!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  will-change:auto!important;
  transform:none!important;
  opacity:1!important;
}

/* Instant skeleton/shimmer performance: transform-only shimmer, no layout animation. */
.grid-loading-instant{content-visibility:auto;contain-intrinsic-size:900px 680px}
.skeleton-card,
.orders-skeleton-card,
.customize-route-loading-card,
.customize-preview-skeleton,
.customize-controls-skeleton .custom-section-card{
  content-visibility:auto;
  contain:layout paint;
}
.skeleton-line,
.skeleton-box,
.skeleton-actions span,
.skeleton-chip,
.skeleton-action,
.orders-skeleton-timeline span{
  position:relative!important;
  overflow:hidden!important;
  background:#f8eaf3!important;
  background-image:none!important;
  animation:none!important;
  color:transparent!important;
}
.skeleton-line::after,
.skeleton-box::after,
.skeleton-actions span::after,
.skeleton-chip::after,
.skeleton-action::after,
.orders-skeleton-timeline span::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translate3d(-120%,0,0);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.78) 45%,transparent 100%);
  animation:dofHighFpsShimmer 1.05s linear infinite;
  will-change:transform;
}
@keyframes dofHighFpsShimmer{
  100%{transform:translate3d(120%,0,0)}
}
.orders-loading-grid{animation:dofFastFadeIn 120ms ease-out both}
.orders-skeleton-card{min-height:132px;align-items:center}
.orders-skeleton-card .orders-list-image{min-height:92px;border-radius:18px}
.skeleton-chip{display:inline-block;width:94px;height:28px;border-radius:999px}
.skeleton-action{display:inline-block;width:108px;height:38px;border-radius:999px}
.skeleton-action.secondary{width:92px}
.orders-skeleton-detail{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:18px;padding:18px;border:1px solid var(--brand-line);border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}
.orders-skeleton-timeline{grid-column:1/-1;display:grid;gap:10px;margin-top:8px}
.orders-skeleton-timeline span{height:18px;border-radius:999px;display:block}
.customize-route-loading-card{animation:dofFastFadeIn 120ms ease-out both}
.customize-loading-head{display:grid;gap:10px;margin-bottom:18px;max-width:520px}
.customize-loading-workspace{align-items:start}
.customize-preview-skeleton .custom-live-preview-stage{min-height:clamp(320px,42vw,560px);border-radius:22px}
.customize-controls-skeleton{display:grid;gap:16px}

/* Sign-in loading should acknowledge taps immediately. */
.btn.is-loading{
  pointer-events:none;
  cursor:progress;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transform:translateZ(0);
  transition:opacity 120ms ease,transform 120ms ease!important;
}
.btn.is-loading .btn-spinner{flex:0 0 auto;animation:dofSpin .68s linear infinite}
.auth-inline-loading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 10px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(193,53,132,.22);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#fff7fc);
  color:var(--brand-ink);
  box-shadow:0 12px 28px rgba(193,53,132,.08);
  animation:dofFastFadeIn 120ms ease-out both;
}
.auth-inline-loading small{grid-column:2;color:var(--muted);font-weight:750;line-height:1.35}
@keyframes dofFastFadeIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-width:760px){
  html.page-is-navigating,
  body.page-is-navigating{overflow-x:hidden!important}
  body.page-transition-exit .page-transition-shell{animation:dofHighFpsPageExit 220ms cubic-bezier(.4,0,.2,1) both!important}
  body.page-transition-enter .page-transition-shell{animation:dofHighFpsPageEnter 380ms cubic-bezier(.16,1,.3,1) both!important}
  .orders-skeleton-detail{grid-template-columns:1fr}
  .customize-preview-skeleton .custom-live-preview-stage{min-height:min(72vw,420px)}
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:dofHighFpsReducedFade 80ms ease-out both!important;
    transform:none!important;
    filter:none!important;
  }
  .skeleton-line::after,
  .skeleton-box::after,
  .skeleton-actions span::after,
  .skeleton-chip::after,
  .skeleton-action::after,
  .orders-skeleton-timeline span::after,
  .btn.is-loading .btn-spinner{
    animation:none!important;
  }
  @keyframes dofHighFpsReducedFade{0%{opacity:.94}100%{opacity:1}}
}

/* V26.5.0 mobile DST preview size fix: make the embroidery preview the hero on phones.
   Display-only change. Parser/generated safe preview data remains untouched. */
@media(max-width:768px){
  .customization-page-form-card .custom-preview-panel{
    padding:12px!important;
    overflow:visible!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
    padding:10px!important;
    overflow:visible!important;
    background:linear-gradient(180deg,#fff,#fff8fc)!important;
    border:1px solid rgba(193,53,132,.16)!important;
    border-radius:20px!important;
    box-shadow:0 14px 30px rgba(15,23,42,.08)!important;
  }
  .customization-page-form-card .custom-live-preview-stage.is-dst-preview-mode,
  .customization-page-form-card .custom-live-preview-stage[data-preview-mode="dst"]{
    grid-template-rows:auto auto!important;
  }
  .customization-page-form-card .custom-live-preview-stage .machine-preview-secondary:not([hidden]),
  .customization-page-form-card .custom-live-preview-stage .machine-preview-secondary.is-dst-preview-mode:not([hidden]){
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:8px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas{
    order:1!important;
    display:block!important;
    width:100%!important;
    height:clamp(320px,78vw,460px)!important;
    min-height:320px!important;
    max-height:460px!important;
    aspect-ratio:auto!important;
    max-width:100%!important;
    min-width:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:18px!important;
    background:var(--selected-cloth-color,#07080b)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 22px rgba(15,23,42,.10)!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-loading{
    inset:10px!important;
    min-height:180px!important;
    max-height:calc(clamp(320px,78vw,460px) - 20px)!important;
    border-radius:16px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-toolbar{
    order:2!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
    width:100%!important;
    padding:0!important;
    background:transparent!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-toolbar .field,
  .customization-page-form-card .custom-live-preview-stage .preview-part-select,
  .customization-page-form-card .custom-live-preview-stage .preview-render-mode{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    font-size:14px!important;
    border-radius:14px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-quality-note{
    order:3!important;
    margin:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    background:#fff7fb!important;
    color:#7f1d4d!important;
    border:1px solid rgba(193,53,132,.14)!important;
    box-shadow:none!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
    margin:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:8px 10px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    color:#475467!important;
    background:#fff!important;
    border:1px solid rgba(16,24,40,.08)!important;
    border-radius:14px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-rows:auto!important;
    gap:0!important;
    padding:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback{
    width:100%!important;
    height:clamp(320px,78vw,460px)!important;
    min-height:320px!important;
    max-height:460px!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:18px!important;
    background:var(--selected-cloth-color,#07080b)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 22px rgba(15,23,42,.10)!important;
  }
  .customization-page-form-card .custom-live-preview-stage .custom-preview-empty,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-image-error{
    min-height:clamp(300px,72vw,430px)!important;
    border-radius:18px!important;
    padding:18px!important;
    background:var(--selected-cloth-color,#07080b)!important;
  }
  .customization-page-form-card .cloth-preview-status{
    margin-bottom:10px!important;
  }
}
@media(max-width:380px){
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback{
    height:320px!important;
    min-height:320px!important;
  }
}

/* v26.5.1 mobile UI rebuild + stable loading animation
   Reliability-first override: no route interception animation, no flip, no bounce.
   Pages navigate natively and show instant skeletons/loading states instead. */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
.page-transition-enabled body{
  perspective:none!important;
  overflow-x:hidden!important;
}
.page-transition-shell{
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
  max-width:100%!important;
}
body.page-transition-exit .page-transition-shell,
body.page-transition-enter .page-transition-shell,
body.page-is-navigating .page-transition-shell{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:auto!important;
  will-change:auto!important;
}
body.page-content-enter .page-transition-shell{
  animation:dofStablePageContentFade 180ms cubic-bezier(.2,.7,.2,1) both!important;
  will-change:opacity,transform!important;
}
@keyframes dofStablePageContentFade{
  from{opacity:.001;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  body.page-content-enter .page-transition-shell,
  .page-transition-shell{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
    will-change:auto!important;
  }
}

/* Stable, crisp loading surfaces. */
.skeleton-card,
.orders-skeleton-card,
.customize-route-loading-card,
.auth-inline-loading{
  animation:dofStableContentAppear 160ms ease-out both;
}
.skeleton-line::after,
.skeleton-box::after,
.skeleton-actions span::after,
.skeleton-chip::after,
.skeleton-action::after,
.orders-skeleton-timeline span::after{
  animation-duration:1.2s!important;
  animation-timing-function:cubic-bezier(.4,0,.2,1)!important;
}
@keyframes dofStableContentAppear{
  from{opacity:0;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.btn.is-loading{
  min-width:max-content;
  transform:translateZ(0)!important;
}
.btn.is-loading .btn-spinner{
  width:16px;
  height:16px;
  border-width:2px;
  animation:dofSpin .72s linear infinite!important;
}

/* Mobile-first polish: readable, one-hand friendly, no horizontal overflow. */
@media(max-width:768px){
  :root{
    --mobile-gutter:12px;
    --mobile-card-radius:22px;
  }
  html,
  body{
    width:100%;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
  }
  body{
    background:linear-gradient(180deg,#fff 0%,#fff8fc 72%,#fff 100%);
  }
  .topbar{
    overflow:hidden;
    backdrop-filter:blur(12px);
  }
  .nav{
    width:100%;
    max-width:100%;
    min-height:64px;
    padding:9px var(--mobile-gutter) 10px;
    gap:8px;
    flex-wrap:wrap;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
  }
  .brand img{
    width:clamp(132px,42vw,168px);
    max-width:100%;
  }
  .navlink,
  .account-pill,
  .cart-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    font-size:13px;
    line-height:1;
  }
  .account-pill span{
    max-width:74px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .search{
    order:20;
    flex:1 0 100%;
    width:100%;
    min-width:0;
    min-height:46px;
    margin-top:2px;
    padding:12px 15px;
    border-radius:16px;
    font-size:16px;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
  }
  .btn,
  .field,
  select.field,
  textarea.field,
  input.field{
    min-height:46px;
    font-size:16px;
  }
  .btn.small{
    min-height:44px;
    padding:10px 12px;
    font-size:14px;
  }
  .hero{
    width:auto;
    max-width:calc(100vw - 20px);
    margin:12px auto 14px;
    padding:18px;
    border-radius:24px;
    grid-template-columns:1fr;
    gap:16px;
  }
  .hero h1{
    font-size:clamp(28px,9vw,40px);
    letter-spacing:-.045em;
  }
  .hero p{
    font-size:15px;
    line-height:1.55;
  }
  .hero-logo-card{
    min-height:190px;
    border-radius:22px;
    padding:16px;
  }
  .hero-actions,
  .home-offer-actions,
  .buy-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .hero-actions .btn,
  .home-offer-actions .btn,
  .buy-actions .btn{
    width:100%;
  }
  .layout{
    display:block;
    max-width:100%;
    margin:0 auto 56px;
    padding:0 var(--mobile-gutter);
  }
  .side{
    position:static;
    top:auto;
    margin:0 0 14px;
    padding:12px;
    border-radius:20px;
    overflow:hidden;
  }
  .section-head{
    display:grid;
    gap:8px;
    margin:12px 2px 14px;
  }
  .section-head h1,
  .section-head h2{
    font-size:clamp(24px,7vw,31px);
  }
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
  }
  .card{
    border-radius:20px;
    box-shadow:0 10px 24px rgba(17,24,39,.055);
    overflow:hidden;
  }
  .card:hover{
    transform:none;
  }
  .imgwrap{
    aspect-ratio:1/1;
    background:#fff9fd;
  }
  .imgwrap img{
    object-fit:contain;
    padding:6px;
    transform:none!important;
  }
  .imgwrap img[src*="dof-logo-brand"]{
    padding:28px;
  }
  .cardbody{
    padding:11px 10px 12px;
    gap:7px;
  }
  .title{
    min-height:38px;
    font-size:14.5px;
    line-height:1.25;
  }
  .sell{
    font-size:17px;
  }
  .card .swatches,
  .card .small-text{
    display:none;
  }
  .card-actions{
    grid-template-columns:1fr;
    gap:8px;
  }
  .card-actions .btn{
    width:100%;
    min-height:44px;
  }
  .skeleton-card .imgwrap,
  .skeleton-box.imgwrap{
    min-height:auto;
    aspect-ratio:1/1;
  }
  .panel,
  .panel-lite,
  .auth-layout,
  .product-page,
  .offer-page-shell,
  .color-layout,
  .orders-page-shell,
  .customization-route-page{
    max-width:100%;
    min-width:0;
  }
  .auth-layout{
    display:block;
    margin:14px auto 56px;
    padding:0 var(--mobile-gutter);
  }
  .auth-layout > *{
    margin-bottom:14px;
  }
  .auth-inline-loading{
    grid-template-columns:auto minmax(0,1fr);
    padding:12px;
    border-radius:16px;
  }
  .product-page{
    display:block;
    margin:14px auto 56px;
    padding:0 var(--mobile-gutter);
  }
  .gallery{
    display:block;
    min-width:0;
  }
  .mainimg,
  .product-main-preview-shell{
    width:100%;
    max-width:100%;
    min-height:clamp(260px,82vw,420px);
    object-fit:contain;
  }
  .thumbs{
    display:flex;
    max-width:100%;
    overflow-x:auto;
    gap:8px;
    padding:8px 0 4px;
    scrollbar-width:thin;
  }
  .thumb-image-wrap,
  .gallery-thumb-btn{
    flex:0 0 auto;
  }
  .offer-page-shell,
  .offer-responsive-shell{
    width:auto!important;
    max-width:calc(100vw - 20px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .offer-coupon-banner,
  .home-sale-banner-card,
  .offer-sale-stage{
    max-width:100%;
    overflow:hidden;
    border-radius:22px;
  }
  .offer-page-uploaded-banner,
  .home-uploaded-sale-art{
    aspect-ratio:16/9!important;
  }
  .offer-page-uploaded-banner img,
  .home-uploaded-sale-art img{
    object-fit:contain!important;
  }
  .orders-page-shell,
  .order-tracking-shell{
    padding-left:var(--mobile-gutter)!important;
    padding-right:var(--mobile-gutter)!important;
  }
  .orders-list-card,
  .orders-skeleton-card{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:20px!important;
  }
  .orders-list-actions{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr;
  }
  .checkout-layout,
  .cart-layout{
    display:block!important;
    padding-left:var(--mobile-gutter)!important;
    padding-right:var(--mobile-gutter)!important;
  }
  .payment-popup-actions,
  .payment-whatsapp-actions,
  .delivery-address-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

@media(max-width:560px){
  .grid{
    grid-template-columns:1fr;
  }
  .card{
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    align-items:stretch;
  }
  .card > a{
    min-width:0;
  }
  .card .imgwrap{
    height:100%;
    min-height:142px;
    border-bottom:0;
    border-right:1px solid rgba(229,231,235,.72);
  }
  .cardbody{
    min-width:0;
  }
  .card-actions{
    grid-template-columns:1fr 1fr;
  }
  .card-actions .btn{
    min-width:0;
    padding-left:8px;
    padding-right:8px;
  }
}

@media(max-width:430px){
  .nav{
    gap:6px;
  }
  .brand img{
    width:136px;
  }
  .navlink,
  .account-pill,
  .cart-link{
    font-size:12.5px;
    padding-left:8px;
    padding-right:8px;
  }
  .layout,
  .auth-layout,
  .product-page,
  .orders-page-shell,
  .order-tracking-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .card{
    grid-template-columns:108px minmax(0,1fr);
  }
  .card .imgwrap{
    min-height:136px;
  }
  .title{
    font-size:14px;
  }
  .card-actions{
    gap:7px;
  }
  .card-actions .btn{
    min-height:42px;
    font-size:12.5px;
  }
}

/* Customization route mobile polish stays page-based, never modal-based. */
@media(max-width:768px){
  .customization-page-shell,
  .customization-route-page,
  .customize-route-page-card,
  .customization-page-form-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .customization-page-form-card{
    border-radius:22px!important;
    padding:12px!important;
  }
  .customization-workspace,
  .custom-workbench{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .customization-preview-column,
  .customization-controls-column{
    position:static!important;
    max-height:none!important;
    overflow:visible!important;
    min-width:0!important;
  }
  .custom-preview-panel,
  .custom-section-card,
  .thread-color-section,
  .cloth-color-card{
    border-radius:20px!important;
  }
  .custom-preview-panel{
    padding:12px!important;
  }
  .custom-preview-panel h3,
  .custom-section-card h3{
    font-size:1rem!important;
    line-height:1.2!important;
  }
  .custom-live-preview-stage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .custom-modal-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:24!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:12px 10px max(12px,env(safe-area-inset-bottom))!important;
    margin:16px -10px -10px!important;
    border-top:1px solid rgba(229,231,235,.92)!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(10px)!important;
    box-shadow:0 -12px 28px rgba(15,23,42,.08)!important;
  }
  .custom-modal-actions .btn{
    width:100%!important;
    min-height:50px!important;
  }
  .thread-row,
  .thread-color-row,
  .cloth-color-row{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
  }
  .thread-row .field,
  .thread-color-row .field,
  .cloth-color-row .field,
  .catalog-picker-btn,
  [data-open-catalog],
  [data-open-cloth-catalog]{
    width:100%!important;
    min-height:46px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .skeleton-line::after,
  .skeleton-box::after,
  .skeleton-actions span::after,
  .skeleton-chip::after,
  .skeleton-action::after,
  .orders-skeleton-timeline span::after,
  .btn-spinner,
  .btn.is-loading .btn-spinner{
    animation:none!important;
  }
  .card,
  .btn,
  .imgwrap img,
  .image-reveal{
    transition:none!important;
    transform:none!important;
  }
}

/* v26.5.2 - compact product loading: remove the old large catalog panel from buyer shop/home. */
#status.catalog-import-slot,
#status .import-loader-stage,
#status .import-loader-preview {
  display: none !important;
}

#status.loading:empty,
#status.loading[style*="display:none"] {
  margin: 0 !important;
}

.grid.grid-loading-instant {
  align-items: stretch;
}

.grid.grid-loading-instant .skeleton-card {
  min-height: 100%;
  opacity: 1;
  animation: dofContentReady 180ms ease both;
}

.grid.grid-loading-instant .skeleton-card .imgwrap {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.catalog-loading-note {
  margin: 0 0 14px;
}

.catalog-loading-note .inline-progress {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: none;
  background: linear-gradient(135deg, #fff, #fff8fc);
}

.catalog-loading-note .inline-progress span {
  font-size: 13px;
  font-weight: 850;
}

.catalog-error-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #fecdd3;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fff5f7);
  color: #7f1d1d;
  box-shadow: 0 12px 28px rgba(190, 18, 60, .06);
}

.catalog-error-compact b,
.catalog-error-compact span {
  min-width: 0;
}

.catalog-error-compact span {
  grid-column: 1 / 2;
  font-size: 13px;
  line-height: 1.45;
  color: #9f1239;
}

.catalog-error-compact .btn {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 40px;
  white-space: nowrap;
}

.catalog-compact-loader-slot {
  margin: 0 0 12px !important;
}

.catalog-compact-loader {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, #fff8fc);
  color: var(--brand-ink);
  font-weight: 850;
}

.catalog-compact-loader-bar {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #f9dceb;
}

.catalog-compact-loader-bar i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #f9a8d4, #fbbf24);
  transform: translate3d(-80%, 0, 0);
  animation: dofCompactCatalogBar 1.1s cubic-bezier(.4,0,.2,1) infinite;
}

.catalog-compact-loader-text {
  font-size: 13px;
}

@keyframes dofCompactCatalogBar {
  0% { transform: translate3d(-85%, 0, 0); }
  100% { transform: translate3d(245%, 0, 0); }
}

@media (max-width: 640px) {
  .catalog-loading-note,
  .catalog-error-compact,
  .catalog-compact-loader-slot {
    margin-bottom: 12px;
  }

  .catalog-error-compact {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .catalog-error-compact .btn {
    grid-row: auto;
    grid-column: auto;
    width: 100%;
  }

  .grid.grid-loading-instant .skeleton-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-compact-loader-bar i,
  .grid.grid-loading-instant .skeleton-card {
    animation: none !important;
  }
}

/* v26.5.3 mobile product card layout fix
   Final mobile override: product cards are vertical, readable, and never side-squeezed. */
@media (max-width: 760px) {
  .layout,
  .grid,
  .offer-grid,
  .offer-mini-grid,
  .home-offer-rail,
  .home-sale-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .grid,
  .offer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .grid > .card,
  .card.product-card,
  .offer-grid > .offer-card,
  .offer-card.card,
  .skeleton-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .card.product-card > a,
  .grid > .card > a,
  .offer-card > a,
  .offer-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .card.product-card .imgwrap,
  .grid > .card .imgwrap,
  .offer-card .offer-image,
  .offer-card.card .offer-image,
  .skeleton-card .imgwrap,
  .skeleton-box.imgwrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(229, 231, 235, .72) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #fff9fd, #fff) !important;
  }

  .card.product-card .imgwrap img,
  .grid > .card .imgwrap img,
  .offer-card .offer-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 8px !important;
    transform: none !important;
  }

  .card.product-card .cardbody,
  .grid > .card .cardbody,
  .offer-card .cardbody,
  .skeleton-card .cardbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  .card .code,
  .product-card .code,
  .offer-card .code {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
    letter-spacing: .055em !important;
  }

  .card .title,
  .product-card .title,
  .offer-card .title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: clamp(16px, 4.2vw, 18px) !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .card .price,
  .product-card .price,
  .offer-card .price,
  .offer-price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .card .price > *,
  .product-card .price > *,
  .offer-card .price > * {
    min-width: 0 !important;
  }

  .sell {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.1 !important;
  }

  .mrp {
    font-size: 14px !important;
  }

  .card .badge,
  .product-card .badge,
  .offer-card .badge,
  .sale-badge,
  .offer-badge,
  .custom-badge {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .card .swatches {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    scrollbar-width: thin !important;
  }

  .card .swatches .mini-chip {
    flex: 0 0 auto !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .card .small-text,
  .product-card .small-text,
  .offer-card .small-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }

  .card-actions,
  .product-card .card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }

  .offer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card-actions .btn,
  .product-card .card-actions .btn,
  .offer-actions .btn,
  .offer-actions a.btn,
  .offer-actions button.btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 11px 10px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 999px !important;
    overflow-wrap: anywhere !important;
  }

  .offer-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .offer-row .code,
  .offer-row .badge {
    flex: 0 1 auto !important;
  }
}

@media (max-width: 380px) {
  .card-actions,
  .product-card .card-actions {
    grid-template-columns: 1fr !important;
  }

  .card-actions .btn,
  .product-card .card-actions .btn,
  .offer-actions .btn {
    min-height: 46px !important;
  }
}

/* v26.5.4: Vintex/cloth color dropdown swatch previewer. Keeps native select as data source; custom UI gives visual comparison. */
.customization-page-form-card .color-native-select,
.custom-modal .color-native-select{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
}
.customization-page-form-card .color-preview-select,
.custom-modal .color-preview-select{
  position:relative;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  z-index:5;
}
.customization-page-form-card .color-preview-trigger,
.custom-modal .color-preview-trigger{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,#fff,#fff7fb);
  color:var(--ink);
  text-align:left;
  padding:7px 10px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  box-sizing:border-box;
}
.customization-page-form-card .color-preview-trigger:hover,
.custom-modal .color-preview-trigger:hover,
.customization-page-form-card .color-preview-select.is-open .color-preview-trigger,
.custom-modal .color-preview-select.is-open .color-preview-trigger{
  border-color:var(--brand-line);
  box-shadow:0 12px 28px rgba(193,53,132,.10);
}
.customization-page-form-card .color-preview-trigger:focus-visible,
.custom-modal .color-preview-trigger:focus-visible,
.customization-page-form-card .color-option-row:focus-visible,
.custom-modal .color-option-row:focus-visible,
.customization-page-form-card .color-search-input:focus-visible,
.custom-modal .color-search-input:focus-visible{
  outline:3px solid rgba(193,53,132,.20);
  outline-offset:2px;
}
.customization-page-form-card .color-preview-chip,
.custom-modal .color-preview-chip,
.customization-page-form-card .color-option-swatch,
.custom-modal .color-option-swatch,
.customization-page-form-card .color-shower-swatch,
.custom-modal .color-shower-swatch{
  display:block;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.82),0 6px 14px rgba(15,23,42,.08);
  flex:0 0 auto;
}
.customization-page-form-card .color-preview-chip,
.custom-modal .color-preview-chip,
.customization-page-form-card .color-option-swatch,
.custom-modal .color-option-swatch{
  width:34px;
  height:34px;
  border-radius:50%;
}
.customization-page-form-card .color-shower-swatch,
.custom-modal .color-shower-swatch{
  width:58px;
  height:58px;
  border-radius:18px;
}
.customization-page-form-card .is-hex-missing,
.custom-modal .is-hex-missing{
  background:repeating-linear-gradient(45deg,#f8fafc 0 8px,#e5e7eb 8px 16px)!important;
}
.customization-page-form-card .color-preview-meta,
.custom-modal .color-preview-meta,
.customization-page-form-card .color-option-copy,
.custom-modal .color-option-copy,
.customization-page-form-card .color-shower-meta,
.custom-modal .color-shower-meta{
  display:grid;
  min-width:0;
  line-height:1.2;
}
.customization-page-form-card .color-preview-meta b,
.custom-modal .color-preview-meta b,
.customization-page-form-card .color-option-copy b,
.custom-modal .color-option-copy b,
.customization-page-form-card .color-shower-meta b,
.custom-modal .color-shower-meta b{
  font-size:14px;
  font-weight:950;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.customization-page-form-card .color-preview-meta span,
.custom-modal .color-preview-meta span,
.customization-page-form-card .color-option-copy span,
.custom-modal .color-option-copy span,
.customization-page-form-card .color-shower-meta span,
.custom-modal .color-shower-meta span{
  color:var(--text);
  font-size:12.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.customization-page-form-card .color-option-copy small,
.custom-modal .color-option-copy small,
.customization-page-form-card .color-shower-meta small,
.custom-modal .color-shower-meta small{
  color:var(--muted);
  font-size:11.5px;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.customization-page-form-card .color-preview-caret,
.custom-modal .color-preview-caret{
  color:var(--brand);
  font-size:18px;
  font-weight:950;
  transition:transform .16s ease;
}
.customization-page-form-card .color-preview-select.is-open .color-preview-caret,
.custom-modal .color-preview-select.is-open .color-preview-caret{
  transform:rotate(180deg);
}
.customization-page-form-card .color-preview-panel,
.custom-modal .color-preview-panel{
  position:absolute;
  inset-inline:0;
  top:calc(100% + 8px);
  z-index:220;
  display:grid;
  gap:10px;
  max-height:min(440px,62vh);
  overflow:hidden;
  border:1px solid var(--brand-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 70px rgba(15,23,42,.22);
  padding:12px;
  box-sizing:border-box;
}
.customization-page-form-card .color-shower-panel,
.custom-modal .color-shower-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  border:1px solid rgba(235,199,220,.95);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#fff6fb);
  padding:10px;
}
.customization-page-form-card .color-search-label,
.custom-modal .color-search-label{
  display:grid;
  gap:5px;
  margin:0;
}
.customization-page-form-card .color-search-label span,
.custom-modal .color-search-label span{
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.customization-page-form-card .color-search-input,
.custom-modal .color-search-input{
  margin:0!important;
  min-height:42px!important;
  border-radius:14px!important;
}
.customization-page-form-card .color-options-list,
.custom-modal .color-options-list{
  display:grid;
  gap:7px;
  min-height:0;
  max-height:260px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:3px;
  scrollbar-gutter:stable;
}
.customization-page-form-card .color-option-row,
.custom-modal .color-option-row{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(229,231,235,.96);
  border-radius:16px;
  background:#fff;
  padding:8px 10px;
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease,background .14s ease;
  box-sizing:border-box;
}
.customization-page-form-card .color-option-row:hover,
.custom-modal .color-option-row:hover{
  transform:translateY(-1px);
  border-color:var(--brand-line);
  box-shadow:0 9px 20px rgba(193,53,132,.08);
}
.customization-page-form-card .color-option-row.is-selected,
.custom-modal .color-option-row.is-selected{
  border-color:var(--brand);
  background:linear-gradient(135deg,#fff,#fff3f9);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.customization-page-form-card .color-option-empty,
.custom-modal .color-option-empty{
  border:1px dashed var(--brand-line);
  border-radius:15px;
  padding:12px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.customization-page-form-card .custom-color-picker-catalog,
.customization-page-form-card .cloth-color-picker{
  align-items:start!important;
}
.customization-page-form-card .custom-color-picker-catalog .color-preview-select,
.customization-page-form-card .cloth-color-picker .color-preview-select{
  align-self:stretch;
}
@media(max-width:860px){
  .customization-page-form-card .custom-color-picker-catalog,
  .customization-page-form-card .cloth-color-picker{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .customization-page-form-card .custom-color-picker-catalog .color-preview-select,
  .customization-page-form-card .cloth-color-picker .color-preview-select{
    width:100%;
    max-width:100%;
  }
  .customization-page-form-card .color-preview-panel,
  .custom-modal .color-preview-panel{
    position:fixed;
    inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px;
    top:auto;
    max-height:min(76dvh,620px);
    border-radius:24px 24px 18px 18px;
    z-index:650;
    padding:12px;
  }
  body.color-preview-dropdown-open::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:640;
    background:rgba(15,23,42,.18);
    pointer-events:none;
  }
  .customization-page-form-card .color-options-list,
  .custom-modal .color-options-list{
    max-height:min(48dvh,390px);
  }
  .customization-page-form-card .color-option-row,
  .custom-modal .color-option-row,
  .customization-page-form-card .color-preview-trigger,
  .custom-modal .color-preview-trigger{
    min-height:50px;
  }
  .customization-page-form-card .color-preview-meta b,
  .custom-modal .color-preview-meta b,
  .customization-page-form-card .color-option-copy b,
  .custom-modal .color-option-copy b{
    font-size:13.5px;
  }
  .customization-page-form-card .color-preview-meta span,
  .custom-modal .color-preview-meta span,
  .customization-page-form-card .color-option-copy span,
  .custom-modal .color-option-copy span{
    font-size:12px;
  }
}
@media(max-width:430px){
  .customization-page-form-card .color-shower-panel,
  .custom-modal .color-shower-panel{
    grid-template-columns:48px minmax(0,1fr);
    gap:9px;
  }
  .customization-page-form-card .color-shower-swatch,
  .custom-modal .color-shower-swatch{
    width:48px;
    height:48px;
    border-radius:16px;
  }
}
@media(prefers-reduced-motion:reduce){
  .customization-page-form-card .color-preview-trigger,
  .customization-page-form-card .color-option-row,
  .customization-page-form-card .color-preview-caret,
  .custom-modal .color-preview-trigger,
  .custom-modal .color-option-row,
  .custom-modal .color-preview-caret{
    transition:none!important;
  }
}

/* v26.5.6: Color selector popup visibility fix.
   Portal the shade list to body so customization cards/sticky preview/overflow rules cannot clip it. */
body > .color-preview-portal-panel{
  position:fixed!important;
  z-index:2147483000!important;
  display:grid!important;
  gap:10px!important;
  overflow:hidden!important;
  border:1px solid var(--brand-line,#ebc7dc)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(15,23,42,.28)!important;
  padding:12px!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  max-width:calc(100vw - 24px)!important;
}
body > .color-preview-portal-panel[hidden]{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
body > .color-preview-portal-panel .color-preview-panel-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  color:var(--ink,#111827)!important;
}
body > .color-preview-portal-panel .color-preview-panel-head strong{
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
}
body > .color-preview-portal-panel .color-preview-close{
  min-height:36px!important;
  border:1px solid var(--line,#e5e7eb)!important;
  border-radius:999px!important;
  background:#fff7fb!important;
  color:var(--brand,#c13584)!important;
  font-weight:950!important;
  padding:7px 12px!important;
  cursor:pointer!important;
}
body > .color-preview-portal-panel .color-shower-panel{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  border:1px solid rgba(235,199,220,.95)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff,#fff6fb)!important;
  padding:10px!important;
  min-width:0!important;
}
body > .color-preview-portal-panel .color-shower-swatch,
body > .color-preview-portal-panel .color-option-swatch{
  display:block!important;
  flex:0 0 auto!important;
  border:1px solid rgba(15,23,42,.14)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.82),0 6px 14px rgba(15,23,42,.08)!important;
}
body > .color-preview-portal-panel .color-shower-swatch{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
}
body > .color-preview-portal-panel .color-option-swatch{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
}
body > .color-preview-portal-panel .is-hex-missing{
  background:repeating-linear-gradient(45deg,#f8fafc 0 8px,#e5e7eb 8px 16px)!important;
}
body > .color-preview-portal-panel .color-search-label{
  display:grid!important;
  gap:5px!important;
  margin:0!important;
}
body > .color-preview-portal-panel .color-search-label span{
  color:var(--muted,#6b7280)!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
body > .color-preview-portal-panel .color-search-input{
  width:100%!important;
  min-height:42px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
}
body > .color-preview-portal-panel .color-options-list{
  display:grid!important;
  gap:7px!important;
  min-height:0!important;
  max-height:min(260px,calc(100dvh - 220px))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding-right:3px!important;
  scrollbar-gutter:stable!important;
}
body > .color-preview-portal-panel .color-option-row{
  width:100%!important;
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  text-align:left!important;
  border:1px solid rgba(229,231,235,.96)!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:8px 10px!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  color:var(--ink,#111827)!important;
}
body > .color-preview-portal-panel .color-option-row:hover,
body > .color-preview-portal-panel .color-option-row:focus-visible{
  border-color:var(--brand-line,#ebc7dc)!important;
  box-shadow:0 9px 20px rgba(193,53,132,.10)!important;
  outline:none!important;
}
body > .color-preview-portal-panel .color-option-row.is-selected{
  border-color:var(--brand,#c13584)!important;
  background:linear-gradient(135deg,#fff,#fff3f9)!important;
  box-shadow:0 0 0 3px var(--brand-soft,rgba(193,53,132,.12))!important;
}
body > .color-preview-portal-panel .color-shower-meta,
body > .color-preview-portal-panel .color-option-copy{
  display:grid!important;
  min-width:0!important;
  line-height:1.2!important;
}
body > .color-preview-portal-panel .color-shower-meta b,
body > .color-preview-portal-panel .color-option-copy b{
  font-size:14px!important;
  font-weight:950!important;
  color:var(--ink,#111827)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body > .color-preview-portal-panel .color-shower-meta span,
body > .color-preview-portal-panel .color-option-copy span{
  color:var(--text,#374151)!important;
  font-size:12.5px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body > .color-preview-portal-panel .color-shower-meta small,
body > .color-preview-portal-panel .color-option-copy small{
  color:var(--muted,#6b7280)!important;
  font-size:11.5px!important;
  margin-top:2px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.color-preview-dropdown-open::after{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:2147482990!important;
  background:rgba(15,23,42,.18)!important;
  pointer-events:none!important;
}
@media(max-width:860px){
  body > .color-preview-portal-panel.is-mobile-sheet{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    max-height:min(76dvh,620px)!important;
    border-radius:24px 24px 18px 18px!important;
    padding:12px!important;
  }
  body > .color-preview-portal-panel .color-options-list{
    max-height:min(46dvh,390px)!important;
  }
  body > .color-preview-portal-panel .color-option-row,
  body > .color-preview-portal-panel .color-preview-close{
    min-height:44px!important;
  }
  body > .color-preview-portal-panel .color-option-copy b,
  body > .color-preview-portal-panel .color-shower-meta b{font-size:13.5px!important}
  body > .color-preview-portal-panel .color-option-copy span,
  body > .color-preview-portal-panel .color-shower-meta span{font-size:12px!important}
}
@media(max-width:430px){
  body > .color-preview-portal-panel .color-shower-panel{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body > .color-preview-portal-panel .color-shower-swatch{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body > .color-preview-portal-panel,
  body > .color-preview-portal-panel *{
    transition:none!important;
    animation:none!important;
  }
}

/* v26.5.7 premium page transition system
   Final authoritative buyer-site transition: stable header, soft app slide/fade/scale. */
html.page-is-navigating,
body.page-is-navigating{
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
  cursor:progress!important;
}
.page-transition-enabled body{
  perspective:none!important;
  overflow-x:hidden!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform-style:flat!important;
  transition:none!important;
  contain:paint!important;
  max-width:100%!important;
  will-change:auto!important;
}
body.page-is-navigating .page-transition-shell,
body.page-transition-exit .page-transition-shell,
body.page-transition-enter .page-transition-shell{
  will-change:transform,opacity!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofPremiumPageExitForward 130ms cubic-bezier(.4,0,.2,1) both!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofPremiumPageEnterForward 230ms cubic-bezier(.2,.78,.18,1) both!important;
  pointer-events:auto!important;
}
body.page-direction-back.page-transition-exit .page-transition-shell{
  animation-name:dofPremiumPageExitBack!important;
}
body.page-direction-back.page-transition-enter .page-transition-shell{
  animation-name:dofPremiumPageEnterBack!important;
}
body.page-direction-fade.page-transition-exit .page-transition-shell{
  animation:dofPremiumPageFadeOut 120ms cubic-bezier(.4,0,.2,1) both!important;
}
body.page-direction-fade.page-transition-enter .page-transition-shell{
  animation:dofPremiumPageFadeIn 180ms cubic-bezier(.2,.7,.2,1) both!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  will-change:auto!important;
}
@keyframes dofPremiumPageExitForward{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  100%{opacity:.08;transform:translate3d(-18px,0,0) scale(.988);filter:none}
}
@keyframes dofPremiumPageEnterForward{
  0%{opacity:.08;transform:translate3d(22px,0,0) scale(.988);filter:none}
  72%{opacity:1;transform:translate3d(-2px,0,0) scale(1.001);filter:none}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
}
@keyframes dofPremiumPageExitBack{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  100%{opacity:.08;transform:translate3d(18px,0,0) scale(.988);filter:none}
}
@keyframes dofPremiumPageEnterBack{
  0%{opacity:.08;transform:translate3d(-22px,0,0) scale(.988);filter:none}
  72%{opacity:1;transform:translate3d(2px,0,0) scale(1.001);filter:none}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
}
@keyframes dofPremiumPageFadeOut{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  100%{opacity:.18;transform:translate3d(0,0,0) scale(.995);filter:none}
}
@keyframes dofPremiumPageFadeIn{
  0%{opacity:.18;transform:translate3d(0,0,0) scale(.995);filter:none}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
}
@media(max-width:760px){
  html.page-is-navigating,
  body.page-is-navigating,
  .page-transition-enabled body{
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
  }
  body.page-transition-exit .page-transition-shell{
    animation-duration:110ms!important;
  }
  body.page-transition-enter .page-transition-shell{
    animation-duration:190ms!important;
  }
  @keyframes dofPremiumPageExitForward{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
    100%{opacity:.12;transform:translate3d(-14px,0,0) scale(.99);filter:none}
  }
  @keyframes dofPremiumPageEnterForward{
    0%{opacity:.12;transform:translate3d(18px,0,0) scale(.99);filter:none}
    74%{opacity:1;transform:translate3d(-1px,0,0) scale(1.001);filter:none}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  }
  @keyframes dofPremiumPageExitBack{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
    100%{opacity:.12;transform:translate3d(14px,0,0) scale(.99);filter:none}
  }
  @keyframes dofPremiumPageEnterBack{
    0%{opacity:.12;transform:translate3d(-18px,0,0) scale(.99);filter:none}
    74%{opacity:1;transform:translate3d(1px,0,0) scale(1.001);filter:none}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell{
    animation:dofPremiumReducedFade 80ms ease-out both!important;
    transform:none!important;
    filter:none!important;
  }
  body.page-is-navigating .page-transition-shell,
  .page-transition-shell{
    will-change:auto!important;
  }
  @keyframes dofPremiumReducedFade{
    0%{opacity:.92}
    100%{opacity:1}
  }
}

/* v26.5.8 ultra-fast loading + premium bounce interaction system
   Final transition/loading overrides. Header remains stable; only main content moves. */
:root{
  --dof-premium-ease:cubic-bezier(.2,.9,.2,1);
  --dof-press-ease:cubic-bezier(.18,.88,.26,1.18);
}
html,body{
  max-width:100%;
  overflow-x:hidden;
}
.page-transition-enabled body{
  perspective:none!important;
  overflow-x:hidden!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform-style:flat!important;
  transition:none!important;
  max-width:100%!important;
  contain:paint!important;
  will-change:auto!important;
}
body.page-is-navigating .page-transition-shell,
body.page-transition-exit .page-transition-shell,
body.page-transition-enter .page-transition-shell{
  will-change:transform,opacity!important;
}
body.page-transition-exit .page-transition-shell{
  animation:dofUltraPageExitForward 120ms cubic-bezier(.4,0,.2,1) both!important;
  pointer-events:none!important;
}
body.page-transition-enter .page-transition-shell{
  animation:dofUltraPageEnterForward 210ms var(--dof-premium-ease) both!important;
  pointer-events:auto!important;
}
body.page-direction-back.page-transition-exit .page-transition-shell{animation-name:dofUltraPageExitBack!important}
body.page-direction-back.page-transition-enter .page-transition-shell{animation-name:dofUltraPageEnterBack!important}
body.page-direction-fade.page-transition-exit .page-transition-shell{animation:dofUltraPageFadeOut 100ms ease-out both!important}
body.page-direction-fade.page-transition-enter .page-transition-shell{animation:dofUltraPageFadeIn 150ms ease-out both!important}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  will-change:auto!important;
}
@keyframes dofUltraPageExitForward{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.04;transform:translate3d(-16px,0,0) scale(.99)}
}
@keyframes dofUltraPageEnterForward{
  0%{opacity:.04;transform:translate3d(20px,0,0) scale(.99)}
  68%{opacity:1;transform:translate3d(-2px,0,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofUltraPageExitBack{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.04;transform:translate3d(16px,0,0) scale(.99)}
}
@keyframes dofUltraPageEnterBack{
  0%{opacity:.04;transform:translate3d(-20px,0,0) scale(.99)}
  68%{opacity:1;transform:translate3d(2px,0,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofUltraPageFadeOut{from{opacity:1}to{opacity:.18}}
@keyframes dofUltraPageFadeIn{from{opacity:.18}to{opacity:1}}

.btn,
button,
a.navlink,
a.cart-link,
.card,
.home-offer-chip-card,
.gallery-thumb-btn,
.chip,
.delivery-option-card,
.color-product{
  -webkit-tap-highlight-color:transparent;
}
.btn:not(:disabled),
button:not(:disabled),
a.navlink,
a.cart-link,
.card,
.home-offer-chip-card,
.gallery-thumb-btn,
.chip,
.delivery-option-card,
.color-product{
  transition-property:transform,box-shadow,opacity,background,border-color,color;
  transition-duration:160ms;
  transition-timing-function:var(--dof-premium-ease);
}
.btn:not(:disabled):active,
button:not(:disabled):active,
a.navlink:active,
a.cart-link:active,
.card:active,
.home-offer-chip-card:active,
.gallery-thumb-btn:active,
.chip:active,
.delivery-option-card:active,
.color-product:active,
.ui-press-active{
  transform:translate3d(0,1px,0) scale(.975)!important;
}
@media(hover:hover) and (pointer:fine){
  .product-card:hover,
  .home-offer-chip-card:hover,
  .color-product:hover{
    transform:translate3d(0,-3px,0) scale(1.002);
  }
  .btn:not(:disabled):hover,
  .gallery-thumb-btn:hover,
  .chip:hover{
    transform:translate3d(0,-1px,0);
  }
}

.global-loading-bar{
  height:3px!important;
  z-index:9000!important;
  transform:translateZ(0);
  contain:paint;
}
.global-loading-bar.is-active span{
  animation:dofUltraTopLoad 900ms var(--dof-premium-ease) infinite!important;
}
@keyframes dofUltraTopLoad{
  0%{transform:translate3d(-120%,0,0);opacity:.8}
  55%{opacity:1}
  100%{transform:translate3d(250%,0,0);opacity:.85}
}
.skeleton-card,
.orders-skeleton-card,
.customize-route-loading-card,
.skeleton-box,
.skeleton-line,
.skeleton-actions span,
.skeleton-chip,
.skeleton-action{
  background-size:220% 100%!important;
  animation:dofPremiumSkeletonShimmer 1250ms linear infinite;
  will-change:background-position;
}
@keyframes dofPremiumSkeletonShimmer{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
.image-reveal{
  opacity:0;
  transform:translateZ(0) scale(.995);
}
.image-reveal.is-loaded{
  opacity:1;
  transform:translateZ(0) scale(1);
  transition:opacity 180ms ease-out,transform 180ms var(--dof-premium-ease)!important;
}
.product-card.animate-in,
.order-card.animate-in,
.cart-row.animate-in,
.custom-section-card.animate-in,
.color-product.animate-in{
  opacity:0;
  transform:translate3d(0,8px,0) scale(.992);
}
.product-card.animate-in.is-visible,
.order-card.animate-in.is-visible,
.cart-row.animate-in.is-visible,
.custom-section-card.animate-in.is-visible,
.color-product.animate-in.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.catalog-error-compact,
.status-pill,
.toast.warn{
  animation:dofCompactNoticeIn 160ms var(--dof-premium-ease) both;
}
@keyframes dofCompactNoticeIn{
  from{opacity:0;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.btn.is-loading,
button.is-loading{
  pointer-events:none;
  transform:none!important;
}
.btn.is-loading .btn-spinner,
button.is-loading .btn-spinner{
  animation:dofSpin 680ms linear infinite!important;
}

@media(max-width:760px){
  body.page-transition-exit .page-transition-shell{animation-duration:95ms!important}
  body.page-transition-enter .page-transition-shell{animation-duration:185ms!important}
  @keyframes dofUltraPageExitForward{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.08;transform:translate3d(-12px,0,0) scale(.992)}
  }
  @keyframes dofUltraPageEnterForward{
    0%{opacity:.08;transform:translate3d(16px,0,0) scale(.992)}
    72%{opacity:1;transform:translate3d(-1px,0,0) scale(1.001)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  @keyframes dofUltraPageExitBack{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.08;transform:translate3d(12px,0,0) scale(.992)}
  }
  @keyframes dofUltraPageEnterBack{
    0%{opacity:.08;transform:translate3d(-16px,0,0) scale(.992)}
    72%{opacity:1;transform:translate3d(1px,0,0) scale(1.001)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  .btn:not(:disabled):active,
  button:not(:disabled):active,
  a.navlink:active,
  a.cart-link:active,
  .card:active,
  .home-offer-chip-card:active,
  .gallery-thumb-btn:active,
  .chip:active,
  .delivery-option-card:active,
  .color-product:active,
  .ui-press-active{
    transform:translate3d(0,1px,0) scale(.982)!important;
  }
  .product-card,
  .card,
  .panel,
  .customize-route-page-card,
  .customization-route-page,
  .checkout-page,
  .orders-page-shell{
    max-width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell,
  .product-card.animate-in,
  .order-card.animate-in,
  .cart-row.animate-in,
  .custom-section-card.animate-in,
  .color-product.animate-in,
  .image-reveal,
  .catalog-error-compact,
  .status-pill,
  .toast.warn{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
  .skeleton-card,
  .orders-skeleton-card,
  .customize-route-loading-card,
  .skeleton-box,
  .skeleton-line,
  .skeleton-actions span,
  .skeleton-chip,
  .skeleton-action{
    animation:none!important;
  }
  .btn:not(:disabled):active,
  button:not(:disabled):active,
  .ui-press-active{
    transform:none!important;
  }
}

/* v26.5.9 OriginOS-style page bounce + fast UI polish
   Final authoritative transition override. Header/nav stays stable; only page content moves. */
:root{
  --dof-origin-ease-out:cubic-bezier(.16,1,.3,1);
  --dof-origin-ease-in:cubic-bezier(.4,0,.2,1);
  --dof-origin-spring:cubic-bezier(.2,.9,.2,1);
}
html.page-transition-enabled,
html.page-is-navigating,
body.page-is-navigating{
  overflow-x:hidden!important;
}
html.page-transition-enabled body{
  perspective:none!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
  contain:paint;
}
body.page-transition-exit .page-transition-shell,
body.page-transition-enter .page-transition-shell{
  will-change:transform,opacity!important;
  pointer-events:none!important;
  transform-style:flat!important;
}
body.page-transition-exit.page-direction-forward .page-transition-shell,
body.page-transition-exit:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
  animation:dofOriginOsExitForward 145ms var(--dof-origin-ease-in) both!important;
}
body.page-transition-enter.page-direction-forward .page-transition-shell,
body.page-transition-enter:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
  animation:dofOriginOsEnterForward 305ms var(--dof-origin-ease-out) both!important;
}
body.page-transition-exit.page-direction-back .page-transition-shell{
  animation:dofOriginOsExitBack 145ms var(--dof-origin-ease-in) both!important;
}
body.page-transition-enter.page-direction-back .page-transition-shell{
  animation:dofOriginOsEnterBack 305ms var(--dof-origin-ease-out) both!important;
}
body.page-transition-exit.page-direction-fade .page-transition-shell{
  animation:dofOriginOsFadeOut 105ms ease-out both!important;
}
body.page-transition-enter.page-direction-fade .page-transition-shell{
  animation:dofOriginOsFadeIn 160ms ease-out both!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  animation:none!important;
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1!important;
  filter:none!important;
  will-change:auto!important;
}
@keyframes dofOriginOsExitForward{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.18;transform:translate3d(-26px,0,0) scale(.984)}
}
@keyframes dofOriginOsEnterForward{
  0%{opacity:0;transform:translate3d(34px,0,0) scale(.982)}
  55%{opacity:1;transform:translate3d(-8px,0,0) scale(1.008)}
  76%{opacity:1;transform:translate3d(3px,0,0) scale(.997)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofOriginOsExitBack{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.18;transform:translate3d(26px,0,0) scale(.984)}
}
@keyframes dofOriginOsEnterBack{
  0%{opacity:0;transform:translate3d(-34px,0,0) scale(.982)}
  55%{opacity:1;transform:translate3d(8px,0,0) scale(1.008)}
  76%{opacity:1;transform:translate3d(-3px,0,0) scale(.997)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofOriginOsFadeOut{from{opacity:1;transform:scale(1)}to{opacity:.22;transform:scale(.994)}}
@keyframes dofOriginOsFadeIn{from{opacity:.22;transform:scale(.994)}to{opacity:1;transform:scale(1)}}

/* Subtle app-like tactile bounce. Final layout is never changed. */
.btn:not(:disabled),
button:not(:disabled),
a.navlink,
a.cart-link,
.card,
.product-card,
.home-offer-chip-card,
.gallery-thumb-btn,
.chip,
.delivery-option-card,
.color-product{
  transition:transform 180ms var(--dof-origin-spring),box-shadow 180ms ease,opacity 160ms ease,background 160ms ease,border-color 160ms ease,color 160ms ease!important;
  touch-action:manipulation;
}
.btn:not(:disabled):active,
button:not(:disabled):active,
a.navlink:active,
a.cart-link:active,
.card:active,
.product-card:active,
.home-offer-chip-card:active,
.gallery-thumb-btn:active,
.chip:active,
.delivery-option-card:active,
.color-product:active,
.ui-press-active{
  transform:translate3d(0,1px,0) scale(.972)!important;
}
@media(hover:hover) and (pointer:fine){
  .product-card:hover,
  .card:hover,
  .home-offer-chip-card:hover,
  .color-product:hover{
    transform:translate3d(0,-4px,0) scale(1.003)!important;
    box-shadow:0 18px 44px rgba(17,24,39,.09)!important;
  }
  .btn:not(:disabled):hover,
  .gallery-thumb-btn:hover,
  .chip:hover{
    transform:translate3d(0,-1px,0) scale(1.002)!important;
  }
}

/* Fast but calm loading polish: small progress, no giant panels. */
.global-loading-bar.is-active span{
  animation:dofOriginOsTopLoad 760ms var(--dof-origin-ease-out) infinite!important;
}
@keyframes dofOriginOsTopLoad{
  0%{transform:translate3d(-120%,0,0) scaleX(.42);opacity:.65}
  45%{transform:translate3d(20%,0,0) scaleX(1);opacity:1}
  100%{transform:translate3d(240%,0,0) scaleX(.54);opacity:.82}
}
.product-card.animate-in.is-visible,
.order-card.animate-in.is-visible,
.cart-row.animate-in.is-visible,
.custom-section-card.animate-in.is-visible,
.color-product.animate-in.is-visible{
  transition:opacity 210ms ease-out,transform 260ms var(--dof-origin-ease-out)!important;
}

@media(max-width:760px){
  body.page-transition-exit.page-direction-forward .page-transition-shell,
  body.page-transition-exit:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
    animation:dofOriginOsExitForwardMobile 125ms var(--dof-origin-ease-in) both!important;
  }
  body.page-transition-enter.page-direction-forward .page-transition-shell,
  body.page-transition-enter:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
    animation:dofOriginOsEnterForwardMobile 265ms var(--dof-origin-ease-out) both!important;
  }
  body.page-transition-exit.page-direction-back .page-transition-shell{
    animation:dofOriginOsExitBackMobile 125ms var(--dof-origin-ease-in) both!important;
  }
  body.page-transition-enter.page-direction-back .page-transition-shell{
    animation:dofOriginOsEnterBackMobile 265ms var(--dof-origin-ease-out) both!important;
  }
  @keyframes dofOriginOsExitForwardMobile{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.2;transform:translate3d(-20px,0,0) scale(.987)}
  }
  @keyframes dofOriginOsEnterForwardMobile{
    0%{opacity:0;transform:translate3d(28px,0,0) scale(.986)}
    56%{opacity:1;transform:translate3d(-6px,0,0) scale(1.006)}
    78%{opacity:1;transform:translate3d(2px,0,0) scale(.998)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  @keyframes dofOriginOsExitBackMobile{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.2;transform:translate3d(20px,0,0) scale(.987)}
  }
  @keyframes dofOriginOsEnterBackMobile{
    0%{opacity:0;transform:translate3d(-28px,0,0) scale(.986)}
    56%{opacity:1;transform:translate3d(6px,0,0) scale(1.006)}
    78%{opacity:1;transform:translate3d(-2px,0,0) scale(.998)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  .btn:not(:disabled):active,
  button:not(:disabled):active,
  a.navlink:active,
  a.cart-link:active,
  .card:active,
  .product-card:active,
  .home-offer-chip-card:active,
  .gallery-thumb-btn:active,
  .chip:active,
  .delivery-option-card:active,
  .color-product:active,
  .ui-press-active{
    transform:translate3d(0,1px,0) scale(.978)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell,
  body.page-content-enter .page-transition-shell{
    animation:dofOriginOsFadeIn 80ms ease-out both!important;
    transform:none!important;
    opacity:1!important;
  }
  .btn:not(:disabled),
  button:not(:disabled),
  a.navlink,
  a.cart-link,
  .card,
  .product-card,
  .home-offer-chip-card,
  .gallery-thumb-btn,
  .chip,
  .delivery-option-card,
  .color-product{
    transition:none!important;
  }
}

/* v26.5.10 Apple-style light bounce UI + page transition polish
   Final override: crisp, clean, very light spring; no flip, no heavy OS bounce. */
:root{
  --dof-apple-bg:#fbfbfd;
  --dof-apple-surface:rgba(255,255,255,.86);
  --dof-apple-border:rgba(15,23,42,.08);
  --dof-apple-shadow:0 18px 55px rgba(15,23,42,.075);
  --dof-apple-shadow-soft:0 10px 30px rgba(15,23,42,.052);
  --dof-apple-ease:cubic-bezier(.22,.8,.22,1);
  --dof-apple-spring:cubic-bezier(.18,1.08,.28,1);
}
html,body{
  background:var(--dof-apple-bg)!important;
  overflow-x:hidden!important;
}
body{
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Apple-like glass header. Keeps layout stable; does not animate during page changes. */
.topbar{
  background:rgba(251,251,253,.78)!important;
  border-bottom:1px solid rgba(15,23,42,.065)!important;
  backdrop-filter:saturate(180%) blur(22px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(22px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 8px 30px rgba(15,23,42,.025)!important;
}
.nav{
  min-height:68px!important;
  gap:16px!important;
}
.brand img{
  filter:none!important;
}
.navlink,
.account-pill,
.cart-link,
.btn,
button{
  transition:transform 160ms var(--dof-apple-spring),background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 180ms ease,opacity 160ms ease!important;
}
.navlink{
  padding:9px 8px!important;
  color:#1d1d1f!important;
  font-weight:800!important;
}
.navlink:hover,
.navlink.active{
  color:var(--brand)!important;
  background:rgba(193,53,132,.055)!important;
}
.account-pill,
.cart-link.btn,
.btn.secondary,
.btn.ghost{
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(193,53,132,.22)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.035)!important;
}
.btn:not(.secondary):not(.ghost){
  background:linear-gradient(135deg,#d6338f,#a52374)!important;
  box-shadow:0 12px 28px rgba(193,53,132,.18)!important;
}
.btn:not(:disabled):active,
button:not(:disabled):active,
a.navlink:active,
a.cart-link:active,
.ui-press-active{
  transform:scale(.976)!important;
}
/* Clean Apple-like surfaces without changing data/layout. */
.hero,
.panel,
.panel-lite,
.card,
.product-card,
.order-card,
.checkout-card,
.customize-route-page-card,
.customization-route-page,
.custom-preview-panel,
.side,
.home-offer-chip-card,
.color-product,
.product-info-card{
  border-color:var(--dof-apple-border)!important;
  box-shadow:var(--dof-apple-shadow-soft)!important;
}
.hero,
.panel,
.card,
.product-card,
.order-card,
.checkout-card,
.customize-route-page-card,
.customization-route-page,
.side{
  background:rgba(255,255,255,.92)!important;
}
.card,
.product-card,
.home-offer-chip-card,
.color-product,
.panel,
.order-card{
  transition:transform 210ms var(--dof-apple-spring),box-shadow 220ms ease,border-color 180ms ease,opacity 180ms ease!important;
}
@media(hover:hover) and (pointer:fine){
  .card:hover,
  .product-card:hover,
  .home-offer-chip-card:hover,
  .color-product:hover{
    transform:translate3d(0,-3px,0) scale(1.0015)!important;
    box-shadow:var(--dof-apple-shadow)!important;
  }
}
.search,
.field,
select.field,
input,
textarea{
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:none!important;
}
.search:focus,
.field:focus,
input:focus,
textarea:focus{
  border-color:rgba(193,53,132,.42)!important;
  box-shadow:0 0 0 4px rgba(193,53,132,.08)!important;
}
/* Apple-style page motion: only the bounce/spring effect, no flip/rotation/heavy slide. */
html.page-transition-enabled,
html.page-is-navigating,
body.page-is-navigating{
  overflow-x:hidden!important;
  cursor:default!important;
}
.page-transition-enabled body{
  perspective:none!important;
}
.page-transition-shell{
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  transform-style:flat!important;
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1;
  contain:paint;
}
body.page-is-navigating .page-transition-shell,
body.page-transition-exit .page-transition-shell,
body.page-transition-enter .page-transition-shell{
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
body.page-transition-exit.page-direction-forward .page-transition-shell,
body.page-transition-exit:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
  animation:dofAppleCleanExitForward 118ms cubic-bezier(.4,0,.2,1) both!important;
}
body.page-transition-enter.page-direction-forward .page-transition-shell,
body.page-transition-enter:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
  animation:dofAppleCleanEnterForward 252ms var(--dof-apple-spring) both!important;
}
body.page-transition-exit.page-direction-back .page-transition-shell{
  animation:dofAppleCleanExitBack 118ms cubic-bezier(.4,0,.2,1) both!important;
}
body.page-transition-enter.page-direction-back .page-transition-shell{
  animation:dofAppleCleanEnterBack 252ms var(--dof-apple-spring) both!important;
}
body.page-transition-exit.page-direction-fade .page-transition-shell{
  animation:dofAppleCleanFadeOut 95ms ease-out both!important;
}
body.page-transition-enter.page-direction-fade .page-transition-shell{
  animation:dofAppleCleanFadeIn 150ms ease-out both!important;
}
body:not(.page-transition-exit):not(.page-transition-enter) .page-transition-shell{
  animation:none!important;
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1!important;
  will-change:auto!important;
  filter:none!important;
}
@keyframes dofAppleCleanExitForward{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.28;transform:translate3d(-10px,0,0) scale(.994)}
}
@keyframes dofAppleCleanEnterForward{
  0%{opacity:0;transform:translate3d(14px,0,0) scale(.992)}
  62%{opacity:1;transform:translate3d(-1.8px,0,0) scale(1.002)}
  82%{opacity:1;transform:translate3d(.7px,0,0) scale(.9996)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofAppleCleanExitBack{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.28;transform:translate3d(10px,0,0) scale(.994)}
}
@keyframes dofAppleCleanEnterBack{
  0%{opacity:0;transform:translate3d(-14px,0,0) scale(.992)}
  62%{opacity:1;transform:translate3d(1.8px,0,0) scale(1.002)}
  82%{opacity:1;transform:translate3d(-.7px,0,0) scale(.9996)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dofAppleCleanFadeOut{from{opacity:1;transform:scale(1)}to{opacity:.35;transform:scale(.996)}}
@keyframes dofAppleCleanFadeIn{from{opacity:.35;transform:scale(.996)}to{opacity:1;transform:scale(1)}}
/* Compact loading status. No giant blocking panels. */
#bottomStatusDock,
.bottom-status-dock{
  max-width:min(92vw,360px)!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(193,53,132,.16)!important;
  box-shadow:0 10px 30px rgba(15,23,42,.08)!important;
  backdrop-filter:saturate(180%) blur(16px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(16px)!important;
  font-size:12px!important;
}
.global-loading-bar.is-active span{
  animation:dofAppleTopLoad 780ms var(--dof-apple-ease) infinite!important;
}
@keyframes dofAppleTopLoad{
  0%{transform:translate3d(-115%,0,0) scaleX(.38);opacity:.55}
  50%{transform:translate3d(18%,0,0) scaleX(1);opacity:1}
  100%{transform:translate3d(225%,0,0) scaleX(.52);opacity:.72}
}
@media(max-width:760px){
  .nav{min-height:62px!important;gap:10px!important;padding-inline:14px!important}
  .navlink{padding:9px 7px!important}
  .hero,.panel,.card,.product-card,.customize-route-page-card,.order-card{border-radius:24px!important}
  body.page-transition-exit.page-direction-forward .page-transition-shell,
  body.page-transition-exit:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
    animation:dofAppleCleanExitForwardMobile 104ms cubic-bezier(.4,0,.2,1) both!important;
  }
  body.page-transition-enter.page-direction-forward .page-transition-shell,
  body.page-transition-enter:not(.page-direction-back):not(.page-direction-fade) .page-transition-shell{
    animation:dofAppleCleanEnterForwardMobile 228ms var(--dof-apple-spring) both!important;
  }
  body.page-transition-exit.page-direction-back .page-transition-shell{
    animation:dofAppleCleanExitBackMobile 104ms cubic-bezier(.4,0,.2,1) both!important;
  }
  body.page-transition-enter.page-direction-back .page-transition-shell{
    animation:dofAppleCleanEnterBackMobile 228ms var(--dof-apple-spring) both!important;
  }
  @keyframes dofAppleCleanExitForwardMobile{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.34;transform:translate3d(-8px,0,0) scale(.995)}
  }
  @keyframes dofAppleCleanEnterForwardMobile{
    0%{opacity:0;transform:translate3d(11px,0,0) scale(.994)}
    64%{opacity:1;transform:translate3d(-1.2px,0,0) scale(1.0015)}
    86%{opacity:1;transform:translate3d(.4px,0,0) scale(.9998)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  @keyframes dofAppleCleanExitBackMobile{
    0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:.34;transform:translate3d(8px,0,0) scale(.995)}
  }
  @keyframes dofAppleCleanEnterBackMobile{
    0%{opacity:0;transform:translate3d(-11px,0,0) scale(.994)}
    64%{opacity:1;transform:translate3d(1.2px,0,0) scale(1.0015)}
    86%{opacity:1;transform:translate3d(-.4px,0,0) scale(.9998)}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  .btn:not(:disabled):active,
  button:not(:disabled):active,
  a.navlink:active,
  a.cart-link:active,
  .card:active,
  .product-card:active,
  .home-offer-chip-card:active,
  .gallery-thumb-btn:active,
  .chip:active,
  .delivery-option-card:active,
  .color-product:active,
  .ui-press-active{
    transform:scale(.982)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.page-transition-exit .page-transition-shell,
  body.page-transition-enter .page-transition-shell,
  body.page-content-enter .page-transition-shell{
    animation:dofAppleCleanFadeIn 80ms ease-out both!important;
    transform:none!important;
    opacity:1!important;
  }
  .btn:not(:disabled),button:not(:disabled),a.navlink,a.cart-link,.card,.product-card,.home-offer-chip-card,.gallery-thumb-btn,.chip,.delivery-option-card,.color-product{
    transition:none!important;
  }
}

/* v27.0.0 premium offers/admin sync polish */
.offer-no-active-sale .offer-sale-stage,
.offer-no-active-sale .offer-strip-nav,
.offer-no-active-sale #offerSpotlight{display:none!important}
.offer-has-active-sale .offer-grid{min-height:0}.offer-body{display:grid;gap:8px;padding:clamp(14px,1.5vw,18px);min-width:0}.offer-body h3{margin:0;color:#111827;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.18;overflow-wrap:anywhere}.stock-line{display:inline-flex;width:max-content;max-width:100%;align-items:center;border:1px solid rgba(17,24,39,.08);border-radius:999px;background:#f8fafc;color:#475569;font-size:.82rem;font-weight:900;padding:5px 9px}.no-offer-state{grid-column:1/-1;text-align:center;width:min(100%,760px);margin:clamp(12px,3vw,36px) auto;padding:clamp(26px,5vw,56px);background:radial-gradient(circle at 50% 0,#fff4fb 0,#fff 48%,#f8fbff 100%)}.no-offer-state h1{margin:12px 0 10px;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.055em;line-height:.98;color:#111827}.no-offer-state p{max-width:560px;margin:0 auto 20px;color:#64748b;font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.55}.no-offer-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.offer-page-shell img{max-width:100%}.offer-card .offer-actions .btn{min-height:40px;white-space:normal}.offer-card .price{min-width:0;overflow-wrap:anywhere}.offer-card .code{max-width:100%;overflow-wrap:anywhere}.offer-mini-banner{min-width:0;overflow:hidden}.offer-mini-banner b,.offer-mini-banner span{overflow-wrap:anywhere}.offer-section-head{min-width:0}.offer-section-head h2,.offer-section-head p{overflow-wrap:anywhere}@media(max-width:720px){.no-offer-actions{display:grid;grid-template-columns:1fr}.no-offer-actions .btn{width:100%;justify-content:center}.no-offer-state{border-radius:24px;padding:28px 18px}.offer-card .offer-row{align-items:flex-start;flex-direction:column}.offer-actions{grid-template-columns:1fr!important}.offer-actions .btn{width:100%;justify-content:center}.stock-line{width:100%;justify-content:center}.offer-price{align-items:flex-start}.offer-price .sell{font-size:1.22rem}.offer-body{padding:14px}.bulk-offer-panel{padding:20px!important}.coupon-copy h1,.coupon-copy p{overflow-wrap:anywhere}.offer-strip-nav{max-width:100%;overflow-x:auto}}

/* V27.0.4 customization preview size + sticky + one-popup color selector fix.
   Buyer UI only: no parser/upload/backend behavior is changed. */
.customization-page-form-card .color-preview-panel[hidden],
.custom-modal .color-preview-panel[hidden],
body > .color-preview-portal-panel[hidden]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.customization-page-form-card .color-preview-panel:not(.color-preview-portal-panel):not([hidden]),
.custom-modal .color-preview-panel:not(.color-preview-portal-panel):not([hidden]){
  display:grid!important;
}
.customization-page-form-card .custom-color-picker-catalog,
.customization-page-form-card .cloth-color-picker{
  overflow:visible!important;
}
.customization-page-form-card .custom-field-row,
.customization-page-form-card .part-color-card,
.customization-page-form-card .part-color-sections,
.customization-page-form-card .custom-controls-panel{
  overflow:visible!important;
}
body > .color-preview-portal-panel{
  position:fixed!important;
  z-index:2147483000!important;
  width:min(420px,calc(100vw - 24px))!important;
  min-width:min(340px,calc(100vw - 24px))!important;
  max-width:min(420px,calc(100vw - 24px))!important;
  max-height:min(460px,calc(100dvh - 24px))!important;
  overflow:hidden!important;
  contain:layout paint style!important;
}
body > .color-preview-portal-panel .color-options-list{
  max-height:min(300px,calc(100dvh - 230px))!important;
}
body > .color-preview-portal-panel .color-option-row{
  min-height:54px!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  padding:9px 11px!important;
}
body > .color-preview-portal-panel .color-option-swatch{
  width:36px!important;
  height:36px!important;
}
body > .color-preview-portal-panel .color-option-copy b,
body > .color-preview-portal-panel .color-option-copy span,
body > .color-preview-portal-panel .color-option-copy small,
body > .color-preview-portal-panel .color-shower-meta b,
body > .color-preview-portal-panel .color-shower-meta span,
body > .color-preview-portal-panel .color-shower-meta small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body > .color-preview-portal-panel .color-option-copy small,
body > .color-preview-portal-panel .color-shower-meta small{
  overflow-wrap:anywhere!important;
}
body.color-preview-dropdown-open::after{
  z-index:2147482990!important;
}
@media(min-width:981px){
  :root{
    --customize-preview-sticky-gap:18px;
    --customize-preview-sticky-top:calc(var(--site-header-height,88px) + var(--customize-preview-sticky-gap));
  }
  .customize-route-page-card:has(.customization-page-shell){
    overflow:visible!important;
  }
  .customization-page-form-card,
  .customization-page-form-card .custom-form,
  .customization-page-form-card .custom-workbench{
    overflow:visible!important;
  }
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(460px,1fr) minmax(0,1.03fr)!important;
    gap:clamp(20px,2.4vw,34px)!important;
    align-items:start!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:sticky!important;
    top:var(--customize-preview-sticky-top)!important;
    align-self:start!important;
    max-height:calc(100dvh - var(--customize-preview-sticky-top) - 18px)!important;
    overflow:auto!important;
    scrollbar-gutter:stable!important;
    padding:clamp(12px,1.3vw,18px)!important;
    border-radius:28px!important;
    box-shadow:0 22px 58px rgba(193,53,132,.14)!important;
  }
  .customization-page-form-card .custom-preview-title{
    margin-bottom:8px!important;
  }
  .customization-page-form-card .custom-preview-title b{
    font-size:clamp(18px,1.35vw,22px)!important;
  }
  .customization-page-form-card .cloth-preview-status{
    margin-bottom:10px!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(460px,calc(100dvh - var(--customize-preview-sticky-top) - 190px),720px)!important;
    min-height:460px!important;
    max-height:720px!important;
    padding:10px!important;
    border-radius:26px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
  .customization-page-form-card .custom-live-preview-stage canvas,
  .customization-page-form-card .custom-live-preview-stage img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption],
  .customization-page-form-card .preview-quality-note{
    font-size:12px!important;
    line-height:1.35!important;
    max-height:56px!important;
  }
}
@media(min-width:1280px){
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(520px,1.02fr) minmax(0,.98fr)!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(520px,calc(100dvh - var(--customize-preview-sticky-top) - 165px),780px)!important;
    min-height:520px!important;
    max-height:780px!important;
  }
}
@media(max-width:980px){
  .customize-route-page-card:has(.customization-page-shell){
    overflow:hidden!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}
@media(max-width:860px){
  body > .color-preview-portal-panel.is-mobile-sheet{
    left:10px!important;
    right:10px!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 20px)!important;
    max-height:min(78dvh,640px)!important;
    border-radius:26px 26px 20px 20px!important;
  }
  body > .color-preview-portal-panel .color-options-list{
    max-height:min(46dvh,410px)!important;
  }
  body > .color-preview-portal-panel .color-option-row,
  body > .color-preview-portal-panel .color-preview-close{
    min-height:48px!important;
  }
}
@media(max-width:768px){
  .customization-page-form-card .custom-live-preview-stage{
    height:min(76vw,440px)!important;
    min-height:280px!important;
    max-height:440px!important;
  }
}
@media(max-width:430px){
  .customization-page-form-card .custom-live-preview-stage{
    height:min(78vw,400px)!important;
    min-height:260px!important;
  }
}

/* V27.0.5 customization preview ratio + zoom polish.
   Buyer preview UI only: parser/upload/backend behavior is unchanged. */
.custom-preview-panel{
  --preview-card-pad:clamp(7px,.8vw,10px);
}
.custom-live-preview-stage{
  position:relative!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:6px!important;
  padding:var(--preview-card-pad)!important;
  overflow:hidden!important;
}
.custom-live-preview-stage[data-preview-mode="dst"]{
  grid-template-rows:minmax(0,1fr) auto!important;
}
.custom-preview-zoom-hotspot{
  position:absolute!important;
  inset:var(--preview-card-pad) var(--preview-card-pad) 54px var(--preview-card-pad)!important;
  z-index:2!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border-radius:20px!important;
  cursor:zoom-in!important;
}
.custom-preview-zoom-hotspot:disabled,
.custom-preview-zoom-hotspot[aria-disabled="true"]{
  pointer-events:none!important;
}
.custom-preview-zoom-hotspot:focus-visible{
  outline:3px solid rgba(193,53,132,.36)!important;
  outline-offset:3px!important;
}
.custom-preview-fallback-wrap.stitched-live-preview,
.machine-preview-secondary{
  min-height:0!important;
  height:100%!important;
  padding:4px!important;
  border-radius:20px!important;
  overflow:hidden!important;
}
.custom-preview-fallback-wrap.stitched-live-preview .custom-preview-fallback,
.dst-preview-canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:16px!important;
}
.machine-preview-secondary{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:6px!important;
}
.preview-toolbar{
  position:relative!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(124px,.52fr) auto!important;
  gap:7px!important;
  align-items:center!important;
  margin:0!important;
  padding:6px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.12)!important;
}
.preview-toolbar .field,
.preview-toolbar .btn{
  min-height:40px!important;
  height:40px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
  font-size:12.5px!important;
}
.preview-zoom-btn{
  white-space:nowrap!important;
  min-width:104px!important;
}
.custom-live-preview-stage p[data-preview-caption]{
  position:relative!important;
  z-index:4!important;
  margin:0!important;
  padding:7px 9px!important;
  min-height:0!important;
  max-height:44px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12.5px!important;
  line-height:1.28!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.92)!important;
}
.preview-quality-note{display:none!important}
.custom-preview-title{
  margin-bottom:5px!important;
}
.custom-preview-title span{
  padding:4px 8px!important;
  font-size:12px!important;
  line-height:1.2!important;
}
.cloth-preview-status{
  margin-bottom:6px!important;
  padding:7px 9px!important;
  min-height:44px!important;
  gap:7px!important;
}
.cloth-preview-status .cloth-preview-swatch{
  width:28px!important;
  height:28px!important;
}
.cloth-preview-status b,
.cloth-preview-status small{
  font-size:12px!important;
  line-height:1.18!important;
}
.custom-step-kicker{margin-bottom:5px!important}
@media(min-width:981px){
  .customization-page-form-card .custom-preview-panel{
    overflow:hidden!important;
    max-height:calc(100dvh - var(--customize-preview-sticky-top) - 14px)!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(540px,calc(100dvh - var(--customize-preview-sticky-top) - 112px),820px)!important;
    min-height:540px!important;
    max-height:820px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .machine-preview-secondary,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview{
    height:100%!important;
  }
}
@media(min-width:1280px){
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(600px,calc(100dvh - var(--customize-preview-sticky-top) - 98px),880px)!important;
    min-height:600px!important;
    max-height:880px!important;
  }
}
@media(max-width:980px){
  .custom-live-preview-stage{
    height:clamp(330px,72vw,560px)!important;
    min-height:330px!important;
  }
}
@media(max-width:760px){
  .custom-live-preview-stage{
    height:clamp(310px,86vw,480px)!important;
    min-height:310px!important;
    gap:6px!important;
  }
  .custom-preview-zoom-hotspot{inset:8px 8px 58px 8px!important}
  .preview-toolbar{
    grid-template-columns:1fr auto!important;
  }
  .preview-render-mode{display:none!important}
  .preview-toolbar .field,
  .preview-toolbar .btn{
    min-height:44px!important;
    height:44px!important;
  }
  .custom-live-preview-stage p[data-preview-caption]{
    max-height:48px!important;
    font-size:12px!important;
  }
}
@media(max-width:430px){
  .custom-live-preview-stage{
    height:clamp(300px,88vw,430px)!important;
    min-height:300px!important;
  }
  .preview-zoom-btn{min-width:92px!important}
}
.live-preview-zoom-shell{
  position:fixed!important;
  inset:0!important;
  z-index:2147483100!important;
  display:grid!important;
  place-items:center!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
.live-preview-zoom-modal{
  width:min(1120px,calc(100vw - 24px))!important;
  height:min(860px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:12px!important;
  border-radius:28px!important;
}
.live-preview-zoom-stage{
  min-height:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  display:grid!important;
  place-items:center!important;
  touch-action:none!important;
  background:linear-gradient(135deg,#05070b,#111827)!important;
}
.live-preview-zoom-image{
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  transform-origin:center center!important;
  transition:transform .16s ease!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.live-preview-zoom-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:4px 2px 0!important;
  min-width:0!important;
}
.live-preview-zoom-footer b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.live-preview-zoom-actions{
  display:flex!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
.live-preview-zoom-actions .btn{
  min-height:40px!important;
  height:40px!important;
}
@media(max-width:760px){
  .live-preview-zoom-modal{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    border-radius:22px!important;
    padding:10px!important;
  }
  .live-preview-zoom-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .live-preview-zoom-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
  }
  .live-preview-zoom-actions .btn{width:100%!important;min-height:44px!important;height:44px!important}
}

/* V27.0.6 color shade picker panel position + size fix.
   Buyer color-picker UI only. Keeps selected-color saving/native select data unchanged. */
body > .color-preview-portal-panel{
  position:fixed!important;
  z-index:2147483000!important;
  width:min(520px,calc(100vw - 32px))!important;
  min-width:min(420px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 80px)!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr)!important;
  gap:10px!important;
  overflow:hidden!important;
  border-radius:24px!important;
  box-sizing:border-box!important;
  transform:translateZ(0)!important;
  contain:layout paint style!important;
}
body > .color-preview-portal-panel[hidden]{
  display:none!important;
}
body > .color-preview-portal-panel .color-preview-panel-head{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:44px!important;
}
body > .color-preview-portal-panel .color-preview-panel-head strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body > .color-preview-portal-panel .color-preview-close{
  min-width:72px!important;
  min-height:40px!important;
  padding:8px 12px!important;
  border-radius:14px!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
body > .color-preview-portal-panel .color-shower-panel,
body > .color-preview-portal-panel .color-search-label{
  min-width:0!important;
  flex:0 0 auto!important;
}
body > .color-preview-portal-panel .color-search-input{
  width:100%!important;
  max-width:100%!important;
}
body > .color-preview-portal-panel .color-options-list{
  min-height:160px!important;
  max-height:none!important;
  height:auto!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  padding:2px 4px 2px 1px!important;
}
body > .color-preview-portal-panel .color-option-row{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:11px!important;
  min-height:56px!important;
  padding:9px 12px!important;
}
body > .color-preview-portal-panel .color-option-swatch{
  width:38px!important;
  height:38px!important;
}
body > .color-preview-portal-panel .color-option-copy,
body > .color-preview-portal-panel .color-shower-meta{
  min-width:0!important;
  overflow:visible!important;
}
body > .color-preview-portal-panel .color-option-copy b,
body > .color-preview-portal-panel .color-option-copy span,
body > .color-preview-portal-panel .color-option-copy small,
body > .color-preview-portal-panel .color-shower-meta b,
body > .color-preview-portal-panel .color-shower-meta span,
body > .color-preview-portal-panel .color-shower-meta small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
body.color-preview-dropdown-open::after{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:2147482990!important;
  background:rgba(15,23,42,.26)!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
@media(max-width:860px){
  body > .color-preview-portal-panel.is-mobile-sheet{
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:var(--color-sheet-max-height,min(88dvh,720px))!important;
    border-radius:28px 28px 20px 20px!important;
    padding:12px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-preview-panel-head{
    min-height:48px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-preview-close{
    min-height:44px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-shower-panel{
    grid-template-columns:52px minmax(0,1fr)!important;
    padding:10px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-shower-swatch{
    width:52px!important;
    height:52px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-search-input{
    min-height:46px!important;
    font-size:16px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-options-list{
    min-height:220px!important;
  }
  body > .color-preview-portal-panel.is-mobile-sheet .color-option-row{
    min-height:56px!important;
  }
}
@media(max-width:430px){
  body > .color-preview-portal-panel.is-mobile-sheet{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    max-height:min(90dvh,720px)!important;
    border-radius:24px 24px 18px 18px!important;
  }
}

/* V27.0.7 customization desktop space, sticky preview, preview scale, and compact loading polish.
   Buyer customization UI only: no parser/upload/backend/cart/checkout behavior is changed. */
:root{
  --customize-v2707-max-width: 1680px;
  --customize-v2707-gap: clamp(24px, 2.2vw, 32px);
  --customize-v2707-sticky-top: calc(var(--site-header-height, 88px) + 14px);
}
body.customize-page-body{
  overflow-x:hidden!important;
}
.customize-route-page{
  width:min(var(--customize-v2707-max-width),100%)!important;
  padding:clamp(12px,1.8vw,24px)!important;
}
.customize-route-page-card:has(.customization-page-shell),
.customization-page-form-card,
.customization-page-shell,
.customization-page-form-card .custom-form,
.customization-page-form-card .custom-workbench{
  overflow:visible!important;
}
.customize-route-page-card:has(.customization-page-shell){
  border-radius:28px!important;
}
.customization-page-form-card .custom-modal-head{
  padding:clamp(12px,1.45vw,20px)!important;
}
.customization-page-form-card .custom-modal-head h2{
  line-height:1!important;
  margin-bottom:4px!important;
}
.customization-page-form-card .custom-modal-head p{
  margin:0!important;
  line-height:1.35!important;
}
.customization-page-form-card .custom-form{
  padding:clamp(14px,1.65vw,24px)!important;
}
@media(min-width:981px){
  .customization-page-form-card .custom-workbench{
    display:grid!important;
    grid-template-columns:minmax(430px,46fr) minmax(0,54fr)!important;
    gap:var(--customize-v2707-gap)!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:sticky!important;
    top:var(--customize-v2707-sticky-top)!important;
    align-self:start!important;
    max-height:none!important;
    overflow:visible!important;
    scrollbar-gutter:auto!important;
    padding:clamp(10px,1.1vw,15px)!important;
    border-radius:24px!important;
    box-shadow:0 18px 52px rgba(193,53,132,.12)!important;
  }
  .customization-page-form-card .custom-controls-panel{
    align-self:start!important;
    overflow:visible!important;
    padding-bottom:18px!important;
  }
  .customization-page-form-card .custom-step-kicker{
    min-height:22px!important;
    padding:4px 9px!important;
    margin-bottom:5px!important;
    font-size:11px!important;
  }
  .customization-page-form-card .custom-preview-title{
    margin:0 0 5px!important;
    gap:8px!important;
  }
  .customization-page-form-card .custom-preview-title b{
    font-size:clamp(17px,1.25vw,21px)!important;
    line-height:1.08!important;
  }
  .customization-page-form-card .custom-preview-title span{
    min-height:24px!important;
    padding:4px 8px!important;
    font-size:11.5px!important;
    line-height:1.15!important;
  }
  .customization-page-form-card .cloth-preview-status{
    margin:0 0 6px!important;
    min-height:38px!important;
    padding:6px 8px!important;
    gap:6px!important;
    border-radius:14px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
  }
  .customization-page-form-card .cloth-preview-status .cloth-preview-swatch{
    width:26px!important;
    height:26px!important;
    border-radius:9px!important;
  }
  .customization-page-form-card .cloth-preview-status b,
  .customization-page-form-card .cloth-preview-status small{
    font-size:11.5px!important;
    line-height:1.16!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(440px,calc(100dvh - var(--customize-v2707-sticky-top) - 150px),760px)!important;
    min-height:440px!important;
    max-height:760px!important;
    padding:7px!important;
    gap:5px!important;
    border-radius:22px!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  .customization-page-form-card .custom-live-preview-stage .machine-preview-secondary:not([hidden]),
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview:not([hidden]){
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:5px!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
  .customization-page-form-card .custom-live-preview-stage canvas,
  .customization-page-form-card .custom-live-preview-stage img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:15px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(112px,auto) auto!important;
    gap:7px!important;
    align-items:center!important;
    margin:0!important;
    min-height:38px!important;
  }
  .customization-page-form-card .preview-toolbar .field,
  .customization-page-form-card .preview-toolbar .btn{
    min-height:38px!important;
    height:38px!important;
    padding:7px 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }
  .customization-page-form-card .preview-render-mode{
    min-width:112px!important;
  }
  .customization-page-form-card .preview-quality-note{
    display:none!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
    min-height:32px!important;
    max-height:38px!important;
    padding:7px 9px!important;
    font-size:11.8px!important;
    line-height:1.24!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin:0!important;
  }
  .customization-page-form-card .custom-preview-zoom-hotspot{
    inset:7px 7px 46px 7px!important;
  }
  .customization-page-form-card .cloth-color-card,
  .customization-page-form-card .part-color-card,
  .customization-page-form-card .custom-stack,
  .customization-page-form-card .measurement-grid,
  .customization-page-form-card .part-color-sections,
  .customization-page-form-card .customization-notes-field{
    margin-bottom:10px!important;
  }
  .customization-page-form-card .custom-section-title{
    margin:16px 0 9px!important;
  }
}
@media(min-width:1320px){
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(560px,47fr) minmax(0,53fr)!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(500px,calc(100dvh - var(--customize-v2707-sticky-top) - 138px),820px)!important;
    min-height:500px!important;
    max-height:820px!important;
  }
}
@media(max-height:760px) and (min-width:981px){
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(340px,calc(100dvh - var(--customize-v2707-sticky-top) - 132px),560px)!important;
    min-height:340px!important;
  }
  .customization-page-form-card .custom-step-kicker,
  .customization-page-form-card .cloth-preview-status small{
    display:none!important;
  }
  .customization-page-form-card .custom-preview-title{
    margin-bottom:4px!important;
  }
}
@media(max-width:980px){
  .customization-page-form-card .custom-workbench{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    width:100%!important;
  }
  .customization-page-form-card .custom-controls-panel{
    width:100%!important;
  }
}
@media(max-width:760px){
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(300px,82vw,460px)!important;
    min-height:300px!important;
    max-height:460px!important;
    padding:8px!important;
    gap:6px!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
    max-height:46px!important;
    min-height:40px!important;
  }
  .customization-page-form-card .preview-toolbar .field,
  .customization-page-form-card .preview-toolbar .btn{
    min-height:44px!important;
    height:44px!important;
  }
}
.customize-route-loading-card-compact{
  width:min(720px,calc(100vw - 28px))!important;
  margin:clamp(14px,5vh,42px) auto!important;
  padding:18px!important;
  border:1px solid rgba(225,38,126,.16)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 16px 42px rgba(120,30,80,.10)!important;
  min-height:0!important;
}
.customize-compact-loader{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
.customize-compact-loader b{
  display:block!important;
  color:#be185d!important;
  font-size:15px!important;
  line-height:1.2!important;
}
.customize-compact-loader small{
  display:block!important;
  margin-top:2px!important;
  color:#667085!important;
  font-weight:800!important;
  line-height:1.35!important;
}
.customize-loader-dot{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border-radius:50%!important;
  border:3px solid rgba(225,38,126,.18)!important;
  border-top-color:#e1267e!important;
  animation:dofSpin .75s linear infinite!important;
}
.customize-compact-skeleton{
  display:grid!important;
  gap:8px!important;
  margin-top:14px!important;
}
.customize-compact-skeleton span{
  display:block!important;
  height:10px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#f9eaf3 0%,#fff 38%,#f6dbe9 64%,#f9eaf3 100%)!important;
  background-size:240% 100%!important;
  animation:dofShimmer 1.05s linear infinite!important;
}
.customize-compact-skeleton span:nth-child(1){width:92%!important}
.customize-compact-skeleton span:nth-child(2){width:68%!important}
.customize-compact-skeleton span:nth-child(3){width:42%!important}
.customize-route-loading-card .customize-loading-workspace,
.customize-route-loading-card .customization-workspace{
  min-height:0!important;
}
@media(prefers-reduced-motion:reduce){
  .customize-loader-dot,
  .customize-compact-skeleton span{
    animation:none!important;
  }
}

/* v27.1.1 buyer categories route */
.categories-hero{max-width:var(--max);margin:24px auto;padding:38px 40px;border:1px solid rgba(235,199,220,.75);border-radius:34px;background:radial-gradient(circle at 90% 8%,#f8d7eb 0,transparent 26%),linear-gradient(135deg,#fff,#fff8fc);box-shadow:var(--shadow);display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center;overflow:hidden}
.categories-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.02;margin:0;letter-spacing:-.055em;color:var(--ink);max-width:760px}.categories-hero p{color:var(--muted);font-size:17px;max-width:680px;line-height:1.62}.categories-page{max-width:var(--max);margin:0 auto 72px;padding:0 20px}.categories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.category-card{min-width:0;overflow:hidden}.category-card-art{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,#fff7fb,#fff);border-bottom:1px solid rgba(229,231,235,.82);overflow:hidden}.category-card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .34s ease}.category-card:hover .category-card-art img{transform:scale(1.035)}.category-card-art img[src*="dof-logo-brand"]{object-fit:contain;padding:34px;background:#fff9fd}.category-card-body{padding:16px;display:grid;gap:9px;flex:1}.category-card-body h3{margin:0;color:var(--ink);font-size:21px;line-height:1.18;letter-spacing:-.025em}.category-card-body p{margin:0;color:var(--muted);line-height:1.5;min-height:44px}.category-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px solid rgba(235,199,220,.76);background:var(--brand-soft-2);border-radius:16px;padding:9px 10px}.category-card-meta span{font-weight:950;color:var(--brand)}.category-card-meta small{color:var(--muted);font-weight:800}.categories-empty{grid-column:1/-1;text-align:center;align-items:center;padding:34px;min-height:320px}.categories-empty img{width:min(260px,70vw);height:auto;margin-bottom:10px}.categories-empty h2{margin:0;color:var(--ink);font-size:28px}.categories-empty p{max-width:520px;margin:8px auto 16px;color:var(--muted)}
@media(max-width:980px){.categories-hero{grid-template-columns:1fr;margin:16px 14px;padding:28px}.categories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.categories-hero{padding:22px;border-radius:26px}.categories-page{padding:0 14px}.categories-grid{grid-template-columns:1fr;gap:14px}.category-card-body p{min-height:0}.category-card-meta{align-items:flex-start;flex-direction:column}.nav{overflow-x:auto}.nav::-webkit-scrollbar{display:none}}

/* v27.2.0 customization sticky live preview two-column scroll fix.
   Buyer customization layout only. No DST parser, preview generator, cart payload, checkout, admin, or upload logic is changed. */
:root{
  --site-header-offset:var(--site-header-height,76px);
  --sticky-preview-top:clamp(90px,calc(var(--site-header-offset,76px) + 18px),130px);
  --customize-v2720-page-max:1720px;
  --customize-v2720-gap:clamp(22px,2.4vw,36px);
}
body.customize-page-body{
  overflow-x:hidden!important;
}
.customize-route-page{
  width:min(var(--customize-v2720-page-max),100%)!important;
  margin-inline:auto!important;
  padding:clamp(12px,1.8vw,24px)!important;
  box-sizing:border-box!important;
}
.customize-route-page-card:has(.customization-page-shell),
.customization-page-shell,
.customization-page-form-card,
.customization-page-form-card .custom-form,
.customization-page-form-card .custom-workbench{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.customization-page-form-card .custom-modal-head{
  position:relative!important;
  z-index:2!important;
}
.customization-page-form-card .custom-controls-panel,
.customization-page-form-card .custom-preview-panel{
  min-width:0!important;
  box-sizing:border-box!important;
}

@media(min-width:1024px){
  .customization-page-form-card .custom-form{
    padding:clamp(16px,1.8vw,26px)!important;
  }
  .customization-page-form-card .custom-workbench{
    display:grid!important;
    grid-template-columns:minmax(360px,44%) minmax(0,1fr)!important;
    gap:var(--customize-v2720-gap)!important;
    align-items:start!important;
  }
  .customization-page-form-card .custom-preview-panel{
    position:sticky!important;
    top:var(--sticky-preview-top)!important;
    align-self:start!important;
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - var(--sticky-preview-top) - 22px)!important;
    overflow:visible!important;
    overflow-y:visible!important;
    scrollbar-width:none!important;
    scrollbar-gutter:auto!important;
    padding:clamp(12px,1.2vw,18px)!important;
    border-radius:clamp(24px,2vw,30px)!important;
    background:linear-gradient(145deg,#fff 0%,#fff8fc 100%)!important;
    border:1px solid rgba(235,199,220,.78)!important;
    box-shadow:0 20px 58px rgba(193,53,132,.13)!important;
    z-index:3!important;
  }
  .customization-page-form-card .custom-preview-panel::-webkit-scrollbar{
    display:none!important;
  }
  .customization-page-form-card .custom-controls-panel{
    align-self:start!important;
    width:100%!important;
    overflow:visible!important;
    padding-bottom:clamp(28px,4vh,56px)!important;
  }
  .customization-page-form-card .custom-step-kicker{
    margin-bottom:6px!important;
    min-height:22px!important;
    padding:4px 10px!important;
    font-size:11px!important;
  }
  .customization-page-form-card .custom-preview-title{
    margin:0 0 8px!important;
    gap:10px!important;
    align-items:center!important;
  }
  .customization-page-form-card .custom-preview-title b{
    font-size:clamp(18px,1.35vw,23px)!important;
    line-height:1.08!important;
  }
  .customization-page-form-card .custom-preview-title span{
    min-height:24px!important;
    padding:4px 9px!important;
    font-size:11.5px!important;
    line-height:1.15!important;
  }
  .customization-page-form-card .cloth-preview-status{
    margin:0 0 10px!important;
    min-height:38px!important;
    padding:7px 9px!important;
    gap:8px!important;
    border-radius:15px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
  }
  .customization-page-form-card .cloth-preview-status .cloth-preview-swatch{
    width:28px!important;
    height:28px!important;
    border-radius:10px!important;
  }
  .customization-page-form-card .cloth-preview-status b,
  .customization-page-form-card .cloth-preview-status small{
    font-size:11.5px!important;
    line-height:1.18!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(430px,calc(100dvh - var(--sticky-preview-top) - 142px),760px)!important;
    min-height:430px!important;
    max-height:calc(100dvh - var(--sticky-preview-top) - 112px)!important;
    padding:8px!important;
    gap:6px!important;
    border-radius:24px!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }
  .customization-page-form-card .custom-live-preview-stage .machine-preview-secondary:not([hidden]),
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback-wrap.stitched-live-preview:not([hidden]){
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .customization-page-form-card .custom-live-preview-stage .dst-preview-canvas,
  .customization-page-form-card .custom-live-preview-stage .custom-preview-fallback,
  .customization-page-form-card .custom-live-preview-stage canvas,
  .customization-page-form-card .custom-live-preview-stage img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:16px!important;
  }
  .customization-page-form-card .custom-live-preview-stage .preview-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(112px,auto) auto!important;
    gap:8px!important;
    align-items:center!important;
    margin:0!important;
    min-height:38px!important;
  }
  .customization-page-form-card .preview-toolbar .field,
  .customization-page-form-card .preview-toolbar .btn{
    min-height:38px!important;
    height:38px!important;
    padding:7px 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }
  .customization-page-form-card .preview-render-mode{
    min-width:112px!important;
  }
  .customization-page-form-card .custom-live-preview-stage p[data-preview-caption]{
    min-height:32px!important;
    max-height:40px!important;
    padding:7px 10px!important;
    font-size:11.8px!important;
    line-height:1.25!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin:0!important;
  }
  .customization-page-form-card .custom-preview-zoom-hotspot{
    inset:8px 8px 48px 8px!important;
  }
  .customization-page-form-card .custom-section-title{
    margin:18px 0 10px!important;
  }
  .customization-page-form-card .cloth-color-card,
  .customization-page-form-card .part-color-card,
  .customization-page-form-card .custom-stack,
  .customization-page-form-card .measurement-grid,
  .customization-page-form-card .part-color-sections,
  .customization-page-form-card .customization-notes-field{
    margin-bottom:12px!important;
  }
  .customization-page-form-card .part-color-card,
  .customization-page-form-card .cloth-color-card{
    max-width:100%!important;
    overflow:visible!important;
  }
  .customization-page-form-card .color-row,
  .customization-page-form-card .thread-color-row,
  .customization-page-form-card .cloth-color-picker{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media(min-width:1320px){
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(520px,46vw) minmax(0,1fr)!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(500px,calc(100dvh - var(--sticky-preview-top) - 132px),820px)!important;
    min-height:500px!important;
  }
}

@media(min-width:1560px){
  .customization-page-form-card .custom-workbench{
    grid-template-columns:minmax(620px,47vw) minmax(0,1fr)!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(560px,calc(100dvh - var(--sticky-preview-top) - 122px),880px)!important;
    min-height:560px!important;
  }
}

@media(max-height:760px) and (min-width:1024px){
  .customization-page-form-card .custom-preview-panel{
    padding:10px!important;
  }
  .customization-page-form-card .custom-step-kicker,
  .customization-page-form-card .cloth-preview-status small{
    display:none!important;
  }
  .customization-page-form-card .custom-preview-title{
    margin-bottom:5px!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(330px,calc(100dvh - var(--sticky-preview-top) - 96px),560px)!important;
    min-height:330px!important;
  }
}

@media(max-width:1023px){
  .customize-route-page{
    padding:10px 10px calc(96px + env(safe-area-inset-bottom))!important;
  }
  .customization-page-form-card .custom-workbench{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .customization-page-form-card .custom-preview-panel{
    order:1!important;
    position:static!important;
    top:auto!important;
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    z-index:auto!important;
  }
  .customization-page-form-card .custom-controls-panel{
    order:2!important;
    width:100%!important;
    overflow:visible!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(320px,72vw,560px)!important;
    min-height:320px!important;
    max-height:560px!important;
    overflow:hidden!important;
  }
  .customization-page-form-card .preview-toolbar{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:640px){
  .customization-page-form-card .custom-modal-head,
  .customization-page-form-card .custom-form{
    padding:14px!important;
  }
  .customization-page-form-card .custom-live-preview-stage{
    height:clamp(300px,86vw,480px)!important;
    min-height:300px!important;
    max-height:480px!important;
    border-radius:20px!important;
  }
  .customization-page-form-card .cloth-color-picker,
  .customization-page-form-card .color-copy-tools{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}


/* v27.2.1 - part-aware live preview labels */
.current-preview-viewing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-4px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(120,72,36,.14);
  border-radius:14px;
  background:linear-gradient(180deg,#fffdf8,#fff8ef);
  color:var(--ink);
  min-width:0;
}
.current-preview-viewing span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.current-preview-viewing b{
  min-width:0;
  text-align:right;
  font-size:13px;
  line-height:1.2;
  color:var(--brand);
  overflow-wrap:anywhere;
}
.customization-page-form-card .custom-preview-title span[data-preview-badge]{
  overflow-wrap:anywhere;
  max-width:min(100%,360px);
}
@media(max-width:640px){
  .current-preview-viewing{
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
    padding:8px 9px;
  }
  .current-preview-viewing b{
    text-align:left;
    font-size:12.5px;
  }
}

/* v27.2.2 - compact API error actions for product catalog health checks */
.catalog-error-compact .catalog-error-actions {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.catalog-error-compact .catalog-error-actions .btn {
  grid-row: auto;
  grid-column: auto;
}
@media (max-width: 640px) {
  .catalog-error-compact .catalog-error-actions {
    grid-row: auto;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* v27.2.3: home hero empty offer-card fallback fix.
   Keep the right hero visual meaningful when there is no active sale banner or the offer API is unavailable. */
.hero-logo-card.is-default-hero{
  align-items:stretch;
  justify-content:stretch;
  padding:22px;
  min-height:318px;
  overflow:hidden;
}
.home-hero-default-card{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100%;
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:14px;
  align-items:center;
  justify-items:center;
  text-align:center;
  border-radius:24px;
  padding:24px;
  background:
    radial-gradient(circle at 22% 18%,rgba(193,53,132,.12),transparent 28%),
    radial-gradient(circle at 80% 72%,rgba(244,114,182,.12),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,247,251,.94));
  border:1px solid rgba(235,199,220,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.home-hero-default-logo{
  position:relative;
  display:grid;
  place-items:center;
  width:min(76%,360px);
  max-width:360px;
  min-height:128px;
}
.home-hero-default-logo img{
  width:min(100%,310px);
  max-height:150px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(193,53,132,.12));
}
.home-hero-default-monogram{
  display:none;
  width:96px;
  height:96px;
  border-radius:30px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--brand),#f472b6);
  color:#fff;
  font-weight:1000;
  font-size:32px;
  letter-spacing:-.08em;
  box-shadow:0 20px 42px rgba(193,53,132,.18);
}
.home-hero-default-logo.logo-failed .home-hero-default-monogram{display:inline-flex}
.home-hero-default-copy{display:grid;gap:7px;max-width:430px}
.home-hero-default-copy span{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(235,199,220,.84);
  color:var(--brand);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.home-hero-default-copy b{
  color:var(--ink);
  font-size:clamp(18px,2vw,26px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.home-hero-default-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.home-hero-default-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  width:100%;
}
@media(max-width:980px){
  .hero-logo-card.is-default-hero{min-height:250px;padding:16px}
  .home-hero-default-card{padding:20px;gap:12px}
  .home-hero-default-logo{min-height:96px}
  .home-hero-default-logo img{max-height:116px}
}
@media(max-width:520px){
  .hero-logo-card.is-default-hero{display:none}
}

/* v28.0.0 — Color assistance page + crisp preview polish */
.color-layout{grid-template-columns:minmax(360px,.95fr) minmax(520px,1.15fr);gap:28px;align-items:start}.color-preview-card{border:1px solid var(--brand-line);border-radius:30px;background:linear-gradient(135deg,#fff,#fff7fb);box-shadow:var(--shadow);overflow:hidden;display:grid;gap:0}.color-preview-media-wrap{position:relative;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.96),rgba(253,242,248,.9));min-height:360px;display:grid;place-items:center;padding:18px;border-bottom:1px solid rgba(235,199,220,.72)}.color-preview-main-img{width:100%;height:min(52vh,520px);max-height:520px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px rgba(235,199,220,.72);image-rendering:auto}.color-preview-quality{position:absolute;left:18px;top:18px;border-radius:999px;background:rgba(17,24,39,.78);color:#fff;font-weight:900;font-size:12px;padding:7px 11px;backdrop-filter:blur(10px)}.color-preview-info{padding:18px;display:grid;gap:9px}.color-preview-info h2{margin:0;font-size:clamp(22px,3vw,32px);letter-spacing:-.035em}.color-selected-strip{display:flex;flex-wrap:wrap;gap:8px;min-height:34px}.color-selected-mini{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 9px;font-size:12px;font-weight:800;max-width:100%}.color-selected-mini i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(15,23,42,.14);flex:0 0 auto}.color-selected-mini span{min-width:0;overflow:hidden;text-overflow:ellipsis}.color-selection-zoom-hotspot{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in}.color-preview-info .actions.compact{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}.color-slot-row-v28{grid-template-columns:minmax(0,1fr) minmax(320px,410px);align-items:center}.color-slot-main{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center}.color-slot-main em{display:block;font-style:normal;color:var(--brand);font-weight:850;font-size:12px;margin-top:3px}.color-slot-swatch{width:42px;height:42px;border-radius:15px;border:1px solid rgba(15,23,42,.16);box-shadow:inset 0 0 0 3px #fff}.color-slot-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}.assist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.assist-parts{border:1px solid var(--line);border-radius:18px;background:#fff;padding:12px;margin:12px 0}.assist-part-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}.assist-part-grid label{display:flex;gap:8px;align-items:center;border:1px solid rgba(235,199,220,.72);border-radius:14px;padding:9px 10px;background:#fff8fc;font-weight:800;font-size:13px}.compact-toast{padding:10px 12px;margin:8px 0;border-radius:14px}.review-zoom-shell.color-zoom-shell .live-preview-zoom-stage{min-height:60vh}.review-zoom-shell.color-zoom-shell .live-preview-zoom-image{max-height:78vh;image-rendering:auto}.dst-preview-canvas,.review-preview-canvas{image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}.live-preview-zoom-image{image-rendering:auto}.preview-quality-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:rgba(16,185,129,.12);color:#047857;border:1px solid rgba(16,185,129,.25);font-weight:900;font-size:11px;padding:4px 8px}@media(max-width:900px){.color-layout{display:block;padding:0 var(--mobile-gutter);margin-top:14px}.color-layout>section{margin-bottom:14px}.color-preview-media-wrap{min-height:280px;padding:12px}.color-preview-main-img{height:clamp(260px,72vw,420px)}.color-slot-row-v28{grid-template-columns:1fr;gap:10px}.color-slot-actions{grid-template-columns:1fr}.color-slot-actions .btn{width:100%}.assist-grid,.assist-part-grid{grid-template-columns:1fr}.color-preview-info .actions.compact{display:grid;grid-template-columns:1fr}.color-preview-info .actions.compact .btn{width:100%}}

/* v28.0.1 - vector zoom preview + clearer progress feedback */
.live-preview-zoom-vector{
  width:min(100%,calc(100vw - 56px));
  height:min(78vh,860px);
  min-height:520px;
  display:grid;
  place-items:center;
  border-radius:24px;
  overflow:hidden;
  background:#07080b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.28);
  transform-origin:center center;
  will-change:transform;
  touch-action:none;
}
.vector-preview-svg{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  image-rendering:auto;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
  transform-origin:center center;
  background:#07080b;
}
.live-preview-zoom-vector .preview-loading{
  width:min(420px,80vw);
  color:#f8d7ea;
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,17,23,.72);
  border-radius:18px;
  padding:16px;
}
.preview-quality-badge::before{content:'•';font-size:16px;line-height:0;color:#10b981}
.custom-preview-panel .preview-progress-bar span,
.live-preview-zoom-vector .preview-progress-bar span{min-width:24px}
@media(max-width:760px){
  .live-preview-zoom-vector{width:calc(100vw - 22px);height:68vh;min-height:360px;border-radius:18px}
  .vector-preview-svg{border-radius:18px}
}
.color-preview-vector{
  width:100%;
  height:min(52vh,520px);
  max-height:520px;
  min-height:320px;
  border-radius:22px;
  overflow:hidden;
  background:#07080b;
  box-shadow:inset 0 0 0 1px rgba(235,199,220,.72);
  display:grid;
  place-items:center;
}
.color-preview-vector .vector-preview-svg,
.color-vector-svg{width:100%;height:100%;display:block;shape-rendering:geometricPrecision}
.color-preview-vector-zoom{height:min(78vh,860px)}
@media(max-width:900px){.color-preview-vector{height:clamp(260px,72vw,420px);min-height:260px}}

/* v28.0.2 - 4K clarity safe preview viewer
   Larger modal/stage and no CSS compression.  Private DST files remain hidden;
   this only displays safe vector/canvas preview payloads. */
.live-preview-zoom-modal{
  width:min(1760px,calc(100vw - 14px))!important;
  height:min(1120px,calc(100dvh - 14px))!important;
  max-height:calc(100dvh - 14px)!important;
  padding:8px!important;
  border-radius:24px!important;
}
.live-preview-zoom-stage{
  min-height:min(82vh,980px)!important;
  background:#050609!important;
}
.live-preview-zoom-vector{
  width:100%!important;
  height:100%!important;
  min-height:min(82vh,920px)!important;
  border-radius:20px!important;
}
.vector-preview-svg,
.color-vector-svg{
  width:100%!important;
  height:100%!important;
  shape-rendering:geometricPrecision!important;
  text-rendering:geometricPrecision!important;
  image-rendering:auto!important;
  filter:none!important;
}
.dst-preview-canvas,
.review-preview-canvas,
.live-preview-zoom-image{
  image-rendering:auto!important;
  filter:none!important;
}
.preview-quality-badge::after{
  content:' 4K';
  font-weight:1000;
  letter-spacing:.03em;
}
.color-preview-vector-zoom{
  height:min(88vh,1020px)!important;
}
.review-zoom-shell.color-zoom-shell .live-preview-zoom-stage{
  min-height:min(82vh,980px)!important;
}
@media(max-width:760px){
  .live-preview-zoom-modal{
    width:calc(100vw - 8px)!important;
    height:calc(100dvh - 8px)!important;
    border-radius:18px!important;
  }
  .live-preview-zoom-stage{min-height:70vh!important}
  .live-preview-zoom-vector{min-height:70vh!important;border-radius:16px!important}
}

/* v28.0.8 branded Firebase email action handler */
.email-action-body{min-height:100vh;background:radial-gradient(circle at 50% 18%,rgba(252,231,243,.92),transparent 30%),linear-gradient(180deg,#fff 0%,#fff9fd 62%,#fff 100%);display:flex;flex-direction:column}
.email-action-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px clamp(18px,4vw,54px);border-bottom:1px solid rgba(235,199,220,.72);background:rgba(255,255,255,.9);backdrop-filter:blur(18px)}
.email-action-header-brand{display:inline-flex;align-items:center}.email-action-header-brand img{width:164px;height:auto;display:block}.email-action-header-link{font-weight:900;color:var(--brand);border:1px solid var(--brand-line);border-radius:999px;padding:9px 16px;background:#fff}
.email-action-page{flex:1;display:grid;place-items:center;padding:clamp(28px,5vw,72px) 18px}
.email-action-card{position:relative;isolation:isolate;width:min(100%,680px);overflow:hidden;text-align:center;border:1px solid rgba(235,199,220,.92);border-radius:34px;padding:clamp(28px,5vw,52px);background:rgba(255,255,255,.96);box-shadow:0 34px 100px rgba(91,34,70,.16)}
.email-action-glow{position:absolute;z-index:-1;inset:-38% -18% auto;height:390px;background:radial-gradient(circle,rgba(252,231,243,.95),rgba(255,255,255,0) 68%);pointer-events:none}
.email-action-logo-wrap{display:flex;justify-content:center;margin:0 auto 18px}.email-action-logo-wrap img{width:min(230px,52vw);height:auto;display:block;filter:drop-shadow(0 14px 24px rgba(193,53,132,.12))}
.email-action-icon{width:78px;height:78px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:1000;letter-spacing:-.06em;border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);box-shadow:0 18px 42px rgba(193,53,132,.14);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.email-action-icon.is-loading{animation:dofEmailActionPulse 1.25s ease-in-out infinite}.email-action-icon.is-success{background:#ecfdf5;color:#047857;border-color:#a7f3d0;transform:scale(1.04)}.email-action-icon.is-error{background:#fff1f2;color:#be123c;border-color:#fecdd3}.email-action-icon.is-pending{background:#fff7ed;color:#b45309;border-color:#fed7aa}
.email-action-kicker{margin:0 0 8px;color:var(--brand);font-size:12px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.email-action-card h1{margin:0;color:var(--ink);font-size:clamp(32px,5vw,48px);line-height:1.06;letter-spacing:-.055em}.email-action-description{max-width:540px;margin:16px auto 0;color:var(--muted);font-size:16px;line-height:1.65}
.email-action-progress{width:min(100%,390px);margin:24px auto 4px;display:grid;gap:9px;color:var(--brand);font-size:13px}.email-action-progress[hidden]{display:none}.email-action-progress span{height:7px;border-radius:999px;background:linear-gradient(90deg,var(--brand-soft),var(--brand),#d4af37,var(--brand-soft));background-size:220% 100%;animation:dofEmailProgress 1.15s linear infinite}.email-action-progress b{font-weight:850}
.email-action-status{justify-content:center;margin:20px 0 4px}.email-action-pending{margin:22px 0 0;text-align:left;border:1px solid var(--brand-line);border-radius:22px;padding:18px;background:linear-gradient(135deg,#fff,#fff8fc)}.email-action-pending[hidden]{display:none}.email-action-pending>b{display:block;color:var(--ink);overflow-wrap:anywhere}.email-action-message .toast{margin:18px 0 0;text-align:left}
.email-action-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.email-action-buttons .btn{min-width:170px}
.email-action-trust{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;text-align:left;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)}.email-action-trust>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ecfdf5;color:#047857;font-weight:1000}.email-action-trust p{margin:0;font-size:13px;line-height:1.5}.email-action-trust b{color:#334155}
.email-action-footer{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:20px;color:var(--muted);font-size:13px}.email-action-footer a{color:var(--brand);font-weight:850}
@keyframes dofEmailActionPulse{0%,100%{transform:scale(1);box-shadow:0 18px 42px rgba(193,53,132,.12)}50%{transform:scale(1.045);box-shadow:0 24px 52px rgba(193,53,132,.22)}}
@keyframes dofEmailProgress{to{background-position:-220% 0}}
@media(max-width:640px){.email-action-header{min-height:66px;padding:8px 14px}.email-action-header-brand img{width:132px}.email-action-header-link{padding:8px 13px}.email-action-page{padding:18px 10px}.email-action-card{border-radius:26px;padding:28px 18px}.email-action-logo-wrap img{width:190px}.email-action-icon{width:68px;height:68px;font-size:26px}.email-action-card h1{font-size:34px}.email-action-description{font-size:15px}.email-action-buttons{display:grid}.email-action-buttons .btn{width:100%}.email-action-trust{align-items:start}}
@media(prefers-reduced-motion:reduce){.email-action-icon.is-loading,.email-action-progress span{animation:none!important}}


/* v28.0.9 - immediate auth-aware navigation and signed-in page state */
#accountNav.account-nav-resolving{display:inline-flex;align-items:center;min-width:88px}
.account-nav-placeholder{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--brand-line);border-radius:999px;background:var(--brand-soft-2);color:var(--brand);font-weight:900;white-space:nowrap;pointer-events:none;user-select:none}
.account-nav-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5;animation:dofPulse .9s ease-in-out infinite}
body.auth-user-restoring .provider-grid,body.auth-user-restoring .signup-callout,body.auth-user-restoring .auth-stack-panel{opacity:.45;pointer-events:none}
body.auth-user-confirmed .provider-grid,body.auth-user-confirmed .auth-beta-note,body.auth-user-confirmed .signup-callout,body.auth-user-confirmed .auth-stack-panel{display:none!important}
body.auth-user-confirmed .signin-only-layout{grid-template-columns:minmax(0,720px);justify-content:center}
body.auth-user-confirmed .auth-panel-main>h1{margin-bottom:6px}
@media(max-width:760px){#accountNav.account-nav-resolving{min-width:auto}.account-nav-placeholder{padding:8px 10px}.account-nav-placeholder>span:last-child{display:none}}