:root {
    --knot-black: #000;
    --knot-white: #fff;
    --knot-page: #fff;
    --knot-surface: #fff;
    --knot-surface-raised: #fff;
    --knot-surface-muted: #f5f5f5;
    --knot-surface-disabled: #f1f1f1;
    --knot-text: #111;
    --knot-muted: #686868;
    --knot-border: rgba(0,0,0,.16);
    --knot-border-strong: rgba(0,0,0,.34);
    --knot-control: #fff;
    --knot-primary: #111;
    --knot-on-primary: #fff;
    --knot-focus: #111;
    --knot-overlay: rgba(0,0,0,.50);
    --knot-danger: #b11226;
    --knot-success: #2d5f3f;
    --knot-ease: cubic-bezier(.2, .7, .2, 1);
    --knot-fast: 160ms;
    --knot-med: 240ms;
    --knot-nav-height: 62px;
    --navbar-scrolled-bg: #fff;
    --navbar-border: rgba(0,0,0,.10);
    --navbar-shadow: rgba(0,0,0,.08);
    --drawer-bg: #fff;
    --drawer-section-bg: #fff;
    --drawer-text: #111;
    --drawer-muted: #666;
    --drawer-border: rgba(0,0,0,.13);
    --drawer-control-bg: rgba(255,255,255,.14);
    --drawer-control-hover: rgba(0,0,0,.06);
    --drawer-overlay: rgba(10,10,10,.42);
    --glass-background: rgba(245,245,245,.22);
    --glass-background-strong: rgba(255,255,255,.38);
    --glass-border: rgba(255,255,255,.55);
    --glass-dark-border: rgba(20,20,20,.14);
    --glass-highlight: rgba(255,255,255,.72);
    --glass-shadow: rgba(0,0,0,.16);
    --glass-blur: 18px;
    --glass-saturation: 145%;
    --glass-radius: 28px;
    --store-drawer-width: 420px;
    --store-drawer-max-width: 88vw;
    --store-drawer-padding: 32px;
    --font-display: "Bricolage Grotesque", sans-serif;
    --font-body: "Bricolage Grotesque", sans-serif;
    --font-mono: "Geist Mono", monospace;
    --type-xs: .75rem;
    --type-sm: .875rem;
    --type-base: 1rem;
    --type-md: 1.25rem;
    --type-lg: 1.625rem;
    --type-xl: 2.625rem;
    --type-2xl: 4.25rem;
    --type-hero: 6.875rem;
    color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--knot-page); }
body { margin: 0; font-family: sans-serif; background: var(--knot-page); color: var(--knot-text); padding-bottom: 60px; overflow-x: hidden; transition: background-color var(--knot-fast) var(--knot-ease), color var(--knot-fast) var(--knot-ease); }
body.knot-cart-open { overflow: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, .knot-btn, .knot-viewall, .knot-cart-primary, .knot-cart-secondary, .knot-cart-empty button, .knot-pay-now, .size-btn, .knot-edit-product-btn, .knot-small-outline, .knot-pill { transition: color var(--knot-fast) var(--knot-ease), background-color var(--knot-fast) var(--knot-ease), border-color var(--knot-fast) var(--knot-ease), opacity var(--knot-fast) var(--knot-ease), transform var(--knot-fast) var(--knot-ease); }
button:not(:disabled):hover, .knot-btn:hover, .knot-viewall:hover, .knot-cart-primary:hover, .knot-cart-secondary:hover, .knot-cart-empty button:not(:disabled):hover, .knot-pay-now:not(:disabled):hover, .size-btn:not(:disabled):hover, .knot-edit-product-btn:not(:disabled):hover, .knot-small-outline:not(:disabled):hover, .knot-pill:hover { transform: translateY(-1px); }
button:not(:disabled):active, .knot-btn:active, .knot-viewall:active, .knot-cart-primary:active, .knot-cart-secondary:active, .knot-cart-empty button:not(:disabled):active, .knot-pay-now:not(:disabled):active, .size-btn:not(:disabled):active, .knot-edit-product-btn:not(:disabled):active, .knot-small-outline:not(:disabled):active, .knot-pill:active { transform: translateY(0); }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.text-center, .knot-center { text-align: center; }
.py-4 { padding-block: 24px; }
.py-5 { padding-block: 48px; }

.knot-topbar { position: sticky; top: 0; z-index: 32; background: #fff; color: #111; border-bottom: 1px solid var(--navbar-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.knot-nav { width: min(1180px, calc(100% - 32px)); margin: 0 auto; height: var(--knot-nav-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.knot-public-topbar .knot-nav { width: 100%; padding-inline: clamp(16px, 3vw, 44px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
.knot-public-topbar .knot-brand { grid-column: 2; justify-self: center; }
.knot-public-topbar .knot-nav-links { grid-column: 3; justify-self: end; }
.knot-brand { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 1; text-decoration: none; }
.knot-logo { width: 112px; height: auto; display: block; }
.knot-nav-links { --nav-utility-gap: 14px; display: flex; align-items: center; gap: var(--nav-utility-gap); min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.knot-nav-links a { text-decoration: none; }
.knot-nav-links button, .knot-link-button, .knot-table-actions button { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; text-decoration: underline; }
.knot-brand:focus-visible, .knot-nav-links a:focus-visible, .knot-nav-links button:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 4px; }
.knot-nav-links .knot-nav-icon-button { position: relative; width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 42px; margin: 0; padding: 0; color: #111; border: 0; background: transparent; cursor: pointer; line-height: 0; text-decoration: none !important; vertical-align: middle; transition: color var(--knot-fast) var(--knot-ease), opacity var(--knot-fast) var(--knot-ease), transform var(--knot-fast) var(--knot-ease); }
.knot-nav-icon-button[hidden] { display: none; }
.knot-nav-icon-button:hover, .knot-nav-icon-button:focus-visible, .knot-nav-icon-button.is-active { color: var(--knot-primary); opacity: 1; }
.knot-nav-icon-button:hover, .knot-nav-icon-button:focus-visible { transform: translateY(-1px); }
.knot-nav-icon-button:active { transform: translateY(0); }
.knot-nav-icon { width: 21px; height: 21px; display: block; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.knot-desktop-search { position: relative; z-index: 5; width: 42px; height: 42px; flex: 0 0 42px; }
.knot-desktop-search-form { position: absolute; top: -2px; right: 0; width: 42px; height: 46px; display: flex; align-items: center; justify-content: flex-end; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #111; overflow: hidden; transform-origin: right center; transition: width 360ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, background-color 180ms ease; }
.knot-desktop-search.is-open .knot-desktop-search-form { width: min(360px, calc(100vw - 220px)); border-color: #111; background: #fff; }
.knot-desktop-search-form input { min-width: 0; flex: 1 1 auto; width: 0; height: 44px; padding: 0 10px 0 20px; border: 0; background: transparent; color: #111; outline: 0; opacity: 0; visibility: hidden; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .035em; text-transform: none; transition: opacity 180ms ease 80ms; }
.knot-desktop-search.is-open .knot-desktop-search-form input { opacity: 1; visibility: visible; }
.knot-desktop-search-form input::placeholder { color: #bdbdbd; opacity: 1; }
.knot-nav-links .knot-desktop-search-form button { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; padding: 0; border: 0; background: transparent; color: #111; cursor: pointer; text-decoration: none; }
.knot-desktop-search-form .knot-nav-icon { width: 24px; height: 24px; stroke-width: 1.75; }
.knot-desktop-search-form:focus-within { outline: 0; }
.knot-desktop-search-form button:hover { background: #f3f3f3; transform: none; outline: none; }
.knot-desktop-search-form button:focus-visible { background: #f3f3f3; box-shadow: inset 0 0 0 1px #111; outline: none; transform: none; }
.knot-cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #000; color: #fff; font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0; font-weight: 800; }
.knot-account-menu { position: relative; height: 40px; display: flex; align-items: center; }
.knot-account-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 8px; border: 1px solid var(--knot-border); background: var(--knot-surface-raised); z-index: 30; }
.knot-account-panel a, .knot-account-panel button { width: 100%; display: block; padding: 9px 10px; border: 0; background: var(--knot-surface-raised); color: var(--knot-text); text-align: left; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.knot-account-panel a:hover, .knot-account-panel button:hover, .knot-account-panel a:focus-visible, .knot-account-panel button:focus-visible { background: var(--knot-surface-muted); outline: none; }
.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; }
.knot-danger-link { color: var(--knot-danger); }
.admin-product-code { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 25px; padding: 3px 8px; border: 1px solid var(--knot-border-strong); background: var(--knot-surface-muted); color: var(--knot-text); font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.knot-admin-product-head { align-items: end; margin-top: 30px; }
.knot-admin-product-head h2 { margin: 0; }
.knot-admin-product-search { width: min(560px, 100%); display: flex; gap: 8px; }
.knot-admin-product-search input { min-width: 0; flex: 1 1 auto; }
.knot-admin-code-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 12px; border-block: 1px solid var(--knot-border); padding: 14px 0; }
.knot-admin-code-field > span { font-weight: 800; }
.knot-admin-code-field small { grid-column: 1 / -1; color: var(--knot-muted); }
.knot-admin-product-code { display: flex; align-items: center; gap: 9px; margin: 2px 0 14px; color: var(--knot-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }

.knot-floating-categories { position: fixed; left: 0; right: 0; top: calc(var(--knot-nav-height) + 4px); z-index: 18; padding: 0 16px; pointer-events: none; transition: top var(--knot-fast) var(--knot-ease); }
.knot-floating-categories.is-scrolled { top: calc(var(--knot-nav-height) + 4px); }
.knot-floating-category-shell { position: relative; isolation: isolate; overflow: hidden; width: fit-content; max-width: min(1180px, 100%); margin: 0 auto; padding: 5px 9px; border: 1px solid var(--glass-border); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,.12)); box-shadow: 0 10px 28px rgba(0,0,0,.14), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(0,0,0,.08), inset 12px 0 22px rgba(255,255,255,.10), inset -12px 0 22px rgba(0,0,0,.035); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(105%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(105%); pointer-events: auto; --pointer-x: 50%; --pointer-y: 50%; }
.knot-floating-category-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.54) 0%, rgba(255,255,255,.22) 22%, rgba(255,255,255,.05) 38%, transparent 58%); opacity: .76; transition: opacity var(--knot-fast) var(--knot-ease); }
.knot-floating-category-shell::after { content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,.24), transparent 43%, rgba(255,255,255,.07)), radial-gradient(120% 180% at 50% -45%, rgba(255,255,255,.34), transparent 52%); box-shadow: inset 0 0 0 1px var(--glass-dark-border), inset 0 0 18px rgba(255,255,255,.12); }
.knot-floating-categories.is-scrolled .knot-floating-category-shell { background: rgba(245,245,245,.32); box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.74), inset 0 -1px 0 rgba(0,0,0,.08); }
.knot-category-row.knot-floating-category-row { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 0; max-width: 100%; min-height: 32px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap; }
.knot-floating-category-row::-webkit-scrollbar { display: none; }
.knot-floating-category-row .knot-pill { position: relative; overflow: hidden; isolation: isolate; flex: 0 0 auto; height: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-color: rgba(25,25,25,.28); background: rgba(255,255,255,.20); color: #111; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(0,0,0,.07), 0 2px 7px rgba(0,0,0,.08); backdrop-filter: blur(10px) saturate(130%) contrast(103%); -webkit-backdrop-filter: blur(10px) saturate(130%) contrast(103%); transition: background var(--knot-fast) var(--knot-ease), border-color var(--knot-fast) var(--knot-ease), box-shadow var(--knot-fast) var(--knot-ease), transform var(--knot-fast) var(--knot-ease); --button-pointer-x: 50%; --button-pointer-y: 45%; }
.knot-floating-category-row .knot-pill::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--button-pointer-x, 50%) var(--button-pointer-y, 45%), rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 28%, transparent 62%), linear-gradient(135deg, rgba(255,255,255,.42), transparent 48%, rgba(255,255,255,.10)); opacity: .68; }
.knot-floating-category-row .knot-pill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,.36), transparent 42%, rgba(0,0,0,.035)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }
.knot-floating-category-row .knot-pill:hover { border-color: rgba(10,10,10,.45); background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 5px 12px rgba(0,0,0,.11); }
.knot-floating-category-row .knot-pill.is-active { border-color: rgba(0,0,0,.46); background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.30)); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.22); font-weight: 800; }
.knot-floating-category-row .knot-pill:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.knot-listing-categories { position: sticky; top: calc(var(--knot-nav-height) + 10px); z-index: 14; display: flex; justify-content: center; margin: -12px 0 30px; padding: 8px 0; pointer-events: none; }
.knot-listing-categories .knot-floating-category-shell { max-width: 100%; pointer-events: auto; }

.knot-cart-overlay { position: fixed; inset: 0; z-index: 40; background: var(--drawer-overlay); opacity: 0; transition: opacity var(--knot-med) var(--knot-ease); }
.knot-cart-overlay.is-open { opacity: 1; }
.knot-cart-drawer, .knot-menu-drawer { width: min(var(--store-drawer-width), var(--store-drawer-max-width)); max-width: 100%; height: 100vh; height: 100dvh; }
.knot-cart-drawer { position: fixed; top: 0; right: 0; z-index: 41; min-width: 0; background: var(--drawer-bg); color: var(--drawer-text); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--knot-med) var(--knot-ease); border-left: 1px solid var(--drawer-border); box-shadow: -16px 0 44px var(--navbar-shadow); backdrop-filter: saturate(125%) blur(12px); -webkit-backdrop-filter: saturate(125%) blur(12px); will-change: transform; }
.knot-cart-drawer.is-open { transform: translateX(0); }
.knot-cart-drawer[hidden], .knot-cart-overlay[hidden] { display: none; }
.knot-cart-drawer-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px var(--store-drawer-padding) 18px; border-bottom: 1px solid var(--drawer-border); }
.knot-cart-drawer-head h2 { margin: 0; font-size: 26px; }
.knot-drawer-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--drawer-border); background: var(--drawer-control-bg); color: var(--drawer-text); cursor: pointer; }
.knot-drawer-close:hover, .knot-drawer-close:focus-visible { background: var(--drawer-control-hover); }
.knot-cart-error { flex: 0 0 auto; margin: 12px var(--store-drawer-padding) 0; border: 1px solid #b11226; color: #b11226; padding: 9px 10px; font-size: 13px; font-weight: 700; }
.knot-cart-items { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 var(--store-drawer-padding); }
.knot-cart-items.is-empty { display: grid; place-items: center; }
.knot-cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 14px 12px; padding: 20px 0; border-bottom: 1px solid var(--drawer-border); }
.knot-cart-product { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.knot-cart-product img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--knot-border); background: var(--knot-surface-muted); }
.knot-cart-product strong { display: block; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.knot-cart-mobile-size { display: block; color: var(--drawer-muted); font-size: 12px; margin-top: 4px; }
.knot-cart-line-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: 70px; }
.knot-cart-qty { display: inline-grid; grid-template-columns: 24px 26px 24px; align-items: center; height: 30px; border: 1px solid var(--knot-border-strong); }
.knot-cart-qty button { height: 28px; border: 0; background: var(--knot-control); color: var(--knot-muted); cursor: pointer; }
.knot-cart-qty button:disabled { opacity: .35; cursor: not-allowed; }
.knot-cart-qty span { text-align: center; font-size: 13px; }
.knot-cart-total { margin-left: auto; color: var(--drawer-text); font-size: 12px; font-weight: 700; white-space: nowrap; text-align: right; }
.knot-cart-remove { align-self: start; justify-self: end; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--drawer-text); cursor: pointer; }
.knot-cart-empty { width: 100%; max-width: 340px; padding: 32px 10px; color: var(--drawer-text); text-align: center; }
.knot-cart-empty h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
.knot-cart-empty p { margin: 0 0 26px; color: var(--drawer-muted); font-size: 13px; line-height: 1.45; }
.knot-cart-empty a { color: var(--drawer-text); text-underline-offset: 2px; }
.knot-cart-bottom { flex: 0 0 auto; margin-top: auto; padding: 18px var(--store-drawer-padding) 28px; border-top: 1px solid var(--drawer-border); background: var(--drawer-section-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.knot-cart-subtotal { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; font-size: 15px; }
.knot-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knot-cart-primary, .knot-cart-secondary, .knot-cart-empty button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--knot-primary); text-decoration: none; font-size: 17px; font-weight: 900; cursor: pointer; }
.knot-cart-primary { background: var(--knot-primary); color: var(--knot-on-primary); }
.knot-cart-secondary, .knot-cart-empty button { background: var(--knot-control); color: var(--knot-text); }
.knot-cart-empty button { width: auto; min-width: 190px; min-height: 46px; padding: 0 22px; border-radius: 0; background: var(--knot-primary); color: var(--knot-on-primary); font-size: 14px; }
.knot-drawer-close:focus-visible, .knot-cart-remove:focus-visible, .knot-cart-qty button:focus-visible, .knot-cart-primary:focus-visible, .knot-cart-secondary:focus-visible, .knot-cart-empty button:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 3px; }

.knot-alert { margin: 16px auto 0; width: min(1180px, calc(100% - 32px)); border: 1px solid var(--knot-border-strong); background: var(--knot-surface-raised); color: var(--knot-text); padding: 12px 14px; font-weight: 700; }
.knot-alert-error { border-color: var(--knot-danger); color: var(--knot-danger); }

.knot-hero { position: relative; width: 100%; overflow: visible; background: var(--knot-page); }
.knot-hero-slider { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--knot-page); }
.knot-hero-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.008); transition: opacity 620ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); background: var(--knot-page); }
.knot-hero-slide.active { opacity: 1; transform: scale(1); }
.knot-hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.knot-collection { padding: 44px 0; }
.knot-category-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.knot-pill { border: 1px solid var(--knot-border-strong); padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 12px; }
.knot-sub-pill { border-color: var(--knot-border); color: var(--knot-muted); }
.knot-heading { font-size: 24px; letter-spacing: .02em; margin: 0 0 28px; }
.knot-space { margin-top: 28px; }

.knot-product-grid-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.knot-product-grid-list.knot-product-grid-edge { width: 100%; gap: 0; }
.knot-product-grid-list.knot-product-grid-related { gap: 14px; }
.knot-card-link { min-width: 0; position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: inherit; text-decoration: none; background: var(--knot-surface-muted); }
body.knot-animate-ready .knot-card-link { opacity: 0; transform: translateY(12px); transition: opacity var(--knot-med) var(--knot-ease), transform var(--knot-med) var(--knot-ease); }
body.knot-animate-ready .knot-card-link.is-visible { opacity: 1; transform: translateY(0); }
.knot-product-grid-edge .knot-card-link { border-right: 1px solid var(--knot-border); border-bottom: 1px solid var(--knot-border); }
.knot-card-link .knot-product-card { position: absolute; inset: 0; overflow: hidden; background: var(--knot-surface-muted); color: var(--knot-text); }
.knot-card-link .knot-product-imgwrap { position: absolute; inset: 0; overflow: hidden; background: var(--knot-surface-muted); }
.knot-card-link .knot-product-img { width: 100%; height: 100%; padding: 0; object-fit: contain; object-position: center; display: block; background: var(--knot-surface-muted); transition: none; }
.knot-card-link:hover .knot-product-img, .knot-card-link:focus-visible .knot-product-img { transform: none; filter: none; }
.knot-card-link:focus-visible { z-index: 2; outline: 2px solid var(--knot-focus); outline-offset: -3px; }
.knot-card-link .knot-discount { position: absolute; z-index: 2; top: 14px; left: 14px; background: #111; color: #fff; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.knot-card-link .knot-product-meta { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; min-height: 88px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 8px 10px 10px; border-top: 1px solid var(--knot-border); background: var(--knot-surface); color: var(--knot-text); text-align: center; transform: translateY(calc(100% - 12px)); transition: transform 420ms cubic-bezier(.22,1,.36,1), background-color 220ms ease; }
.knot-card-link:hover .knot-product-meta, .knot-card-link:focus-visible .knot-product-meta { background: var(--knot-surface-raised); transform: translateY(0); }
.knot-product-category { display: none; }
.knot-product-name { width: 100%; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--knot-text); font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-align: center; white-space: normal; transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.knot-card-link:hover .knot-product-name, .knot-card-link:focus-visible .knot-product-name { transform: translateY(-2px); }
.knot-product-bottom { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 2px; margin-top: 5px; font-size: 11px; }
.knot-price { color: var(--knot-text); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; }
.knot-price s { display: inline; margin-left: 6px; color: var(--knot-muted); font-size: 10px; font-weight: 400; opacity: .58; text-decoration-thickness: 1px; }
.knot-save { margin-top: 1px; color: var(--knot-muted); font-size: 9px; line-height: 1.1; white-space: nowrap; }
.knot-empty { padding: 60px 0; text-align: center; color: var(--knot-muted); }
.knot-viewall, .knot-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 22px; background: var(--knot-primary); color: var(--knot-on-primary); border: 1px solid var(--knot-primary); text-decoration: none; cursor: pointer; font-weight: 800; letter-spacing: .08em; }
.knot-btn.outline, .knot-viewall { background: var(--knot-control); color: var(--knot-text); }

.knot-tagline { border-top: 1px solid var(--knot-border); background: var(--knot-page); margin-top: 72px; }
.knot-tagline-text { letter-spacing: .45em; font-size: 13px; }
.knot-footer { background: #050505; color: #f5f5f5; margin-top: 0; }
.knot-footer-inner { width: min(1280px, 100%); margin: 0 auto; padding: 64px 32px 28px; }
.knot-footer-grid { display: grid; grid-template-columns: 1.1fr .8fr 1fr 1.45fr; gap: 48px; }
.knot-footer-section h2 { margin: 0 0 18px; color: #f5f5f5; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.knot-footer-brand h2 { font-size: 28px; letter-spacing: .08em; }
.knot-footer-desktop-logo { display: block; width: min(180px, 100%); height: auto; aspect-ratio: 1501 / 319; object-fit: contain; object-position: left center; margin: 0 0 18px; }
.knot-footer-section p, .knot-footer-section a, .knot-footer-bottom { color: #a3a3a3; }
.knot-footer-section p { margin: 0; line-height: 1.6; }
.knot-footer-section ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.knot-footer a { text-decoration: none; transition: color .18s ease, transform .18s ease; }
.knot-footer a:hover, .knot-footer a:focus-visible { color: #f5f5f5; transform: translateY(-1px); }
.knot-footer a:focus-visible { outline: 1px solid rgba(255,255,255,.72); outline-offset: 4px; }
.knot-footer-contact address { display: grid; gap: 12px; font-style: normal; }
.knot-footer-contact-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.55; }
.knot-footer-contact-row:hover .knot-footer-icon, .knot-footer-social a:hover .knot-footer-icon { transform: translateY(-1px); stroke: #f5f5f5; }
.knot-footer-icon { width: 21px; height: 21px; stroke: #d6d6d6; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; transition: stroke .18s ease, transform .18s ease; }
.knot-footer-social { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; }
.knot-footer-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; }
.knot-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: 13px; }
.knot-footer-bottom p { margin: 0; }
.knot-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 16px; }
.knot-footer-mobile { display: none; }
.knot-static-page { max-width: 760px; }
.knot-static-page p { color: var(--knot-muted); line-height: 1.75; }

.knot-page { padding: 42px 0 34px; }
.knot-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.knot-page h1 { margin: 0 0 20px; font-size: 30px; }
.knot-listing-page.container { width: 100%; max-width: none; padding-inline: 0; }
.knot-listing-page .knot-page-head { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.knot-listing-page .knot-product-load-zone { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.knot-search { display: flex; gap: 8px; }
.knot-search input, .knot-form input, .knot-form textarea, .knot-form select { width: 100%; border: 1px solid var(--knot-border-strong); padding: 11px 12px; background: var(--knot-control); color: var(--knot-text); }
.knot-search button { border: 1px solid var(--knot-primary); background: var(--knot-primary); color: var(--knot-on-primary); padding: 0 16px; font-weight: 800; }
.knot-product-load-zone { min-height: 1px; text-align: center; }
.knot-product-load-sentinel { width: 100%; height: 1px; pointer-events: none; }
.knot-product-load-status { margin: 0; color: var(--knot-muted); font-size: 13px; }
.knot-product-load-zone.is-loading .knot-product-load-status { padding: 18px 0; }
.knot-product-load-zone.is-complete { display: none; }
.knot-product-load-retry { margin: 12px auto 0; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); min-height: 38px; padding: 7px 14px; cursor: pointer; font-weight: 800; }

.knot-pdp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .75fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.knot-pdp-gallery-column, .knot-pdp-right { min-width: 0; min-height: 0; align-self: start; }
.knot-pdp-gallery { position: relative; width: 100%; }
.knot-pdp-gallery-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px; }
.knot-pdp-gallery.is-single .knot-pdp-gallery-track { grid-template-columns: minmax(0, 1fr); }
.knot-pdp-gallery-slide { min-width: 0; margin: 0; border: 0; padding: 0; display: block; overflow: hidden; background: var(--knot-surface-muted); color: inherit; cursor: zoom-in; }
.knot-pdp-gallery-slide img { width: 100%; height: auto; display: block; object-fit: contain; }
.knot-pdp-gallery-slide:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: -2px; }
.knot-pdp-gallery-arrow, .knot-pdp-gallery-dots { display: none; }
body.knot-product-gallery-fullscreen-open { overflow: hidden; }
.knot-product-gallery-fullscreen { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100vh; background: #fff; color: #111; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms cubic-bezier(.22,1,.36,1), visibility 0s linear 300ms; }
.knot-product-gallery-fullscreen[hidden] { display: none; }
.knot-product-gallery-fullscreen.is-opening, .knot-product-gallery-fullscreen.is-open, .knot-product-gallery-fullscreen.is-closing { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.knot-product-gallery-fullscreen.is-open { opacity: 1; }
.knot-product-gallery-fullscreen.is-closing { opacity: 0; transition-duration: 260ms; }
.knot-product-gallery-fullscreen__scroll { position: absolute; inset: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; transform: scale(.985) translateY(8px); transform-origin: center top; transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.knot-product-gallery-fullscreen.is-open .knot-product-gallery-fullscreen__scroll { transform: scale(1) translateY(0); }
.knot-product-gallery-fullscreen.is-closing .knot-product-gallery-fullscreen__scroll { transform: scale(.99) translateY(4px); transition-duration: 260ms; }
.knot-product-gallery-fullscreen__item { width: 100%; margin: 0; padding: 0; background: #fff; cursor: zoom-out; }
.knot-product-gallery-fullscreen__item img { width: 100%; height: auto; display: block; cursor: zoom-out; }
.knot-product-gallery-fullscreen__close { position: fixed; z-index: 2; top: 18px; right: 18px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #c8c8c8; background: rgba(255,255,255,.9); color: #111; cursor: pointer; }
.knot-product-gallery-fullscreen__close:hover, .knot-product-gallery-fullscreen__close:focus-visible { border-color: #111; background: #fff; }
.knot-product-gallery-fullscreen__icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) {
    .knot-product-gallery-fullscreen, .knot-product-gallery-fullscreen__scroll { transition: none; }
    .knot-product-gallery-fullscreen__scroll, .knot-product-gallery-fullscreen.is-closing .knot-product-gallery-fullscreen__scroll { transform: none; }
}
.knot-p-badge { font-size: 12px; color: var(--knot-muted); letter-spacing: .08em; margin-bottom: 10px; }
.knot-pdp-title { font-size: 30px; margin: 0 0 12px; }
.knot-pdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.knot-edit-product-btn { border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); min-height: 34px; padding: 7px 10px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.knot-edit-product-btn:hover, .knot-edit-product-btn:focus-visible { border-color: var(--knot-primary); }
.knot-pdp-price { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.knot-pdp-price s { margin-left: 8px; color: var(--knot-muted); font-size: .72em; font-weight: 400; opacity: .58; text-decoration-thickness: 1px; }
.knot-pdp-stock { color: var(--knot-muted); line-height: 1.7; }
.knot-pdp-info-scroll { max-height: none; overflow: visible; padding-right: 0; margin-top: 18px; }
.knot-pdp-desc { margin-top: 22px; color: var(--knot-muted); line-height: 1.55; }
.knot-pdp-info-scroll .knot-pdp-desc { margin-top: 0; }
.knot-desc-section { margin-top: 18px; }
.knot-desc-section h2 { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.knot-desc-section ul { margin: 0; padding-left: 22px; }
.knot-desc-section li { margin: 4px 0; }
.knot-size-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 16px; }
.knot-pdp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 16px; }
.knot-product-form { position: relative; }
.knot-select-size { width: 100%; min-height: 46px; margin-top: 16px; background: #111; color: #fff; border-color: #111; }
.knot-select-size[hidden], .knot-pdp-actions[hidden] { display: none; }
.knot-size-row.has-error { box-shadow: 0 0 0 2px var(--knot-danger); }
.knot-size-row:focus-visible { outline: 2px solid var(--knot-danger); outline-offset: 4px; }
.knot-size-toast { position: absolute; z-index: 4; left: 0; bottom: 54px; width: max-content; max-width: min(280px, 100%); padding: 10px 13px; border: 1px solid var(--knot-danger); background: var(--knot-surface-raised); color: var(--knot-text); font-size: 13px; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,.14); opacity: 0; transform: translateY(7px); transition: opacity 180ms var(--knot-ease), transform 180ms var(--knot-ease); pointer-events: none; }
.knot-size-toast.is-visible { opacity: 1; transform: translateY(0); }
.knot-actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.size-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 44px; padding: 0 8px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); font-weight: 800; cursor: pointer; }
.knot-pdp-actions .knot-btn { width: 100%; min-width: 0; min-height: 46px; height: 46px; padding-inline: 12px; }
.knot-pdp-actions .knot-add-to-cart { background: #fff; color: #111; border-color: #111; }
.knot-pdp-actions .knot-buy-now { background: #111; color: #fff; border-color: #111; }
.size-active { background: var(--knot-primary); color: var(--knot-on-primary); border-color: var(--knot-primary); }
.size-disabled { background: var(--knot-surface-disabled); color: var(--knot-muted); cursor: not-allowed; opacity: .62; }
.knot-pdp-qty { display: inline-grid; grid-template-columns: 38px 42px 38px; align-items: center; height: 36px; border: 1px solid var(--knot-border-strong); margin-top: 16px; background: var(--knot-control); }
.knot-pdp-qty input { width: 42px; border: 0; text-align: center; background: var(--knot-control); color: var(--knot-text); }
.knot-pdp-qty input::-webkit-outer-spin-button, .knot-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.knot-stepper-btn { height: 34px; border: 0; background: var(--knot-control); color: var(--knot-muted); cursor: pointer; font-size: 16px; }
.knot-size-chart-disclosure { max-width: 380px; margin-top: 26px; border-top: 1px solid var(--knot-border); border-bottom: 1px solid var(--knot-border); }
.knot-size-chart-disclosure summary { position: relative; list-style: none; padding: 13px 26px 13px 0; color: var(--knot-text); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.knot-size-chart-disclosure summary::-webkit-details-marker { display: none; }
.knot-size-chart-disclosure summary::after { content: "+"; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); color: var(--knot-muted); font-size: 18px; font-weight: 400; }
.knot-size-chart-disclosure[open] summary::after { content: "\2212"; }
.knot-size-chart-disclosure summary:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 3px; }
.knot-size-chart { max-width: 380px; padding-bottom: 12px; }
.knot-size-chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 3px 8px 9px; }
.knot-size-chart-heading strong { color: var(--knot-text); font-size: 13px; }
.knot-size-chart-heading span, .knot-size-chart > p { color: var(--knot-muted); font-size: 11px; }
.knot-size-chart > p { margin: 0 8px 9px; line-height: 1.5; }
.knot-size-chart table { width: 100%; border-collapse: collapse; border: 0; box-shadow: none; margin: 0; }
.knot-size-chart th, .knot-size-chart td { border: 0; border-bottom: 1px solid var(--knot-border); background: transparent; color: var(--knot-text); text-align: left; padding: 10px 8px; font-size: 14px; }
.knot-size-chart th { color: var(--knot-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.knot-size-chart tbody tr:last-child td { border-bottom: 0; }
.knot-product-customize-cta { max-width: 380px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 16px; }
.knot-product-customize-cta p { margin: 0; color: var(--knot-muted); font-size: 13px; }
.knot-product-customize-button { min-height: 38px; padding: 8px 17px; flex: 0 0 auto; }
.knot-inline-product-form { display: contents; }
.knot-inline-field { display: grid; gap: 6px; color: var(--knot-muted); font-size: 12px; font-weight: 700; margin: 10px 0; }
.knot-inline-field input, .knot-inline-field select, .knot-inline-field textarea, .knot-inline-size-row input, .knot-inline-image-row input { border: 1px dashed var(--knot-border-strong); padding: 9px 10px; background: var(--knot-control); color: var(--knot-text); width: 100%; }
.knot-inline-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.knot-inline-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knot-inline-edit-panel { border: 1px solid var(--knot-border); padding: 14px; margin-top: 14px; background: var(--knot-surface-raised); }
.knot-inline-edit-panel h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.knot-inline-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.knot-inline-size-list { display: grid; gap: 10px; }
.knot-inline-size-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; align-items: end; }
.knot-inline-size-row.is-disabled { opacity: .55; }
.knot-small-outline { border: 1px solid var(--knot-primary); background: var(--knot-control); color: var(--knot-text); min-height: 38px; padding: 7px 10px; cursor: pointer; font-weight: 800; }
.knot-inline-image-list { display: grid; gap: 10px; }
.knot-inline-image-row { display: grid; grid-template-columns: 62px auto 100px auto; gap: 10px; align-items: center; }
.knot-inline-image-row img { width: 62px; height: 62px; object-fit: cover; border: 1px solid var(--knot-border); }
.knot-inline-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.knot-inline-message { min-height: 22px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--knot-success); }
.knot-inline-message:not(:empty) { border: 1px solid var(--knot-border); padding: 9px 10px; }
.knot-related { width: 100%; padding-top: 0; margin-top: clamp(64px, 7vw, 112px); }
.knot-related-heading { width: min(1380px, calc(100% - 80px)); margin: 0 auto 16px; }
.knot-related-title { margin: 0; letter-spacing: .25em; font-size: 13px; }

.knot-table-wrap { overflow-x: auto; }
.knot-table { width: 100%; border-collapse: collapse; background: var(--knot-surface); color: var(--knot-text); }
.knot-table th, .knot-table td { border-bottom: 1px solid var(--knot-border); padding: 13px 10px; text-align: left; vertical-align: middle; }
.knot-clickable-row { cursor: pointer; }
.knot-clickable-row:hover td { filter: brightness(.96); }
.knot-table tr.knot-order-delivered td { background: #9dbca8; color: #173526; }
.knot-table tr.knot-order-cancelled td { background: #b99a9a; color: #3a1f1f; }
.knot-table tr.knot-order-date-row td { background: var(--knot-page); color: var(--knot-text); border-bottom: 1px solid var(--knot-border-strong); padding-top: 28px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.knot-line-product { display: flex; align-items: center; gap: 12px; }
.knot-line-product img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--knot-border); }
.knot-qty { display: inline-flex; align-items: center; gap: 10px; }
.knot-qty button { width: 30px; height: 30px; border: 1px solid var(--knot-primary); background: var(--knot-control); color: var(--knot-text); cursor: pointer; }
.knot-table-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.knot-admin-thumb { width: 46px; height: 46px; object-fit: cover; display: block; border: 1px solid var(--knot-border); background: var(--knot-surface-muted); }
.knot-status-check { width: 30px; height: 30px; accent-color: var(--knot-primary); cursor: pointer; }
.knot-status-check:disabled { cursor: not-allowed; opacity: .45; }

.knot-form { display: grid; gap: 16px; }
.knot-form label { display: grid; gap: 7px; font-weight: 800; font-size: 13px; }
.knot-form textarea { min-height: 120px; resize: vertical; }
.knot-auth-switch { margin: 18px 0 0; text-align: center; color: var(--knot-muted); }
.knot-auth-switch a { color: var(--knot-text); font-weight: 800; text-underline-offset: 4px; }
.knot-auth-recovery { margin: 14px 0 0; text-align: center; }
.knot-auth-recovery a { color: var(--knot-text); font-weight: 700; text-underline-offset: 4px; }
.knot-auth-copy { margin: 0 0 22px; color: var(--knot-muted); line-height: 1.6; }
.knot-google-auth { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 18px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); font-weight: 800; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease; }
.knot-google-auth:hover { background: var(--knot-surface-muted); border-color: var(--knot-text); }
.knot-google-auth:active { transform: translateY(1px); }
.knot-google-auth:focus-visible { outline: 2px solid var(--knot-text); outline-offset: 3px; }
.knot-google-auth__mark { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.knot-auth-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--knot-muted); font-size: 12px; text-align: center; }
.knot-auth-divider::before, .knot-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--knot-border); }
.knot-field-title { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.knot-size-admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.knot-size-editor { display: grid; gap: 12px; }
.knot-size-editor-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.knot-size-editor-head small { display: block; margin-top: 4px; color: var(--knot-muted); }
.knot-size-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.knot-size-editor-list { display: grid; gap: 8px; }
.knot-size-editor-row { display: grid; grid-template-columns: minmax(120px, 1fr) 130px auto; gap: 10px; align-items: end; }
.knot-size-editor-actions { display: flex; gap: 8px; align-items: center; min-height: 42px; }
.knot-icon-text { border: 0; background: transparent; color: inherit; padding: 6px; text-decoration: underline; cursor: pointer; }
.knot-narrow { width: min(520px, calc(100% - 32px)); margin-inline: auto; }

.knot-admin-login-page {
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: #111;
    font-family: Arial, sans-serif;
}
.knot-admin-login-shell {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 32px;
    padding: 32px 20px;
}
.knot-admin-login-brand img { display: block; width: auto; height: 42px; object-fit: contain; }
.knot-admin-login-panel { width: min(440px, 100%); }
.knot-admin-login-panel h1 { margin: 6px 0 28px; font-size: clamp(28px, 4vw, 38px); }
.knot-admin-login-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.knot-admin-login-panel .knot-form input { background: #fff; color: #111; border-color: #777; }
.knot-admin-login-panel .knot-btn { width: 100%; background: #111; color: #fff; border-color: #111; }
.knot-admin-login-panel .knot-auth-switch a { color: #111; }
.knot-check { display: flex !important; align-items: center; grid-template-columns: auto 1fr; gap: 10px; }
.knot-check input { width: auto; }
.knot-checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 34px; align-items: start; }
.knot-summary { border: 1px solid var(--knot-border); padding: 18px; background: var(--knot-surface); }
.knot-summary img { width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--knot-border); }
.knot-onepage-checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); min-height: calc(100vh - 68px); border-top: 1px solid var(--knot-border); }
.knot-checkout-left { padding: 30px 20px 52px max(20px, calc((100vw - 1180px) / 2)); }
.knot-checkout-right { background: var(--knot-surface-muted); border-left: 1px solid var(--knot-border); padding: 28px max(20px, calc((100vw - 1180px) / 2)) 52px 28px; }
.knot-checkout-form { width: min(624px, 100%); margin-left: 0; display: grid; gap: 26px; font-size: 1.2rem; }
.knot-express { text-align: center; }
.knot-express-label { color: var(--knot-muted); font-size: 11px; margin-bottom: 8px; }
.knot-paypal-btn { width: 260px; max-width: 100%; height: 42px; border: 0; border-radius: 8px; background: #ffc439; color: #003087; font-weight: 900; font-style: italic; }
.knot-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--knot-muted); font-size: 11px; }
.knot-divider::before, .knot-divider::after { content: ""; height: 1px; background: var(--knot-border); }
.knot-checkout-section { display: grid; gap: 12px; }
.knot-checkout-section h2 { font-size: 22px; margin: 0; }
.knot-checkout-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.knot-checkout-title-row a { font-size: 12px; font-weight: 700; }
.knot-checkout-form label { display: grid; gap: 5px; font-size: 13px; color: var(--knot-muted); }
.knot-checkout-form input, .knot-checkout-form select, .knot-checkout-form textarea { width: 100%; min-height: 50px; border: 1px solid var(--knot-border-strong); border-radius: 8px; padding: 11px 13px; background: var(--knot-control); color: var(--knot-text); font-size: 15px; }
.knot-checkout-form textarea { min-height: 104px; resize: vertical; }
.knot-checkout-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knot-checkout-address-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr); gap: 10px; }
.knot-muted-box { background: var(--knot-surface-disabled); border-radius: 8px; padding: 16px; color: var(--knot-muted); font-size: 12px; text-align: center; }
.knot-checkout-note { margin: -4px 0 2px; color: var(--knot-muted); font-size: 14px; }
.knot-payment-option { grid-template-columns: auto 1fr; display: grid !important; align-items: center; gap: 12px !important; min-height: 54px; border: 1px solid var(--knot-border); padding: 14px; background: var(--knot-surface); color: var(--knot-text) !important; font-size: 16px !important; }
.knot-payment-option input { width: auto; min-height: auto; }
.knot-payment-card { grid-template-columns: 20px 1fr; cursor: pointer; border-radius: 6px; }
.knot-payment-card:has(input:checked) { border-color: var(--knot-text); background: var(--knot-surface-raised); }
.knot-payment-card strong, .knot-payment-card small { display: block; }
.knot-payment-card strong { color: var(--knot-text); font-size: 15px; }
.knot-payment-card small { margin-top: 4px; color: var(--knot-muted); font-size: 12px; font-weight: 400; }
.knot-online-payment { display: grid; gap: 14px; border: 1px solid var(--knot-border); padding: 16px; background: var(--knot-surface-muted); }
.knot-online-payment[hidden] { display: none; }
.knot-online-payment p { margin: 6px 0 0; color: var(--knot-muted); font-size: 12px; line-height: 1.5; }
.knot-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.knot-provider-option { display: flex !important; grid-template-columns: none !important; align-items: center; justify-content: center; gap: 8px !important; min-height: 44px; border: 1px solid var(--knot-border-strong); padding: 8px 10px; background: var(--knot-control); color: var(--knot-text) !important; cursor: pointer; font-weight: 800 !important; }
.knot-provider-option:has(input:checked) { border-color: var(--knot-text); background: var(--knot-primary); color: var(--knot-on-primary) !important; }
.knot-provider-option input { width: auto !important; min-height: auto !important; }
.knot-online-amount { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--knot-border); padding-top: 12px; font-size: 13px; }
.knot-disabled-payments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knot-payment-option.is-disabled { opacity: .55; background: var(--knot-surface-disabled); cursor: not-allowed; user-select: none; }
.knot-radio-dot { width: 13px; height: 13px; border: 1px solid var(--knot-border-strong); border-radius: 999px; display: inline-block; }
.knot-pay-now { width: 100%; min-height: 58px; border: 0; border-radius: 10px; background: var(--knot-primary); color: var(--knot-on-primary); font-weight: 900; cursor: pointer; font-size: 17px; }
.knot-pay-now-mobile { display: none; }
.knot-summary-line { display: grid; grid-template-columns: 77px 1fr auto; gap: 14px; align-items: start; margin-bottom: 22px; }
.knot-summary-thumb { position: relative; width: 77px; height: 77px; border: 1px solid var(--knot-border); border-radius: 10px; background: var(--knot-surface-raised); }
.knot-summary-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.knot-summary-thumb span { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 999px; background: var(--knot-primary); color: var(--knot-on-primary); font-size: 13px; display: grid; place-items: center; }
.knot-summary-name { font-size: 14px; text-transform: uppercase; line-height: 1.35; }
.knot-summary-variant { margin-top: 5px; color: var(--knot-muted); font-size: 14px; }
.knot-summary-line strong { font-size: 14px; white-space: nowrap; }
.knot-discount-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0 24px; }
.knot-discount-row input { min-height: 50px; border: 1px solid var(--knot-border); border-radius: 10px; padding: 11px 13px; background: var(--knot-control); color: var(--knot-text); font-size: 15px; }
.knot-discount-row button { border: 0; border-radius: 10px; padding: 0 19px; color: var(--knot-text); background: var(--knot-surface-disabled); font-size: 15px; cursor: pointer; }
.knot-discount-row button:disabled { cursor: wait; opacity: .62; }
.knot-coupon-message { min-height: 20px; margin: -16px 0 18px; color: var(--knot-muted); font-size: 13px; font-weight: 700; }
.knot-coupon-message.is-success, .knot-discount-total { color: var(--knot-success); }
.knot-coupon-message.is-error { color: var(--knot-danger); }
.knot-order-detail-page { width: min(1180px, calc(100% - 40px)); padding-block: clamp(36px, 6vw, 76px); }
.knot-order-detail-page h1, .knot-order-detail-page h2, .knot-order-detail-page h3 { letter-spacing: 0; }
.knot-order-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--knot-border); }
.knot-order-header h1 { margin: 2px 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.knot-order-eyebrow { margin: 0 0 8px; color: var(--knot-muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.knot-order-date { margin: 0; color: var(--knot-muted); font-size: 14px; }
.knot-order-status-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 20px; border: 1px solid var(--knot-text); border-radius: 999px; background: var(--knot-primary); color: var(--knot-on-primary); font-size: 13px; font-weight: 800; }
.knot-order-status-badge.is-cancelled { border-color: var(--knot-danger); background: transparent; color: var(--knot-danger); }
.knot-order-header-status { width: min(100%, 370px); display: grid; justify-items: end; gap: 14px; }
.knot-order-copy-button { min-height: 38px; border: 1px solid var(--knot-border-strong); padding: 8px 14px; background: var(--knot-control); color: var(--knot-text); cursor: pointer; font: inherit; font-weight: 600; }
.knot-order-copy-button:hover { background: var(--knot-surface-muted); }
.knot-order-copy-button:focus-visible { outline: 2px solid var(--knot-text); outline-offset: 3px; }
.knot-order-copy-status { min-height: 1em; color: var(--knot-muted); font-size: 12px; }
.knot-order-list-head { align-items: end; }
.knot-order-search { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.knot-order-search input { width: min(320px, 65vw); min-height: 42px; border: 1px solid var(--knot-border-strong); padding: 9px 12px; background: var(--knot-control); color: var(--knot-text); }
.knot-order-search button, .knot-order-search a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--knot-primary); padding: 9px 15px; background: var(--knot-primary); color: var(--knot-on-primary); text-decoration: none; cursor: pointer; }
.knot-order-search a { background: var(--knot-control); color: var(--knot-text); }
.knot-table-empty { padding-block: 36px !important; text-align: center; color: var(--knot-muted); }
.knot-order-admin-status { width: 100%; display: grid; gap: 7px; }
.knot-order-admin-status > label { color: var(--knot-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.knot-order-admin-status-fields { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 8px; }
.knot-order-admin-status select, .knot-order-admin-status button { min-height: 42px; border: 1px solid var(--knot-border-strong); border-radius: 0; font: inherit; }
.knot-order-admin-status select { width: 100%; padding: 0 36px 0 12px; background: var(--knot-control); color: var(--knot-text); }
.knot-order-admin-status button { padding: 0 16px; background: var(--knot-primary); color: var(--knot-on-primary); cursor: pointer; font-size: 12px; font-weight: 800; white-space: nowrap; }
.knot-order-admin-status select:focus-visible, .knot-order-admin-status button:focus-visible { outline: 2px solid var(--knot-text); outline-offset: 2px; }
.knot-order-admin-status button:hover { opacity: .82; }
.knot-order-progress, .knot-order-items { padding-top: clamp(34px, 5vw, 58px); }
.knot-order-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.knot-order-section-heading h2, .knot-order-info-card h2, .knot-order-summary-card h2 { margin: 0; font-size: 20px; }
.knot-order-section-heading p { margin: 0; color: var(--knot-muted); font-size: 13px; }
.knot-order-timeline { --timeline-count: 5; position: relative; z-index: 0; display: grid; grid-template-columns: repeat(var(--timeline-count), minmax(0, 1fr)); margin: 0; padding: 18px 0 0; list-style: none; }
.knot-order-timeline:has(> li:nth-child(2):last-child) { --timeline-count: 2; }
.knot-order-timeline::before { content: ""; position: absolute; z-index: -1; top: 40px; left: 10%; right: 10%; height: 2px; background: var(--knot-border-strong); }
.knot-order-timeline li { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; color: var(--knot-muted); }
.knot-order-timeline-marker { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--knot-border-strong); border-radius: 50%; background: var(--knot-page); color: var(--knot-muted); font-size: 15px; font-weight: 900; }
.knot-order-timeline li.is-reached { color: var(--knot-text); }
.knot-order-timeline li.is-reached .knot-order-timeline-marker { border-color: var(--knot-primary); background: var(--knot-primary); color: var(--knot-on-primary); }
.knot-order-timeline li.is-current .knot-order-timeline-marker { outline: 3px solid var(--knot-border); outline-offset: 3px; }
.knot-order-timeline strong, .knot-order-timeline time { display: block; }
.knot-order-timeline strong { font-size: 13px; line-height: 1.25; }
.knot-order-timeline time { margin-top: 4px; color: var(--knot-muted); font-size: 11px; }
.knot-order-cancelled-state { min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--knot-danger); color: var(--knot-danger); }
.knot-order-cancelled-state span { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 25px; }
.knot-order-item-list { display: grid; gap: 12px; }
.knot-order-item-card { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(210px, auto); gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--knot-border); background: var(--knot-surface); }
.knot-order-item-media, .knot-order-item-media a { width: 104px; height: 104px; display: block; }
.knot-order-item-media img { width: 100%; height: 100%; display: block; border: 1px solid var(--knot-border); background: var(--knot-surface-muted); object-fit: contain; }
.knot-order-item-copy { min-width: 0; }
.knot-order-item-copy h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.3; }
.knot-order-item-copy h3 a { color: inherit; text-underline-offset: 4px; }
.knot-order-item-copy p { margin: 10px 0 0; color: var(--knot-muted); font-size: 13px; }
.knot-order-item-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--knot-muted); font-size: 12px; }
.knot-order-item-meta b { color: var(--knot-text); font-weight: 700; }
.knot-order-item-pricing { min-width: 210px; display: grid; gap: 7px; margin: 0; }
.knot-order-item-pricing div { display: flex; justify-content: space-between; gap: 18px; }
.knot-order-item-pricing dt { color: var(--knot-muted); font-size: 12px; }
.knot-order-item-pricing dd { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.knot-order-item-pricing .knot-order-item-line-total { padding-top: 8px; border-top: 1px solid var(--knot-border); }
.knot-order-information-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(38px, 5vw, 62px); }
.knot-order-info-card, .knot-order-summary-card { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--knot-border); background: var(--knot-surface-muted); }
.knot-order-info-card h2, .knot-order-summary-card h2 { margin-bottom: 24px; }
.knot-order-info-card dl, .knot-order-summary-card dl { display: grid; gap: 16px; margin: 0; }
.knot-order-info-card dl div { display: grid; gap: 5px; }
.knot-order-info-card dt { color: var(--knot-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.knot-order-info-card dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.knot-order-summary-card dl div { display: flex; justify-content: space-between; gap: 22px; }
.knot-order-summary-card dt { color: var(--knot-muted); }
.knot-order-summary-card dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.knot-order-summary-card .knot-order-summary-total { margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--knot-border-strong); color: var(--knot-text); font-size: 19px; font-weight: 800; }
.knot-order-summary-card .knot-order-summary-total dt { color: inherit; }
.knot-order-summary-card .knot-order-summary-due { padding-top: 14px; border-top: 1px solid var(--knot-border); font-size: 16px; }
.knot-order-transaction-row dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.knot-order-transaction-row dd span { user-select: all; }
.knot-order-transaction-row button { min-height: 28px; padding: 4px 8px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); font: inherit; font-size: 11px; cursor: pointer; }
.knot-order-summary-card .knot-order-payment-actions { margin-top: 22px; }
.knot-order-totals { width: min(420px, 100%); margin: 24px 0 0 auto; display: grid; gap: 10px; }
.knot-order-totals span { display: flex; justify-content: space-between; gap: 24px; }
.knot-order-totals span:last-child { padding-top: 12px; border-top: 1px solid var(--knot-border); font-size: 18px; }
.knot-order-instructions { margin-top: 22px; border-left: 3px solid var(--knot-text); padding: 12px 16px; background: var(--knot-surface-muted); }
.knot-order-instructions p { margin: 6px 0 0; white-space: pre-line; color: var(--knot-muted); }
.knot-payment-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 38px; align-items: start; margin-top: 48px; border-top: 1px solid var(--knot-border); padding-top: 28px; }
.knot-payment-review h2 { margin-top: 0; }
.knot-detail-list { display: grid; gap: 0; margin: 0; }
.knot-detail-list div { display: flex; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--knot-border); padding: 10px 0; }
.knot-detail-list dt { color: var(--knot-muted); }
.knot-detail-list dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.knot-preline { white-space: pre-line; line-height: 1.65; color: var(--knot-muted); }

.knot-custom-order-intro { max-width: 760px; margin-bottom: 34px; }
.knot-custom-order-intro h1 { margin-bottom: 12px; }
.knot-custom-order-intro > p:last-child { color: var(--knot-muted); line-height: 1.65; }
.knot-eyebrow { margin: 0 0 8px; color: var(--knot-muted); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.knot-custom-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.knot-custom-order-form { display: grid; gap: 28px; }
.knot-custom-order-form fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--knot-border); padding: 24px 0 0; }
.knot-custom-order-form legend { padding: 0 18px 0 0; color: var(--knot-text); font-size: 18px; font-weight: 900; }
.knot-custom-order-form small { color: var(--knot-muted); font-weight: 400; }
.knot-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knot-custom-order-summary { position: sticky; top: calc(var(--knot-nav-height) + 28px); display: grid; gap: 12px; border: 1px solid var(--knot-border); padding: 24px; background: var(--knot-surface-muted); }
.knot-custom-order-summary p, .knot-custom-order-summary span, .knot-custom-order-summary small { margin: 0; color: var(--knot-muted); }
.knot-custom-order-summary > strong { font-size: 25px; }
.knot-custom-order-summary small { border-top: 1px solid var(--knot-border); padding-top: 14px; line-height: 1.55; }
.knot-payment-guidance { display: grid; gap: 5px; border-left: 3px solid var(--knot-text); padding: 12px 15px; background: var(--knot-surface-muted); }
.knot-payment-guidance span { color: var(--knot-muted); font-size: 13px; }
.knot-color-field { display: grid; gap: 12px; }
.knot-color-field-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--knot-text); font-size: 13px; font-weight: 800; }
.knot-color-chart-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--knot-border-strong); padding: 8px 11px; background: var(--knot-control); color: var(--knot-text); cursor: pointer; font-weight: 800; }
.knot-color-chart-button:hover, .knot-color-chart-button:focus-visible { border-color: var(--knot-text); }
.knot-color-chart-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
.knot-color-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.knot-color-option { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; min-height: 46px; border: 1px solid var(--knot-border); padding: 8px 10px; background: var(--knot-control); color: var(--knot-text) !important; cursor: pointer; }
.knot-color-option:has(input:checked) { border-color: var(--knot-text); box-shadow: inset 0 0 0 1px var(--knot-text); }
.knot-color-option input { width: auto; }
.knot-color-swatch, .knot-order-color span, .knot-color-admin-swatch { flex: 0 0 auto; width: 24px; height: 24px; display: inline-block; border: 1px solid var(--knot-border-strong); background: var(--swatch-color); }
.knot-order-color { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
body.knot-color-chart-open { overflow: hidden; }
.knot-color-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; }
.knot-color-modal[hidden] { display: none; }
.knot-color-modal-backdrop { position: absolute; inset: 0; background: var(--drawer-overlay); }
.knot-color-modal-panel { position: relative; z-index: 1; width: min(820px, 94vw); max-height: 88vh; overflow: auto; border: 1px solid var(--drawer-border); padding: 24px; background: var(--drawer-bg-solid); color: var(--drawer-text); }
.knot-color-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--knot-border); padding-bottom: 16px; }
.knot-color-modal-head h2 { margin: 0; }
.knot-color-chart-image-wrap { padding-top: 22px; }
.knot-color-chart-image { width: 100%; height: auto; max-height: calc(88vh - 130px); display: block; object-fit: contain; }
.knot-color-chart-admin { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 26px; align-items: start; margin-bottom: 30px; border: 1px solid var(--knot-border); padding: 20px; background: var(--knot-surface); }
.knot-color-chart-admin-preview { border: 1px solid var(--knot-border); background: var(--knot-surface-muted); }
.knot-color-chart-admin-preview img { width: 100%; max-height: 360px; display: block; object-fit: contain; }
.knot-color-chart-admin-controls { display: grid; gap: 18px; }
.knot-color-chart-admin-controls h2 { margin: 4px 0 8px; }
.knot-color-chart-admin-controls p { color: var(--knot-muted); }
.knot-color-chart-admin-controls .knot-form { display: grid; gap: 12px; }
.knot-color-chart-admin-controls .knot-form label { display: grid; gap: 7px; color: var(--knot-text); font-weight: 800; }
.knot-color-chart-admin-controls input[type="file"] { min-height: 46px; border: 1px solid var(--knot-border-strong); padding: 9px; background: var(--knot-control); color: var(--knot-text); }
.knot-menu-drawer .knot-drawer-close,
.knot-menu-drawer .knot-drawer-close-icon,
.knot-menu-drawer .knot-drawer-close-icon img { touch-action: manipulation; }
.knot-menu-drawer .knot-drawer-close-icon,
.knot-menu-drawer .knot-drawer-close-icon img { pointer-events: none; }
@media (max-width: 760px) {
  .knot-color-chart-admin { grid-template-columns: 1fr; padding: 14px; }
}
.knot-design-links { display: flex; gap: 10px; flex-wrap: wrap; }
.knot-custom-design-preview { width: min(100%, 280px); display: grid; gap: 8px; margin: 18px 0; color: var(--knot-text); font-weight: 800; text-decoration: none; }
.knot-custom-design-preview img { width: 100%; aspect-ratio: 1; display: block; border: 1px solid var(--knot-border); background: var(--knot-surface-muted); object-fit: contain; }
.knot-custom-design-preview:hover span { text-decoration: underline; }
.knot-color-create-form { display: grid; grid-template-columns: minmax(180px, 1fr) 120px 110px auto auto; gap: 12px; align-items: end; border: 1px solid var(--knot-border); padding: 18px; background: var(--knot-surface-muted); }
.knot-color-admin-list { display: grid; gap: 10px; margin-top: 24px; }
.knot-color-admin-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--knot-border); padding: 10px 0; }
.knot-color-admin-form { display: grid; grid-template-columns: 36px minmax(150px, 1fr) 110px 100px auto auto; gap: 12px; align-items: end; }
.knot-color-admin-form label { display: grid; gap: 5px; color: var(--knot-muted); font-size: 12px; font-weight: 700; }
.knot-color-admin-form input { width: 100%; min-height: 38px; border: 1px solid var(--knot-border-strong); padding: 7px 9px; background: var(--knot-control); color: var(--knot-text); }
.knot-color-admin-swatch { align-self: center; width: 30px; height: 30px; }
.knot-order-confirmation { max-width: 680px; padding-block: 72px; }
.knot-order-confirmation > p { line-height: 1.65; color: var(--knot-muted); }
.knot-confirmation-summary { display: grid; gap: 10px; margin: 28px auto; border-block: 1px solid var(--knot-border); padding: 18px 0; text-align: left; }
.knot-confirmation-summary span { display: flex; justify-content: space-between; gap: 20px; }
.knot-account-custom-orders { padding-top: 0; }
.knot-custom-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(34px, 5vw, 72px); align-items: start; }
.knot-custom-admin-details { display: grid; gap: 30px; }
.knot-custom-admin-details section { border-top: 1px solid var(--knot-border); padding-top: 18px; }
.knot-custom-admin-details h2, .knot-custom-admin-details h3 { margin-top: 0; }
.knot-custom-admin-details h3 { margin: 22px 0 6px; font-size: 14px; }
.knot-custom-admin-form { position: sticky; top: calc(var(--knot-nav-height) + 24px); border: 1px solid var(--knot-border); padding: 22px; background: var(--knot-surface-muted); }
.knot-custom-admin-form h2 { margin-top: 0; }
.knot-payment-review-summary { display: grid; gap: 8px; border-block: 1px solid var(--knot-border); padding: 14px 0; }
.knot-payment-review-summary span { display: flex; justify-content: space-between; gap: 14px; }
.knot-total-row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; margin-top: 12px; }
.knot-total-final { margin-top: 22px; font-size: 22px; font-weight: 900; }
.knot-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 32px; }
.knot-stats div { border: 1px solid var(--knot-border); background: var(--knot-surface); padding: 16px; }
.knot-stats strong { display: block; font-size: 26px; }
.knot-stats span { font-size: 12px; color: var(--knot-muted); text-transform: uppercase; font-weight: 800; }
.knot-banner-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.knot-banner-admin-card { border: 1px solid var(--knot-border); background: var(--knot-surface); }
.knot-banner-admin-preview { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--knot-border); background: var(--knot-surface-muted); display: grid; place-items: center; }
.knot-banner-admin-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.knot-banner-admin-preview span { color: var(--knot-muted); font-weight: 700; }
.knot-banner-admin-content { display: grid; gap: 18px; padding: 18px; }
.knot-banner-admin-content h2 { margin: 0 0 5px; font-size: 18px; }
.knot-banner-admin-content p { margin: 0; color: var(--knot-muted); font-size: 13px; }

.knot-store-sale-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: clamp(36px, 6vw, 84px); }
.knot-store-sale-form { min-width: 0; max-width: 720px; display: grid; gap: 22px; }
.knot-store-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.knot-store-field > label, .knot-store-field > legend { display: block; margin-bottom: 8px; color: var(--knot-text); font-size: 13px; font-weight: 800; }
.knot-store-product-picker { position: relative; z-index: 4; }
.knot-store-product-picker > input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); }
.knot-store-search-results { position: absolute; inset: calc(100% + 6px) 0 auto; max-height: 320px; overflow-y: auto; border: 1px solid var(--knot-border-strong); background: var(--knot-surface-raised); box-shadow: 0 14px 32px rgba(0,0,0,.18); }
.knot-store-search-option { width: 100%; min-height: 62px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--knot-border); background: var(--knot-surface-raised); color: var(--knot-text); text-align: left; cursor: pointer; }
.knot-store-search-option:last-child { border-bottom: 0; }
.knot-store-search-option:hover, .knot-store-search-option.is-active { background: var(--knot-surface-muted); transform: none; }
.knot-store-search-option img { width: 48px; height: 48px; object-fit: cover; background: var(--knot-surface-muted); }
.knot-store-search-option span { min-width: 0; display: grid; gap: 4px; }
.knot-store-search-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knot-store-search-option small { color: var(--knot-muted); }
.knot-store-selected-product { min-height: 76px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding-block: 10px; border-block: 1px solid var(--knot-border); }
.knot-store-selected-product img { width: 64px; height: 64px; object-fit: cover; background: var(--knot-surface-muted); }
.knot-store-selected-product div { display: grid; gap: 6px; }
.knot-store-selected-product span { color: var(--knot-muted); font-size: 13px; }
.knot-store-size-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.knot-store-size-button { min-width: 0; height: 44px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); cursor: pointer; font-weight: 800; }
.knot-store-size-button.is-selected { border-color: var(--knot-primary); background: var(--knot-primary); color: var(--knot-on-primary); }
.knot-store-size-button:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 2px; }
.knot-store-size-field:disabled { opacity: .56; }
.knot-store-quantity { width: 132px; height: 42px; display: grid; grid-template-columns: 40px 52px 40px; border: 1px solid var(--knot-border-strong); background: var(--knot-control); }
.knot-store-quantity button, .knot-store-quantity input { min-width: 0; border: 0; background: transparent; color: var(--knot-text); text-align: center; }
.knot-store-quantity button { cursor: pointer; color: var(--knot-muted); }
.knot-store-quantity input { width: 52px; font-weight: 800; }
.knot-store-field > small { display: block; margin-top: 7px; color: var(--knot-muted); }
.knot-store-payment-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.knot-store-payment-button { min-width: 0; }
.knot-store-payment-button span { height: 44px; display: grid; place-items: center; border: 1px solid var(--knot-border-strong); background: var(--knot-control); color: var(--knot-text); cursor: pointer; font-weight: 800; }
.knot-store-payment-button:has(input:checked) span { border-color: var(--knot-primary); background: var(--knot-primary); color: var(--knot-on-primary); }
.knot-store-payment-button:has(input:focus-visible) span { outline: 2px solid var(--knot-focus); outline-offset: 2px; }
.knot-store-sale-total { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--knot-border); font-size: 18px; }
.knot-store-sale-total strong { font-size: 24px; }
.knot-store-complete-button { width: 100%; min-height: 50px; }
.knot-store-complete-button:disabled { opacity: .46; cursor: not-allowed; }
.knot-store-daily-report { position: sticky; top: calc(var(--knot-nav-height) + 26px); padding-left: 24px; border-left: 1px solid var(--knot-border); }
.knot-store-daily-report h2 { margin: 0 0 22px; font-size: 22px; }
.knot-store-daily-report dl { margin: 0; }
.knot-store-daily-report dl div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--knot-border); }
.knot-store-daily-report dt { color: var(--knot-muted); }
.knot-store-daily-report dd { margin: 0; font-weight: 800; }
.knot-store-daily-report .knot-store-report-total { margin-top: 10px; border-bottom: 0; color: var(--knot-text); font-size: 16px; }
.knot-store-daily-report .knot-store-report-total dt { color: var(--knot-text); font-weight: 800; }
.knot-store-recent-sales { margin-top: 72px; }
.knot-store-recent-sales h2 { margin-bottom: 18px; }

input::placeholder, textarea::placeholder { color: var(--knot-muted); opacity: .82; }
input, textarea, select { caret-color: var(--knot-text); }

@media (max-width: 920px) {
    .knot-nav-links { gap: 12px; }
    .knot-cart-drawer { min-width: 0; }
    .knot-product-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .knot-pdp-grid, .knot-checkout-grid, .knot-onepage-checkout { grid-template-columns: 1fr; }
    .knot-pdp-gallery { width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; background: var(--knot-surface-muted); }
    .knot-pdp-gallery-track, .knot-pdp-gallery.is-single .knot-pdp-gallery-track { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; cursor: grab; }
    .knot-pdp-gallery-track::-webkit-scrollbar { display: none; }
    .knot-pdp-gallery-slide { flex: 0 0 100%; min-width: 100%; aspect-ratio: 1; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; cursor: grab; }
    .knot-pdp-gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
    .knot-pdp-gallery-dots { position: absolute; z-index: 2; right: 0; bottom: 14px; left: 0; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
    .knot-pdp-gallery-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: #c8c8c8; box-shadow: 0 0 0 1px rgba(255,255,255,.55); cursor: pointer; pointer-events: auto; }
    .knot-pdp-gallery-dots button.is-active { background: #111; }
    .knot-pdp-gallery-dots button:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 3px; }
    .knot-custom-order-layout, .knot-custom-admin-grid, .knot-payment-review { grid-template-columns: 1fr; }
    .knot-custom-order-summary, .knot-custom-admin-form { position: static; }
    .knot-color-create-form { grid-template-columns: 1fr 1fr; }
    .knot-color-admin-row { grid-template-columns: 1fr; }
    .knot-color-admin-form { grid-template-columns: 36px 1fr 110px; }
    .knot-checkout-left, .knot-checkout-right { padding: 28px 20px; }
    .knot-checkout-form { margin-left: 0; width: 100%; }
    .knot-checkout-right { border-left: 0; border-top: 1px solid var(--knot-border); }
    .knot-pay-now-desktop { display: none; }
    .knot-pay-now-mobile { display: block; width: calc(100% - 40px); margin: 0 20px 28px; }
    .knot-stats { grid-template-columns: repeat(2, 1fr); }
    .knot-banner-admin-grid { grid-template-columns: 1fr; }
    .knot-page-head { align-items: flex-start; flex-direction: column; }
    .knot-size-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .knot-store-sale-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
    .knot-footer-inner { padding: 52px 32px 26px; }
    .knot-footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 44px; }
    .knot-footer-contact { grid-column: span 2; }
    .knot-order-information-grid { grid-template-columns: 1fr; }
    .knot-order-item-card { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
    .knot-order-item-media, .knot-order-item-media a { width: 88px; height: 88px; }
    .knot-order-item-pricing { grid-column: 1 / -1; min-width: 0; padding-top: 14px; border-top: 1px solid var(--knot-border); }
}

@media (max-width: 576px) {
    :root { --knot-nav-height: 50px; }
    .knot-nav { height: var(--knot-nav-height); padding-block: 0; align-items: center; }
    .knot-logo { width: 84px; height: auto; }
    .knot-nav-links { --nav-utility-gap: 8px; flex-wrap: nowrap; justify-content: flex-end; font-size: 12px; }
    .knot-nav-links .knot-nav-icon-button { width: 42px; height: 42px; flex-basis: 42px; }
    .knot-nav-icon { width: 20px; height: 20px; }
    .knot-account-panel { right: -4px; }
    .knot-floating-categories { padding-inline: 10px; }
    .knot-floating-category-shell { width: 100%; padding: 5px 7px; border-radius: 18px; }
    .knot-category-row.knot-floating-category-row { gap: 6px; min-height: 32px; }
    .knot-floating-category-row .knot-pill { height: 32px; min-height: 32px; padding: 0 11px; font-size: 11px; }
    :root { --store-drawer-padding: 20px; }
    .knot-cart-drawer { min-width: 0; }
    .knot-cart-drawer-head { padding: 22px var(--store-drawer-padding) 14px; }
    .knot-cart-items { padding: 0 var(--store-drawer-padding); }
    .knot-cart-row { padding-block: 18px; }
    .knot-cart-line-meta { padding-left: 0; }
    .knot-cart-bottom { padding: 16px var(--store-drawer-padding) 22px; }
    .knot-cart-subtotal { justify-content: space-between; gap: 16px; }
    .knot-cart-actions { grid-template-columns: 1fr; }
    .knot-cart-primary, .knot-cart-secondary, .knot-cart-empty button { min-height: 52px; font-size: 18px; }
    .knot-cart-empty button { min-height: 46px; font-size: 14px; }
    .knot-pdp-grid > * { min-width: 0; }
    .knot-size-chart-disclosure, .knot-size-chart { max-width: 100%; }
    .knot-size-chart { overflow-x: auto; }
    .knot-product-img { height: 100%; padding: 10px; }
    .knot-product-bottom { flex-direction: column; }
    .knot-tagline-text { letter-spacing: .12em; }
    .knot-checkout-two { grid-template-columns: 1fr; }
    .knot-checkout-address-row { grid-template-columns: 1fr; }
    .knot-form-two, .knot-provider-grid { grid-template-columns: 1fr; }
    .knot-color-options, .knot-color-chart-grid, .knot-color-create-form, .knot-color-admin-form { grid-template-columns: 1fr; }
    .knot-color-field-head { align-items: flex-start; flex-direction: column; }
    .knot-color-modal { padding: 10px; }
    .knot-color-modal-panel { width: 100%; max-height: 94vh; padding: 18px; }
    .knot-summary-line { grid-template-columns: 56px 1fr; }
    .knot-summary-line strong { grid-column: 2; }
    .knot-pdp-title-row, .knot-inline-actions { flex-direction: column; align-items: stretch; }
    .knot-inline-edit-grid, .knot-inline-size-row, .knot-inline-image-row { grid-template-columns: 1fr; }
    .knot-store-sale-layout { grid-template-columns: 1fr; }
    .knot-store-sale-form { max-width: none; }
    .knot-store-payment-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .knot-store-size-buttons { gap: 6px; }
    .knot-store-size-button { padding-inline: 4px; font-size: 13px; }
    .knot-store-daily-report { position: static; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--knot-border); }
    .knot-store-recent-sales { margin-top: 52px; }
    .knot-tagline { display: none; }
    .knot-footer-desktop { display: none; }
    .knot-footer-mobile { display: block; width: 100%; text-align: center; }
    .knot-footer-mobile-brand { padding: clamp(18px, 6vw, 26px) 12px clamp(12px, 4vw, 18px); background: #050505; color: #f5f5f5; }
    .knot-footer-mobile-brand img { display: block; width: min(48%, 180px); height: auto; aspect-ratio: 1501 / 319; object-fit: contain; margin: 0 auto clamp(8px, 3vw, 13px); }
    .knot-footer-mobile-brand p { max-width: 340px; margin: 0 auto clamp(4px, 1.6vw, 8px); color: #f1f1f1; font-size: clamp(5.5px, 2.3vw, 9px); line-height: 1.25; }
    .knot-footer-mobile-brand strong { display: block; margin-top: clamp(7px, 2.5vw, 11px); color: #f5f5f5; font-size: clamp(6px, 2.3vw, 9px); font-weight: 500; letter-spacing: .02em; }
    .knot-footer-mobile-policies { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: clamp(10px, 3vw, 13px) 8px; row-gap: clamp(8px, 2.7vw, 12px); background: #fff; }
    .knot-footer-mobile-policies a { grid-column: span 2; min-width: 0; color: #111; font-size: clamp(5.5px, 2.3vw, 9px); font-weight: 400; line-height: 1.15; }
    .knot-footer-mobile-policies a:nth-child(4) { grid-column: 2 / span 2; }
    .knot-footer-mobile-policies a:hover, .knot-footer-mobile-policies a:focus-visible { color: #111; transform: none; text-decoration: underline; }
    .knot-footer-mobile-policies a:focus-visible { outline: 1px solid #111; outline-offset: 3px; }
    .knot-footer-mobile-contact { padding: clamp(10px, 3.5vw, 14px) 12px clamp(8px, 3vw, 12px); background: #050505; color: #f5f5f5; }
    .knot-footer-mobile-contact h2 { margin: 0 0 clamp(4px, 1.8vw, 7px); color: #f5f5f5; font-size: clamp(8px, 3vw, 12px); line-height: 1.1; letter-spacing: 0; text-transform: none; }
    .knot-footer-mobile-contact address { max-width: 330px; margin: 0 auto; display: grid; justify-items: center; gap: 2px; font-style: normal; }
    .knot-footer-mobile-contact address a { display: block; color: #f1f1f1; font-size: clamp(6px, 2.3vw, 9px); line-height: 1.2; }
    .knot-footer-mobile-contact address a:hover, .knot-footer-mobile-contact address a:focus-visible { color: #fff; transform: none; }
    .knot-footer-mobile-contact .knot-footer-mobile-email { margin: 3px 0 2px; padding: 1px 6px; background: #171717; }
    .knot-footer-mobile-contact .knot-footer-mobile-address { color: #c9c9c9; }
    .knot-footer-mobile-social { display: flex; justify-content: center; gap: 7px; margin-top: clamp(5px, 1.8vw, 7px); }
    .knot-footer-mobile-social a { width: clamp(14px, 4.6vw, 18px); height: clamp(14px, 4.6vw, 18px); display: grid; place-items: center; border: 1px solid #777; border-radius: 50%; color: #f5f5f5; }
    .knot-footer-mobile-social .knot-footer-icon { width: clamp(8px, 2.8vw, 11px); height: clamp(8px, 2.8vw, 11px); }
    .knot-footer-mobile-social a:hover, .knot-footer-mobile-social a:focus-visible { color: #fff; border-color: #fff; transform: none; }
    .knot-footer-mobile-copyright { min-height: clamp(23px, 8vw, 34px); display: grid; place-items: center; padding: clamp(5px, 2vw, 8px) 12px; background: #fff; color: #111; font-size: clamp(6px, 2.3vw, 9px); }
    .knot-order-detail-page { width: calc(100% - 24px); padding-block: 30px 42px; }
    .knot-order-header { align-items: flex-start; flex-direction: column; gap: 16px; padding-bottom: 24px; }
    .knot-order-header h1 { font-size: 27px; }
    .knot-order-status-badge { min-height: 36px; padding: 7px 16px; }
    .knot-order-section-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
    .knot-order-timeline { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 0 0 4px; }
    .knot-order-timeline::before { top: 24px; bottom: 24px; left: 25px; right: auto; width: 2px; height: auto; }
    .knot-order-timeline li { min-height: 76px; grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: start; gap: 14px; text-align: left; }
    .knot-order-timeline-marker { position: relative; z-index: 1; width: 42px; height: 42px; }
    .knot-order-timeline li > div { padding-top: 4px; }
    .knot-order-item-card { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; padding: 12px; }
    .knot-order-item-media, .knot-order-item-media a { width: 72px; height: 72px; }
    .knot-order-item-copy h3 { margin-bottom: 7px; font-size: 15px; }
    .knot-order-item-meta { display: grid; gap: 3px; }
    .knot-order-info-card, .knot-order-summary-card { padding: 20px 16px; }
    .knot-order-summary-card dl div { gap: 12px; font-size: 14px; }
    .knot-order-header-status { width: 100%; justify-items: stretch; }
    .knot-order-status-badge { justify-self: start; }
    .knot-order-admin-status-fields { grid-template-columns: 1fr; }
    .knot-order-admin-status button { width: 100%; }
}

@media (max-width: 380px) {
    .knot-public-topbar .knot-nav { width: 100%; padding-inline: 14px; }
    .knot-public-topbar .knot-logo { width: 80px; height: auto; }
    .knot-public-topbar .knot-nav-icon-button { width: 40px; height: 40px; }
    .knot-public-topbar .knot-nav-icon { width: 19px; height: 19px; }
    .knot-menu-toggle { --knot-menu-icon-width: 23px; width: 40px; height: 40px; }
    .knot-size-row { gap: 6px; }
    .size-btn { height: 42px; padding-inline: 4px; font-size: 14px; }
    .knot-pdp-actions { gap: 8px; }
}

@media (max-width: 340px) {
    .knot-pdp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    button:not(:disabled):hover, .knot-nav-icon-button:hover, .knot-btn:hover, .knot-viewall:hover, .knot-cart-primary:hover, .knot-cart-secondary:hover, .knot-cart-empty button:not(:disabled):hover, .knot-pay-now:not(:disabled):hover, .size-btn:not(:disabled):hover, .knot-edit-product-btn:not(:disabled):hover, .knot-small-outline:not(:disabled):hover, .knot-pill:hover, .knot-footer a:hover {
        transform: none;
    }

    body.knot-animate-ready .knot-card-link {
        opacity: 1;
        transform: none;
    }

    body.knot-reveal-ready [data-reveal],
    body.knot-reveal-ready .knot-hero-content h1 span {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    body.knot-reveal-ready .knot-hero-content { transform: translate(-50%, -50%) !important; }
    body.knot-reveal-ready .knot-home-categories { transform: translateX(-50%) !important; }
}

/* Physical store POS */
.knot-store-pos { --pos-ink: #111318; --pos-muted: #68707d; --pos-line: #dfe3e8; --pos-soft: #f6f7f9; --pos-green: #279847; min-height: 100vh; padding: 30px clamp(18px, 3vw, 48px) 64px; background: #f7f8fa; color: var(--pos-ink); font-family: Arial, Helvetica, sans-serif; }
.knot-store-pos *, .knot-receipt-page * { box-sizing: border-box; }
.knot-store-pos-header { max-width: 1500px; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 auto 20px; }
.knot-store-pos-header h1 { margin: 2px 0 0; font-size: clamp(26px, 2vw, 34px); letter-spacing: 0; }
.knot-store-pos-header a { color: var(--pos-ink); font-size: 13px; font-weight: 700; }
.knot-store-kicker { margin: 0; color: var(--pos-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.knot-store-pos-layout { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(360px, .95fr); align-items: start; gap: 24px; margin: 0 auto; }
.knot-store-pos-form { min-width: 0; display: grid; gap: 18px; }
.knot-pos-panel { min-width: 0; padding: 24px 28px; border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(22, 28, 38, .035); color: var(--pos-ink); }
.knot-pos-panel h2 { margin: 0 0 20px; font: 700 16px/1.25 Arial, sans-serif; letter-spacing: 0; }
.knot-pos-panel h2 span { font-weight: 800; }
.knot-pos-panel h2 small { color: var(--pos-muted); font-size: 12px; font-weight: 500; }
.knot-pos-panel label, .knot-pos-panel legend { color: #4e5663; font: 500 12px/1.25 Arial, sans-serif; }
.knot-pos-panel input, .knot-pos-panel select, .knot-pos-panel textarea { width: 100%; min-height: 42px; margin-top: 7px; padding: 10px 12px; border: 1px solid #d7dce2; border-radius: 5px; background: #fff; color: var(--pos-ink); font: 500 14px/1.3 Arial, sans-serif; outline: 0; }
.knot-pos-panel input:focus, .knot-pos-panel select:focus, .knot-pos-panel textarea:focus { border-color: #69717c; box-shadow: 0 0 0 2px rgba(17, 19, 24, .08); }
.knot-pos-panel textarea { min-height: 66px; resize: vertical; }
.knot-pos-search-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; }
.knot-pos-search { position: relative; min-width: 0; }
.knot-pos-search > input { height: 46px; margin: 0; padding-left: 45px; }
.knot-pos-search-icon { position: absolute; z-index: 2; top: 13px; left: 15px; width: 20px; height: 20px; color: #68707d; pointer-events: none; }
.knot-pos-tool-button, .knot-pos-add-another, .knot-pos-primary, .knot-pos-secondary { min-height: 44px; padding: 10px 18px; border: 1px solid #d2d7dd; border-radius: 5px; background: #fff; color: var(--pos-ink); font: 700 13px/1 Arial, sans-serif; cursor: pointer; }
.knot-pos-tool-button:hover, .knot-pos-secondary:hover, .knot-pos-add-another:hover { border-color: #7d8590; background: #fafafa; transform: none; }
.knot-pos-primary { border-color: #111; background: #111; color: #fff; }
.knot-pos-primary:hover { background: #292929; transform: none; }
.knot-pos-primary:disabled { opacity: .4; cursor: not-allowed; }
.knot-pos-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; max-height: 340px; overflow-y: auto; border: 1px solid #d7dce2; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(22, 28, 38, .14); }
.knot-pos-search-option { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-bottom: 1px solid #e7e9ec; background: #fff; color: var(--pos-ink); text-align: left; cursor: pointer; }
.knot-pos-search-option[hidden] { display: none; }
.knot-pos-search-option:last-child { border-bottom: 0; }
.knot-pos-search-option:hover, .knot-pos-search-option.is-active { background: #f2f4f6; transform: none; }
.knot-pos-search-option img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #e1e4e8; }
.knot-pos-search-option span { min-width: 0; display: grid; gap: 4px; }
.knot-pos-search-option strong, .knot-pos-search-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knot-pos-search-option small { color: var(--pos-muted); }
.knot-pos-manual-form { margin-top: 14px; padding: 18px; border: 1px solid #d7dce2; border-radius: 6px; background: var(--pos-soft); }
.knot-pos-manual-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.knot-pos-manual-head button { width: 32px; height: 32px; border: 0; background: transparent; color: #111; font-size: 22px; cursor: pointer; }
.knot-pos-manual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.knot-pos-manual-notes { grid-column: span 3; }
.knot-pos-manual-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.knot-pos-items { display: grid; gap: 12px; margin-top: 18px; }
.knot-pos-empty-items { margin: 0; padding: 24px; border: 1px dashed #cbd1d8; border-radius: 6px; color: var(--pos-muted); text-align: center; }
.knot-pos-item { border: 1px solid #e0e3e7; border-radius: 6px; background: #fff; overflow: hidden; }
.knot-pos-item-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; padding: 10px 14px; background: #fbfbfc; }
.knot-pos-item-image { width: 64px; height: 64px; object-fit: cover; border: 1px solid #e3e5e8; background: #fff; }
.knot-pos-manual-badge { width: 64px; height: 44px; display: grid; place-items: center; border-radius: 4px; background: #eceff2; color: #525a66; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.knot-pos-item-identity { min-width: 0; display: grid; gap: 5px; }
.knot-pos-item-identity strong, .knot-pos-item-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knot-pos-item-identity small { color: var(--pos-muted); }
.knot-pos-item-price { white-space: nowrap; }
.knot-pos-item-remove { width: 34px; height: 34px; border: 0; background: transparent; color: #111; font-size: 22px; cursor: pointer; }
.knot-pos-item-controls { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); align-items: end; gap: 18px; padding: 14px; border-top: 1px solid #eceef0; }
.knot-pos-item-controls label > span, .knot-pos-readonly-field > span, .knot-pos-item-quantity > span { display: block; margin-bottom: 7px; color: var(--pos-muted); font-size: 11px; }
.knot-pos-item-controls select { margin: 0; }
.knot-pos-readonly-field { min-height: 42px; display: flex; flex-direction: column; justify-content: center; }
.knot-pos-readonly-field strong { font-size: 13px; }
.knot-pos-quantity-control { height: 42px; display: grid; grid-template-columns: 42px 54px 42px; border: 1px solid #d7dce2; border-radius: 5px; }
.knot-pos-quantity-control button, .knot-pos-quantity-control output { display: grid; place-items: center; border: 0; background: #fff; color: #111; }
.knot-pos-quantity-control button { cursor: pointer; font-size: 18px; }
.knot-pos-quantity-control button:disabled { color: #b9bec5; cursor: not-allowed; }
.knot-pos-add-another { width: 100%; margin-top: 14px; background: #fbfbfc; }
.knot-pos-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.knot-pos-payment fieldset { margin: 0; padding: 0; border: 0; }
.knot-pos-payment-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
.knot-pos-payment-options span { min-height: 44px; display: grid; place-items: center; border: 1px solid #d7dce2; border-radius: 5px; color: #5a626e; cursor: pointer; font-weight: 700; }
.knot-pos-payment-options label:has(input:checked) span { border-color: #111; color: #111; box-shadow: inset 0 0 0 1px #111; }
.knot-pos-payment-fields { margin-top: 20px; }
.knot-pos-change { display: grid; gap: 7px; margin-top: 18px; }
.knot-pos-change span { color: var(--pos-muted); font-size: 12px; }
.knot-pos-change strong { color: var(--pos-green); font-size: 23px; }
.knot-pos-form-actions { display: grid; grid-template-columns: 130px minmax(220px, 320px); justify-content: space-between; gap: 14px; margin-top: 22px; }
.knot-pos-complete { font-size: 15px; }
.knot-store-pos-sidebar { position: sticky; top: calc(var(--knot-nav-height) + 20px); display: grid; gap: 18px; }
.knot-pos-summary dl { display: grid; gap: 14px; margin: 0 0 16px; }
.knot-pos-summary dl div, .knot-pos-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.knot-pos-summary dt, .knot-pos-summary dd { margin: 0; }
.knot-pos-discount-amount { color: #d34040; }
.knot-pos-summary > label { display: block; max-width: 240px; }
.knot-pos-custom-discount { margin-top: 10px; }
.knot-pos-summary-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dfe3e8; font-size: 19px; font-weight: 800; }
.knot-pos-summary-total strong { font-size: 25px; }
.knot-pos-receipt { padding-bottom: 14px; }
.knot-pos-receipt-paper { padding: 10px 12px 0; color: #111; font: 12px/1.4 Arial, sans-serif; }
.knot-pos-receipt-paper > header { display: grid; justify-items: center; gap: 5px; padding-bottom: 13px; border-bottom: 1px dashed #7f858d; }
.knot-pos-receipt-paper > header strong { font-size: 19px; letter-spacing: .35em; }
.knot-pos-receipt-meta { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #d9dde1; }
.knot-pos-receipt-table-head, .knot-pos-receipt-item { display: grid; grid-template-columns: minmax(100px, 1.7fr) .55fr .7fr .4fr .8fr .9fr; gap: 7px; align-items: start; }
.knot-pos-receipt-table-head { padding: 9px 0; border-bottom: 1px solid #d9dde1; font-weight: 800; }
.knot-pos-receipt-item { padding: 8px 0; border-bottom: 1px dashed #b6bbc1; }
.knot-pos-receipt-item span:nth-last-child(-n+3), .knot-pos-receipt-table-head span:nth-last-child(-n+3) { text-align: right; }
.knot-pos-receipt-table [data-receipt-items] > p { color: var(--pos-muted); text-align: center; }
.knot-pos-receipt-totals { margin: 10px 0 0; }
.knot-pos-receipt-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.knot-pos-receipt-totals dt, .knot-pos-receipt-totals dd { margin: 0; }
.knot-pos-receipt-totals .total { margin-block: 6px; padding-block: 8px; border-block: 1px dashed #7f858d; font-weight: 800; }
.knot-pos-receipt-paper footer { margin-top: 13px; padding-top: 10px; border-top: 1px dashed #7f858d; text-align: center; }
.knot-pos-receipt-paper footer p { margin: 4px 0; }
.knot-pos-receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.knot-pos-receipt-actions a { display: grid; place-items: center; text-decoration: none; }
.knot-pos-receipt-actions .is-disabled { opacity: .42; pointer-events: none; }
.knot-store-recent-sales { max-width: 1500px; margin: 32px auto 0; padding: 24px 28px; border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; color: #111; }
.knot-store-history-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.knot-store-history-head h2 { margin: 3px 0 0; font: 700 20px/1.2 Arial, sans-serif; }
.knot-store-recent-sales .knot-table { color: #111; }
.knot-store-recent-sales .knot-table a { color: #111; }

.knot-receipt-page { margin: 0; padding: 20px; background: #eef0f3; color: #111; font-family: Arial, Helvetica, sans-serif; }
.knot-saved-receipt { width: 2in; max-width: 100%; margin: 0 auto; padding: .12in; background: #fff; box-shadow: 0 6px 24px rgba(22,28,38,.09); font-size: 9px; line-height: 1.3; }
.knot-saved-receipt > header { display: grid; justify-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px dashed #777; text-align: center; }
.knot-saved-receipt > header strong { font-size: 14px; letter-spacing: .3em; }
.knot-saved-receipt-meta { display: grid; gap: 2px; padding-block: 7px; }
.knot-saved-receipt table { width: 100%; border-collapse: collapse; }
.knot-saved-receipt th, .knot-saved-receipt td { padding: 4px 2px; border-block: 1px solid #ddd; text-align: left; font-size: 8px; vertical-align: top; }
.knot-saved-receipt th:nth-child(n+2), .knot-saved-receipt td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.knot-saved-receipt td small { display: block; margin-top: 1px; color: #666; font-size: 7px; line-height: 1.25; }
.knot-saved-receipt dl { margin: 8px 0; }
.knot-saved-receipt dl div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.knot-saved-receipt dt, .knot-saved-receipt dd { margin: 0; }
.knot-saved-receipt dd { text-align: right; }
.knot-saved-receipt dl .total { margin-block: 4px; padding-block: 5px; border-block: 1px dashed #777; font-size: 10px; font-weight: 800; }
.knot-saved-receipt footer { padding-top: 7px; border-top: 1px dashed #777; text-align: center; }
.knot-saved-receipt footer p { margin: 4px 0; }
.knot-saved-receipt-notes { overflow-wrap: anywhere; }
.knot-receipt-page-actions { display: flex; justify-content: center; gap: 12px; margin: 20px auto; }
.knot-receipt-page-actions button { min-height: 42px; padding: 9px 18px; border: 1px solid #111; background: #fff; color: #111; font-weight: 700; cursor: pointer; }
.knot-receipt-page-actions button:first-child { background: #111; color: #fff; }

@media (max-width: 1100px) {
  .knot-store-pos-layout { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .9fr); }
  .knot-pos-search-row { grid-template-columns: 1fr 1fr; }
  .knot-pos-search { grid-column: 1 / -1; }
  .knot-pos-item-controls { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .knot-pos-manual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knot-pos-manual-notes { grid-column: span 2; }
}

@media (max-width: 820px) {
  .knot-store-pos { padding-inline: 12px; }
  .knot-store-pos-layout { grid-template-columns: 1fr; }
  .knot-store-pos-sidebar { position: static; }
  .knot-pos-panel { padding: 20px 16px; }
  .knot-pos-item-head { grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 10px; }
  .knot-pos-item-image, .knot-pos-manual-badge { width: 54px; height: 54px; }
  .knot-pos-item-price { grid-column: 2; }
  .knot-pos-item-remove { grid-column: 3; grid-row: 1 / span 2; }
  .knot-pos-two-columns, .knot-pos-payment-options { grid-template-columns: 1fr; }
  .knot-pos-form-actions { grid-template-columns: 1fr; }
  .knot-pos-form-actions .knot-pos-secondary { order: 2; }
  .knot-store-history-head { align-items: start; flex-direction: column; }
}

@media (max-width: 520px) {
  .knot-store-pos-header { align-items: start; }
  .knot-pos-search-row, .knot-pos-manual-grid, .knot-pos-item-controls { grid-template-columns: 1fr; }
  .knot-pos-manual-notes { grid-column: auto; }
  .knot-pos-receipt-actions { grid-template-columns: 1fr; }
  .knot-pos-receipt-table { overflow-x: auto; }
  .knot-pos-receipt-table-head, .knot-pos-receipt-item { min-width: 470px; }
  .knot-store-recent-sales { padding-inline: 14px; }
}

@media print {
  html, body.knot-receipt-page { width: 2in; min-width: 2in; }
  .knot-receipt-page { padding: 0; background: #fff; }
  .knot-receipt-page-actions { display: none !important; }
  .knot-saved-receipt { width: 2in; max-width: 2in; margin: 0; padding: .08in; box-shadow: none; }
}

/* Editorial homepage */
body.knot-home { padding-bottom: 0; }
.knot-home main { position: relative; }
body.knot-reveal-ready [data-reveal]:not(.knot-hero-content):not(.knot-home-categories) { opacity: 0; transform: translateY(28px); transition: opacity 650ms cubic-bezier(.22,1,.36,1), transform 650ms cubic-bezier(.22,1,.36,1); }
body.knot-reveal-ready [data-reveal].is-visible:not(.knot-hero-content):not(.knot-home-categories) { opacity: 1; transform: translateY(0); }
body.knot-reveal-ready [data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }
body.knot-reveal-ready .knot-hero-content { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); transition: opacity 980ms cubic-bezier(.22,1,.36,1), transform 980ms cubic-bezier(.22,1,.36,1); }
body.knot-reveal-ready .knot-hero-content.is-visible { opacity: 1; transform: translate(-50%, -50%); }
body.knot-reveal-ready .knot-home-categories { opacity: 0; transform: translate(-50%, 20px); transition: opacity 620ms cubic-bezier(.22,1,.36,1), transform 620ms cubic-bezier(.22,1,.36,1); }
body.knot-reveal-ready .knot-home-categories.is-visible { opacity: 1; transform: translate(-50%, 0); }
body.knot-reveal-ready .knot-hero-content h1 span { opacity: 0; transform: translateY(.28em); }
body.knot-reveal-ready .knot-hero-content.is-visible h1 span { animation: knot-headline-in 1150ms cubic-bezier(.22,1,.36,1) forwards; }
body.knot-reveal-ready .knot-hero-content.is-visible h1 span:nth-child(2) { animation-delay: 180ms; }
@keyframes knot-headline-in { to { opacity: 1; transform: translateY(0); } }
.knot-home-topbar, .knot-home-topbar.is-scrolled { position: sticky; inset: auto; top: 0; z-index: 32; background: #fff; color: #111; border-bottom: 1px solid var(--navbar-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.knot-menu-toggle { position: relative; grid-column: 1; justify-self: start; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #111; cursor: pointer; transition: opacity 160ms ease; }
.knot-menu-toggle:hover { opacity: .72; }
.knot-menu-toggle-icon { display: grid; place-items: center; width: 30px; height: 30px; }
.knot-menu-toggle-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.knot-menu-toggle:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.knot-menu-overlay { position: fixed; inset: 0; z-index: 60; background: var(--drawer-overlay); opacity: 0; transition: opacity 260ms ease; }
.knot-menu-overlay.is-open { opacity: 1; }
.knot-menu-drawer { position: fixed; inset: 0 auto 0 0; z-index: 61; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff; color: #111; border-right: 1px solid var(--drawer-border); box-shadow: 12px 0 30px rgba(0,0,0,.08); backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateX(-100%); transition: transform 340ms cubic-bezier(.22,1,.36,1); }
.knot-menu-drawer.is-open { transform: translateX(0); }
.knot-menu-drawer .knot-menu-head { flex: 0 0 var(--knot-nav-height); min-height: var(--knot-nav-height); margin: 0 0 24px; padding: 0 var(--store-drawer-padding); background: #fff; }
.knot-menu-head { display: flex; align-items: center; justify-content: flex-start; }
.knot-menu-drawer .knot-drawer-close { width: 50px; height: 50px; padding: 0; color: #111; border: 0; background: transparent; outline: 0; box-shadow: none; transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,1,.36,1); }
.knot-menu-drawer .knot-drawer-close:hover { background: transparent; color: #111; outline: 0; box-shadow: none; opacity: .72; transform: rotate(7deg) scale(.96); }
.knot-menu-drawer .knot-drawer-close:focus-visible { background: transparent; color: #111; outline: 2px solid #111; outline-offset: 2px; box-shadow: none; opacity: .72; }
.knot-drawer-close-icon { display: grid; place-items: center; width: 50px; height: 50px; }
.knot-drawer-close-icon img { width: 50px; height: 50px; display: block; object-fit: contain; filter: none; animation: knot-drawer-close-enter 360ms cubic-bezier(.22,1,.36,1) both; }
@keyframes knot-drawer-close-enter { from { opacity: 0; transform: rotate(-45deg) scale(.72); } to { opacity: 1; transform: rotate(0) scale(1); } }
.knot-sidebar-search { position: relative; width: auto; margin: 0 var(--store-drawer-padding) 34px; }
.knot-sidebar-search input { width: 100%; height: 44px; padding: 0 44px 0 13px; border: 1px solid var(--knot-border-strong); border-radius: 0; background: #fff; color: #111; font-size: 17.6px; outline: none; }
.knot-sidebar-search input:focus { border-color: #111; box-shadow: 0 0 0 1px #111; }
.knot-sidebar-search button { position: absolute; top: 1px; right: 1px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; background: #fff; color: #111; cursor: pointer; }
.knot-sidebar-search button:hover, .knot-sidebar-search button:focus-visible { transform: none; background: #f3f3f3; outline: none; }
.knot-sidebar-search .knot-nav-icon { width: 19px; height: 19px; }
.knot-menu-links { display: grid; align-content: start; gap: 6px; flex: 1 1 auto; min-height: 0; margin: 0 var(--store-drawer-padding); overflow-y: auto; padding-right: 4px; }
.knot-menu-link, .knot-menu-category-row { min-height: 38px; }
.knot-menu-links a { color: inherit; text-decoration: none; }
.knot-menu-link { display: flex; align-items: center; font-size: 18.7px; font-weight: 500; line-height: 1.2; }
.knot-menu-category-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.knot-menu-category-toggle { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #555; cursor: pointer; }
.knot-menu-category-toggle:hover, .knot-menu-category-toggle:focus-visible { background: transparent; color: #111; outline: 2px solid #111; outline-offset: -3px; transform: none; }
.knot-menu-chevron { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; transition: transform var(--knot-fast) var(--knot-ease); }
.knot-menu-category.is-open .knot-menu-chevron { transform: rotate(180deg); }
.knot-menu-subcategories { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--knot-med) var(--knot-ease), opacity var(--knot-fast) var(--knot-ease); }
.knot-menu-subcategories-inner { min-height: 0; overflow: hidden; display: grid; gap: 6px; padding: 0 0 0 26px; }
.knot-menu-category.is-open .knot-menu-subcategories { grid-template-rows: 1fr; opacity: 1; }
.knot-menu-category.is-open .knot-menu-subcategories-inner { padding-block: 2px 8px; }
.knot-menu-links .knot-menu-sublink { color: #888; font-size: 16.5px; font-weight: 400; line-height: 1.3; }
.knot-menu-empty-subcategories { color: #999; font-size: 15.4px; font-style: italic; line-height: 1.3; }
.knot-menu-link:hover, .knot-menu-link:focus-visible, .knot-menu-links .knot-menu-sublink:hover, .knot-menu-links .knot-menu-sublink:focus-visible { color: #777; outline: none; }
.knot-menu-custom-order { flex: 0 0 auto; width: auto; min-height: 48px; display: grid; place-items: center; margin: 24px var(--store-drawer-padding) 28px; background: #000; color: #fff; text-decoration: none; font-size: 18.7px; font-weight: 500; }
.knot-menu-custom-order:hover, .knot-menu-custom-order:focus-visible { background: #222; color: #fff; outline: 2px solid #111; outline-offset: 3px; }
body.knot-menu-open { overflow: hidden; }

.knot-editorial-hero { position: relative; width: 100%; height: 60vh; height: 60svh; min-height: 0; aspect-ratio: auto; overflow: hidden; background: #000; color: #fff; }
.knot-editorial-hero .knot-hero-slider { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background: #070707; }
.knot-editorial-hero .knot-hero-slide { background: #070707; }
.knot-editorial-hero .knot-hero-slide img { object-fit: cover; object-position: center center; background: #000; }
.knot-editorial-hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,calc(var(--hero-overlay) + .42)) 0%, rgba(0,0,0,calc(var(--hero-overlay) * .68)) 46%, rgba(0,0,0,.16) 100%); }
.knot-hero-content { position: absolute; z-index: 4; left: 50%; top: 49%; width: min(720px, calc(100% - 80px)); transform: translate(-50%, -50%); text-align: center; }
.knot-hero-eyebrow { margin: 0 0 12px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.knot-hero-content h1 { margin: 0 auto; max-width: 720px; font-size: clamp(42px, 4.5vw, 72px); line-height: .94; letter-spacing: .01em; font-weight: 900; font-style: italic; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.knot-hero-content h1 span { display: block; }
.knot-hero-copy { max-width: 480px; margin: 14px auto 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
.knot-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.knot-hero-cta { min-width: 132px; min-height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px; border: 1px solid rgba(255,255,255,.5); color: #fff; text-decoration: none; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.knot-hero-cta.primary { background: #f3eee6; color: #111; border-color: #f3eee6; }
.knot-hero-cta:hover, .knot-hero-cta:focus-visible { transform: translateY(-2px); outline: none; }
.knot-hero-cta.primary:hover, .knot-hero-cta.primary:focus-visible { background: #fff; }
.knot-home-categories { position: absolute; z-index: 5; left: 50%; bottom: 28px; width: min(100% - 32px, 760px); transform: translateX(-50%); }
.knot-home-categories .knot-floating-category-shell { max-width: 100%; margin: 0 auto; padding: 6px 10px; border-color: rgba(255,255,255,.22); background: rgba(8,8,8,.74); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.knot-home-categories .knot-floating-category-shell::before, .knot-home-categories .knot-floating-category-shell::after { display: none; }
.knot-home-categories .knot-category-row.knot-floating-category-row { justify-content: center; gap: 3px; }
.knot-home-categories .knot-floating-category-row .knot-pill { height: 34px; min-height: 34px; padding: 0 18px; border-color: transparent; background: transparent; color: rgba(255,255,255,.82); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-transform: uppercase; font-size: 11px; }
.knot-home-categories .knot-floating-category-row .knot-pill::before, .knot-home-categories .knot-floating-category-row .knot-pill::after { display: none; }
.knot-home-categories .knot-floating-category-row .knot-pill:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); box-shadow: none; }
.knot-home-categories .knot-floating-category-row .knot-pill.is-active { border-color: #f3eee6; background: #f3eee6; color: #111; box-shadow: none; }
.knot-edit-hero-trigger { position: absolute; z-index: 6; top: 88px; right: 28px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.58); color: #fff; cursor: pointer; font-weight: 700; }
.knot-edit-hero-trigger-fixed { position: fixed; z-index: 35; top: 82px; }

.knot-editorial-categories { overflow: hidden; padding: 78px 0 86px; background: var(--knot-page); color: var(--knot-text); }
.knot-editorial-header { width: min(1600px, calc(100% - 48px)); margin: 0 auto; }
.knot-editorial-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.knot-editorial-heading-row h2 { margin: 0; font-family: var(--font-display); font-size: clamp(27px, 2.4vw, 38px); font-weight: 400; letter-spacing: 0; }
.knot-editorial-heading-row > a { flex: 0 0 auto; color: inherit; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.knot-editorial-heading-row > a span { margin-left: 14px; font-size: 18px; }
.knot-editorial-grid { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(270px, 19.5vw, 400px)); gap: 8px; margin: 0; padding: 0; }
.knot-editorial-card { position: relative; min-height: 0; overflow: hidden; background: #181818; color: #fff; text-decoration: none; }
.knot-editorial-card-slot-1 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.knot-editorial-card-slot-2 { grid-column: 5 / span 6; grid-row: 1; }
.knot-editorial-card-slot-3 { grid-column: 5 / span 4; grid-row: 2; }
.knot-editorial-card-slot-4 { grid-column: 9 / span 4; grid-row: 2; }
.knot-editorial-custom-wrap { position: relative; min-width: 0; grid-column: 11 / span 2; grid-row: 1; }
.knot-editorial-card-custom { width: 100%; height: 100%; display: block; }
.knot-editorial-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 500ms var(--knot-ease), filter 300ms var(--knot-ease); }
.knot-editorial-card-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.05) 65%), linear-gradient(90deg, rgba(0,0,0,.25), transparent 65%); }
.knot-editorial-card-content { position: absolute; inset: auto 28px 25px; display: grid; justify-items: start; }
.knot-editorial-card-content strong { font-size: clamp(24px, 2vw, 34px); line-height: 1; text-transform: uppercase; }
.knot-editorial-card-content small { max-width: 210px; margin-top: 9px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.35; }
.knot-editorial-card-content > span { margin-top: 20px; font-size: 21px; transition: transform var(--knot-fast) var(--knot-ease); }
.knot-editorial-card-custom .knot-editorial-card-content { inset-inline: 20px; }
.knot-editorial-card-custom .knot-editorial-card-content strong { font-size: clamp(20px, 1.7vw, 30px); }
.knot-editorial-card:hover img, .knot-editorial-card:focus-visible img { transform: scale(1.025); filter: brightness(1.08); }
.knot-editorial-card:hover .knot-editorial-card-content > span, .knot-editorial-card:focus-visible .knot-editorial-card-content > span { transform: translateX(4px); }
.knot-editorial-card:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 3px; }
.knot-edit-card-trigger { position: absolute; z-index: 3; top: 10px; right: 10px; min-height: 32px; padding: 0 11px; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.68); color: #fff; cursor: pointer; font-weight: 800; }
.knot-home-card-editor { display: grid; gap: 14px; margin: 12px 0 0; border: 1px solid var(--knot-border); padding: 18px; }
.knot-home-card-editor legend { padding: 0 8px; font-weight: 900; }
.knot-home-card-editor small { color: var(--knot-muted); }

.knot-home-products { padding: 24px 0 48px; background: var(--knot-page); }
.knot-home-products > .container { width: 100%; max-width: none; padding-inline: 0; }
.knot-products-heading { width: min(1380px, calc(100% - 80px)); margin: 0 auto 24px; }
.knot-home-view-all { display: flex; justify-content: center; margin-top: 34px; }
.knot-home-view-all .knot-viewall { gap: 20px; }

.knot-home-carousel { overflow: hidden; padding: 52px 0 66px; border-top: 1px solid var(--knot-border); background: var(--knot-page); }
.knot-home-carousel-inner { width: 100%; margin: 0; }
.knot-carousel-heading { width: min(1380px, calc(100% - 80px)); display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 0 auto 24px; }
.knot-carousel-heading p { margin: 0 0 8px; color: var(--knot-muted); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.knot-carousel-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(27px, 2.4vw, 38px); font-weight: 400; letter-spacing: 0; }
.knot-carousel-controls { display: flex; gap: 8px; }
.knot-carousel-controls button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--knot-border-strong); background: transparent; color: var(--knot-text); cursor: pointer; }
.knot-carousel-controls button:disabled { opacity: .28; cursor: default; }
.knot-carousel-controls button:not(:disabled):hover { background: var(--knot-primary); color: var(--knot-on-primary); }
.knot-carousel-icon { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; }
.knot-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 25%; gap: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.knot-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.knot-carousel-track::-webkit-scrollbar { display: none; }
.knot-carousel-track:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 4px; }
.knot-carousel-slide { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; color: var(--knot-text); text-decoration: none; scroll-snap-align: start; border-right: 1px solid var(--knot-border); border-bottom: 1px solid var(--knot-border); background: var(--knot-surface-muted); cursor: pointer; }
.knot-carousel-image { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--knot-surface-muted); }
.knot-carousel-image img { width: 100%; height: 100%; padding: 0; display: block; object-fit: contain; object-position: center; transition: none; }
.knot-carousel-meta { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; min-height: 88px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 8px 10px 10px; border-top: 1px solid var(--knot-border); background: var(--knot-surface); color: var(--knot-text); text-align: center; transform: translateY(calc(100% - 12px)); transition: transform 420ms cubic-bezier(.22,1,.36,1), background-color 220ms ease; }
.knot-carousel-meta small { display: none; }
.knot-carousel-meta strong { width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--knot-text); font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-align: center; white-space: normal; transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.knot-carousel-price { display: block; margin-top: 5px; color: var(--knot-text); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; }
.knot-carousel-price s { margin-left: 6px; color: var(--knot-muted); font-size: 10px; font-weight: 400; opacity: .58; text-decoration-thickness: 1px; }
.knot-carousel-slide:hover .knot-carousel-meta, .knot-carousel-slide:focus-visible .knot-carousel-meta { background: var(--knot-surface-raised); transform: translateY(0); }
.knot-carousel-slide:hover .knot-carousel-meta strong, .knot-carousel-slide:focus-visible .knot-carousel-meta strong { transform: translateY(-2px); }
.knot-carousel-slide:hover .knot-carousel-image img, .knot-carousel-slide:focus-visible .knot-carousel-image img { transform: none; filter: none; }
.knot-carousel-slide:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: -2px; }
.knot-home .knot-tagline { margin-top: 0; }
.knot-category-admin-image { width: min(100%, 420px); aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--knot-border); }

.knot-hero-editor-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.7); opacity: 0; transition: opacity var(--knot-med) var(--knot-ease); }
.knot-hero-editor-backdrop.is-open { opacity: 1; }
.knot-hero-editor { position: fixed; z-index: 71; top: 4vh; right: 4vw; bottom: 4vh; width: min(680px, 92vw); overflow-y: auto; padding: 26px; background: var(--knot-surface-raised); color: var(--knot-text); border: 1px solid var(--knot-border); transform: translateX(calc(100% + 5vw)); transition: transform var(--knot-med) var(--knot-ease); }
.knot-hero-editor.is-open { transform: translateX(0); }
.knot-hero-editor .knot-menu-head { margin-bottom: 22px; }
.knot-hero-editor-form { gap: 16px; }
.knot-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.knot-hero-editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.knot-hero-editor-actions .knot-btn { min-width: 120px; }

@media (max-width: 920px) {
    .knot-public-topbar .knot-nav { width: 100%; padding-inline: 18px; }
    .knot-public-topbar.is-search-open .knot-brand { opacity: 0; pointer-events: none; }
    .knot-public-topbar .knot-brand { transition: opacity 180ms ease; }
    .knot-hero-content { left: 50%; top: 49%; width: min(640px, calc(100% - 56px)); }
    .knot-hero-content h1 { font-size: clamp(40px, 6.5vw, 60px); }
    .knot-editorial-header { width: calc(100% - 40px); }
    .knot-editorial-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 240px 240px; }
    .knot-editorial-card-slot-1 { grid-column: 1; grid-row: 1 / 3; }
    .knot-editorial-card-slot-2 { grid-column: 2; grid-row: 1; }
    .knot-editorial-custom-wrap { grid-column: 2; grid-row: 2; }
    .knot-editorial-card-slot-3 { grid-column: 1; grid-row: 3; }
    .knot-editorial-card-slot-4 { grid-column: 2; grid-row: 3; }
    .knot-carousel-track { grid-auto-columns: 33.3333%; }
}

@media (max-width: 576px) {
    .knot-public-topbar .knot-nav { width: 100%; padding-inline: 16px; grid-template-columns: 1fr auto 1fr; }
    .knot-public-topbar .knot-brand { grid-column: 2; justify-self: center; }
    .knot-public-topbar .knot-nav-links { grid-column: 3; gap: 8px; }
    .knot-public-topbar .knot-desktop-search { display: none; }
    .knot-public-topbar.is-search-open .knot-brand { opacity: 1; pointer-events: auto; }
    .knot-listing-categories { top: calc(var(--knot-nav-height) + 6px); margin-top: -8px; padding-inline: 0; }
    .knot-menu-toggle { --knot-menu-icon-width: 24px; width: 42px; height: 42px; }
    .knot-editorial-hero .knot-hero-slide img { object-position: center center; }
    .knot-editorial-hero-shade { background: linear-gradient(0deg, rgba(0,0,0,calc(var(--hero-overlay) + .5)) 0%, rgba(0,0,0,calc(var(--hero-overlay) * .72)) 52%, rgba(0,0,0,.18) 100%); }
    .knot-hero-content { left: 50%; top: 51%; width: calc(100% - 36px); }
    .knot-hero-eyebrow { margin-bottom: 9px; font-size: 9px; }
    .knot-hero-content h1 { font-size: clamp(32px, 9.5vw, 44px); line-height: .96; }
    .knot-hero-copy { max-width: 320px; margin-top: 11px; font-size: 12px; line-height: 1.45; }
    .knot-hero-actions { gap: 8px; margin-top: 16px; }
    .knot-hero-cta { min-width: 116px; min-height: 40px; padding-inline: 13px; gap: 14px; font-size: 9px; }
    .knot-home-categories { bottom: 20px; width: calc(100% - 20px); }
    .knot-home-categories .knot-category-row.knot-floating-category-row { justify-content: flex-start; }
    .knot-home-categories .knot-floating-category-row .knot-pill { height: 31px; min-height: 31px; padding: 0 8px; font-size: 9px; }
    .knot-edit-hero-trigger { top: 72px; right: 14px; }
    .knot-editorial-categories { padding: 52px 0 58px; }
    .knot-editorial-header { width: calc(100% - 24px); }
    .knot-editorial-heading-row { align-items: start; }
    .knot-editorial-heading-row h2 { font-size: 27px; }
    .knot-editorial-heading-row > a { margin-top: 8px; font-size: 9px; }
    .knot-editorial-grid { width: calc(100% - 16px); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(150px, 46vw, 190px)); gap: 4px; margin-inline: 8px; }
    .knot-editorial-card-slot-1 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
    .knot-editorial-card-slot-2 { grid-column: 5 / span 5; grid-row: 1; }
    .knot-editorial-custom-wrap { grid-column: 10 / span 3; grid-row: 1; }
    .knot-editorial-card-slot-3 { grid-column: 5 / span 4; grid-row: 2; }
    .knot-editorial-card-slot-4 { grid-column: 9 / span 4; grid-row: 2; }
    .knot-editorial-card-content { inset: auto 8px 9px; }
    .knot-editorial-card-content strong { font-size: clamp(10px, 3.4vw, 14px); line-height: 1; }
    .knot-editorial-card-content small { margin-top: 4px; font-size: 8px; line-height: 1.15; }
    .knot-editorial-card-content > span { margin-top: 8px; font-size: 14px; }
    .knot-editorial-card-custom .knot-editorial-card-content { inset-inline: 6px; }
    .knot-editorial-card-custom .knot-editorial-card-content strong { font-size: clamp(10px, 3vw, 13px); }
    .knot-editorial-custom-wrap .knot-edit-card-trigger { top: 4px; right: 4px; min-height: 24px; padding: 0 6px; font-size: 9px; }
    .knot-product-customize-cta { max-width: 100%; align-items: stretch; flex-direction: column; }
    .knot-product-customize-button { width: 100%; }
    .knot-home-products { padding-bottom: 46px; }
    .knot-home-view-all { margin-top: 28px; }
    .knot-home-carousel { padding: 42px 0 50px; }
    .knot-carousel-heading { align-items: center; }
    .knot-carousel-heading h2 { font-size: 27px; }
    .knot-carousel-controls button { width: 38px; height: 38px; }
    .knot-carousel-track { grid-auto-columns: 50%; }
    .knot-two-columns { grid-template-columns: 1fr; }
    .knot-hero-editor { inset: 0; width: 100%; padding: 20px; }
}

@media (max-width: 1024px) {
    .knot-desktop-search.is-open .knot-desktop-search-form { width: min(320px, calc(100vw - 184px)); }
    .knot-product-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .knot-product-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .knot-listing-page .knot-page-head, .knot-listing-page .knot-product-load-zone { width: calc(100% - 24px); }
    .knot-products-heading, .knot-carousel-heading { width: calc(100% - 24px); }
    .knot-card-link { aspect-ratio: auto; overflow: visible; }
    .knot-card-link .knot-product-card { position: relative; inset: auto; display: block; }
    .knot-carousel-slide { aspect-ratio: auto; display: block; }
    .knot-card-link .knot-product-imgwrap, .knot-carousel-image { position: relative; inset: auto; min-height: 0; aspect-ratio: 1 / 1; }
    .knot-card-link .knot-product-meta, .knot-carousel-meta { position: relative; inset: auto; min-height: 0; padding: 8px; transform: none; }
    .knot-product-category, .knot-carousel-meta small { display: none; }
    .knot-product-name, .knot-carousel-meta strong { font-size: 12px; }
    .knot-product-bottom { gap: 1px; margin-top: 4px; font-size: 10px; }
    .knot-save { font-size: 9px; }
}

@media (hover: none) {
    .knot-card-link { aspect-ratio: auto; overflow: visible; }
    .knot-card-link .knot-product-card { position: relative; inset: auto; display: block; }
    .knot-carousel-slide { aspect-ratio: auto; display: block; }
    .knot-card-link .knot-product-imgwrap, .knot-carousel-image { position: relative; inset: auto; min-height: 0; aspect-ratio: 1 / 1; }
    .knot-card-link .knot-product-meta, .knot-carousel-meta { position: relative; inset: auto; min-height: 0; transform: none; }
    .knot-product-name, .knot-carousel-meta strong { transform: none; opacity: 1; }
}

@media (min-width: 1025px) {
    .knot-editorial-hero {
        height: 80vh;
        height: 80svh;
    }

    .knot-editorial-hero .knot-hero-slide img {
        object-fit: contain;
        object-position: center center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .knot-editorial-hero {
        height: 70vh;
        height: 70svh;
    }
}

@media (max-width: 1024px) {
    .knot-editorial-hero .knot-hero-slide img {
        object-fit: cover;
        object-position: center center;
    }
}

@media (max-width: 380px) {
    .knot-public-topbar .knot-nav { padding-inline: 14px; }
    .knot-public-topbar .knot-logo { width: 80px; }
    .knot-menu-toggle { --knot-menu-icon-width: 23px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .knot-desktop-search-form, .knot-desktop-search-form input, .knot-public-topbar .knot-brand, .knot-menu-toggle, .knot-menu-toggle-line, .knot-menu-drawer, .knot-menu-overlay { transition-duration: .01ms !important; }
    .knot-card-link .knot-product-meta, .knot-carousel-meta { transform: translateY(0); }
    .knot-product-name, .knot-carousel-meta strong { transform: none; opacity: 1; }
    .knot-card-link .knot-product-img, .knot-carousel-image img { transform: none !important; filter: none !important; }
}

/* Desktop homepage hero: keep the navigation over a full 16:9 banner. */
@media (min-width: 921px) {
    .knot-home-topbar,
    .knot-home-topbar.is-scrolled {
        position: fixed;
        inset: 0 0 auto;
        z-index: 32;
        background: rgba(7, 12, 18, .64);
        color: #fff;
        border-bottom-color: rgba(255, 255, 255, .16);
        backdrop-filter: blur(2px) saturate(110%);
        -webkit-backdrop-filter: blur(2px) saturate(110%);
    }

    .knot-home-topbar .knot-logo {
        filter: brightness(0) invert(1);
    }

    .knot-home-topbar .knot-menu-toggle-icon img {
        filter: brightness(0) invert(1);
    }

    .knot-home-topbar .knot-menu-toggle,
    .knot-home-topbar .knot-nav-links .knot-nav-icon-button,
    .knot-home-topbar .knot-nav-links .knot-desktop-search-form,
    .knot-home-topbar .knot-nav-links .knot-desktop-search-form button {
        color: #fff;
    }

    .knot-home-topbar .knot-nav-icon-button:hover,
    .knot-home-topbar .knot-nav-icon-button:focus-visible,
    .knot-home-topbar .knot-nav-icon-button.is-active {
        color: #fff;
    }

    .knot-editorial-hero {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .knot-editorial-hero .knot-hero-slide img {
        object-fit: contain;
        object-position: center center;
    }

    .knot-editorial-hero-shade {
        background: linear-gradient(90deg, rgba(0, 0, 0, calc(var(--hero-overlay) + .36)) 0%, rgba(0, 0, 0, calc(var(--hero-overlay) + .14)) 42%, rgba(0, 0, 0, .04) 72%, transparent 100%);
    }

    .knot-hero-content {
        left: clamp(64px, 13vw, 210px);
        top: 52%;
        width: min(570px, 40vw);
        transform: translateY(-50%);
        text-align: left;
    }

    .knot-hero-content h1,
    .knot-hero-copy {
        margin-left: 0;
        margin-right: 0;
    }

    .knot-hero-actions {
        justify-content: flex-start;
    }

    .knot-editorial-hero .knot-home-categories {
        display: none;
    }

    body.knot-reveal-ready .knot-hero-content {
        transform: translateY(calc(-50% + 24px));
    }

    body.knot-reveal-ready .knot-hero-content.is-visible {
        transform: translateY(-50%);
    }
}

@media (max-width: 920px) {
    .knot-home-topbar,
    .knot-home-topbar.is-scrolled {
        background: rgba(7, 12, 18, .75);
        color: #fff;
        border-bottom-color: rgba(255, 255, 255, .16);
        backdrop-filter: blur(2px) brightness(35%) saturate(90%);
        -webkit-backdrop-filter: blur(2px) brightness(35%) saturate(90%);
    }

    .knot-home-topbar .knot-logo {
        filter: brightness(0) invert(1);
    }

    .knot-home-topbar .knot-menu-toggle-icon img {
        filter: brightness(0) invert(1);
    }

    .knot-home-topbar .knot-menu-toggle,
    .knot-home-topbar .knot-nav-links .knot-nav-icon-button,
    .knot-home-topbar .knot-nav-icon-button:hover,
    .knot-home-topbar .knot-nav-icon-button:focus-visible,
    .knot-home-topbar .knot-nav-icon-button.is-active {
        color: #fff;
    }

    .knot-home-topbar .knot-menu-toggle:focus-visible {
        outline-color: #fff;
    }
}

@media (min-width: 921px) and (prefers-reduced-motion: reduce) {
    body.knot-reveal-ready .knot-hero-content,
    body.knot-reveal-ready .knot-hero-content.is-visible {
        transform: translateY(-50%) !important;
    }
}

/* Public storefront typography. Scoped to keep the admin interface unchanged. */
.knot-body {
    font-family: var(--font-body);
}

/* Shared storefront heading rhythm. */
.knot-body :where(.knot-editorial-header, .knot-products-heading, .knot-carousel-heading) {
    width: min(1600px, calc(100% - clamp(24px, 4vw, 64px)));
    margin-inline: auto;
}

.knot-body :where(.knot-editorial-heading-row, .knot-carousel-heading) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 2rem);
}

.knot-body .knot-editorial-heading-row > h2,
.knot-body .knot-carousel-heading > div:first-child {
    max-width: 65%;
}

.knot-body .knot-editorial-heading-row > a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: clamp(var(--type-xs), .8vw, var(--type-sm));
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.knot-body .knot-editorial-heading-row > a span {
    margin-left: 0;
    font-size: 1.1em;
}

.knot-body h1,
.knot-body .knot-pdp-title,
.knot-body .knot-editorial-heading-row h2,
.knot-body .knot-carousel-heading h2,
.knot-body .knot-static-page h2,
.knot-body .knot-checkout-section > h2,
.knot-body .knot-order-section-heading h2,
.knot-body .knot-order-info-card h2,
.knot-body .knot-order-summary-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.035em;
}

.knot-body .knot-hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 7vw, var(--type-hero));
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.045em;
}

.knot-body .knot-editorial-heading-row h2,
.knot-body .knot-carousel-heading h2 {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1;
}

.knot-body .knot-carousel-heading p {
    margin-bottom: .55rem;
    font-size: clamp(var(--type-xs), .8vw, var(--type-sm));
    font-weight: 600;
    letter-spacing: .1em;
}

.knot-body .knot-carousel-controls {
    flex: 0 0 auto;
    align-self: center;
}

.knot-body .knot-page > h1,
.knot-body .knot-pdp-title,
.knot-body .knot-custom-order-intro h1,
.knot-body .knot-order-header h1 {
    font-size: clamp(2rem, 3vw, 3rem);
}

.knot-body :where(
    .knot-nav,
    .knot-menu-drawer,
    .knot-floating-categories,
    .knot-account-panel,
    .knot-product-meta,
    .knot-carousel-meta,
    .knot-p-badge,
    .knot-pdp-price,
    .knot-pdp-stock,
    .knot-product-form,
    .knot-size-chart,
    .knot-product-customize-cta,
    .knot-cart-drawer,
    .knot-checkout-summary,
    .knot-order-items,
    .knot-order-info-card dl,
    .knot-order-summary-card,
    .knot-table,
    .knot-account-orders,
    .knot-account-custom-orders,
    .knot-custom-order-summary,
    .knot-footer
) {
    font-family: var(--font-mono);
}

.knot-body :where(
    button,
    .knot-btn,
    .knot-link-button,
    label,
    legend,
    .knot-pill,
    .size-btn,
    .knot-discount,
    .knot-product-category
) {
    font-family: var(--font-mono);
}

.knot-body .knot-nav-links,
.knot-body .knot-account-panel,
.knot-body .knot-floating-categories,
.knot-body :where(button, .knot-btn, .knot-link-button) {
    font-weight: 500;
    letter-spacing: .06em;
}

.knot-body .knot-product-name,
.knot-body .knot-carousel-meta strong {
    font-family: var(--font-mono);
    font-size: clamp(.8125rem, 1vw, .875rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.knot-body .knot-price,
.knot-body .knot-carousel-price {
    font-family: var(--font-mono);
    font-size: clamp(.8125rem, 1vw, .875rem);
    font-weight: 600;
    line-height: 1.2;
}

.knot-body .knot-save,
.knot-body .knot-pdp-stock,
.knot-body .knot-product-category {
    font-family: var(--font-mono);
    font-size: clamp(.75rem, .9vw, .8125rem);
    line-height: 1.3;
}

.knot-body .knot-hero-copy,
.knot-body .knot-editorial-heading-row p,
.knot-body .knot-carousel-heading p,
.knot-body .knot-editorial-card-content small,
.knot-body .knot-section-description {
    font-family: var(--font-mono);
    font-size: clamp(.75rem, 1vw, .875rem);
    line-height: 1.65;
    letter-spacing: -.01em;
}

.knot-body :where(
    input,
    textarea,
    select,
    .knot-static-page p,
    .knot-static-page li,
    .knot-checkout-note,
    .knot-checkout-section p,
    .knot-pdp-desc p,
    .knot-form input,
    .knot-form textarea,
    .knot-checkout-form input,
    .knot-checkout-form textarea,
    .knot-custom-order-intro > p,
    .knot-custom-order-form textarea
) {
    font-family: var(--font-body);
    line-height: 1.65;
}

.knot-body :where(
    .knot-desc-section h2,
    .knot-desc-section li,
    .knot-size-chart-disclosure,
    .knot-size-chart
) {
    font-family: var(--font-mono);
}

@media (max-width: 600px) {
    .knot-body :where(.knot-editorial-header, .knot-products-heading, .knot-carousel-heading) {
        width: calc(100% - 24px);
    }

    .knot-body :where(.knot-editorial-heading-row, .knot-carousel-heading) {
        align-items: center;
        gap: 12px;
    }

    .knot-body .knot-editorial-heading-row > h2,
    .knot-body .knot-carousel-heading > div:first-child {
        max-width: 68%;
    }

    .knot-body .knot-hero-content h1 {
        font-size: clamp(2.5rem, 12vw, 3.75rem);
    }

    .knot-body .knot-editorial-heading-row h2,
    .knot-body .knot-carousel-heading h2 {
        font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    }

    .knot-body .knot-editorial-heading-row > a {
        margin-top: 0;
        font-size: clamp(.6875rem, 2.6vw, .75rem);
    }
}
@media (max-width: 600px) {
    .knot-size-editor-head { align-items: start; }
    .knot-size-editor-row { grid-template-columns: minmax(0, 1fr) 100px; }
    .knot-size-editor-actions { grid-column: 1 / -1; }
}

.knot-membership-card,
.knot-checkout-membership,
.knot-pos-membership {
    border: 1px solid #d9d9d9;
    background: #fff;
}

.knot-membership-card {
    margin-block: 24px;
    padding: 22px;
}

.knot-membership-card-head,
.knot-membership-stats,
.knot-pos-membership {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.knot-membership-card-head p,
.knot-membership-progress,
.knot-membership-history p,
.knot-checkout-membership p {
    margin: 0;
}

.knot-membership-stats {
    margin-top: 20px;
    padding-block: 18px;
    border-block: 1px solid #e6e6e6;
}

.knot-membership-stats div,
.knot-checkout-membership > div {
    display: grid;
    gap: 4px;
}

.knot-membership-history {
    margin-top: 20px;
}

.knot-checkout-membership {
    display: grid;
    gap: 14px;
    margin-block: 18px;
    padding: 16px;
}

.knot-checkout-membership label {
    display: grid;
    grid-template-columns: 1fr 110px;
    align-items: center;
    gap: 12px;
}

.knot-checkout-membership input,
.knot-pos-membership input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #bcbcbc;
    padding: 8px 10px;
}

.knot-checkout-membership-label,
.knot-pos-membership span {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.knot-pos-membership {
    margin-top: 14px;
    padding: 14px;
}

.knot-pos-membership > div,
.knot-pos-membership label {
    display: grid;
    gap: 4px;
}

.knot-pos-membership label {
    width: min(180px, 100%);
}

@media (max-width: 700px) {
    .knot-membership-card-head,
    .knot-membership-stats,
    .knot-pos-membership {
        align-items: stretch;
        flex-direction: column;
    }

    .knot-checkout-membership label {
        grid-template-columns: 1fr;
    }

    .knot-pos-membership label {
        width: 100%;
    }
}


/* Customer membership profile */
.knot-profile-page { padding-block: 48px 72px; font-family: var(--font-body); }
.knot-profile-hero { position: relative; min-height: 310px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .9fr) 300px; align-items: center; overflow: hidden; background: #000; color: #fff; }
.knot-profile-accent { position: absolute; top: 54px; bottom: 54px; left: 0; width: 6px; background: #ef3f4d; }
.knot-profile-identity { min-width: 0; padding: 54px 46px; }
.knot-profile-identity h1 { max-width: 620px; margin: 0; font-family: var(--font-display); font-size: 58px; font-weight: 500; line-height: 1; letter-spacing: 0; overflow-wrap: anywhere; }
.knot-profile-identity strong { display: block; margin-top: 22px; font-family: var(--font-mono); font-size: 62px; font-weight: 500; line-height: .9; letter-spacing: 0; }
.knot-profile-stats { position: relative; z-index: 2; display: grid; gap: 14px; margin: 40px 0; padding: 12px 42px 12px 54px; border-left: 1px solid rgba(255,255,255,.6); font-family: var(--font-mono); }
.knot-profile-stats div { display: grid; gap: 2px; }
.knot-profile-stats dt { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 500; line-height: 1.35; text-transform: uppercase; }
.knot-profile-stats dd { margin: 0; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.35; }
.knot-profile-tier-art { position: relative; align-self: stretch; min-width: 0; }
.knot-profile-mascot { position: absolute; z-index: 2; top: 24px; right: 24px; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: #0a0a0a; }
.knot-profile-mascot img { width: 88%; height: 88%; display: block; object-fit: contain; }
.knot-profile-tier-art > span { position: absolute; right: 14px; bottom: -18px; color: #fff; font-family: var(--font-display); font-size: 78px; font-weight: 500; line-height: .86; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.knot-profile-progress { margin-top: 28px; padding: 23px 24px 20px; border: 1px solid #e1e1e1; background: #fff; }
.knot-profile-progress h2, .knot-profile-panel h2 { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.knot-profile-progress-track { width: 100%; height: 10px; margin-top: 18px; overflow: hidden; background: #e5e5e5; }
.knot-profile-progress-track span { display: block; width: 0; height: 100%; background: #000; }
.knot-profile-progress-track.is-complete span { width: 100%; }
.knot-profile-progress-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 13px; color: #4f4f4f; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; }
.knot-profile-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 16px; margin-top: 16px; }
.knot-profile-panel { min-width: 0; min-height: 220px; padding: 22px; border: 1px solid #e1e1e1; background: #fff; }
.knot-profile-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.knot-profile-panel > header a { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-underline-offset: 3px; }
.knot-profile-order { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; color: #111; text-decoration: none; }
.knot-profile-order img { width: 76px; height: 86px; display: block; border: 1px solid #e3e3e3; background: #f5f5f5; object-fit: cover; }
.knot-profile-order-main { min-width: 0; display: grid; gap: 8px; font-family: var(--font-mono); }
.knot-profile-order-main strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
.knot-profile-order-main small { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #666; font-size: 10px; }
.knot-profile-order-main em { padding: 3px 5px; background: #ededed; color: #222; font-style: normal; }
.knot-profile-order > b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.knot-profile-activity { max-height: 310px; overflow-y: auto; }
.knot-profile-activity-row { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 12px; padding: 0 0 17px; }
.knot-profile-activity-row + .knot-profile-activity-row { padding-top: 16px; border-top: 1px solid #ededed; }
.knot-profile-activity-row > span { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #111; }
.knot-profile-activity-row p { min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.knot-profile-activity-row p > span { color: #555; }
.knot-profile-activity-row time { display: block; margin-top: 6px; color: #777; font-size: 10px; }
.knot-profile-activity-row strong { color: #111; font-weight: 600; }
.knot-profile-activity-row strong.is-negative { color: #4a4a4a; }
.knot-profile-details dl { display: grid; gap: 14px; margin: 0; }
.knot-profile-details dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.knot-profile-details dt { color: #707070; text-transform: uppercase; }
.knot-profile-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.knot-profile-details .knot-profile-address dd { display: grid; gap: 2px; }
.knot-profile-empty { margin: 0; color: #717171; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
    .knot-profile-hero { grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr) 220px; }
    .knot-profile-identity { padding-inline: 36px; }
    .knot-profile-identity h1 { font-size: 46px; }
    .knot-profile-identity strong { font-size: 52px; }
    .knot-profile-stats { padding-inline: 36px 24px; }
    .knot-profile-mascot { width: 150px; height: 150px; }
    .knot-profile-tier-art > span { font-size: 62px; }
    .knot-profile-grid { grid-template-columns: 1fr 1fr; }
    .knot-profile-details { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .knot-profile-page { width: min(100% - 24px, 1180px); padding-block: 24px 48px; }
    .knot-profile-hero { min-height: 470px; display: block; }
    .knot-profile-accent { top: 28px; bottom: auto; height: 50px; width: 5px; }
    .knot-profile-identity { position: relative; z-index: 3; max-width: calc(100% - 112px); padding: 34px 22px 12px 26px; }
    .knot-profile-identity h1 { font-size: 34px; line-height: 1.04; }
    .knot-profile-identity strong { margin-top: 14px; font-size: 46px; }
    .knot-profile-stats { position: absolute; z-index: 3; right: 20px; bottom: 78px; left: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.5); border-left: 0; }
    .knot-profile-stats dd { font-size: 12px; overflow-wrap: anywhere; }
    .knot-profile-mascot { top: 22px; right: 16px; width: 96px; height: 96px; }
    .knot-profile-tier-art { position: absolute; inset: 0; }
    .knot-profile-tier-art > span { right: 14px; bottom: -8px; font-size: 64px; }
    .knot-profile-progress { margin-top: 14px; padding: 20px 16px 17px; }
    .knot-profile-progress-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
    .knot-profile-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
    .knot-profile-details { grid-column: auto; }
    .knot-profile-panel { min-height: 0; padding: 19px 16px; }
}
@media (max-width: 380px) {
    .knot-profile-hero { min-height: 500px; }
    .knot-profile-identity { max-width: calc(100% - 92px); padding-left: 22px; }
    .knot-profile-identity h1 { font-size: 29px; }
    .knot-profile-mascot { width: 80px; height: 80px; }
    .knot-profile-tier-art > span { font-size: 52px; }
    .knot-profile-order { grid-template-columns: 62px minmax(0, 1fr); }
    .knot-profile-order img { width: 62px; height: 72px; }
    .knot-profile-order > b { grid-column: 2; }
}