@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#10233f; --muted:#607087; --canvas:#f7f8fa; --paper:#fff; --line:#dce2e9; --accent:#b96f40; --shadow:0 18px 45px rgba(16,35,63,.09); }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:16px/1.55 'DM Sans',sans-serif; }
a { color:inherit; } .skip-link { position:absolute; top:-3rem; left:1rem; z-index:3; background:var(--ink); color:#fff; padding:.5rem .8rem; } .skip-link:focus { top:1rem; }
.site-header, main, footer { max-width:1200px; margin:auto; padding-left:clamp(1.25rem,4vw,3.5rem); padding-right:clamp(1.25rem,4vw,3.5rem); }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { font-weight:700; letter-spacing:.08em; text-decoration:none; font-size:.9rem; white-space:nowrap; } .brand span { color:var(--accent); } nav { display:flex; gap:1.7rem; } nav a { text-decoration:none; font-size:.92rem; color:#43536b; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:white; padding:.65rem 1.05rem; text-decoration:none; font:600 .9rem 'DM Sans'; cursor:pointer; } .button:hover { background:#1a3458; } .button:focus-visible, input:focus-visible, .text-button:focus-visible { outline:3px solid #d7a17c; outline-offset:2px; } .button-secondary { background:transparent; color:var(--ink); }
.hero { margin-top:2.5rem; background:var(--ink); color:#fff; min-height:435px; padding:clamp(2rem,6vw,5rem); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr); gap:3rem; align-items:end; box-shadow:var(--shadow); } .eyebrow { margin:0 0:.75rem; color:var(--accent); letter-spacing:.12em; font-size:.74rem; font-weight:700; text-transform:uppercase; } h1,h2 { font-family:'Playfair Display',serif; line-height:1.08; } h1 { max-width:700px; font-size:clamp(3rem,7vw,6rem); margin:0; } .hero-copy { max-width:570px; margin:1.5rem 0 2rem; color:#d7e0ec; font-size:1.1rem; } .hero .button { background:var(--accent); border-color:var(--accent); } .hero-panel { border-left:1px solid rgba(255,255,255,.25); padding-left:1.5rem; color:#e8eef6; } .hero-panel a { display:inline-block; margin-top:.5rem; }
.catalogue { padding:clamp(4rem,9vw,7.5rem) 0; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; } .section-heading h2 { font-size:clamp(2rem,4vw,3.4rem); margin:.2rem 0 0; } .section-heading > p { max-width:370px; margin:0; color:var(--muted); font-size:.92rem; }
.catalogue-filters { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:.75rem; padding:1rem; border:1px solid var(--line); background:var(--paper); } .catalogue-filters label { font-size:.76rem; color:var(--muted); } select { min-height:44px; padding:.55rem .65rem; background:#fff; border:1px solid #b9c4d2; border-radius:3px; color:var(--ink); font:inherit; } .catalogue-result { margin:1.15rem 0; color:var(--muted); font-size:.9rem; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .product-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); background:var(--paper); min-width:0; } .product-image-button { padding:0; border:0; background:#edf0f4; cursor:pointer; aspect-ratio:4/4.4; overflow:hidden; } .product-image-button img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; } .product-image-button:hover img { transform:scale(1.025); } .product-card-body { display:flex; flex:1; flex-direction:column; padding:1rem; } .product-card h3 { margin:.15rem 0 .5rem; font:600 1.05rem 'DM Sans'; } .product-category { margin:0; color:var(--accent); font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; } .product-price { display:flex; align-items:center; gap:.55rem; margin:.15rem 0 .8rem; } .product-price strong { font-size:1rem; } .product-price s { color:var(--muted); font-size:.85rem; } .size-list { display:flex; flex-wrap:wrap; gap:.35rem; margin:.1rem 0 1rem; } .size-list span { min-width:30px; padding:.15rem .3rem; border:1px solid var(--line); text-align:center; font-size:.76rem; } .size-list .unavailable { color:#8b96a6; background:#f1f3f5; text-decoration:line-through; } .product-card-footer { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:auto; } .status { color:#1f6a53; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .status-muted { color:#697586; } .product-view { margin:0; font-size:.82rem; }.catalogue-empty { grid-column:1/-1; border:1px dashed #b9c4d2; padding:3rem 1.5rem; text-align:center; background:#fff; }.catalogue-empty h3 { margin:0 0:.4rem; font:600 1.1rem 'DM Sans'; }.catalogue-empty p { margin:0; color:var(--muted); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-bottom:5rem; } .trust-grid article { background:var(--paper); padding:1.6rem; border:1px solid var(--line); } .trust-grid h2 { font:600 1.1rem 'DM Sans'; margin:0 0:.5rem; } .trust-grid p { margin:0; color:var(--muted); font-size:.92rem; }
footer { border-top:1px solid var(--line); padding-top:1.5rem!important; padding-bottom:2rem!important; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.7rem 1.5rem; color:var(--muted); font-size:.83rem; }
.auth-dialog,.product-dialog,.cart-dialog,.checkout-dialog,.dashboard-dialog { position:relative; border:0; border-radius:6px; width:min(100% - 2rem,460px); padding:2.25rem; box-shadow:0 22px 70px rgba(0,0,0,.24); } .auth-dialog::backdrop,.product-dialog::backdrop,.cart-dialog::backdrop,.checkout-dialog::backdrop,.dashboard-dialog::backdrop { background:rgba(16,35,63,.62); } .auth-dialog h2 { margin:.15rem 0 1.5rem; font-size:2rem; } .dialog-close { position:absolute; right:1rem; top:.7rem; z-index:1; background:transparent; border:0; color:var(--ink); cursor:pointer; font-size:1.6rem; } form { display:grid; gap:1rem; } label { display:grid; gap:.35rem; font-size:.88rem; font-weight:600; } input { min-height:44px; padding:.55rem .65rem; border:1px solid #b9c4d2; border-radius:3px; font:inherit; } .form-message { min-height:1.35rem; margin:0; color:#a0352c; font-size:.88rem; } .text-button { margin-top:1.15rem; padding:0; border:0; background:transparent; color:#31517c; font:inherit; cursor:pointer; text-decoration:underline; }
.product-dialog { width:min(100% - 2rem,940px); padding:0; overflow:hidden; }.product-detail-gallery { display:grid; grid-template-columns:2fr 1fr; max-height:550px; background:#edf0f4; }.product-detail-gallery img { display:block; width:100%; height:100%; object-fit:cover; min-height:220px; }.product-detail-gallery .product-detail-extra { max-height:275px; }.product-detail-copy { padding:clamp(1.5rem,4vw,3rem); }.product-detail-copy h2 { margin:.1rem 0 .7rem; font-size:clamp(2rem,4vw,3.3rem); }.product-detail-price { font-size:1.15rem; font-weight:700; }.product-detail-copy dl { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.product-detail-copy dl div { display:grid; gap:.2rem; }.product-detail-copy dt { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }.product-detail-copy dd { margin:0; font-weight:600; }.size-heading { font-weight:700; margin-bottom:.5rem; }.size-options span { min-width:38px; padding:.35rem; }.catalogue-note { margin:1.25rem 0 0; color:var(--muted); font-size:.82rem; }
.nav-cart { border:0; padding:0; background:transparent; color:#43536b; font:inherit; font-size:.92rem; cursor:pointer; }.nav-cart span { display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; font-size:.7rem; }.add-cart-form { grid-template-columns:1fr 100px; align-items:end; margin-top:1.3rem; }.add-cart-form .button { grid-column:1/-1; }.cart-dialog,.checkout-dialog,.dashboard-dialog { width:min(100% - 2rem,640px); }.cart-dialog h2,.checkout-dialog h2 { margin-top:.1rem; }.cart-line { display:grid; grid-template-columns:64px 1fr 80px auto; gap:.8rem; align-items:center; padding:1rem 0; border-top:1px solid var(--line); }.cart-line img { width:64px; height:64px; object-fit:cover; background:#edf0f4; }.cart-line h3,.cart-line p { margin:0; }.cart-line h3 { font:600 .9rem 'DM Sans'; }.cart-line p { color:var(--muted); font-size:.82rem; }.cart-line label { font-size:.72rem; }.cart-line input { min-height:38px; width:100%; }.cart-line .text-button { margin:0; font-size:.78rem; }.cart-empty { color:var(--muted); }.cart-subtotal { padding:1rem 0; color:var(--muted); font-size:.86rem; }.checkout-dialog fieldset { border:1px solid var(--line); display:grid; gap:.6rem; }.checkout-dialog fieldset label { display:block; font-weight:400; }.checkout-dialog textarea { min-height:70px; resize:vertical; padding:.55rem .65rem; border:1px solid #b9c4d2; font:inherit; }.checkout-summary { margin-top:.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.6rem 0; }.checkout-summary p { display:flex; justify-content:space-between; gap:1rem; margin:.3rem 0; font-size:.88rem; }.checkout-summary p:last-child { display:block; color:var(--muted); font-size:.8rem; }.order-created { padding:1.5rem; border:1px solid #a8cdbd; background:#f3faf6; }.order-created h3 { margin-top:0; }.payment-panel { border:1px solid var(--line); background:var(--paper); padding:1.5rem; }.payment-panel h3 { margin:.2rem 0 1rem; font:600 1.4rem 'DM Sans'; }.payment-total { display:flex; justify-content:space-between; padding:.85rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.payment-state { color:var(--muted); font-size:.9rem; }.receipt,.order-tracking { margin-top:1rem; border:1px solid #a8cdbd; padding:1.2rem; background:#f3faf6; }.receipt h4,.order-tracking h4 { margin:.2rem 0 1rem; font:600 1.15rem 'DM Sans'; }.receipt p { display:flex; justify-content:space-between; gap:1rem; margin:.45rem 0; font-size:.88rem; }.receipt .button { margin-top:.8rem; }.order-tracking ol { margin:1rem 0 0; padding-left:1.2rem; }.order-tracking li { display:grid; gap:.15rem; margin:.6rem 0; }.order-tracking li span { color:var(--muted); font-size:.82rem; }.dashboard-dialog h2 { margin:.15rem 0 1.5rem; }.dashboard-profile,.dashboard-section { border-top:1px solid var(--line); padding:1rem 0; }.dashboard-profile h3,.dashboard-section h3 { margin:0 0 .4rem; font:600 1rem 'DM Sans'; }.dashboard-profile p { margin:.2rem 0; color:var(--muted); font-size:.88rem; }.dashboard-section ul { display:grid; gap:.65rem; margin:0; padding:0; list-style:none; }.dashboard-section li { display:grid; gap:.15rem; border-bottom:1px solid var(--line); padding-bottom:.65rem; font-size:.88rem; }.dashboard-section li span { color:var(--muted); }.dashboard-section .text-button { justify-self:start; margin:.2rem 0 0; }
@media (max-width:750px) { .site-header { min-height:70px; } nav { display:none; } .hero { margin-top:0; grid-template-columns:1fr; gap:2rem; min-height:490px; } .hero-panel { border-left:0; border-top:1px solid rgba(255,255,255,.25); padding:1.3rem 0 0; } .section-heading { display:block; }.section-heading > p { margin-top:1rem; }.catalogue-filters { grid-template-columns:1fr 1fr; }.catalogue-filters label:first-child { grid-column:1/-1; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.trust-grid { grid-template-columns:1fr; padding-bottom:3.5rem; } .auth-dialog,.product-dialog,.cart-dialog,.checkout-dialog { min-height:100vh; width:100%; max-width:none; border-radius:0; padding:4rem 1.4rem 2rem; } .product-dialog { padding:0; }.product-detail-gallery { grid-template-columns:1fr 1fr; }.product-detail-gallery .product-detail-main { grid-column:1/-1; }.product-detail-copy { padding:1.5rem; } .cart-line { grid-template-columns:52px 1fr 65px; }.cart-line img { width:52px; height:52px; }.cart-line .text-button { grid-column:2/-1; justify-self:start; } }

/* Phase 7 support thread */
.nav-link-button { border:0; padding:0; background:transparent; color:#43536b; font:inherit; font-size:.92rem; cursor:pointer; }
.support-dialog { position:relative; border:0; border-radius:6px; width:min(100% - 2rem,760px); padding:2.25rem; box-shadow:0 22px 70px rgba(0,0,0,.24); }.support-dialog::backdrop { background:rgba(16,35,63,.62); }.support-dialog h2 { margin:.15rem 0 1.5rem; }.support-ticket-list { margin-top:1.5rem; border-top:1px solid var(--line); }.support-ticket-list h3 { font:600 1rem 'DM Sans'; }.support-ticket { width:100%; display:grid; gap:.15rem; padding:1rem 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }.support-ticket span,.support-ticket small { color:var(--muted); }.support-thread-header { border-bottom:1px solid var(--line); }.support-thread-header .text-button { margin:0 0 .5rem; }.support-thread-header h3 { margin:.2rem 0; font:600 1.05rem 'DM Sans'; }.support-thread-header p { margin:.2rem 0 1rem; color:var(--muted); }.support-messages { display:grid; gap:.7rem; min-height:240px; max-height:48vh; overflow-y:auto; padding:1rem 0; }.chat-message { max-width:82%; padding:.7rem .85rem; border:1px solid var(--line); background:#f1f4f7; }.chat-message p,.chat-message small { margin:0; }.chat-message small { color:var(--muted); font-size:.72rem; }.chat-message-mine { justify-self:end; background:#e8eef6; border-color:#c7d3e1; }.chat-message-admin { justify-self:start; }.support-compose { border-top:1px solid var(--line); padding-top:1rem; }.support-compose textarea { width:100%; min-height:88px; resize:vertical; padding:.65rem; border:1px solid #b9c4d2; font:inherit; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:750px) { .support-dialog { min-height:100vh; width:100%; max-width:none; border-radius:0; padding:4rem 1.4rem 2rem; }.support-messages { max-height:52vh; }.support-ticket { padding:1rem 0; } }

.admin-page { min-height:100vh; }.admin-shell { width:min(1380px,100%); margin:auto; padding:1.5rem clamp(1.25rem,4vw,3.5rem) 4rem; }.admin-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }.admin-header > div { display:flex; align-items:center; gap:.75rem; color:var(--muted); font-size:.85rem; }.admin-shell h1 { font-size:clamp(2.4rem,5vw,4.4rem); }.admin-shell #admin-login { max-width:570px; padding:clamp(3rem,8vw,7rem) 0; }.admin-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin:2rem 0; }.admin-cards article,.admin-grid > section { border:1px solid var(--line); background:var(--paper); padding:1.25rem; }.admin-cards span,.admin-cards small { display:block; color:var(--muted); font-size:.8rem; }.admin-cards strong { display:block; margin:.3rem 0; font:600 2rem 'DM Sans'; }.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.admin-grid h2 { margin:.1rem 0 1rem; font:600 1.15rem 'DM Sans'; }.admin-table { display:grid; }.admin-table article { display:grid; gap:.2rem; padding:.85rem 0; border-top:1px solid var(--line); font-size:.86rem; }.admin-table article span { color:var(--muted); }.admin-table .text-button { justify-self:start; margin:.2rem 0 0; }@media (max-width:800px) { .admin-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-grid { grid-template-columns:1fr; }.admin-header { align-items:flex-start; flex-direction:column; } }

/* Storefront redesign */
body { background:#f8f8f7; }
img,video { max-width:100%; } .product-detail-main,.hero-video { width:100%; height:auto; } .hero-video { height:100%; }
.site-header { position:sticky; top:0; z-index:20; max-width:none; min-height:78px; background:rgba(248,248,247,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.site-header > *:first-child { margin-left:max(0px, calc((100vw - 1200px)/2)); }.site-header > *:last-child { margin-right:max(0px, calc((100vw - 1200px)/2)); }
.brand { display:grid; gap:0; line-height:1; }.brand small { margin-top:.36rem; color:var(--muted); font:500 .57rem 'DM Sans'; letter-spacing:.13em; text-transform:uppercase; }.primary-nav { gap:1.5rem; }.primary-nav a,.nav-link-button { font-weight:600; color:var(--ink); }
.header-actions { display:flex; align-items:center; gap:.5rem; }.header-search { display:block; position:relative; }.header-search input { width:clamp(130px,16vw,220px); min-height:38px; border-color:transparent; border-bottom-color:var(--line); border-radius:0; background:transparent; font-size:.84rem; }.icon-button { position:relative; display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.25rem .45rem; border:0; background:transparent; color:var(--ink); cursor:pointer; font:600 .78rem 'DM Sans'; }.cart-badge { display:grid!important; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:99px; background:var(--accent)!important; color:#fff!important; font-size:.65rem!important; }
.hero { position:relative; isolation:isolate; max-width:none; margin-top:0; padding-left:max(clamp(1.25rem,7vw,8rem), calc((100vw - 1200px)/2)); padding-right:max(clamp(1.25rem,7vw,8rem), calc((100vw - 1200px)/2)); min-height:530px; overflow:hidden; background:#10233f; box-shadow:none; }.hero:before { content:""; position:absolute; z-index:-1; width:52vw; height:52vw; right:-16vw; top:-28vw; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 50px rgba(185,111,64,.18),0 0 0 110px rgba(255,255,255,.04); }.hero:after { content:""; position:absolute; z-index:-1; width:40%; height:100%; right:0; bottom:0; background:linear-gradient(135deg,transparent 5%,rgba(185,111,64,.88) 220%); }.hero-copy-wrap { max-width:710px; }.hero h1 { max-width:670px; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }.hero-text-link { color:#fff; font-size:.9rem; font-weight:700; }.hero-panel { align-self:center; max-width:260px; }
.category-rail { max-width:1200px; margin:0 auto; padding:3.4rem clamp(1.25rem,4vw,3.5rem) 1rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; }.category-rail h2 { margin:.1rem 0 0; font-size:clamp(1.8rem,3.4vw,2.7rem); }.category-pills { display:flex; max-width:65%; gap:.55rem; overflow:auto; padding:.2rem; }.category-pill { flex:0 0 auto; min-height:38px; padding:.4rem .75rem; border:1px solid var(--line); border-radius:99px; background:#fff; color:var(--ink); font:600 .77rem 'DM Sans'; cursor:pointer; }.category-pill.is-active,.category-pill:hover { border-color:var(--ink); background:var(--ink); color:#fff; }
.catalogue { padding-top:3.6rem; }.catalogue-filters { border-radius:6px; box-shadow:0 6px 22px rgba(16,35,63,.04); }.product-grid { gap:1.35rem; }.product-card { border-radius:5px; box-shadow:0 5px 14px rgba(16,35,63,.035); transition:transform .2s ease,box-shadow .2s ease; }.product-card:hover { transform:translateY(-4px); box-shadow:0 17px 32px rgba(16,35,63,.11); }.product-card-body { padding:1.1rem; }.product-image-button { background:#edf0f4; }.product-card-footer { padding-top:.6rem; border-top:1px solid #edf0f4; }.trust-grid article { border-radius:5px; }.trust-grid article:first-child { border-top:3px solid var(--accent); }
footer { max-width:none; display:grid; grid-template-columns:1.1fr 1fr 1.1fr; padding:3rem max(clamp(1.25rem,4vw,3.5rem), calc((100vw - 1200px)/2)) 1.5rem!important; background:#fff; }.newsletter-form { display:flex; gap:.45rem; margin:.6rem 0; }.newsletter-form input { min-width:0; flex:1; min-height:40px; }.newsletter-form .button { min-height:40px; }.announcement-banner { position:relative; z-index:25; display:flex; align-items:center; justify-content:center; gap:1rem; min-height:34px; padding:.4rem 1.25rem; background:var(--accent); color:#fff; font-size:.78rem; }.announcement-banner p { margin:0; }.announcement-banner .text-button { margin:0; color:#fff; font-size:.75rem; }.announcement-banner a { font-weight:700; }
@media (max-width:750px) { .site-header { min-height:66px; padding-left:1rem; padding-right:1rem; }.site-header > *:first-child,.site-header > *:last-child { margin:0; }.brand small,.header-search,.icon-button-label { display:none; }.header-actions { gap:.15rem; }.icon-button { min-width:34px; justify-content:center; }.primary-nav { display:none; }.hero { min-height:520px; padding:4rem 1.25rem 2rem; }.hero:before { width:90vw; height:90vw; right:-33vw; top:-25vw; }.hero-panel { align-self:end; }.category-rail { display:block; padding:2.6rem 1.25rem .3rem; }.category-pills { max-width:none; margin-top:1rem; }.catalogue { padding-top:2.8rem; }.product-grid { gap:.75rem; }.product-card-body { padding:.8rem; }.product-card h3 { font-size:.93rem; }.size-list { gap:.2rem; }.size-list span { min-width:25px; }.announcement-banner { justify-content:flex-start; flex-wrap:wrap; gap:.25rem .75rem; }.announcement-banner p { flex-basis:100%; } footer { grid-template-columns:1fr; padding:2rem 1.25rem!important; } }

/* Account experience */
.auth-dialog { width:min(100% - 2rem,540px); padding:3rem; border-radius:8px; }.auth-dialog::before { content:"HERSTEP COLLECTION"; display:block; margin-bottom:1.4rem; color:var(--accent); letter-spacing:.14em; font:700 .7rem 'DM Sans'; }.auth-dialog form { gap:1.15rem; }.auth-dialog label { color:#344861; }.auth-dialog input { min-height:48px; }.auth-links { display:flex; justify-content:space-between; gap:1rem; align-items:center; }.auth-links .text-button { margin-top:1.25rem; font-size:.84rem; }.form-message-success { color:#1f6a53; }.auth-dialog #account-content { display:grid; gap:.8rem; }.auth-dialog #account-content .button { margin-top:.4rem; }
@media (max-width:750px) { .auth-dialog { padding:4rem 1.5rem 2rem; }.auth-links { align-items:flex-start; flex-direction:column; gap:0; } }

/* Customer dashboard */
.dashboard-dialog { width:min(100% - 2rem,900px); }.dashboard-welcome { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:0 0 1.5rem; }.dashboard-welcome h3 { margin:.1rem 0; font:600 1.7rem 'Playfair Display'; }.dashboard-welcome p:last-child { margin:.35rem 0 0; color:var(--muted); font-size:.88rem; }.dashboard-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }.dashboard-metrics article { padding:1rem; border:1px solid var(--line); background:#f9fafb; }.dashboard-metrics span,.dashboard-metrics small { display:block; color:var(--muted); font-size:.74rem; }.dashboard-metrics strong { display:block; margin:.15rem 0; font-size:1.7rem; }.dashboard-columns { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }.dashboard-section { border:1px solid var(--line); padding:1.1rem; margin-top:1.25rem; background:#fff; }.dashboard-section-heading { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; padding-bottom:.75rem; border-bottom:1px solid var(--line); }.dashboard-section-heading h3 { margin:0; }.dashboard-section-heading span { color:var(--muted); font-size:.74rem; }.dashboard-list { display:grid; }.dashboard-list article { display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; padding:.85rem 0; border-bottom:1px solid #edf0f4; font-size:.85rem; }.dashboard-list article:last-child { border-bottom:0; }.dashboard-list article strong { grid-column:1/-1; }.dashboard-list article span { color:var(--muted); }.dashboard-list article em { font-style:normal; font-weight:700; }.dashboard-status { color:var(--ink); font-size:.72rem; letter-spacing:.04em; }.dashboard-empty { margin:.8rem 0 0; color:var(--muted); font-size:.85rem; }.dashboard-notifications .dashboard-list article { grid-template-columns:1fr; }.dashboard-notifications .text-button { justify-self:start; margin:.2rem 0 0; }
@media (max-width:750px) { .dashboard-dialog { min-height:100vh; width:100%; max-width:none; border-radius:0; padding:4rem 1.25rem 2rem; }.dashboard-welcome { align-items:start; flex-direction:column; }.dashboard-metrics,.dashboard-columns { grid-template-columns:1fr; }.dashboard-columns { gap:0; } }

/* Support inbox */
.support-dialog { width:min(100% - 2rem,820px); padding:2.5rem; }.support-ticket-list { border:1px solid var(--line); border-bottom:0; }.support-ticket-list h3 { padding:0 1rem; }.support-ticket { padding:1rem; transition:background .15s ease; }.support-ticket:hover { background:#f7f8fa; }.ticket-status { color:var(--accent); font-size:.68rem; letter-spacing:.07em; }.support-thread-header > div { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.support-thread-header .eyebrow { margin-bottom:.25rem; }.support-thread-header h3 { font:600 1.4rem 'Playfair Display'; }.support-messages { min-height:330px; max-height:52vh; padding:1.25rem .25rem; scrollbar-color:var(--line) transparent; }.chat-message { border-radius:12px 12px 12px 2px; padding:.8rem 1rem; box-shadow:0 2px 7px rgba(16,35,63,.04); }.chat-message-mine { border-radius:12px 12px 2px 12px; background:var(--ink); border-color:var(--ink); color:#fff; }.chat-message-mine small { color:#d7e0ec; }.chat-message small { display:flex; justify-content:space-between; gap:1rem; margin-top:.35rem; }.support-compose { display:grid; grid-template-columns:1fr auto; gap:.65rem; align-items:end; padding-top:1rem; }.support-compose textarea,.support-compose .form-message { grid-column:1/-1; }.support-compose .button { min-width:130px; }.support-compose .form-message { min-height:0; }
@media (max-width:750px) { .support-dialog { display:flex; flex-direction:column; min-height:100vh; padding:4rem 1rem 1rem; }.support-messages { flex:1; min-height:0; max-height:none; }.support-thread-header h3 { font-size:1.25rem; }.support-compose { grid-template-columns:1fr; }.support-compose .button { width:100%; } }

/* Modern admin workspace */
.admin-page { background:#f5f7fa; }.admin-app { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }.admin-sidebar { position:sticky; top:0; display:flex; flex-direction:column; gap:2rem; height:100vh; padding:2rem 1.35rem; background:var(--ink); color:#fff; }.admin-sidebar .brand { color:#fff; }.admin-sidebar .brand small { color:#b9c4d2; }.admin-sidebar nav { display:grid; gap:.3rem; }.admin-sidebar nav button { padding:.7rem .8rem; border:0; border-radius:4px; background:transparent; color:#cbd5e1; text-align:left; font:600 .86rem 'DM Sans'; cursor:pointer; }.admin-sidebar nav button:hover,.admin-sidebar nav button.is-active { background:rgba(255,255,255,.12); color:#fff; }.admin-sidebar > a:last-child { margin-top:auto; color:#cbd5e1; font-size:.82rem; }.admin-main { width:min(1320px,100%); margin:0 auto; padding:2rem clamp(1.25rem,4vw,3.5rem) 4rem; }.admin-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1.75rem; border-bottom:1px solid var(--line); }.admin-topbar h1 { margin:.1rem 0 0; font-size:clamp(2rem,4vw,3.1rem); }.admin-topbar > div:last-child { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.82rem; }.admin-menu { display:none; }.admin-login { max-width:650px; padding:10vh 0; }.admin-login h2 { margin:.2rem 0 1rem; font-size:clamp(2.5rem,5vw,4rem); }.admin-login p { color:var(--muted); }.admin-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }.admin-panel { margin-top:1.35rem; padding:1.35rem; border:1px solid var(--line); border-radius:6px; background:#fff; }.admin-panel h2 { margin:.1rem 0; font:600 1.25rem 'DM Sans'; }.admin-panel-heading { display:flex; justify-content:space-between; align-items:start; gap:1rem; padding-bottom:1rem; }.admin-panel-heading p { margin:.3rem 0 0; color:var(--muted); font-size:.85rem; }.admin-row,.admin-list article { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }.admin-row span,.admin-list span,.admin-product-list span,.admin-product-list small { color:var(--muted); font-size:.84rem; }.admin-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:1.35rem; }.admin-split .admin-panel { margin-top:1.35rem; }.admin-list { display:grid; }.admin-list article { display:grid; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.inventory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }.inventory-grid input { min-width:0; }.admin-panel fieldset { border:1px solid var(--line); padding:1rem; }.admin-product-list { display:grid; gap:.6rem; }.admin-product-list article { display:grid; grid-template-columns:58px 1fr; gap:.75rem; align-items:center; padding:.65rem 0; border-top:1px solid var(--line); }.admin-product-list img { width:58px; height:58px; object-fit:cover; }.admin-product-list article div { display:grid; gap:.1rem; }.check-label { display:flex; align-items:center; gap:.6rem; }.check-label input { min-height:auto; }.admin-ticket-list { display:grid; border-top:1px solid var(--line); }.admin-ticket-list button { display:grid; gap:.15rem; padding:1rem 0; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; color:var(--ink); cursor:pointer; font:inherit; }.admin-ticket-list span,.admin-ticket-list small { color:var(--muted); }.admin-thread .text-button { margin:0 0 1rem; }.admin-messages { display:grid; gap:.7rem; min-height:240px; max-height:45vh; overflow:auto; margin:1rem 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.admin-messages article { max-width:78%; padding:.7rem .85rem; background:#f1f4f7; border-radius:10px 10px 10px 2px; }.admin-messages article.mine { justify-self:end; background:var(--ink); color:#fff; border-radius:10px 10px 2px 10px; }.admin-messages p,.admin-messages small { margin:0; }.admin-messages small { font-size:.7rem; opacity:.75; }.admin-thread form { grid-template-columns:1fr auto; }.admin-thread textarea { min-height:82px; padding:.7rem; border:1px solid #b9c4d2; font:inherit; resize:vertical; }.admin-thread textarea,.admin-thread .form-message { grid-column:1/-1; }.admin-form-panel { max-width:670px; }.admin-loading { color:var(--muted); }
@media (max-width:800px) { .admin-app { display:block; }.admin-sidebar { position:fixed; z-index:40; width:260px; height:100dvh; transform:translateX(-100%); transition:transform .2s ease; }.admin-sidebar.is-open { transform:translateX(0); }.admin-main { padding:1.25rem 1rem 3rem; }.admin-menu { display:inline-flex; margin-bottom:.75rem; border:0; background:transparent; color:var(--ink); font:700 .75rem 'DM Sans'; }.admin-topbar { flex-direction:column; }.admin-topbar > div:last-child { width:100%; justify-content:space-between; }.admin-cards,.admin-split,.form-grid { grid-template-columns:1fr; }.admin-row { align-items:flex-start; flex-direction:column; }.inventory-grid { grid-template-columns:repeat(4,1fr); }.admin-thread form { grid-template-columns:1fr; } }
.auth-intro { margin:-.8rem 0 1.5rem; color:var(--muted); font-size:.9rem; }.field-help { margin:-.7rem 0 0; color:var(--muted); font-size:.77rem; }.password-control { position:relative; display:block; }.password-control input { width:100%; padding-right:4.25rem; }.password-toggle { position:absolute; top:50%; right:.35rem; transform:translateY(-50%); min-height:34px; padding:.25rem .45rem; border:0; border-radius:3px; background:transparent; color:#31517c; font:600 .76rem 'DM Sans'; cursor:pointer; }.password-toggle:hover { background:#f1f4f7; }.password-requirements { margin:-.45rem 0 0; padding:.8rem .9rem; border:1px solid var(--line); background:#fafbfc; color:var(--muted); font-size:.78rem; }.password-requirements p { margin:0 0 .35rem; font-weight:600; color:var(--ink); }.password-requirements ul { display:grid; gap:.2rem; margin:0; padding:0; list-style:none; }.password-requirements li::before { display:inline-block; width:1rem; content:'×'; color:#9a4650; font-weight:700; }.password-requirements li.is-valid { color:#1f6a53; }.password-requirements li.is-valid::before { content:'+'; }.password-requirements li.is-invalid { color:#697586; }.auth-dialog textarea { min-height:100px; padding:.65rem; border:1px solid #b9c4d2; border-radius:3px; font:inherit; resize:vertical; }.auth-dialog .check-label { display:flex; align-items:center; gap:.65rem; font-weight:500; }.auth-dialog .check-label input { min-height:auto; }
.hero { background-image:linear-gradient(90deg,rgba(16,35,63,.38),rgba(16,35,63,.08)),var(--hero-image,none); background-size:cover; background-position:center 42%; }.hero:after { background:linear-gradient(135deg,transparent 5%,rgba(185,111,64,.18) 220%); }.hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.72; }
/* Operations controls keep sensitive actions legible across desktop and mobile. */
.admin-product-list article { grid-template-columns:58px minmax(0,1fr) auto; }
.admin-product-list article > .text-button { margin:0; align-self:center; }
.admin-product-list .admin-media-note { color:var(--muted); font-size:.84rem; margin:0; }
.admin-ticket-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.6rem; }
.admin-ticket-actions select,.order-status-form select,.request-form select { min-height:40px; padding:.45rem; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; }
.order-status-form { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.5rem; }
.order-status-form .form-message { flex-basis:100%; min-height:0; text-align:right; }
.request-form { min-width:min(100%,360px); }
.request-form textarea { min-height:72px; padding:.6rem; border:1px solid var(--line); font:inherit; resize:vertical; }
.announcement-banner { margin-top:0; }
@media (max-width:800px) { .admin-product-list article { grid-template-columns:58px minmax(0,1fr); }.admin-product-list article > .text-button { grid-column:2; justify-self:start; }.admin-ticket-actions,.order-status-form { justify-content:flex-start; }.order-status-form .form-message { text-align:left; } }
.support-widget { position:fixed; right:1rem; bottom:1rem; z-index:30; }.support-widget > .button { border-radius:999px; }.support-widget section { width:min(340px,calc(100vw - 2rem)); margin-bottom:.6rem; padding:1rem; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }.support-widget header { display:grid; gap:.25rem; color:var(--ink); }.support-widget header button { justify-self:end; border:0; background:transparent; }

/* Shared platform design system */
:root { --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --surface-muted:#f8fafc; --success:#1f6a53; --success-bg:#edf8f2; --warning:#8a5b12; --warning-bg:#fff7e6; --danger:#9b3a35; --danger-bg:#fdf0ef; }
.button { gap:var(--space-2); box-shadow:0 1px 2px rgba(16,35,63,.08); transition:background .16s ease,border-color .16s ease,transform .16s ease; }.button:hover:not(:disabled) { transform:translateY(-1px); }.button:disabled { cursor:not-allowed; opacity:.6; }.icon-button svg,.button svg,.admin-sidebar svg { width:1rem; height:1rem; stroke-width:1.8; }.status-badge,.ticket-status,.dashboard-status { display:inline-flex; align-items:center; width:max-content; min-height:24px; padding:.18rem .48rem; border:1px solid currentColor; border-radius:999px; font:700 .67rem/1 'DM Sans'; letter-spacing:.045em; text-transform:uppercase; }.status-badge-success { color:var(--success); background:var(--success-bg); }.status-badge-warning { color:var(--warning); background:var(--warning-bg); }.status-badge-danger { color:var(--danger); background:var(--danger-bg); }.status-badge-neutral,.ticket-status,.dashboard-status { color:#506176; background:#f2f5f8; }.admin-sidebar nav button { display:flex; align-items:center; gap:.65rem; }.admin-sidebar > a:last-child { display:flex; align-items:center; gap:.5rem; }.admin-data-table { width:100%; border-collapse:collapse; font-size:.84rem; }.admin-table-wrap { margin-top:var(--space-4); }.admin-table-scroll { overflow-x:auto; border:1px solid var(--line); }.admin-data-table th,.admin-data-table td { padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; }.admin-data-table tr:last-child td { border-bottom:0; }.admin-data-table th { background:var(--surface-muted); color:var(--muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }.admin-data-table th button { display:inline-flex; align-items:center; gap:.25rem; border:0; padding:0; background:transparent; color:inherit; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; }.admin-data-table th button span::after { content:'↕'; font-size:.8rem; }.admin-data-table th button.is-sorted { color:var(--ink); }.admin-data-table th button.is-sorted span::after { content:''; }.admin-data-table tbody tr:hover { background:#fbfcfd; }.admin-data-table .order-status-form { display:flex; align-items:center; gap:.4rem; }.admin-data-table .order-status-form select { min-width:132px; }.admin-data-table .order-status-form .button { min-height:36px; padding:.4rem .6rem; }.admin-data-table .order-status-form .form-message { display:none; }.table-pagination { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0 0; color:var(--muted); font-size:.8rem; }.table-pagination p { margin:0; }.table-pagination div { display:flex; gap:var(--space-2); }.table-pagination .button { min-height:36px; padding:.35rem .65rem; }.admin-menu svg { width:1rem; height:1rem; }.admin-menu span { margin-left:.35rem; }
@media (max-width:800px) { .admin-sidebar { box-shadow:12px 0 30px rgba(16,35,63,.22); }.admin-menu { align-items:center; min-height:40px; padding:.45rem .65rem; border:1px solid var(--line)!important; border-radius:4px!important; background:#fff!important; }.admin-data-table th,.admin-data-table td { padding:.75rem; }.admin-data-table .order-status-form { min-width:220px; }.table-pagination { align-items:flex-start; flex-direction:column; }.table-pagination div { width:100%; }.table-pagination .button { flex:1; }.support-widget > .button { border-radius:4px; } }
.customer-action-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); margin:0 0 var(--space-5); }.customer-action-grid a { display:grid; gap:.25rem; min-height:108px; padding:var(--space-4); border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease; }.customer-action-grid a:hover { border-color:var(--ink); box-shadow:0 6px 18px rgba(16,35,63,.07); }.customer-action-grid strong { font-size:.88rem; }.customer-action-grid span { color:var(--muted); font-size:.75rem; }.dashboard-section-heading a { color:#31517c; font-size:.8rem; font-weight:700; }.dashboard-welcome .button { margin:0; }
@media (max-width:800px) { .customer-action-grid { grid-template-columns:1fr 1fr; }.customer-action-grid a { min-height:94px; }.dashboard-welcome .button { width:100%; } }

/* Hero carousel */
.hero { display:grid; align-items:center; }.hero-media { position:absolute; inset:0; z-index:-2; overflow:hidden; }.hero-slide-media { width:100%; height:100%; object-fit:cover; object-position:center center; opacity:.72; }.hero-carousel-controls { position:absolute; right:max(clamp(1.25rem,7vw,8rem), calc((100vw - 1200px)/2)); bottom:1.5rem; z-index:1; display:flex; align-items:center; gap:.65rem; }.hero-carousel-button,.hero-carousel-dot { border:1px solid rgba(255,255,255,.65); background:rgba(16,35,63,.54); color:#fff; cursor:pointer; }.hero-carousel-button { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; }.hero-carousel-button:hover,.hero-carousel-button:focus-visible { background:var(--accent); border-color:var(--accent); }.hero-carousel-dots { display:flex; gap:.45rem; }.hero-carousel-dot { width:9px; height:9px; padding:0; border-radius:50%; }.hero-carousel-dot.is-active { background:var(--accent); border-color:var(--accent); transform:scale(1.18); }
.hero-slide-editor { display:grid; gap:1rem; margin:1rem 0; padding:1rem; border:1px solid var(--line); background:#fafbfc; }.hero-slide-editor header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }.hero-slide-editor h3 { margin:0; font:600 1rem 'DM Sans'; }.hero-slide-editor-actions { display:flex; gap:.5rem; }.hero-slide-editor input[type="file"] { background:#fff; }.hero-focal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; }.hero-focal-grid button { min-height:34px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font:600 .7rem 'DM Sans'; }.hero-focal-grid button.is-selected { border-color:var(--ink); background:var(--ink); color:#fff; }.hero-media-note { margin:0; color:var(--muted); font-size:.8rem; }
@media (max-width:750px) { .hero-carousel-controls { right:1.25rem; bottom:1rem; }.hero-carousel-button { width:38px; height:38px; }.hero-slide-media { opacity:.68; } }