*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-lg{font-size:1.125rem;line-height:1.7777778}.prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em}.prose-lg :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2222222em;line-height:1.4545455;margin-top:1.0909091em;margin-bottom:1.0909091em}.prose-lg :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.6666667em;margin-bottom:1.6666667em;padding-inline-start:1em}.prose-lg :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.6666667em;margin-top:0;margin-bottom:.8333333em;line-height:1}.prose-lg :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.6666667em;margin-top:1.8666667em;margin-bottom:1.0666667em;line-height:1.3333333}.prose-lg :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.3333333em;margin-top:1.6666667em;margin-bottom:.6666667em;line-height:1.5}.prose-lg :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:.4444444em;line-height:1.5555556}.prose-lg :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.prose-lg :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.prose-lg :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-lg :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.prose-lg :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;border-radius:.3125rem;padding-top:.2222222em;padding-inline-end:.4444444em;padding-bottom:.2222222em;padding-inline-start:.4444444em}.prose-lg :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-lg :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8666667em}.prose-lg :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.875em}.prose-lg :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.75;margin-top:2em;margin-bottom:2em;border-radius:.375rem;padding-top:1em;padding-inline-end:1.5em;padding-bottom:1em;padding-inline-start:1.5em}.prose-lg :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.5555556em}.prose-lg :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.5555556em}.prose-lg :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.6666667em;margin-bottom:.6666667em}.prose-lg :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4444444em}.prose-lg :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4444444em}.prose-lg :where(.prose-lg>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(.prose-lg>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose-lg>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose-lg>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose-lg>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em}.prose-lg :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.6666667em;padding-inline-start:1.5555556em}.prose-lg :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:3.1111111em;margin-bottom:3.1111111em}.prose-lg :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-lg :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-lg :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-lg :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-lg :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.5}.prose-lg :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:.75em;padding-bottom:.75em;padding-inline-start:.75em}.prose-lg :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-lg :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-lg :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.75em;padding-inline-end:.75em;padding-bottom:.75em;padding-inline-start:.75em}.prose-lg :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-lg :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-lg :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.prose-lg :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-lg :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.5;margin-top:1em}.prose-lg :where(.prose-lg>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose-lg>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.right-1{right:.25rem}.right-1\/2{right:50%}.top-0{top:0}.top-1{top:.25rem}.top-1\.5{top:.375rem}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-5{margin-left:1.25rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-32{margin-top:8rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-0{height:0}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[18px\]{height:18px}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-\[500px\]{max-height:500px}.max-h-full{max-height:100%}.min-h-screen{min-height:100vh}.w-1{width:.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[16px\]{min-width:16px}.min-w-\[18px\]{min-width:18px}.min-w-\[80px\]{min-width:80px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[10rem\]{max-width:10rem}.max-w-\[40\%\]{max-width:40%}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.translate-x-3{--tw-translate-x:0.75rem}.transform,.translate-x-3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-8{row-gap:2rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-t-8{border-top-width:8px}.border-dashed{border-style:dashed}.border-amber-100{--tw-border-opacity:1;border-color:rgb(254 243 199/var(--tw-border-opacity,1))}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-sky-100{--tw-border-opacity:1;border-color:rgb(209 250 229/var(--tw-border-opacity,1))}.border-sky-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-100{--tw-border-opacity:1;border-color:rgb(220 252 231/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-orange-100{--tw-border-opacity:1;border-color:rgb(255 237 213/var(--tw-border-opacity,1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-sky-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-50\/50{background-color:rgba(249,250,251,.5)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(199 210 254/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-28{padding-bottom:7rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pr-2{padding-right:.5rem}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-blue-900{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-sky-700{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-sky-900{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-orange-900{--tw-text-opacity:1;color:rgb(124 45 18/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-blue-600{accent-color:#2563eb}.accent-blue-600{accent-color:#ea580c}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.mix-blend-multiply{mix-blend-mode:multiply}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_-4px_20px_rgba\(0\2c 0\2c 0\2c 0\.06\)\]{--tw-shadow:0 -4px 20px rgba(0,0,0,.06);--tw-shadow-colored:0 -4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_-8px_30px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{--tw-shadow:0 -8px 30px rgba(0,0,0,.08);--tw-shadow-colored:0 -8px 30px var(--tw-shadow-color)}.shadow-\[0_-8px_30px_rgba\(0\2c 0\2c 0\2c 0\.08\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.ring-white\/10{--tw-ring-color:hsla(0,0%,100%,.1)}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.\[appearance\:textfield\]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.placeholder\:text-gray-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.placeholder\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-white\/60:focus-within{--tw-ring-color:hsla(0,0%,100%,.6)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/15:hover{background-color:hsla(0,0%,100%,.15)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-red-300:hover{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-black:focus{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}.active\:scale-95:active,.active\:scale-\[0\.98\]:active{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}.active\:bg-blue-100:active{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.active\:bg-orange-100:active{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}.has-\[\:checked\]\:border-blue-500:has(:checked){--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.has-\[\:checked\]\:border-orange-500:has(:checked){--tw-border-opacity:1;border-color:rgb(249 115 22/var(--tw-border-opacity,1))}.has-\[\:checked\]\:bg-blue-50:has(:checked){--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.has-\[\:checked\]\:bg-orange-50:has(:checked){--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:mb-0{margin-bottom:0}.sm\:mb-5{margin-bottom:1.25rem}.sm\:mb-8{margin-bottom:2rem}.sm\:mt-20{margin-top:5rem}.sm\:inline{display:inline}.sm\:hidden{display:none}.sm\:h-10{height:2.5rem}.sm\:h-16{height:4rem}.sm\:h-20{height:5rem}.sm\:h-32{height:8rem}.sm\:h-4{height:1rem}.sm\:h-5{height:1.25rem}.sm\:h-8{height:2rem}.sm\:w-1\/2{width:50%}.sm\:w-10{width:2.5rem}.sm\:w-12{width:3rem}.sm\:w-20{width:5rem}.sm\:w-32{width:8rem}.sm\:w-36{width:9rem}.sm\:w-4{width:1rem}.sm\:min-w-\[20px\]{min-width:20px}.sm\:max-w-\[28\%\]{max-width:28%}.sm\:max-w-xs{max-width:20rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-1\.5{gap:.375rem}.sm\:gap-10{gap:2.5rem}.sm\:gap-2{gap:.5rem}.sm\:gap-4{gap:1rem}.sm\:gap-6{gap:1.5rem}.sm\:p-12{padding:3rem}.sm\:p-14{padding:3.5rem}.sm\:p-16{padding:4rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:pb-0{padding-bottom:0}.sm\:pb-10{padding-bottom:2.5rem}.sm\:pt-8{padding-top:2rem}.sm\:text-left{text-align:left}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-\[11px\]{font-size:11px}.sm\:text-\[15px\]{font-size:15px}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:inline-flex{display:inline-flex}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:border-b-0{border-bottom-width:0}.md\:border-r{border-right-width:1px}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-8{gap:2rem}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}

/* ===== Extracted from Worker inline styles (store + panels) ===== */

.sold-by {
              display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
              margin: 0 0 1.25rem; padding: 0.75rem 1rem;
              background: #f0faf9; border: 1px solid #b2dede; border-radius: 0.85rem;
            }
            .sold-by__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; }
            .sold-by__label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
            .sold-by__name { font-size: 0.95rem; font-weight: 900; color: #061e48; text-decoration: none; }
            .sold-by__name:hover { color: #12a2a2; text-decoration: underline; }
            .sold-by__rating { font-size: 0.8rem; color: #374151; display: inline-flex; align-items: center; gap: 0.35rem; }
            .sold-by__rating--muted { color: #9ca3af; }
            .sold-by__link { margin-left: auto; font-size: 0.8rem; font-weight: 800; color: #12a2a2; text-decoration: none; }
            .sold-by__link:hover { text-decoration: underline; color: #0d8585; }
            @media (max-width: 480px) {
              .sold-by__link { margin-left: 0; width: 100%; }
            }

:root {
              --safe-top: env(safe-area-inset-top, 0px);
              --safe-bottom: env(safe-area-inset-bottom, 0px);
              --safe-left: env(safe-area-inset-left, 0px);
              --safe-right: env(safe-area-inset-right, 0px);
              /* OIQY brand: teal accent + navy trust (from official logo) */
              --color-ink: #1c1917;
              --color-surface: #fffcfa;
              --color-canvas: #f6f3ef;
              --color-muted: #57534e; /* WCAG AA ≥4.5:1 on ivory canvas */
              --color-border: #e7e5e4;
              /* OIQY brand: teal globe + navy wordmark */
              --color-action: #12a2a2;
              --color-action-hover: #0d8585;
              --color-action-soft: #e6f7f7;
              --color-trust: #061e48;
              --color-trust-soft: #eef2f8;
              --color-trust-border: #b2dede;
              --color-success: #047857;
              --color-success-soft: #ecfdf5;
              --color-urgency: #b91c1c;
              --color-urgency-soft: #fef2f2;
              --color-champagne: #c4a574;
              --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
              --text-xs: 0.75rem;
              --text-sm: 0.875rem;
              --text-base: 1rem;
              --text-lg: 1.125rem;
              --text-xl: 1.25rem;
              --text-2xl: 1.5rem;
              --text-3xl: 1.875rem;
              --text-4xl: 2.25rem;
              --leading-tight: 1.2;
              --leading-snug: 1.35;
              --leading-body: 1.65;
              --tracking-tight: -0.025em;
              --tracking-label: 0.06em;
            }

            /* ===== OIQY brand theme surfaces (teal + navy) ===== */
            /* CWV: reserve product image box before full CSS — zero CLS on LCP image */
            .product-card__media {
              position: relative;
              aspect-ratio: 1 / 1;
              display: block;
              overflow: hidden;
              background: #f0ebe6;
            }
            .product-card__media img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }
            .product-gallery-main {
              position: relative;
              aspect-ratio: 1 / 1;
            }
            .site-logo {
              width: auto;
              height: 2.5rem;
              max-height: 2.5rem;
              object-fit: contain;
            }

            body.bg-gray-50 {
              background-color: var(--color-canvas) !important;
              color: var(--color-ink);
            }
            body.bg-gray-50 main,
            body .max-w-7xl {
              color: var(--color-ink);
            }
            .bg-white {
              background-color: var(--color-surface) !important;
            }
            .border-gray-100, .border-gray-200 {
              border-color: var(--color-border) !important;
            }
            .text-gray-400, .text-gray-500, .text-gray-600 {
              color: var(--color-muted) !important;
            }
            /* WCAG: placeholders & disabled-looking UI on ivory */
            body:has(header.site-topbar) ::placeholder {
              color: #57534e !important;
              opacity: 0.85;
            }
            body:has(header.site-topbar) .text-gray-300,
            body:has(header.site-topbar) .text-gray-400 {
              color: #57534e !important;
            }
            body:has(header.site-topbar) .bottom-nav__item {
              color: #57534e;
            }
            body:has(header.site-topbar) .bottom-nav__item.is-active {
              color: var(--color-action, #12a2a2) !important;
            }
            body:has(header.site-topbar) .header-search-btn {
              color: #44403c;
            }
            body:has(header.site-topbar) a:not([class*="btn"]):not(.btn-action) {
              /* links inherit; ensure underline links stay blue-capable */
            }
            body:has(header.site-topbar) .type-label {
              color: #57534e !important;
            }
            /* WCAG 2.1 AA — secondary text ≥4.5:1 on ivory/white */
            body:has(header.site-topbar) .home-section__sub,
            body:has(header.site-topbar) .home-section__title + p,
            body:has(header.site-topbar) .site-footer__heading,
            body:has(header.site-topbar) .site-footer__tagline,
            body:has(header.site-topbar) .site-footer__copy,
            body:has(header.site-topbar) .site-footer__meta,
            body:has(header.site-topbar) .site-footer__col p,
            body:has(header.site-topbar) .product-card .type-label,
            body:has(header.site-topbar) .type-label,
            body:has(header.site-topbar) .text-gray-400,
            body:has(header.site-topbar) .text-gray-500,
            body:has(header.site-topbar) .text-gray-600,
            body:has(header.site-topbar) .home-hero__sub,
            body:has(header.site-topbar) .home-hero__meta,
            body:has(header.site-topbar) .cookie-banner__text {
              color: #44403c !important;
            }
            body:has(header.site-topbar) .site-footer__links a {
              color: #1c1917 !important;
            }
            body:has(header.site-topbar) .site-footer__links a:hover {
              color: var(--color-action, #12a2a2) !important;
            }
            body:has(header.site-topbar) .site-footer__brand-text,
            body:has(header.site-topbar) .home-section__title {
              color: #1c1917 !important;
            }
            body:has(header.site-topbar) .cookie-banner__text a {
              color: #12a2a2 !important;
              font-weight: 700;
            }
            /* Secondary text: never use champagne/gold for body copy */
            .text-champagne, .site-footer__tagline {
              color: var(--color-muted) !important;
            }
            .btn-action:hover, .btn-action:focus-visible {
              background: var(--color-action-hover) !important;
            }
            .btn-action:active {
              background: var(--color-action-hover) !important;
              filter: brightness(0.95);
            }
            /* Product cards: more breathing room, soft card edge */
            .product-card {
              background: var(--color-surface) !important;
              border-color: var(--color-border) !important;
              border-radius: 1.25rem !important;
              overflow: hidden;
              transition: border-color .2s ease, box-shadow .2s ease;
            }
            .product-card:hover {
              border-color: var(--color-trust-border) !important;
              box-shadow: 0 12px 40px -16px rgba(29, 78, 216, 0.18);
            }
            .product-card__media {
              background: #f0ebe6 !important;
            }
            .type-price-lg, .type-price, [class*="type-price"] {
              color: var(--color-ink);
            }
            a.text-blue-600, a.text-blue-500, .text-blue-600, .text-blue-500 {
              color: var(--color-trust) !important;
            }
            .trust-panel {
              background: var(--color-action-soft) !important;
              border: 1px solid var(--color-trust-border) !important;
            }
            .thank-status--pending {
              background: var(--color-action-soft) !important;
              border-color: var(--color-trust-border) !important;
              color: var(--color-action) !important;
            }
            /* Accent ring for focus */
            input:focus, textarea:focus, select:focus {
              border-color: var(--color-trust) !important;
              box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
            }
            .bottom-nav__item.is-active {
              color: var(--color-action) !important;
            }
            .bottom-nav__item.is-active svg {
              color: var(--color-action) !important;
            }
            .site-footer {
              background: var(--color-surface);
              border-top: 1px solid var(--color-border);
            }
            /* Harmonize remaining storefront CTAs (legacy bg-black) to trust-blue */
            body:has(header.site-topbar) a.bg-black,
            body:has(header.site-topbar) button.bg-black,
            body:has(header.site-topbar) .bg-black.text-white {
              background-color: var(--color-action) !important;
              color: #fff !important;
              border-color: var(--color-action) !important;
            }
            body:has(header.site-topbar) a.bg-black:hover,
            body:has(header.site-topbar) button.bg-black:hover,
            body:has(header.site-topbar) .bg-black.text-white:hover {
              background-color: var(--color-action-hover) !important;
              filter: none;
            }
            body:has(header.site-topbar) .hover\:bg-gray-800:hover {
              background-color: var(--color-action-hover) !important;
            }
            body:has(header.site-topbar) .focus\:border-black:focus,
            body:has(header.site-topbar) input:focus,
            body:has(header.site-topbar) textarea:focus,
            body:has(header.site-topbar) select:focus {
              border-color: var(--color-trust) !important;
              outline: none;
            }
            body:has(header.site-topbar) .accent-blue-600 {
              accent-color: var(--color-action);
            }
            body:has(header.site-topbar) .text-sky-700,
            body:has(header.site-topbar) .text-sky-800 {
              color: var(--color-trust) !important;
            }
            body:has(header.site-topbar) .bg-sky-50,
            body:has(header.site-topbar) .bg-sky-100 {
              background-color: var(--color-action-soft) !important;
            }
            body:has(header.site-topbar) .border-sky-100,
            body:has(header.site-topbar) .border-sky-200 {
              border-color: var(--color-trust-border) !important;
            }
            body:has(header.site-topbar) .bg-orange-50,
            body:has(header.site-topbar) .bg-orange-100 {
              background-color: var(--color-action-soft) !important;
            }
            body:has(header.site-topbar) .text-orange-600,
            body:has(header.site-topbar) .text-orange-700,
            body:has(header.site-topbar) .text-orange-800 {
              color: var(--color-action) !important;
            }
            body:has(header.site-topbar) .border-orange-200,
            body:has(header.site-topbar) .border-orange-300 {
              border-color: var(--color-trust-border) !important;
            }
            /* Step indicators on checkout */
            body:has(header.site-topbar) .rounded-full.bg-black {
              background-color: var(--color-action) !important;
            }
            /* Product info emoji badge */
            body:has(header.site-topbar) span.bg-black.text-white.rounded-xl {
              background-color: var(--color-action) !important;
            }
            /* Sticky CTAs / product sticky */
            body:has(header.site-topbar) .product-sticky-cta,
            body:has(header.site-topbar) .cart-sticky-cta {
              background: var(--color-surface) !important;
              border-top-color: var(--color-border) !important;
            }
            /* Footer brand text */
            .site-footer__brand-text {
              color: var(--color-ink, #1c1917);
              font-weight: 900;
              letter-spacing: -0.02em;
            }
            .site-footer__heading {
              color: var(--color-ink, #1c1917);
            }
            .site-footer__links a:hover {
              color: var(--color-action, #12a2a2);
            }
            /* Bottom nav active already themed; ensure inactive muted */
            .bottom-nav {
              background: var(--color-surface, #fffcfa) !important;
              border-top: 1px solid var(--color-border, #e7e5e4) !important;
            }
            /* Cookie consent banner */
            .cookie-banner {
              display: none;
              position: fixed;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 95;
              padding: 0.85rem 1rem calc(0.85rem + var(--safe-bottom, 0px));
              background: var(--color-surface, #fffcfa);
              border-top: 1px solid var(--color-border, #e7e5e4);
              box-shadow: 0 -8px 30px rgba(28, 25, 23, 0.08);
            }
            .cookie-banner.is-visible {
              display: block;
              /* Reserve space before JS measures exact height — cuts CLS on first visit */
              min-height: 5.5rem;
            }
            @media (min-width: 640px) {
              .cookie-banner.is-visible { min-height: 4.25rem; }
            }
            .cookie-banner__inner {
              max-width: 72rem;
              margin: 0 auto;
              display: flex;
              flex-direction: column;
              gap: 0.75rem;
            }
            @media (min-width: 640px) {
              .cookie-banner__inner {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 1.25rem;
              }
            }
            .cookie-banner__text {
              margin: 0;
              font-size: 0.8125rem;
              line-height: 1.45;
              color: var(--color-ink, #1c1917);
            }
            .cookie-banner__text a {
              color: var(--color-action, #12a2a2);
              font-weight: 700;
              text-decoration: underline;
            }
            .cookie-banner__actions {
              display: flex;
              flex-wrap: wrap;
              gap: 0.5rem;
              flex-shrink: 0;
            }
            .cookie-banner__btn {
              min-height: 2.5rem;
              padding: 0.5rem 1rem;
              border-radius: 0.75rem;
              font-size: 0.8125rem;
              font-weight: 800;
              cursor: pointer;
              border: 1px solid var(--color-border, #e7e5e4);
              background: var(--color-surface, #fffcfa);
              color: var(--color-ink, #1c1917);
            }
            .cookie-banner__btn--accept {
              background: var(--color-action, #12a2a2) !important;
              border-color: var(--color-action, #12a2a2) !important;
              color: #fff !important;
            }
            body.has-cookie-banner .cookie-banner { /* spacer handled via padding on main nav */ }
            @media (max-width: 639px) {
              body.has-cookie-banner .bottom-nav {
                bottom: var(--cookie-banner-h, 0px);
              }
            }

            /* ===== Header logo & controls ===== */
            .site-brand {
              display: flex;
              align-items: center;
              max-width: min(42vw, 11rem);
              height: 2.5rem;
              flex-shrink: 0;
            }
            @media (min-width: 640px) {
              .site-brand {
                max-width: 13rem;
                height: 2.75rem;
              }
            }
            .site-logo {
              display: block;
              height: 100%;
              width: auto;
              max-width: 100%;
              max-height: 2.5rem;
              object-fit: contain;
              object-position: left center;
            }
            @media (min-width: 640px) {
              .site-logo { max-height: 2.75rem; }
            }
            .site-logo-text {
              font-size: 1.05rem;
              font-weight: 900;
              letter-spacing: -0.03em;
              line-height: 1.15;
              color: var(--color-ink, #1c1917);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 100%;
            }
            @media (min-width: 640px) {
              .site-logo-text { font-size: 1.25rem; }
            }
            .header-search {
              border-radius: 9999px;
              height: 2.5rem;
              align-items: stretch;
              ring: none;
            }
            @media (min-width: 640px) {
              .header-search { height: 2.75rem; }
            }
            .header-search {
              border: 1px solid var(--color-border, #e7e5e4);
              background: #fff;
            }
            .header-search:focus-within {
              border-color: var(--color-trust, #061e48);
              box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
            }
            .header-search-btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              padding: 0 0.85rem;
              color: #374151;
              background: transparent;
              border: none;
            }
            .header-search-btn:hover { color: #000; background: #f3f4f6; }
            .header-cart {
              height: 2.5rem;
              min-width: 2.5rem;
              padding: 0 0.85rem;
              border-radius: 9999px;
              background: var(--color-surface, #fffcfa);
              color: var(--color-ink, #1c1917);
              border: 1px solid var(--color-border, #e7e5e4);
              box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
            }
            .header-cart:hover {
              border-color: var(--color-trust-border, #b2dede);
              color: var(--color-action, #12a2a2);
            }
            @media (min-width: 640px) {
              .header-cart {
                height: 2.75rem;
                min-width: 2.75rem;
                padding: 0 1rem;
              }
            }
            .header-cart:hover {
              background: var(--color-action-soft, #e6f7f7);
              border-color: var(--color-trust-border, #b2dede);
              color: var(--color-action, #12a2a2);
            }
            .header-cart-badge {
              background: var(--color-action, #12a2a2) !important;
              color: #ffffff !important;
              font-weight: 800;
              letter-spacing: -0.02em;
            }

            /* ===== Tombol aksi konsisten ===== */
            .btn-action {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
              min-height: 2.75rem;
              padding: 0.75rem 1.25rem;
              border-radius: 0.9rem;
              font-weight: 800 !important;
              letter-spacing: 0.01em;
              line-height: 1.2;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              background: var(--color-action) !important;
              color: #fff !important;
              border: none;
              box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28);
              transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
              -webkit-tap-highlight-color: transparent;
            }
            .btn-action:hover,
            .btn-action:focus-visible {
              background: var(--color-action-hover) !important;
              box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
            }
            .btn-action:active { transform: scale(0.98); }
            .btn-action.w-full { width: 100%; }
            /* CTA besar di produk / checkout */
            .btn-action.btn-action--lg,
            button.btn-action.w-full.py-4,
            a.btn-action.w-full {
              min-height: 3.25rem;
              padding: 0.9rem 1.35rem;
              border-radius: 1rem;
              font-size: 1.05rem;
            }
            @media (min-width: 640px) {
              .btn-action.btn-action--lg,
              button.btn-action.w-full.py-4,
              a.btn-action.w-full {
                min-height: 3.5rem;
                font-size: 1.125rem;
              }
            }
            /* Tombol sekunder (hitam) */
            .btn-secondary {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 2.75rem;
              padding: 0.7rem 1.2rem;
              border-radius: 0.9rem;
              font-weight: 700;
              background: #0a0a0a;
              color: #fff;
              border: none;
              transition: background 0.15s ease, transform 0.1s ease;
            }
            .btn-secondary:hover { background: #262626; }
            .btn-secondary:active { transform: scale(0.98); }

            /* =========================================================
               DESIGN SYSTEM — storefront UI primitives
               ========================================================= */
            .ds-stack { display: flex; flex-direction: column; gap: 1rem; }
            .ds-stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
            .ds-row { display: flex; align-items: center; gap: 0.75rem; }
            .ds-row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

            /* --- Card --- */
            .ds-card {
              background: var(--color-surface, #fff);
              border: 1px solid var(--color-border, #e5e7eb);
              border-radius: 1rem;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              overflow: hidden;
            }
            .ds-card-body { padding: 1.25rem 1.25rem 1.35rem; }
            @media (min-width: 640px) {
              .ds-card-body { padding: 1.5rem; }
            }
            .ds-card-muted {
              background: #f9fafb;
              border: 1px solid var(--color-border, #e5e7eb);
              border-radius: 1rem;
              padding: 1rem 1.25rem;
            }

            /* --- Buttons --- */
            .btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
              min-height: 2.75rem;
              padding: 0.7rem 1.2rem;
              border-radius: 0.9rem;
              font-weight: 700;
              font-size: 0.9375rem;
              line-height: 1.2;
              text-decoration: none;
              border: none;
              cursor: pointer;
              transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
              -webkit-tap-highlight-color: transparent;
            }
            .btn:active { transform: scale(0.98); }
            .btn:disabled, .btn[disabled] {
              opacity: 0.55;
              cursor: not-allowed;
              transform: none;
            }
            .btn-sm {
              min-height: 2.25rem;
              padding: 0.45rem 0.85rem;
              font-size: 0.8125rem;
              border-radius: 0.7rem;
            }
            .btn-lg {
              min-height: 3.25rem;
              padding: 0.9rem 1.35rem;
              font-size: 1.05rem;
              border-radius: 1rem;
              font-weight: 800;
            }
            .btn-block { width: 100%; }
            .btn-primary, .btn.btn-primary {
              background: var(--color-action, #12a2a2);
              color: #fff;
              box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28);
            }
            .btn-primary:hover, .btn.btn-primary:hover {
              background: var(--color-action-hover, #c2410c);
            }
            .btn-dark, .btn.btn-dark {
              background: var(--color-ink, #0a0a0a);
              color: #fff;
            }
            .btn-dark:hover { background: #262626; }
            .btn-ghost, .btn.btn-ghost {
              background: transparent;
              color: var(--color-ink, #0a0a0a);
              border: 1.5px solid var(--color-border, #e5e7eb);
            }
            .btn-ghost:hover { background: #f3f4f6; }
            .btn-soft, .btn.btn-soft {
              background: var(--color-action-soft, #fff7ed);
              color: var(--color-action-hover, #c2410c);
            }
            .btn-soft:hover { background: #ffedd5; }

            /* Alias: keep btn-action in sync with design system */
            .btn-action {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
              min-height: 2.75rem;
              padding: 0.75rem 1.25rem;
              border-radius: 0.9rem;
              font-weight: 800 !important;
              letter-spacing: 0.01em;
              line-height: 1.2;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              background: var(--color-action) !important;
              color: #fff !important;
              border: none;
              box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28);
              transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
              -webkit-tap-highlight-color: transparent;
            }
            .btn-action:hover, .btn-action:focus-visible {
              background: var(--color-action-hover) !important;
              box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
            }
            .btn-action:active { transform: scale(0.98); }
            .btn-action.w-full, .btn-block.btn-action { width: 100%; }
            button.btn-action.w-full.py-4,
            a.btn-action.w-full {
              min-height: 3.25rem;
              padding: 0.9rem 1.35rem;
              border-radius: 1rem;
              font-size: 1.05rem;
            }

            /* --- Form controls --- */
            .ds-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
            .ds-label, label.ds-label {
              font-size: 0.75rem;
              font-weight: 700;
              letter-spacing: 0.06em;
              text-transform: uppercase;
              color: var(--color-muted, #57534e);
            }
            .ds-input, .ds-select, .ds-textarea,
            input.ds-input, select.ds-select, textarea.ds-textarea {
              width: 100%;
              max-width: 100%;
              min-height: 2.75rem;
              padding: 0.65rem 0.9rem;
              font-size: max(16px, 1rem);
              line-height: 1.45;
              color: var(--color-ink, #0a0a0a);
              background: #fff;
              border: 1.5px solid var(--color-border, #e5e7eb);
              border-radius: 0.75rem;
              outline: none;
              transition: border-color 0.15s ease, box-shadow 0.15s ease;
              box-sizing: border-box;
            }
            .ds-textarea, textarea.ds-textarea {
              min-height: 6rem;
              resize: vertical;
            }
            .ds-input:focus, .ds-select:focus, .ds-textarea:focus,
            input.ds-input:focus, select.ds-select:focus, textarea.ds-textarea:focus {
              border-color: #44403c;
              box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
            }
            .ds-help {
              font-size: 0.8125rem;
              color: var(--color-muted, #57534e);
              line-height: 1.4;
            }
            .ds-error {
              font-size: 0.8125rem;
              color: var(--color-urgency, #dc2626);
              font-weight: 600;
            }

            /* --- Badge --- */
            .badge {
              display: inline-flex;
              align-items: center;
              gap: 0.25rem;
              padding: 0.2rem 0.55rem;
              border-radius: 999px;
              font-size: 0.7rem;
              font-weight: 700;
              line-height: 1.2;
              white-space: nowrap;
            }
            .badge-neutral { background: #f3f4f6; color: #374151; }
            .badge-success { background: var(--color-success-soft, #ecfdf5); color: var(--color-success, #059669); }
            .badge-warning { background: #fff7ed; color: #c2410c; }
            .badge-danger { background: var(--color-urgency-soft, #fef2f2); color: var(--color-urgency, #dc2626); }
            .badge-info { background: var(--color-trust-soft, #e0f2fe); color: var(--color-trust, #0369a1); }
            .badge-solid {
              background: var(--color-urgency, #dc2626);
              color: #fff;
              font-weight: 800;
              letter-spacing: 0.04em;
              text-transform: uppercase;
              border-radius: 0.4rem;
              padding: 0.15rem 0.45rem;
              font-size: 0.65rem;
            }

            /* --- Alert / notice --- */
            .ds-alert {
              padding: 0.85rem 1rem;
              border-radius: 0.85rem;
              font-size: 0.9rem;
              line-height: 1.5;
              border: 1px solid transparent;
            }
            .ds-alert-success {
              background: var(--color-success-soft, #ecfdf5);
              border-color: #a7f3d0;
              color: #065f46;
            }
            .ds-alert-info {
              background: var(--color-trust-soft, #e0f2fe);
              border-color: var(--color-trust-border, #bae6fd);
              color: #0c4a6e;
            }
            .ds-alert-warning {
              background: #fff7ed;
              border-color: #fed7aa;
              color: #9a3412;
            }
            .ds-alert-danger {
              background: var(--color-urgency-soft, #fef2f2);
              border-color: #fecaca;
              color: #991b1b;
            }

            /* --- Table (store + light admin assist) --- */
            .ds-table-wrap {
              width: 100%;
              max-width: 100%;
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              border: 1px solid var(--color-border, #e5e7eb);
              border-radius: 0.85rem;
              background: #fff;
            }
            .ds-table {
              width: 100%;
              border-collapse: collapse;
              font-size: 0.875rem;
            }
            .ds-table th {
              text-align: left;
              padding: 0.65rem 0.85rem;
              background: #f3f4f6;
              color: #44403c;
              font-size: 0.7rem;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.03em;
              white-space: nowrap;
              border-bottom: 1px solid var(--color-border, #e5e7eb);
            }
            .ds-table td {
              padding: 0.75rem 0.85rem;
              border-bottom: 1px solid #f3f4f6;
              vertical-align: middle;
              color: #1f2937;
            }
            .ds-table tr:last-child td { border-bottom: none; }

            /* --- Empty state --- */
            .ds-empty {
              text-align: center;
              padding: 2.5rem 1.25rem;
              color: #44403c;
            }
            .ds-empty-title {
              font-size: 1.15rem;
              font-weight: 800;
              color: var(--color-ink, #0a0a0a);
              margin: 0 0 0.35rem;
            }
            .ds-empty-desc {
              font-size: 0.95rem;
              line-height: 1.5;
              margin: 0 0 1.25rem;
            }

            /* --- Divider --- */
            .ds-divider {
              border: none;
              border-top: 1px solid var(--color-border, #e5e7eb);
              margin: 1.25rem 0;
            }

            /* --- Chip / pill filter --- */
            .ds-chip {
              display: inline-flex;
              align-items: center;
              padding: 0.4rem 0.85rem;
              border-radius: 999px;
              font-size: 0.8125rem;
              font-weight: 600;
              border: 1.5px solid var(--color-border, #e5e7eb);
              background: #fff;
              color: #374151;
              text-decoration: none;
              transition: background 0.15s ease, border-color 0.15s ease;
            }
            .ds-chip:hover { background: #f9fafb; }
            .ds-chip.is-active, .ds-chip[aria-current="page"] {
              background: var(--color-ink, #0a0a0a);
              border-color: var(--color-ink, #0a0a0a);
              color: #fff;
            }

            /* --- Section title --- */
            .ds-section-title {
              font-size: 1.25rem;
              font-weight: 900;
              letter-spacing: -0.025em;
              color: var(--color-ink, #0a0a0a);
              line-height: 1.2;
              margin: 0 0 1rem;
            }
            @media (min-width: 640px) {
              .ds-section-title { font-size: 1.5rem; }
            }

            .badge-urgency {
              display: inline-block;
              background: var(--color-urgency-soft);
              color: var(--color-urgency);
              font-weight: 700;
              border-radius: 999px;
              padding: 0.2rem 0.55rem;
              font-size: 0.7rem;
            }
            .badge-sale {
              display: inline-block;
              background: var(--color-urgency);
              color: #fff;
              font-weight: 800;
              border-radius: 0.4rem;
              padding: 0.15rem 0.45rem;
              font-size: 0.65rem;
              letter-spacing: 0.04em;
              text-transform: uppercase;
            }
            .trust-panel {
              background: var(--color-trust-soft);
              border: 1px solid var(--color-trust-border);
              color: #0c4a6e;
              border-radius: 1rem;
            }
            .trust-panel strong { color: var(--color-trust); }
            .stock-ok { color: var(--color-success) !important; font-weight: 700; }
            .stock-low { color: var(--color-urgency) !important; font-weight: 700; }

            .type-label {
              font-size: var(--text-xs);
              font-weight: 700;
              letter-spacing: var(--tracking-label);
              text-transform: uppercase;
              color: var(--color-muted);
              line-height: var(--leading-tight);
            }
            .type-product-title {
              font-size: var(--text-sm);
              font-weight: 700;
              color: var(--color-ink);
              line-height: var(--leading-snug);
              letter-spacing: -0.01em;
            }
            @media (min-width: 640px) {
              .type-product-title { font-size: var(--text-base); }
            }
            .type-price {
              font-size: var(--text-lg);
              font-weight: 900;
              color: var(--color-ink);
              letter-spacing: var(--tracking-tight);
              font-variant-numeric: tabular-nums;
              line-height: var(--leading-tight);
            }
            @media (min-width: 640px) {
              .type-price { font-size: var(--text-xl); }
            }
            .type-price-lg {
              font-size: var(--text-4xl);
              font-weight: 900;
              color: var(--color-ink);
              letter-spacing: var(--tracking-tight);
              font-variant-numeric: tabular-nums;
              line-height: var(--leading-tight);
            }
            @media (min-width: 640px) {
              .type-price-lg { font-size: 3rem; }
            }
            .type-heading {
              font-weight: 900;
              color: var(--color-ink);
              letter-spacing: var(--tracking-tight);
              line-height: var(--leading-tight);
            }
            .type-body {
              font-size: var(--text-base);
              line-height: var(--leading-body);
              color: #374151;
            }
            .type-cta { font-weight: 800; letter-spacing: 0.01em; }
            .prose-product {
              font-size: var(--text-base);
              line-height: var(--leading-body);
              color: #374151;
              word-wrap: break-word;
            }

            *, *::before, *::after { box-sizing: border-box; }
            * { -webkit-tap-highlight-color: transparent; }
            html { scroll-behavior: smooth; }
            body {
              margin: 0;
              padding-top: var(--safe-top);
              min-height: 100vh;
              min-height: 100dvh;
              display: flex;
              flex-direction: column;
              background: var(--color-canvas, #f9fafb);
              color: var(--color-ink, #0a0a0a);
              font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
              font-size: var(--text-base, 1rem);
              line-height: var(--leading-body, 1.65);
              overscroll-behavior-y: contain;
              overflow-x: hidden;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              -webkit-overflow-scrolling: touch;
              text-rendering: optimizeLegibility;
            }
            input, select, textarea, button { font-family: inherit; }
            input[type="text"], input[type="email"], input[type="number"], input[type="password"],
            input[type="search"], input[type="tel"], input[type="url"], select, textarea {
              font-size: max(16px, 1rem);
              line-height: 1.45;
            }
            main h1, main h2, main h3 {
              color: var(--color-ink, #0a0a0a);
              letter-spacing: var(--tracking-tight, -0.025em);
            }

            img { max-width: 100%; height: auto; display: block; }
            a { color: inherit; }
            header.site-topbar {
              background: var(--color-surface, #fffcfa);
              color: var(--color-ink, #1c1917);
              border-bottom: 1px solid var(--color-border, #e7e5e4);
              box-shadow: 0 1px 0 rgba(28, 25, 23, 0.04);
            }
            main { flex-grow: 1; width: 100%; }

/* ===== NATIVE APP FEEL + CWV ===== */
            /* Prevent iOS zoom on input focus */
            input, select, textarea { font-size: 16px !important; }
            /* Smooth active press */
            .pressable { transition: transform 0.15s ease, opacity 0.15s ease; }
            .pressable:active { transform: scale(0.97); opacity: 0.9; }
            /* Custom scrollbar (desktop) */
            ::-webkit-scrollbar { width: 8px; height: 8px; }
            ::-webkit-scrollbar-track { background: transparent; }
            ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
            ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
            /* Bottom nav safe area */
            .bottom-nav {
              padding-bottom: max(0.5rem, var(--safe-bottom));
              padding-left: var(--safe-left);
              padding-right: var(--safe-right);
            }
            /* Sticky product CTA safe area */
            .product-sticky-cta {
              padding-bottom: max(1rem, var(--safe-bottom));
            }
            /* Line clamp utility */
            .line-clamp-2 {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            /* Focus ring — brand teal */
            input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
              outline: 2px solid #12a2a2;
              outline-offset: 2px;
            }
            /* Skip link (a11y) */
            /* Touch targets */
            .btn-action, .sp-btn, .admin-btn, .header-cart, .bottom-nav__item {
              min-height: 44px;
            }
            .sp-btn, .admin-btn {
              display: inline-flex; align-items: center; justify-content: center;
              gap: 0.35rem;
            }
            /* Form controls polish */
            .ds-input, .sp-input, .sp-select, .sp-textarea {
              transition: border-color 0.15s ease, box-shadow 0.15s ease;
            }
            .ds-input:focus, .sp-input:focus, .sp-select:focus, .sp-textarea:focus {
              border-color: #12a2a2 !important;
              box-shadow: 0 0 0 3px rgba(18,162,162,0.2);
              outline: none;
            }

            /* Product image upload progress */
            .img-upload-status {
              margin-top: 0.65rem;
              padding: 0.65rem 0.75rem;
              border-radius: 0.75rem;
              background: #f0fdfa;
              border: 1px solid #99f6e4;
            }
            .img-upload-status__bar {
              height: 6px;
              border-radius: 9999px;
              background: #ccfbf1;
              overflow: hidden;
              margin-bottom: 0.4rem;
            }
            .img-upload-status__fill {
              display: block;
              height: 100%;
              width: 0%;
              border-radius: 9999px;
              background: linear-gradient(90deg, #12a2a2, #0d9488);
              transition: width 0.25s ease;
            }
            .img-upload-status__fill.is-indeterminate {
              width: 40% !important;
              animation: imgUploadIndeterminate 1s ease-in-out infinite;
            }
            @keyframes imgUploadIndeterminate {
              0% { transform: translateX(-120%); }
              100% { transform: translateX(280%); }
            }
            .img-upload-status__text {
              margin: 0;
              font-size: 0.75rem;
              font-weight: 700;
              color: #0f766e;
            }

            /* Sold-by contact CTA */
            .sold-by__link {
              display: inline-flex; align-items: center;
              font-size: 0.8rem; font-weight: 800;
              color: #0f766e; text-decoration: none;
              padding: 0.35rem 0.75rem; border-radius: 9999px;
              background: #f0fdfa; border: 1px solid #99f6e4;
              min-height: 36px;
            }
            .sold-by__link:hover { background: #ccfbf1; color: #115e59; }
            .sold-by__link--muted { opacity: 0.6; cursor: default; }
            /* Tables: horizontal scroll hint on mobile */
            .sp-table, .admin-table {
              width: 100%; border-collapse: collapse;
            }
            .sp-card { -webkit-overflow-scrolling: touch; }
            /* Selection color brand */
            ::selection { background: rgba(18,162,162,0.25); }
            /* Image fade-in (avoid layout flash) */
            img { max-width: 100%; height: auto; }
            img[loading="lazy"] { background: #f3f4f6; }
            /* Hide bottom nav when keyboard open is hard; keep simple */
            @media (min-width: 640px) {
              .bottom-nav { display: none !important; }
              .pb-bottom-nav { padding-bottom: 0 !important; }
            }
            @media (prefers-reduced-motion: reduce) {
              html { scroll-behavior: auto; }
              *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
              }
              .product-card:hover .product-card__media img { transform: none; }
              .product-card:active { transform: none; }
            }
            /* CLS: reserved space for sticky chrome */
            .product-sticky-cta { min-height: 4.5rem; contain: layout style; }
            .bottom-nav { min-height: 4rem; contain: layout style; }
            header.sticky { contain: layout style; }
            /* Below-fold sections: kurangi work render awal */
            /* Product page: variant chips + lightbox (tanpa rebuild Tailwind) */
            .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; }
            input.peer:checked + span {
              border-color: #111 !important;
              background: #111 !important;
              color: #fff !important;
            }
            input.peer:focus-visible + span { box-shadow: 0 0 0 2px rgba(0,0,0,0.25); }
            .cursor-zoom-in { cursor: zoom-in; }
            #product-lightbox.flex { display: flex; }
            #product-lightbox.hidden { display: none; }

            /* Sticky chrome: layer + contain untuk scroll jank */
            header.sticky,
            .admin-shell-header.sticky {
              transform: translateZ(0);
              backface-visibility: hidden;
              contain: layout style;
            }
            .product-sticky-cta {
              transform: translateZ(0);
              contain: layout style;
              padding-bottom: max(1rem, var(--safe-bottom));
            }
            .bottom-nav {
              transform: translateZ(0);
              contain: layout style;
              padding-bottom: max(0px, var(--safe-bottom));
            }
            /* Horizontal scroller generik (thumbs, chips) */
            .h-scroll {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              overscroll-behavior-x: contain;
              touch-action: pan-x;
              scrollbar-width: none;
            }
            .h-scroll::-webkit-scrollbar { display: none; }

            .cwv-defer {
              content-visibility: auto;
              contain-intrinsic-size: auto 320px;
            }
            /* Kurangi cost paint di mobile */
            @media (max-width: 639px) {
              .product-card__media img { mix-blend-mode: normal; }
              .product-card:hover .product-card__media img { transform: none; }
              .product-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
            }
            /* Image default stabil untuk CLS */
            img {
              max-width: 100%;
              height: auto;
              display: block;
              background-color: transparent;
            }
            /* Hindari FOUC layout main */
            main { min-height: 50vh; }
            /* Product grid — fluid & consistent */
            .product-grid {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 0.75rem;
            }
            @media (min-width: 640px) {
              .product-grid { gap: 1rem; }
            }
            @media (min-width: 768px) {
              .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
            }
            @media (min-width: 1024px) {
              .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
            }
            .product-card {
              display: flex;
              flex-direction: column;
              background: #fff;
              border-radius: 1rem;
              border: 1px solid rgba(243, 244, 246, 0.9);
              overflow: hidden;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              content-visibility: auto;
              contain-intrinsic-size: auto 280px;
              contain: content;
            }
            @media (hover: hover) and (pointer: fine) {
              .product-card {
                transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
              }
            }
            @media (min-width: 640px) {
              .product-card { border-radius: 1.25rem; }
            }
            .product-card:hover {
              box-shadow: 0 12px 28px rgba(0,0,0,0.08);
              border-color: #e5e7eb;
            }
            .product-card:active { transform: scale(0.98); }
            .product-card__media {
              position: relative;
              aspect-ratio: 1 / 1;
              background: #f3f4f6;
              display: block;
              padding: 0;
              overflow: hidden;
            }
            .product-card__media img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              mix-blend-mode: normal;
              display: block;
            }
            @media (hover: hover) and (pointer: fine) {
              .product-card__media img {
                transition: transform 0.45s ease;
              }
              .product-card:hover .product-card__media img {
                transform: scale(1.04);
              }
            }
            .product-gallery-main { position: relative; }
            .product-gallery-main img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }

            /* ===== Footer responsif ===== */
            .site-footer {
              margin-top: auto;
              background: #fff;
              border-top: 1px solid #e5e7eb;
            }
            .site-footer--bottom-nav {
              margin-bottom: 4.25rem; /* ruang bottom nav mobile */
              padding-bottom: env(safe-area-inset-bottom, 0);
            }
            @media (min-width: 640px) {
              .site-footer--bottom-nav {
                margin-bottom: 0;
              }
            }
            .site-footer__inner {
              max-width: 80rem;
              margin: 0 auto;
              padding: 2rem 1rem 1.75rem;
            }
            @media (min-width: 640px) {
              .site-footer__inner {
                padding: 2.75rem 1.5rem 2.25rem;
              }
            }
            .site-footer__stack {
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 1.15rem;
            }
            @media (min-width: 640px) {
              .site-footer__stack { gap: 1.35rem; }
            }
            .site-footer__logo {
              display: block;
              height: 2.25rem;
              width: auto;
              max-width: 10rem;
              object-fit: contain;
              object-position: left center;
            }
            .site-footer__brand {
              display: inline-flex;
              align-items: center;
              line-height: 1;
              transition: opacity 0.15s ease;
            }
            .site-footer__brand:hover { opacity: 0.8; }
            .site-footer__brand img {
              height: 2rem;
              width: auto;
              max-width: 10rem;
              object-fit: contain;
              display: block;
            }
            @media (min-width: 640px) {
              .site-footer__brand img { height: 2.25rem; max-width: 12rem; }
            }
            .site-footer__brand-text {
              font-size: 1.125rem;
              font-weight: 900;
              letter-spacing: -0.02em;
              color: #111827;
            }
            .site-footer__nav {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              gap: 0.35rem 0.15rem;
              max-width: 36rem;
            }
            .site-footer__nav a {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 2.5rem;
              padding: 0.35rem 0.75rem;
              font-size: 0.8125rem;
              font-weight: 600;
              color: #44403c;
              text-decoration: none;
              border-radius: 0.5rem;
              transition: color 0.15s ease, background 0.15s ease;
            }
            .site-footer__nav a:hover {
              color: #111827;
              background: #f3f4f6;
            }
            @media (min-width: 640px) {
              .site-footer__nav a {
                min-height: 2.25rem;
                padding: 0.25rem 0.85rem;
                font-size: 0.875rem;
              }
            }
            .site-footer__social {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              gap: 0.65rem 0.85rem;
            }
            .site-footer__social a,
            .site-footer__social img {
              display: block;
            }
            .site-footer__social img {
              width: 1.5rem;
              height: 1.5rem;
              object-fit: contain;
            }
            @media (min-width: 640px) {
              .site-footer__social img {
                width: 1.75rem;
                height: 1.75rem;
              }
            }
            .site-footer__contact {
              width: 100%;
              max-width: 28rem;
              padding-top: 1rem;
              border-top: 1px solid #f3f4f6;
              font-size: 0.8125rem;
              color: #44403c;
              line-height: 1.55;
            }
            @media (min-width: 640px) {
              .site-footer__contact {
                font-size: 0.875rem;
                max-width: 32rem;
              }
            }
            .site-footer__contact-address {
              margin: 0 0 0.35rem;
              color: #4b5563;
            }
            .site-footer__contact-links {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              gap: 0.25rem 0.65rem;
              margin: 0;
            }
            .site-footer__contact-links a {
              color: #4b5563;
              font-weight: 600;
              text-decoration: none;
              word-break: break-word;
            }
            .site-footer__contact-links a:hover { color: #111827; }
            .site-footer__dot {
              color: #d1d5db;
              user-select: none;
            }
                        .site-footer__payments {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              gap: 0.45rem 0.6rem;
            }
            .site-footer__payments img,
            .pay-badge {
              height: 1.1rem !important;
              width: auto !important;
              max-width: 2.5rem !important;
              max-height: 1.1rem !important;
              object-fit: contain;
              display: block;
              opacity: 0.88;
            }
            @media (min-width: 640px) {
              .site-footer__payments img,
              .pay-badge {
                height: 1.2rem !important;
                max-width: 2.75rem !important;
                max-height: 1.2rem !important;
              }
            }
            /* Buy box payment row (product detail / checkout) */
            .pay-badges {
              margin-top: 0.85rem;
              padding-top: 0.85rem;
              border-top: 1px solid #f3f4f6;
              text-align: center;
            }
            .pay-badges__label {
              display: block;
              font-size: 0.625rem;
              font-weight: 700;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: #44403c;
              margin-bottom: 0.45rem;
            }
            .pay-badges__row {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              gap: 0.4rem 0.55rem;
            }
            /* Trust strip under ATC */
            .buy-box-trust {
              display: grid;
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 0.35rem;
              margin-top: 1rem;
              padding-top: 0.9rem;
              border-top: 1px solid #f3f4f6;
            }
            .buy-box-trust__item {
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 0.3rem;
              padding: 0 0.2rem;
            }
            .buy-box-trust__icon {
              width: 1.1rem;
              height: 1.1rem;
              color: #059669;
              flex-shrink: 0;
            }
            .buy-box-trust__item span {
              font-size: 0.625rem;
              font-weight: 700;
              line-height: 1.25;
              color: #4b5563;
            }
            @media (min-width: 640px) {
              .buy-box-trust__item span { font-size: 0.7rem; }
              .buy-box-trust__icon { width: 1.2rem; height: 1.2rem; }
            }
            .site-footer__copy {
              width: 100%;
              max-width: 24rem;
              margin: 0;
              padding-top: 1rem;
              border-top: 1px solid #f3f4f6;
              font-size: 0.75rem;
              color: #44403c;
              line-height: 1.45;
            }

            /* ===== Footer (multi-column) ===== */
            .site-footer {
              margin-top: auto;
              background: #fafafa;
              border-top: 1px solid #e5e7eb;
            }
            .site-footer--bottom-nav {
              margin-bottom: 4.25rem;
              padding-bottom: env(safe-area-inset-bottom, 0);
            }
            @media (min-width: 640px) {
              .site-footer--bottom-nav { margin-bottom: 0; }
            }
            .site-footer__inner {
              max-width: 80rem;
              margin: 0 auto;
              padding: 2rem 1rem 1.5rem;
            }
            @media (min-width: 640px) {
              .site-footer__inner { padding: 2.75rem 1.5rem 1.75rem; }
            }
            .site-footer__grid {
              display: grid;
              grid-template-columns: 1fr;
              gap: 1.75rem 1.5rem;
            }
            @media (min-width: 640px) {
              .site-footer__grid {
                grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
                gap: 2rem 1.75rem;
                align-items: start;
              }
            }
            .site-footer__col--brand { text-align: left; }
            .site-footer__brand {
              display: inline-flex;
              align-items: center;
              line-height: 1;
              transition: opacity 0.15s ease;
            }
            .site-footer__brand:hover { opacity: 0.8; }
            .site-footer__logo,
            .site-footer__brand img {
              display: block;
              height: 2rem;
              width: auto;
              max-width: 10rem;
              object-fit: contain;
            }
            @media (min-width: 640px) {
              .site-footer__logo,
              .site-footer__brand img { height: 2.25rem; max-width: 12rem; }
            }
            .site-footer__brand-text {
              font-size: 1.125rem;
              font-weight: 900;
              letter-spacing: -0.02em;
              color: #111827;
            }
            .site-footer__tagline {
              margin: 0.75rem 0 0;
              font-size: 0.8125rem;
              line-height: 1.5;
              color: #44403c;
              max-width: 18rem;
            }
            .site-footer__col .site-footer__social {
              margin-top: 1rem;
              justify-content: flex-start;
            }
            .site-footer__heading {
              margin: 0 0 0.65rem;
              font-size: 0.7rem;
              font-weight: 800;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: #44403c;
            }
            .site-footer__links {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 0.45rem;
            }
            .site-footer__links a {
              font-size: 0.875rem;
              font-weight: 600;
              color: #374151;
              text-decoration: none;
              line-height: 1.35;
              transition: color 0.15s ease;
            }
            .site-footer__links a:hover { color: #111827; }
            .site-footer__contact {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 0.35rem;
            }
            .site-footer__contact-address {
              margin: 0;
              font-size: 0.8125rem;
              line-height: 1.45;
              color: #44403c;
            }
            .site-footer__contact-line {
              font-size: 0.8125rem;
              font-weight: 600;
              color: #374151;
              text-decoration: none;
            }
            .site-footer__contact-line:hover { color: #111827; }
            .site-footer__muted {
              margin: 0;
              font-size: 0.8125rem;
              color: #44403c;
              line-height: 1.45;
            }
            .site-footer__col .site-footer__payments {
              margin-top: 1rem;
              justify-content: flex-start;
            }
            .site-footer__bottom {
              margin-top: 1.75rem;
              padding-top: 1.15rem;
              border-top: 1px solid #e5e7eb;
            }
            .site-footer__copy {
              margin: 0;
              width: 100%;
              max-width: none;
              padding-top: 0;
              border-top: none;
              font-size: 0.75rem;
              color: #44403c;
              line-height: 1.45;
              text-align: left;
            }
            .site-footer__social {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.5rem;
            }
            .site-footer__social a,
            .site-footer__social img { display: block; }
            .site-footer__social img {
              width: 1.5rem;
              height: 1.5rem;
              object-fit: contain;
              opacity: 0.85;
              transition: opacity 0.15s ease;
            }
            .site-footer__social a:hover img { opacity: 1; }
            .site-footer__payments {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.45rem 0.6rem;
            }

            /* ===== Admin shell (mobile-first) ===== */
            .admin-shell-header {
              background: #0a0a0a;
              border-bottom: 1px solid rgba(255,255,255,0.08);
              /* Layer terpisah = scroll main thread lebih ringan */
              transform: translateZ(0);
              contain: layout style;
            }
            .admin-shell-inner {
              max-width: 80rem;
              margin: 0 auto;
              padding: 0.5rem 1rem 0.65rem;
            }
            @media (min-width: 640px) {
              .admin-shell-inner { padding: 0.65rem 1.5rem 0.75rem; }
            }
            .admin-shell-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 0.75rem;
              min-height: 2.5rem;
            }
            .admin-shell-badge {
              display: inline-flex;
              align-items: center;
              font-size: 0.7rem;
              font-weight: 900;
              letter-spacing: 0.06em;
              background: rgba(255,255,255,0.12);
              color: #fff;
              padding: 0.4rem 0.7rem;
              border-radius: 0.5rem;
              text-decoration: none;
              flex-shrink: 0;
            }
            .admin-shell-badge:hover { background: rgba(255,255,255,0.18); }
            .admin-shell-actions {
              display: flex;
              align-items: center;
              gap: 0.25rem;
              flex-shrink: 0;
            }
            .admin-shell-actions a {
              font-size: 0.7rem;
              font-weight: 700;
              color: #44403c;
              text-decoration: none;
              padding: 0.4rem 0.65rem;
              border-radius: 0.45rem;
              white-space: nowrap;
            }
            .admin-shell-actions a:hover { color: #fff; background: rgba(255,255,255,0.08); }
            .admin-shell-actions a.admin-logout { color: #f87171; }
            .admin-shell-actions a.admin-logout:hover { color: #fecaca; background: rgba(248,113,113,0.12); }
            .admin-shell-nav {
              display: flex;
              align-items: center;
              gap: 0.4rem;
              margin-top: 0.5rem;
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              overscroll-behavior-x: contain;
              touch-action: pan-x;
              scrollbar-width: none;
              padding-bottom: 0.15rem;
              contain: layout style;
            }
            .admin-shell-nav::-webkit-scrollbar { display: none; }
            .admin-shell-nav a {
              flex-shrink: 0;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 2.25rem;
              padding: 0.4rem 0.85rem;
              border-radius: 999px;
              font-size: 0.75rem;
              font-weight: 700;
              color: #d1d5db;
              text-decoration: none;
              background: rgba(255,255,255,0.08);
              border: 1px solid rgba(255,255,255,0.06);
              white-space: nowrap;
              transition: background 0.15s ease, color 0.15s ease;
            }
            .admin-shell-nav a:hover,
            .admin-shell-nav a:focus-visible {
              background: rgba(255,255,255,0.16);
              color: #fff;
              outline: none;
            }
            .admin-shell-nav a.is-active {
              background: #fff;
              color: #111;
              border-color: #fff;
            }
            .admin-footer {
              margin-top: auto;
              border-top: 1px solid #e5e7eb;
              background: #f9fafb;
              padding: 0.85rem 1rem;
              text-align: center;
              font-size: 0.7rem;
              color: #44403c;
            }
            .admin-page {
              width: 100%;
              max-width: 100%;
              overflow-x: hidden;
            }
            .admin-page > .max-w-3xl,
            .admin-page > .max-w-4xl,
            .admin-page > .max-w-5xl,
            .admin-page .max-w-3xl,
            .admin-page .max-w-4xl,
            .admin-page .max-w-5xl {
              max-width: 100% !important;
              width: 100%;
              box-sizing: border-box;
            }
            /* Kartu form: padding longgar di HP */
            .admin-page .admin-card,
            .admin-page > div.bg-white,
            .admin-page form > div.bg-white {
              box-sizing: border-box;
            }
            .admin-page input[type="text"],
            .admin-page input[type="email"],
            .admin-page input[type="number"],
            .admin-page input[type="password"],
            .admin-page input[type="search"],
            .admin-page input[type="url"],
            .admin-page input[type="file"],
            .admin-page select,
            .admin-page textarea {
              max-width: 100%;
              box-sizing: border-box;
            }
            .admin-table-wrap {
              position: relative;
              width: 100%;
              max-width: 100%;
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              overscroll-behavior-x: contain;
              touch-action: pan-x;
              contain: layout style;
              border-radius: 0.75rem;
              border: 1px solid #e5e7eb;
              background: #fff;
            }
            .admin-table-wrap table {
              width: 100%;
              min-width: 40rem;
              border-collapse: collapse;
              display: table;
              table-layout: auto;
            }
            .admin-table-wrap thead th {
              /* Tidak sticky-top: kombinasi sticky 2 sumbu mahal di mobile */
              background: #f3f4f6 !important;
              font-size: 0.7rem;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.03em;
              color: #44403c;
              text-align: left;
              padding: 0.65rem 0.75rem !important;
              white-space: nowrap;
              border-bottom: 1px solid #e5e7eb;
            }
            .admin-table-wrap tbody td {
              padding: 0.75rem !important;
              font-size: 0.875rem;
              vertical-align: middle;
              border-bottom: 1px solid #f3f4f6;
              color: #111827;
              background: #fff;
            }
            .admin-table-wrap tbody tr:last-child td { border-bottom: none; }
            .admin-table-wrap tbody tr:hover td { background: #f9fafb; }
            .admin-table-wrap th:first-child,
            .admin-table-wrap td:first-child {
              position: sticky;
              left: 0;
              z-index: 2;
              background: #fff;
              box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);
            }
            .admin-table-wrap thead th:first-child {
              z-index: 3;
              background: #f3f4f6 !important;
            }
            .admin-table-wrap tbody tr:hover td:first-child { background: #f9fafb; }
            .admin-table-wrap td:last-child,
            .admin-table-wrap th:last-child { white-space: nowrap; }
            .admin-table-wrap .cell-stack {
              display: flex;
              align-items: center;
              gap: 0.65rem;
              min-width: 0;
            }
            .admin-table-wrap .cell-stack img {
              width: 2.5rem;
              height: 2.5rem;
              object-fit: cover;
              border-radius: 0.4rem;
              flex-shrink: 0;
              background: #e5e7eb;
            }
            .admin-table-wrap .cell-muted {
              display: block;
              font-size: 0.75rem;
              font-weight: 500;
              color: #44403c;
              margin-top: 0.15rem;
              word-break: break-word;
            }
            .admin-table-wrap .cell-actions {
              display: inline-flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.35rem 0.65rem;
            }
            .admin-table-wrap .cell-actions a,
            .admin-table-wrap .cell-actions button {
              font-size: 0.8rem;
              font-weight: 700;
            }
            @media (max-width: 639px) {
              .admin-table-wrap table { min-width: 34rem; }
              .admin-table-wrap thead th,
              .admin-table-wrap tbody td {
                padding: 0.55rem 0.6rem !important;
                font-size: 0.8125rem;
              }
            }
            @media (min-width: 1024px) {
              .admin-table-wrap table { min-width: 0; }
            }
            .admin-variant-row {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.5rem;
            }
            .admin-variant-row input[name="variant_name[]"] {
              flex: 1 1 10rem;
              min-width: 0;
            }
            .admin-variant-row input[name="variant_price[]"],
            .admin-variant-row input[name="variant_stock[]"] {
              flex: 0 1 6.5rem;
              width: 6.5rem;
              min-width: 0;
              max-width: 100%;
            }
            @media (max-width: 639px) {
              .admin-page h2.text-3xl { font-size: 1.5rem !important; }
              .admin-page .p-10 { padding: 1.25rem !important; }
              .admin-page .p-8 { padding: 1.15rem !important; }
            }
            .product-card__body {
              padding: 0.75rem 0.875rem 1rem;
              display: flex;
              flex-direction: column;
              flex-grow: 1;
              gap: 0.75rem;
            }
            @media (min-width: 640px) {
              .product-card__body { padding: 1rem 1.125rem 1.125rem; }
            }

            /* ===== Homepage storefront ===== */
            .home-hero {
              background: linear-gradient(145deg, #fffcfa 0%, #e6f7f7 48%, #f6f3ef 100%);
              color: var(--color-ink, #1c1917);
              border-radius: 1.25rem;
              margin-bottom: 1rem;
              overflow: hidden;
              border: 1px solid var(--color-border, #e7e5e4);
            }
            @media (min-width: 640px) {
              .home-hero { border-radius: 1.5rem; margin-bottom: 1.25rem; }
            }
            .home-hero__inner {
              padding: 1.75rem 1.25rem 1.85rem;
              max-width: 40rem;
            }
            @media (min-width: 640px) {
              .home-hero__inner { padding: 2.5rem 2.25rem 2.6rem; }
            }
            .home-hero__eyebrow {
              font-size: 0.7rem;
              font-weight: 700;
              letter-spacing: 0.14em;
              text-transform: uppercase;
              color: var(--color-action, #12a2a2);
              margin: 0 0 0.5rem;
            }
            .home-hero__title {
              font-size: 1.65rem;
              font-weight: 900;
              letter-spacing: -0.03em;
              line-height: 1.15;
              margin: 0 0 0.65rem;
              color: var(--color-ink, #1c1917);
            }
            @media (min-width: 640px) {
              .home-hero__title { font-size: 2.25rem; }
            }
            .home-hero__sub {
              font-size: 0.9rem;
              line-height: 1.55;
              color: var(--color-muted, #57534e);
              margin: 0 0 1.25rem;
            }
            @media (min-width: 640px) {
              .home-hero__sub { font-size: 1.05rem; margin-bottom: 1.5rem; }
            }
            .home-hero__actions {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.85rem 1.15rem;
            }
            .home-hero__actions .btn-action {
              min-height: 2.75rem;
              padding-left: 1.35rem;
              padding-right: 1.35rem;
            }
            .home-hero__meta {
              font-size: 0.75rem;
              font-weight: 600;
              color: var(--color-muted, #57534e);
            }
            .home-catalog {
              scroll-margin-top: 5rem;
            }
            .home-catalog__head {
              margin-bottom: 0.85rem;
            }
            .home-section__title {
              font-size: 1.25rem;
              font-weight: 900;
              letter-spacing: -0.025em;
              color: #111827;
              margin: 0;
              line-height: 1.25;
            }
            @media (min-width: 640px) {
              .home-section__title { font-size: 1.5rem; }
            }
            .home-section__sub {
              margin: 0.25rem 0 0;
              font-size: 0.8rem;
              color: #57534e;
              font-weight: 500;
            }
            .home-cats {
              display: flex;
              flex-wrap: nowrap;
              gap: 0.45rem;
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              scrollbar-width: none;
              margin: 0 0 1.15rem;
              padding: 0.15rem 0 0.35rem;
            }
            .home-cats::-webkit-scrollbar { display: none; }
            @media (min-width: 640px) {
              .home-cats { flex-wrap: wrap; overflow: visible; margin-bottom: 1.35rem; }
            }
            .home-cat-chip {
              display: inline-flex;
              align-items: center;
              flex-shrink: 0;
              padding: 0.45rem 0.9rem;
              border-radius: 9999px;
              border: 1px solid #e5e7eb;
              background: #fff;
              color: #4b5563;
              font-size: 0.75rem;
              font-weight: 700;
              line-height: 1.2;
              text-decoration: none;
              white-space: nowrap;
              transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
              -webkit-tap-highlight-color: transparent;
              touch-action: manipulation;
            }
            @media (min-width: 640px) {
              .home-cat-chip { font-size: 0.8125rem; padding: 0.5rem 1rem; }
            }
            .home-cat-chip:hover {
              border-color: #111;
              color: #111;
            }
            .home-cat-chip.is-active {
              background: #111;
              border-color: #111;
              color: #fff;
            }

            /* Catalog sort */
            .home-catalog__head {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-end;
              justify-content: space-between;
              gap: 0.75rem 1rem;
              margin-bottom: 0.85rem;
            }
            .home-sort { flex-shrink: 0; }
            .home-sort__select {
              appearance: none;
              -webkit-appearance: none;
              background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
              border: 1px solid #e5e7eb;
              border-radius: 0.75rem;
              padding: 0.5rem 2rem 0.5rem 0.85rem;
              font-size: 0.8125rem;
              font-weight: 700;
              color: #374151;
              min-height: 2.5rem;
              cursor: pointer;
              max-width: 100%;
            }
            .home-sort__select:focus {
              outline: 2px solid #111;
              outline-offset: 2px;
            }
            /* Product card polish */
            .product-card__media { position: relative; }
            .product-card__badge {
              position: absolute;
              top: 0.65rem;
              left: 0.65rem;
              z-index: 2;
              background: rgba(17,17,17,0.88);
              color: #fff;
              font-size: 0.65rem;
              font-weight: 800;
              letter-spacing: 0.04em;
              text-transform: uppercase;
              padding: 0.28rem 0.55rem;
              border-radius: 0.4rem;
              line-height: 1;
            }
            .product-card--soldout .product-card__media img {
              opacity: 0.72;
              filter: grayscale(0.25);
            }
            .product-card__stock {
              display: block;
              font-size: 0.625rem;
              font-weight: 700;
              margin-top: 0.15rem;
            }
            @media (min-width: 640px) {
              .product-card__stock { font-size: 0.6875rem; }
            }
            .product-card__stock.is-in { color: #0369a1; }
            .product-card__stock.is-out { color: #dc2626; }
            .product-card__cta {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 2.25rem;
              height: 2.25rem;
              border-radius: 9999px;
              background: #111;
              color: #fff;
              box-shadow: 0 2px 8px rgba(0,0,0,0.12);
              transition: background 0.15s ease, transform 0.1s ease;
            }
            @media (min-width: 640px) {
              .product-card__cta { width: 2.5rem; height: 2.5rem; }
            }
            .product-card__cta:hover { background: #374151; }
            /* Checkout steps */
            .checkout-steps__row {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 0.35rem;
            }
            .checkout-steps__item {
              display: inline-flex;
              align-items: center;
              gap: 0.4rem;
              font-size: 0.75rem;
              font-weight: 700;
              color: #44403c;
              text-decoration: none;
            }
            @media (min-width: 640px) {
              .checkout-steps__item { font-size: 0.8125rem; }
            }
            .checkout-steps__dot {
              width: 1.5rem;
              height: 1.5rem;
              border-radius: 9999px;
              background: #e5e7eb;
              color: #44403c;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              font-size: 0.7rem;
              font-weight: 800;
            }
            .checkout-steps__item.is-done { color: #059669; }
            .checkout-steps__item.is-done .checkout-steps__dot {
              background: #059669;
              color: #fff;
            }
            .checkout-steps__item.is-active { color: #111; }
            .checkout-steps__item.is-active .checkout-steps__dot {
              background: #111;
              color: #fff;
            }
            .checkout-steps__label { display: none; }
            @media (min-width: 640px) {
              .checkout-steps__label { display: inline; }
            }
            .checkout-steps__line {
              width: 1.5rem;
              height: 2px;
              background: #e5e7eb;
              flex-shrink: 0;
            }
            @media (min-width: 640px) {
              .checkout-steps__line { width: 2.5rem; }
            }
            .checkout-steps__line.is-done { background: #111; }

            /* Empty states (shared) */
            .empty-state {
              text-align: center;
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1.25rem;
              padding: 2.5rem 1.5rem;
              margin: 1rem auto 2rem;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            }
            @media (min-width: 640px) {
              .empty-state { padding: 3rem 2rem; border-radius: 1.5rem; }
            }
            .empty-state--error {
              border-color: #fecaca;
              background: #fef2f2;
            }
            .empty-state__icon {
              width: 3.5rem;
              height: 3.5rem;
              margin: 0 auto 1.15rem;
              border-radius: 9999px;
              background: #f3f4f6;
              color: #44403c;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .empty-state__title {
              margin: 0 0 0.5rem;
              font-size: 1.35rem;
              font-weight: 900;
              letter-spacing: -0.02em;
              color: #111827;
            }
            .empty-state__text {
              margin: 0 auto 1.35rem;
              max-width: 22rem;
              font-size: 0.9rem;
              line-height: 1.5;
              color: #44403c;
            }
            /* Track order card */
            .track-card {
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1.25rem;
              padding: 1.5rem 1.25rem 1.35rem;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              margin-bottom: 2rem;
            }
            @media (min-width: 640px) {
              .track-card { padding: 2rem 1.75rem 1.75rem; border-radius: 1.5rem; }
            }
            .track-card__head { text-align: center; margin-bottom: 1.25rem; }
            .track-card__eyebrow {
              margin: 0 0 0.35rem;
              font-size: 0.7rem;
              font-weight: 800;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: #44403c;
            }
            .track-card__title {
              margin: 0 0 0.65rem;
              font-size: 1.5rem;
              font-weight: 900;
              letter-spacing: -0.02em;
              color: #111827;
            }
            .track-card__badge {
              display: inline-flex;
              align-items: center;
              padding: 0.3rem 0.75rem;
              border-radius: 9999px;
              background: #111;
              color: #fff;
              font-size: 0.75rem;
              font-weight: 800;
            }
            .track-timeline {
              list-style: none;
              margin: 0 0 1.35rem;
              padding: 0.85rem 0.5rem;
              display: grid;
              grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: 0.25rem;
              border-top: 1px solid #f3f4f6;
              border-bottom: 1px solid #f3f4f6;
            }
            .track-timeline__item {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.4rem;
              text-align: center;
            }
            .track-timeline__dot {
              width: 0.65rem;
              height: 0.65rem;
              border-radius: 9999px;
              background: #e5e7eb;
              box-shadow: 0 0 0 3px #f3f4f6;
            }
            .track-timeline__item.is-done .track-timeline__dot,
            .track-timeline__item.is-current .track-timeline__dot {
              background: #059669;
              box-shadow: 0 0 0 3px #ecfdf5;
            }
            .track-timeline__item.is-current .track-timeline__dot {
              background: #111;
              box-shadow: 0 0 0 3px #e5e7eb;
            }
            .track-timeline__label {
              font-size: 0.625rem;
              font-weight: 700;
              color: #44403c;
              line-height: 1.2;
            }
            @media (min-width: 640px) {
              .track-timeline__label { font-size: 0.7rem; }
            }
            .track-timeline__item.is-done .track-timeline__label,
            .track-timeline__item.is-current .track-timeline__label {
              color: #111827;
            }
            .track-card__meta {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 1rem 0.85rem;
              margin-bottom: 1rem;
            }
            .track-card__label {
              margin: 0 0 0.2rem;
              font-size: 0.65rem;
              font-weight: 800;
              letter-spacing: 0.06em;
              text-transform: uppercase;
              color: #44403c;
            }
            .track-card__value {
              margin: 0;
              font-size: 0.9rem;
              font-weight: 700;
              color: #111827;
              line-height: 1.35;
            }
            .track-card__value--price { font-size: 1.15rem; font-weight: 900; }
            .track-card__tracking {
              background: #f9fafb;
              border: 1px solid #e5e7eb;
              border-radius: 1rem;
              padding: 1rem;
              text-align: center;
              margin-bottom: 1.15rem;
            }
            .track-card__tracking-code {
              margin: 0.35rem 0 0;
              font-size: 1.25rem;
              font-weight: 900;
              letter-spacing: 0.06em;
              color: #111;
              word-break: break-all;
            }
            .track-card__actions {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between;
              gap: 0.75rem;
              padding-top: 0.85rem;
              border-top: 1px solid #f3f4f6;
            }
            /* Thank you */
            .thank-card {
              text-align: center;
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1.25rem;
              padding: 2rem 1.35rem 1.75rem;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              margin: 1rem auto 2rem;
            }
            @media (min-width: 640px) {
              .thank-card { padding: 2.5rem 2rem 2rem; border-radius: 1.5rem; }
            }
            .thank-card__icon {
              width: 3.25rem;
              height: 3.25rem;
              margin: 0 auto 1rem;
              border-radius: 9999px;
              background: #ecfdf5;
              color: #059669;
              font-size: 1.35rem;
              font-weight: 900;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .thank-card__title {
              margin: 0 0 0.4rem;
              font-size: 1.65rem;
              font-weight: 900;
              letter-spacing: -0.03em;
              color: #111827;
            }
            .thank-card__lead {
              margin: 0 0 1.25rem;
              font-size: 0.95rem;
              color: #44403c;
              line-height: 1.5;
            }
            .thank-card__box {
              text-align: left;
              background: #f0fdf4;
              border: 1px solid #bbf7d0;
              border-radius: 1rem;
              padding: 1rem 1.1rem;
              margin-bottom: 1.35rem;
            }
            .thank-card__box-title {
              margin: 0 0 0.35rem;
              font-size: 0.95rem;
              font-weight: 800;
              color: #14532d;
            }
            .thank-card__box-text {
              margin: 0 0 0.65rem;
              font-size: 0.85rem;
              line-height: 1.5;
              color: #166534;
            }
            .thank-card__list {
              margin: 0;
              padding-left: 1.1rem;
              font-size: 0.8rem;
              line-height: 1.55;
              color: #166534;
            }
            .thank-card__actions {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.75rem;
            }
            .thank-card__secondary {
              font-size: 0.875rem;
              font-weight: 700;
              color: #44403c;
              text-decoration: none;
            }
            .thank-card__secondary:hover { color: #111; }
            /* CMS policy pages */
            .cms-page { margin-bottom: 2rem; }
            .cms-page__card {
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1.25rem;
              padding: 1.5rem 1.25rem 1.75rem;
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            }
            @media (min-width: 640px) {
              .cms-page__card { padding: 2.25rem 2.5rem 2.5rem; border-radius: 1.5rem; }
            }
            .cms-page__title {
              margin: 0 0 1.25rem;
              padding-bottom: 1rem;
              border-bottom: 1px solid #f3f4f6;
              font-size: 1.65rem;
              font-weight: 900;
              letter-spacing: -0.03em;
              color: #111827;
              line-height: 1.2;
            }
            @media (min-width: 640px) {
              .cms-page__title { font-size: 2rem; }
            }
            .cms-page__body {
              font-size: 1rem;
              line-height: 1.7;
              color: #374151;
              max-width: 42rem;
            }
            .cms-page__body p { margin: 0 0 1rem; }
            .cms-page__body h2, .cms-page__body h3 {
              margin: 1.5rem 0 0.65rem;
              font-weight: 800;
              color: #111827;
              letter-spacing: -0.02em;
            }
            .cms-page__body ul, .cms-page__body ol {
              margin: 0 0 1rem;
              padding-left: 1.25rem;
            }
            .cms-page__body a {
              color: #0369a1;
              font-weight: 600;
              text-decoration: underline;
            }

            /* Admin operational UI */
            .admin-dash__head {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-end;
              justify-content: space-between;
              gap: 1rem;
              margin-bottom: 1.25rem;
            }
            .admin-dash__title {
              margin: 0;
              font-size: 1.5rem;
              font-weight: 900;
              letter-spacing: -0.02em;
              color: #111827;
            }
            .admin-dash__sub {
              margin: 0.25rem 0 0;
              font-size: 0.875rem;
              color: #44403c;
            }
            .admin-dash__quick {
              display: flex;
              flex-wrap: wrap;
              gap: 0.5rem;
            }
            .admin-stat-grid {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 0.75rem;
              margin-bottom: 1.25rem;
            }
            @media (min-width: 768px) {
              .admin-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
            }
            .admin-stat {
              display: block;
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1rem;
              padding: 1rem 1.1rem 0.95rem;
              text-decoration: none;
              transition: border-color 0.15s ease, box-shadow 0.15s ease;
              border-top-width: 3px;
            }
            .admin-stat:hover {
              border-color: #d1d5db;
              box-shadow: 0 4px 14px rgba(0,0,0,0.05);
            }
            .admin-stat--amber { border-top-color: #f59e0b; }
            .admin-stat--blue { border-top-color: #12a2a2; }
            .admin-stat--indigo { border-top-color: #6366f1; }
            .admin-stat--green { border-top-color: #10b981; }
            .admin-stat__label {
              display: block;
              font-size: 0.7rem;
              font-weight: 800;
              letter-spacing: 0.04em;
              text-transform: uppercase;
              color: #44403c;
              margin-bottom: 0.35rem;
            }
            .admin-stat__value {
              display: block;
              font-size: 1.85rem;
              font-weight: 900;
              letter-spacing: -0.03em;
              color: #111827;
              line-height: 1.1;
            }
            .admin-stat__hint {
              display: block;
              margin-top: 0.45rem;
              font-size: 0.7rem;
              font-weight: 700;
              color: #44403c;
            }
            .admin-dash__secondary {
              display: grid;
              grid-template-columns: 1fr;
              gap: 0.85rem;
            }
            @media (min-width: 768px) {
              .admin-dash__secondary { grid-template-columns: 1.2fr 1fr; gap: 1rem; }
            }
            .admin-panel {
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1rem;
              padding: 1.15rem 1.2rem;
            }
            .admin-panel--dark {
              background: #111827;
              border-color: #111827;
              color: #fff;
            }
            .admin-panel--dark .admin-panel__title { color: #e5e7eb; }
            .admin-panel--dark .admin-panel__text { color: #44403c; }
            .admin-panel__title {
              margin: 0 0 0.85rem;
              font-size: 0.8rem;
              font-weight: 800;
              letter-spacing: 0.06em;
              text-transform: uppercase;
              color: #44403c;
            }
            .admin-panel__row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 0.75rem;
              padding: 0.45rem 0;
              font-size: 0.9rem;
              color: #4b5563;
              border-bottom: 1px solid #f3f4f6;
            }
            .admin-panel--dark .admin-panel__row {
              color: #d1d5db;
              border-bottom-color: rgba(255,255,255,0.08);
            }
            .admin-panel__row:last-of-type { border-bottom: 0; }
            .admin-panel__text {
              margin: 0 0 1rem;
              font-size: 0.85rem;
              line-height: 1.5;
              color: #44403c;
            }
            .admin-panel__link {
              display: inline-block;
              margin-top: 0.75rem;
              font-size: 0.8rem;
              font-weight: 700;
              color: #12a2a2;
              text-decoration: none;
            }
            .admin-btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 2.5rem;
              padding: 0.5rem 1rem;
              border-radius: 0.75rem;
              font-size: 0.8125rem;
              font-weight: 800;
              text-decoration: none;
              border: none;
              cursor: pointer;
              transition: background 0.15s ease, color 0.15s ease;
            }
            .admin-btn--primary {
              background: #111;
              color: #fff;
            }
            .admin-btn--primary:hover { background: #374151; }
            .admin-btn--ghost {
              background: #fff;
              color: #111;
              border: 1px solid #e5e7eb;
            }
            .admin-btn--ghost:hover { background: #f9fafb; }

            .gpc-picker { position: relative; z-index: 30; overflow: visible; }
            .gpc-picker__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
            .gpc-picker__search {
              width: 100%; border: 1.5px solid #d1d5db; border-radius: 0.75rem;
              padding: 0.8rem 1rem; font-size: 0.9rem; background: #fff; color: #111;
              transition: border-color 0.15s, box-shadow 0.15s;
            }
            .gpc-picker__search:focus { outline: none; border-color: #12a2a2; box-shadow: 0 0 0 3px rgba(18,162,162,0.18); }
            .gpc-picker__search::placeholder { color: #9ca3af; }
            .gpc-picker__list {
              position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 6px);
              max-height: 16rem; overflow: auto;
              background: #fff; border: 1px solid #e5e7eb; border-radius: 0.85rem;
              box-shadow: 0 12px 32px rgba(6,30,72,0.12);
              padding: 0.35rem;
            }
            .gpc-picker__list.hidden { display: none !important; }
            .gpc-picker__empty {
              padding: 1rem 0.85rem; font-size: 0.8rem; color: #6b7280; line-height: 1.45; text-align: center;
            }
            .gpc-picker__item {
              display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
              padding: 0.55rem 0.65rem; border: 0; background: transparent; cursor: pointer;
              border-radius: 0.55rem; color: #111;
            }
            .gpc-picker__item:hover, .gpc-picker__item:focus { background: #f0faf9; outline: none; }
            .gpc-picker__item-top { display: flex; align-items: center; gap: 0.45rem; }
            .gpc-picker__id {
              font-size: 0.65rem; font-weight: 800; color: #12a2a2; background: #e6f7f7;
              padding: 0.1rem 0.4rem; border-radius: 999px; letter-spacing: 0.02em;
            }
            .gpc-picker__parents { font-size: 0.72rem; color: #9ca3af; line-height: 1.3; }
            .gpc-picker__leaf { font-size: 0.88rem; font-weight: 800; color: #061e48; line-height: 1.3; }
            .gpc-picker__selected {
              display: flex; align-items: flex-start; gap: 0.75rem;
              margin-top: 0.55rem; padding: 0.75rem 0.9rem;
              background: linear-gradient(135deg, #f0faf9 0%, #e8f4fc 100%);
              border: 1px solid #b2dede; border-radius: 0.75rem;
            }
            .gpc-picker__selected.hidden { display: none; }
            .gpc-picker__selected-badge {
              flex-shrink: 0; font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
              letter-spacing: 0.04em; color: #0d8585; background: #fff; border: 1px solid #b2dede;
              padding: 0.2rem 0.45rem; border-radius: 0.35rem; margin-top: 0.1rem;
            }
            .gpc-picker__selected-path { flex: 1; font-size: 0.84rem; font-weight: 600; color: #061e48; line-height: 1.45; word-break: break-word; }
            .gpc-picker__selected-path .gpc-picker__leaf { display: block; margin-top: 0.15rem; font-size: 0.95rem; }
            .gpc-picker__clear {
              flex-shrink: 0; border: 0; background: transparent; color: #9ca3af;
              font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 0.15rem 0.35rem;
            }
            .gpc-picker__clear:hover { color: #b91c1c; text-decoration: underline; }
            .gpc-picker__hint { font-size: 0.75rem; color: #9ca3af; margin-top: 0.45rem; line-height: 1.4; }
            .admin-btn--accent {
              background: #12a2a2;
              color: #fff;
            }
            .admin-btn--accent:hover { background: #0d8585; }
            .admin-filter-row {
              display: flex;
              flex-wrap: wrap;
              gap: 0.4rem;
              margin-bottom: 0.85rem;
            }
            .admin-filter-chip {
              display: inline-flex;
              align-items: center;
              padding: 0.4rem 0.75rem;
              border-radius: 9999px;
              font-size: 0.75rem;
              font-weight: 800;
              text-decoration: none;
              background: #f3f4f6;
              color: #4b5563;
              border: 1px solid transparent;
            }
            .admin-filter-chip.is-active {
              background: #111;
              color: #fff;
            }
            .admin-search-row {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;
              margin-bottom: 0.85rem;
            }
            @media (min-width: 640px) {
              .admin-search-row { flex-direction: row; align-items: stretch; }
            }
            .admin-search-input {
              flex: 1;
              min-height: 2.5rem;
              border: 1px solid #e5e7eb;
              border-radius: 0.75rem;
              padding: 0.5rem 0.85rem;
              font-size: 0.875rem;
              font-weight: 600;
              outline: none;
            }
            .admin-search-input:focus {
              border-color: #111;
              box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
            }
            .admin-badge {
              display: inline-flex;
              align-items: center;
              padding: 0.2rem 0.55rem;
              border-radius: 9999px;
              font-size: 0.7rem;
              font-weight: 800;
              letter-spacing: 0.02em;
            }
            .admin-badge--pending { background: #fef3c7; color: #92400e; }
            .admin-badge--paid { background: #e6f7f7; color: #061e48; }
            .admin-badge--shipped { background: #e0e7ff; color: #3730a3; }
            .admin-badge--done { background: #d1fae5; color: #065f46; }
            .admin-row--pending { background: #fffbeb; }
            .admin-link {
              font-size: 0.8125rem;
              font-weight: 800;
              color: #12a2a2;
              text-decoration: none;
            }
            .admin-link:hover { text-decoration: underline; }
            .admin-orders__head { margin-bottom: 0.75rem; }

            /* Admin order detail */
            .admin-od__top {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-start;
              justify-content: space-between;
              gap: 0.75rem 1rem;
              margin-bottom: 1rem;
            }
            .admin-od__timeline {
              margin-bottom: 1.15rem;
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 1rem;
              padding: 0.85rem 0.5rem;
            }
            .admin-od__grid {
              display: grid;
              grid-template-columns: 1fr;
              gap: 1rem;
            }
            @media (min-width: 900px) {
              .admin-od__grid {
                grid-template-columns: 1.5fr 1fr;
                align-items: start;
              }
            }
            .admin-od__main {
              display: flex;
              flex-direction: column;
              gap: 1rem;
            }
            .admin-od__side {
              display: flex;
              flex-direction: column;
              gap: 1rem;
            }
            .admin-od-items { margin-bottom: 0.5rem; }
            .admin-od-item {
              display: flex;
              justify-content: space-between;
              gap: 0.75rem;
              padding: 0.65rem 0;
              border-bottom: 1px dashed #e5e7eb;
            }
            .admin-od-item:last-child { border-bottom: 0; }
            .admin-od-item__name {
              margin: 0;
              font-size: 0.9rem;
              font-weight: 700;
              color: #111827;
              line-height: 1.35;
            }
            .admin-od-item__variant {
              margin: 0.15rem 0 0;
              font-size: 0.75rem;
              color: #44403c;
            }
            .admin-od-item__price {
              margin: 0;
              font-size: 0.9rem;
              font-weight: 800;
              color: #111827;
              white-space: nowrap;
            }
            .admin-od-totals { border-top: 1px solid #f3f4f6; padding-top: 0.35rem; }
            .admin-od-totals__grand strong { font-size: 1.15rem; color: #059669; }
            .admin-od-note {
              margin-top: 0.85rem;
              padding: 0.75rem;
              background: #fffbeb;
              border: 1px solid #fde68a;
              border-radius: 0.75rem;
            }
            .admin-flash {
              margin-bottom: 1rem;
              padding: 0.85rem 1rem;
              border-radius: 0.75rem;
              font-size: 0.85rem;
              font-weight: 700;
            }
            .admin-flash--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
            .admin-flash--err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
            .admin-flash--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
            /* Products admin */
            .admin-thumb {
              width: 2.75rem;
              height: 2.75rem;
              border-radius: 0.55rem;
              overflow: hidden;
              background: #f3f4f6;
              border: 1px solid #e5e7eb;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .admin-thumb img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }
            .admin-thumb__empty {
              font-size: 0.7rem;
              color: #44403c;
              font-weight: 700;
            }
            .admin-stock {
              display: inline-flex;
              min-width: 2.25rem;
              justify-content: center;
              padding: 0.2rem 0.5rem;
              border-radius: 0.4rem;
              font-size: 0.8rem;
              font-weight: 800;
            }
            .admin-stock--ok { background: #ecfdf5; color: #047857; }
            .admin-stock--low { background: #fff7ed; color: #c2410c; }
            .admin-stock--out { background: #fef2f2; color: #b91c1c; }
            .admin-row--archived { opacity: 0.72; }
            .cell-stack {
              display: flex;
              align-items: center;
              gap: 0.65rem;
            }
            .cell-muted {
              display: block;
              font-size: 0.75rem;
              color: #44403c;
              font-weight: 600;
            }
            .cell-actions {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 0.65rem;
            }

            /* ===== Native App Mobile Polish ===== */
            /* Jangan set overflow pada html+body bersamaan — itu mengunci scroll di iOS/Safari */
            html {
              -webkit-text-size-adjust: 100%;
              text-size-adjust: 100%;
            }
            body {
              -webkit-tap-highlight-color: transparent;
              /* overflow-x hanya di container spesifik, bukan di body */
            }
            a, button, [role="button"], .pressable, .btn-action, .btn-secondary {
              touch-action: manipulation;
              -webkit-tap-highlight-color: transparent;
            }
            /* Cegah horizontal bleed tanpa mengunci scroll vertikal */
            main, .site-footer, header, .bottom-nav, .product-sticky-cta, .cart-sticky-cta {
              max-width: 100%;
            }
            /* iOS: cegah zoom saat focus input (font < 16px memicu zoom) */
            @media (max-width: 639px) {
              input[type="text"],
              input[type="email"],
              input[type="number"],
              input[type="search"],
              input[type="tel"],
              input[type="url"],
              input[type="password"],
              select,
              textarea {
                font-size: 16px !important;
              }
            }
            /* Bottom nav — native tab bar */
            .bottom-nav {
              min-height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
              padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
              padding-left: env(safe-area-inset-left, 0px);
              padding-right: env(safe-area-inset-right, 0px);
              background: rgba(255,255,255,0.92) !important;
              -webkit-backdrop-filter: blur(20px) saturate(180%);
              backdrop-filter: blur(20px) saturate(180%);
              border-top: 1px solid rgba(0,0,0,0.08);
              box-shadow: 0 -8px 32px rgba(0,0,0,0.06);
            }
            .bottom-nav__item {
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              flex: 1 1 0%;
              height: 100%;
              min-height: 3.25rem;
              gap: 0.15rem;
              color: #57534e;
              text-decoration: none;
              transition: color 0.15s ease, transform 0.1s ease;
              -webkit-tap-highlight-color: transparent;
              touch-action: manipulation;
            }
            .bottom-nav__item svg {
              width: 1.5rem;
              height: 1.5rem;
              stroke-width: 2;
            }
            .bottom-nav__item span {
              font-size: 0.625rem;
              font-weight: 700;
              letter-spacing: 0.02em;
              line-height: 1;
            }
            .bottom-nav__item:active {
              transform: scale(0.94);
            }
            .bottom-nav__item.is-active {
              color: var(--color-action, #12a2a2);
            }
            .bottom-nav__item.is-active svg {
              stroke-width: 2.4;
            }
            .bottom-nav__item.is-active::before {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 1.75rem;
              height: 0.2rem;
              border-radius: 0 0 0.25rem 0.25rem;
              background: var(--color-action, #12a2a2);
            }
            /* Content clearance for bottom nav + safe area */
            .pb-bottom-nav {
              padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
            }
            @media (min-width: 640px) {
              .pb-bottom-nav { padding-bottom: 0 !important; }
            }
            /* Product / cart sticky CTA — di atas home indicator */
            .product-sticky-cta,
            .cart-sticky-cta {
              padding-left: max(1rem, env(safe-area-inset-left, 0px));
              padding-right: max(1rem, env(safe-area-inset-right, 0px));
              padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
              min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
              background: rgba(255,255,255,0.94) !important;
              -webkit-backdrop-filter: blur(20px) saturate(180%);
              backdrop-filter: blur(20px) saturate(180%);
            }
            .cart-sticky-cta {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 50;
              border-top: 1px solid rgba(0,0,0,0.08);
              box-shadow: 0 -8px 30px rgba(0,0,0,0.08);
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 0.75rem;
              padding-top: 0.75rem;
            }
            @media (min-width: 640px) {
              .cart-sticky-cta { display: none !important; }
            }
            /* Tombol full-width di mobile lebih nyaman */
            @media (max-width: 639px) {
              .btn-action, .btn-secondary {
                min-height: 3rem;
              }
              .btn-action.btn-action--lg,
              button.btn-action.w-full.py-4,
              a.btn-action.w-full {
                min-height: 3.35rem;
                font-size: 1.05rem;
              }
              /* Kartu produk: tap area lega */
              .product-card {
                border-radius: 1rem;
              }
              /* Form spacing mobile */
              main input, main select, main textarea {
                border-radius: 0.85rem;
              }
            }
            /* Header native feel */
            header.site-topbar.sticky {
              background: var(--color-surface, #fffcfa) !important;
              color: var(--color-ink, #1c1917);
              -webkit-backdrop-filter: blur(12px);
              backdrop-filter: blur(12px);
            }
            .admin-shell-header.sticky {
              /* admin keeps dark shell from its own classes */
              -webkit-backdrop-filter: blur(12px);
              backdrop-filter: blur(12px);
            }

.thank-status{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;margin:0 0 20px;border:2px solid transparent}
              .thank-status__dot{width:14px;height:14px;border-radius:999px;flex-shrink:0}
              .thank-status__label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
              .thank-status__value{display:block;font-size:1.35rem;font-weight:900;letter-spacing:.02em;line-height:1.15}
              .thank-status--pending{background:#fff7ed;border-color:#fdba74;color:#9a3412}
              .thank-status--pending .thank-status__dot{background:#12a2a2;box-shadow:0 0 0 4px rgba(18,162,162,.22);animation:thankPulse 1.4s ease-in-out infinite}
              .thank-status--paid{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}
              .thank-status--paid .thank-status__dot{background:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.2)}
              .thank-status--other{background:#f3f4f6;border-color:#d1d5db;color:#374151}
              .thank-status--other .thank-status__dot{background:#6b7280}
              @keyframes thankPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}}
              .thank-pay-panel{border:2px solid #b2dede;background:linear-gradient(180deg,#f0fbfb 0%,#fff 40%);border-radius:20px;padding:20px;margin-bottom:8px}
              .thank-pay-panel__title{font-size:1.05rem;font-weight:900;color:#061e48;margin:0 0 4px}
              .thank-pay-panel__amount{font-size:1.25rem;font-weight:800;color:#0f172a;margin:0 0 16px}
              .thank-pay-panel__amount span{font-size:.85rem;font-weight:700;color:#64748b}
              .thank-pay-buttons{min-height:48px;position:relative}
              .thank-pay-buttons.is-busy{opacity:.35;pointer-events:none;filter:grayscale(.2)}
              .thank-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px 8px;gap:8px}
              .thank-loading.hidden{display:none}
              .thank-spinner{width:40px;height:40px;border:3px solid #e6f7f7;border-top-color:#12a2a2;border-radius:50%;animation:thankSpin .75s linear infinite}
              @keyframes thankSpin{to{transform:rotate(360deg)}}
              .thank-loading__title{font-size:1.05rem;font-weight:900;color:#061e48;margin:0}
              .thank-loading__sub{font-size:.85rem;color:#64748b;margin:0;max-width:260px}
              .thank-pay-msg{margin-top:12px;text-align:center;font-size:.95rem;font-weight:600;min-height:1.4em;color:#64748b}
              .thank-pay-msg.is-error{color:#b91c1c}
              .thank-pay-msg.is-ok{color:#047857;font-size:1.05rem;font-weight:900}
              .thank-pay-msg.is-wait{color:#12a2a2}

.sp-shell { min-height: 100vh; background: linear-gradient(180deg, #f0faf9 0%, #f3f4f6 28%, #f3f4f6 100%); }
.sp-top {
  background: #061e48; color: #fff;
  border-bottom: 3px solid #12a2a2;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 8px 24px rgba(6,30,72,0.18);
}
.sp-top__inner {
  max-width: 64rem; margin: 0 auto; padding: 0.85rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
}
.sp-brand { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sp-brand__name {
  font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em;
  color: #fff; text-decoration: none; line-height: 1.2;
}
.sp-brand__name:hover { color: #a8e8e8; }
.sp-brand__meta { font-size: 0.7rem; color: rgba(255,255,255,0.65); font-weight: 600; }
.sp-brand__meta a { color: #7dd3d3; text-decoration: none; font-weight: 700; }
.sp-brand__meta a:hover { text-decoration: underline; color: #fff; }
.sp-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.sp-nav__link {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.75rem; border-radius: 9999px;
  font-size: 0.78rem; font-weight: 800; text-decoration: none;
  color: rgba(255,255,255,0.82); background: transparent;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.sp-nav__link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sp-nav__link.is-active {
  background: #12a2a2; color: #fff; border-color: #0d8585;
  box-shadow: 0 2px 8px rgba(18,162,162,0.35);
}
.sp-nav__link--out { color: #fecaca !important; }
.sp-nav__link--out:hover { background: rgba(185,28,28,0.25); color: #fff !important; }
.sp-main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.sp-page-title {
  font-size: 1.65rem; font-weight: 900; letter-spacing: -0.03em;
  color: #061e48; margin: 0 0 0.35rem;
}
.sp-page-sub { font-size: 0.9rem; color: #6b7280; margin: 0 0 1.25rem; }
.sp-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(6,30,72,0.04); padding: 1.25rem 1.35rem;
}
.sp-card--flush { padding: 0; overflow: hidden; }
.sp-stat-grid {
  display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .sp-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.sp-stat {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
  padding: 1.1rem 1.2rem; border-top: 3px solid #12a2a2;
  box-shadow: 0 1px 2px rgba(6,30,72,0.04);
}
.sp-stat__label {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280; margin: 0 0 0.35rem;
}
.sp-stat__value { font-size: 1.85rem; font-weight: 900; color: #061e48; line-height: 1.1; margin: 0; }
.sp-stat__value--ok { color: #047857; }
.sp-stat__value--bad { color: #b91c1c; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.25rem; }
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.65rem 1.1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 800;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.sp-btn:active { transform: scale(0.98); }
.sp-btn--primary { background: #12a2a2; color: #fff; border-color: #12a2a2; }
.sp-btn--primary:hover { background: #0d8585; border-color: #0d8585; color: #fff; }
.sp-btn--ghost { background: #fff; color: #061e48; border-color: #d1d5db; }
.sp-btn--ghost:hover { border-color: #12a2a2; color: #0d8585; }
.sp-btn--danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.sp-table-wrap { overflow: auto; border-radius: 1rem; border: 1px solid #e5e7eb; background: #fff; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; text-align: left; }
.sp-table th {
  padding: 0.75rem 1rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.sp-table td { padding: 0.85rem 1rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #111; }
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table tr:hover td { background: #f8fffe; }
.sp-badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 9999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
}
.sp-badge--ok { background: #d1fae5; color: #065f46; }
.sp-badge--warn { background: #fef3c7; color: #92400e; }
.sp-badge--off { background: #f3f4f6; color: #4b5563; }
.sp-badge--bad { background: #fee2e2; color: #991b1b; }
.sp-flash {
  padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700;
  margin-bottom: 1rem;
}
.sp-flash--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sp-flash--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sp-input, .sp-select, .sp-textarea {
  width: 100%; border: 2px solid #e5e7eb; border-radius: 0.75rem;
  padding: 0.75rem 0.9rem; font-size: 0.95rem; background: #fff; color: #111;
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  outline: none; border-color: #12a2a2; box-shadow: 0 0 0 3px rgba(18,162,162,0.18);
}
.sp-label { display: block; font-size: 0.75rem; font-weight: 800; color: #4b5563; margin-bottom: 0.35rem; }
.sp-form-stack { display: flex; flex-direction: column; gap: 1rem; }
.sp-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: linear-gradient(145deg, #061e48 0%, #0a3a5c 45%, #12a2a2 120%);
}
.sp-login-card {
  width: 100%; max-width: 26rem; background: #fff; border-radius: 1.25rem;
  padding: 2rem 1.75rem; box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.sp-login-card h1 { font-size: 1.5rem; font-weight: 900; color: #061e48; margin: 0 0 0.35rem; letter-spacing: -0.02em; }
.sp-login-card .sp-lead { font-size: 0.9rem; color: #6b7280; margin: 0 0 1.35rem; line-height: 1.45; }
.sp-login-foot { font-size: 0.75rem; color: #9ca3af; text-align: center; margin-top: 1.25rem; }
.sp-empty { text-align: center; padding: 2.5rem 1.25rem; color: #6b7280; }
@media (max-width: 640px) {
  .sp-nav { width: 100%; }
  .sp-nav__link { flex: 1 1 auto; justify-content: center; font-size: 0.72rem; padding: 0.4rem 0.5rem; }
}

.sp-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(145deg,#061e48 0%,#0a3a5c 45%,#12a2a2 120%)}
.sp-login-card{width:100%;max-width:26rem;background:#fff;border-radius:1.25rem;padding:2rem 1.75rem;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.sp-login-card h1{font-size:1.5rem;font-weight:900;color:#061e48;margin:0 0 .35rem;letter-spacing:-.02em}
.sp-login-card .sp-lead{font-size:.9rem;color:#6b7280;margin:0 0 1.35rem;line-height:1.45}
.sp-login-foot{font-size:.75rem;color:#9ca3af;text-align:center;margin-top:1.25rem}
.sp-form-stack{display:flex;flex-direction:column;gap:1rem}
.sp-label{display:block;font-size:.75rem;font-weight:800;color:#4b5563;margin-bottom:.35rem}
.sp-input{width:100%;border:2px solid #e5e7eb;border-radius:.75rem;padding:.75rem .9rem;font-size:.95rem}
.sp-input:focus{outline:none;border-color:#12a2a2;box-shadow:0 0 0 3px rgba(18,162,162,.18)}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.1rem;border-radius:.75rem;font-size:.875rem;font-weight:800;border:2px solid transparent;cursor:pointer;text-decoration:none}
.sp-btn--primary{background:#12a2a2;color:#fff;border-color:#12a2a2}
.sp-btn--primary:hover{background:#0d8585}

.sp-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(145deg,#061e48 0%,#0a3a5c 45%,#12a2a2 120%)}
.sp-login-card{width:100%;max-width:26rem;background:#fff;border-radius:1.25rem;padding:2rem 1.75rem;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.sp-login-card h1{font-size:1.5rem;font-weight:900;color:#061e48;margin:0 0 .35rem}
.sp-login-card .sp-lead{font-size:.9rem;color:#6b7280;margin:0 0 1.35rem;line-height:1.45}
.sp-login-foot{font-size:.75rem;color:#9ca3af;text-align:center;margin-top:1.25rem}
.sp-form-stack{display:flex;flex-direction:column;gap:1rem}
.sp-label{display:block;font-size:.75rem;font-weight:800;color:#4b5563;margin-bottom:.35rem}
.sp-input{width:100%;border:2px solid #e5e7eb;border-radius:.75rem;padding:.75rem .9rem;font-size:.95rem}
.sp-input:focus{outline:none;border-color:#12a2a2;box-shadow:0 0 0 3px rgba(18,162,162,.18)}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.1rem;border-radius:.75rem;font-size:.875rem;font-weight:800;border:2px solid transparent;cursor:pointer}
.sp-btn--primary{background:#12a2a2;color:#fff;border-color:#12a2a2}

.product-share{display:flex;justify-content:flex-start;margin-top:14px}
                  .product-share__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
                  .product-share__btn:hover{background:#f9fafb;border-color:#d1d5db;color:#111}
                  .product-share__btn.is-copied{background:#ecfdf5;border-color:#6ee7b7;color:#047857}

/* Compact sold-by — override boxed .sold-by from legacy extract */
.sold-by.sold-by--compact,
.sold-by--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: #9ca3af;
}
.sold-by--compact .sold-by__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.5625rem;
  color: #a1a1aa;
}
.sold-by--compact .sold-by__name {
  font-weight: 600;
  font-size: 0.6875rem;
  color: #52525b;
  text-decoration: none;
}
.sold-by--compact .sold-by__name:hover {
  color: #18181b;
  text-decoration: underline;
}
.sold-by--compact .sold-by__main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}
.sold-by--compact .sold-by__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #71717a;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.sold-by--compact .sold-by__star {
  color: #f59e0b;
  font-size: 0.5625rem;
  line-height: 1;
}
.sold-by--compact .sold-by__count {
  font-weight: 500;
  color: #a1a1aa;
}
.sold-by--compact .sold-by__link {
  display: inline !important;
  margin-left: 0.25rem;
  padding: 0 !important;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-action, #12a2a2);
  text-decoration: none;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
}
.sold-by--compact .sold-by__link:hover {
  text-decoration: underline;
  background: none !important;
}

/* —— UI polish: image placeholder, admin tables, empty states —— */
.product-card__media {
  background: #f3f4f6;
  position: relative;
  overflow: hidden;
}
.product-card__media img {
  background: #f3f4f6;
}
.product-card__media img:not([src]),
.product-card__media img[src=""] {
  opacity: 0;
}
/* Soft shimmer while image decodes */
.product-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: oiqy-shimmer 1.2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.product-card__media img {
  position: relative;
  z-index: 1;
}
@keyframes oiqy-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card__media::before { animation: none; opacity: 0.5; }
}

.admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
}
.admin-table-wrap table {
  min-width: 560px;
  border-collapse: collapse;
}
.admin-table-wrap th,
.admin-table-wrap td {
  white-space: nowrap;
}
.admin-table-wrap th:last-child,
.admin-table-wrap td:last-child {
  white-space: normal;
}
@media (max-width: 640px) {
  .admin-table-wrap {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    border-radius: 0.5rem;
  }
  .admin-table-wrap table {
    min-width: 520px;
    font-size: 0.8125rem;
  }
}

.empty-state__text {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* Home hero as image banner (admin-managed) */
.home-hero--banner {
  margin: 0 0 0.65rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
}
.home-hero--banner .home-hero__banner-link {
  display: block;
  position: relative;
  width: 100%;
  line-height: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f3f4f6;
}
.home-hero--banner .home-hero__banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(36vw, 168px);
  object-fit: cover;
  object-position: center;
}
@media (min-width: 640px) {
  .home-hero--banner .home-hero__banner-img {
    max-height: min(32vw, 240px);
  }
}
@media (min-width: 1024px) {
  .home-hero--banner .home-hero__banner-img {
    max-height: 320px;
  }
}
.home-hero--banner .home-hero__banner-link:focus-visible {
  outline: 2px solid var(--color-action, #12a2a2);
  outline-offset: 3px;
}

/* Product image upload status + preview */
.img-upload-status {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
}
.img-upload-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.img-upload-status__text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}
.img-upload-status__pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
.img-upload-status__track {
  height: 0.35rem;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.img-upload-status__fill {
  height: 100%;
  width: 0%;
  background: var(--color-action, #12a2a2);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.img-upload-status__fill.is-indeterminate {
  width: 40% !important;
  animation: oiqy-upload-indeterminate 1s ease-in-out infinite;
}
@keyframes oiqy-upload-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .img-upload-status__fill.is-indeterminate { animation: none; width: 50% !important; }
}
.new-images-preview .relative {
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* —— Mobile density: tighter spacing & smaller type on home —— */
@media (max-width: 639px) {
  .home-catalog {
    scroll-margin-top: 4rem;
  }
  .home-catalog__head {
    margin-bottom: 0.55rem;
    gap: 0.4rem;
  }
  .home-section__title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
  }
  .home-section__sub {
    font-size: 0.72rem !important;
    margin-top: 0.15rem !important;
  }
  .home-sort__select {
    font-size: 0.75rem !important;
    padding: 0.35rem 1.75rem 0.35rem 0.65rem !important;
  }
  .home-cat-chip {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.72rem !important;
  }
  .home-cats {
    gap: 0.35rem !important;
    margin-bottom: 0.55rem !important;
  }
  .product-grid {
    gap: 0.55rem !important;
  }
  .product-card {
    border-radius: 0.85rem !important;
  }
  .product-card__body {
    padding: 0.5rem 0.55rem 0.65rem !important;
    gap: 0.35rem !important;
  }
  .type-product-title {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
  }
  .type-price {
    font-size: 0.9rem !important;
  }
  .type-label {
    font-size: 0.65rem !important;
  }
  /* Stores block (utility classes from markup) */
  section[aria-label="Stores"] {
    padding-top: 0.65rem !important;
    padding-bottom: 0.35rem !important;
  }
  section[aria-label="Stores"] h2 {
    font-size: 0.95rem !important;
    margin-bottom: 0.45rem !important;
  }
  .home-hero--banner {
    margin-bottom: 0.5rem !important;
  }
}

/* Desktop also slightly tighter under catalog head */
@media (min-width: 640px) {
  .home-catalog__head {
    margin-bottom: 0.75rem;
  }
  section[aria-label="Stores"] {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
  }
  section[aria-label="Stores"] h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0.55rem !important;
  }
}