@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/webfonts/Vazirmatn-RD-UI-FD-Black.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* @ui-governance allow-important: normalizes generated transition and shadow utilities for the current motion system. */

/* Shared table and scroll-table primitives. */

/* Storefront app-shell and premium canvas hardening. */

/* Reusable storefront banner slots. */

/* Storefront editorial composition layer. */

/* Storefront shop styles. */

/* Storefront footer composition. */

/* Profile shell, sidebar, and navigation. */

/* Profile page flows, forms, and order list. */

/* Profile dashboard cards, facts, vouchers, and security. */

/* Profile responsive layout contracts. */

/* Storefront blog and rendered editorial content. */

/* Blog index page styles. */

/* Storefront long-form content helpers. */

/* Admin palette and semantic token bridge. */

/* @ui-governance allow-design-token-debt: admin palette definitions live here. */

/* Admin dashboard surfaces, stats, and actions. */

/* Admin dashboard utilities and legal editor support. */

/* Admin reports feature styles. */

/* Admin DEO analytics feature styles. */

/* Admin DEO chart, funnel, and responsive analytics styles. */

/* Admin product editor feature styles. */

/* Admin blog editor feature styles. */

/* Admin dark compatibility: shell, utilities, forms. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin layout shell primitives. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin dark subheader and topbar controls. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin dark metadata row and badges. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin sidebar composition. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin dark compatibility: surfaces, stats, and badges. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin dark list, panel, tab, and feature page primitives. */

/* @ui-governance allow-important: aligns shared admin primitives with dark compatibility tokens. */

/* Admin info panels, fields, and log primitives. */

/* @ui-governance allow-important: aligns shared admin primitives with dark compatibility tokens. */

/* Admin feature-specific category and AI draft primitives. */

/* @ui-governance allow-important: aligns shared admin primitives with dark compatibility tokens. */

/* Admin dark compatibility: tables, shadows, and buttons. */

/* @ui-governance allow-important: overrides generated utility classes after Tailwind output in admin dark mode. */

/* Admin stat semantic overrides.
 * @ui-governance allow-important: keeps shared stat surfaces consistent across admin modules.
 */

/* Admin snapshot/media audit styles. */

/* Checkout feature styles. */

/* Looks feature styles. */

/* Looks discovery result styles. */

/* Looks show/detail styles. */

/* Home base, editorial flow, and personalized note. */

/* Home product carousel section. */

/* Home responsive refinements. */

/* Product feature styles. */

/* Product purchase panels, forms, and responsive shell. */

/* @ui-governance allow-important: locks viewport overflow and carousel sizing against generated utility classes. */

*, ::before, ::after {
  --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: rgb(59 130 246 / 0.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: rgb(59 130 246 / 0.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.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: Vazirmatn, Peyda, ui-sans-serif, system-ui; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
     color-adjust: exact;
          print-color-adjust: exact;
}

select:where([multiple]),select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
     color-adjust: unset;
          print-color-adjust: unset;
}

input:where([type='checkbox']),input:where([type='radio']) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
     color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

input:where([type='checkbox']) {
  border-radius: 0px;
}

input:where([type='radio']) {
  border-radius: 100%;
}

input:where([type='checkbox']):focus,input:where([type='radio']):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
}

input:where([type='checkbox']):checked,input:where([type='radio']):checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input:where([type='checkbox']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  input:where([type='checkbox']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='radio']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  input:where([type='radio']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {

  input:where([type='checkbox']):indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='file']) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

input:where([type='file']):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

:root {
    --ink: #1f1b17;
    --muted: #665f55;
    --line: rgba(0, 73, 83, 0.2);
    --bg: #f3eadf;
    --card: #fffdf8;
    --surface-ivory: #fffdf8;
    --surface-ivory-rgb: 255, 253, 248;
    --surface-warm: #f3eadf;
    --surface-warm-rgb: 243, 234, 223;
    --surface-sand: #e5d6c4;
    --surface-sand-rgb: 229, 214, 196;
    --surface-champagne: #e5d3ad;
    --surface-champagne-rgb: 229, 211, 173;
    --surface-rose: #ead7cf;
    --surface-rose-rgb: 234, 215, 207;
    --surface-olive: #d6d8c9;
    --surface-olive-rgb: 214, 216, 201;
    --surface-mineral: #dce8e6;
    --surface-mineral-rgb: 220, 232, 230;
    --accent-gold: #b59658;
    --accent-gold-rgb: 181, 150, 88;
    --ink-warm: #1f1b17;
    --ink-warm-rgb: 31, 27, 23;
    --ink-rgb: var(--ink-warm-rgb);
    --muted-warm: #665f55;
    --primary-rgb: 0, 73, 83;

    --primary-50: #e8f1f2;
    --primary-100: #d0e2e5;
    --primary-200: #a1c5cb;
    --primary-300: #72a8b1;
    --primary-400: #438b97;
    --primary-500: #004953;
    --primary-600: #003e47;
    --primary-700: #003138;
    --primary-800: #002429;
    --primary-900: #00171b;
    --primary-950: #001014;

    --neutral-50: #fbf8f3;
    --neutral-100: #f4efe7;
    --neutral-200: #e7ded1;
    --neutral-500: #746f66;
    --neutral-800: #2a2622;

    --color-bg-canvas: var(--surface-warm);
    --color-bg-canvas-soft: #f7f1e8;
    --color-surface-primary: var(--surface-ivory);
    --color-surface-secondary: #f8f0e5;
    --color-text-primary: var(--ink-warm);
    --color-text-strong: var(--primary-900);
    --color-text-heading: var(--primary-800);
    --color-text-muted: var(--muted-warm);
    --color-text-subtle: #8a8176;
    --color-text-disabled: #aaa094;
    --color-text-inverse: var(--surface-ivory);
    --color-text-inverse-muted: #c9d8d6;

    --color-cta-primary-bg: var(--primary-500);
    --color-cta-primary-hover: var(--primary-600);
    --color-cta-primary-active: var(--primary-700);
    --color-cta-secondary-bg: var(--surface-ivory);
    --color-cta-secondary-text: var(--primary-600);
    --color-cta-secondary-border: var(--primary-100);
    --color-cta-premium-bg: var(--accent-gold);
    --color-cta-premium-hover: #9f8147;
    --color-cta-premium-text: #2d2212;

    --color-success-bg: #edf3e7;
    --color-success-border: #b8c8a5;
    --color-success-text: #3f5f35;
    --color-warning-bg: #f4ead2;
    --color-warning-border: #d5b978;
    --color-warning-text: #7a5a1d;
    --color-error-bg: #f2ddd8;
    --color-error-border: #d8a7a0;
    --color-error-text: #8c2f2b;
    --color-info-bg: #e7f0ef;
    --color-info-border: #adcac7;
    --color-info-text: #285f61;

    --color-price: var(--primary-600);
    --color-price-strong: var(--primary-900);
    --color-discount-bg: var(--surface-rose);
    --color-discount-text: #7f3730;
    --color-stock-low-bg: var(--color-warning-bg);
    --color-stock-low-text: var(--color-warning-text);
    --color-out-bg: var(--surface-sand);
    --color-out-text: var(--muted-warm);
    --color-gift-bg: var(--surface-champagne);
    --color-gift-text: #4f3b1c;
    --color-routine-bg: var(--surface-olive);
    --color-routine-text: #3e4b32;

    --color-border-soft: var(--neutral-200);
    --color-border-default: #d8cabb;
    --color-border-strong: #bfae9b;
    --color-border-primary-soft: var(--primary-100);
    --color-divider: rgba(var(--primary-rgb), 0.12);
    --color-divider-dark: rgba(var(--surface-ivory-rgb), 0.16);

    --color-hover-warm: #fbf6ee;
    --color-hover-primary-soft: var(--primary-50);
    --color-active-primary-soft: var(--primary-100);
    --color-active-warm: var(--surface-sand);
    --color-focus: var(--primary-400);
    --color-focus-soft: rgba(67, 139, 151, 0.22);

    --color-disabled-bg: #eee5da;
    --color-disabled-border: #d8cabb;
    --color-disabled-text: #aaa094;
    --color-disabled-icon: #b8afa4;
    --color-unavailable-overlay: rgba(var(--ink-warm-rgb), 0.18);

    --color-overlay-soft: rgba(var(--ink-warm-rgb), 0.28);
    --color-overlay-strong: rgba(0, 23, 27, 0.58);
    --color-surface-inverse-muted: rgba(var(--surface-ivory-rgb), 0.12);
    --color-surface-inverse-hover: rgba(var(--surface-ivory-rgb), 0.18);
    --color-border-inverse-soft: rgba(var(--surface-ivory-rgb), 0.16);
    --color-glass-ivory: rgba(var(--surface-ivory-rgb), 0.86);
    --color-glass-warm: rgba(var(--surface-warm-rgb), 0.92);
    --color-shadow-warm: rgba(var(--ink-warm-rgb), 0.12);
    --color-shadow-teal: rgba(var(--primary-rgb), 0.14);

    --color-dark-section-bg: var(--primary-900);
    --color-dark-section-bg-soft: var(--primary-800);
    --color-dark-section-text: var(--surface-ivory);
    --color-dark-section-muted: #c9d8d6;
    --color-dark-section-accent: var(--surface-champagne);

    --color-mobile-sticky-bg: var(--surface-ivory);
    --color-mobile-sticky-border: var(--primary-100);
    --color-mobile-cta-bg: var(--primary-600);
    --color-mobile-cta-text: var(--surface-ivory);
    --color-mobile-secondary-bg: #f8f0e5;
    --color-mobile-sheet-bg: var(--surface-warm);
    --color-mobile-sheet-surface: var(--surface-ivory);

    --shadow-soft:
      0 1px 1px rgba(31, 27, 23, 0.03),
      0 10px 28px -24px rgba(31, 27, 23, 0.34);
    --shadow-float:
      0 1px 1px rgba(255, 253, 248, 0.72) inset,
      0 16px 34px -28px rgba(0, 73, 83, 0.34);
    --shadow-luxury-line:
      inset 0 1px 0 rgba(255, 253, 248, 0.78),
      inset 0 -1px 0 rgba(0, 73, 83, 0.05);
    --radius-site: clamp(3px, 0.32vw, 5px);
    --radius-sm: var(--radius-site);
    --radius-md: var(--radius-site);
    --radius-lg: var(--radius-site);
    --radius-xl: var(--radius-site);
    --focus-ring: var(--primary-600);
    --font-serif: "Vazirmatn", "Peyda", ui-sans-serif, system-ui;

    --site-bg-pattern: url("../images/patterns/lux-arabesque-dense.svg");
    --site-bg-pattern-size: 120px 120px;
  }

html {
    color: var(--color-text-primary);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

body {
    font-family:
      "Vazirmatn",
      "Peyda",
      "ui-sans-serif",
      system-ui,
      -apple-system,
      "Segoe UI",
      sans-serif;
    background-color: var(--color-bg-canvas);
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
  }

h1,
  h2,
  h3,
  h4 {
    color: var(--color-text-heading);
    font-weight: 600;
    letter-spacing: 0;
  }

p {
    color: inherit;
  }

html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

body[unresolved] {
    opacity: 1 !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    position: static !important;
  }

.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1760px) {

  .\!container {
    max-width: 1760px !important;
  }

  .container {
    max-width: 1760px;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input::-webkit-input-placeholder, .form-textarea::-webkit-input-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
     color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
     color-adjust: unset;
          print-color-adjust: unset;
}

.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;
  -webkit-padding-start: 1.625em;
          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;
  -webkit-padding-start: 1.625em;
          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: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  -webkit-padding-start: 1em;
          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: 0.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: 0.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: 0.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 var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  -webkit-padding-end: 0.375em;
          padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  -webkit-padding-start: 0.375em;
          padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.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: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.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: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  -webkit-padding-end: 1.1428571em;
          padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  -webkit-padding-start: 1.1428571em;
          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: 0.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;
  -webkit-padding-end: 0.5714286em;
          padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  -webkit-padding-start: 0.5714286em;
          padding-inline-start: 0.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: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.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: rgb(17 24 39 / 10%);
  --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: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --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: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0.375em;
          padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0.375em;
          padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.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: 0.75em;
  margin-bottom: 0.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: 0.5em;
  -webkit-padding-start: 1.625em;
          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"] *)) {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  -webkit-padding-end: 0.5714286em;
          padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  -webkit-padding-start: 0.5714286em;
          padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-end: 0;
          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-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  -webkit-padding-start: 1.1111111em;
          padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  -webkit-padding-end: 0.3571429em;
          padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  -webkit-padding-start: 0.3571429em;
          padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  -webkit-padding-end: 1em;
          padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  -webkit-padding-start: 1.5714286em;
          padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  -webkit-padding-start: 1.5714286em;
          padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0.4285714em;
          padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0.4285714em;
          padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  -webkit-padding-start: 1.5714286em;
          padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-end: 1em;
          padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  -webkit-padding-end: 1em;
          padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-slate {
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-lead: #475569;
  --tw-prose-links: #0f172a;
  --tw-prose-bold: #0f172a;
  --tw-prose-counters: #64748b;
  --tw-prose-bullets: #cbd5e1;
  --tw-prose-hr: #e2e8f0;
  --tw-prose-quotes: #0f172a;
  --tw-prose-quote-borders: #e2e8f0;
  --tw-prose-captions: #64748b;
  --tw-prose-kbd: #0f172a;
  --tw-prose-kbd-shadows: rgb(15 23 42 / 10%);
  --tw-prose-code: #0f172a;
  --tw-prose-pre-code: #e2e8f0;
  --tw-prose-pre-bg: #1e293b;
  --tw-prose-th-borders: #cbd5e1;
  --tw-prose-td-borders: #e2e8f0;
  --tw-prose-invert-body: #cbd5e1;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #94a3b8;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #94a3b8;
  --tw-prose-invert-bullets: #475569;
  --tw-prose-invert-hr: #334155;
  --tw-prose-invert-quotes: #f1f5f9;
  --tw-prose-invert-quote-borders: #334155;
  --tw-prose-invert-captions: #94a3b8;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #cbd5e1;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #475569;
  --tw-prose-invert-td-borders: #334155;
}

.prose-neutral {
  --tw-prose-body: #404040;
  --tw-prose-headings: #171717;
  --tw-prose-lead: #525252;
  --tw-prose-links: #171717;
  --tw-prose-bold: #171717;
  --tw-prose-counters: #737373;
  --tw-prose-bullets: #d4d4d4;
  --tw-prose-hr: #e5e5e5;
  --tw-prose-quotes: #171717;
  --tw-prose-quote-borders: #e5e5e5;
  --tw-prose-captions: #737373;
  --tw-prose-kbd: #171717;
  --tw-prose-kbd-shadows: rgb(23 23 23 / 10%);
  --tw-prose-code: #171717;
  --tw-prose-pre-code: #e5e5e5;
  --tw-prose-pre-bg: #262626;
  --tw-prose-th-borders: #d4d4d4;
  --tw-prose-td-borders: #e5e5e5;
  --tw-prose-invert-body: #d4d4d4;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a3a3a3;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a3a3a3;
  --tw-prose-invert-bullets: #525252;
  --tw-prose-invert-hr: #404040;
  --tw-prose-invert-quotes: #f5f5f5;
  --tw-prose-invert-quote-borders: #404040;
  --tw-prose-invert-captions: #a3a3a3;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d4d4d4;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #525252;
  --tw-prose-invert-td-borders: #404040;
}

.line-clamp-1,
  .line-clamp-2,
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.line-clamp-2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

.storefront-journal-sidebar-block a.site-body {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.site-body:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.site-body img {
    border-radius: var(--radius-site);
  }

.site-body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
    line-height: 0;
    background-color: var(--color-bg-canvas);
    background-image: var(--site-bg-pattern);
    background-repeat: repeat;
    background-size: var(--site-bg-pattern-size);
    background-position: top left;
}

@media print {
    .site-body {
      background-image: none;
    }
  }

.site-body > * {
    line-height: 1.85;
  }

.storefront-journal-sidebar.site-content > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
  }

.site-content > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.page-shell {
  flex: 1 1 0%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 5rem;
}

@media (min-width: 640px) {

  .page-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {

  .page-shell {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.page-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1600px;
}

.site-body.is-admin .page-shell {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.site-body.is-admin .page-wrap {
  margin-left: 0px;
  margin-right: 0px;
  max-width: none;
}

.backdrop-filter,
  .backdrop-blur,
  .backdrop-blur-sm,
  .backdrop-blur-xl {
    -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);
  }


  .profile-page-flow > .btn-icon,
  .profile-page-flow > .grid .btn-icon {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.btn-icon.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.btn-icon) {
    border-color: var(--admin-border);
  }

.btn-icon {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-site);
  border-width: 1px;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    border-color: var(--color-border-primary-soft);
    background: var(--color-surface-primary);
    color: var(--color-text-heading);
}

.btn-icon:hover {
    background: var(--color-hover-warm);
  }

.form-label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
    color: var(--color-text-primary);
}


  .profile-page-flow > .form-input,
  .profile-page-flow > .grid .form-input {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.form-input.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.form-input) {
    border-color: var(--admin-border);
  }

.form-input {
  width: 100%;
  border-radius: var(--radius-site);
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    border-color: var(--color-border-primary-soft);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
}


  .profile-page-flow > .form-select,
  .profile-page-flow > .grid .form-select {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.form-select.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.form-select) {
    border-color: var(--admin-border);
  }

.form-select {
  width: 100%;
  border-radius: var(--radius-site);
  border-width: 1px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    border-color: var(--color-border-primary-soft);
    background-color: var(--color-surface-primary);
    color: var(--color-text-primary);
    padding-right: 1rem;
    padding-left: 2.5rem;
    background-position: left 0.75rem center;
}

[dir="ltr"] .form-select {
    padding-left: 1rem;
    padding-right: 2.5rem;
    background-position: right 0.75rem center;
  }

.form-select[multiple],
  .form-select:where([size]:not([size="1"])) {
    background-image: none;
    background-position: initial;
    padding-left: 1rem;
    padding-right: 1rem;
  }


  .profile-page-flow > .form-textarea,
  .profile-page-flow > .grid .form-textarea {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.form-textarea.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.form-textarea) {
    border-color: var(--admin-border);
  }

.form-textarea {
  width: 100%;
  border-radius: var(--radius-site);
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    border-color: var(--color-border-primary-soft);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
}

.form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
  }

.field-block > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.form-label-required {
    -webkit-margin-start: 0.25rem;
            margin-inline-start: 0.25rem;
    color: var(--color-error-text);
  }

.field-hint {
  font-size: 0.75rem;
  line-height: 1.5rem;
    color: var(--color-text-muted);
}

.field-hint-danger {
    color: var(--color-error-text);
  }

.storefront-journal-sidebar-block a.image-preview-list {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.image-preview-list:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.image-preview-list img {
    border-radius: var(--radius-site);
  }

.image-preview-list {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.image-preview-thumb {
  height: 5rem;
  width: 5rem;
  object-fit: cover;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-site);
}

[data-image-uploader].is-dragover,
  [data-gallery-drop].is-dragover {
    background: var(--color-surface-primary);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
  }

.gallery-new-tile {
  position: relative;
  height: 7rem;
  width: 7rem;
  overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
}

.gallery-new-tile__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.gallery-new-tile__tag,
  .gallery-new-tile__remove {
    background: var(--color-glass-ivory);
    color: var(--color-text-muted);
  }

.gallery-new-tile__tag {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11px;
  font-weight: 600;
    border-radius: 9999px;
}

.gallery-new-tile__remove {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
    border-radius: 9999px;
}

.gallery-new-tile__remove:hover {
    background: var(--color-surface-primary);
  }

.page-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

.site-body.is-admin .page-panel {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-soft);
    box-shadow: none;
    padding: 24px;
  }

.page-panel-lg {
    padding: 32px;
  }

.\!card {
    background: var(--color-surface-primary) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    padding: 20px !important;
  }

.card {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 20px;
  }

.site-body:not(.is-admin) .card {
    background: transparent;
    border-inline: 0;
    border-radius: 0;
  }

.site-body:not(.is-admin) .\!card {
    background: transparent !important;
    border-inline: 0 !important;
    border-radius: 0 !important;
  }

.site-body.is-admin .card {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-soft);
  }

.site-body.is-admin .\!card {
    background: var(--color-surface-primary) !important;
    border: 1px solid var(--color-border-soft) !important;
  }

.card-lg {
    padding: 28px;
  }


  .profile-page-flow > .badge,
  .profile-page-flow > .grid .badge {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.badge.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.badge) {
    border-color: var(--admin-border);
  }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-site);
  border-width: 1px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11px;
  font-weight: 600;
    border-color: var(--color-border-soft);
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
}

.flash-stack {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1680px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
}

@media (min-width: 640px) {

  .flash-stack {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {

  .flash-stack {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}


  .profile-page-flow > .flash-card,
  .profile-page-flow > .grid .flash-card {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.flash-card.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.flash-card) {
    border-color: var(--admin-border);
  }

.flash-card {
  margin-bottom: 0.75rem;
  border-radius: var(--radius-site);
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {

  .flash-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.flash-card {
    background: var(--color-glass-ivory);
    box-shadow: var(--shadow-soft);
  }

.flash-card__message {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.flash-card-danger {
    border-color: var(--color-error-border);
    color: var(--color-error-text);
  }

.flash-card-success {
    border-color: var(--color-success-border);
    color: var(--color-success-text);
  }

.flash-card-info {
    border-color: var(--color-info-border);
    color: var(--color-info-text);
  }

.breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    color: var(--color-text-subtle);
}

.breadcrumb a:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.breadcrumb a {
    color: var(--color-cta-secondary-text);
  }

.breadcrumb a:hover {
    color: var(--color-cta-secondary-hover-text);
  }

.mobile-bottom-nav {
    -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);
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    border-top-width: 1px;
    --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);
  }

@media (min-width: 640px) {

  .mobile-bottom-nav
  .discovery-panel {
    display: none;
  }

  .mobile-bottom-nav
  [data-discovery-categories],.mobile-bottom-nav
  [data-discovery-style-heading],.mobile-bottom-nav
  [data-discovery-group],.mobile-bottom-nav
  [data-discovery-items] {
    display: none;
  }

  .mobile-bottom-nav.look-style-carousel[data-drag-scroll] {
    display: none;
  }

  .mobile-bottom-nav {
    display: none;
  }
}

.mobile-bottom-nav {
    border-color: var(--color-mobile-sticky-border);
    background: var(--color-glass-ivory);
    box-shadow: 0 -10px 40px -25px var(--color-shadow-teal);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }


  .profile-page-flow > .mobile-bottom-nav__list .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .mobile-bottom-nav__list {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.mobile-bottom-nav__list {
  display: grid;
  height: 4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
    color: var(--color-text-subtle);
}


  .profile-page-flow > .mobile-bottom-nav__link,
  .profile-page-flow > .grid .mobile-bottom-nav__link {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.storefront-journal-sidebar-block a.mobile-bottom-nav__link {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.mobile-bottom-nav__link:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.mobile-bottom-nav__link img {
    border-radius: var(--radius-site);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.mobile-bottom-nav__link.border) {
    border-color: var(--admin-border);
  }

.mobile-bottom-nav__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: var(--radius-site);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.mobile-bottom-nav__link:hover {
    background: var(--color-hover-primary-soft);
    color: var(--color-cta-secondary-text);
  }

.mobile-bottom-nav__link.is-active {
    color: var(--color-cta-secondary-text);
  }

.reports-table-scroll,
  .deo-table-scroll,
  .deo-chart-wrap,
  .product-editor-table-wrap {
    overflow: auto;
  }

.deo-table-scroll,
  .deo-chart-wrap {
    -webkit-overflow-scrolling: touch;
  }

.admin-dashboard-table,
  .reports-table,
  .deo-table,
  .product-editor-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
  }

.admin-dashboard-table th,
  .reports-table th,
  .deo-table th,
  .product-editor-table th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
  }

.admin-dashboard-table th {
    padding: 0.85rem 0.8rem;
    border-bottom: 1px solid var(--dash-line);
    background: color-mix(in srgb, var(--color-surface-primary) 96%, transparent);
    color: var(--dash-muted);
  }

.reports-table th {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--r-line);
    background: color-mix(in srgb, var(--color-surface-secondary) 95%, transparent);
    color: var(--r-muted);
  }

.deo-table th {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--deo-line);
    background: color-mix(in srgb, var(--color-surface-secondary) 95%, transparent);
    color: var(--deo-muted);
  }

.product-editor-table th {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--pe-line);
    background: color-mix(in srgb, var(--color-surface-primary) 96%, transparent);
    color: var(--pe-muted);
    font-size: 0.76rem;
  }

.admin-dashboard-table td,
  .reports-table td,
  .deo-table td,
  .product-editor-table td {
    vertical-align: top;
  }

.admin-dashboard-table td {
    padding: 0.95rem 0.8rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--dash-ink);
    font-size: 0.86rem;
  }

.reports-table td {
    padding: 0.9rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--r-ink);
    font-size: 0.88rem;
  }

.deo-table td {
    padding: 0.9rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--deo-ink);
    font-size: 0.88rem;
  }

.product-editor-table td {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--pe-ink);
    font-size: 0.87rem;
  }

.admin-dashboard-table tr:hover td,
  .reports-table tr:hover td,
  .deo-table tr:hover td,
  .product-editor-table tr:hover td {
    background: var(--color-hover-primary-soft);
  }

.site-body:not(.is-admin) {
    --storefront-content-max: 1280px;
    background: var(--color-bg-canvas);
    background-image: none;
  }

.site-body:not(.is-admin) .page-shell {
    padding-top: 0;
  }

.site-body:not(.is-admin) .page-full-bleed {
    width: 100%;
    max-width: none;
  }

.site-body:not(.is-admin) .page-full-bleed > * {
    width: 100%;
  }

.site-body.home-page .page-shell {
    padding-top: 0;
  }

.site-body:not(.is-admin) .page-wrap,
  .storefront-shell-container {
    width: min(100%, var(--storefront-content-max));
    margin-inline: auto;
  }

.site-body:not(.is-admin) .site-content > * {
    width: 100%;
  }

.site-body:not(.is-admin) .site-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

.site-body:not(.is-admin) .site-content > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
    margin-bottom: 0;
  }

.storefront-shell-container {
    padding-inline: 1rem;
  }

.site-body.home-page .page-wrap,
  .site-body.is-looks-page .page-wrap {
    width: min(100%, var(--storefront-content-max));
  }

.site-body.is-product-page .page-wrap {
    width: min(100%, var(--storefront-content-max));
  }

.storefront-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-glass-warm);
    color: var(--color-text-strong);
  }

.storefront-header-strip {
    background: var(--color-dark-section-bg-soft);
    color: var(--color-dark-section-text);
    padding-block: 0.22rem;
    padding-inline: 1rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
  }

.storefront-header-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--color-text-heading);
    transition: color 160ms ease, background-color 160ms ease;
  }

.storefront-header-icon:hover,
  .storefront-header-icon:focus-visible {
    background: color-mix(in srgb, var(--color-cta-primary-bg) 6%, transparent);
    color: var(--color-text-strong);
    outline: none;
  }

.storefront-nav-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 160ms ease, background-color 160ms ease;
  }

.storefront-nav-pill:hover,
  .storefront-nav-pill.is-active {
    background: color-mix(in srgb, var(--color-cta-primary-bg) 6%, transparent);
    color: var(--color-text-heading);
  }

.storefront-login-link {
    display: inline-flex;
    height: 2.5rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background: var(--color-cta-primary-bg);
    padding-inline: 1rem;
    color: var(--color-text-inverse);
    font-size: 0.88rem;
    font-weight: 600;
  }

.site-body:not(.is-admin) .ui-button {
    min-height: 2.35rem;
    border-radius: var(--radius-site);
    font-weight: 600;
  }

.site-body:not(.is-admin) .ui-button--primary {
    border: 1px solid var(--color-cta-primary-bg);
    background: var(--color-cta-primary-bg);
    color: var(--color-text-inverse);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface-primary) 8%, transparent);
  }

.site-body:not(.is-admin) .ui-button--primary:hover {
    background: var(--color-cta-primary-hover);
  }

.site-body:not(.is-admin) .ui-button--secondary,
  .site-body:not(.is-admin) .ui-button--icon {
    border-color: var(--color-cta-secondary-border);
    background: var(--color-glass-ivory);
    color: var(--color-cta-secondary-text);
  }

.site-body:not(.is-admin) .ui-button--secondary:hover,
  .site-body:not(.is-admin) .ui-button--icon:hover {
    border-color: var(--color-border-primary-soft);
    background: var(--color-surface-primary);
    color: var(--color-text-strong);
  }

.mobile-bottom-nav {
    border-top: 1px solid var(--color-mobile-sticky-border);
    background: var(--color-mobile-sticky-bg);
    box-shadow: 0 -18px 48px -38px var(--color-shadow-teal);
  }

.mobile-bottom-nav__list {
    height: 4.5rem;
    color: color-mix(in srgb, var(--color-cta-primary-bg) 64%, transparent);
    font-weight: 500;
  }

.mobile-bottom-nav__link {
    position: relative;
    gap: 0.2rem;
    border-radius: 0;
  }

.mobile-bottom-nav__link::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 9999px;
    background: transparent;
  }

.mobile-bottom-nav__link.is-active {
    color: var(--color-cta-secondary-text);
  }

.mobile-bottom-nav__link.is-active::before {
    background: var(--color-cta-primary-bg);
  }

#mobile-menu > [data-mobile-menu-close],
  #mini-cart-overlay > [data-mini-cart-close] {
    background: var(--color-overlay-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

.mobile-menu-sheet {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    max-height: min(88svh, 680px);
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.35rem 1.35rem 0 0;
    background: var(--color-mobile-sheet-bg);
    box-shadow: 0 -24px 70px -34px var(--color-shadow-warm);
    transition: transform 240ms ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

.storefront-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--color-divider);
    padding: 1rem;
  }

.mobile-menu-link,
  .mobile-menu-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.35rem;
    background: var(--color-mobile-sheet-surface);
    padding: 0.72rem 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 160ms ease, background-color 160ms ease;
  }

.mobile-menu-tab {
    border-radius: 0.28rem;
    padding: 0.55rem 0.75rem;
    color: color-mix(in srgb, var(--color-text-primary) 64%, transparent);
    font-size: 0.86rem;
    font-weight: 500;
  }

.mobile-menu-tab.is-active {
    background: var(--color-surface-primary);
    color: var(--color-text-heading);
  }

.mobile-menu-empty {
    border: 1px solid var(--color-border-primary-soft);
    border-radius: 0.35rem;
    background: var(--color-surface-primary);
    padding: 0.8rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

.mobile-menu-category-link {
    display: block;
    border: 1px solid var(--color-border-primary-soft);
  }

.mobile-menu-link:hover,
  .mobile-menu-category-link:hover {
    background: var(--color-hover-primary-soft);
    color: var(--color-text-heading);
  }

.mobile-menu-separator {
    margin-block: 0.75rem;
    height: 1px;
    background: var(--color-divider);
  }

.mini-cart-sheet {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    max-height: min(88svh, 720px);
    overflow: hidden;
    border-radius: 1.35rem 1.35rem 0 0;
    background: var(--color-surface-primary);
    box-shadow: 0 -24px 70px -34px var(--color-shadow-warm);
    transition: transform 240ms ease;
  }

@media (max-width: 767px) {
    .site-body:not(.is-admin) .page-shell {
      padding-inline: 1rem;
      padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .site-body:not(.is-admin) .site-content {
      gap: 0;
    }

    .site-body.is-product-page .page-shell {
      padding-bottom: calc(8.25rem + env(safe-area-inset-bottom, 0px));
    }
  }

@media (min-width: 640px) {
    .storefront-shell-container {
      padding-inline: 1.5rem;
    }

    .mini-cart-sheet {
      inset-inline: auto auto;
      left: 0;
      top: 0;
      bottom: 0;
      width: min(100%, 28rem);
      height: 100%;
      max-height: none;
      border-radius: 0;
    }

  }

@media (min-width: 1024px) {
    .storefront-shell-container {
      padding-inline: 2rem;
    }
  }

.banner-slot {
    min-width: 0;
  }

.banner-card {
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

.banner-card__media {
    margin: 0 0 0.85rem;
    overflow: hidden;
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
  }

.banner-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

.banner-card__title {
    margin: 0;
  }

.banner-card__body {
    margin: 0;
  }

.banner-card__action {
    margin-top: 0.85rem;
  }

.banner-card__icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

.banner-card--default .banner-card__title,
  .banner-card--shortcode .banner-card__title {
    color: var(--color-text-strong);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.8;
  }

.banner-card--default .banner-card__body,
  .banner-card--shortcode .banner-card__body {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 2;
  }

.banner-slot--bar .banner-card {
    display: flex;
    width: min(100%, 76rem);
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-inline: auto;
    padding: 0.5rem 1rem;
    text-align: center;
  }

.banner-slot--bar .banner-card__media {
    display: none;
  }

.banner-slot--bar .banner-card__title {
    color: var(--color-dark-section-text);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.8;
  }

.banner-slot--bar .banner-card__body {
    color: var(--color-dark-section-text-muted);
    font-size: 0.78rem;
    line-height: 1.8;
  }

.banner-slot--bar .banner-card__action {
    margin-top: 0;
  }

.banner-card--home-features .banner-card__action {
    margin-top: 0.45rem;
  }

@media (max-width: 767px) {
    .banner-slot--bar .banner-card {
      flex-direction: column;
      gap: 0.35rem;
      min-height: 0;
      padding-block: 0.65rem;
    }
  }

.storefront-slider {
    position: relative;
  }

.storefront-slider.storefront-slider--bleed {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-inline: 0;
  }

.storefront-slider__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 500;
    overflow: hidden;
    background: var(--color-surface-secondary);
    box-shadow: 0 18px 42px -36px rgba(31, 27, 23, 0.34);
  }

.storefront-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease;
  }

.storefront-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

.storefront-slider__link {
    display: block;
    width: 100%;
    height: 100%;
  }

.storefront-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.storefront-slider__caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(1rem, 3vw, 2rem);
    background: color-mix(in srgb, var(--color-text-primary) 28%, transparent);
  }

.storefront-slider__caption-inner {
    max-width: 34rem;
    color: var(--color-surface-primary);
  }

.storefront-slider__caption-title {
    margin-bottom: 0.5rem;
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
  }

.storefront-slider__caption-copy {
    font-size: 0.95rem;
    line-height: 2;
    opacity: 0.88;
  }

.storefront-slider__dots {
    position: absolute;
    right: 0;
    bottom: 1rem;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 0.65rem;
  }

.storefront-slider__dot {
    cursor: pointer;
    border-radius: 9999px;
    background: var(--color-surface-inverse-muted);
    transition:
      background-color 160ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }

.storefront-slider__dot.is-active {
    background: var(--color-surface-primary);
  }

.storefront-slider__dot:hover {
    transform: scale(1.08);
  }

.storefront-slider__control {
    position: absolute;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary-soft);
    color: var(--color-text-heading);
    box-shadow: none;
  }

.storefront-slider__control:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-strong);
  }

.storefront-slider__control--next {
    right: 1.25rem;
  }

.storefront-slider__control--prev {
    left: 1.25rem;
  }

@media (max-width: 767px) {
    .storefront-slider__caption {
      padding: 1rem;
    }

    .storefront-slider__caption-title {
      font-size: 1.35rem;
    }

    .storefront-slider__control {
      display: none;
    }
  }

@supports not (aspect-ratio: 1 / 1) {
    .storefront-slider__frame {
      height: 0;
      padding-top: 31.25%;
    }
  }

.storefront-editorial-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-block: clamp(1.25rem, 3vw, 2.75rem);
  }

.storefront-journey,
  .storefront-discovery-flow,
  .storefront-journal-flow {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.75rem);
    padding-block: clamp(0.6rem, 1.5vw, 1.35rem);
  }

.storefront-collection-flow {
    display: grid;
    gap: clamp(1.35rem, 3vw, 2.75rem);
  }

.storefront-collection-section {
    --storefront-section-pad-x: clamp(0.35rem, 1vw, 0.75rem);

    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding-inline: var(--storefront-section-pad-x);
    padding-block: clamp(0.45rem, 1.5vw, 1.25rem);
  }

.storefront-carousel-frame {
    position: relative;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

.storefront-carousel-frame::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: clamp(1.75rem, 5vw, 4rem);
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, var(--color-bg-canvas), transparent);
    opacity: 0.72;
  }

.storefront-collection-heading {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: clamp(0.75rem, 1.55vw, 1.25rem);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    border-block: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    border-inline: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 8% 0%, rgba(181, 150, 88, 0.08), transparent 16rem),
      linear-gradient(180deg, rgba(255, 253, 248, 0.62), rgba(248, 240, 229, 0.34)),
      color-mix(in srgb, var(--color-surface-primary) 42%, transparent);
    box-shadow: var(--shadow-luxury-line);
    padding-block: clamp(0.78rem, 1.55vw, 1.1rem);
    padding-inline: max(
      clamp(1rem, 3vw, 2rem),
      calc((100vw - var(--storefront-content-max, 1280px)) / 2 + clamp(1rem, 3vw, 2rem))
    );
  }

.section-header__title {
    position: relative;
    display: inline-block;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-weight: 600;
    line-height: 1.62;
    letter-spacing: 0;
  }

.section-header__title::after {
    display: block;
    width: clamp(2.1rem, 5vw, 3.25rem);
    height: 1px;
    margin-top: 0.42rem;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 68%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent)
    );
  }

.section-header__subtitle {
    max-width: 36rem;
    margin-top: 0.38rem;
    color: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
    font-weight: 400;
    line-height: 2;
  }

.storefront-context-strip {
    border-block: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    padding-block: 0.75rem;
    color: color-mix(in srgb, var(--color-cta-primary-bg) 72%, transparent);
  }

.storefront-discovery-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

.storefront-discovery-pill {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 84%, transparent);
    padding: 0.58rem 0.85rem;
    color: color-mix(in srgb, var(--color-cta-primary-bg) 78%, transparent);
    font-size: 0.84rem;
    font-weight: 500;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }

.storefront-discovery-pill:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 28%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 92%, transparent);
    color: var(--color-text-heading);
  }

.storefront-search-panel--quiet {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 88%, transparent);
  }

.storefront-form-label {
    margin-bottom: 0.55rem;
    display: block;
    color: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    font-size: 0.84rem;
    font-weight: 500;
  }

.storefront-journal-section {
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    padding-top: clamp(1.5rem, 3vw, 2.75rem);
  }

.storefront-journal-sidebar {
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    padding-top: 1.25rem;
  }

.storefront-journal-sidebar-block {
    padding-block: 1.25rem;
  }

.storefront-page-kicker,
  .storefront-meta {
    color: color-mix(in srgb, var(--accent-gold) 72%, var(--color-cta-primary-bg));
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.9;
  }

.storefront-editorial-title {
    position: relative;
    display: inline-block;
    max-width: 48rem;
    color: color-mix(in srgb, var(--color-text-strong) 90%, var(--accent-gold));
    font-size: clamp(1.42rem, 2.35vw, 2.65rem);
    font-weight: 550;
    line-height: 1.62;
  }

.storefront-editorial-title::after {
    display: block;
    width: clamp(2.35rem, 5.5vw, 3.75rem);
    height: 1px;
    margin-top: 0.55rem;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 72%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent)
    );
  }

.storefront-editorial-copy {
    max-width: 42rem;
    color: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    font-size: clamp(0.9rem, 1.35vw, 1.02rem);
    font-weight: 400;
    line-height: 2.12;
  }

.storefront-search-panel {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(248, 240, 229, 0.54)),
      color-mix(in srgb, var(--color-surface-primary) 88%, transparent);
    padding: clamp(0.9rem, 2.2vw, 1.4rem);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
  }

.storefront-filter-sheet {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: color-mix(in srgb, var(--color-surface-secondary) 44%, transparent);
  }

.storefront-field {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 14%, transparent);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
    box-shadow: none;
  }

.storefront-field:focus {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 42%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
  }

@media (max-width: 767px) {
    .storefront-editorial-panel {
      padding-block: 1.25rem 2.5rem;
    }

    .storefront-editorial-panel--tonal {
      margin-inline: -1rem;
      padding-inline: 1rem;
    }

    .storefront-journey,
    .storefront-discovery-flow,
    .storefront-journal-flow {
      gap: 1.5rem;
      padding-block: 1rem 2rem;
    }

    .storefront-collection-heading {
      align-items: start;
      flex-direction: column;
      gap: 0.85rem;
      margin-inline: calc(50% - 50vw);
      padding: 0.82rem 1rem;
    }

    .storefront-all-products-header {
      margin-bottom: 0;
    }

    .section-header__title {
      line-height: 1.72;
    }

    .section-header__title::after,
    .storefront-editorial-title::after {
      width: 2.25rem;
      margin-top: 0.34rem;
    }

    .section-header__subtitle,
    .storefront-editorial-copy {
      font-size: 0.88rem;
      line-height: 2;
    }
  }

.storefront-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.75rem), 1fr));
    gap: clamp(0.85rem, 2vw, 1.35rem);
  }

.storefront-all-products-section {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
  }

.storefront-all-products-header {
    margin-bottom: 0;
  }

.storefront-all-products-count {
    display: grid;
    min-width: 5.5rem;
    justify-items: center;
    border-radius: var(--radius-site);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--color-cta-secondary-text) 88%, var(--accent-gold)), var(--color-cta-secondary-text));
    padding: 0.65rem 0.85rem;
    color: var(--color-text-inverse);
    line-height: 1.4;
    box-shadow: var(--shadow-luxury-line);
  }

.storefront-all-products-count span {
    font-size: clamp(1.1rem, 2.3vw, 1.55rem);
    font-weight: 800;
  }

.storefront-all-products-count small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    font-weight: 600;
  }

.storefront-all-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: clamp(0.75rem, 1.6vw, 1rem);
  }

.storefront-shop-category-intro {
    display: grid;
    gap: 0.45rem;
    width: min(100%, 42rem);
    margin-inline: auto;
    text-align: center;
  }

.storefront-shop-category-intro h2 {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-size: clamp(1.35rem, 2.35vw, 2.25rem);
    font-weight: 650;
    line-height: 1.65;
    letter-spacing: 0;
  }

.storefront-shop-category-intro h2::after {
    display: block;
    width: clamp(2.25rem, 5vw, 3.5rem);
    height: 1px;
    margin: 0.55rem auto 0;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 70%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent)
    );
  }

.storefront-shop-category-intro p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: clamp(0.9rem, 1.35vw, 1rem);
    line-height: 2;
  }

.storefront-shop-category-rail {
    display: grid;
    grid-auto-columns: minmax(9.75rem, 13.5rem);
    grid-auto-flow: column;
    justify-content: center;
    gap: clamp(0.75rem, 1.6vw, 1rem);
    max-width: 100%;
    margin-inline: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 0.15rem 0.45rem;
    scrollbar-width: none;
  }

.storefront-shop-category-rail::-webkit-scrollbar {
    display: none;
  }

.storefront-shop-category-card {
    position: relative;
    display: grid;
    min-height: clamp(9.75rem, 15vw, 12.5rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 13%, var(--color-surface-primary));
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: box-shadow 180ms ease;
  }

.storefront-shop-category-card:focus-visible {
    box-shadow:
      var(--shadow-luxury-line),
      var(--shadow-soft),
      0 0 0 3px var(--color-focus-soft);
  }

.storefront-shop-category-card__media {
    position: absolute;
    inset: 0;
  }

.storefront-shop-category-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.storefront-shop-category-card__label {
    position: relative;
    z-index: 2;
    align-self: end;
    margin: 0.55rem;
    border-radius: calc(var(--radius-site) - 3px);
    background: color-mix(in srgb, var(--color-surface-primary) 92%, transparent);
    padding: 0.65rem 0.75rem;
    color: var(--color-text-strong);
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
    text-shadow: none;
  }

@media (max-width: 640px) {
    .storefront-shop-category-rail {
      grid-auto-columns: minmax(8.75rem, 68vw);
      justify-content: start;
      margin-inline: calc(var(--page-shell-x, 1rem) * -0.25);
      padding-inline: calc(var(--page-shell-x, 1rem) * 0.25);
    }
  }

.storefront-shop-index [data-carousel-track] {
    --product-card-slide-width: clamp(172px, 58vw, 224px);
  }

@media (min-width: 768px) {
    .storefront-shop-index [data-carousel-track] {
      --product-card-slide-width: calc((100% - 2rem) / 3.35);
    }
  }

@media (min-width: 1024px) {
    .storefront-shop-index [data-carousel-track] {
      --product-card-slide-width: calc((100% - 3rem) / 4.35);
    }
  }

@media (min-width: 1280px) {
    .storefront-shop-index [data-carousel-track] {
      --product-card-slide-width: calc((100% - 5rem) / 6);
    }
  }

.storefront-footer {
    margin-top: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: color-mix(in srgb, var(--color-bg-canvas) 96%, transparent);
    color: var(--color-text-strong);
  }

.storefront-footer-cta {
    background: var(--color-cta-primary-bg);
    color: var(--color-surface-primary);
  }

.storefront-footer-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    justify-content: space-between;
    padding-block: clamp(1.25rem, 3vw, 2rem);
  }

.storefront-footer-cta__text {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.9;
  }

.storefront-footer-cta__button {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-surface-primary) 78%, transparent);
    border-radius: var(--radius-site);
    background: var(--color-surface-primary);
    color: var(--color-cta-primary-bg);
    padding-inline: 1.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
  }

.storefront-footer-cta__button:hover,
  .storefront-footer-cta__button:focus-visible {
    background: transparent;
    color: var(--color-surface-primary);
    opacity: 0.92;
    outline: none;
  }

.storefront-footer__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }

.storefront-footer__brand {
    display: grid;
    gap: 1rem;
    max-width: 34rem;
  }

.storefront-footer__logo {
    display: inline-flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    border-radius: 9999px;
    transition: opacity 160ms ease;
  }

.storefront-footer__logo:hover,
  .storefront-footer__logo:focus-visible {
    opacity: 0.78;
    outline: none;
  }

.storefront-footer__brand-copy {
    display: grid;
    gap: 0.65rem;
    max-width: 33rem;
  }

.storefront-footer__brand-description {
    color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
    font-size: 0.9rem;
    line-height: 2.15;
  }

.storefront-footer__brand-details {
    margin: 0;
  }

.storefront-footer__brand-summary {
    display: block;
    width: 100%;
    cursor: pointer;
    color: inherit;
    list-style: none;
  }

.storefront-footer__brand-summary::marker,
  .storefront-footer__brand-summary::-webkit-details-marker {
    display: none;
    content: "";
  }

.storefront-footer__brand-summary:hover .storefront-footer__brand-description,
  .storefront-footer__brand-summary:focus-visible .storefront-footer__brand-description {
    color: color-mix(in srgb, var(--color-cta-primary-bg) 78%, transparent);
  }

.storefront-footer__brand-summary:focus-visible {
    border-radius: 0.25rem;
    outline: 2px solid color-mix(in srgb, var(--color-cta-primary-bg) 32%, transparent);
    outline-offset: 0.2rem;
  }

.storefront-footer__brand-summary-copy {
    display: grid;
    gap: 0.65rem;
  }

.storefront-footer__brand-more {
    display: grid;
    gap: 0.95rem;
    margin-top: 1rem;
    padding-inline: 0 0.45rem;
    color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
    font-size: 0.84rem;
    line-height: 2.05;
    text-align: justify;
    text-align-last: right;
  }

.storefront-footer__brand-more h2 {
    margin: 0 0 0.45rem;
    color: var(--color-text-strong);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.9;
    text-align: right;
  }

.storefront-footer__brand-more p {
    margin: 0;
  }

.storefront-footer__brand-more section {
    display: grid;
    gap: 0.35rem;
  }

.storefront-footer__brand-more ul {
    display: grid;
    gap: 0.3rem;
    margin: 0.35rem 1.15rem 0.45rem 0;
    padding: 0;
    list-style: disc;
    list-style-position: outside;
    text-align: right;
    text-align-last: right;
  }

.storefront-footer__brand-more li {
    -webkit-padding-start: 0.15rem;
            padding-inline-start: 0.15rem;
    line-height: 1.95;
  }

.storefront-footer__nav,
  .storefront-footer__trust {
    display: grid;
    align-content: start;
    gap: 1rem;
  }

.storefront-footer__heading {
    color: color-mix(in srgb, var(--color-cta-primary-bg) 86%, transparent);
    font-size: 0.76rem;
    font-weight: 600;
  }

.storefront-footer__links {
    display: grid;
    gap: 0.45rem;
  }

.storefront-footer__link,
  .storefront-footer__legal {
    color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
    font-size: 0.9rem;
    line-height: 1.9;
    transition: color 160ms ease, opacity 160ms ease;
  }

.storefront-footer__link:hover,
  .storefront-footer__link:focus-visible,
  .storefront-footer__legal:hover,
  .storefront-footer__legal:focus-visible {
    color: var(--color-text-heading);
    outline: none;
  }

.storefront-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

.storefront-footer__badge {
    display: flex;
    width: 6.5rem;
    height: 6.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 58%, transparent);
    padding: 0.75rem;
    transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
  }

.storefront-footer__badge:hover,
  .storefront-footer__badge:focus-visible {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 22%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
    opacity: 0.9;
    outline: none;
  }

.storefront-footer__trust-copy {
    color: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
    font-size: 0.78rem;
  }

.storefront-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    padding-block: 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    color: color-mix(in srgb, var(--color-text-primary) 54%, transparent);
    font-size: 0.78rem;
  }

@media (min-width: 640px) {
    .storefront-footer-cta__inner {
      flex-direction: row;
      align-items: center;
    }

    .storefront-footer-cta__button {
      width: auto;
      white-space: nowrap;
    }

    .storefront-footer__bottom {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

@media (min-width: 1024px) {
    .storefront-footer__inner {
      grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.55fr) minmax(18rem, 0.75fr);
      align-items: start;
    }
  }

.profile-shell {
    width: min(100%, 84rem);
    margin-inline: auto;
    padding: clamp(0.85rem, 2.4vw, 1.6rem);
  }

.profile-shell__grid {
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.6rem);
  }

.profile-shell__sidebar {
    display: none;
  }

.profile-shell__content {
    min-width: 0;
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.45rem);
  }

.profile-shell__header {
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 92%, transparent);
    padding: clamp(1rem, 2.4vw, 1.4rem);
  }

.profile-shell__header span {
    color: var(--color-cta-secondary-text);
    font-size: 0.72rem;
    font-weight: 850;
  }

.profile-shell__header h1 {
    margin: 0;
    color: var(--color-text-heading);
    font-size: clamp(1.35rem, 2.5vw, 1.95rem);
    font-weight: 900;
    line-height: 1.45;
  }

.profile-shell__header p {
    max-width: 46rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.93rem;
    line-height: 1.9;
  }

.profile-shell-card {
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: 0.8rem;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-shell-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
  }

.profile-shell-account__avatar {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--color-border-primary-soft);
    border-radius: 0.5rem;
    background: var(--color-info-bg);
    color: var(--color-info-text);
    font-weight: 900;
  }

.profile-shell-account__copy {
    min-width: 0;
  }

.profile-shell-account__name {
    overflow: hidden;
    color: var(--color-text-heading);
    font-size: 0.93rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.profile-shell-account__meta {
    margin-top: 0.16rem;
    color: var(--color-text-muted);
    direction: ltr;
    font-size: 0.78rem;
    text-align: right;
  }

.profile-shell-nav {
    display: grid;
    gap: 0.28rem;
  }

.profile-shell-nav__item {
    display: flex;
    min-height: 2.7rem;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 850;
    padding: 0.62rem 0.7rem;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

.profile-shell-nav__item:hover {
    border-color: var(--color-border-primary-soft);
    background: color-mix(in srgb, var(--color-info-bg) 62%, transparent);
    color: var(--color-text-heading);
  }

.profile-shell-nav__item.is-active {
    border-color: var(--color-info-border);
    background: var(--color-info-bg);
    color: var(--color-info-text);
  }

.profile-shell-nav__icon {
    display: inline-flex;
    color: currentColor;
  }

.profile-shell-mobile-nav {
    margin-bottom: 0.85rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: 0.45rem;
  }

.profile-shell-mobile-nav summary {
    display: flex;
    min-height: 2.8rem;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.55rem;
  }

.profile-shell-mobile-nav summary::-webkit-details-marker {
    display: none;
  }

.profile-shell-mobile-nav__text {
    color: var(--color-text-heading);
    font-size: 0.9rem;
    font-weight: 900;
  }

.profile-shell-mobile-nav__chevron {
    color: var(--color-info-text);
    transition: transform 180ms ease;
  }

.profile-shell-mobile-nav[open] .profile-shell-mobile-nav__chevron {
    transform: rotate(180deg);
  }

.profile-shell-mobile-nav .profile-shell-nav {
    border-top: 1px solid var(--color-border-soft);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
  }

.profile-editorial-flow,
  .profile-page-flow {
    display: grid;
    gap: clamp(1rem, 2.3vw, 1.5rem);
  }

.profile-narrow-flow {
    width: min(100%, 54rem);
  }

.profile-form-card,
  .profile-list-panel,
  .profile-page-flow > .rounded,
  .profile-page-flow > .grid .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-form-grid {
    display: grid;
    gap: 1rem;
  }

.profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
  }

.profile-special-profile-form {
    display: grid;
    gap: 1rem;
  }

.profile-special-profile-form label,
  .profile-form-card label {
    color: var(--color-text-heading);
    font-size: 0.83rem;
    font-weight: 850;
  }

.profile-consent-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.9;
    padding: 0.85rem;
  }

.profile-consent-card input,
  .profile-special-profile-form input[type="checkbox"] {
    margin-top: 0.35rem;
    accent-color: var(--color-cta-primary-bg);
  }

.profile-special-profile-form .grid {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.profile-order-list {
    display: grid;
  }

.profile-order-card {
    display: grid;
    gap: 0.85rem;
    border-bottom: 1px solid var(--color-border-soft);
    padding: 1rem;
  }

.profile-order-card:last-child {
    border-bottom: 0;
  }

.profile-order-card__main {
    min-width: 0;
  }

.profile-order-card__number {
    color: var(--color-text-heading);
    direction: ltr;
    font-size: 0.98rem;
    font-weight: 900;
    text-align: right;
  }

.profile-order-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.75;
  }

.profile-order-card__status {
    justify-self: start;
  }

.profile-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

.profile-empty-state {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 2rem 1rem;
    text-align: center;
  }

.profile-overview {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: clamp(1rem, 2.4vw, 1.35rem);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-overview__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
  }

.profile-overview__avatar {
    display: grid;
    width: clamp(3.35rem, 7vw, 4.25rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--color-info-border);
    border-radius: 0.55rem;
    background: var(--color-info-bg);
    color: var(--color-info-text);
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    font-weight: 900;
  }

.profile-overview__copy {
    min-width: 0;
  }

.profile-overview__copy h2 {
    overflow-wrap: anywhere;
    margin: 0.55rem 0 0;
    color: var(--color-text-heading);
    font-size: clamp(1.12rem, 2.2vw, 1.45rem);
    font-weight: 900;
    line-height: 1.55;
  }

.profile-overview__copy p {
    overflow-wrap: anywhere;
    margin: 0.18rem 0 0;
    color: var(--color-text-muted);
    direction: ltr;
    font-size: 0.88rem;
    line-height: 1.8;
    text-align: right;
  }

.profile-overview__actions,
  .profile-hero__badges,
  .profile-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }

.profile-overview__actions {
    justify-content: flex-start;
  }

.profile-security-badge {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
  }

.profile-summary-grid {
    display: grid;
    gap: 0.75rem;
  }

.profile-summary-card {
    display: grid;
    gap: 0.3rem;
    border: 1px solid var(--color-border-soft);
    border-top-width: 3px;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: 0.95rem;
  }

.profile-summary-card span {
    color: var(--color-text-subtle);
    font-size: 0.76rem;
    font-weight: 800;
  }

.profile-summary-card strong {
    overflow-wrap: anywhere;
    color: var(--color-text-heading);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.65;
  }

.profile-main-grid {
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.55rem);
  }

.profile-main-grid__content,
  .profile-main-grid__side {
    display: grid;
    align-content: start;
    gap: clamp(1rem, 2.2vw, 1.35rem);
    min-width: 0;
  }

.profile-fact-grid,
  .profile-voucher-grid {
    display: grid;
    gap: clamp(0.9rem, 2vw, 1.2rem);
  }

.profile-editorial-section {
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: clamp(1rem, 2.2vw, 1.25rem);
  }

.profile-fact-list {
    display: grid;
    gap: 0.75rem;
  }

.profile-fact-list > div {
    display: grid;
    gap: 0.22rem;
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 0.7rem;
  }

.profile-fact-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

.profile-voucher-list {
    display: grid;
    gap: 0.75rem;
  }

.profile-voucher-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 0.9rem;
  }

.profile-voucher-row:first-child {
    border-top: 0;
    padding-top: 0;
  }

.profile-cta-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--color-border-primary-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-info-bg) 56%, var(--color-surface-primary));
    padding: clamp(1rem, 2.4vw, 1.25rem);
  }

.profile-security-card {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--color-border-soft);
    border-top: 3px solid var(--color-info-border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    padding: clamp(1rem, 2.4vw, 1.25rem);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-security-card__head {
    display: grid;
    gap: 0.34rem;
  }

.profile-security-card__eyebrow {
    color: var(--color-info-text);
    font-size: 0.72rem;
    font-weight: 850;
  }

.profile-security-card h2 {
    margin: 0;
    color: var(--color-text-heading);
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    font-weight: 900;
    line-height: 1.6;
  }

.profile-security-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.9;
  }

.profile-password-form {
    display: grid;
    gap: 0.9rem;
  }

.profile-password-form .field-block {
    display: grid;
    gap: 0.35rem;
  }

.profile-password-form label {
    margin: 0;
    color: var(--color-text-heading);
    font-size: 0.82rem;
    font-weight: 850;
  }

.profile-form-input {
    min-height: 2.9rem;
    border-color: var(--color-border-soft);
    border-radius: 0.45rem;
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
  }

.profile-form-input:focus {
    border-color: var(--color-info-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-info-bg) 70%, transparent);
  }

.profile-password-form .field-hint {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.75;
  }

@media (min-width: 640px) {
    .profile-summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-overview {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .profile-overview__actions {
      justify-content: flex-end;
    }
  }

@media (min-width: 768px) {
    .profile-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-order-card {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.15rem;
    }

    .profile-order-card__status {
      justify-self: center;
    }

    .profile-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .profile-voucher-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (min-width: 1024px) {
    .profile-shell {
      padding-block: clamp(1.15rem, 2.8vw, 2rem);
    }

    .profile-shell-mobile-nav {
      display: none;
    }

    .profile-shell__grid {
      grid-template-columns: minmax(17rem, 0.26fr) minmax(0, 1fr);
      align-items: start;
    }

    .profile-shell__sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 6rem;
      display: grid;
      gap: 0.85rem;
    }

    .profile-main-grid {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.34fr);
      align-items: start;
    }

    .profile-fact-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.blog-show-page {
    width: 100%;
    margin-inline: auto;
  }

.blog-show-hero {
    min-height: clamp(22rem, 48vw, 36rem);
    border-radius: var(--radius-site);
  }

.blog-show-layout {
    align-items: start;
  }

.blog-show-sidebar {
    min-width: 0;
  }

.storefront-journal-sidebar {
    display: grid;
    gap: 0.85rem;
    border-top: 0;
    padding-top: 0;
  }

.storefront-journal-sidebar.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
  }

.storefront-journal-sidebar-block {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 12%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 84%, transparent);
    padding: clamp(0.85rem, 1.8vw, 1.1rem);
    box-shadow: var(--shadow-soft);
  }

.storefront-journal-sidebar-block > div:first-child {
    color: var(--color-text-strong);
    line-height: 1.7;
  }

.storefront-journal-sidebar-block .form-label {
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }

.storefront-journal-sidebar-block .form-input,
  .storefront-journal-sidebar-block .form-select,
  .storefront-journal-sidebar-block .form-textarea {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: var(--color-surface-primary);
  }

.storefront-journal-sidebar-block .form-input:focus,
  .storefront-journal-sidebar-block .form-select:focus,
  .storefront-journal-sidebar-block .form-textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
  }

.storefront-journal-sidebar-block a.flex {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.flex:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.flex img {
    border-radius: var(--radius-site);
  }

.blog-show-article {
    min-width: 0;
  }

.blog-gallery {
    padding: clamp(0.75rem, 2vw, 1.25rem);
  }

.blog-gallery__button {
    border-radius: var(--radius-site);
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 14%, transparent);
  }

.storefront-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
  }

.storefront-shop-reading__grid .blog-card {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, var(--color-surface-primary));
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 240, 229, 0.88)),
      var(--color-surface-primary);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
  }

.storefront-shop-reading__grid .blog-card__body {
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 7%, transparent);
    background: transparent;
    color: var(--color-text-primary);
  }

.storefront-shop-reading__grid .blog-card h4 {
    background: transparent;
    color: color-mix(in srgb, var(--color-text-strong) 90%, var(--accent-gold));
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.75;
  }

.storefront-shop-reading__grid .blog-card p {
    background: transparent;
    color: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.85;
  }

.storefront-blog-more-card {
    min-height: 100%;
  }

.storefront-blog-carousel-section {
    margin-top: clamp(1.35rem, 3.5vw, 3rem);
  }

.home-blog-carousel {
    direction: rtl;
  }

.blog-card-slide {
    width: min(76vw, 17.5rem);
    flex: 0 0 min(76vw, 17.5rem);
  }

[data-reading-progress] {
    transform: scaleX(0);
  }

[data-copy-link].is-copied {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
  }

.blog-toc-empty {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
  }

.blog-toc-list {
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

.blog-toc-item--child {
    -webkit-padding-start: 1rem;
            padding-inline-start: 1rem;
  }

.blog-toc-link {
    display: block;
    border: 1px solid transparent;
    border-radius: var(--radius-site);
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem;
  }

.blog-toc-link:hover {
    background: var(--color-hover-warm);
    color: var(--color-text-primary);
  }

.blog-toc-link.is-active {
    border-color: var(--color-border-primary-soft);
    background: var(--color-hover-primary-soft);
    color: var(--color-cta-link);
  }

@media (min-width: 768px) {
    .blog-card-slide {
      width: 17rem;
      flex-basis: 17rem;
    }

    .blog-block-gallery__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

@media (min-width: 1024px) {
    .blog-card-slide {
      width: 18.5rem;
      flex-basis: 18.5rem;
    }
  }

@media (max-width: 767px) {
    .blog-show-hero {
      min-height: 24rem;
      margin-inline: -1rem;
      border-radius: 0;
    }

    .blog-show-layout {
      gap: 1.5rem;
    }


    .storefront-shop-reading {
      margin-top: 1.25rem;
    }

    .storefront-shop-reading__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

.blog-index-page {
    gap: clamp(1.1rem, 2.5vw, 2rem);
  }

.blog-index-category-heading span {
    color: color-mix(in srgb, var(--accent-gold) 78%, var(--color-cta-primary-bg));
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.8;
  }

.blog-index-context {
    margin-top: clamp(0.5rem, 1.4vw, 1rem);
  }

.blog-index-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.28fr);
    gap: clamp(1rem, 2.6vw, 2rem);
    align-items: start;
    margin-top: clamp(0.85rem, 2vw, 1.6rem);
  }

.blog-index-content {
    min-width: 0;
  }

.blog-index-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 0.85rem;
    min-width: 0;
  }

.blog-index-search-panel,
  .blog-index-latest-panel,
  .blog-index-quick-panel,
  .blog-index-topics-panel {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    border-radius: var(--radius-site);
    background:
      radial-gradient(circle at 8% 0%, rgba(181, 150, 88, 0.08), transparent 16rem),
      linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(248, 240, 229, 0.48)),
      color-mix(in srgb, var(--color-surface-primary) 54%, transparent);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
    padding: clamp(0.9rem, 2vw, 1.2rem);
  }

.blog-index-panel-heading {
    display: grid;
    gap: 0.22rem;
  }

.blog-index-panel-heading h2 {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-size: clamp(0.98rem, 1.4vw, 1.16rem);
    font-weight: 650;
    line-height: 1.8;
  }

.blog-index-panel-heading p {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 56%, transparent);
    font-size: 0.78rem;
    line-height: 1.9;
  }

.blog-index-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    align-items: stretch;
  }

.blog-index-search-form .form-label {
    margin-bottom: -0.18rem;
  }

.blog-index-search-submit {
    width: 100%;
    min-width: 0;
  }

.blog-index-latest-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

.blog-index-quick-list,
  .blog-index-topic-list {
    display: grid;
    gap: 0.5rem;
  }

.blog-index-quick-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 70%, transparent);
    padding: 0.65rem 0.75rem;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
  }

.blog-index-quick-list a:hover,
  .blog-index-quick-list a.is-active {
    border-color: color-mix(in srgb, var(--accent-gold) 28%, var(--color-cta-primary-bg));
    background: var(--color-surface-primary);
    transform: translateY(-1px);
  }

.blog-index-quick-list span {
    color: var(--color-text-strong);
    font-size: 0.82rem;
    font-weight: 700;
  }

.blog-index-quick-list small {
    color: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
    font-size: 0.68rem;
    white-space: nowrap;
  }

.blog-index-topic-list {
    display: flex;
    flex-wrap: wrap;
  }

.blog-index-topic-list a {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 12%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 78%, transparent);
    color: var(--color-text-muted);
    padding: 0.52rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
  }

.blog-index-topic-list a:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--color-cta-primary-bg));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--color-surface-primary));
    color: var(--color-text-strong);
  }

.blog-index-latest-item {
    display: grid;
    grid-template-columns: 3.45rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 68%, transparent);
    padding: 0.48rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
  }

.blog-index-latest-item:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: var(--color-surface-primary);
    transform: translateY(-1px);
  }

.blog-index-latest-item img {
    width: 3.45rem;
    height: 3.45rem;
    border-radius: var(--radius-site);
    object-fit: cover;
    background: var(--color-surface-secondary);
  }

.blog-index-latest-item span {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
  }

.blog-index-latest-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

.blog-index-latest-item small {
    color: color-mix(in srgb, var(--color-text-primary) 52%, transparent);
    font-size: 0.68rem;
    line-height: 1.5;
  }

.blog-index-type-list,
  .blog-index-category-list {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.4rem);
  }

.blog-index-type {
    display: grid;
    gap: clamp(1rem, 2.3vw, 1.75rem);
  }

.blog-index-type__heading {
    display: grid;
    justify-items: start;
    gap: 0.22rem;
    border-block: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    background:
      linear-gradient(90deg, rgba(181, 150, 88, 0.08), transparent 55%),
      color-mix(in srgb, var(--color-surface-primary) 30%, transparent);
    padding-block: clamp(0.75rem, 1.6vw, 1rem);
  }

.blog-index-type__heading span {
    color: color-mix(in srgb, var(--accent-gold) 72%, var(--color-cta-primary-bg));
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.8;
  }

.blog-index-type__heading h2 {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 90%, var(--accent-gold));
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 550;
    line-height: 1.65;
  }

.blog-index-category {
    display: grid;
    gap: clamp(0.85rem, 1.8vw, 1.2rem);
  }

.blog-index-category-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    padding-bottom: 0.65rem;
  }

.blog-index-category-heading h3 {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 90%, var(--accent-gold));
    font-size: clamp(1rem, 1.55vw, 1.32rem);
    font-weight: 750;
    line-height: 1.65;
  }

.blog-index-category-heading a {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 12%, transparent);
    border-radius: var(--radius-site);
    color: var(--color-cta-link);
    padding: 0.48rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
  }

.blog-index-post-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
    align-items: stretch;
  }

.blog-index-post-grid .blog-card {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, var(--color-surface-primary));
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 240, 229, 0.88)),
      var(--color-surface-primary);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
  }

.blog-index-post-grid .blog-card__body {
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 7%, transparent);
    background: transparent;
    color: var(--color-text-primary);
  }

.blog-index-post-grid .blog-card h4 {
    background: transparent;
    color: color-mix(in srgb, var(--color-text-strong) 90%, var(--accent-gold));
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.75;
  }

.blog-index-post-grid .blog-card p {
    background: transparent;
    color: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.85;
  }

@media (max-width: 767px) {
    .blog-index-category-heading {
      align-items: start;
      flex-direction: column;
    }

    .blog-index-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .blog-index-sidebar {
      position: static;
      order: -1;
    }

    .blog-index-search-form,
    .blog-index-latest-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .blog-index-type__heading {
      padding-block: 0.8rem;
    }

    .blog-index-post-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  .profile-page-flow > .rules-sidebar-panel,
  .profile-page-flow > .grid .rules-sidebar-panel {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.rules-sidebar-panel.border) {
    border-color: var(--admin-border);
  }

.rules-sidebar-panel {
  border-radius: var(--radius-site);
  padding: 1.25rem;
    background: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
}


  .profile-page-flow > .rules-article-panel,
  .profile-page-flow > .grid .rules-article-panel {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.rules-article-panel.border) {
    border-color: var(--admin-border);
  }

.rules-article-panel {
  border-radius: var(--radius-site);
  padding: 1.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
}

.trust-seal-image {
    cursor: pointer;
  }

.prose .ql-align-center {
    text-align: center;
  }

.prose .ql-align-right {
    text-align: right;
  }

.prose .ql-align-left {
    text-align: left;
  }

.prose .ql-align-justify {
    text-align: justify;
  }

.prose .ql-direction-rtl {
    direction: rtl;
  }

.prose .ql-direction-ltr {
    direction: ltr;
  }

.prose .ql-indent-1 {
    -webkit-padding-start: 1.5rem;
            padding-inline-start: 1.5rem;
  }

.prose .ql-indent-2 {
    -webkit-padding-start: 3rem;
            padding-inline-start: 3rem;
  }

.prose .ql-indent-3 {
    -webkit-padding-start: 4.5rem;
            padding-inline-start: 4.5rem;
  }

.prose .ql-indent-4 {
    -webkit-padding-start: 6rem;
            padding-inline-start: 6rem;
  }

.prose .ql-indent-5 {
    -webkit-padding-start: 7.5rem;
            padding-inline-start: 7.5rem;
  }

.prose .ql-indent-6 {
    -webkit-padding-start: 9rem;
            padding-inline-start: 9rem;
  }

.prose .ql-indent-7 {
    -webkit-padding-start: 10.5rem;
            padding-inline-start: 10.5rem;
  }

.prose .ql-indent-8 {
    -webkit-padding-start: 12rem;
            padding-inline-start: 12rem;
  }

.prose .ql-size-small {
    font-size: 0.875em;
  }

.prose .ql-size-large {
    font-size: 1.25em;
  }

.prose .ql-size-huge {
    font-size: 1.5em;
  }

.prose .ql-font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  }

.prose .ql-font-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
  }

.ui-product-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, var(--color-surface-primary));
    border-radius: var(--radius-site);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 240, 229, 0.88)),
      var(--color-surface-primary);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
    text-align: right;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease,
      background-color 180ms ease;
  }

.ui-product-card:hover,
  .ui-product-card:focus-within {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 18%, var(--color-surface-primary));
    box-shadow: var(--shadow-luxury-line), var(--shadow-float);
    transform: translateY(-1px);
  }

.ui-product-card--list {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: stretch;
    gap: 0.8rem;
    padding: 0.55rem;
  }

.ui-product-card--list .ui-product-card__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-site);
  }

.ui-product-card--list .ui-product-card__content {
    padding: 0.1rem 0 0.15rem;
  }

.ui-product-card--media-first {
    border-radius: calc(var(--radius-site) - 2px);
  }

.ui-product-card--media-first .ui-product-card__media {
    aspect-ratio: 1 / 0.88;
  }

.ui-product-card--media-first .ui-product-card__content {
    gap: 0.25rem;
    padding: 0.5rem 0.6rem 0.6rem;
  }

.ui-product-card--media-first .ui-product-card__title {
    min-height: 2.45rem;
    font-size: 0.73rem;
    line-height: 1.68;
  }

.ui-product-card--media-first .ui-product-card__meta {
    font-size: 0.63rem;
  }

.ui-product-card--media-first .ui-product-card__tag {
    padding: 0.1rem 0.4rem;
    font-size: 0.6rem;
  }

.ui-product-card--media-first .ui-product-price__current {
    font-size: 0.76rem;
  }

.ui-product-card--media-first .ui-product-price__currency,
  .ui-product-card--media-first .ui-product-price__original {
    font-size: 0.62rem;
  }

.ui-product-card__media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background:
      linear-gradient(135deg, rgba(255, 253, 248, 0.32), rgba(0, 73, 83, 0.04)),
      var(--surface-sand);
  }

.ui-product-card__media::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.16), transparent 42%),
      linear-gradient(0deg, rgba(31, 27, 23, 0.05), transparent 32%);
  }

.ui-product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
      transform 500ms ease,
      opacity 180ms ease,
      -webkit-filter 180ms ease;
    transition:
      transform 500ms ease,
      opacity 180ms ease,
      filter 180ms ease;
    transition:
      transform 500ms ease,
      opacity 180ms ease,
      filter 180ms ease,
      -webkit-filter 180ms ease;
  }

.ui-product-card:hover .ui-product-card__image,
  .ui-product-card:focus-within .ui-product-card__image {
    transform: scale(1.02);
  }

.ui-product-card__image.is-muted {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 0.72;
  }

.ui-product-card.is-unavailable::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: var(--color-unavailable-overlay);
  }

.ui-product-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 7%, transparent);
    padding: 0.65rem 0.7rem 0.7rem;
  }

.ui-product-card__title {
    display: -webkit-box;
    min-height: 2.85rem;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

.ui-product-card__link,
  .ui-product-card__meta-link,
  .ui-product-card__tag {
    color: inherit;
    text-decoration: none;
  }

.ui-product-card__link:focus-visible,
  .ui-product-card__meta-link:focus-visible,
  .ui-product-card__tag:focus-visible {
    border-radius: var(--radius-site);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
    outline: none;
  }

.ui-product-card__meta {
    color: var(--color-text-subtle);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.7;
  }

.ui-product-card__meta-link:hover {
    color: var(--color-cta-secondary-text);
  }

.ui-product-card__tags {
    display: flex;
    min-width: 0;
    overflow: hidden;
  }

.ui-product-card__tag {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    background: color-mix(in srgb, var(--color-hover-warm) 82%, var(--color-surface-primary));
    padding: 0.12rem 0.45rem;
    color: var(--color-text-subtle);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.7;
  }

.ui-product-card__footer {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: auto;
  }

.ui-product-badge {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-start: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding: 0.22rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.4;
  }

.ui-product-badge--subtle {
    background: var(--color-discount-bg);
    color: var(--color-discount-text);
  }

.ui-product-badge--muted {
    background: var(--color-out-bg);
    color: var(--color-out-text);
  }

.ui-product-price {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
  }

.ui-product-price__current {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    color: var(--color-price);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.5;
  }

.ui-product-price__currency {
    color: var(--color-text-subtle);
    font-size: 0.66rem;
    font-weight: 500;
  }

.ui-product-price__original {
    color: var(--color-text-disabled);
    font-size: 0.68rem;
    line-height: 1.4;
    text-decoration: line-through;
  }

@media (max-width: 640px) {
    .ui-product-card__content {
      padding: 0.55rem 0.6rem 0.6rem;
    }

    .ui-product-card__title {
      min-height: 2.65rem;
      font-size: 0.73rem;
      line-height: 1.8;
    }

  }

.storefront-more-card-slide {
    display: flex;
    align-self: stretch;
    height: auto;
  }

.storefront-more-card {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 100%;
    padding: clamp(1rem, 2vw, 1.35rem);
    background:
      radial-gradient(circle at 50% 0%, rgba(181, 150, 88, 0.12), transparent 11rem),
      linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(248, 240, 229, 0.74)),
      var(--color-surface-primary);
    color: var(--color-text-strong);
    text-align: center;
    text-decoration: none;
  }

.storefront-more-card::before {
    position: absolute;
    inset: 0.55rem;
    pointer-events: none;
    content: "";
    border: 1px solid color-mix(in srgb, var(--accent-gold) 26%, transparent);
    border-radius: calc(var(--radius-site) + 1px);
  }

.storefront-more-card__mark {
    display: inline-flex;
    width: 2.7rem;
    height: 2.7rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--color-surface-primary));
    color: var(--color-cta-secondary-text);
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
  }

.storefront-more-card__title {
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.8;
  }

.storefront-more-card__text {
    max-width: 10rem;
    color: color-mix(in srgb, var(--color-text-primary) 56%, transparent);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.9;
  }

@media (max-width: 640px) {
    .storefront-more-card {
      min-height: 13rem;
      padding: 0.9rem;
    }
  }

.site-body.is-admin {
    --admin-bg: #080c0f;
    --admin-bg-deep: #05080a;
    --admin-bg-soft: #0d1417;
    --admin-surface: #11191d;
    --admin-surface-2: #162226;
    --admin-surface-3: #1d2f34;
    --admin-surface-raised: #19252a;
    --admin-surface-group: color-mix(in srgb, var(--admin-surface) 78%, var(--admin-surface-2) 22%);
    --admin-border: rgba(220, 232, 230, 0.13);
    --admin-border-strong: rgba(220, 232, 230, 0.25);
    --admin-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.28);
    --admin-shadow-float: 0 22px 60px rgba(0, 0, 0, 0.34);
    --admin-shadow-inset: inset 0 1px 0 rgba(255, 253, 248, 0.05);
    --admin-text: #f5f1e8;
    --admin-muted: #b7c5c2;
    --admin-faint: #849794;
    --admin-primary: #77d8cf;
    --admin-primary-strong: #a5eee7;
    --admin-primary-contrast: #071013;
    --admin-primary-ink: #06272d;
    --admin-rainbow-bg:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%),
      radial-gradient(circle at 10% 0%, rgba(79, 172, 254, 0.62), transparent 46%),
      radial-gradient(circle at 100% 100%, rgba(255, 123, 172, 0.38), transparent 46%),
      linear-gradient(135deg, color-mix(in srgb, var(--admin-bg) 38%, rgb(79, 172, 254) 62%), color-mix(in srgb, var(--admin-bg) 66%, rgb(43, 214, 190) 34%));
    --admin-rainbow-bg-hover:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%),
      radial-gradient(circle at 12% 0%, rgba(255, 123, 172, 0.5), transparent 42%),
      radial-gradient(circle at 100% 100%, rgba(43, 214, 190, 0.42), transparent 46%),
      linear-gradient(135deg, color-mix(in srgb, var(--admin-bg) 36%, rgb(255, 123, 172) 64%), color-mix(in srgb, var(--admin-bg) 66%, rgb(79, 172, 254) 34%));
    --admin-rainbow-line: linear-gradient(90deg, rgb(79, 172, 254), rgb(43, 214, 190), rgb(255, 123, 172));
    --admin-rainbow-soft:
      radial-gradient(circle at 12% 0%, rgba(79, 172, 254, 0.2), transparent 44%),
      radial-gradient(circle at 100% 100%, rgba(255, 123, 172, 0.14), transparent 44%),
      var(--admin-surface-2);
    --admin-rainbow-border: rgba(79, 172, 254, 0.54);
    --admin-rainbow-shadow: 0 16px 34px -28px rgba(79, 172, 254, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --admin-sidebar-bg: #05090b;
    --admin-sidebar-surface: #0c171a;
    --admin-sidebar-hover: #132429;
    --admin-sidebar-text: #f8f3ea;
    --admin-sidebar-muted: #b8c9c6;
    --admin-sidebar-faint: #78918d;
    --admin-success: #8fe4a8;
    --admin-success-surface: #10251b;
    --admin-success-border: rgba(143, 228, 168, 0.28);
    --admin-warning: #f0d084;
    --admin-warning-surface: #2d2413;
    --admin-warning-border: rgba(240, 208, 132, 0.3);
    --admin-danger: #f39b9b;
    --admin-danger-surface: #301817;
    --admin-danger-border: rgba(243, 155, 155, 0.3);
    --admin-info: #8ed7f6;
    --admin-info-surface: #102530;
    --admin-info-border: rgba(142, 215, 246, 0.3);
    --admin-lilac: #2a2140;
    --admin-lilac-rgb: 42, 33, 64;
    --admin-lilac-surface: #191427;
    --admin-lilac-border: #47375f;
    --admin-pastel-cream: #3d321f;
    --admin-pastel-cream-rgb: 61, 50, 31;
    --admin-pastel-peach: #3d2a24;
    --admin-pastel-peach-rgb: 61, 42, 36;
    --admin-pastel-pink: #3a2331;
    --admin-pastel-pink-rgb: 58, 35, 49;
    --admin-pastel-sky: #1f3944;
    --admin-pastel-sky-rgb: 31, 57, 68;
    --admin-pastel-mint: #1f3b36;
    --admin-pastel-mint-rgb: 31, 59, 54;
    --primary-rgb: 119, 216, 207;
    --primary-50: #10282a;
    --primary-100: #15383a;
    --primary-200: #20575b;
    --primary-300: #2d777c;
    --primary-400: #45a9ad;
    --primary-500: var(--admin-primary);
    --primary-600: var(--admin-primary-strong);
    --primary-700: #c7f7f1;
    --primary-800: #e7fffb;
    --primary-900: #f5fffd;
    --primary-950: #f8fffe;
    --surface-ivory: var(--admin-surface);
    --surface-ivory-rgb: 17, 25, 29;
    --surface-warm: var(--admin-bg);
    --surface-warm-rgb: 8, 12, 15;
    --focus-ring: var(--admin-primary-strong);
    --ink: var(--admin-text);
    --muted: var(--admin-muted);
    --bg: var(--admin-bg);
    --card: var(--admin-surface);
    --line: var(--admin-border);
    --shadow-soft: var(--admin-shadow-soft);
    --shadow-float: var(--admin-shadow-float);
    --color-bg-canvas: var(--admin-bg);
    --color-bg-canvas-soft: var(--admin-bg-soft);
    --color-surface-primary: var(--admin-surface);
    --color-surface-secondary: var(--admin-surface-2);
    --color-surface-raised: var(--admin-surface-raised);
    --color-surface-group: var(--admin-surface-group);
    --color-text-primary: var(--admin-text);
    --color-text-strong: #fffaf0;
    --color-text-heading: #f8f3ea;
    --color-text-muted: var(--admin-muted);
    --color-text-subtle: var(--admin-faint);
    --color-text-disabled: rgba(245, 241, 232, 0.38);
    --color-text-inverse: var(--admin-primary-contrast);
    --color-text-inverse-muted: rgba(7, 16, 19, 0.66);
    --color-cta-primary-bg: var(--admin-primary);
    --color-cta-primary-hover: var(--admin-primary-strong);
    --color-cta-primary-active: #c7f7f1;
    --color-cta-secondary-bg: var(--admin-surface-2);
    --color-cta-secondary-text: var(--admin-primary-strong);
    --color-cta-secondary-border: var(--admin-border-strong);
    --color-cta-link: var(--admin-primary-strong);
    --color-cta-link-hover: #f1d999;
    --color-cta-premium-bg: var(--admin-warning);
    --color-cta-premium-hover: #f1d999;
    --color-cta-premium-text: #171006;
    --color-success-bg: var(--admin-success-surface);
    --color-success-border: var(--admin-success-border);
    --color-success-text: var(--admin-success);
    --color-warning-bg: var(--admin-warning-surface);
    --color-warning-border: var(--admin-warning-border);
    --color-warning-text: var(--admin-warning);
    --color-error-bg: var(--admin-danger-surface);
    --color-error-border: var(--admin-danger-border);
    --color-error-text: var(--admin-danger);
    --color-info-bg: var(--admin-info-surface);
    --color-info-border: var(--admin-info-border);
    --color-info-text: var(--admin-info);
    --color-price: var(--admin-primary-strong);
    --color-price-strong: var(--admin-text);
    --color-border-soft: var(--admin-border);
    --color-border-default: var(--admin-border);
    --color-border-strong: var(--admin-border-strong);
    --color-border-primary-soft: var(--admin-border);
    --color-border-focus: var(--admin-primary);
    --color-divider: var(--admin-border);
    --color-divider-dark: var(--admin-border-strong);
    --color-hover-warm: #18211d;
    --color-hover-primary-soft: rgba(var(--primary-rgb), 0.12);
    --color-active-primary-soft: rgba(var(--primary-rgb), 0.18);
    --color-focus: var(--admin-primary-strong);
    --color-focus-soft: rgba(var(--primary-rgb), 0.2);
    --color-disabled-bg: rgba(255, 253, 248, 0.06);
    --color-disabled-border: rgba(255, 253, 248, 0.1);
    --color-disabled-text: rgba(245, 241, 232, 0.38);
    --color-overlay-soft: rgba(0, 0, 0, 0.42);
    --color-overlay-strong: rgba(0, 0, 0, 0.72);
    --color-surface-inverse-muted: rgba(255, 253, 248, 0.1);
    --color-surface-inverse-hover: rgba(255, 253, 248, 0.16);
    --color-border-inverse-soft: rgba(255, 253, 248, 0.18);
    background-image: none;
    background-color: var(--admin-bg);
    color: var(--admin-text);
  }

.admin-dashboard-shell {
    --dash-ink: var(--admin-text);
    --dash-muted: var(--admin-muted);
    --dash-line: var(--admin-border);
    --dash-surface: color-mix(in srgb, var(--admin-surface) 82%, transparent);
    --dash-panel: var(--admin-surface);
    --dash-brand: var(--admin-primary);
    --dash-brand-2: var(--admin-primary-strong);
    --dash-warm: var(--admin-warning);
  }


  .profile-page-flow > .admin-dashboard-panel,
  .profile-page-flow > .grid .admin-dashboard-panel {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-panel.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-site);
    border: 1px solid var(--dash-line);
    background: var(--admin-surface);
    box-shadow: none;
}

.admin-dashboard-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--admin-rainbow-line);
    opacity: 0.9;
  }


  .profile-page-flow > .admin-dashboard-stat,
  .profile-page-flow > .grid .admin-dashboard-stat,
  .profile-page-flow > 
  .admin-stat-card,
  .profile-page-flow > .grid 
  .admin-stat-card,
  .profile-page-flow > 
  .reports-kpi-grid > .reports-card,
  .profile-page-flow > .grid 
  .reports-kpi-grid > .reports-card,
  .profile-page-flow > 
  .deo-kpi,
  .profile-page-flow > .grid 
  .deo-kpi,
  .profile-page-flow > 
  .product-editor-stat,
  .profile-page-flow > .grid 
  .product-editor-stat {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-stat.border),.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,
  .admin-stat-card.border),.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,
  .reports-kpi-grid > .reports-card.border),.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,
  .deo-kpi.border),.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,
  .product-editor-stat.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-stat,
  .admin-stat-card,
  .reports-kpi-grid > .reports-card,
  .deo-kpi,
  .product-editor-stat {
  border-radius: var(--radius-site);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    --admin-stat-accent: var(--admin-pastel-sky);
    --admin-stat-accent-rgb: var(--admin-pastel-sky-rgb);
    --admin-stat-ink: var(--admin-text);
    --admin-stat-muted: color-mix(in srgb, var(--admin-muted) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--admin-stat-accent) 82%, transparent);
    background-color: var(--admin-stat-accent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--admin-text) 34%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.admin-dashboard-stat:nth-child(6n + 1),
  .admin-stat-card:nth-child(6n + 1),
  .reports-kpi-grid > .reports-card:nth-child(6n + 1),
  .deo-kpi:nth-child(6n + 1),
  .product-editor-stat:nth-child(6n + 1) {
    --admin-stat-accent: var(--admin-pastel-pink);
    --admin-stat-accent-rgb: var(--admin-pastel-pink-rgb);
  }

.admin-dashboard-stat:nth-child(6n + 2),
  .admin-stat-card:nth-child(6n + 2),
  .reports-kpi-grid > .reports-card:nth-child(6n + 2),
  .deo-kpi:nth-child(6n + 2),
  .product-editor-stat:nth-child(6n + 2) {
    --admin-stat-accent: var(--admin-pastel-mint);
    --admin-stat-accent-rgb: var(--admin-pastel-mint-rgb);
  }

.admin-dashboard-stat:nth-child(6n + 3),
  .admin-stat-card:nth-child(6n + 3),
  .reports-kpi-grid > .reports-card:nth-child(6n + 3),
  .deo-kpi:nth-child(6n + 3),
  .product-editor-stat:nth-child(6n + 3) {
    --admin-stat-accent: var(--admin-pastel-sky);
    --admin-stat-accent-rgb: var(--admin-pastel-sky-rgb);
  }

.admin-dashboard-stat:nth-child(6n + 4),
  .admin-stat-card:nth-child(6n + 4),
  .reports-kpi-grid > .reports-card:nth-child(6n + 4),
  .deo-kpi:nth-child(6n + 4),
  .product-editor-stat:nth-child(6n + 4) {
    --admin-stat-accent: var(--admin-lilac);
    --admin-stat-accent-rgb: var(--admin-lilac-rgb);
  }

.admin-dashboard-stat:nth-child(6n + 5),
  .admin-stat-card:nth-child(6n + 5),
  .reports-kpi-grid > .reports-card:nth-child(6n + 5),
  .deo-kpi:nth-child(6n + 5),
  .product-editor-stat:nth-child(6n + 5) {
    --admin-stat-accent: var(--admin-pastel-cream);
    --admin-stat-accent-rgb: var(--admin-pastel-cream-rgb);
  }

.admin-dashboard-stat:nth-child(6n + 6),
  .admin-stat-card:nth-child(6n + 6),
  .reports-kpi-grid > .reports-card:nth-child(6n + 6),
  .deo-kpi:nth-child(6n + 6),
  .product-editor-stat:nth-child(6n + 6) {
    --admin-stat-accent: var(--admin-pastel-peach);
    --admin-stat-accent-rgb: var(--admin-pastel-peach-rgb);
  }

.admin-dashboard-stat-label {
    color: var(--admin-stat-muted);
    font-size: 0.76rem;
    font-weight: 800;
  }

.admin-dashboard-stat-value {
    margin-top: 0.35rem;
    color: var(--admin-stat-ink);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.3;
  }

.admin-dashboard-stat-note {
    margin-top: 0.35rem;
    color: var(--admin-stat-muted);
    font-size: 0.72rem;
    line-height: 1.8;
  }


  .profile-page-flow > .admin-dashboard-alert,
  .profile-page-flow > .grid .admin-dashboard-alert {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-alert.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-alert {
  border-radius: var(--radius-site);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
    border: 1px solid transparent;
    box-shadow: none;
}


  .profile-page-flow > .admin-dashboard-tabs,
  .profile-page-flow > .grid .admin-dashboard-tabs {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.storefront-journal-sidebar-block a.admin-dashboard-tabs {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.admin-dashboard-tabs:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.admin-dashboard-tabs img {
    border-radius: var(--radius-site);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-tabs.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-radius: var(--radius-site);
  padding: 0.75rem;
    border: 1px solid var(--dash-line);
    background: var(--admin-surface-2);
    box-shadow: none;
}


  .profile-page-flow > .admin-dashboard-tab,
  .profile-page-flow > .grid .admin-dashboard-tab {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-tab.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-site);
  border-width: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.82rem;
  font-weight: 800;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    background: transparent;
    color: var(--dash-muted);
}

.admin-dashboard-tab:hover {
    color: var(--dash-ink);
    background: var(--color-hover-primary-soft);
  }

.admin-dashboard-tab.is-active {
    color: var(--admin-text);
    background: var(--admin-rainbow-bg);
    box-shadow: var(--admin-rainbow-shadow);
  }


  .profile-page-flow > .admin-dashboard-list .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .admin-dashboard-list {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.admin-dashboard-list {
  display: grid;
  gap: 0.75rem;
}


  .profile-page-flow > .admin-dashboard-list-item,
  .profile-page-flow > .grid .admin-dashboard-list-item {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.storefront-journal-sidebar-block a.admin-dashboard-list-item {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.admin-dashboard-list-item:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.admin-dashboard-list-item img {
    border-radius: var(--radius-site);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-list-item.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--radius-site);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    border: 1px solid var(--dash-line);
    background: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
}

.admin-dashboard-list-item:hover {
    background: var(--color-surface-primary);
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    transform: translateY(-1px);
  }

.admin-dashboard-list-title {
    color: var(--dash-ink);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.8;
  }

.admin-dashboard-list-meta {
    color: var(--dash-muted);
    font-size: 0.74rem;
    line-height: 1.8;
  }


  .profile-page-flow > .admin-dashboard-badge,
  .profile-page-flow > .grid .admin-dashboard-badge {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.admin-dashboard-badge.border) {
    border-color: var(--admin-border);
  }

.admin-dashboard-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-site);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-dashboard-badge.ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
  }

.admin-dashboard-badge.\!ok {
    background: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
  }

.admin-dashboard-badge.warn {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }

.admin-dashboard-badge.info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
  }

.admin-form-actions {
    z-index: 20;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

.admin-form-actions :is(button, a) {
    min-height: 2.75rem;
  }

@media (max-width: 640px) {
    .admin-form-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .admin-form-actions :is(button, a) {
      width: 100%;
    }
  }

.admin-dashboard-chart-wrap {
    height: 290px;
  }

.admin-dashboard-chart-panel {
    min-height: 100%;
  }

.legal-quill .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid rgb(229 231 235);
    direction: ltr;
  }

.legal-quill .ql-container.ql-snow {
    border: 0;
    font-family: Vazirmatn, sans-serif;
  }

.legal-quill .ql-editor {
    min-height: 320px;
    direction: rtl;
    text-align: right;
  }

.legal-quill .ql-editor.ql-blank::before {
    left: auto;
    right: 16px;
    text-align: right;
  }

.admin-feature-value {
  padding: 1rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
}


  .profile-page-flow > .admin-feature-value__grid .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .admin-feature-value__grid {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.admin-feature-value__grid {
  margin-bottom: 0.75rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {

  .admin-feature-value__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-feature-value__input {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-site);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
}

.admin-feature-value__input:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
    outline: none;
  }

.admin-feature-value__input--order {
    width: 7rem;
  }

.admin-feature-value__remove {
    color: var(--color-error-text);
    font-size: 0.875rem;
    font-weight: 700;
  }

.admin-feature-value__remove:hover {
    color: var(--admin-danger);
  }

.admin-text-strong {
    color: var(--color-text-primary);
  }

.admin-text-heading {
    color: var(--color-text-heading);
  }

.admin-text-muted {
    color: var(--color-text-muted);
  }

.admin-text-disabled {
    color: var(--color-text-disabled);
  }

.admin-status-note {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
  }

.admin-status-note--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }

.admin-status-note--danger {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--color-error-text);
  }

.admin-status-note--success {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
  }

.admin-action-icon {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: var(--radius-site);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-primary);
    padding: 0;
    color: var(--color-text-muted);
  }

.admin-action-icon:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
  }

.admin-action-icon--primary {
    color: var(--color-cta-secondary-text);
  }

.admin-action-icon--primary:hover {
    border-color: var(--color-cta-secondary-border);
    background: var(--admin-rainbow-soft);
    color: var(--color-text-heading);
  }

.admin-action-icon--success {
    border-color: var(--color-success-border);
    color: var(--color-success-text);
  }

.admin-action-icon--success:hover {
    background: var(--color-success-bg);
  }

.admin-action-icon--danger {
    border-color: var(--color-error-border);
    color: var(--color-error-text);
  }

.admin-action-icon--danger:hover {
    background: var(--color-error-bg);
  }

.legal-tab.is-active {
    border-color: var(--admin-rainbow-border);
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

@media (max-width: 1024px) {
    .admin-dashboard-tabs {
      border-radius: var(--radius-site);
    }
  }

.reports-shell {
    --r-ink: var(--admin-text);
    --r-muted: var(--admin-muted);
    --r-line: rgba(148, 163, 184, 0.18);
    --r-card: var(--admin-surface);
    --r-brand: var(--admin-primary);
    --r-brand2: var(--admin-primary-strong);
    --r-accent: var(--admin-warning);
    --r-danger: var(--admin-danger);
    max-width: 1800px;
  }


  .profile-page-flow > .reports-hero,
  .profile-page-flow > .grid .reports-hero {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-hero.border) {
    border-color: var(--admin-border);
  }

.reports-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-site);
    border: 1px solid rgba(0, 73, 83, 0.14);
    background: linear-gradient(135deg, rgba(0, 73, 83, 0.12), rgba(15, 118, 110, 0.08) 55%, rgba(255, 255, 255, 0.95));
    box-shadow: 0 28px 60px rgba(21, 49, 59, 0.08);
}

.reports-hero::before {
    content: "";
    position: absolute;
    top: -90px;
    left: -70px;
    width: 240px;
    height: 240px;
    border-radius: var(--radius-site);
    background: radial-gradient(circle, rgba(0, 73, 83, 0.16), transparent 72%);
  }

.reports-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -100px;
    width: 280px;
    height: 280px;
    border-radius: var(--radius-site);
    background: radial-gradient(circle, rgba(15, 118, 110, 0.14), transparent 70%);
  }


  .profile-page-flow > .reports-surface,
  .profile-page-flow > .grid .reports-surface {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-surface.border) {
    border-color: var(--admin-border);
  }

.reports-surface {
  border-radius: var(--radius-site);
    border: 1px solid var(--r-line);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 18px 40px rgba(21, 49, 59, 0.06);
}


  .profile-page-flow > .reports-card,
  .profile-page-flow > .grid .reports-card {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-card.border) {
    border-color: var(--admin-border);
  }

.reports-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-site);
    border: 1px solid var(--r-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 248, 0.92));
    box-shadow: 0 14px 30px rgba(21, 49, 59, 0.05);
}

.reports-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(0, 73, 83, 0.95), rgba(15, 118, 110, 0.85));
  }


  .profile-page-flow > .reports-chip,
  .profile-page-flow > .grid .reports-chip {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-chip.border) {
    border-color: var(--admin-border);
  }

.reports-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-site);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
    border: 1px solid rgba(0, 73, 83, 0.15);
    background: rgba(255, 255, 255, 0.82);
    color: var(--r-ink);
}

.reports-chip.warn {
    border-color: rgba(194, 65, 12, 0.18);
    color: var(--r-danger);
    background: rgba(255, 247, 237, 0.92);
  }

.reports-chip.soft {
    border-color: rgba(100, 116, 123, 0.14);
    color: var(--r-muted);
  }

.storefront-journal-sidebar-block a.reports-tabs {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.reports-tabs:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.reports-tabs img {
    border-radius: var(--radius-site);
  }

.reports-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


  .profile-page-flow > .reports-tab,
  .profile-page-flow > .grid .reports-tab {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-tab.border) {
    border-color: var(--admin-border);
  }

.reports-tab {
  border-radius: var(--radius-site);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 800;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    border: 1px solid rgba(21, 49, 59, 0.1);
    background: rgba(255, 255, 255, 0.86);
    color: var(--r-muted);
}

.site-body.is-admin .reports-tab {
    border-color: var(--admin-border);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 70%),
      var(--admin-surface-2);
    color: var(--admin-muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

.reports-tab:hover {
    border-color: rgba(0, 73, 83, 0.28);
    color: var(--r-ink);
    transform: translateY(-1px);
  }

.site-body.is-admin .reports-tab:hover {
    border-color: var(--color-border-primary-soft);
    background:
      radial-gradient(circle at 12% 0%, rgba(79, 172, 254, 0.18), transparent 42%),
      var(--admin-surface-raised);
    color: var(--admin-text);
  }

.reports-tab.is-active {
    background: linear-gradient(90deg, rgba(0, 73, 83, 0.95), rgba(15, 118, 110, 0.92));
    border-color: transparent;
    color: var(--color-text-inverse);
    box-shadow: 0 14px 30px rgba(0, 73, 83, 0.2);
  }

.site-body.is-admin .reports-tab.is-active {
    border-color: rgba(79, 172, 254, 0.5);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 38%),
      radial-gradient(circle at 12% 0%, rgba(79, 172, 254, 0.5), transparent 42%),
      linear-gradient(135deg, color-mix(in srgb, var(--admin-bg) 42%, rgb(79, 172, 254) 58%), color-mix(in srgb, var(--admin-bg) 70%, rgb(43, 214, 190) 30%));
    color: var(--admin-text);
    box-shadow:
      0 18px 44px -34px rgba(79, 172, 254, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }


  .profile-page-flow > .reports-note,
  .profile-page-flow > .grid .reports-note {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-note.border) {
    border-color: var(--admin-border);
  }

.reports-note {
  border-radius: var(--radius-site);
    border: 1px dashed rgba(0, 73, 83, 0.18);
    background: rgba(250, 255, 253, 0.92);
}


  .profile-page-flow > .reports-empty,
  .profile-page-flow > .grid .reports-empty {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-empty.border) {
    border-color: var(--admin-border);
  }

.reports-empty {
  border-radius: var(--radius-site);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.88rem;
    border: 1px dashed rgba(21, 49, 59, 0.16);
    background: rgba(248, 250, 249, 0.86);
    color: var(--r-muted);
}


  .profile-page-flow > .reports-delta,
  .profile-page-flow > .grid .reports-delta {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.reports-delta.border) {
    border-color: var(--admin-border);
  }

.reports-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-site);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.reports-delta.pos {
    color: var(--color-success-text);
    background: rgba(220, 252, 231, 0.9);
  }

.reports-delta.neg {
    color: var(--color-error-text);
    background: rgba(254, 226, 226, 0.92);
  }

.reports-delta.neu {
    color: var(--color-text-muted);
    background: rgba(241, 245, 249, 0.92);
  }

.site-body.is-admin .reports-delta.neu {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-2);
    color: var(--admin-muted);
  }

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }

.reports-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

.reports-link {
    color: var(--color-cta-link);
    text-decoration: none;
  }

.reports-link:hover {
    color: var(--color-cta-link-hover);
    text-decoration: underline;
  }

.reports-bullets {
    margin: 0;
    padding-right: 1.15rem;
  }

.reports-bullets li {
    margin: 0.35rem 0;
    line-height: 1.9;
    color: var(--r-ink);
  }

.reports-chart-box {
    height: 320px;
  }

.reports-chart-box--sm {
    height: 280px;
  }

.reports-mini-progress {
    display: block;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-site);
    background: rgba(21, 49, 59, 0.08);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

.reports-mini-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: rgba(21, 49, 59, 0.08);
  }

.reports-mini-progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0, 73, 83, 0.95), rgba(15, 118, 110, 0.82));
  }

.reports-mini-progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0, 73, 83, 0.95), rgba(15, 118, 110, 0.82));
  }

.reports-eyebrow {
    letter-spacing: 0.28em;
  }

.reports-eyebrow-tight {
    letter-spacing: 0.24em;
  }

.reports-products-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

.reports-daily-scroll {
    max-height: 28rem;
    overflow: auto;
  }

@media (min-width: 1280px) {
    .reports-split {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .reports-products-split {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
  }

@media (min-width: 640px) {
    .reports-kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (min-width: 1280px) {
    .reports-kpi-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

@media (max-width: 640px) {
    .reports-tabs {
      overflow: auto;
      flex-wrap: nowrap;
      padding-bottom: 0.25rem;
    }

    .reports-tab {
      white-space: nowrap;
    }
  }

.deo-shell {
    --deo-ink: var(--admin-text);
    --deo-muted: var(--admin-muted);
    --deo-line: color-mix(in srgb, var(--admin-faint) 18%, transparent);
    --deo-soft: var(--admin-bg-soft);
    --deo-card: var(--admin-surface);
    --deo-brand: var(--admin-primary);
    --deo-brand-2: var(--admin-primary-strong);
    --deo-warn: var(--admin-warning);
    --deo-danger: var(--admin-danger);
    max-width: 1800px;
  }


  .profile-page-flow > .deo-hero,
  .profile-page-flow > .grid .deo-hero {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-hero.border) {
    border-color: var(--admin-border);
  }

.deo-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-site);
    border: 1px solid var(--admin-rainbow-border);
    background: var(--admin-rainbow-soft);
    box-shadow: 0 28px 60px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.deo-hero::before {
    content: "";
    position: absolute;
    inset: auto -60px -120px auto;
    width: 280px;
    height: 280px;
    border-radius: var(--radius-site);
    background: radial-gradient(circle, rgba(255, 123, 172, 0.14), transparent 68%);
    pointer-events: none;
  }

.deo-hero::after {
    content: "";
    position: absolute;
    inset: -100px auto auto -80px;
    width: 240px;
    height: 240px;
    border-radius: var(--radius-site);
    background: radial-gradient(circle, rgba(79, 172, 254, 0.18), transparent 72%);
    pointer-events: none;
  }


  .profile-page-flow > .deo-surface,
  .profile-page-flow > .grid .deo-surface {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-surface.border) {
    border-color: var(--admin-border);
  }

.deo-surface {
  border-radius: var(--radius-site);
    border: 1px solid var(--deo-line);
    background: color-mix(in srgb, var(--color-surface-primary) 92%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}


  .profile-page-flow > .deo-card,
  .profile-page-flow > .grid .deo-card {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-card.border) {
    border-color: var(--admin-border);
  }

.deo-card {
  border-radius: var(--radius-site);
    border: 1px solid var(--deo-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-primary) 98%, transparent), color-mix(in srgb, var(--color-surface-secondary) 92%, transparent));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
}

.deo-kpi {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.deo-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--admin-rainbow-line);
  }


  .profile-page-flow > .deo-chip,
  .profile-page-flow > .grid .deo-chip {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-chip.border) {
    border-color: var(--admin-border);
  }

.deo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-site);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 78%, transparent);
    color: var(--deo-ink);
}

.deo-chip.warn {
    border-color: var(--admin-warning-border);
    color: var(--deo-warn);
    background: var(--admin-warning-surface);
  }

.deo-chip.danger {
    border-color: var(--admin-danger-border);
    color: var(--deo-danger);
    background: var(--admin-danger-surface);
  }

.deo-chip.soft {
    border-color: color-mix(in srgb, var(--admin-faint) 14%, transparent);
    color: var(--deo-muted);
  }

.storefront-journal-sidebar-block a.deo-tabbar {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.deo-tabbar:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.deo-tabbar img {
    border-radius: var(--radius-site);
  }

.deo-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


  .profile-page-flow > .deo-tab,
  .profile-page-flow > .grid .deo-tab {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-tab.border) {
    border-color: var(--admin-border);
  }

.deo-tab {
  border-radius: var(--radius-site);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 800;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 85%, transparent);
    color: var(--deo-muted);
}

.deo-tab:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 28%, transparent);
    color: var(--deo-ink);
    transform: translateY(-1px);
  }

.deo-tab.is-active {
    background: var(--admin-rainbow-bg);
    border-color: var(--admin-rainbow-border);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

.deo-link {
    color: var(--color-cta-link);
    text-decoration: none;
  }

.deo-link:hover {
    text-decoration: underline;
    color: var(--color-cta-link-hover);
  }


  .profile-page-flow > .deo-note,
  .profile-page-flow > .grid .deo-note {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-note.border) {
    border-color: var(--admin-border);
  }

.deo-note {
  border-radius: var(--radius-site);
    border: 1px dashed color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 90%, transparent);
}


  .profile-page-flow > .deo-empty,
  .profile-page-flow > .grid .deo-empty {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-empty.border) {
    border-color: var(--admin-border);
  }

.deo-empty {
  border-radius: var(--radius-site);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.88rem;
    border: 1px dashed color-mix(in srgb, var(--color-text-primary) 16%, transparent);
    background: color-mix(in srgb, var(--color-surface-secondary) 85%, transparent);
    color: var(--deo-muted);
}

.storefront-journal-sidebar-block a.deo-legend {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.deo-legend:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.deo-legend img {
    border-radius: var(--radius-site);
  }

.deo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
    color: var(--deo-muted);
}

.deo-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-site);
    margin-left: 0.45rem;
  }

.deo-legend-sessions {
    background: var(--deo-brand);
  }

.deo-legend-pageviews {
    background: var(--admin-info);
  }

.deo-legend-searches {
    background: var(--admin-warning);
  }

.deo-mini-progress {
    display: block;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

.deo-track-progress {
    height: 12px;
  }

.deo-mini-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  }

.deo-mini-progress::-webkit-progress-value {
    border-radius: inherit;
    background: var(--admin-rainbow-line);
  }

.deo-mini-progress::-moz-progress-bar {
    border-radius: inherit;
    background: var(--admin-rainbow-line);
  }

.deo-eyebrow {
    letter-spacing: 0.28em;
  }

.deo-eyebrow-tight {
    letter-spacing: 0.22em;
  }

.deo-period-select {
    min-width: 180px;
  }

.deo-xs-mono {
    font-size: 12px;
  }

@media (max-width: 640px) {
    .deo-tabbar {
      overflow: auto;
      flex-wrap: nowrap;
      padding-bottom: 0.25rem;
    }

    .deo-tab {
      white-space: nowrap;
    }

    .deo-period-select {
      min-width: 0;
      width: 100%;
    }
  }

.deo-svg-grid line {
    stroke: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    stroke-dasharray: 4 6;
  }

.deo-chart-tip {
    position: absolute;
    inset: auto auto 12px 12px;
    max-width: 320px;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-site);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 14%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 95%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    color: var(--deo-ink);
    font-size: 0.78rem;
    line-height: 1.7;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }

.deo-chart-tip.is-on {
    opacity: 1;
    transform: translateY(0);
  }

.deo-chart-tip .mono {
    font-size: 12px;
  }

.deo-chart-tip .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

.deo-chart-tip .\!row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

.deo-chart-tip .k {
    color: var(--deo-muted);
  }

.deo-chart-tip .\!k {
    color: var(--deo-muted) !important;
  }

.deo-chart-tip .v {
    font-weight: 800;
  }

.deo-chart-axis {
    font-size: 11px;
    fill: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
  }

.deo-chart-axis strong {
    font-weight: 800;
  }

.deo-layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

.deo-chart-svg {
    width: 100%;
    min-width: 680px;
    height: 260px;
  }

.deo-funnel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }


  .profile-page-flow > .deo-funnel-step,
  .profile-page-flow > .grid .deo-funnel-step {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.deo-funnel-step.border) {
    border-color: var(--admin-border);
  }

.deo-funnel-step {
  position: relative;
  border-radius: var(--radius-site);
  padding: 1rem;
    border: 1px solid var(--deo-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-primary) 98%, transparent), color-mix(in srgb, var(--color-surface-secondary) 94%, transparent));
}

.deo-funnel-step::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-site);
    background: var(--admin-rainbow-line);
  }

.deo-bullets {
    margin: 0;
    padding-right: 1.1rem;
  }

.deo-bullets li {
    margin: 0.35rem 0;
    color: var(--deo-ink);
    line-height: 1.9;
  }

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

@media (min-width: 1536px) {
    .deo-layout-split {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
  }

@media (max-width: 1024px) {
    .deo-funnel {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (max-width: 640px) {
    .deo-funnel {
      grid-template-columns: 1fr;
    }

    .deo-chart-tip {
      max-width: calc(100% - 24px);
    }

    .deo-chart-svg {
      min-width: 560px;
    }
  }

.product-editor-shell {
    --pe-ink: var(--admin-text);
    --pe-muted: var(--admin-muted);
    --pe-line: color-mix(in srgb, var(--admin-faint) 18%, transparent);
    --pe-brand: var(--admin-primary);
    --pe-brand-2: var(--admin-primary-strong);
    --pe-warn: var(--admin-warning);
    max-width: 1820px;
  }

.product-editor-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pe-line);
    border-radius: var(--radius-site);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-primary) 98%, transparent), color-mix(in srgb, var(--color-surface-secondary) 94%, transparent));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  }

.product-editor-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--admin-rainbow-line);
  }

.product-editor-stats {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }

.product-editor-stat {
    border: 1px solid var(--pe-line);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 95%, transparent);
    padding: 1rem 1.1rem;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-text-primary) 4%, transparent);
  }

.product-editor-stat-label {
    color: var(--pe-muted);
    font-size: 0.75rem;
    font-weight: 800;
  }

.product-editor-stat-value {
    color: var(--pe-ink);
    font-size: 1.3rem;
    font-weight: 900;
    margin-top: 0.35rem;
  }

.product-editor-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
    z-index: 35;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    padding: 0.65rem;
    overflow: auto;
  }

.product-editor-nav-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
  }

.product-editor-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-site);
    padding: 0.7rem 1rem;
    color: var(--pe-muted);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.2s ease;
  }

.product-editor-nav-link:hover {
    background: var(--color-hover-primary-soft);
    color: var(--pe-ink);
  }

.product-editor-nav-link.is-active {
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

.product-editor-grid {
    align-items: start;
  }

.product-editor-ltr {
    direction: ltr;
    text-align: left;
  }

.product-editor-main,
  .product-editor-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

.product-editor-side {
    position: -webkit-sticky;
    position: sticky;
    top: 6.5rem;
  }

.product-editor-title-card .pt-inner {
    padding: 1.5rem;
  }

.pt-sticky-shell {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 60;
    margin-top: 1rem;
  }

.pt-sticky-fields {
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 96%, transparent);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    padding: 1rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

.pt-sticky-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

.product-editor-title-card.is-stuck .pt-sticky-fields {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 22%, transparent);
    background: color-mix(in srgb, var(--color-surface-primary) 98%, transparent);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--color-cta-primary-bg) 14%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

.product-editor-title-card.is-stuck .pt-sticky-shell {
    margin-top: 0;
  }

@media (min-width: 640px) {
    .product-editor-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (min-width: 1280px) {
    .product-editor-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

@media (max-width: 1024px) {
    .product-editor-side {
      position: static;
      top: auto;
    }
  }

.blog-quill .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid rgb(229 231 235);
    direction: ltr;
  }

.blog-quill .ql-container.ql-snow {
    border: 0;
    font-family: Vazirmatn, sans-serif;
  }

.blog-quill .ql-editor {
    min-height: 260px;
    direction: rtl;
    text-align: right;
  }

.blog-quill .ql-editor.ql-blank::before {
    left: auto;
    right: 16px;
    text-align: right;
  }

.blog-block-card {
    border: 1px solid rgb(229 231 235);
    border-radius: var(--radius-site);
    background: var(--color-surface-primary);
    overflow: hidden;
  }

.blog-block-card.is-dragging {
    opacity: 0.7;
  }

.blog-block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, var(--color-surface-secondary), var(--color-surface-primary));
    border-bottom: 1px solid rgb(229 231 235);
  }

.blog-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.blog-block-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--radius-site);
    border: 1px solid rgb(229 231 235);
    background: var(--color-surface-primary);
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
  }

.blog-block-field {
    width: 100%;
    border: 1px solid rgb(229 231 235);
    border-radius: var(--radius-site);
    background: var(--color-surface-primary);
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.8;
  }

.blog-block-field:focus {
    outline: none;
    border-color: rgb(0 73 83);
    box-shadow: 0 0 0 4px rgba(0, 73, 83, 0.12);
  }

.blog-block-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

.blog-block-uploader {
    border: 1px dashed rgb(203 213 225);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    padding: 1rem;
  }

.blog-block-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

.blog-block-preview img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--radius-site);
    border: 1px solid rgb(229 231 235);
    background: var(--color-surface-primary);
  }

.blog-block-addbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

.blog-block-addbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-site);
    border: 1px solid rgb(226 232 240);
    background: var(--color-surface-primary);
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-text-primary);
    transition: 0.16s ease;
  }

.blog-block-addbtn:hover {
    background: var(--color-hover-warm);
    border-color: rgb(148 163 184);
  }

.blog-block-mode.is-active {
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    border-color: var(--admin-rainbow-border);
    box-shadow: var(--admin-rainbow-shadow);
  }

.blog-block-empty {
    border: 1px dashed rgb(203 213 225);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    padding: 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

.blog-block-table-help {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    line-height: 1.8;
  }

.blog-block-rich .ql-editor {
    min-height: 180px;
  }

.blog-block-rich {
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-site);
    background: var(--color-surface-primary);
  }

.blog-block-empty-preview {
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    padding: 1.5rem;
    text-align: center;
  }

.blog-block-gallery-path {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    word-break: break-all;
  }

@media (min-width: 768px) {
    .blog-block-gallery-grid,
    .blog-block-preview {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

/* Accessibility */

.site-body.is-admin {
    color-scheme: dark;
  }

.site-body.is-admin :focus-visible {
    outline: 2px solid var(--admin-primary-strong);
    outline-offset: 2px;
  }

.site-body.is-admin :is(input[type="checkbox"], input[type="radio"]) {
    -moz-appearance: auto !important;
         appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--admin-primary-strong);
    background-image: initial !important;
    box-shadow: none !important;
    color-scheme: dark;
  }

.site-body.is-admin :is(.page-shell, .site-content) {
    background: transparent !important;
  }

.site-body.is-admin :is(.page-wrap, .admin-dashboard-shell, .admin-orders-shell, .admin-marketing-shell) {
    background: transparent !important;
  }

.site-body.is-admin .text-muted {
    color: var(--admin-muted) !important;
  }

.site-body.is-admin :is(
    input,
    textarea,
    select,
    .form-input,
    .form-select,
    .form-textarea,
    .blog-block-field
  ) {
    background-color: var(--admin-surface) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin :is(input, textarea)::-webkit-input-placeholder {
    color: var(--admin-faint) !important;
  }

.site-body.is-admin :is(input, textarea)::placeholder {
    color: var(--admin-faint) !important;
  }

.site-body.is-admin option {
    background: var(--admin-bg);
    color: var(--admin-text);
  }

.site-body.is-admin .admin-layout-shell {
    --admin-content-gap: 1.25rem;
    --admin-content-max: 80rem;
    display: grid;
    min-height: 100vh;
    overflow-x: hidden;
    gap: 1.25rem;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0.75rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--admin-bg) !important;
    color: var(--admin-text) !important;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-layout-shell {
      --admin-content-gap: 1.5rem;
      padding: 1.25rem;
    }
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-layout-shell {
      grid-template-columns: 17rem minmax(0, 1fr);
      align-items: start;
      gap: 1.25rem;
      padding-inline: 1.5rem;
    }
  }

@media (min-width: 1280px) {
    .site-body.is-admin .admin-layout-shell {
      grid-template-columns: 18rem minmax(0, 1fr);
      gap: 1.5rem;
      padding-inline: 2rem;
    }
  }

.site-body.is-admin .admin-layout-main {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
  }

.site-body.is-admin .admin-layout-content {
    width: min(100%, var(--admin-content-max));
    margin-inline: auto;
    min-width: 0;
    padding-bottom: 2rem;
  }

.site-body.is-admin .admin-layout-content > * {
    min-width: 0;
  }

.site-body.is-admin .admin-layout-content > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
    margin-bottom: 0;
  }

.site-body.is-admin .admin-page-stack {
    width: 100%;
    --admin-content-max: 80rem;
    max-width: var(--admin-content-max);
    margin-inline: auto;
  }

.site-body.is-admin .admin-dashboard-shell,
  .site-body.is-admin .admin-orders-shell,
  .site-body.is-admin .admin-order-detail,
  .site-body.is-admin .admin-crm-shell,
  .site-body.is-admin .admin-supplier-shell,
  .site-body.is-admin .admin-look-editor {
    --admin-content-max: 80rem;
  }

.site-body.is-admin :is(.reports-shell, .deo-shell) {
    --admin-content-max: 112.5rem;
  }

.site-body.is-admin .product-editor-shell {
    --admin-content-max: 113.75rem;
  }

.site-body.is-admin .admin-system-shell--wide {
    --admin-content-max: 80rem;
    max-width: var(--admin-content-max);
  }

.site-body.is-admin .admin-system-shell--narrow,
  .site-body.is-admin .admin-marketing-shell {
    --admin-content-max: 64rem;
    max-width: var(--admin-content-max);
  }

.site-body.is-admin .admin-settings-shell,
  .site-body.is-admin .admin-uploads-shell {
    --admin-content-max: 48rem;
    max-width: var(--admin-content-max);
  }

.site-body.is-admin .admin-settings-shell--narrow {
    --admin-content-max: 42rem;
    max-width: var(--admin-content-max);
  }

.site-body.is-admin .admin-settings-shell--wide,
  .site-body.is-admin .admin-compliance-shell,
  .site-body.is-admin .admin-database-shell {
    --admin-content-max: 80rem;
    max-width: var(--admin-content-max);
  }

.site-body.is-admin .admin-layout-main,
  .site-body.is-admin .admin-layout-content {
    display: grid;
    align-content: start;
    gap: var(--admin-content-gap);
  }

.site-body.is-admin .admin-page-header {
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
  }

.site-body.is-admin .admin-page-header__actions {
    align-items: stretch;
  }

.site-body.is-admin .admin-page-header__action {
    min-height: 2.5rem;
  }

.site-body.is-admin .admin-subheader {
    position: -webkit-sticky;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 30;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
    box-shadow: var(--admin-shadow-soft) !important;
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    --tw-ring-color: transparent !important;
  }

.site-body.is-admin .admin-subheader-inner {
    padding: 0.75rem;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-subheader-inner {
      padding-inline: 1rem;
    }
  }

.site-body.is-admin .admin-subheader-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-subheader-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

.site-body.is-admin .admin-subheader-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
  }

.site-body.is-admin .admin-subheader-copy {
    min-width: 0;
  }

.site-body.is-admin .admin-subheader-home-link,
  .site-body.is-admin .admin-topbar-action,
  .site-body.is-admin .admin-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-site);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

.site-body.is-admin .admin-subheader-home-link:focus-visible,
  .site-body.is-admin .admin-topbar-action:focus-visible,
  .site-body.is-admin .admin-topbar-logout:focus-visible {
    outline: 2px solid var(--color-focus-soft);
    outline-offset: 2px;
  }

.site-body.is-admin .admin-subheader-home-link {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--admin-rainbow-border);
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

.site-body.is-admin .admin-subheader-home-link:hover {
    background: var(--admin-rainbow-bg-hover);
    transform: translateY(-1px);
  }

.site-body.is-admin .admin-subheader-home-icon,
  .site-body.is-admin .admin-topbar-logout-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

.site-body.is-admin .admin-subheader-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

.site-body.is-admin .admin-topbar-action {
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-topbar-action {
      padding-inline: 1rem;
      font-size: 0.875rem;
    }
  }

.site-body.is-admin .admin-topbar-action--primary {
    border: 1px solid var(--admin-rainbow-border);
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

.site-body.is-admin .admin-topbar-action--primary:hover {
    border-color: rgba(255, 123, 172, 0.58);
    background: var(--admin-rainbow-bg-hover);
    transform: translateY(-1px);
  }

.site-body.is-admin .admin-topbar-action--secondary {
    border: 1px solid var(--admin-border);
    background:
      radial-gradient(circle at 12% 0%, rgba(166, 127, 255, 0.12), transparent 46%),
      var(--admin-surface-2);
    color: var(--admin-muted);
  }

.site-body.is-admin .admin-topbar-action--secondary:hover {
    border-color: rgba(166, 127, 255, 0.42);
    background:
      radial-gradient(circle at 12% 0%, rgba(166, 127, 255, 0.22), transparent 46%),
      var(--admin-surface-raised);
    color: var(--admin-text);
    transform: translateY(-1px);
  }

.site-body.is-admin .admin-topbar-action-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }

.site-body.is-admin .admin-topbar-divider {
    display: none;
    width: 1px;
    height: 1.5rem;
    margin-inline: 0.25rem;
    background: var(--color-border-strong);
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-topbar-divider {
      display: inline-block;
    }
  }

.site-body.is-admin .admin-topbar-action-secondary,
  .site-body.is-admin .admin-topbar-action--secondary,
  .site-body.is-admin .admin-topbar-logout,
  .site-body.is-admin .admin-topbar-meta-badge,
  .site-body.is-admin .admin-meta-badge {
    background: var(--admin-surface-2) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin .admin-topbar-meta-badge,
  .site-body.is-admin .admin-meta-badge {
    border: 1px solid var(--admin-border);
  }

.site-body.is-admin .admin-topbar-logout {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--admin-border);
  }

.site-body.is-admin .admin-topbar-logout:focus-visible {
    outline-color: var(--color-error-text);
  }

.site-body.is-admin .admin-subheader-title {
    overflow: hidden;
    color: var(--color-text-heading);
    font-size: 0.875rem;
    font-weight: 900;
    line-height: 1.7;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.site-body.is-admin .admin-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    line-height: 1.7;
  }

.site-body.is-admin .admin-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

.site-body.is-admin .admin-meta-label,
  .site-body.is-admin .admin-meta-value {
    margin: 0;
  }

.site-body.is-admin .admin-meta-label {
    color: var(--color-text-subtle);
    font-weight: 650;
  }

.site-body.is-admin .admin-meta-separator {
    width: 1px;
    height: 0.85rem;
    margin-inline: 0.15rem;
    background: var(--color-border-default);
  }

.site-body.is-admin .admin-meta-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    border-radius: var(--radius-site);
    padding: 0.1rem 0.5rem;
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1.4;
  }

.site-body.is-admin .admin-meta-value--mono .admin-meta-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }

.site-body.is-admin .admin-meta-badge--role {
    background: var(--color-hover-primary-soft) !important;
    border-color: var(--color-border-primary-soft) !important;
    color: var(--color-text-heading) !important;
  }

.site-body.is-admin .admin-meta-badge--version {
    background: var(--color-info-bg) !important;
    border-color: var(--color-info-border) !important;
    color: var(--color-info-text) !important;
  }

.site-body.is-admin .admin-sidebar {
    display: block;
    width: 100%;
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 1.25rem;
      max-height: calc(100vh - 2.5rem);
      align-self: start;
    }
  }

.site-body.is-admin .admin-sidebar-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 253, 248, 0.12);
    border-radius: var(--radius-site);
    background: var(--admin-sidebar-bg) !important;
    color: var(--admin-sidebar-text) !important;
    box-shadow: var(--admin-shadow-float) !important;
    --tw-ring-color: transparent !important;
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-sidebar-panel {
      max-height: calc(100vh - 2.5rem);
    }
  }

.site-body.is-admin .admin-sidebar-section {
    border-bottom: 1px solid rgba(255, 253, 248, 0.1);
  }

.site-body.is-admin .admin-sidebar-section--brand {
    padding: 1rem;
  }

.site-body.is-admin .admin-sidebar-section--quick {
    padding: 0.75rem;
  }

.site-body.is-admin .admin-sidebar-brand,
  .site-body.is-admin .admin-sidebar-quick-link,
  .site-body.is-admin .admin-sidebar-link,
  .site-body.is-admin .admin-sidebar-group-summary {
    border-radius: var(--radius-site);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

.site-body.is-admin .admin-sidebar-brand:focus-visible,
  .site-body.is-admin .admin-sidebar-quick-link:focus-visible,
  .site-body.is-admin .admin-sidebar-link:focus-visible,
  .site-body.is-admin .admin-sidebar-group-summary:focus-visible {
    outline: 2px solid var(--color-focus-soft);
    outline-offset: 2px;
  }

.site-body.is-admin .admin-sidebar-brand:hover,
  .site-body.is-admin .admin-sidebar-quick-link:hover {
    background: var(--admin-sidebar-hover) !important;
    color: var(--admin-sidebar-text) !important;
  }

.site-body.is-admin .admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
    text-decoration: none;
    color: var(--admin-sidebar-text) !important;
  }

.site-body.is-admin .admin-sidebar-brand-mark {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-site);
    border: 1px solid var(--admin-rainbow-border);
    background: var(--admin-rainbow-bg) !important;
    color: var(--admin-text) !important;
    box-shadow: var(--admin-rainbow-shadow);
    font-size: 0.875rem;
    font-weight: 900;
  }

.site-body.is-admin .admin-sidebar-brand-body {
    min-width: 0;
  }

.site-body.is-admin .admin-sidebar-brand-title,
  .site-body.is-admin .admin-sidebar-brand-role,
  .site-body.is-admin .admin-sidebar-link-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.site-body.is-admin .admin-sidebar-brand-title {
    color: var(--admin-sidebar-text);
    font-size: 0.875rem;
    font-weight: 900;
    line-height: 1.6;
  }

.site-body.is-admin .admin-sidebar-brand-role {
    margin-top: 0.125rem;
    color: var(--admin-sidebar-faint);
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.5;
  }

.site-body.is-admin .admin-sidebar-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

.site-body.is-admin .admin-sidebar-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 253, 248, 0.14);
    padding: 0.5rem 0.75rem;
    background: var(--admin-sidebar-surface) !important;
    color: var(--admin-sidebar-text) !important;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
  }

.site-body.is-admin .admin-sidebar-quick-link-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }

.site-body.is-admin .admin-sidebar-group-summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
            -moz-user-select: none;
         user-select: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--admin-sidebar-muted) !important;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-transform: uppercase;
  }

.site-body.is-admin .admin-sidebar-group-summary::-webkit-details-marker {
    display: none;
  }

.site-body.is-admin .admin-sidebar-group-summary:hover {
    background: var(--admin-sidebar-hover) !important;
    color: var(--admin-sidebar-text) !important;
  }

.site-body.is-admin .admin-sidebar-group-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.site-body.is-admin .admin-sidebar-group-chevron {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--admin-sidebar-faint);
    transition: transform 160ms ease, color 160ms ease;
  }

.site-body.is-admin .admin-sidebar-group[open] .admin-sidebar-group-chevron {
    transform: rotate(90deg);
  }

.site-body.is-admin .admin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem;
  }

@media (max-width: 1023px) {
    .site-body.is-admin .admin-sidebar-nav {
      max-height: min(52vh, 28rem);
    }
  }

.site-body.is-admin .admin-sidebar-menu,
  .site-body.is-admin .admin-sidebar-primary-list {
    display: grid;
    gap: 0.375rem;
  }

.site-body.is-admin .admin-sidebar-group {
    margin-top: 0.375rem;
  }

.site-body.is-admin .admin-sidebar-group-items {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.375rem;
  }

.site-body.is-admin .admin-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    color: var(--admin-sidebar-muted) !important;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
  }

.site-body.is-admin .admin-sidebar-link--root {
    padding-inline: 0.75rem;
  }

.site-body.is-admin .admin-sidebar-link--child {
    padding-inline: 2.25rem 0.75rem;
  }

.site-body.is-admin .admin-sidebar-link:hover {
    background: var(--admin-sidebar-hover) !important;
    color: var(--admin-sidebar-text) !important;
  }

.site-body.is-admin .admin-sidebar-link.is-active {
    background: var(--admin-rainbow-soft) !important;
    color: var(--admin-sidebar-text) !important;
    border: 1px solid var(--admin-rainbow-border);
  }

.site-body.is-admin .admin-sidebar-link-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-site);
    background: var(--admin-sidebar-surface) !important;
    border: 1px solid rgba(255, 253, 248, 0.12) !important;
    color: var(--admin-sidebar-faint) !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

.site-body.is-admin .admin-sidebar-link--root .admin-sidebar-link-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

.site-body.is-admin .admin-sidebar-link--child .admin-sidebar-link-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

.site-body.is-admin .admin-sidebar-link--root .admin-sidebar-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
  }

.site-body.is-admin .admin-sidebar-link--child .admin-sidebar-icon-svg {
    width: 1rem;
    height: 1rem;
  }

.site-body.is-admin .admin-sidebar-link.is-active .admin-sidebar-link-icon,
  .site-body.is-admin .admin-sidebar-link:hover .admin-sidebar-link-icon {
    background: var(--admin-rainbow-bg) !important;
    border-color: var(--admin-rainbow-border) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin :is(
    .page-panel,
    .card,
    .admin-dashboard-panel,
    .admin-dashboard-stat,
    .admin-dashboard-alert,
    .admin-dashboard-tabs,
    .admin-dashboard-list-item,
    .admin-dashboard-chart-wrap,
    .admin-dashboard-chart-panel,
    .reports-hero,
    .reports-surface,
    .reports-card,
    .reports-chip,
    .reports-tabs,
    .reports-note,
    .reports-empty,
    .reports-chart-box,
    .deo-hero,
    .deo-surface,
    .deo-card,
    .deo-chip,
    .deo-tabbar,
    .deo-note,
    .deo-empty,
    .deo-chart-tip,
    .deo-funnel-step,
    .product-editor-card,
    .product-editor-stat,
    .product-editor-nav,
    .product-editor-table-wrap,
    .pt-sticky-fields,
    .product-editor-title-card .pt-inner,
    .product-editor-title-card.is-stuck .pt-sticky-shell,
    .blog-block-card,
    .blog-block-toolbar,
    .blog-block-chip,
    .blog-block-uploader,
    .blog-block-addbtn,
    .blog-block-empty
  ) {
    background: var(--admin-panel-bg, linear-gradient(180deg, var(--admin-surface-2), var(--admin-surface))) !important;
    border-color: var(--admin-border) !important;
    box-shadow: var(--admin-panel-shadow, var(--admin-shadow-soft)), var(--admin-shadow-inset) !important;
    color: var(--admin-text);
  }

.site-body.is-admin :is(
    .page-panel,
    .\!card,
    .admin-dashboard-panel,
    .admin-dashboard-stat,
    .admin-dashboard-alert,
    .admin-dashboard-tabs,
    .admin-dashboard-list-item,
    .admin-dashboard-chart-wrap,
    .admin-dashboard-chart-panel,
    .reports-hero,
    .reports-surface,
    .reports-card,
    .reports-chip,
    .reports-tabs,
    .reports-note,
    .reports-empty,
    .reports-chart-box,
    .deo-hero,
    .deo-surface,
    .deo-card,
    .deo-chip,
    .deo-tabbar,
    .deo-note,
    .deo-empty,
    .deo-chart-tip,
    .deo-funnel-step,
    .product-editor-card,
    .product-editor-stat,
    .product-editor-nav,
    .product-editor-table-wrap,
    .pt-sticky-fields,
    .product-editor-title-card .pt-inner,
    .product-editor-title-card.is-stuck .pt-sticky-shell,
    .blog-block-card,
    .blog-block-toolbar,
    .blog-block-chip,
    .blog-block-uploader,
    .blog-block-addbtn,
    .blog-block-empty
  ) {
    background: var(--admin-panel-bg, linear-gradient(180deg, var(--admin-surface-2), var(--admin-surface))) !important;
    border-color: var(--admin-border) !important;
    box-shadow: var(--admin-panel-shadow, var(--admin-shadow-soft)), var(--admin-shadow-inset) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin :is(.product-editor-card, .reports-card, .deo-card, .blog-block-card) {
    --admin-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--admin-surface-raised) 46%, var(--admin-surface-2) 54%), var(--admin-surface));
    --admin-panel-shadow: var(--admin-shadow-float);
  }

.site-body.is-admin :is(.page-panel, .card, .admin-dashboard-tabs, .product-editor-nav) {
    --admin-panel-bg: var(--admin-surface-group);
    --admin-panel-shadow: var(--admin-shadow-soft);
  }

.site-body.is-admin :is(.page-panel, .\!card, .admin-dashboard-tabs, .product-editor-nav) {
    --admin-panel-bg: var(--admin-surface-group) !important;
    --admin-panel-shadow: var(--admin-shadow-soft) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-alert[data-tone="amber"],
    .admin-dashboard-alert[data-tone="fuchsia"],
    .admin-dashboard-alert[data-tone="sky"],
    .reports-chip.warn,
    .reports-chip.soft,
    .deo-chip.warn,
    .deo-chip.danger,
    .deo-chip.soft
  ) {
    background: var(--admin-surface-2) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) {
    background-color: var(--admin-stat-accent) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--admin-stat-accent) 82%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--admin-text) 34%, transparent) !important;
    color: var(--admin-stat-ink) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) :is(.admin-text-strong, .admin-dashboard-stat-value, .product-editor-stat-value) {
    color: var(--admin-stat-ink) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) :is(.admin-text-muted, .admin-text-subtle, .admin-dashboard-stat-label, .admin-dashboard-stat-note, .product-editor-stat-label) {
    color: var(--admin-stat-muted) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="amber"] {
    background: var(--admin-warning-surface) !important;
    border-color: var(--admin-warning-border) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="sky"] {
    background: var(--admin-info-surface) !important;
    border-color: var(--admin-info-border) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="fuchsia"] {
    background: var(--admin-lilac-surface) !important;
    border-color: var(--admin-lilac-border) !important;
  }

.site-body.is-admin :is(.reports-note, .deo-note, .reports-empty, .deo-empty, .blog-block-empty) {
    background: var(--admin-surface-2) !important;
    border-color: var(--admin-border-strong) !important;
  }

.site-body.is-admin .admin-dashboard-badge.ok {
    background: var(--admin-success-surface) !important;
    border: 1px solid var(--admin-success-border);
    color: var(--admin-success) !important;
  }

.site-body.is-admin .admin-dashboard-badge.\!ok {
    background: var(--admin-success-surface) !important;
    border: 1px solid var(--admin-success-border) !important;
    color: var(--admin-success) !important;
  }

.site-body.is-admin .admin-dashboard-badge.warn {
    background: var(--admin-warning-surface) !important;
    border: 1px solid var(--admin-warning-border);
    color: var(--admin-warning) !important;
  }

.site-body.is-admin .admin-dashboard-badge.info {
    background: var(--admin-info-surface) !important;
    border: 1px solid var(--admin-info-border);
    color: var(--admin-info) !important;
  }

.site-body.is-admin .admin-list-panel {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow-soft);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }

.site-body.is-admin .admin-list-panel__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-surface-2);
    padding: 1rem 1.25rem;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-list-panel__meta {
      padding-inline: 1.5rem;
    }
  }

.site-body.is-admin .admin-list-panel__count {
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-table-wrap {
    overflow-x: auto;
  }

.site-body.is-admin .admin-table {
    min-width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    color: var(--admin-text);
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-table thead {
    background: var(--admin-surface-3) !important;
    color: var(--admin-primary-strong) !important;
  }

.site-body.is-admin .admin-table th {
    padding: 0.875rem 1rem;
    text-align: right;
    color: var(--admin-primary-strong) !important;
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

.site-body.is-admin .admin-table td {
    border-top: 1px solid var(--admin-border);
    padding: 0.875rem 1rem;
    vertical-align: top;
    color: var(--admin-muted);
  }

.site-body.is-admin .admin-table tbody tr:first-child td {
    border-top: 0;
  }

.site-body.is-admin .admin-table tbody tr:hover td {
    background: var(--color-hover-primary-soft) !important;
  }

.site-body.is-admin .admin-table__empty {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--admin-muted) !important;
  }

.site-body.is-admin .admin-table-empty-state {
    max-width: 36rem;
    margin-inline: auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

.site-body.is-admin .admin-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

.site-body.is-admin .admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
  }

.site-body.is-admin .admin-tabbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

.site-body.is-admin .admin-tabbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface);
    color: var(--admin-muted);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 750;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

.site-body.is-admin .admin-tabbar-link:hover,
  .site-body.is-admin .admin-tabbar-link.is-active {
    border-color: var(--admin-rainbow-border);
    background: var(--admin-rainbow-soft);
    color: var(--color-text-heading);
  }

.site-body.is-admin .admin-tabbar-link.is-active {
    background: var(--admin-rainbow-bg);
    color: var(--admin-text);
    box-shadow: var(--admin-rainbow-shadow);
  }

.site-body.is-admin .admin-empty-panel {
    padding: 1.5rem;
    text-align: center;
    color: var(--admin-muted);
  }

.site-body.is-admin .admin-empty-panel__action {
    margin-top: 0.75rem;
  }

.site-body.is-admin .admin-text-link {
    color: var(--color-cta-secondary-text);
    font-weight: 750;
    text-decoration: none;
  }

.site-body.is-admin .admin-text-link:hover {
    text-decoration: underline;
  }

.site-body.is-admin .admin-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

.site-body.is-admin :is(
    .admin-form-panel,
    .admin-dashboard-panel,
    .admin-dashboard-alert,
    .admin-dashboard-tabs,
    .admin-dashboard-list-item,
    .admin-stat-card,
    .card,
    .page-panel
  ) {
    width: 100%;
    min-width: 0;
    border-radius: var(--radius-site);
  }

.site-body.is-admin :is(
    .admin-form-panel,
    .admin-dashboard-panel,
    .admin-dashboard-alert,
    .admin-dashboard-tabs,
    .admin-dashboard-list-item,
    .admin-stat-card,
    .\!card,
    .page-panel
  ) {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: var(--radius-site) !important;
  }

.site-body.is-admin .admin-stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-stat-grid--three,
    .site-body.is-admin .admin-stat-grid--dashboard {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-stat-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

@media (min-width: 1280px) {
    .site-body.is-admin .admin-stat-grid--dashboard {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

@media (min-width: 1536px) {
    .site-body.is-admin .admin-stat-grid--dashboard {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

@media (min-width: 768px) {
    .site-body.is-admin .admin-card-grid--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.site-body.is-admin .admin-slider-card__media {
    aspect-ratio: 16 / 9;
    background: var(--admin-surface-2);
  }

.site-body.is-admin .admin-slider-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.site-body.is-admin .admin-slider-card__body {
    padding: 1.25rem;
  }

.site-body.is-admin .admin-slider-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-slider-card__actions {
    margin-top: 1rem;
  }

.site-body.is-admin .admin-inline-form {
    display: inline-flex;
  }

.site-body.is-admin .admin-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
  }

.site-body.is-admin .admin-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-info-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-body.is-admin .admin-info-grid__span-two {
      grid-column: span 2 / span 2;
    }
  }

.site-body.is-admin .admin-info-panel {
    padding: 1.25rem;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-info-panel {
      padding: 1.75rem;
    }
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-info-panel {
      padding: 2rem;
    }
  }

.site-body.is-admin .admin-info-panel__label,
  .site-body.is-admin .admin-info-panel__note {
    color: var(--admin-muted);
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-info-panel__value {
    margin-top: 0.25rem;
    color: var(--color-text-strong);
    font-weight: 800;
  }

.site-body.is-admin .admin-info-panel__note {
    margin-top: 0.25rem;
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
  }

@media (min-width: 768px) {
    .site-body.is-admin .admin-form-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

.site-body.is-admin .admin-field-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--admin-muted);
    font-size: 0.875rem;
    font-weight: 700;
  }

.site-body.is-admin .admin-field-control {
    width: 100%;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-field-control:focus {
    border-color: var(--color-border-focus);
    outline: 0;
    box-shadow: 0 0 0 4px var(--color-focus-soft);
  }

.site-body.is-admin .admin-key-value-list {
    color: var(--admin-muted);
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-key-value-list__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }

.site-body.is-admin .admin-key-value-list__row + .admin-key-value-list__row {
    margin-top: 0.5rem;
  }

.site-body.is-admin .admin-key-value-list__value {
    color: var(--color-text-strong);
    font-weight: 750;
  }

.site-body.is-admin .admin-log-summary {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

.site-body.is-admin .admin-log-summary__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface);
    padding: 1.25rem;
    box-shadow: var(--admin-shadow-soft);
  }

.site-body.is-admin .admin-log-summary__title {
    color: var(--color-text-strong);
    font-size: 1rem;
    font-weight: 850;
  }

.site-body.is-admin .admin-log-summary__subtitle {
    margin-top: 0.35rem;
    color: var(--admin-muted);
    font-size: 0.8125rem;
    line-height: 1.75;
  }

.site-body.is-admin .admin-log-summary__badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid var(--color-border-primary-soft);
    border-radius: var(--radius-site);
    background: var(--color-hover-primary-soft);
    color: var(--color-text-heading);
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 800;
  }

.site-body.is-admin .admin-log-summary__stats,
  .site-body.is-admin .admin-log-summary__lists {
    margin-bottom: 0;
  }

.site-body.is-admin .admin-log-event-list,
  .site-body.is-admin .admin-log-group-list {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
  }

.site-body.is-admin .admin-log-event,
  .site-body.is-admin .admin-log-group {
    min-width: 0;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface-2);
    padding: 0.85rem;
  }

.site-body.is-admin .admin-log-event__meta,
  .site-body.is-admin .admin-log-group__top,
  .site-body.is-admin .admin-log-group__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-log-event__message,
  .site-body.is-admin .admin-log-group__message {
    margin-top: 0.5rem;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: left;
  }

.site-body.is-admin .admin-log-group__meta {
    margin-top: 0.5rem;
  }

.site-body.is-admin .admin-log-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    border-radius: var(--radius-site);
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 900;
  }

.site-body.is-admin .admin-log-level--critical,
  .site-body.is-admin .admin-log-level--fatal {
    background: var(--color-error-bg);
    color: var(--color-error-text);
  }

.site-body.is-admin .admin-log-level--error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
  }

.site-body.is-admin .admin-log-level--warning,
  .site-body.is-admin .admin-log-level--warn {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }

.site-body.is-admin .admin-log-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--admin-border);
    padding: 0.75rem 1rem;
  }

.site-body.is-admin .admin-log-panel__title {
    color: var(--color-text-strong);
    font-size: 0.875rem;
    font-weight: 750;
  }

.site-body.is-admin .admin-log-panel__file {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-log-panel__content {
    max-height: 70vh;
    overflow: auto;
    background: var(--admin-bg-deep);
    color: var(--color-text-primary);
    padding: 1rem;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.5rem;
    white-space: pre-wrap;
  }

.site-body.is-admin .admin-category-hero,
  .site-body.is-admin .admin-category-panel {
    padding: 1.5rem;
  }

@media (min-width: 640px) {
    .site-body.is-admin .admin-category-hero {
      padding: 2rem;
    }

    .site-body.is-admin .admin-category-panel {
      padding: 1.5rem;
    }
  }

.site-body.is-admin .admin-category-hero__row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

@media (min-width: 1024px) {
    .site-body.is-admin .admin-category-hero__row {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

.site-body.is-admin .admin-category-hero__copy {
    min-width: 0;
  }

.site-body.is-admin .admin-category-hero__eyebrow {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

.site-body.is-admin .admin-category-hero__title {
    margin-top: 0.75rem;
    color: var(--color-text-strong);
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    font-weight: 900;
    line-height: 1.4;
  }

.site-body.is-admin .admin-category-hero__subtitle {
    max-width: 48rem;
    margin-top: 0.75rem;
    color: var(--admin-muted);
    font-size: 0.875rem;
    line-height: 2;
  }

.site-body.is-admin .admin-category-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

.site-body.is-admin .admin-category-hero__actions {
    flex: 0 0 auto;
  }

.site-body.is-admin .admin-category-tree {
    display: grid;
    gap: 0.75rem;
  }

.site-body.is-admin .admin-category-node {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

.site-body.is-admin details.admin-category-node {
    display: block;
    padding: 0;
  }

.site-body.is-admin .admin-category-node__summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

.site-body.is-admin .admin-category-node__summary::-webkit-details-marker {
    display: none;
  }

.site-body.is-admin .admin-category-node__summary:hover,
  .site-body.is-admin .admin-category-node--leaf:hover {
    background: var(--admin-surface-2);
  }

.site-body.is-admin .admin-category-node__main {
    min-width: 0;
    flex: 1 1 auto;
  }

.site-body.is-admin .admin-category-node__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

.site-body.is-admin .admin-category-node__toggle {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-site);
    background: var(--admin-surface-2);
    color: var(--color-text-subtle);
  }

.site-body.is-admin .admin-category-node__level {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-primary-soft);
    border-radius: var(--radius-site);
    background: var(--color-hover-primary-soft);
    color: var(--color-text-heading);
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 800;
  }

.site-body.is-admin .admin-category-node__title {
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 0.875rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.site-body.is-admin .admin-category-node__slug {
    margin-top: 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-category-node__actions {
    flex: 0 0 auto;
  }

.site-body.is-admin .admin-category-node__children {
    border-top: 1px solid var(--admin-border);
    background: color-mix(in srgb, var(--admin-surface-2) 70%, transparent);
    padding: 1rem;
  }

.site-body.is-admin .admin-ai-drafts-shell {
    max-width: 64rem;
  }

.site-body.is-admin .admin-ai-drafts {
    padding: 2rem;
  }

.site-body.is-admin .admin-ai-drafts__header,
  .site-body.is-admin .admin-ai-draft-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

.site-body.is-admin .admin-ai-drafts__header {
    margin-bottom: 1.5rem;
  }

.site-body.is-admin .admin-ai-drafts__title {
    color: var(--color-text-strong);
    font-size: 1.125rem;
    font-weight: 800;
  }

.site-body.is-admin .admin-ai-drafts__subtitle {
    margin-top: 0.25rem;
    color: var(--admin-muted);
    font-size: 0.875rem;
  }

.site-body.is-admin .admin-ai-drafts__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

.site-body.is-admin .admin-ai-drafts__limit {
    width: 7rem;
  }

.site-body.is-admin .admin-ai-drafts__list,
  .site-body.is-admin .admin-ai-draft-card__body,
  .site-body.is-admin .admin-ai-draft-card__form {
    display: grid;
    gap: 1rem;
  }

.site-body.is-admin .admin-ai-draft-card {
    padding: 1.25rem;
  }

.site-body.is-admin .admin-ai-draft-card__body {
    margin-top: 0.75rem;
  }

.site-body.is-admin .admin-ai-draft-card__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
  }

.site-body.is-admin .admin-ai-draft-card__date {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.border) {
    border-color: var(--admin-border) !important;
  }

.site-body.is-admin :is(table, .min-w-full) {
    color: var(--admin-text);
  }

.site-body.is-admin thead,
  .site-body.is-admin thead :is(tr, th),
  .site-body.is-admin .admin-list-panel thead {
    background: var(--admin-surface-3) !important;
    color: var(--admin-primary-strong) !important;
  }

.site-body.is-admin th {
    border-color: var(--admin-border-strong) !important;
    color: var(--admin-primary-strong) !important;
  }

.site-body.is-admin td {
    border-color: var(--admin-border) !important;
  }

.site-body.is-admin tbody tr:hover :is(td, th) {
    background-color: color-mix(in srgb, var(--color-cta-primary-bg) 11%, transparent) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-table,
    .reports-table,
    .deo-table,
    .product-editor-table
  ) :is(th, td) {
    border-color: var(--admin-border) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-table,
    .reports-table,
    .deo-table,
    .product-editor-table
  ) th {
    background: var(--admin-surface-3) !important;
    color: var(--admin-primary-strong) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-table,
    .reports-table,
    .deo-table,
    .product-editor-table
  ) tr:hover td {
    background: color-mix(in srgb, var(--admin-primary-strong) 8%, transparent) !important;
  }

.site-body.is-admin :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-soft) {
    box-shadow: var(--admin-shadow-soft) !important;
  }

.site-body.is-admin .ui-button {
    border-color: var(--admin-border-strong) !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
  }

.site-body.is-admin .ui-button--primary {
    border-color: var(--admin-rainbow-border) !important;
    background: var(--admin-rainbow-bg) !important;
    color: var(--admin-text) !important;
    box-shadow: var(--admin-rainbow-shadow) !important;
    font-weight: 800;
  }

.site-body.is-admin .ui-button--primary:hover {
    background: var(--admin-rainbow-bg-hover) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin :is(.ui-button--secondary, .ui-button--ghost, .ui-button--quiet) {
    background: var(--admin-surface-2) !important;
    border-color: var(--admin-border-strong) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin :is(.ui-button--secondary, .ui-button--ghost, .ui-button--quiet):hover {
    background: var(--admin-surface-3) !important;
    border-color: var(--admin-primary-strong) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin .ui-button--icon {
    background: var(--admin-surface-2) !important;
    border-color: var(--admin-border-strong) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin .ui-button--icon:hover {
    background: var(--admin-surface-3) !important;
    border-color: var(--admin-primary-strong) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin .ui-button--danger {
    background: var(--admin-danger-surface) !important;
    border-color: var(--admin-danger-border) !important;
    color: var(--admin-danger) !important;
  }

.site-body.is-admin .ui-button--danger:hover {
    background: color-mix(in srgb, var(--admin-danger) 28%, transparent) !important;
    color: var(--admin-text) !important;
  }

.site-body.is-admin .btn-label {
    color: inherit !important;
  }

.site-body.is-admin .admin-form-actions {
    background: color-mix(in srgb, var(--admin-bg) 94%, transparent) !important;
    border-color: var(--admin-border) !important;
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card) {
    --admin-stat-rgb: 79, 172, 254;
    --admin-stat-rgb-2: 43, 214, 190;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
    --admin-stat-ink: var(--admin-text);
    --admin-stat-muted: rgba(255, 250, 240, 0.78);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 1),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-1 {
    --admin-stat-rgb: 255, 123, 172;
    --admin-stat-rgb-2: 180, 125, 255;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 2),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-2 {
    --admin-stat-rgb: 51, 214, 159;
    --admin-stat-rgb-2: 99, 196, 255;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 3),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-3 {
    --admin-stat-rgb: 79, 172, 254;
    --admin-stat-rgb-2: 43, 214, 190;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 4),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-4 {
    --admin-stat-rgb: 166, 127, 255;
    --admin-stat-rgb-2: 255, 135, 195;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 5),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-5 {
    --admin-stat-rgb: 247, 190, 82;
    --admin-stat-rgb-2: 255, 127, 98;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(.admin-dashboard-stat, .admin-stat-card):nth-child(6n + 6),
  .site-body.is-admin .admin-stat-card.admin-stat-card--tone-6 {
    --admin-stat-rgb: 255, 135, 101;
    --admin-stat-rgb-2: 255, 93, 151;
    --admin-stat-accent: rgb(var(--admin-stat-rgb));
    --admin-stat-accent-rgb: var(--admin-stat-rgb);
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) {
    --admin-stat-surface:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%),
      radial-gradient(circle at 14% 0%, rgba(var(--admin-stat-rgb), 0.56), transparent 42%),
      radial-gradient(circle at 92% 100%, rgba(var(--admin-stat-rgb-2), 0.38), transparent 44%),
      linear-gradient(135deg, color-mix(in srgb, var(--admin-bg) 50%, rgb(var(--admin-stat-rgb)) 50%), color-mix(in srgb, var(--admin-bg) 70%, rgb(var(--admin-stat-rgb-2)) 30%));
    position: relative;
    overflow: hidden;
    color: var(--admin-stat-ink) !important;
    border-color: rgba(var(--admin-stat-rgb), 0.68) !important;
    background: var(--admin-stat-surface) !important;
    box-shadow:
      0 22px 54px -36px rgba(var(--admin-stat-rgb), 0.92),
      0 10px 24px -22px rgba(var(--admin-stat-rgb-2), 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  )::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgb(var(--admin-stat-rgb)), rgb(var(--admin-stat-rgb-2)));
    opacity: 0.95;
  }

.site-body.is-admin :is(
    .admin-dashboard-alert[data-tone="amber"],
    .admin-dashboard-alert[data-tone="fuchsia"],
    .admin-dashboard-alert[data-tone="sky"]
  ) {
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 42px -34px var(--admin-primary) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="amber"] {
    background:
      radial-gradient(circle at 12% 0%, rgba(247, 190, 82, 0.24), transparent 42%),
      var(--admin-warning-surface) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="fuchsia"] {
    background:
      radial-gradient(circle at 12% 0%, rgba(166, 127, 255, 0.24), transparent 42%),
      var(--admin-lilac-surface) !important;
  }

.site-body.is-admin .admin-dashboard-alert[data-tone="sky"] {
    background:
      radial-gradient(circle at 12% 0%, rgba(79, 172, 254, 0.22), transparent 42%),
      var(--admin-info-surface) !important;
  }

.site-body.is-admin .admin-stat-card > p {
    color: var(--admin-stat-muted) !important;
  }

.site-body.is-admin .admin-stat-card > p:nth-of-type(2),
  .site-body.is-admin .admin-stat-card > :is(.admin-text-strong, .admin-dashboard-stat-value) {
    color: var(--admin-stat-ink) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) :is(.admin-text-strong, .admin-dashboard-stat-value, .product-editor-stat-value) {
    color: var(--admin-stat-ink) !important;
  }

.site-body.is-admin :is(
    .admin-dashboard-stat,
    .admin-stat-card,
    .reports-kpi-grid > .reports-card,
    .deo-kpi,
    .product-editor-stat
  ) :is(.admin-text-muted, .admin-text-subtle, .admin-dashboard-stat-label, .admin-dashboard-stat-note, .product-editor-stat-label) {
    color: var(--admin-stat-muted) !important;
  }


  .profile-page-flow > .snapshot-gallery .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .snapshot-gallery {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.snapshot-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 640px) {

  .snapshot-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .snapshot-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .snapshot-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


  .profile-page-flow > .snapshot-card,
  .profile-page-flow > .grid .snapshot-card {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.snapshot-card.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg,.snapshot-card) {
    box-shadow: var(--admin-shadow-soft);
  }

.snapshot-card {
  overflow: hidden;
  border-radius: var(--radius-site);
  --tw-shadow: var(--shadow-soft);
  --tw-shadow-colored: var(--shadow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-primary);
}

.snapshot-card-media {
  display: block;
    background: var(--color-surface-secondary);
}

.snapshot-card-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

.snapshot-card-body > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.snapshot-card-body {
  padding: 0.75rem;
}

.snapshot-card-path {
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
    color: var(--color-text-primary);
}

.storefront-journal-sidebar-block a.snapshot-card-meta {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.snapshot-card-meta:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.snapshot-card-meta img {
    border-radius: var(--radius-site);
  }

.snapshot-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
    color: var(--color-text-muted);
}

.snapshot-card-warning {
    color: var(--color-warning-text);
  }

.storefront-journal-sidebar-block a.snapshot-card-actions {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.snapshot-card-actions:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.snapshot-card-actions img {
    border-radius: var(--radius-site);
  }

.snapshot-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.snapshot-card-form {
  display: inline-flex;
}

.snapshot-card-action {
  min-width: 5.25rem;
  justify-content: center;
}

.snapshot-card-action-repair {
    border-color: var(--color-info-border);
    background: var(--color-info-bg);
    color: var(--color-info-text);
  }

.checkout-summary-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.checkout-summary-card {
  padding: 1.25rem;
    border-top: 1px solid var(--color-divider);
    background: transparent;
    box-shadow: none;
}

.checkout-summary-card h2 {
    color: var(--color-text-strong);
    font-weight: 600;
  }


  .profile-page-flow > .checkout-quantity-control__button,
  .profile-page-flow > .grid .checkout-quantity-control__button {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.checkout-quantity-control__button.border) {
    border-color: var(--admin-border);
  }

.checkout-quantity-control__button {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: var(--radius-site);
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
}

.checkout-quantity-control__button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.checkout-quantity-control__button:focus-visible {
  --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);
}

.checkout-quantity-control__button {
    color: var(--color-text-heading);
  }

.checkout-quantity-control__button:hover {
    background: var(--color-hover-primary-soft);
  }

.checkout-quantity-control__button:focus-visible {
    --tw-ring-color: var(--color-focus-soft);
  }

.checkout-quantity-control__button-danger {
    color: var(--color-error-text);
  }

.checkout-quantity-control__button-danger:hover {
    background: var(--color-error-bg);
  }

.checkout-quantity-control__value {
  width: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
    color: var(--color-text-strong);
}

.look-card-media {
  aspect-ratio: 1 / 1;
  border-top-left-radius: var(--radius-site);
  border-top-right-radius: var(--radius-site);
    background: var(--color-surface-secondary);
}

.storefront-journal-sidebar-block a.look-card-body {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.look-card-body:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.look-card-body img {
    border-radius: var(--radius-site);
  }

.look-card-body {
  display: flex;
  min-height: 3.75rem;
  flex-direction: column;
  overflow: hidden;
  border-bottom-right-radius: var(--radius-site);
  border-bottom-left-radius: var(--radius-site);
}

.look-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25rem;
}

@media (min-width: 640px) {

  .look-card-title {
    font-size: 12px;
  }
}

.look-card-title {
    background: var(--color-dark-section-bg);
    color: var(--color-dark-section-text);
  }

.look-card-meta {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25rem;
    background: var(--color-dark-section-bg-soft);
    color: var(--color-dark-section-muted);
}

.discovery-shell {
  padding: 1.5rem;
}

@media (min-width: 640px) {

  .discovery-shell {
    padding: 2rem;
  }
}

.discovery-shell {
    border: 0;
    box-shadow: none;
  }

.discovery-chip {
    position: relative;
    display: inline-flex;
    width: min(100%, 13.25rem);
    min-width: 11.5rem;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 13%, var(--color-border-default));
    border-radius: 0.45rem;
    background: var(--color-surface-secondary);
    color: var(--color-text-inverse);
    box-shadow: 0 14px 32px -28px rgba(31, 27, 23, 0.35);
    text-align: start;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

.discovery-chip:hover,
  .discovery-chip:focus-visible {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 48%, transparent);
    box-shadow: 0 18px 38px -30px rgba(31, 27, 23, 0.45);
    transform: translateY(-2px);
  }

.discovery-chip.is-active {
    border-color: var(--color-cta-primary-bg);
    box-shadow:
      0 18px 42px -30px rgba(31, 27, 23, 0.48),
      0 0 0 3px color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent);
    color: var(--color-text-inverse);
  }

.discovery-chip-media {
    position: absolute;
    inset: 0;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--color-surface-secondary);
  }

.discovery-chip-label {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0.9rem;
    color: var(--color-text-inverse);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
  }

.discovery-chip.is-active .discovery-chip-label::before {
    display: inline-block;
    width: 0.46rem;
    height: 0.46rem;
    -webkit-margin-end: 0.42rem;
            margin-inline-end: 0.42rem;
    border-radius: 9999px;
    background: currentColor;
    content: "";
    vertical-align: middle;
  }

.discovery-chip-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

.discovery-card {
  cursor: pointer;
  background-color: transparent;
  padding: 0.75rem;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    border: 0;
    box-shadow: none;
    max-width: 360px;
    scroll-margin-top: 7rem;
}

.discovery-card:hover,
  .discovery-card:focus-visible {
    border-color: var(--color-border-primary-soft);
  }

.discovery-card.is-active {
  --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);
    border-color: var(--color-border-focus);
    --tw-ring-color: var(--color-focus-soft);
    box-shadow: none;
}

.discovery-card.is-active:hover,
  .discovery-card.is-active:focus-visible {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
  --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(4px + 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);
    border-color: var(--color-border-focus);
    --tw-ring-color: var(--color-focus-soft);
    box-shadow: none;
}

.discovery-style-card {
    padding: 0;
    overflow: hidden;
  }

.discovery-style-card.discovery-style-card > * {
    margin-top: 0;
  }

.discovery-style-hover {
    background: linear-gradient(180deg, rgba(0, 73, 83, 0) 0%, rgba(0, 73, 83, 0) 70%, rgba(0, 73, 83, 0.52) 100%);
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

.discovery-style-card:hover .discovery-style-hover,
  .discovery-style-card.is-active .discovery-style-hover,
  .discovery-style-card:focus-visible .discovery-style-hover {
    opacity: 1;
    transform: translateY(0);
  }

.discovery-panel[hidden],
  .discovery-panel.hidden {
    display: none;
  }


  .discovery-panel.\!hidden {
    display: none !important;
  }

[data-discovery-categories][hidden],
  [data-discovery-categories].hidden,
  [data-discovery-style-heading][hidden],
  [data-discovery-style-heading].hidden,
  [data-discovery-group][hidden],
  [data-discovery-group].hidden,
  [data-discovery-items][hidden],
  [data-discovery-items].hidden {
    display: none;
  }


  [data-discovery-categories].\!hidden,
  [data-discovery-style-heading].\!hidden,
  [data-discovery-group].\!hidden,
  [data-discovery-items].\!hidden {
    display: none !important;
  }

.discovery-items-grid,
  .discovery-products-grid {
    display: grid;
    justify-items: stretch;
    gap: 0.75rem;
  }

.discovery-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  }

.look-style-carousel[data-drag-scroll] {
    display: flex;
    grid-template-columns: none;
    justify-items: initial;
    align-items: stretch;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-scroll-snap-type: x proximity;
            scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: -webkit-grab;
    cursor: grab;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

.look-style-carousel[data-drag-scroll].hidden,
  .look-style-carousel[data-drag-scroll][hidden] {
    display: none;
  }

.look-style-carousel[data-drag-scroll].\!hidden {
    display: none !important;
  }

.look-style-carousel[data-drag-scroll]::-webkit-scrollbar {
    display: none;
  }

.look-style-carousel[data-drag-scroll].is-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }

.look-style-carousel[data-drag-scroll] > .discovery-card {
    flex: 0 0 min(72vw, 13.5rem);
    width: min(72vw, 13.5rem);
    max-width: none;
    scroll-snap-align: start;
  }

.look-style-carousel[data-drag-scroll] > .discovery-chip {
    flex: 0 0 min(72vw, 13.5rem);
    width: min(72vw, 13.5rem);
    max-width: none;
    scroll-snap-align: start;
  }

.discovery-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.discovery-products-grid--mobile,
  .discovery-items-grid--mobile {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr));
  }

.discovery-products-grid--mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

@media (max-width: 420px) {
    .discovery-products-grid--mobile {
      grid-template-columns: minmax(0, 1fr);
    }
  }

@media (min-width: 768px) {
    .look-style-carousel[data-drag-scroll] > .discovery-card {
      flex-basis: 14rem;
      width: 14rem;
    }

    .look-style-carousel[data-drag-scroll] > .discovery-chip {
      flex-basis: 14rem;
      width: 14rem;
    }

    .discovery-products-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

.discovery-look-result {
    display: grid;
    gap: 1.25rem;
  }

.discovery-look-result__head {
    display: grid;
    gap: 0.35rem;
    text-align: center;
  }

.discovery-look-result__eyebrow,
  .discovery-look-result__summary-label,
  .discovery-look-result__meta {
    margin: 0;
    color: color-mix(in srgb, var(--color-cta-primary-bg) 72%, transparent);
    font-size: 0.74rem;
    font-weight: 700;
  }

.discovery-look-result__title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(1.2rem, 2.1vw, 1.65rem);
    font-weight: 700;
    line-height: 1.7;
  }

.discovery-look-result__layout {
    display: grid;
    gap: 1rem;
    align-items: start;
    direction: ltr;
    grid-template-areas:
      "products"
      "aside";
  }

.discovery-look-result__products {
    direction: rtl;
    grid-area: products;
    gap: 1rem;
    justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 10.5rem));
  }

.discovery-look-result__aside {
    display: grid;
    gap: 0.75rem;
    direction: rtl;
    grid-area: aside;
    min-width: 0;
  }

.discovery-look-result__media {
    overflow: hidden;
    border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    aspect-ratio: 3 / 4;
  }

.discovery-look-result__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.discovery-look-result__summary {
    display: grid;
    gap: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 14%, transparent);
    border-radius: var(--radius-site);
    background: color-mix(in srgb, var(--color-surface-primary) 86%, transparent);
    padding: 1rem;
  }

.discovery-look-result__price {
    margin: 0.2rem 0 0;
    color: var(--color-text-heading);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.5;
  }

.discovery-look-result__copy {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
    font-size: 0.9rem;
    line-height: 2;
  }

.discovery-look-result__form {
    margin: 0;
  }

.discovery-look-result__button {
    width: 100%;
  }

.discovery-look-result .product-card-slide {
    min-width: 0;
  }

.discovery-look-result .product-card-slide > div {
    height: 100%;
  }

.discovery-look-result .product-card-slide .ui-product-card__content {
    gap: 0;
    min-height: 2.85rem;
    padding: 0.35rem 0.45rem;
  }

.discovery-look-result .product-card-slide [data-product-title] {
    min-height: 0;
    font-size: 0.62rem;
    line-height: 1.35;
  }

.discovery-look-result .product-card-slide [data-price] {
    font-size: 0.62rem;
    line-height: 1.35;
  }

.discovery-look-result .product-card-slide [data-price] span {
    font-size: 0.56rem;
  }

@media (min-width: 768px) {
    .discovery-look-result__layout {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.36fr);
      grid-template-areas: "products aside";
      gap: 1.25rem;
    }

    .discovery-look-result__products {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 12rem));
    }

    .discovery-look-result__aside {
      position: -webkit-sticky;
      position: sticky;
      top: 6.75rem;
    }
  }

.storefront-journal-sidebar-block a.look-filter-strip {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.look-filter-strip:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.look-filter-strip img {
    border-radius: var(--radius-site);
  }

.look-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


  .profile-page-flow > .look-experience-grid .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .look-experience-grid {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.look-experience-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {

  .look-experience-grid {
    gap: 1rem;
  }
}

.look-experience-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.25rem), 1fr));
  }

.look-experience-grid__item {
  min-width: 0px;
}


  .profile-page-flow > .look-card,
  .profile-page-flow > .grid .look-card {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.storefront-journal-sidebar-block a.look-card {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.look-card:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.look-card img {
    border-radius: var(--radius-site);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.look-card.border) {
    border-color: var(--admin-border);
  }

.look-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-site);
  background-color: transparent;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    box-shadow: none;
}

.look-card:hover,
  .look-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
  }


  .profile-page-flow > .look-hero .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .look-hero {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.look-hero {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1024px) {

  .look-hero {
    grid-template-columns: minmax(0,0.95fr) minmax(320px,1.05fr);
  }
}

.look-hero {
    align-items: start;
  }


  .profile-page-flow > .look-hero__media,
  .profile-page-flow > .grid .look-hero__media {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.look-hero__media.border) {
    border-color: var(--admin-border);
  }

.look-hero__media {
  overflow: hidden;
  border-radius: var(--radius-site);
    background: var(--color-surface-secondary);
    aspect-ratio: 1 / 1;
    box-shadow: none;
}

.look-hero__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
    aspect-ratio: 1 / 1;
}

.storefront-journal-sidebar-block a.look-hero__body {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.look-hero__body:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.look-hero__body img {
    border-radius: var(--radius-site);
  }

.look-hero__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.look-hero__copy {
  border-top-width: 1px;
  padding: 0px;
  padding-top: 1.25rem;
    border-color: var(--color-border-soft);
    box-shadow: none;
}

.look-hero__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--color-text-primary);
  }

.look-hero__description {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 2rem;
}

@media (min-width: 640px) {

  .look-hero__description {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.look-hero__description {
    color: var(--color-text-muted);
  }

@media (min-width: 1024px) {

  .look-hero__aside {
    position: -webkit-sticky;
    position: sticky;
    top: 6rem;
  }
}

.look-purchase-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.look-purchase-card {
  border-top-width: 1px;
  background-color: transparent;
  padding-top: 1.25rem;
    border-color: var(--color-border-soft);
    box-shadow: none;
}

.look-purchase-card__eyebrow,
  .look-show-kicker,
  .look-product-row__meta {
    color: color-mix(in srgb, var(--color-cta-primary-bg) 62%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
  }

.storefront-journal-sidebar-block a.look-purchase-card__row {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

.storefront-journal-sidebar-block a.look-purchase-card__row:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

.storefront-journal-sidebar-block a.look-purchase-card__row img {
    border-radius: var(--radius-site);
  }

.look-purchase-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.look-purchase-card__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.look-purchase-card__count {
    margin-top: 0.2rem;
    color: color-mix(in srgb, var(--color-text-primary) 54%, transparent);
    font-size: 0.78rem;
  }

.look-purchase-card__total {
    color: var(--color-cta-secondary-text);
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    font-weight: 700;
  }

.look-purchase-card__note {
  font-size: 0.75rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {

  .look-purchase-card__note {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.look-purchase-card__note {
    color: var(--color-text-muted);
  }


  .profile-page-flow > .look-product-list .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .look-product-list {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.look-product-list {
  display: grid;
  gap: 0.75rem;
}


  .profile-page-flow > .look-product-row .rounded {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.profile-special-profile-form .look-product-row {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
  }

.look-product-row {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  border-top-width: 1px;
  background-color: transparent;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
}

@media (min-width: 640px) {

  .look-product-row {
    gap: 1rem;
  }
}

.look-product-row {
    border-color: var(--color-border-soft);
    grid-template-columns: 5rem minmax(0, 1fr) auto auto;
    box-shadow: none;
  }

.look-product-row:hover,
  .look-product-row:focus-visible {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 28%, transparent);
  }

.look-product-row--missing {
    opacity: 0.72;
  }

.look-product-row__media-link {
    display: block;
  }


  .profile-page-flow > .look-product-row__image,
  .profile-page-flow > .grid .look-product-row__image {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.look-product-row__image.border) {
    border-color: var(--admin-border);
  }

.look-product-row__image {
  height: 5rem;
  width: 5rem;
  flex: none;
  border-radius: var(--radius-site);
  object-fit: cover;
    background: var(--color-surface-secondary);
    aspect-ratio: 1 / 1;
}

.look-product-row__body {
  min-width: 0px;
  flex: 1 1 0%;
}

.look-product-row__title {
    line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
  }

@media (min-width: 640px) {

  .look-product-row__title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.look-product-row__title {
    color: var(--color-text-primary);
  }

.look-product-row__subtitle {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {

  .look-product-row__subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.look-product-row__subtitle {
    color: var(--color-text-muted);
  }

.look-product-row__price {
  flex: none;
}

.look-product-row__missing-label {
    color: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
    font-size: 0.82rem;
  }

.look-product-row__remove {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 18%, transparent);
    border-radius: var(--radius-site);
    color: color-mix(in srgb, var(--color-cta-primary-bg) 68%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }

.look-product-row__remove:hover,
  .look-product-row__remove:focus-visible {
    background: color-mix(in srgb, var(--color-cta-primary-bg) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 34%, transparent);
    color: var(--color-text-heading);
    outline: none;
  }

.look-show-page {
    margin-top: clamp(1.25rem, 3vw, 2.5rem);
  }

.look-show-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    padding-top: clamp(1rem, 2.5vw, 1.75rem);
    margin-bottom: 1rem;
  }

.look-show-title {
    color: var(--color-text-strong);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.55;
  }

.look-show-copy {
    margin-top: 0.35rem;
    color: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    font-size: 0.9rem;
    line-height: 1.9;
  }

.look-discovery-empty {
    -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);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.look-discovery-empty) {
    border-color: var(--admin-border);
  }

.look-discovery-empty {
  border-width: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  --tw-backdrop-blur: blur(8px);
  -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);
    border-color: var(--color-border-default);
    background: var(--color-glass-ivory);
    border-radius: var(--radius-xl);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.look-discovery-empty-solid {
  margin-top: 1.5rem;
    border-color: var(--color-border-default);
    background: var(--color-surface-primary);
}


  .profile-page-flow > .look-discovery-style-card__media,
  .profile-page-flow > .grid .look-discovery-style-card__media {
    border-color: var(--color-border-soft);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel,.look-discovery-style-card__media.border) {
    border-color: var(--admin-border);
  }

.site-body.is-admin :is(.admin-list-panel, .admin-form-panel, .rounded.look-discovery-style-card__media) {
    border-color: var(--admin-border);
  }

.look-discovery-style-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-site);
  border-width: 1px;
    aspect-ratio: 3 / 4;
    border-color: var(--color-border-default);
    background: var(--color-surface-secondary);
}

@media (max-width: 767px) {
    .look-hero {
      gap: 1.25rem;
    }

    .look-product-row {
      grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .look-product-row__price,
    .look-product-row__remove {
      grid-column: 2;
      justify-self: start;
    }

    .look-product-row__image {
      width: 4.5rem;
      height: 4.5rem;
    }

    .look-show-heading {
      align-items: start;
      flex-direction: column;
    }
  }

#home-looks {
    background: transparent;
  }

.home-editorial-flow {
    padding-block: clamp(1.25rem, 3vw, 3rem);
  }

#home-looks .discovery-shell {
    border: 0;
    box-shadow: none;
    padding: clamp(1.1rem, 3vw, 2.75rem);
  }

#home-looks [data-discovery-layout="desktop"] h2,
  #home-looks [data-discovery-layout="mobile"] h2 {
    position: relative;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-weight: 550;
    line-height: 1.68;
    letter-spacing: 0;
  }

#home-looks [data-discovery-layout="desktop"] h2 {
    max-width: 44rem;
    margin-inline: auto;
    font-size: clamp(1.42rem, 2.25vw, 2.35rem);
  }

#home-looks [data-discovery-layout="desktop"] h2::after,
  #home-looks [data-discovery-layout="mobile"] h2::after {
    display: block;
    width: clamp(2.35rem, 5vw, 3.5rem);
    height: 1px;
    margin: 0.58rem auto 0;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 70%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent)
    );
  }

#home-looks .home-look-styles {
    width: min(100%, 58rem);
    margin: 1.75rem auto 0;
  }

#home-looks .home-look-category-card {
    min-width: 0;
    aspect-ratio: 1 / 1;
    text-decoration: none;
  }

#home-looks .discovery-chip {
    width: clamp(9.5rem, 15vw, 13rem);
    min-width: 0;
    min-height: 0;
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 16%, var(--color-surface-primary));
    border-radius: 0.4rem;
    background: var(--color-surface-secondary);
    box-shadow: var(--shadow-luxury-line);
  }

#home-looks .discovery-chip:hover,
  #home-looks .discovery-chip:focus-visible,
  #home-looks .discovery-chip.is-active {
    border-color: rgba(0, 73, 83, 0.42);
  }

#home-looks .discovery-chip:hover,
  #home-looks .discovery-chip:focus-visible {
    transform: translateY(-1px);
  }

#home-looks .discovery-chip-image {
    border-radius: inherit;
  }

#home-looks .discovery-chip-label {
    display: grid;
    gap: 0.22rem;
    padding: 0.95rem 0.85rem;
    font-size: 0.9rem;
  }

#home-looks .home-look-category-card__title {
    display: block;
    color: var(--color-text-inverse);
    font-size: clamp(0.98rem, 1.4vw, 1.15rem);
    font-weight: 800;
    line-height: 1.65;
  }

#home-looks .discovery-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
  }

#home-looks .look-discovery-style-card__media {
    border: 0;
    border-radius: 0.2rem;
    aspect-ratio: 3 / 4;
    background: var(--color-surface-secondary);
  }

#home-looks .discovery-card.is-active {
    border: 0;
    box-shadow: none;
    outline: 1px solid rgba(0, 73, 83, 0.28);
    outline-offset: 4px;
  }

#home-looks .discovery-style-hover {
    background: linear-gradient(180deg, rgba(0, 73, 83, 0) 0%, rgba(0, 73, 83, 0) 70%, rgba(0, 73, 83, 0.52) 100%);
  }

#home-looks .look-discovery-empty {
    border: 1px solid rgba(0, 73, 83, 0.12);
    background: var(--color-surface-primary);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

.home-personalized-note {
    width: 100vw;
    margin: clamp(1.5rem, 4vw, 3rem) auto 0;
    margin-inline: calc(50% - 50vw);
    border-block: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    background:
      radial-gradient(circle at 18% 0%, rgba(181, 150, 88, 0.08), transparent 28rem),
      linear-gradient(180deg, var(--color-bg-canvas-soft), color-mix(in srgb, var(--color-bg-canvas-soft) 80%, var(--color-surface-primary)));
    box-shadow:
      inset 0 1px 0 rgba(255, 253, 248, 0.58),
      0 18px 42px -38px rgba(31, 27, 23, 0.28);
  }

.home-personalized-note__inner {
    display: grid;
    gap: clamp(0.9rem, 2.5vw, 1.8rem);
    width: min(100%, 70rem);
    margin-inline: auto;
    padding: clamp(0.95rem, 2.5vw, 1.65rem);
  }

.home-personalized-note__copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.7rem;
    text-align: right;
  }

.home-personalized-note__copy h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-size: clamp(1.08rem, 1.65vw, 1.48rem);
    font-weight: 650;
    line-height: 1.8;
  }

.home-personalized-note__copy h2::after {
    display: block;
    width: 2.45rem;
    height: 1px;
    margin-top: 0.42rem;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 68%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent)
    );
  }

.home-personalized-note__copy p {
    max-width: 30rem;
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    font-size: 0.88rem;
    line-height: 2.05;
  }

.home-personalized-note__features {
    display: grid;
    gap: 0.65rem;
  }

.home-personalized-note__feature {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    border-radius: var(--radius-site);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(255, 253, 248, 0.4)),
      color-mix(in srgb, var(--color-surface-primary) 58%, transparent);
    padding: 0.85rem;
    box-shadow: var(--shadow-luxury-line);
  }

.home-personalized-note__icon {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 15%, transparent);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--color-cta-primary-bg) 4%, transparent);
    color: var(--color-cta-secondary-text);
  }

.home-personalized-note__feature h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.8;
  }

.home-personalized-note__feature p {
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
    font-size: 0.8rem;
    line-height: 1.9;
  }

@media (max-width: 767px) {
    #home-looks [data-discovery-layout="desktop"] h2,
    #home-looks [data-discovery-layout="mobile"] h2 {
      font-size: clamp(1.18rem, 7vw, 1.72rem);
      line-height: 1.78;
    }

    #home-looks [data-discovery-layout="desktop"] h2::after,
    #home-looks [data-discovery-layout="mobile"] h2::after {
      width: 2.3rem;
      margin-top: 0.42rem;
    }

    .home-personalized-note__copy {
      gap: 0.62rem;
    }

    .home-personalized-note__copy h2 {
      font-size: 1.08rem;
      line-height: 1.82;
    }

    .home-personalized-note__copy h2::after {
      width: 2.15rem;
      margin-top: 0.34rem;
    }

    .home-personalized-note__feature h3 {
      font-size: 0.86rem;
      line-height: 1.75;
    }

  }

.home-product-carousel {
    display: grid;
    gap: clamp(1rem, 2.6vw, 2rem);
    width: min(100%, 72rem);
    margin: clamp(1.6rem, 4vw, 3.25rem) auto 0;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  }

.home-product-carousel__panel {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.85rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 8%, transparent);
    border-radius: var(--radius-site);
    background:
      radial-gradient(circle at 8% 0%, rgba(181, 150, 88, 0.08), transparent 16rem),
      linear-gradient(180deg, rgba(255, 253, 248, 0.62), rgba(248, 240, 229, 0.34)),
      color-mix(in srgb, var(--color-surface-primary) 42%, transparent);
    box-shadow: var(--shadow-luxury-line);
    padding: clamp(0.85rem, 1.8vw, 1.25rem);
    text-align: right;
  }

.home-product-carousel__panel h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: color-mix(in srgb, var(--color-text-strong) 88%, var(--accent-gold));
    font-size: clamp(1.06rem, 1.5vw, 1.36rem);
    font-weight: 650;
    line-height: 1.82;
  }

.home-product-carousel__panel h2::after {
    display: block;
    width: 2.35rem;
    height: 1px;
    margin-top: 0.42rem;
    content: "";
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-gold) 68%, transparent),
      color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent)
    );
  }

.home-product-carousel__panel p {
    max-width: 24rem;
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    font-size: 0.82rem;
    line-height: 1.95;
  }

.home-product-carousel__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.15rem;
  }

.home-product-carousel__button {
    width: 100%;
    justify-content: center;
  }

.home-product-carousel__viewport {
    min-width: 0;
    padding-block: 0.15rem;
  }

@media (max-width: 767px) {
    .home-product-carousel__panel h2::after {
      width: 2.15rem;
      margin-top: 0.34rem;
    }

    .home-product-carousel__panel h2 {
      font-size: 1.04rem;
      line-height: 1.78;
    }

    .home-product-carousel__panel {
      padding: 0.86rem;
    }
  }

@media (min-width: 768px) {
    .home-personalized-note__inner {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
      align-items: center;
    }

    .home-personalized-note__features {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-product-carousel {
      direction: ltr;
      grid-template-columns: minmax(14rem, 0.46fr) minmax(0, 1.54fr);
      align-items: stretch;
    }

    .home-product-carousel__panel {
      direction: rtl;
      grid-column: 1;
      min-height: 100%;
    }

    .home-product-carousel__viewport {
      direction: rtl;
      grid-column: 2;
      grid-row: 1;
      display: flex;
      align-items: stretch;
    }

    .home-product-carousel__viewport [data-carousel-track] {
      flex: 1 1 auto;
    }

    .home-product-carousel .home-product-carousel__viewport [data-carousel-track] > article.product-card-slide {
      width: calc((100% - 2rem) / 3.35);
      flex-basis: calc((100% - 2rem) / 3.35);
    }
  }

@media (min-width: 1024px) {
    .home-product-carousel .home-product-carousel__viewport [data-carousel-track] > article.product-card-slide {
      width: calc((100% - 3.75rem) / 4.35);
      flex-basis: calc((100% - 3.75rem) / 4.35);
    }
  }

@media (max-width: 767px) {
    .site-body.home-page {
      background: var(--color-bg-canvas);
    }

    .site-body.home-page .page-shell {
      padding-bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px));
    }

    #home-looks [data-discovery-layout="mobile"] {
      min-height: calc(100svh - 4.8rem);
      background: var(--color-bg-canvas);
      padding: 1.25rem;
    }

  }

.product-page-shell {
    padding-block: clamp(1rem, 3vw, 3rem);
  }

.product-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: clamp(0.85rem, 1.8vw, 1.5rem);
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    line-height: 1.9;
  }

.product-breadcrumb a {
    color: var(--color-cta-secondary-text);
    text-decoration: none;
  }

.product-breadcrumb a:hover {
    color: var(--color-text-heading);
  }

.product-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 3.5rem);
    align-items: start;
  }

.product-gallery-column {
    min-width: 0;
  }

.product-gallery {
    display: grid;
    gap: 0.75rem;
  }

.product-gallery-main {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, var(--color-surface-primary));
    border-radius: var(--radius-site);
    background:
      linear-gradient(135deg, rgba(255, 253, 248, 0.38), rgba(0, 73, 83, 0.04)),
      var(--surface-sand);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
  }

.product-gallery-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: transparent;
  }

.product-gallery-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.product-gallery-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-disabled-icon);
  }

.product-gallery-thumbs {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.35rem;
    scrollbar-width: none;
  }

.product-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

.product-gallery-thumb {
    width: 4.1rem;
    height: 4.1rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 11%, transparent);
    border-radius: 0.35rem;
    background: var(--color-surface-primary);
    opacity: 0.74;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }

.product-gallery-thumb:hover,
  .product-gallery-thumb.is-active {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    opacity: 1;
    transform: translateY(-1px);
  }

.product-detail-flow {
    display: grid;
    gap: clamp(1.2rem, 2.6vw, 2.25rem);
    min-width: 0;
  }

.product-hero-copy {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
  }

.product-title {
    max-width: 42rem;
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(1.35rem, 2.45vw, 2.2rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
  }

.product-title-en {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: 0.84rem;
    line-height: 1.6;
  }

.product-short-copy {
    max-width: 40rem;
    margin: 0;
    color: color-mix(in srgb, var(--color-text-primary) 70%, transparent);
    font-size: 0.95rem;
    line-height: 2.05;
  }

.product-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    padding-top: 0.35rem;
  }

.product-status-pill,
  .product-meta-chip,
  .product-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 14%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-surface-primary) 74%, transparent);
    padding: 0.3rem 0.75rem;
    color: var(--color-cta-secondary-text);
    font-size: 0.8rem;
    line-height: 1.5;
    text-decoration: none;
  }

.product-meta-chip:hover,
  .product-feature-chip:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 32%, transparent);
    color: var(--color-text-heading);
  }

.product-feature-chip {
    min-height: 1.85rem;
    gap: 0.35rem;
    font-size: 0.76rem;
  }

.product-status-dot {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 9999px;
    background: var(--color-cta-primary-bg);
  }

.product-status-pill--warm {
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
  }

.product-status-dot--warm {
    background: var(--color-warning-text);
  }

/* Admin product editor: when title block gets compact in sticky mode, hide non-essential parts. */

#product-title-block.is-compact .pt-compact-hide {
    display: none;
  }

/* In compact mode, keep only the two title inputs in the lower stack. */

#product-title-block.is-compact .pt-compact-only {
    margin-top: 0.75rem;
    gap: 0.75rem;
  }

#product-title-block.is-compact .pt-compact-only > :not(.pt-compact-keep) {
    display: none;
  }

.product-info-grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.35rem);
    align-items: start;
  }

.product-content-panel,
  .product-purchase-panel,
  .product-reply-panel {
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    border-radius: var(--radius-site);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.74), rgba(255, 253, 248, 0.42)),
      color-mix(in srgb, var(--color-surface-primary) 72%, transparent);
    box-shadow: var(--shadow-luxury-line);
    padding: clamp(1rem, 2vw, 1.25rem);
  }

.product-purchase-panel {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 16%, transparent);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(248, 240, 229, 0.64)),
      var(--color-surface-primary);
    box-shadow: var(--shadow-luxury-line), var(--shadow-soft);
  }

.product-price-label,
  .product-trust-copy {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    line-height: 1.9;
  }

.product-trust-copy {
    display: grid;
    gap: 0.25rem;
    margin-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    padding-top: 0.95rem;
  }

.product-trust-copy p {
    margin: 0;
  }

.product-purchase-panel #product-unit-price {
    color: var(--color-price);
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    font-weight: 800;
    line-height: 1.2;
  }

.product-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 9%, transparent);
    padding-block: 0.72rem;
  }

.product-spec-row:last-child {
    border-bottom: 0;
  }

.product-form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 650;
  }

.product-quantity-input,
  .product-textarea {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--color-cta-primary-bg) 15%, transparent);
    border-radius: 0.35rem;
    background: var(--color-surface-primary);
    color: var(--color-text-strong);
    font-size: 0.92rem;
  }

.product-quantity-input {
    height: 2.85rem;
    padding: 0.65rem 0.9rem;
  }

.product-textarea {
    min-height: 8rem;
    padding: 0.85rem 0.95rem;
    line-height: 1.9;
  }

.product-quantity-input:focus,
  .product-textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-soft);
    outline: none;
  }

.product-mobile-buybar {
    position: fixed;
    inset-inline: 0;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--color-mobile-sticky-border);
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(248, 240, 229, 0.9)),
      var(--color-surface-primary);
    padding: 0.78rem 1rem;
    box-shadow: 0 -18px 48px -36px var(--color-shadow-warm);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

.product-mobile-buybar__price {
    display: grid;
    gap: 0.05rem;
    color: var(--color-price-strong);
    line-height: 1.2;
  }

.product-mobile-buybar__price span {
    font-size: 1.05rem;
    font-weight: 800;
  }

.product-mobile-buybar__price small {
    color: var(--color-text-subtle);
    font-size: 0.72rem;
  }

.product-mobile-buybar__form {
    flex: 0 0 auto;
  }

.product-mobile-buybar__button {
    min-width: 8.75rem;
    box-shadow: none;
  }

.feature-color-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgb(212 212 212);
    border-radius: 9999px;
  }

@media (max-width: 767px) {
    .product-page-shell {
      padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
    }

    .product-breadcrumb {
      margin-bottom: 0.75rem;
      font-size: 0.72rem;
    }

    .product-layout-grid {
      gap: 1.05rem;
    }

    .product-gallery-main {
      margin-inline: calc(var(--page-shell-x, 1rem) * -0.25);
      border-radius: 0.5rem;
    }

    .product-gallery-thumb {
      width: 3.6rem;
      height: 3.6rem;
    }

    .product-content-panel,
    .product-purchase-panel,
    .product-reply-panel {
      padding: 0.95rem;
    }

    .product-info-grid {
      gap: 0.85rem;
    }
  }

@media (min-width: 768px) {
    .product-mobile-buybar {
      display: none;
    }
  }

@media (min-width: 1024px) {
    .product-layout-grid {
      grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
      align-items: start;
    }

    .product-gallery-column {
      position: -webkit-sticky;
      position: sticky;
      top: 6.5rem;
    }

    .product-gallery {
      max-width: min(100%, 38rem);
    }

    .product-info-grid {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.78fr);
    }

    .product-purchase-panel {
      position: -webkit-sticky;
      position: sticky;
      top: 6.5rem;
    }
  }

.scrollbar-hide {
    -ms-overflow-style: none;
  }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-right-1 {
  right: -0.25rem;
}

.-right-2 {
  right: -0.5rem;
}

.-top-1 {
  top: -0.25rem;
}

.-top-12 {
  top: -3rem;
}

.-top-2 {
  top: -0.5rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.end-1 {
  inset-inline-end: 0.25rem;
}

.left-0 {
  left: 0px;
}

.left-2 {
  left: 0.5rem;
}

.right-0 {
  right: 0px;
}

.right-3 {
  right: 0.75rem;
}

.start-1 {
  inset-inline-start: 0.25rem;
}

.start-2 {
  inset-inline-start: 0.5rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mb-5 {
  margin-bottom: -1.25rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.\!block {
  display: block !important;
}

.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;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.max-h-44 {
  max-height: 11rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-\[65vh\] {
  max-height: 65vh;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[88vh\] {
  max-height: 88vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[112px\] {
  min-height: 112px;
}

.min-h-\[180px\] {
  min-height: 180px;
}

.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}

.min-h-\[4\.65rem\] {
  min-height: 4.65rem;
}

.min-h-\[calc\(100svh-4\.25rem\)\] {
  min-height: calc(100svh - 4.25rem);
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-10 {
  min-width: 2.5rem;
}

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[12rem\] {
  min-width: 12rem;
}

.min-w-\[13rem\] {
  min-width: 13rem;
}

.min-w-\[180px\] {
  min-width: 180px;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-max {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.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-\[560px\] {
  max-width: 560px;
}

.max-w-\[980px\] {
  max-width: 980px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.origin-left {
  transform-origin: left;
}

.-translate-x-full {
  --tw-translate-x: -100%;
  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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}

.translate-x-full {
  --tw-translate-x: 100%;
  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));
}

.translate-y-full {
  --tw-translate-y: 100%;
  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));
}

.rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.transform {
  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(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.snap-x {
  -webkit-scroll-snap-type: x var(--tw-scroll-snap-strictness);
          scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-proximity {
  --tw-scroll-snap-strictness: proximity;
}

.snap-start {
  scroll-snap-align: start;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 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-\[auto\2c 1fr\2c auto\] {
  grid-template-columns: auto 1fr auto;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.content-start {
  align-content: flex-start;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-4 {
  column-gap: 1rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-\[var\(--color-border-soft\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border-soft);
}

.divide-\[var\(--color-success-border\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-success-border);
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.overflow-auto {
  overflow: auto;
}

.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;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: var(--radius-site);
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: var(--radius-site);
}

.rounded-b {
  border-bottom-right-radius: var(--radius-site);
  border-bottom-left-radius: var(--radius-site);
}

.rounded-t {
  border-top-left-radius: var(--radius-site);
  border-top-right-radius: var(--radius-site);
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.\!border-\[var\(--color-border-soft\)\] {
  border-color: var(--color-border-soft) !important;
}

.border-\[var\(--color-border-default\)\] {
  border-color: var(--color-border-default);
}

.border-\[var\(--color-border-focus\)\] {
  border-color: var(--color-border-focus);
}

.border-\[var\(--color-border-inverse-soft\)\] {
  border-color: var(--color-border-inverse-soft);
}

.border-\[var\(--color-border-primary-soft\)\] {
  border-color: var(--color-border-primary-soft);
}

.border-\[var\(--color-border-soft\)\] {
  border-color: var(--color-border-soft);
}

.border-\[var\(--color-cta-secondary-border\)\] {
  border-color: var(--color-cta-secondary-border);
}

.border-\[var\(--color-dark-section-bg-soft\)\] {
  border-color: var(--color-dark-section-bg-soft);
}

.border-\[var\(--color-disabled-border\)\] {
  border-color: var(--color-disabled-border);
}

.border-\[var\(--color-discount-bg\)\] {
  border-color: var(--color-discount-bg);
}

.border-\[var\(--color-error-border\)\] {
  border-color: var(--color-error-border);
}

.border-\[var\(--color-gift-bg\)\] {
  border-color: var(--color-gift-bg);
}

.border-\[var\(--color-info-border\)\] {
  border-color: var(--color-info-border);
}

.border-\[var\(--color-routine-bg\)\] {
  border-color: var(--color-routine-bg);
}

.border-\[var\(--color-success-border\)\] {
  border-color: var(--color-success-border);
}

.border-\[var\(--color-warning-border\)\] {
  border-color: var(--color-warning-border);
}

.border-transparent {
  border-color: transparent;
}

.\!bg-\[var\(--color-surface-primary\)\] {
  background-color: var(--color-surface-primary) !important;
}

.bg-\[var\(--color-bg-canvas\)\] {
  background-color: var(--color-bg-canvas);
}

.bg-\[var\(--color-bg-canvas-soft\)\] {
  background-color: var(--color-bg-canvas-soft);
}

.bg-\[var\(--color-cta-premium-bg\)\] {
  background-color: var(--color-cta-premium-bg);
}

.bg-\[var\(--color-cta-primary-bg\)\] {
  background-color: var(--color-cta-primary-bg);
}

.bg-\[var\(--color-cta-secondary-bg\)\] {
  background-color: var(--color-cta-secondary-bg);
}

.bg-\[var\(--color-dark-section-bg\)\] {
  background-color: var(--color-dark-section-bg);
}

.bg-\[var\(--color-dark-section-bg-soft\)\] {
  background-color: var(--color-dark-section-bg-soft);
}

.bg-\[var\(--color-disabled-bg\)\] {
  background-color: var(--color-disabled-bg);
}

.bg-\[var\(--color-discount-bg\)\] {
  background-color: var(--color-discount-bg);
}

.bg-\[var\(--color-error-bg\)\] {
  background-color: var(--color-error-bg);
}

.bg-\[var\(--color-error-text\)\] {
  background-color: var(--color-error-text);
}

.bg-\[var\(--color-gift-bg\)\] {
  background-color: var(--color-gift-bg);
}

.bg-\[var\(--color-glass-ivory\)\] {
  background-color: var(--color-glass-ivory);
}

.bg-\[var\(--color-hover-primary-soft\)\] {
  background-color: var(--color-hover-primary-soft);
}

.bg-\[var\(--color-info-bg\)\] {
  background-color: var(--color-info-bg);
}

.bg-\[var\(--color-info-text\)\] {
  background-color: var(--color-info-text);
}

.bg-\[var\(--color-overlay-soft\)\] {
  background-color: var(--color-overlay-soft);
}

.bg-\[var\(--color-overlay-strong\)\] {
  background-color: var(--color-overlay-strong);
}

.bg-\[var\(--color-routine-bg\)\] {
  background-color: var(--color-routine-bg);
}

.bg-\[var\(--color-success-bg\)\] {
  background-color: var(--color-success-bg);
}

.bg-\[var\(--color-success-text\)\] {
  background-color: var(--color-success-text);
}

.bg-\[var\(--color-surface-inverse-muted\)\] {
  background-color: var(--color-surface-inverse-muted);
}

.bg-\[var\(--color-surface-primary\)\] {
  background-color: var(--color-surface-primary);
}

.bg-\[var\(--color-surface-secondary\)\] {
  background-color: var(--color-surface-secondary);
}

.bg-\[var\(--color-text-primary\)\] {
  background-color: var(--color-text-primary);
}

.bg-\[var\(--color-warning-bg\)\] {
  background-color: var(--color-warning-bg);
}

.bg-\[var\(--color-warning-text\)\] {
  background-color: var(--color-warning-text);
}

.bg-transparent {
  background-color: transparent;
}

.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-\[calc\(1\.25rem\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom,0px));
}

.pl-10 {
  padding-left: 2.5rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.ps-4 {
  -webkit-padding-start: 1rem;
          padding-inline-start: 1rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.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;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[0\.82rem\] {
  font-size: 0.82rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-8 {
  line-height: 2rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[1\.35rem\] {
  line-height: 1.35rem;
}

.leading-\[1\.65\] {
  line-height: 1.65;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}

.tracking-\[0\.45em\] {
  letter-spacing: 0.45em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.36\)\] {
  color: rgba(var(--ink-warm-rgb),0.36);
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.42\)\] {
  color: rgba(var(--ink-warm-rgb),0.42);
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.58\)\] {
  color: rgba(var(--ink-warm-rgb),0.58);
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.62\)\] {
  color: rgba(var(--ink-warm-rgb),0.62);
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.64\)\] {
  color: rgba(var(--ink-warm-rgb),0.64);
}

.text-\[rgba\(var\(--ink-warm-rgb\)\2c 0\.72\)\] {
  color: rgba(var(--ink-warm-rgb),0.72);
}

.text-\[var\(--color-cta-link\)\] {
  color: var(--color-cta-link);
}

.text-\[var\(--color-cta-premium-text\)\] {
  color: var(--color-cta-premium-text);
}

.text-\[var\(--color-cta-secondary-text\)\] {
  color: var(--color-cta-secondary-text);
}

.text-\[var\(--color-dark-section-muted\)\] {
  color: var(--color-dark-section-muted);
}

.text-\[var\(--color-dark-section-text\)\] {
  color: var(--color-dark-section-text);
}

.text-\[var\(--color-disabled-text\)\] {
  color: var(--color-disabled-text);
}

.text-\[var\(--color-discount-text\)\] {
  color: var(--color-discount-text);
}

.text-\[var\(--color-error-text\)\] {
  color: var(--color-error-text);
}

.text-\[var\(--color-gift-text\)\] {
  color: var(--color-gift-text);
}

.text-\[var\(--color-info-text\)\] {
  color: var(--color-info-text);
}

.text-\[var\(--color-price\)\] {
  color: var(--color-price);
}

.text-\[var\(--color-routine-text\)\] {
  color: var(--color-routine-text);
}

.text-\[var\(--color-success-text\)\] {
  color: var(--color-success-text);
}

.text-\[var\(--color-text-disabled\)\] {
  color: var(--color-text-disabled);
}

.text-\[var\(--color-text-heading\)\] {
  color: var(--color-text-heading);
}

.text-\[var\(--color-text-inverse\)\] {
  color: var(--color-text-inverse);
}

.text-\[var\(--color-text-inverse-muted\)\] {
  color: var(--color-text-inverse-muted);
}

.text-\[var\(--color-text-muted\)\] {
  color: var(--color-text-muted);
}

.text-\[var\(--color-text-primary\)\] {
  color: var(--color-text-primary);
}

.text-\[var\(--color-text-strong\)\] {
  color: var(--color-text-strong);
}

.text-\[var\(--color-text-subtle\)\] {
  color: var(--color-text-subtle);
}

.text-\[var\(--color-warning-text\)\] {
  color: var(--color-warning-text);
}

.text-\[var\(--ink-warm\)\] {
  color: var(--ink-warm);
}

.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}

.no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 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);
}

.shadow-\[0_10px_30px_-20px_var\(--color-focus-soft\)\] {
  --tw-shadow: 0 10px 30px -20px var(--color-focus-soft);
  --tw-shadow-colored: 0 10px 30px -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_18px_40px_rgba\(15\2c 23\2c 42\2c 0\.06\)\] {
  --tw-shadow: 0 18px 40px rgba(15,23,42,0.06);
  --tw-shadow-colored: 0 18px 40px 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-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  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 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 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-soft {
  --tw-shadow: var(--shadow-soft);
  --tw-shadow-colored: var(--shadow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.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-\[var\(--color-surface-primary\)\] {
  --tw-ring-color: var(--color-surface-primary);
}

.blur {
  --tw-blur: blur(8px);
  -webkit-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);
          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);
}

.filter {
  -webkit-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);
          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 {
  --tw-backdrop-blur: blur(8px);
  -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, fill, stroke, opacity, box-shadow, transform, -webkit-text-decoration-color, -webkit-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-text-decoration-color, -webkit-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ps-4 {
  -webkit-padding-start: 1rem;
          padding-inline-start: 1rem;
}

[dir="rtl"] .start-1 {
  right: 0.25rem;
}

[dir="rtl"] .end-1 {
  left: 0.25rem;
}

[dir="ltr"] .end-1 {
  right: 0.25rem;
}

[dir="ltr"] .start-1 {
  left: 0.25rem;
}

[dir="rtl"] .start-2 {
  right: 0.5rem;
}

[dir="ltr"] .start-2 {
  left: 0.5rem;
}

*,
  ::before,
  ::after {
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    --tw-drop-shadow: drop-shadow(0 0 0 transparent) !important;
  }

.transition {
    transition-property:
      color, background-color, border-color, fill,
      stroke, opacity, transform, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter !important;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter !important;
    transition-property:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-filter, -webkit-backdrop-filter !important;
  }

kbd {
    box-shadow: none !important;
  }

[data-drag-scroll] {
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: clamp(0.5rem, 2vw, 1rem);
    contain: layout paint;
  }

[data-carousel-track] > article.product-card-slide {
    width: var(--product-card-slide-width, clamp(172px, 58vw, 224px)) !important;
    flex: 0 0 var(--product-card-slide-width, clamp(172px, 58vw, 224px)) !important;
    contain: layout paint;
    scroll-snap-align: start;
  }

@media (min-width: 640px) {
    [data-carousel-track] > article.product-card-slide {
      --product-card-slide-width: calc((100% - 1rem) / 2.35);
    }
  }

@media (min-width: 768px) {
    [data-carousel-track] > article.product-card-slide {
      --product-card-slide-width: calc((100% - 2rem) / 3.35);
    }
  }

@media (min-width: 1024px) {
    [data-carousel-track] > article.product-card-slide {
      --product-card-slide-width: calc((100% - 2.5rem) / 3.35);
    }
  }

@media (min-width: 1280px) {
    [data-carousel-track] > article.product-card-slide {
      --product-card-slide-width: calc((100% - 3.75rem) / 4.35);
    }
  }

[data-drag-scroll].is-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    -webkit-scroll-snap-type: none !important;
            scroll-snap-type: none !important;
  }

[data-drag-scroll].is-scrolling > article.product-card-slide {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

[data-drag-scroll].is-scrolling > article.product-card-slide img {
    transition: none !important;
  }

.text-last-start {
    text-align-last: start;
  }

@media (max-width: 640px) {
    [data-drag-scroll] {
      padding-inline: 0;
      scroll-padding-inline: 0;
    }

    [data-drag-scroll] > article.product-card-slide {
      --product-card-slide-width: clamp(172px, 62vw, 226px);
    }
    body.site-body > footer {
      padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }
  }

.\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}

.\[background-position\:left_0\.75rem_center\] {
  background-position: left 0.75rem center;
}

.group[open] .group-open\:hidden
  .discovery-panel {
    display: none;
  }

.group[open] .group-open\:hidden
  [data-discovery-categories],.group[open] .group-open\:hidden
  [data-discovery-style-heading],.group[open] .group-open\:hidden
  [data-discovery-group],.group[open] .group-open\:hidden
  [data-discovery-items] {
    display: none;
  }

.group[open] .group-open\:hidden.look-style-carousel[data-drag-scroll] {
    display: none;
  }

@media not all and (min-width: 768px) {

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden
  [data-discovery-categories],.max-md\:hidden
  [data-discovery-style-heading],.max-md\:hidden
  [data-discovery-group],.max-md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden
  [data-discovery-categories],.max-md\:hidden
  [data-discovery-style-heading],.max-md\:hidden
  [data-discovery-group],.max-md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden
  [data-discovery-categories],.max-md\:hidden
  [data-discovery-style-heading],.max-md\:hidden
  [data-discovery-group],.max-md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden
  [data-discovery-categories],.max-md\:hidden
  [data-discovery-style-heading],.max-md\:hidden
  [data-discovery-group],.max-md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden
  .discovery-panel {
    display: none;
  }

  .max-md\:hidden
  [data-discovery-categories],.max-md\:hidden
  [data-discovery-style-heading],.max-md\:hidden
  [data-discovery-group],.max-md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .max-md\:hidden.look-style-carousel[data-drag-scroll] {
    display: none;
  }
}

@media (min-width: 640px) {

  .storefront-journal-sidebar-block a.sm\:flex {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

  .storefront-journal-sidebar-block a.sm\:flex:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

  .storefront-journal-sidebar-block a.sm\:flex img {
    border-radius: var(--radius-site);
  }

  .sm\:hidden
  .discovery-panel {
    display: none;
  }

  .sm\:hidden
  [data-discovery-categories],.sm\:hidden
  [data-discovery-style-heading],.sm\:hidden
  [data-discovery-group],.sm\:hidden
  [data-discovery-items] {
    display: none;
  }

  .sm\:hidden.look-style-carousel[data-drag-scroll] {
    display: none;
  }
}

@media (min-width: 768px) {

  .storefront-journal-sidebar-block a.md\:flex {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

  .storefront-journal-sidebar-block a.md\:flex:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

  .storefront-journal-sidebar-block a.md\:flex img {
    border-radius: var(--radius-site);
  }

  .md\:hidden
  .discovery-panel {
    display: none;
  }

  .md\:hidden
  [data-discovery-categories],.md\:hidden
  [data-discovery-style-heading],.md\:hidden
  [data-discovery-group],.md\:hidden
  [data-discovery-items] {
    display: none;
  }

  .md\:hidden.look-style-carousel[data-drag-scroll] {
    display: none;
  }
}

@media (min-width: 1024px) {

  .storefront-journal-sidebar-block a.lg\:flex {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 10%, transparent);
    background: transparent;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }

  .storefront-journal-sidebar-block a.lg\:flex:hover {
    border-color: color-mix(in srgb, var(--color-cta-primary-bg) 20%, transparent);
    background: var(--color-hover-warm);
    transform: translateY(-0.08rem);
  }

  .storefront-journal-sidebar-block a.lg\:flex img {
    border-radius: var(--radius-site);
  }
}

.placeholder\:text-\[var\(--color-text-subtle\)\]::-webkit-input-placeholder {
  color: var(--color-text-subtle);
}

.placeholder\:text-\[var\(--color-text-subtle\)\]::placeholder {
  color: var(--color-text-subtle);
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  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\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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-\[var\(--color-border-default\)\]:hover {
  border-color: var(--color-border-default);
}

.hover\:border-\[var\(--color-border-focus\)\]:hover {
  border-color: var(--color-border-focus);
}

.hover\:border-\[var\(--color-border-primary-soft\)\]:hover {
  border-color: var(--color-border-primary-soft);
}

.hover\:bg-\[var\(--color-active-primary-soft\)\]:hover {
  background-color: var(--color-active-primary-soft);
}

.hover\:bg-\[var\(--color-cta-premium-hover\)\]:hover {
  background-color: var(--color-cta-premium-hover);
}

.hover\:bg-\[var\(--color-cta-primary-hover\)\]:hover {
  background-color: var(--color-cta-primary-hover);
}

.hover\:bg-\[var\(--color-dark-section-bg-soft\)\]:hover {
  background-color: var(--color-dark-section-bg-soft);
}

.hover\:bg-\[var\(--color-error-bg\)\]:hover {
  background-color: var(--color-error-bg);
}

.hover\:bg-\[var\(--color-hover-primary-soft\)\]:hover {
  background-color: var(--color-hover-primary-soft);
}

.hover\:bg-\[var\(--color-hover-warm\)\]:hover {
  background-color: var(--color-hover-warm);
}

.hover\:bg-\[var\(--color-surface-inverse-hover\)\]:hover {
  background-color: var(--color-surface-inverse-hover);
}

.hover\:bg-\[var\(--color-surface-primary\)\]:hover {
  background-color: var(--color-surface-primary);
}

.hover\:bg-\[var\(--color-surface-secondary\)\]:hover {
  background-color: var(--color-surface-secondary);
}

.hover\:text-\[var\(--color-cta-link-hover\)\]:hover {
  color: var(--color-cta-link-hover);
}

.hover\:text-\[var\(--color-cta-secondary-text\)\]:hover {
  color: var(--color-cta-secondary-text);
}

.hover\:text-\[var\(--color-error-text\)\]:hover {
  color: var(--color-error-text);
}

.hover\:text-\[var\(--color-info-text\)\]:hover {
  color: var(--color-info-text);
}

.hover\:text-\[var\(--color-text-heading\)\]:hover {
  color: var(--color-text-heading);
}

.hover\:text-\[var\(--color-text-inverse\)\]:hover {
  color: var(--color-text-inverse);
}

.hover\:text-\[var\(--color-text-muted\)\]:hover {
  color: var(--color-text-muted);
}

.hover\:text-\[var\(--color-text-strong\)\]:hover {
  color: var(--color-text-strong);
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:right-3:focus {
  right: 0.75rem;
}

.focus\:top-3:focus {
  top: 0.75rem;
}

.focus\:border-\[var\(--color-border-focus\)\]:focus {
  border-color: var(--color-border-focus);
}

.focus\:border-\[var\(--color-border-soft\)\]:focus {
  border-color: var(--color-border-soft);
}

.focus\:border-\[var\(--color-error-text\)\]:focus {
  border-color: var(--color-error-text);
}

.focus\:border-\[var\(--color-focus\)\]:focus {
  border-color: var(--color-focus);
}

.focus\:bg-\[var\(--color-surface-primary\)\]:focus {
  background-color: var(--color-surface-primary);
}

.focus\:bg-\[var\(--color-surface-secondary\)\]:focus {
  background-color: var(--color-surface-secondary);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --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(0px + 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\:ring-2:focus {
  --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\:ring-4:focus {
  --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(4px + 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\:ring-\[rgba\(140\2c 47\2c 43\2c 0\.18\)\]:focus {
  --tw-ring-color: rgba(140,47,43,0.18);
}

.focus\:ring-\[var\(--color-focus-soft\)\]:focus {
  --tw-ring-color: var(--color-focus-soft);
}

.focus-visible\:rounded-sm:focus-visible {
  border-radius: var(--radius-site);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --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-visible\:ring-\[var\(--color-focus-ring\)\]:focus-visible {
  --tw-ring-color: var(--color-focus-ring);
}

.focus-visible\:ring-\[var\(--color-focus-soft\)\]:focus-visible {
  --tw-ring-color: var(--color-focus-soft);
}

.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-\[var\(--color-surface-primary\)\]:focus-visible {
  --tw-ring-offset-color: var(--color-surface-primary);
}

.active\:cursor-grabbing:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.active\:bg-\[var\(--color-cta-primary-active\)\]:active {
  background-color: var(--color-cta-primary-active);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:border-\[var\(--color-disabled-border\)\]:disabled {
  border-color: var(--color-disabled-border);
}

.disabled\:bg-\[var\(--color-disabled-bg\)\]:disabled {
  background-color: var(--color-disabled-bg);
}

.disabled\:text-\[var\(--color-disabled-text\)\]:disabled {
  color: var(--color-disabled-text);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group[open] .group-open\:inline {
  display: inline;
}

.group[open] .group-open\:hidden {
  display: none;
}

.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}

.group:hover .group-hover\:text-\[var\(--color-text-heading\)\] {
  color: var(--color-text-heading);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.prose-p\:leading-relaxed :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  line-height: 1.625;
}

.prose-p\:text-\[var\(--color-text-muted\)\] :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: var(--color-text-muted);
}

.prose-a\:text-\[var\(--color-cta-secondary-text\)\] :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: var(--color-cta-secondary-text);
}

.prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

@media not all and (min-width: 768px) {

  .max-md\:hidden {
    display: none;
  }

  .max-md\:min-h-\[calc\(100svh-4\.8rem\)\] {
    min-height: calc(100svh - 4.8rem);
  }
}

@media (min-width: 640px) {

  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .sm\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .sm\:-mx-7 {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
  }

  .sm\:-mb-7 {
    margin-bottom: -1.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-72 {
    height: 18rem;
  }

  .sm\:h-\[168px\] {
    height: 168px;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-52 {
    width: 13rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:-translate-x-full {
    --tw-translate-x: -100%;
    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));
  }

  .sm\:translate-y-0 {
    --tw-translate-y: 0px;
    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));
  }

  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:pb-\[calc\(1\.75rem\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom,0px));
  }

  .sm\:text-center {
    text-align: center;
  }

  .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-\[12px\] {
    font-size: 12px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {

  .md\:sticky {
    position: -webkit-sticky;
    position: sticky;
  }

  .md\:top-24 {
    top: 6rem;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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-\[1\.7fr_1fr\] {
    grid-template-columns: 1.7fr 1fr;
  }

  .md\:grid-cols-\[140px\2c 1fr\] {
    grid-template-columns: 140px 1fr;
  }

  .md\:grid-cols-\[2fr_1fr_auto\] {
    grid-template-columns: 2fr 1fr auto;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {

  .lg\:sticky {
    position: -webkit-sticky;
    position: sticky;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .xl\:w-auto {
    width: auto;
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:items-end {
    align-items: flex-end;
  }

  .xl\:justify-between {
    justify-content: space-between;
  }
}