.catalog-import {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: var(--admin-card, #fff);
}
.catalog-import select,
.catalog-import input,
.catalog-import button {
  padding: 8px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: transparent;
  color: inherit;
}
.catalog-import button {
  background: #111827;
  color: #fff;
}
.catalog-import small {
  margin-left: auto;
  color: #667085;
}
.catalog-list article > form {
  margin: 0;
}
.catalog-list article > form button {
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #a33;
  font-size: 11px;
}
@media (max-width: 700px) {
  .catalog-import {
    align-items: stretch;
    flex-direction: column;
  }
  .catalog-import small {
    margin-left: 0;
  }
}

/* Multi-page admin modules */
.admin-module-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 32px;
  border: 1px solid #dedbd3;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, #f4f8f5 100%);
  box-shadow: 0 16px 45px rgba(34, 34, 28, 0.05);
}
.admin-module-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.admin-module-hero p:last-child {
  max-width: 760px;
  margin: 0;
  color: #6f6c63;
  font-size: 16px;
}
.admin-module-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.admin-module-actions form,
.admin-module-hero > form {
  margin: 0;
}
.admin-module-actions button,
.admin-module-hero > form button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d9d5cc;
  border-radius: 999px;
  background: #fff;
  color: #151512;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.admin-module-actions .admin-primary-btn,
.admin-module-hero > form .admin-primary-btn {
  border-color: #111;
  background: #111;
  color: #fff;
}
.admin-kpi-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-kpi-grid-compact .admin-kpi-card {
  min-height: 138px;
}
.admin-grid-two-balanced {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.admin-module-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e2db;
}
.admin-module-list > div strong {
  max-width: 65%;
  color: #555249;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.admin-step-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.admin-step-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e3e0d8;
  border-radius: 14px;
  background: #faf9f6;
}
.admin-step-list li > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #e6e3dc;
  font-weight: 800;
}
.admin-step-list li.is-complete > span {
  background: #dff3ea;
  color: #087b5c;
}
.admin-step-list strong,
.admin-step-list small {
  display: block;
}
.admin-step-list small {
  margin-top: 2px;
  color: #77736a;
}
[data-admin-theme="dark"] .admin-module-hero {
  border-color: #343b38;
  background: linear-gradient(135deg, #171b19, #1b2521);
}
[data-admin-theme="dark"] .admin-module-hero p:last-child,
[data-admin-theme="dark"] .admin-step-list small {
  color: #a9afa9;
}
[data-admin-theme="dark"] .admin-step-list li {
  border-color: #343b38;
  background: #171b19;
}
[data-admin-theme="dark"] .admin-module-list > div {
  border-color: #343b38;
}
@media (max-width: 1100px) {
  .admin-kpi-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-module-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-module-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .admin-module-hero {
    padding: 24px 20px;
  }
  .admin-module-actions {
    width: 100%;
  }
  .admin-module-actions form {
    flex: 1 1 100%;
  }
  .admin-module-actions button {
    width: 100%;
  }
  .admin-kpi-grid-compact,
  .admin-grid-two-balanced {
    grid-template-columns: 1fr;
  }
}

/* Store header: explicit layout so navigation never depends on utility generation. */
.site-navbar-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
}
.site-navbar-navigation {
  min-width: 0;
}
.site-navbar-logo {
  display: block;
  position: relative;
  z-index: 2;
}
.site-navbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.catalog-main-nav {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.45vw, 25px);
  width: max-content;
  white-space: nowrap;
}
.catalog-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0;
}
.catalog-nav-link,
.catalog-more-trigger {
  color: #111;
  font:
    600 14px/1 "Google Sans",
    var(--font-sans);
  letter-spacing: 0.015em;
}
.catalog-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.catalog-more-trigger svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}
.catalog-more-item.is-open .catalog-more-trigger svg,
.catalog-more-item:hover .catalog-more-trigger svg {
  transform: rotate(180deg);
}
.catalog-department-menu,
.catalog-more-menu {
  position: absolute;
  top: calc(100% - 1px);
  z-index: 90;
  border: 1px solid #e7e5df;
  background: rgba(255, 255, 255, 0.985);
  color: #161616;
  box-shadow: 0 26px 70px rgba(18, 18, 16, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.catalog-department-menu {
  left: -22px;
  width: 440px;
  padding: 22px;
  border-radius: 0 0 14px 14px;
}
.catalog-department-menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #eceae4;
}
.catalog-department-menu header span,
.catalog-more-heading span,
.catalog-more-content section > span {
  color: #7b786f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.catalog-department-menu header a,
.catalog-more-heading > a {
  color: #111;
  font-size: 11px;
  font-weight: 700;
}
.catalog-department-menu > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 18px;
  padding-top: 12px;
}
.catalog-department-menu > div a {
  padding: 8px 4px;
  border-radius: 5px;
  color: #2c2b27;
  font-size: 12px;
  transition:
    padding-left 0.16s ease,
    background 0.16s ease;
}
.catalog-department-menu > div a:hover {
  padding-left: 9px;
  background: #f6f5f1;
}
.catalog-more-menu {
  left: -20px;
  right: auto;
  width: min(740px, calc(100vw - 32px));
  border-radius: 0 0 16px 16px;
}
.catalog-more-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #eceae4;
}
.catalog-more-heading strong {
  display: block;
  margin-top: 5px;
  color: #151514;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.catalog-more-heading span {
  color: #77736a;
  font-size: 10px;
}
.catalog-more-content {
  display: grid;
  grid-template-columns: 0.92fr 1.4fr;
  gap: 28px;
  padding: 22px 24px 25px;
}
.catalog-more-content > nav {
  display: grid;
  align-content: start;
}
.catalog-more-content > nav > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 8px;
  border-bottom: 1px solid #f0eee9;
  color: #181817;
}
.catalog-more-content > nav strong,
.catalog-more-content > nav small {
  display: block;
}
.catalog-more-content > nav strong {
  font-size: 14px;
}
.catalog-more-content > nav small {
  margin-top: 4px;
  color: #77736a;
  font-size: 11px;
}
.catalog-more-content > nav b {
  font-size: 13px;
  transition: transform 0.16s ease;
}
.catalog-more-content > nav a:hover b {
  transform: translateX(4px);
}
.catalog-more-collections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.catalog-more-collections > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px;
  border-radius: 9px;
  background: #f5f4f0;
  color: #191918;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.catalog-more-collections > a:hover {
  background: #eeece6;
  transform: translateY(-1px);
}
.catalog-more-collections img {
  width: 48px;
  height: 44px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
}
.catalog-more-collections strong,
.catalog-more-collections small {
  display: block;
}
.catalog-more-collections strong {
  font-size: 13px;
  line-height: 1.25;
}
.catalog-more-collections small {
  margin-top: 4px;
  color: #77736a;
  font-size: 10px;
}
.catalog-more-menu > footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid #e5e3dc;
  background: #171716;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.catalog-more-menu > footer a {
  color: #fff;
}
.catalog-nav-item:hover .catalog-department-menu,
.catalog-nav-item:focus-within .catalog-department-menu,
.catalog-more-item:hover .catalog-more-menu,
.catalog-more-item:focus-within .catalog-more-menu,
.catalog-more-item.is-open .catalog-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 1180px) {
  .catalog-main-nav {
    gap: 14px;
  }
  .catalog-nav-link,
  .catalog-more-trigger {
    font-size: 13px;
  }
  .catalog-nav-item:nth-last-child(-n + 3) {
    display: flex;
  }
}
@media (max-width: 980px) and (min-width: 768px) {
  .catalog-more-menu {
    left: auto;
    right: -180px;
    width: min(700px, calc(100vw - 24px));
  }
}
@media (min-width: 768px) {
  [data-menu-toggle] {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .site-navbar-row {
    grid-template-columns: 1fr auto 1fr;
  }
  .catalog-main-nav {
    display: none;
  }
  .site-navbar-navigation {
    display: flex;
    align-items: center;
  }
  .site-navbar-actions > a:nth-child(1),
  .site-navbar-actions > a:nth-child(2),
  .site-navbar-actions > a:nth-child(3) {
    display: none;
  }
}
:root {
  --font-sans: "Google Sans", Arial, sans-serif;
  --font-display: "Google Sans", Arial, sans-serif;
  --theme-ink: #050505;
  --theme-muted: #6c6c68;
  --theme-line: #deded8;
  --theme-soft: #f7f7f4;
  --theme-card: #ffffff;
  --theme-success: #1f6b3a;
  --theme-warning: #8a5a10;
  --theme-danger: #9b1c1c;
  --theme-radius: 18px;
  --theme-shadow: 0 24px 80px rgba(0, 0, 0, 0.07);
}

/* One type system across storefront, customer account, checkout, and admin. */
html,
body,
body *,
body *::before,
body *::after {
  font-family: "Google Sans", var(--font-sans) !important;
}

.product-card-title {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

html,
body {
  font-family: var(--font-sans);
  color: var(--theme-ink);
  letter-spacing: 0;
}

h1,
h2,
h3,
.font-serif {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

form label {
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.form-field {
  display: grid;
  gap: 10px;
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body select,
body textarea {
  width: 100%;
  padding: 0 16px;
  color: var(--theme-ink);
  background: #fff;
  border-radius: 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

body textarea {
  min-height: 130px;
  padding-top: 15px;
  resize: vertical;
}

body select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 23px,
    calc(100% - 13px) 23px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

body
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
body select:hover,
body textarea:hover {
  border-color: #aaa9a2;
  background: #fdfdfb;
}

body
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body select:focus,
body textarea:focus {
  border-color: #050505;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 5, 5, 0.08);
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  display: inline-grid;
  place-items: center;
  background: #fff;
  border: 1px solid #aaa9a2;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

input[type="checkbox"] {
  border-radius: 6px;
}

input[type="radio"] {
  border-radius: 999px;
}

input[type="checkbox"]::after,
input[type="radio"]::after {
  content: "";
  transform: scale(0);
  transition: transform 150ms ease;
}

input[type="checkbox"]::after {
  width: 11px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
}

input[type="radio"]::after {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: #050505;
  border-color: #050505;
}

input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

input[type="radio"]:checked::after {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(5, 5, 5, 0.1);
}

.btn-primary,
.btn-secondary,
.inline-admin-form button,
.panel-tools button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.inline-admin-form button:hover,
.panel-tools button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.flash {
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

[data-testid="newsletter-form"] input,
[data-testid="cta-newsletter-form"] input {
  min-height: 0;
  padding: 12px 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-testid="newsletter-form"] input:focus,
[data-testid="cta-newsletter-form"] input:focus {
  box-shadow: none;
}

.footer-newsletter-field {
  min-height: 52px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.footer-newsletter-field:focus-within {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.footer-newsletter-field input {
  min-width: 0;
}

.footer-newsletter-field button {
  flex: 0 0 auto;
  padding-left: 0;
  color: #fff;
}

.contact-page {
  padding: clamp(64px, 9vw, 130px) 0;
  background: linear-gradient(135deg, #f7f7f4, #fff 58%);
}

.contact-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.contact-copy h1 {
  margin-top: 12px;
  font-size: clamp(58px, 8vw, 104px);
  line-height: 0.9;
}

.contact-copy p {
  margin-top: 28px;
  max-width: 470px;
  color: var(--theme-muted);
  font-size: 17px;
  line-height: 1.75;
}

.contact-copy a {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
}

.contact-form {
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--theme-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--theme-shadow);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.contact-form .is-wide {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid var(--theme-line);
}

.contact-form input {
  min-height: 52px;
}

.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.contact-submit {
  min-height: 52px;
  margin-top: 26px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  color: #fff;
  background: #050505;
  font-weight: 700;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.contact-submit:hover {
  transform: translateY(-1px);
  opacity: 0.82;
}

.contact-form.is-loading {
  pointer-events: none;
}

.contact-form.is-loading .contact-submit {
  opacity: 0.6;
  cursor: wait;
}

.contact-form.is-loading [data-contact-submit-label]::after {
  content: "…";
}

@media (max-width: 760px) {
  .contact-shell,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form .is-wide {
    grid-column: auto;
  }

  .footer-newsletter-field {
    padding: 0 13px 0 16px;
  }
}

form[action="/cart/update"] input[type="number"],
.qty-form input[type="number"] {
  width: 78px;
  min-height: 44px;
  text-align: center;
}

.product-option-block {
  display: grid;
  gap: 12px;
}

.product-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.product-option-head small {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.variant-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.variant-choice {
  min-height: 78px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.variant-choice:hover {
  border-color: #aaa9a2;
  transform: translateY(-1px);
}

.variant-choice:has(input:checked) {
  border-color: var(--theme-ink);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
}

.variant-choice span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.variant-choice strong {
  font-size: 13px;
  line-height: 1.25;
}

.variant-choice small {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
}

.qikink-variant-panel {
  grid-column: 1 / -1;
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  background: #fbfbf8;
}

.qikink-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qikink-variant-head strong {
  font-size: 14px;
}

.qikink-variant-head small {
  color: var(--theme-muted);
  font-size: 12px;
}

.qikink-variant-grid {
  display: grid;
  gap: 12px;
}

.qikink-variant-row {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 0.45fr 1fr 0.45fr 1.45fr 0.55fr 0.55fr;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #fff;
}

.qikink-variant-row label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.qikink-variant-row input {
  min-width: 0;
  font-size: 13px;
}

@media (max-width: 900px) {
  .qikink-variant-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Premium collection / shop */
.collection-page {
  --collection-line: #e6e6e1;
  --collection-muted: #73736d;
  width: min(1600px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 110px;
}

.collection-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--collection-muted);
  font-size: 11px;
}
.collection-breadcrumb a:hover {
  color: #050505;
}
.collection-breadcrumb strong {
  color: #050505;
  font-weight: 600;
}

.collection-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 58px 0 48px;
  border-bottom: 1px solid var(--collection-line);
}
.collection-hero > div:first-child > span {
  color: var(--collection-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.collection-hero h1 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(58px, 7vw, 94px);
  font-weight: 600;
  line-height: 0.94;
}
.collection-hero p {
  color: #5e5e59;
  font-size: 15px;
  line-height: 1.6;
}
.collection-hero-count {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-bottom: 4px;
}
.collection-hero-count strong {
  font-family: "Google Sans", var(--font-sans);
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
}
.collection-hero-count span {
  max-width: 70px;
  color: var(--collection-muted);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
}

.collection-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.collection-filters {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 112px);
  padding: 26px 24px 18px;
  overflow: auto;
  background: #fff;
  border-right: 1px solid var(--collection-line);
}
.filter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
.filter-drawer-head > div {
  display: grid;
  gap: 3px;
}
.filter-drawer-head span {
  color: var(--collection-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.filter-drawer-head strong {
  font-family: "Google Sans", var(--font-sans);
  font-size: 22px;
  font-weight: 600;
}
.filter-drawer-head button {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #f4f4f1;
  border-radius: 50%;
  font-size: 22px;
}
.collection-filters form {
  display: block;
}
.collection-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.collection-search > svg {
  position: absolute;
  z-index: 1;
  left: 14px;
  color: #777;
}
body .collection-search input {
  height: 48px;
  padding: 0 40px;
  background: #f7f7f4;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: none;
}
.collection-search input:focus {
  background: #fff;
  border-color: #050505;
}
.collection-search button {
  position: absolute;
  right: 9px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  font-size: 19px;
}
.filter-group {
  border-top: 1px solid var(--collection-line);
}
.filter-group summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Google Sans", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.filter-group summary::-webkit-details-marker {
  display: none;
}
.filter-group summary span {
  font-size: 18px;
  font-weight: 400;
  transition: transform 200ms ease;
}
.filter-group[open] summary span {
  transform: rotate(45deg);
}
.filter-options {
  display: grid;
  gap: 11px;
  padding: 2px 0 18px;
}
.filter-check {
  position: relative;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.filter-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-check i {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid #bdbdb7;
  border-radius: 4px;
}
.filter-check input[type="radio"] + i {
  border-radius: 50%;
}
.filter-check input:checked + i {
  background: #050505;
  border-color: #050505;
  box-shadow: inset 0 0 0 3px #fff;
}
.filter-check span {
  flex: 1;
}
.filter-check small {
  color: #999992;
  font-size: 10px;
  font-weight: 500;
}
.filter-price {
  padding: 1px 0 20px;
}
body .filter-price > input[type="range"] {
  height: 4px;
  min-height: 4px;
  padding: 0;
  accent-color: #050505;
  border: 0;
  box-shadow: none;
}
.filter-price > div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 9px;
  margin-top: 16px;
}
.filter-price label {
  gap: 5px;
  color: var(--collection-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}
body .filter-price label input {
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-color: #d9d9d3;
  border-radius: 9px;
  font-size: 11px;
}
.filter-price > div > span {
  padding-bottom: 11px;
  color: #aaa;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1px 0 19px;
}
.filter-pills label {
  display: block;
}
.filter-pills input {
  position: absolute;
  opacity: 0;
}
.filter-pills span {
  min-width: 43px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #d7d7d1;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.filter-pills input:checked + span {
  color: #fff;
  background: #050505;
  border-color: #050505;
}
.filter-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  padding: 2px 0 20px;
}
.filter-colors label {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  cursor: pointer;
}
.filter-colors input {
  position: absolute;
  opacity: 0;
}
.filter-colors span {
  width: 31px;
  height: 31px;
  display: block;
  padding: 3px;
  background: var(--swatch);
  background-clip: content-box;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.filter-colors input:checked + span {
  border: 2px solid #050505;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}
.filter-colors small {
  max-width: 100%;
  overflow: hidden;
  color: #777;
  font-size: 8px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-drawer-actions {
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 15px 0 18px;
  background: #fff;
}
.filter-drawer-actions a,
.filter-drawer-actions button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.filter-drawer-actions a {
  border: 1px solid #ddd;
}
.filter-drawer-actions button {
  color: #fff;
  background: #050505;
}
.filter-drawer-backdrop {
  display: none;
}

.collection-results {
  min-width: 0;
  transition: opacity 200ms ease;
}
.collection-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}
.collection-results.is-loading::after {
  content: "";
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 35%;
  height: 3px;
  background: #050505;
  animation: collection-loading 900ms ease-in-out infinite alternate;
}
@keyframes collection-loading {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(270%);
  }
}
.collection-toolbar {
  position: sticky;
  z-index: 20;
  top: 80px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--collection-line);
  backdrop-filter: blur(12px);
}
.toolbar-primary,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.toolbar-primary > span {
  color: var(--collection-muted);
  font-size: 11px;
}
.toolbar-primary > span strong {
  color: #050505;
}
.toolbar-filter {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: #f4f4f1;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.toolbar-actions label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--collection-muted);
  font-size: 10px;
  font-weight: 600;
}
body .toolbar-actions select {
  width: auto;
  min-width: 150px;
  min-height: 40px;
  padding: 0 30px 0 12px;
  border-color: #ddd;
  border-radius: 9px;
  font-size: 11px;
}
.density-switch {
  display: flex;
  padding: 3px;
  background: #f3f3f0;
  border-radius: 9px;
}
.density-switch button {
  width: 34px;
  height: 32px;
  padding: 0;
  color: #777;
  background: transparent;
  border-radius: 7px;
  font-size: 10px;
}
.density-switch button.is-active {
  color: #fff;
  background: #050505;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 2px;
}
.active-filters a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: #f3f3f0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}
.active-filters a:hover {
  transform: translateY(-1px);
}
.active-filters a b {
  font-size: 14px;
  font-weight: 400;
}
.active-filters .clear-all {
  color: #666;
  background: transparent;
  text-decoration: underline;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px 18px;
  padding-top: 24px;
}
.collection-grid[data-density="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap-inline: 26px;
}
.collection-grid[data-density="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap-inline: 22px;
}
.collection-grid[data-density="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.collection-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.collection-product-card .product-card-media {
  margin-bottom: 15px;
}
.collection-product-card .product-card-summary {
  transition: transform 250ms ease;
}
.collection-product-card:hover .product-card-summary {
  transform: translateY(-2px);
}
.collection-card-badge {
  padding: 6px 9px;
  color: #fff;
  background: #333;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.collection-card-badge.is-sale {
  color: #fff;
  background: #9b1c1c;
}
.collection-compare {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  backdrop-filter: blur(6px);
}
.collection-product-card:hover .collection-compare,
.collection-compare:has(input:checked) {
  opacity: 1;
  transform: none;
}
.collection-compare input {
  width: 13px;
  min-height: 13px;
  accent-color: #050505;
}
.collection-card-meta {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}
.collection-card-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
}
.collection-card-rating span {
  letter-spacing: 0.06em;
}
.collection-card-rating b {
  color: #777;
  font-weight: 500;
}
.collection-card-colors {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777;
  font-size: 9px;
}
.collection-card-colors i {
  width: 11px;
  height: 11px;
  background: #222;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.collection-card-colors i:nth-of-type(2) {
  background: #eeeae0;
}
.collection-card-colors i:nth-of-type(3) {
  background: #74704d;
}
.collection-card-colors i:nth-of-type(4) {
  background: #777;
}
.collection-card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.collection-card-sizes span {
  min-width: 25px;
  padding: 3px 5px;
  text-align: center;
  background: #f5f5f2;
  border-radius: 4px;
  font-size: 8px;
}
.collection-card-notes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #317a4c;
  font-size: 9px;
}
.collection-card-notes span::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 5px;
  background: currentColor;
  border-radius: 50%;
}
.collection-card-notes span.is-low {
  color: #a76012;
}
.collection-card-notes b {
  color: #777;
  font-weight: 500;
}
.collection-load-more {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 64px auto 0;
}
.collection-load-more > span {
  color: #777;
  font-size: 10px;
}
.collection-load-more i {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: #e1e1dd;
}
.collection-load-more i b {
  height: 100%;
  display: block;
  background: #050505;
}
.collection-load-more a {
  min-width: 170px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #050505;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.collection-empty {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.collection-empty > span {
  color: #e4e4df;
  font-family: var(--font-display);
  font-size: 110px;
  line-height: 0.7;
}
.collection-empty h2 {
  margin-top: 24px;
  font-family: "Google Sans", var(--font-sans);
  font-size: 28px;
}
.collection-empty p {
  margin-top: 8px;
  color: #777;
  font-size: 12px;
}
.collection-empty a {
  margin-top: 22px;
  padding: 13px 20px;
  color: #fff;
  background: #050505;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.collection-mobile-bar {
  display: none;
}
.collection-utilities {
  position: fixed;
  z-index: 30;
  right: 18px;
  bottom: 30px;
  display: grid;
  gap: 8px;
}
.collection-utilities button,
.collection-utilities a {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.1);
  font-size: 15px;
}
.collection-utilities span {
  position: absolute;
  right: 52px;
  padding: 5px 8px;
  color: #fff;
  background: #050505;
  border-radius: 4px;
  font-size: 9px;
  opacity: 0;
  pointer-events: none;
}
.collection-utilities :is(a, button):hover span {
  opacity: 1;
}

@media (min-width: 1500px) {
  .collection-grid[data-density="4"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .collection-page {
    width: min(100% - 32px, 1400px);
  }
  .collection-layout {
    grid-template-columns: 1fr;
  }
  .collection-filters {
    position: fixed;
    z-index: 1001;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(380px, 92vw);
    max-height: none;
    border: 0;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.16);
    visibility: hidden;
    transform: translateX(-105%);
    transition:
      transform 300ms ease,
      visibility 300ms;
  }
  .collection-page.filters-open .collection-filters {
    visibility: visible;
    transform: translateX(0);
  }
  .filter-drawer-head button {
    display: block;
  }
  .filter-drawer-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 300ms ease,
      visibility 300ms;
  }
  .collection-page.filters-open .filter-drawer-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .toolbar-filter {
    display: flex;
  }
  .collection-grid[data-density="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .collection-page {
    width: 100%;
    padding: 18px 16px 96px;
  }
  .collection-hero {
    align-items: start;
    padding: 42px 0 34px;
  }
  .collection-hero h1 {
    font-size: 64px;
  }
  .collection-hero p br {
    display: none;
  }
  .collection-hero-count {
    display: none;
  }
  .collection-toolbar {
    top: 64px;
    min-height: 62px;
  }
  .toolbar-actions label {
    font-size: 0;
  }
  body .toolbar-actions select {
    min-width: 122px;
  }
  .density-switch {
    display: none;
  }
  .collection-grid,
  .collection-grid[data-density="2"],
  .collection-grid[data-density="3"],
  .collection-grid[data-density="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 12px;
    padding-top: 18px;
  }
  .collection-product-card .product-card-actions {
    top: 8px;
    right: 8px;
  }
  .collection-product-card .product-card-action {
    width: 36px;
    height: 36px;
  }
  .collection-card-rating,
  .collection-card-colors,
  .collection-card-sizes {
    display: none;
  }
  .collection-card-notes {
    margin-top: 2px;
  }
  .collection-compare {
    display: none;
  }
  .collection-mobile-bar {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.07);
  }
  .collection-mobile-bar > * {
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border-right: 1px solid #eee;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .collection-utilities {
    bottom: 76px;
  }
}

@media (max-width: 420px) {
  .collection-grid,
  .collection-grid[data-density] {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Collection sizing aligned with the portal container and type scale */
.collection-page {
  width: min(1400px, calc(100% - 64px));
}

.collection-breadcrumb {
  font-size: 13px;
}
.collection-hero > div:first-child > span {
  font-size: 12px;
}
.collection-hero p {
  font-size: 16px;
}
.collection-hero-count span {
  max-width: 82px;
  font-size: 12px;
}
.filter-drawer-head span {
  font-size: 11px;
}
.filter-drawer-head strong {
  font-size: 24px;
}
body .collection-search input {
  font-size: 14px;
}
.filter-group summary {
  font-size: 15px;
}
.filter-check {
  font-size: 14px;
}
.filter-check small {
  font-size: 12px;
}
.filter-price label {
  font-size: 11px;
}
body .filter-price label input {
  font-size: 13px;
}
.filter-pills span {
  min-width: 46px;
  height: 38px;
  font-size: 13px;
}
.filter-colors small {
  font-size: 10px;
}
.filter-drawer-actions a,
.filter-drawer-actions button {
  font-size: 13px;
}
.toolbar-primary > span {
  font-size: 13px;
}
.toolbar-filter {
  font-size: 13px;
}
.toolbar-actions label {
  font-size: 12px;
}
body .toolbar-actions select {
  min-width: 170px;
  font-size: 13px;
}
.density-switch button {
  font-size: 12px;
}
.active-filters a {
  min-height: 34px;
  padding-inline: 13px;
  font-size: 12px;
}
.collection-card-rating,
.collection-card-colors,
.collection-card-notes {
  font-size: 11px;
}
.collection-card-sizes span {
  min-width: 28px;
  font-size: 10px;
}
.collection-load-more > span {
  font-size: 12px;
}
.collection-load-more a {
  font-size: 13px;
}

@media (max-width: 1100px) {
  .collection-page {
    width: min(100% - 40px, 1400px);
  }
}

@media (max-width: 720px) {
  .collection-page {
    width: 100%;
  }
  .toolbar-actions label {
    font-size: 0;
  }
}

@media (max-width: 640px) {
  .variant-choice-grid,
  .qikink-variant-row {
    grid-template-columns: 1fr;
  }
}

.checkout-page {
  padding: clamp(42px, 6vw, 86px) 0 clamp(72px, 9vw, 120px);
  background: linear-gradient(#fff, #fbfbf8);
}

.checkout-shell,
.admin-shell {
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.checkout-head {
  max-width: 760px;
  margin-bottom: 30px;
}

.checkout-head h1,
.admin-hero h1 {
  font-size: clamp(48px, 7vw, 86px);
  line-height: 0.92;
}

.checkout-head p:not(.eyebrow),
.admin-hero p {
  margin-top: 14px;
  max-width: 620px;
  color: var(--theme-muted);
  font-size: 17px;
  line-height: 1.7;
}

.checkout-steps {
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: #fff;
  overflow: hidden;
}

.checkout-steps li {
  min-height: 72px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--theme-line);
  color: var(--theme-muted);
}

.checkout-steps li:last-child {
  border-right: 0;
}

.checkout-steps span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  font-weight: 800;
}

.checkout-steps strong {
  font-size: 13px;
}

.checkout-steps .is-active {
  color: var(--theme-ink);
}

.checkout-steps .is-active span {
  color: #fff;
  background: #050505;
  border-color: #050505;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.checkout-form {
  display: grid;
  gap: 22px;
}

.checkout-step-card,
.summary-card,
.admin-panel,
.metric-card,
.admin-hero-panel {
  background: var(--theme-card);
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.04);
}

.checkout-step-card {
  padding: clamp(22px, 3vw, 34px);
}

.step-card-head {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.step-card-head > span {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #050505;
  font-size: 12px;
  font-weight: 800;
}

.step-card-head h2,
.summary-card h2,
.admin-panel h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
}

.step-card-head p {
  margin: 6px 0 0;
  color: var(--theme-muted);
  font-size: 14px;
}

.premium-form-grid {
  gap: 18px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.choice-card {
  position: relative;
  min-height: 112px;
  padding: 20px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.choice-card:hover {
  border-color: #050505;
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
}

.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card input:checked + .choice-mark {
  border-color: #050505;
  background: #050505;
}

.choice-card input:checked + .choice-mark::after {
  transform: scale(1);
}

.choice-card:has(input:checked) {
  border-color: #050505;
  box-shadow:
    0 0 0 1px #050505,
    0 18px 52px rgba(0, 0, 0, 0.08);
}

.choice-mark {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #aaa9a2;
  border-radius: 999px;
}

.choice-mark::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #fff;
  transform: scale(0);
  transition: transform 150ms ease;
}

.choice-card strong {
  display: block;
  font-size: 15px;
}

.choice-card small {
  display: block;
  margin-top: 5px;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.45;
}

.checkout-submit {
  min-height: 58px;
}

.checkout-summary {
  position: sticky;
  top: 104px;
}

.summary-card {
  padding: 28px;
}

.summary-lines {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.summary-lines div,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.summary-lines span {
  color: var(--theme-muted);
}

.summary-lines small {
  margin-top: 4px;
  display: block;
  color: var(--theme-ink);
  font-size: 12px;
}

.summary-total {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--theme-line);
  font-size: 18px;
}

.admin-dashboard {
  padding: clamp(40px, 6vw, 88px) 0 clamp(76px, 9vw, 120px);
  background: #fff;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: end;
}

.admin-hero-panel {
  padding: 24px;
}

.admin-hero-panel span,
.metric-top span,
.alert-list span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.admin-hero-panel strong {
  display: block;
  margin-top: 18px;
  font-size: 34px;
}

.admin-hero-panel small {
  display: block;
  margin-top: 8px;
  color: var(--theme-muted);
}

.admin-quickbar {
  margin: 28px 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-soft);
}

.admin-quickbar a {
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.admin-quickbar a:hover {
  border-color: #050505;
  transform: translateY(-1px);
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.metric-card {
  padding: 22px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.metric-top i {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.metric-card strong {
  display: block;
  margin-top: 28px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.metric-card p {
  margin: 10px 0 0;
  color: var(--theme-muted);
  font-size: 13px;
}

.mini-chart {
  margin-top: 18px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #ecece7;
}

.mini-chart span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #050505;
}

.admin-panel-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.admin-panel {
  min-width: 0;
  padding: 24px;
}

.admin-panel-wide {
  grid-column: span 1;
}

.panel-head {
  margin-bottom: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.panel-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-tools input {
  width: 220px;
  min-height: 42px;
  border-radius: 999px;
}

.panel-tools button,
.inline-admin-form button {
  min-height: 40px;
  padding: 0 16px;
  color: #050505;
  background: #fff;
  border: 1px solid var(--theme-line);
}

.sku-update-form {
  min-width: 240px;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sku-update-form input {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 13px;
}

.sku-update-form button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.premium-table-wrap {
  overflow-x: auto;
}

.premium-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.premium-table th,
.premium-table td {
  padding: 16px;
  border-bottom: 1px solid var(--theme-line);
  vertical-align: middle;
}

.premium-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #050505;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.premium-table tbody tr {
  transition: background 160ms ease;
}

.premium-table tbody tr:hover {
  background: #fbfbf8;
}

.premium-table small {
  display: block;
  margin-top: 6px;
  color: var(--theme-muted);
}

.table-empty {
  padding: 34px;
  text-align: center;
  color: var(--theme-muted);
  background: var(--theme-soft);
  border-radius: 14px;
}

.status-chip {
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f0f0eb;
  color: #33332f;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.status-chip.is-success {
  background: rgba(31, 107, 58, 0.1);
  color: var(--theme-success);
}

.status-chip.is-warning {
  background: rgba(138, 90, 16, 0.12);
  color: var(--theme-warning);
}

.status-chip.is-danger {
  background: rgba(155, 28, 28, 0.1);
  color: var(--theme-danger);
}

.alert-list {
  display: grid;
  gap: 12px;
}

.admin-note,
.qikink-status-row {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  background: #fbfbf8;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.6;
}

.qikink-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qikink-status-row p {
  margin: 0;
}

.qikink-import-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.qikink-import-form label {
  display: grid;
  gap: 8px;
}

.qikink-import-wide,
.qikink-import-actions {
  grid-column: 1 / -1;
}

.qikink-import-actions {
  display: flex;
  justify-content: flex-end;
}

.qikink-import-actions .btn-primary {
  min-height: 48px;
}

.alert-list div {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  background: #fbfbf8;
}

.alert-list strong {
  font-size: 20px;
}

.product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-cell img {
  width: 48px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--theme-soft);
}

@media (max-width: 1120px) {
  .checkout-grid,
  .admin-hero,
  .admin-panel-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
  }

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

@media (max-width: 720px) {
  .checkout-steps,
  .choice-grid,
  .premium-form-grid,
  .admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .checkout-steps li {
    border-right: 0;
    border-bottom: 1px solid var(--theme-line);
  }

  .checkout-steps li:last-child {
    border-bottom: 0;
  }

  .panel-head,
  .panel-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-tools input,
  .panel-tools button {
    width: 100%;
  }

  .admin-quickbar {
    border-radius: 18px;
  }

  .qikink-import-form {
    grid-template-columns: 1fr;
  }

  .qikink-status-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .qikink-import-actions {
    justify-content: stretch;
  }

  .qikink-import-actions .btn-primary {
    width: 100%;
  }
}

.legal-link,
.legal-note a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  transition:
    opacity 180ms ease,
    border-color 180ms ease;
}

.legal-link:hover,
.legal-note a:hover {
  opacity: 0.72;
  border-color: transparent;
}

.legal-note {
  margin: 16px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.7;
}

/* Google Identity Services keeps the account button inside a secure iframe. */
.google-login-wrap {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.google-login-button {
  position: relative;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.google-login-button:not(.is-ready)::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #d9dce1;
  border-radius: 4px;
  background: linear-gradient(90deg, #fafafa 25%, #f1f1f1 50%, #fafafa 75%);
  background-size: 200% 100%;
  animation: google-login-shimmer 1.1s linear infinite;
}

.google-login-button.is-loading {
  opacity: 0.58;
  filter: grayscale(0.2);
  pointer-events: none;
}

.google-login-status {
  min-height: 0;
  margin: 0;
  color: #5f6368;
  font-family: "Google Sans", var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
}

.google-login-status:not(:empty) {
  margin-top: 8px;
}

.google-login-status.is-error {
  color: #b3261e;
}

@keyframes google-login-shimmer {
  to {
    background-position: -200% 0;
  }
}

.checkout-legal {
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  background: #fbfbf8;
}

.account-center {
  padding: clamp(34px, 6vw, 82px) 0 clamp(80px, 9vw, 128px);
  background: linear-gradient(180deg, #fff 0%, #fbfbf8 100%);
}

.account-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

.account-hero-card {
  min-height: 220px;
  padding: clamp(24px, 4vw, 44px);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--theme-shadow);
}

.account-avatar {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 40px;
  font-weight: 900;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-hero-copy h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.92;
}

.profile-meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.profile-meta > span:not(.status-chip) {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: var(--theme-muted);
  background: #fbfbf8;
  font-size: 13px;
}

.account-hero-actions {
  display: grid;
  gap: 10px;
}

.account-layout-premium {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.account-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.04);
}

.account-sidebar a,
.account-sidebar button,
.account-mobile-menu a,
.account-mobile-menu button {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  color: #222;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.account-menu-form {
  margin: 0;
}

.account-menu-form button {
  cursor: pointer;
}

.account-sidebar a:hover,
.account-sidebar button:hover,
.account-sidebar a.is-active,
.account-mobile-menu a:hover,
.account-mobile-menu button:hover {
  background: #050505;
  color: #fff;
  transform: translateX(2px);
}

.account-sidebar span,
.account-mobile-menu span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f0f0eb;
  color: #050505;
  font-size: 10px;
  font-weight: 900;
}

.account-sidebar a:hover span,
.account-sidebar button:hover span,
.account-sidebar a.is-active span {
  background: #fff;
}

.account-mobile-menu {
  display: none;
  margin-top: 18px;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  background: #fff;
}

.account-mobile-menu summary {
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 800;
}

.account-mobile-menu > div {
  padding: 0 10px 10px;
}

.account-content {
  min-width: 0;
}

.account-section {
  display: none;
  animation: accountFade 220ms ease;
}

.account-section.is-active {
  display: block;
}

@keyframes accountFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  margin-bottom: 20px;
}

.section-title h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
}

.section-title.with-tools,
.panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.section-title.with-tools input {
  width: min(320px, 100%);
  border-radius: 999px;
}

.account-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.account-metric-grid article,
.account-panel,
.premium-order-card,
.address-card,
.wishlist-card,
.payment-card,
.coupon-grid article,
.recent-grid article,
.support-grid article,
.return-card,
.wallet-card,
.refer-card {
  border: 1px solid var(--theme-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.04);
}

.account-metric-grid article {
  padding: 22px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.account-metric-grid article:hover,
.premium-order-card:hover,
.wishlist-card:hover,
.address-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow);
}

.account-metric-grid span,
.payment-card span,
.coupon-grid span,
.wallet-card span,
.refer-card span,
.order-card-top span,
.order-detail-grid span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.account-metric-grid strong {
  display: block;
  margin-top: 18px;
  font-size: 38px;
}

.account-panel {
  margin-top: 18px;
  padding: 24px;
}

.activity-timeline {
  display: grid;
  gap: 14px;
}

.activity-timeline article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
}

.activity-timeline article > span {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 999px;
  background: #050505;
  box-shadow: 0 0 0 5px #f0f0eb;
}

.activity-timeline small,
.order-product-preview small {
  display: block;
  margin-top: 5px;
  color: var(--theme-muted);
}

.order-filter-row {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order-filter-row button,
.order-actions a,
.order-actions button,
.wishlist-actions button,
.card-actions button,
.payment-card button,
.refer-card button,
.recent-grid button {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: #fff;
  color: #050505;
  font-size: 12px;
  font-weight: 800;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.order-filter-row button:hover,
.order-filter-row button.is-active,
.order-actions a:hover,
.order-actions button:hover,
.wishlist-actions button:hover,
.card-actions button:hover,
.payment-card button:hover,
.refer-card button:hover,
.recent-grid button:hover {
  background: #050505;
  color: #fff;
  transform: translateY(-1px);
}

.order-card-list,
.address-grid,
.payment-grid,
.coupon-grid,
.support-grid,
.tracking-grid {
  display: grid;
  gap: 16px;
}

.premium-order-card {
  padding: 20px;
}

.order-card-top,
.order-card-body,
.order-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.order-card-body {
  margin: 20px 0;
}

.order-product-preview {
  display: flex;
  gap: 14px;
  align-items: center;
}

.order-thumb {
  width: 74px;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #f0f0eb;
  font-weight: 900;
}

.order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.wishlist-grid-premium,
.recent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wishlist-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
}

.wishlist-card > img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  background: #f0f0eb;
}

.wishlist-card > div {
  padding: 20px;
}

.wishlist-card h3,
.recent-grid h3 {
  margin: 14px 0 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 850;
}

.wishlist-actions,
.card-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.address-grid,
.payment-grid,
.coupon-grid,
.support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.address-card,
.payment-card,
.coupon-grid article,
.support-grid article,
.return-card,
.wallet-card,
.refer-card {
  padding: 22px;
}

.address-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.address-card p,
.payment-card p,
.coupon-grid p,
.support-grid p,
.return-card p,
.wallet-card p,
.refer-card p {
  margin: 14px 0 0;
  color: var(--theme-muted);
}

.tracking-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tracking-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}

.tracking-steps span {
  height: 5px;
  border-radius: 999px;
  background: #e6e6df;
}

.tracking-steps span.is-done {
  background: #050505;
}

.toggle-list {
  display: grid;
  gap: 12px;
}

.toggle-list label {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  background: #fff;
}

.toggle-list input {
  position: absolute;
  opacity: 0;
}

.toggle-list i {
  width: 52px;
  height: 30px;
  padding: 3px;
  border-radius: 999px;
  background: #d9d9d2;
  transition: background 180ms ease;
}

.toggle-list i::after {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 999px;
  background: #fff;
  transition: transform 180ms ease;
}

.toggle-list input:checked + i {
  background: #050505;
}

.toggle-list input:checked + i::after {
  transform: translateX(22px);
}

.masked-card {
  margin-top: 18px;
  padding: 20px;
  border-radius: 18px;
  background: #050505;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.masked-card span {
  float: right;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.recent-grid article {
  overflow: hidden;
  padding-bottom: 18px;
}

.recent-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #f0f0eb;
}

.recent-grid h3,
.recent-grid p,
.recent-grid form {
  margin-left: 18px;
  margin-right: 18px;
}

.wallet-card strong,
.refer-card strong,
.coupon-grid strong {
  display: block;
  margin-top: 12px;
  font-size: 32px;
}

.empty-luxury {
  padding: 28px;
  border: 1px dashed #cfcfc8;
  border-radius: 18px;
  background: #fbfbf8;
  color: var(--theme-muted);
  text-align: center;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(12px);
}

.account-modal.is-open {
  display: flex;
}

.modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.24);
}

.modal-wide {
  width: min(920px, 100%);
}

.modal-panel h2 {
  margin-bottom: 20px;
  font-size: clamp(30px, 5vw, 48px);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: #fff;
  font-size: 24px;
  line-height: 1;
}

.modal-form,
.modal-actions {
  display: grid;
  gap: 16px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.modal-wide-field {
  grid-column: 1 / -1;
}

.account-check-row {
  display: flex;
  align-items: center;
}

.password-meter {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e6df;
}

.password-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #050505;
  transition:
    width 180ms ease,
    background 180ms ease;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.order-detail-grid article {
  padding: 16px;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  background: #fbfbf8;
}

@media (max-width: 1120px) {
  .account-hero-card,
  .account-layout-premium {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    display: none;
  }

  .account-mobile-menu {
    display: block;
  }

  .account-hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .tracking-grid,
  .account-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .account-hero-card {
    text-align: center;
    justify-items: center;
  }

  .profile-meta,
  .account-hero-actions,
  .order-card-top,
  .order-card-body,
  .section-title.with-tools,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .account-metric-grid,
  .wishlist-grid-premium,
  .address-grid,
  .payment-grid,
  .coupon-grid,
  .support-grid,
  .tracking-grid,
  .recent-grid,
  .order-detail-grid,
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .wishlist-card {
    grid-template-columns: 1fr;
  }

  .wishlist-card > img {
    min-height: 260px;
    max-height: 340px;
  }

  .section-title.with-tools input,
  .section-title.with-tools button {
    width: 100%;
  }
}

.account-sidebar a strong,
.account-sidebar button strong,
.account-mobile-menu a strong,
.account-mobile-menu button strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.account-sidebar a small,
.account-mobile-menu a small {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0f0eb;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-sidebar a:hover small,
.account-sidebar a.is-active small,
.account-mobile-menu a:hover small,
.account-mobile-menu a.is-active small {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.account-mobile-menu a.is-active {
  background: #050505;
  color: #fff;
  transform: translateX(2px);
}

.account-mobile-menu a.is-active span {
  background: #fff;
  color: #050505;
}

.account-sidebar svg,
.account-mobile-menu svg {
  flex: 0 0 auto;
}

.account-toast {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 260;
  max-width: min(340px, calc(100vw - 32px));
  padding: 14px 18px;
  color: #fff;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.account-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1121px) {
  .account-hero-card {
    min-height: 176px;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 30px;
    border-radius: 20px;
  }

  .account-avatar {
    width: 88px;
    height: 88px;
    font-size: 34px;
  }

  .account-hero-copy h1 {
    font-size: clamp(38px, 4.6vw, 62px);
  }

  .account-layout-premium {
    grid-template-columns: 282px minmax(0, 1fr);
    gap: 20px;
  }

  .account-sidebar {
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  .account-center {
    padding: 14px 0 92px;
  }

  .account-shell {
    width: min(100% - 24px, 520px);
  }

  .account-hero-card {
    min-height: 0;
    padding: 16px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    justify-items: stretch;
    text-align: left;
    border-radius: 18px;
  }

  .account-avatar {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }

  .account-hero-copy h1 {
    font-size: 28px;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .profile-meta {
    margin-top: 10px;
    gap: 6px;
  }

  .profile-meta > span:not(.status-chip) {
    min-height: 28px;
    max-width: 100%;
    padding: 0 9px;
    font-size: 11px;
  }

  .account-hero-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .account-hero-actions .btn-primary,
  .account-hero-actions .btn-secondary {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .account-mobile-menu {
    margin-top: 12px;
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.05);
  }

  .account-mobile-menu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    list-style: none;
  }

  .account-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .account-mobile-menu summary::after {
    content: "Open";
    padding: 4px 9px;
    border-radius: 999px;
    background: #050505;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .account-mobile-menu[open] summary::after {
    content: "Open";
  }

  .account-mobile-menu > div {
    max-height: 390px;
    overflow: auto;
    display: grid;
    gap: 6px;
    padding: 0 10px 10px;
  }

  .account-sidebar a,
  .account-sidebar button,
  .account-mobile-menu a,
  .account-mobile-menu button {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .account-sidebar span,
  .account-mobile-menu span {
    width: 30px;
    height: 30px;
  }

  .account-layout-premium {
    margin-top: 14px;
  }

  .section-title {
    margin-bottom: 14px;
  }

  .section-title h2 {
    font-size: 30px;
    line-height: 1.04;
  }

  .account-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .account-metric-grid article {
    min-height: 94px;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.04);
  }

  .account-metric-grid span {
    font-size: 9px;
    letter-spacing: 0.14em;
    line-height: 1.35;
  }

  .account-metric-grid strong {
    margin-top: 12px;
    font-size: 30px;
    line-height: 1;
  }

  .account-panel,
  .premium-order-card,
  .address-card,
  .payment-card,
  .coupon-grid article,
  .support-grid article,
  .return-card,
  .wallet-card,
  .refer-card {
    padding: 16px;
    border-radius: 16px;
  }

  .empty-luxury {
    padding: 18px;
    border-radius: 14px;
    font-size: 13px;
  }

  .account-toast {
    right: 12px;
    bottom: 88px;
    left: 12px;
    max-width: none;
    text-align: center;
  }
}

.legal-page {
  background: #f8f8f4;
  color: #050505;
}

.legal-hero {
  max-width: 980px;
  margin: 0 auto;
  padding: 96px 24px 54px;
  text-align: center;
}

.legal-eyebrow,
.legal-updated {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.48);
}

.legal-hero h1 {
  margin: 16px 0 18px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 500;
  line-height: 0.95;
}

.legal-hero p {
  max-width: 720px;
  margin: 0 auto 24px;
  color: rgba(5, 5, 5, 0.62);
  font-size: 18px;
  line-height: 1.75;
}

.legal-shell {
  display: grid;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.legal-card {
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 18px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 18px 44px rgba(5, 5, 5, 0.04);
}

.legal-card h2 {
  margin: 0 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.12;
}

.legal-card p,
.legal-card li {
  color: rgba(5, 5, 5, 0.66);
  font-size: 16px;
  line-height: 1.75;
}

.legal-card p + p {
  margin-top: 12px;
}

.legal-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 760px) {
  .legal-hero {
    padding: 70px 18px 38px;
    text-align: left;
  }

  .legal-hero p {
    font-size: 16px;
  }

  .legal-shell {
    padding: 0 18px 64px;
  }

  .legal-card {
    border-radius: 14px;
    padding: 22px;
  }
}

/* Premium Ecommerce Admin Portal */
body.admin-body {
  margin: 0;
  min-width: 320px;
  --admin-bg: #f6f5f1;
  --admin-surface: #ffffff;
  --admin-surface-2: #fbfaf7;
  --admin-ink: #111111;
  --admin-muted: #6f716b;
  --admin-line: #dedbd2;
  --admin-accent: #0f8b6d;
  --admin-accent-2: #bd6b21;
  --admin-danger: #a6343b;
  --admin-warning: #a36a11;
  --admin-info: #3867a6;
  --admin-shadow: 0 24px 70px rgba(17, 17, 17, 0.08);
  color: var(--admin-ink);
  background: var(--admin-bg);
  font-family: var(--font-sans);
}

body.admin-body[data-admin-theme="dark"] {
  --admin-bg: #151511;
  --admin-surface: #1d1c18;
  --admin-surface-2: #24231f;
  --admin-ink: #f5f1e8;
  --admin-muted: #aca69a;
  --admin-line: #38362f;
  --admin-accent: #51c7a5;
  --admin-accent-2: #d99a57;
  --admin-danger: #e06d76;
  --admin-warning: #e3b35c;
  --admin-info: #82a7df;
  --admin-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.admin-portal {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 80;
  height: 100vh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  color: var(--admin-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
    var(--admin-surface);
  border-right: 1px solid var(--admin-line);
}

[data-admin-theme="dark"] .admin-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    var(--admin-surface);
}

.admin-sidebar-brand {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-sidebar-brand img {
  width: 150px;
  height: 52px;
  object-fit: contain;
}

.admin-sidebar-brand button,
.admin-icon-btn,
.admin-user-menu,
.admin-topbar-pill {
  border: 1px solid var(--admin-line);
  color: var(--admin-ink);
  background: var(--admin-surface);
}

.admin-sidebar-brand button,
.admin-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
}

.admin-sidebar-brand button {
  display: none;
}

.admin-nav {
  display: grid;
  gap: 18px;
}

.admin-nav section {
  display: grid;
  gap: 7px;
}

.admin-nav section > span {
  padding: 0 12px;
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.admin-nav a {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 750;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.admin-nav a:hover,
.admin-nav a.is-active {
  color: var(--admin-ink);
  background: var(--admin-surface-2);
  transform: translateX(2px);
}

.admin-nav a.is-active {
  box-shadow: inset 3px 0 0 var(--admin-accent);
}

.admin-sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

.admin-sidebar-footer > div {
  padding: 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: var(--admin-surface-2);
}

.admin-sidebar-footer span,
.admin-person-cell > span,
.admin-customer-list > div > span,
.admin-user-menu > span {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #111 0%, #58544d 100%);
  font-weight: 800;
}

.admin-sidebar-footer strong,
.admin-sidebar-footer small {
  display: block;
}

.admin-sidebar-footer small {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-sidebar-footer form button {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  font-weight: 800;
}

.admin-main {
  min-width: 0;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 78px;
  padding: 14px clamp(18px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: color-mix(in srgb, var(--admin-bg) 86%, transparent);
  border-bottom: 1px solid var(--admin-line);
  backdrop-filter: blur(18px);
}

.admin-topbar-left,
.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-topbar-actions {
  position: relative;
}

.admin-global-search {
  width: min(440px, 42vw);
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: var(--admin-surface);
}

.admin-global-search input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-topbar-pill,
.admin-user-menu {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  font-weight: 800;
}

.admin-country {
  min-height: 42px;
  padding: 0 12px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  font-size: 12px;
  font-weight: 800;
}

.admin-country > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 10px;
}

.admin-global-search kbd,
.admin-command kbd {
  padding: 3px 7px;
  border: 1px solid var(--admin-line);
  border-radius: 7px;
  color: var(--admin-muted);
  background: var(--admin-surface-2);
  font: 700 10px/1.4 var(--font-sans);
  white-space: nowrap;
}

.admin-user-menu {
  padding-left: 4px;
}

.admin-has-dot {
  position: relative;
}

.admin-has-dot::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--admin-danger);
}

.admin-flyout {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  display: none;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.admin-flyout.is-open {
  display: grid;
  gap: 4px;
}

.admin-flyout a,
.admin-flyout button {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--admin-ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.admin-flyout a:hover,
.admin-flyout button:hover {
  background: var(--admin-surface-2);
}

.admin-notifications {
  min-width: 330px;
  padding: 10px;
}

.admin-notifications header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--admin-line);
}

.admin-notifications header span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--admin-accent);
  background: var(--admin-surface-2);
  font-size: 10px;
  font-weight: 800;
}

.admin-notifications a {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 11px;
  padding: 12px 10px;
  height: auto;
}

.admin-notifications a > i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--admin-accent);
}

.admin-notifications a > i.is-warning {
  background: var(--admin-warning);
}

.admin-notifications a > i.is-danger {
  background: var(--admin-danger);
}

.admin-notifications b,
.admin-notifications small {
  display: block;
}

.admin-notifications small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-weight: 500;
}

.admin-command {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: 10vh 18px;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(10, 10, 10, 0.48);
  backdrop-filter: blur(8px);
}

.admin-command.is-open {
  display: flex;
  animation: adminFade 0.16s ease-out;
}

.admin-command-dialog {
  width: min(680px, 100%);
  max-height: 76vh;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 22px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.3);
}

.admin-command-dialog header {
  min-height: 64px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-command-dialog input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}

.admin-command-dialog > small {
  display: block;
  padding: 16px 18px 7px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.admin-command-dialog nav {
  max-height: 52vh;
  padding: 5px 10px 12px;
  display: grid;
  gap: 3px;
  overflow: auto;
}

.admin-command-dialog nav a {
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  color: var(--admin-ink);
  font-size: 13px;
  font-weight: 750;
}

.admin-command-dialog nav a:hover {
  background: var(--admin-surface-2);
}

.admin-command-dialog nav a span {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-command-empty {
  padding: 28px;
  color: var(--admin-muted);
  text-align: center;
}

@keyframes adminFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.admin-page {
  padding: clamp(20px, 3vw, 34px);
}

.admin-workspace {
  display: grid;
  gap: 22px;
}

.admin-breadcrumb-row,
.admin-action-strip,
.admin-card,
.admin-kpi-card,
.admin-health-card {
  border: 1px solid var(--admin-line);
  background: var(--admin-surface);
  box-shadow: 0 16px 44px rgba(17, 17, 17, 0.04);
}

[data-admin-theme="dark"] .admin-breadcrumb-row,
[data-admin-theme="dark"] .admin-action-strip,
[data-admin-theme="dark"] .admin-card,
[data-admin-theme="dark"] .admin-kpi-card,
[data-admin-theme="dark"] .admin-health-card {
  box-shadow: none;
}

.admin-breadcrumb-row {
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-breadcrumb-row div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-breadcrumb-row strong,
.admin-date-chip {
  color: var(--admin-ink);
}

.admin-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
}

.admin-command-hero h1 {
  max-width: 850px;
  font-family: var(--font-sans);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 850;
  line-height: 0.98;
}

.admin-command-hero p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 14px;
  color: var(--admin-muted);
  font-size: 16px;
}

.admin-health-card {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(15, 139, 109, 0.1), rgba(189, 107, 33, 0.08)),
    var(--admin-surface);
}

.admin-health-card span,
.admin-kpi-card span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-health-card strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.admin-health-card small,
.admin-kpi-card small,
.admin-data-table small {
  color: var(--admin-muted);
}

.admin-health-ring {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--admin-ink);
  background:
    radial-gradient(
      circle at center,
      var(--admin-surface) 58%,
      transparent 59%
    ),
    conic-gradient(var(--admin-accent) 0 80%, var(--admin-line) 80% 100%);
  font-weight: 900;
}

.admin-health-ring.is-warning {
  background:
    radial-gradient(
      circle at center,
      var(--admin-surface) 58%,
      transparent 59%
    ),
    conic-gradient(var(--admin-warning) 0 72%, var(--admin-line) 72% 100%);
}

.admin-action-strip {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 999px;
}

.admin-action-strip a {
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--admin-ink);
  background: var(--admin-surface-2);
  font-size: 13px;
  font-weight: 800;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.admin-kpi-card {
  min-width: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  border-radius: 22px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.admin-kpi-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--admin-accent) 45%, var(--admin-line));
  box-shadow: var(--admin-shadow);
}

.admin-kpi-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--admin-accent);
  background: color-mix(in srgb, var(--admin-accent) 12%, var(--admin-surface));
}

.admin-kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-weight: 900;
}

.admin-kpi-card small b {
  color: var(--admin-accent);
}

.admin-mini-spark {
  grid-column: 1 / -1;
  height: 28px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.admin-mini-spark i {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--admin-accent) 52%, var(--admin-line));
}

.admin-mini-spark i:nth-child(1) {
  height: 42%;
}

.admin-mini-spark i:nth-child(2) {
  height: 64%;
}

.admin-mini-spark i:nth-child(3) {
  height: 48%;
}

.admin-mini-spark i:nth-child(4) {
  height: 82%;
}

.admin-mini-spark i:nth-child(5) {
  height: 68%;
}

.admin-analytics-grid,
.admin-grid-two,
.admin-grid-three {
  display: grid;
  gap: 18px;
  align-items: start;
}

.admin-analytics-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr) minmax(
      260px,
      0.7fr
    );
}

.admin-grid-two {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.8fr);
}

.admin-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-card {
  min-width: 0;
  padding: 22px;
  border-radius: 24px;
}

.admin-card-xl {
  min-height: 340px;
}

.admin-card-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-card h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 850;
  line-height: 1.08;
}

.admin-card-head button,
.admin-row-action button,
.admin-primary-btn,
.admin-filter-pills button,
.admin-sku-form button {
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  font-size: 13px;
  font-weight: 850;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.admin-card-head button:hover,
.admin-row-action button:hover,
.admin-primary-btn:hover,
.admin-filter-pills button:hover,
.admin-sku-form button:hover {
  transform: translateY(-1px);
  border-color: var(--admin-ink);
}

.admin-primary-btn {
  width: 100%;
  min-height: 48px;
  color: #fff;
  background: #111;
  border-color: #111;
}

.admin-chart-bars {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.admin-chart-bars div {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 8px;
  text-align: center;
}

.admin-chart-bars span {
  align-self: end;
  min-height: 10px;
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--admin-accent) 78%, #fff),
    color-mix(in srgb, var(--admin-accent-2) 66%, #fff)
  );
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.08);
}

.admin-chart-bars strong,
.admin-chart-bars small {
  font-size: 12px;
}

.admin-chart-bars small {
  color: var(--admin-muted);
}

.admin-progress-list,
.admin-status-list,
.admin-customer-list,
.admin-remote-orders,
.admin-module-list {
  display: grid;
  gap: 12px;
}

.admin-progress-list > div {
  display: grid;
  gap: 8px;
}

.admin-progress-list div div,
.admin-status-list > div,
.admin-remote-orders > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-progress-list i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-surface-2);
}

.admin-progress-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--admin-accent);
}

.admin-card-table {
  padding: 0;
  overflow: hidden;
}

.admin-card-table > .admin-card-head,
.admin-card-table > .admin-note {
  margin: 0;
  padding: 22px;
}

.admin-card-table > .admin-note {
  border-top: 1px solid var(--admin-line);
}

.admin-table-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-table-tools label,
.admin-table-search {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: var(--admin-surface-2);
}

.admin-table-tools input,
.admin-table-search input {
  width: 180px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-filter-pills button.is-active {
  color: #fff;
  background: #111;
  border-color: #111;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-data-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.admin-data-table th,
.admin-data-table td {
  padding: 16px 20px;
  border-top: 1px solid var(--admin-line);
  text-align: left;
  vertical-align: middle;
}

.admin-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--admin-muted);
  background: var(--admin-surface-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-data-table th {
  min-width: 90px;
}

.admin-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
}

.admin-resize-handle:hover::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 3px;
  width: 1px;
  background: var(--admin-accent);
}

.admin-data-table td {
  font-size: 14px;
}

.admin-data-table td > small {
  display: block;
  max-width: 260px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-person-cell,
.admin-product-cell,
.admin-customer-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-person-cell strong,
.admin-person-cell small,
.admin-product-cell strong,
.admin-product-cell small {
  display: block;
}

.admin-product-cell img {
  width: 48px;
  height: 58px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--admin-surface-2);
}

.admin-shopify-cell {
  min-width: 220px;
}

.admin-shopify-cell small {
  display: block;
  margin-top: 5px;
}

.status-chip {
  border-radius: 999px;
}

.status-chip.is-success {
  color: #1f6b3a;
  background: rgba(31, 107, 58, 0.1);
}

.status-chip.is-warning {
  color: var(--admin-warning);
  background: color-mix(in srgb, var(--admin-warning) 13%, transparent);
}

.status-chip.is-danger {
  color: var(--admin-danger);
  background: color-mix(in srgb, var(--admin-danger) 12%, transparent);
}

.admin-sku-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 8px;
}

.admin-sku-form input {
  min-height: 40px;
  border-radius: 999px;
}

.admin-note,
.admin-integration-status {
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.6;
}

.admin-integration-status {
  display: grid;
  gap: 10px;
}

.admin-remote-orders > div {
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: var(--admin-surface-2);
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-form-grid .is-wide {
  grid-column: 1 / -1;
}

.admin-form-grid label,
.admin-qikink-form label {
  display: grid;
  gap: 8px;
  color: var(--admin-ink);
}

.admin-variant-editor {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.admin-variant-editor details {
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: var(--admin-surface-2);
  overflow: hidden;
}

.admin-variant-editor summary {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.admin-variant-editor summary span {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-variant-editor details .admin-form-grid {
  padding: 0 16px 16px;
}

.admin-check-line {
  margin: 14px 0;
  display: flex !important;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
}

.admin-customer-list > div {
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: var(--admin-surface-2);
}

.admin-customer-list strong,
.admin-customer-list small {
  display: block;
}

.admin-customer-list small {
  color: var(--admin-muted);
}

.admin-customer-list em {
  margin-left: auto;
  color: var(--admin-muted);
  font-size: 12px;
  font-style: normal;
  text-transform: capitalize;
}

.admin-module-list a,
.admin-module-list button {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  color: var(--admin-ink);
  background: var(--admin-surface-2);
  font-weight: 800;
}

.admin-empty {
  padding: 18px;
  border: 1px dashed var(--admin-line);
  border-radius: 16px;
  color: var(--admin-muted);
  background: var(--admin-surface-2);
  text-align: center;
}

.admin-floating-action {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #111;
  box-shadow: var(--admin-shadow);
}

.admin-backdrop {
  display: none;
}

body.admin-sidebar-collapsed .admin-portal {
  grid-template-columns: 92px minmax(0, 1fr);
}

body.admin-sidebar-collapsed .admin-sidebar {
  padding-inline: 14px;
}

body.admin-sidebar-collapsed .admin-sidebar-brand img,
body.admin-sidebar-collapsed .admin-nav section > span,
body.admin-sidebar-collapsed .admin-nav strong,
body.admin-sidebar-collapsed .admin-sidebar-footer div div,
body.admin-sidebar-collapsed .admin-sidebar-footer form button {
  display: none;
}

body.admin-sidebar-collapsed .admin-nav a {
  justify-content: center;
}

@media (max-width: 1180px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-command-hero,
  .admin-analytics-grid,
  .admin-grid-two,
  .admin-grid-three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-portal {
    display: block;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, calc(100vw - 34px));
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }

  .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .admin-sidebar-brand button {
    display: inline-grid;
  }

  .admin-backdrop.is-visible {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    background: rgba(0, 0, 0, 0.36);
  }

  .admin-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-topbar-left,
  .admin-topbar-actions {
    width: 100%;
  }

  .admin-global-search {
    flex: 1;
    width: auto;
  }

  .admin-topbar-actions {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.admin-sidebar-collapsed .admin-portal {
    display: block;
  }

  body.admin-sidebar-collapsed .admin-sidebar-brand img,
  body.admin-sidebar-collapsed .admin-nav section > span,
  body.admin-sidebar-collapsed .admin-nav strong,
  body.admin-sidebar-collapsed .admin-sidebar-footer div div,
  body.admin-sidebar-collapsed .admin-sidebar-footer form button {
    display: initial;
  }

  body.admin-sidebar-collapsed .admin-nav a {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .admin-page {
    padding: 16px;
  }

  .admin-breadcrumb-row,
  .admin-action-strip {
    border-radius: 18px;
  }

  .admin-breadcrumb-row,
  .admin-card-head,
  .admin-table-tools,
  .admin-command-hero,
  .admin-health-card {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-command-hero {
    display: grid;
  }

  .admin-kpi-grid,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-card {
    padding: 18px;
    border-radius: 20px;
  }

  .admin-card-table > .admin-card-head,
  .admin-card-table > .admin-note {
    padding: 18px;
  }

  .admin-table-tools label,
  .admin-table-search,
  .admin-table-tools input,
  .admin-table-search input {
    width: 100%;
  }

  .admin-user-menu strong,
  .admin-topbar-pill {
    display: none;
  }

  .admin-chart-bars {
    gap: 8px;
  }
}

/* Front-inspired product management workspace */
.admin-table-edit {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-table-edit:hover {
  border-color: var(--admin-ink);
  background: var(--admin-surface-2);
}

.product-editor {
  padding-bottom: 92px;
}

.product-editor-head {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.product-editor-head > div:first-child > a {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.product-editor-head h1 {
  margin: 5px 0 8px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.product-editor-head > div:first-child > span {
  color: var(--admin-muted);
  font-size: 12px;
}

.product-editor-head > div:last-child {
  display: flex;
  gap: 9px;
}

.product-editor-head button,
.editor-preview {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  font-size: 12px;
  font-weight: 800;
}

.product-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  gap: 22px;
  align-items: start;
}

.product-editor-layout > main,
.product-editor-layout > aside {
  display: grid;
  gap: 20px;
}

.product-editor-layout > aside {
  position: sticky;
  top: 102px;
}

.editor-card {
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: var(--admin-surface);
  box-shadow: 0 10px 35px rgba(20, 20, 20, 0.035);
}

.editor-card > header {
  min-height: 68px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--admin-line);
}

.editor-card > header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.editor-card > header > div > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--admin-muted);
  background: var(--admin-surface-2);
  font-size: 10px;
  font-weight: 900;
}

.editor-card h2 {
  font-size: 17px;
  font-weight: 850;
}

.editor-card header small {
  color: var(--admin-muted);
  font-size: 11px;
}

.editor-fields {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.editor-fields label,
.editor-stack label,
.editor-upload {
  display: grid;
  gap: 7px;
}

.editor-fields label > span,
.editor-stack label > span,
.editor-upload > span {
  font-size: 12px;
  font-weight: 800;
}

.editor-fields .is-wide {
  grid-column: 1/-1;
}

.editor-fields input,
.editor-fields textarea,
.editor-stack input,
.editor-stack select,
.editor-status select,
.editor-upload input,
.editor-upload textarea {
  width: 100%;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  color: var(--admin-ink);
  background: var(--admin-bg);
  font-size: 13px;
  box-shadow: none;
}

.editor-fields input:focus,
.editor-fields textarea:focus,
.editor-stack input:focus,
.editor-stack select:focus,
.editor-upload input:focus,
.editor-upload textarea:focus {
  border-color: var(--admin-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 12%, transparent);
}

.editor-fields label > small,
.editor-upload small {
  color: var(--admin-muted);
  font-size: 10px;
  text-align: right;
}

.editor-toolbar {
  padding: 5px;
  display: flex;
  gap: 3px;
  border: 1px solid var(--admin-line);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: var(--admin-surface-2);
}

.editor-toolbar button {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--admin-ink);
  background: transparent;
  font-size: 11px;
}

.editor-toolbar button:hover {
  background: var(--admin-surface);
}

.editor-toolbar + textarea {
  border-radius: 0 0 11px 11px;
}

.editor-media-preview {
  padding: 20px 20px 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.editor-media-preview div {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: var(--admin-surface-2);
}

.editor-media-preview div.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.editor-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-media-preview b {
  position: absolute;
  left: 9px;
  bottom: 9px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.editor-upload {
  margin: 12px 20px 20px;
}

.editor-variant-list {
  display: grid;
}

.editor-variant-list details {
  border-bottom: 1px solid var(--admin-line);
}

.editor-variant-list details:last-child {
  border: 0;
}

.editor-variant-list summary {
  padding: 13px 20px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.editor-variant-list summary:hover {
  background: var(--admin-surface-2);
}

.editor-variant-list summary img {
  width: 46px;
  height: 52px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--admin-surface-2);
}

.editor-variant-list summary span b,
.editor-variant-list summary span small {
  display: block;
}

.editor-variant-list summary span b {
  font-size: 13px;
}

.editor-variant-list summary span small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 10px;
}

.editor-variant-list summary > strong {
  font-size: 13px;
}

.editor-variant-list details[open] summary {
  background: var(--admin-surface-2);
}

.editor-status > header > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--admin-danger);
}

.editor-status > header > i.is-live {
  background: var(--admin-accent);
}

.editor-status > label:not(.editor-switch) {
  margin: 18px 20px;
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
}

.editor-status select {
  width: 100%;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  background: var(--admin-bg);
}

.editor-switch {
  padding: 11px 20px;
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  cursor: pointer;
}

.editor-switch input {
  position: absolute;
  opacity: 0;
}

.editor-switch > i {
  width: 36px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: var(--admin-line);
  transition: 0.2s;
}

.editor-switch > i:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

.editor-switch input:checked + i {
  background: #111;
}

.editor-switch input:checked + i:after {
  transform: translateX(16px);
}

.editor-switch > span {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.editor-stack {
  padding: 18px 20px;
  display: grid;
  gap: 15px;
}

.editor-margin {
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  background: var(--admin-surface-2);
  font-size: 12px;
}

.editor-inventory {
  display: grid;
  gap: 8px;
}

.editor-inventory > span {
  color: var(--admin-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.editor-inventory > b {
  font-size: 13px;
}

.editor-inventory > i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-line);
}

.editor-inventory em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--admin-accent);
}

.editor-savebar {
  position: fixed;
  left: calc(286px + clamp(20px, 3vw, 34px));
  right: clamp(20px, 3vw, 34px);
  bottom: 18px;
  z-index: 55;
  min-height: 64px;
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  color: var(--admin-ink);
  background: color-mix(in srgb, var(--admin-surface) 92%, transparent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.editor-savebar > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.editor-savebar > div:first-child i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--admin-accent);
}

.editor-savebar span {
  font-size: 12px;
  font-weight: 700;
}

.editor-savebar a,
.editor-savebar button {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--admin-ink);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.editor-savebar button {
  color: #fff;
  background: #111;
}

.product-editor.is-dirty .editor-savebar > div:first-child i {
  background: var(--admin-warning);
}

body.admin-sidebar-collapsed .editor-savebar {
  left: calc(92px + clamp(20px, 3vw, 34px));
}

@media (max-width: 1180px) {
  .product-editor-layout {
    grid-template-columns: 1fr;
  }

  .product-editor-layout > aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-savebar {
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 680px) {
  .product-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .product-editor-head > div:last-child > * {
    flex: 1;
    justify-content: center;
  }

  .product-editor-layout > aside,
  .editor-fields {
    grid-template-columns: 1fr;
  }

  .editor-fields .is-wide {
    grid-column: auto;
  }

  .editor-media-preview {
    grid-template-columns: repeat(2, 1fr);
  }

  .editor-savebar {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }

  .editor-savebar > div:first-child {
    display: none;
  }

  .editor-savebar > div:last-child {
    width: 100%;
  }

  .editor-savebar a,
  .editor-savebar button {
    flex: 1;
    justify-content: center;
  }
}

/* Luxury checkout */
.lux-checkout {
  padding: clamp(34px, 5vw, 72px) clamp(18px, 4vw, 64px) 100px;
  background: linear-gradient(180deg, #fff 0%, #faf9f6 100%);
  color: #111;
}

.lux-checkout-header,
.lux-progress,
.lux-checkout-layout {
  width: min(1480px, 100%);
  margin-inline: auto;
}

.lux-checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.lux-checkout-header span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
}

.lux-checkout-header h1 {
  margin: 12px 0 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.lux-checkout-header p {
  color: #73736f;
}

.lux-checkout-header > a {
  padding-bottom: 7px;
  border-bottom: 1px solid #111;
  font-size: 12px;
  font-weight: 700;
}

.lux-progress {
  margin-top: 42px;
  padding: 17px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 18px;
  border-block: 1px solid #deddd8;
}

.lux-progress > div {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #aaa;
}

.lux-progress > div.is-active {
  color: #111;
}

.lux-progress i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #d4d3ce;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.lux-progress .is-active i {
  color: #fff;
  background: #111;
  border-color: #111;
}

.lux-progress span b,
.lux-progress span small {
  display: block;
}

.lux-progress span b {
  font-size: 12px;
}

.lux-progress span small {
  margin-top: 2px;
  color: #999;
  font-size: 10px;
}

.lux-progress em {
  height: 1px;
  background: #deddd8;
}

.lux-checkout-layout {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.lux-checkout-form {
  display: grid;
  gap: 18px;
}

.lux-checkout-card {
  border: 1px solid #deddd8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.035);
  overflow: hidden;
}

.lux-checkout-card > header {
  padding: 24px 26px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid #e7e6e2;
}

.lux-checkout-card > header > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 10px;
  font-weight: 800;
}

.lux-checkout-card > header h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.lux-checkout-card > header p {
  margin-top: 5px;
  color: #777;
  font-size: 12px;
}

.secure-chip {
  margin-left: auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f1f0ec;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.lux-fields {
  padding: 25px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.lux-fields label {
  position: relative;
  display: grid;
  gap: 8px;
}

.lux-fields label.is-wide {
  grid-column: 1/-1;
}

.lux-fields label > span {
  font-size: 11px;
  font-weight: 800;
}

.lux-fields input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #d7d6d1;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  outline: 0;
}

.lux-fields input:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.lux-fields input[readonly] {
  color: #777;
  background: #f7f6f3;
}

.lux-fields label > small {
  position: absolute;
  right: 12px;
  bottom: 17px;
  color: #999;
  font-size: 9px;
}

.phone-field {
  display: grid;
  grid-template-columns: 52px 1fr;
}

.phone-field b {
  display: grid;
  place-items: center;
  border: 1px solid #d7d6d1;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #f7f6f3;
  font-size: 11px;
}

.phone-field input {
  border-radius: 0 10px 10px 0;
}

.saved-addresses {
  padding: 20px 26px 0;
  gap: 9px;
  overflow: auto;
}

.saved-addresses > span {
  align-self: center;
  min-width: max-content;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.saved-addresses button {
  position: relative;
  min-width: 190px;
  padding: 11px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.saved-addresses button.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.saved-addresses b {
  font-size: 11px;
}

.saved-addresses small {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #888;
  font-size: 9px;
}

.saved-addresses em {
  position: absolute;
  right: 7px;
  top: 7px;
  color: #777;
  font-size: 8px;
  font-style: normal;
}

.checkout-check,
.checkout-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.checkout-check {
  padding: 0 26px 23px;
}

.checkout-check input,
.checkout-consent input {
  position: absolute;
  opacity: 0;
}

.checkout-check i,
.checkout-consent i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-style: normal;
  font-size: 10px;
}

.checkout-check input:checked + i,
.checkout-consent input:checked + i {
  color: #fff;
  background: #111;
  border-color: #111;
}

.checkout-check span,
.checkout-consent span {
  color: #696965;
  font-size: 11px;
}

.delivery-option {
  margin: 20px 26px;
  padding: 17px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #111;
  border-radius: 12px;
  cursor: pointer;
}

.delivery-option input {
  position: absolute;
  opacity: 0;
}

.delivery-option > i {
  width: 19px;
  height: 19px;
  border: 5px solid #111;
  border-radius: 50%;
}

.delivery-option span b,
.delivery-option span small {
  display: block;
}

.delivery-option span b {
  font-size: 12px;
}

.delivery-option span small {
  margin-top: 3px;
  color: #888;
  font-size: 10px;
}

.delivery-option > strong {
  font-size: 11px;
}

.payment-methods {
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-methods label {
  position: relative;
  min-height: 78px;
  padding: 13px;
  display: grid;
  grid-template-columns: 20px 0fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #deddd8;
  border-radius: 11px;
  cursor: pointer;
  transition: 0.18s;
}

.payment-methods label:hover {
  border-color: #777;
}

.payment-methods label:has(input:checked) {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
  background: #fafafa;
}

.payment-methods input {
  position: absolute;
  opacity: 0;
}

.payment-methods label > i {
  width: 18px;
  height: 18px;
  border: 1px solid #aaa;
  border-radius: 50%;
}

.payment-methods input:checked + i {
  border: 5px solid #111;
}

.payment-methods span b,
.payment-methods span small {
  display: block;
}

.payment-methods span b {
  font-size: 11px;
}

.payment-methods span small {
  margin-top: 4px;
  color: #888;
  font-size: 9px;
}

.payment-methods label > em {
  font-style: normal;
  font-weight: 800;
}

.payment-detail {
  margin: 0 26px 24px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f4f3ef;
}

.payment-detail b {
  font-size: 11px;
}

.payment-detail p {
  margin-top: 4px;
  color: #777;
  font-size: 10px;
  line-height: 1.55;
}

.checkout-consent {
  padding: 8px 4px;
}

.checkout-consent a {
  text-decoration: underline;
}

.lux-place-order {
  min-height: 62px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #111;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11px;
  font-weight: 800;
  transition: 0.2s;
}

.lux-place-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}

.checkout-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  color: #777;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lux-summary {
  position: sticky;
  top: 105px;
}

.lux-summary-card {
  border: 1px solid #deddd8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.lux-summary-card > header {
  padding: 25px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.lux-summary-card header span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.lux-summary-card h2 {
  margin-top: 5px;
  font-size: 28px;
}

.lux-summary-card header a {
  font-size: 10px;
  text-decoration: underline;
}

.summary-products {
  padding: 0 25px;
  display: grid;
  gap: 16px;
}

.summary-products article {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 13px;
  align-items: start;
}

.summary-products article > div {
  position: relative;
  width: 70px;
  height: 84px;
  background: #f2f1ed;
}

.summary-products img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.summary-products article > div > b {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 9px;
}

.summary-products article > span strong,
.summary-products article > span small,
.summary-products article > span em {
  display: block;
}

.summary-products article > span strong {
  font-size: 11px;
}

.summary-products article > span small {
  margin-top: 5px;
  color: #777;
  font-size: 9px;
}

.summary-products article > span em {
  margin-top: 9px;
  color: #999;
  font-size: 9px;
  font-style: normal;
}

.summary-products article > b {
  font-size: 11px;
}

.coupon-row {
  margin: 24px 25px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid #deddd8;
  border-radius: 10px;
}

.coupon-row input {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font-size: 11px;
}

.coupon-row button {
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #111;
  font-size: 10px;
  font-weight: 800;
}

.lux-summary dl {
  padding: 20px 25px;
  margin: 0;
  border-block: 1px solid #e4e3df;
  display: grid;
  gap: 12px;
}

.lux-summary dl > div {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 11px;
}

.lux-summary dd {
  margin: 0;
  color: #111;
}

.lux-summary-card > footer {
  padding: 22px 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.lux-summary-card > footer span {
  font-size: 14px;
  font-weight: 800;
}

.lux-summary-card > footer span small {
  color: #999;
  font-size: 8px;
}

.lux-summary-card > footer strong {
  font-family: Georgia, serif;
  font-size: 26px;
}

.free-shipping {
  padding: 0 25px 24px;
}

.free-shipping i {
  height: 4px;
  display: block;
  border-radius: 9px;
  background: #e5e4df;
  overflow: hidden;
}

.free-shipping i b {
  display: block;
  height: 100%;
  background: #111;
}

.free-shipping span {
  display: block;
  margin-top: 8px;
  color: #777;
  font-size: 9px;
}

.summary-support {
  margin-top: 13px;
  padding: 18px 20px;
  display: grid;
  gap: 4px;
  border: 1px solid #deddd8;
  border-radius: 14px;
  background: #fff;
}

.summary-support b {
  font-size: 11px;
}

.summary-support span,
.summary-support a {
  color: #777;
  font-size: 9px;
}

.summary-support a {
  text-decoration: underline;
}

@media (max-width: 1000px) {
  .lux-checkout-layout {
    grid-template-columns: 1fr;
  }

  .lux-summary {
    position: static;
    order: -1;
  }

  .lux-summary-card {
    box-shadow: none;
  }

  .summary-products {
    max-height: 300px;
    overflow: auto;
  }
}

@media (max-width: 650px) {
  .lux-checkout {
    padding: 25px 14px 70px;
  }

  .lux-checkout-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .lux-checkout-header h1 {
    font-size: 58px;
  }

  .lux-progress {
    padding: 14px 4px;
    gap: 6px;
  }

  .lux-progress em {
    display: none;
  }

  .lux-progress {
    grid-template-columns: repeat(3, 1fr);
  }

  .lux-progress > div {
    justify-content: center;
  }

  .lux-progress span small {
    display: none;
  }

  .lux-progress i {
    width: 29px;
    height: 29px;
  }

  .lux-checkout-layout {
    margin-top: 22px;
  }

  .lux-checkout-card > header {
    padding: 20px 17px;
  }

  .lux-fields {
    padding: 20px 17px;
    grid-template-columns: 1fr;
  }

  .lux-fields label.is-wide {
    grid-column: auto;
  }

  .payment-methods {
    padding: 18px 17px;
    grid-template-columns: 1fr;
  }

  .payment-detail {
    margin: 0 17px 20px;
  }

  .delivery-option {
    margin: 18px 17px;
  }

  .saved-addresses {
    padding-inline: 17px;
  }

  .checkout-check {
    padding-inline: 17px;
  }

  .summary-products,
  .lux-summary-card > header {
    padding-inline: 17px;
  }

  .coupon-row {
    margin-inline: 17px;
  }

  .lux-summary dl,
  .lux-summary-card > footer {
    padding-inline: 17px;
  }

  .free-shipping {
    padding-inline: 17px;
  }

  .checkout-trust {
    gap: 10px;
  }
}

/* Restore the compiled reset's intended sizing rule (its generated selector is malformed). */
*,
::before,
::after {
  box-sizing: border-box;
}

/* Keep checkout typography consistent with the existing site and use SVG heading icons. */
.lux-checkout,
.lux-checkout-header h1,
.lux-summary-card > footer strong {
  font-family: var(--font-sans);
}

.checkout-heading-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.lux-progress .checkout-heading-icon {
  width: 16px;
  height: 16px;
}

/* Checkout payment tiles */
.lux-checkout,
.lux-checkout * {
  min-width: 0;
}

.payment-methods label {
  grid-template-columns: 21px 52px minmax(0, 0fr);
  gap: 14px;
  overflow: hidden;
}

.payment-method-icon {
  width: 52px;
  height: 42px;
  display: grid !important;
  place-items: center;
  border: 1px solid #e3e2dd;
  border-radius: 9px;
  background: #fff;
}

.payment-method-icon img {
  width: 46px;
  height: auto;
  display: block;
}

.payment-tile-icon {
  width: 24px;
  height: 24px;
  display: block;
  color: #111;
}

.payment-method-copy {
  display: block;
  overflow: hidden;
}

.payment-method-copy b,
.payment-method-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-method-copy small {
  white-space: normal;
  line-height: 1.35;
}

.payment-methods label:has(input:checked) .payment-method-icon {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}

/* Checkout readability scale */
.lux-checkout-header span {
  font-size: 12px;
}

.lux-checkout-header p {
  font-size: 18px;
  line-height: 1.6;
}

.lux-checkout-header > a {
  font-size: 14px;
}

.lux-progress {
  padding-block: 21px;
}

.lux-progress i {
  width: 43px;
  height: 43px;
  font-size: 15px;
}

.lux-progress span b {
  font-size: 15px;
}

.lux-progress span small {
  margin-top: 4px;
  font-size: 12px;
}

.lux-checkout-layout {
  grid-template-columns: minmax(0, 1fr) 500px;
}

.lux-checkout-card > header {
  padding: 29px 32px;
}

.lux-checkout-card > header > span {
  width: 48px;
  height: 48px;
  font-size: 12px;
}

.lux-checkout-card > header h2 {
  font-size: 30px;
}

.lux-checkout-card > header p {
  font-size: 15px;
  line-height: 1.5;
}

.secure-chip {
  padding: 8px 11px;
  font-size: 11px;
}

.lux-fields {
  padding: 30px 32px;
  gap: 21px;
}

.lux-fields label > span {
  font-size: 14px;
}

.lux-fields input {
  min-height: 58px;
  padding-inline: 17px;
  font-size: 16px;
}

.lux-fields label > small {
  right: 16px;
  bottom: 20px;
  font-size: 11px;
}

.phone-field {
  grid-template-columns: 64px 1fr;
}

.phone-field b {
  font-size: 14px;
}

.saved-addresses {
  padding: 24px 32px 0;
}

.saved-addresses > span {
  font-size: 12px;
}

.saved-addresses button {
  min-width: 230px;
  padding: 14px;
}

.saved-addresses b {
  font-size: 13px;
}

.saved-addresses small {
  max-width: 195px;
  font-size: 11px;
}

.saved-addresses em {
  font-size: 10px;
}

.checkout-check {
  padding: 0 32px 28px;
}

.checkout-check span,
.checkout-consent span {
  font-size: 13px;
  line-height: 1.55;
}

.delivery-option {
  margin: 25px 32px;
  padding: 21px;
  grid-template-columns: 25px 1fr auto;
}

.delivery-option > i {
  width: 21px;
  height: 21px;
}

.delivery-option span b {
  font-size: 15px;
}

.delivery-option span small {
  font-size: 13px;
}

.delivery-option > strong {
  font-size: 14px;
}

.payment-methods {
  padding: 27px 32px;
  gap: 13px;
}

.payment-methods label {
  min-height: 94px;
  padding: 17px;
  grid-template-columns: 23px 0fr auto;
}

.payment-methods label > i {
  width: 21px;
  height: 21px;
}

.payment-methods span b {
  font-size: 14px;
}

.payment-methods span small {
  font-size: 12px;
}

.payment-methods label > em {
  font-size: 16px;
}

.payment-detail {
  margin: 0 32px 29px;
  padding: 18px 20px;
}

.payment-detail b {
  font-size: 14px;
}

.payment-detail p {
  font-size: 12px;
}

.lux-place-order {
  min-height: 68px;
  padding-inline: 29px;
  font-size: 14px;
}

.checkout-trust {
  font-size: 11px;
}

.lux-summary-card > header {
  padding: 31px;
}

.lux-summary-card header span {
  font-size: 11px;
}

.lux-summary-card h2 {
  font-size: 34px;
}

.lux-summary-card header a {
  font-size: 13px;
}

.summary-products {
  padding: 0 31px;
  gap: 20px;
}

.summary-products article {
  grid-template-columns: 88px 1fr auto;
  gap: 16px;
}

.summary-products article > div {
  width: 88px;
  height: 106px;
}

.summary-products article > div > b {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.summary-products article > span strong {
  font-size: 14px;
  line-height: 1.4;
}

.summary-products article > span small {
  font-size: 12px;
}

.summary-products article > span em {
  font-size: 11px;
}

.summary-products article > b {
  font-size: 14px;
}

.lux-summary dl {
  padding: 25px 31px;
  gap: 16px;
}

.lux-summary dl > div {
  font-size: 14px;
}

.lux-summary-card > footer {
  padding: 28px 31px;
}

.lux-summary-card > footer span {
  font-size: 17px;
}

.lux-summary-card > footer span small {
  font-size: 10px;
}

.lux-summary-card > footer strong {
  font-size: 34px;
}

.free-shipping {
  padding: 0 31px 29px;
}

.free-shipping i {
  height: 6px;
}

.free-shipping span {
  margin-top: 11px;
  font-size: 12px;
}

.summary-support {
  padding: 22px 24px;
}

.summary-support b {
  font-size: 14px;
}

.summary-support span,
.summary-support a {
  font-size: 12px;
}

.checkout-consent i {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
}

@media (max-width: 1200px) {
  .lux-checkout-layout {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

@media (max-width: 1000px) {
  .lux-checkout-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .lux-checkout-header p {
    font-size: 15px;
  }

  .lux-progress i {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .lux-progress span b {
    font-size: 12px;
  }

  .lux-checkout-card > header {
    padding: 22px 18px;
  }

  .lux-checkout-card > header > span {
    width: 40px;
    height: 40px;
  }

  .lux-checkout-card > header h2 {
    font-size: 24px;
  }

  .lux-checkout-card > header p {
    font-size: 13px;
  }

  .lux-fields {
    padding: 22px 18px;
  }

  .lux-fields label > span {
    font-size: 13px;
  }

  .lux-fields input {
    min-height: 54px;
    font-size: 15px;
  }

  .payment-methods {
    padding: 20px 18px;
  }

  .payment-detail {
    margin: 0 18px 22px;
  }

  .delivery-option {
    margin: 20px 18px;
  }

  .saved-addresses {
    padding-inline: 18px;
  }

  .checkout-check {
    padding-inline: 18px;
  }

  .lux-place-order {
    font-size: 12px;
  }

  .summary-products,
  .lux-summary-card > header {
    padding-inline: 20px;
  }

  .summary-products article {
    grid-template-columns: 76px 1fr auto;
  }

  .summary-products article > div {
    width: 76px;
    height: 92px;
  }

  .lux-summary dl,
  .lux-summary-card > footer,
  .free-shipping {
    padding-inline: 20px;
  }
}

@media (max-width: 420px) {
  .payment-methods label {
    grid-template-columns: 20px 44px minmax(0, 0fr);
    gap: 10px;
  }

  .payment-method-icon {
    width: 44px;
    height: 38px;
  }

  .payment-method-icon img {
    width: 40px;
  }
}

/* Premium two-step checkout and PayU payment experience */
.checkout-payment-choices {
  padding: 28px 32px;
  display: grid;
  gap: 14px;
}

.checkout-payment-choice {
  position: relative;
  min-height: 128px;
  padding: 22px;
  display: grid;
  grid-template-columns: 22px 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid #deddd8;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

.checkout-payment-choice:hover {
  transform: translateY(-2px);
  border-color: #aaa9a4;
  box-shadow: 0 14px 34px rgba(20, 20, 18, 0.08);
}

.checkout-payment-choice:has(input:focus-visible) {
  outline: 3px solid rgba(17, 17, 17, 0.2);
  outline-offset: 3px;
}
.checkout-payment-choice:has(input:checked) {
  border-color: #111;
  background: #fbfbf9;
  box-shadow:
    inset 0 0 0 1px #111,
    0 12px 32px rgba(20, 20, 18, 0.07);
}
.checkout-payment-choice > input {
  position: absolute;
  opacity: 0;
}
.checkout-payment-choice > i {
  width: 22px;
  height: 22px;
  border: 1px solid #aaa;
  border-radius: 50%;
  transition: border 200ms ease;
}
.checkout-payment-choice > input:checked + i {
  border: 6px solid #111;
}
.checkout-payment-choice-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e1dc;
  border-radius: 14px;
  background: #fff;
}
.checkout-payment-choice-copy b,
.checkout-payment-choice-copy small {
  display: block;
}
.checkout-payment-choice-copy b {
  font-size: 18px;
  line-height: 1.2;
}
.checkout-payment-choice-copy small {
  margin-top: 6px;
  color: #72716d;
  font-size: 13px;
  line-height: 1.5;
}
.checkout-payment-choice-copy em {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-style: normal;
}
.checkout-payment-choice-copy em span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #efeee9;
  color: #55544f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.checkout-payment-choice.is-recommended:after {
  content: "RECOMMENDED";
  position: absolute;
  top: 0;
  right: 20px;
  padding: 6px 10px;
  border-radius: 0 0 8px 8px;
  background: #111;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.pay-page {
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 58px) 100px;
  background:
    radial-gradient(circle at 8% 5%, #fff 0, transparent 32%),
    linear-gradient(145deg, #f6f5f1, #fbfbf9 48%, #f1f0ec);
  color: #111;
}
.pay-page,
.pay-page * {
  box-sizing: border-box;
  min-width: 0;
}
.pay-shell {
  width: min(1380px, 100%);
  margin: auto;
}
.pay-topbar {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 24px;
}
.pay-back {
  width: max-content;
  padding-bottom: 5px;
  border-bottom: 1px solid #111;
  font-size: 13px;
  font-weight: 700;
}
.pay-topbar > div:nth-child(2) {
  text-align: center;
}
.pay-topbar > div > span,
.pay-method-card > header > span,
.pay-faq > span,
.pay-summary-card > header > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
}
.pay-topbar h1 {
  margin: 7px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.04em;
}
.pay-order-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.pay-order-meta span {
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  color: #6e6d68;
}
.pay-order-meta strong {
  font-size: 22px;
}
.pay-order-meta small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #73726e;
  font-size: 10px;
  font-weight: 700;
}
.pay-inline-icon {
  width: 14px;
  height: 14px;
}
.pay-progress {
  margin: 34px auto 38px;
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
}
.pay-progress span {
  color: #92918c;
  font-size: 11px;
  font-weight: 700;
}
.pay-progress span b {
  margin-left: 4px;
  color: #111;
}
.pay-progress .is-complete,
.pay-progress .is-current {
  color: #111;
}
.pay-progress .is-current {
  padding: 7px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
}
.pay-progress i {
  height: 1px;
  background: #d6d5d0;
}
.pay-alert {
  margin: 0 0 20px;
  padding: 16px 20px;
  display: flex;
  gap: 10px;
  border: 1px solid #d7aa73;
  border-radius: 14px;
  background: #fff8ed;
  font-size: 13px;
}
.pay-alert span {
  color: #745b3f;
}
.pay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(22px, 3vw, 42px);
  align-items: start;
}
.pay-method-card,
.pay-summary-card {
  border: 1px solid rgba(207, 205, 198, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(25, 24, 21, 0.08);
  backdrop-filter: blur(12px);
}
.pay-method-card > header {
  padding: 34px 36px 25px;
  border-bottom: 1px solid #ecebe7;
}
.pay-method-card > header h2 {
  margin: 9px 0 7px;
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: -0.035em;
}
.pay-method-card > header p {
  color: #777671;
  font-size: 13px;
}
.pay-form {
  padding: 24px 28px 0;
}
.pay-accordion {
  display: grid;
  gap: 12px;
}
.pay-option {
  overflow: hidden;
  border: 1px solid #deddd8;
  border-radius: 15px;
  background: #fff;
  transition:
    border-color 250ms ease,
    box-shadow 250ms ease;
}
.pay-option.is-open {
  border-color: #111;
  box-shadow: 0 10px 26px rgba(20, 20, 18, 0.06);
}
.pay-option-trigger {
  width: 100%;
  min-height: 92px;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pay-option-trigger:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.18);
  outline-offset: -3px;
}
.pay-option-icon {
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #e3e2dd;
  border-radius: 12px;
  background: #fbfbfa;
}
.pay-option-icon img {
  width: 47px;
}
.pay-option-trigger > span:nth-child(2) b,
.pay-option-trigger > span:nth-child(2) small {
  display: block;
}
.pay-option-trigger > span:nth-child(2) b {
  font-size: 15px;
}
.pay-option-trigger > span:nth-child(2) small {
  margin-top: 5px;
  color: #7d7c77;
  font-size: 12px;
}
.pay-option-trigger em {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f0efeb;
  color: #61605b;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pay-option-trigger > i {
  font-size: 23px;
  font-style: normal;
  font-weight: 300;
  transition: transform 250ms ease;
}
.pay-option.is-open .pay-option-trigger > i {
  transform: rotate(45deg);
}
.pay-option-panel {
  padding: 4px 20px 22px 90px;
  animation: pay-panel-in 260ms ease both;
}
@keyframes pay-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pay-option-panel > label,
.pay-field-row label {
  display: grid;
  gap: 7px;
}
.pay-option-panel label > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pay-option-panel input,
.pay-option-panel select {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid #d8d7d2;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 14px;
  transition:
    border-color 200ms,
    box-shadow 200ms;
}
.pay-option-panel input:focus,
.pay-option-panel select:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}
.pay-option-panel label small {
  color: #898883;
  font-size: 10px;
}
.pay-field-row {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.pay-sensitive-note {
  margin: 12px 0 0;
  color: #85847f;
  font-size: 10px;
  line-height: 1.5;
}
.pay-app-pills {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pay-app-pills span {
  padding: 6px 9px;
  border: 1px solid #e1e0db;
  border-radius: 7px;
  color: #66655f;
  font-size: 9px;
  font-weight: 700;
}
.pay-submit {
  margin-top: 18px;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #111;
  border-radius: 11px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 200ms,
    background 200ms;
}
.pay-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #2a2a28;
}
.pay-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pay-submit.is-loading {
  animation: pay-button-pulse 1.1s ease infinite alternate;
}
@keyframes pay-button-pulse {
  to {
    opacity: 0.72;
  }
}
.pay-wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.pay-wallet-grid label {
  cursor: pointer;
}
.pay-wallet-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pay-wallet-grid span {
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #dddcd7;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  transition:
    border 200ms,
    background 200ms;
}
.pay-wallet-grid input:checked + span {
  border-color: #111;
  background: #f2f1ed;
  box-shadow: inset 0 0 0 1px #111;
}
.pay-error {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #fff0ef;
  color: #9d201c;
  font-size: 12px;
  line-height: 1.45;
}
.pay-error.is-visible {
  display: block;
}
.pay-trust-row {
  margin-top: 25px;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #ecebe7;
}
.pay-trust-row > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid #e7e6e1;
  font-size: 10px;
}
.pay-trust-row > span:last-child {
  border: 0;
  flex-direction: column;
  gap: 2px;
}
.pay-trust-row small {
  color: #898883;
  font-size: 8px;
}
.pay-trust-icon {
  width: 17px;
  height: 17px;
}
.pay-summary-card {
  position: sticky;
  top: 88px;
  overflow: hidden;
}
.pay-summary-card > header {
  padding: 24px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ecebe7;
}
.pay-summary-card > header a {
  padding-bottom: 3px;
  border-bottom: 1px solid;
  font-size: 10px;
  font-weight: 700;
}
.pay-summary-items {
  max-height: 320px;
  overflow: auto;
  padding: 8px 25px;
}
.pay-summary-items article {
  padding: 14px 0;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #efeee9;
}
.pay-summary-items img {
  width: 58px;
  height: 67px;
  border-radius: 9px;
  object-fit: cover;
  background: #f3f2ee;
}
.pay-summary-items span b,
.pay-summary-items span small {
  display: block;
}
.pay-summary-items span b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.pay-summary-items span small {
  margin-top: 5px;
  color: #85847f;
  font-size: 9px;
}
.pay-summary-items article > strong {
  font-size: 11px;
}
.pay-summary-card dl {
  margin: 0;
  padding: 17px 25px;
  display: grid;
  gap: 12px;
  border-bottom: 1px solid #e9e8e4;
}
.pay-summary-card dl div {
  display: flex;
  justify-content: space-between;
  color: #686762;
  font-size: 11px;
}
.pay-summary-card dl .is-discount dd {
  color: #397047;
}
.pay-summary-card dd {
  margin: 0;
  color: #111;
  font-weight: 700;
}
.pay-summary-card footer {
  padding: 21px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pay-summary-card footer span {
  font-size: 13px;
  font-weight: 800;
}
.pay-summary-card footer span small {
  margin-left: 4px;
  color: #888782;
  font-size: 8px;
}
.pay-summary-card footer strong {
  font-size: 23px;
}
.pay-summary-card > p {
  margin: 0;
  padding: 14px 25px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f4f3ef;
  color: #66655f;
  font-size: 9px;
}
.pay-faq {
  margin-top: 35px;
  width: min(880px, calc(100% - 462px));
  padding: 28px 32px;
  border: 1px solid #dcdad4;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}
.pay-faq details {
  border-bottom: 1px solid #deddd8;
}
.pay-faq details:last-child {
  border: 0;
}
.pay-faq summary {
  padding: 17px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pay-faq p {
  padding: 0 0 16px;
  color: #74736e;
  font-size: 11px;
  line-height: 1.7;
}
.payment-loader[hidden] {
  display: none;
}
.payment-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 24px;
  background: rgba(248, 247, 243, 0.97);
  text-align: center;
}
.payment-loader-lock {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
  animation: payment-lock 1.2s ease infinite alternate;
}
.payment-loader-icon {
  width: 28px;
  height: 28px;
}
@keyframes payment-lock {
  to {
    transform: scale(1.07);
    box-shadow: 0 0 0 14px rgba(17, 17, 17, 0.07);
  }
}
.payment-loader h2 {
  margin: 26px 0 8px;
  font-size: 30px;
  letter-spacing: -0.03em;
}
.payment-loader p {
  color: #777671;
  font-size: 13px;
}
.payment-loader > i {
  margin: 22px 0;
  width: min(320px, 80vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #deddd8;
}
.payment-loader > i span {
  width: 45%;
  height: 100%;
  display: block;
  background: #111;
  animation: payment-progress 1.2s ease-in-out infinite;
}
@keyframes payment-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(320%);
  }
}
.payment-loader small {
  color: #767570;
  font-size: 11px;
}
.payment-loader > b {
  margin-top: 18px;
  font-size: 9px;
  letter-spacing: 0.2em;
}

.payment-result {
  min-height: 82vh;
  padding: 70px 18px 100px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #fff, #f4f3ee);
  text-align: center;
}
.payment-result > section {
  position: relative;
  z-index: 1;
  width: min(670px, 100%);
  padding: clamp(32px, 6vw, 66px);
  border: 1px solid #dcdbd6;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 90px rgba(20, 20, 18, 0.1);
}
.result-icon {
  margin: 0 auto 23px;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 35px;
  font-weight: 700;
}
.payment-result.is-success .result-icon {
  background: #1f7a45;
  box-shadow: 0 0 0 12px rgba(31, 122, 69, 0.09);
}
.payment-result.is-failure .result-icon {
  background: #a83c34;
  box-shadow: 0 0 0 12px rgba(168, 60, 52, 0.08);
}
.payment-result section > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
}
.payment-result h1 {
  margin: 12px 0;
  font-size: clamp(40px, 7vw, 66px);
  letter-spacing: -0.055em;
}
.payment-result section > p {
  margin: auto;
  max-width: 500px;
  color: #71706b;
  font-size: 13px;
  line-height: 1.7;
}
.result-order {
  margin: 30px 0;
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-block: 1px solid #e5e4df;
  text-align: left;
}
.result-order div {
  display: grid;
  gap: 5px;
}
.result-order span {
  color: #8a8984;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.result-order b {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}
.result-actions a {
  min-height: 48px;
  padding: 0 20px;
  display: grid;
  place-items: center;
  border: 1px solid #111;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
}
.result-actions a.is-primary {
  background: #111;
  color: #fff;
}
.payment-result section > small {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #7f7e79;
  font-size: 9px;
}
.result-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.result-confetti i {
  position: absolute;
  top: -5%;
  width: 8px;
  height: 16px;
  background: #111;
  animation: result-confetti 3s ease-in infinite;
}
.result-confetti i:nth-child(1) {
  left: 12%;
  background: #d09a38;
  animation-delay: 0.1s;
}
.result-confetti i:nth-child(2) {
  left: 28%;
  background: #398c62;
  animation-delay: 1.1s;
}
.result-confetti i:nth-child(3) {
  left: 44%;
  background: #b4453e;
  animation-delay: 0.6s;
}
.result-confetti i:nth-child(4) {
  left: 63%;
  background: #3f6fa8;
  animation-delay: 1.5s;
}
.result-confetti i:nth-child(5) {
  left: 79%;
  background: #d09a38;
  animation-delay: 0.3s;
}
.result-confetti i:nth-child(6) {
  left: 91%;
  background: #398c62;
  animation-delay: 1.9s;
}
@keyframes result-confetti {
  to {
    transform: translate3d(80px, 105vh, 0) rotate(540deg);
  }
}

@media (max-width: 950px) {
  .pay-topbar {
    grid-template-columns: 1fr auto;
  }
  .pay-topbar > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .pay-back {
    grid-row: 2;
  }
  .pay-layout {
    grid-template-columns: 1fr;
  }
  .pay-summary-card {
    position: static;
    order: -1;
  }
  .pay-faq {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .checkout-payment-choices {
    padding: 20px 18px;
  }
  .checkout-payment-choice {
    padding: 19px 15px;
    grid-template-columns: 20px 46px 1fr;
    gap: 12px;
  }
  .checkout-payment-choice-icon {
    width: 46px;
    height: 46px;
  }
  .checkout-payment-choice-copy b {
    font-size: 15px;
  }
  .checkout-payment-choice.is-recommended:after {
    right: 12px;
  }
  .pay-page {
    padding: 24px 12px 120px;
  }
  .pay-topbar h1 {
    font-size: 29px;
  }
  .pay-order-meta strong {
    font-size: 17px;
  }
  .pay-progress {
    gap: 7px;
  }
  .pay-progress span {
    font-size: 9px;
  }
  .pay-method-card,
  .pay-summary-card {
    border-radius: 16px;
  }
  .pay-method-card > header {
    padding: 25px 19px 20px;
  }
  .pay-form {
    padding: 17px 12px 0;
  }
  .pay-option-trigger {
    min-height: 82px;
    padding: 14px 12px;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 11px;
  }
  .pay-option-icon {
    width: 46px;
    height: 43px;
  }
  .pay-option-trigger em {
    display: none;
  }
  .pay-option-trigger > span:nth-child(2) b {
    font-size: 13px;
  }
  .pay-option-trigger > span:nth-child(2) small {
    font-size: 10px;
  }
  .pay-option-panel {
    padding: 3px 13px 17px;
  }
  .pay-trust-row {
    padding: 17px 10px;
  }
  .pay-trust-row > span {
    font-size: 8px;
  }
  .pay-summary-card > header,
  .pay-summary-items,
  .pay-summary-card dl,
  .pay-summary-card footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .pay-faq {
    padding: 23px 20px;
  }
  .result-order {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .result-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-payment-choice,
  .pay-option,
  .pay-option-trigger > i,
  .pay-submit {
    transition: none;
  }
  .payment-loader-lock,
  .payment-loader > i span,
  .result-confetti i {
    animation: none;
  }
}

/* Qikink multi-product manager */
.admin-coupon-form {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-coupon-form input,
.admin-coupon-form select,
.admin-coupon-form textarea {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  background: var(--admin-bg);
  font-size: 11px;
}
.admin-coupon-form textarea {
  grid-column: 1/-1;
  padding-block: 11px;
}
.admin-coupon-form .admin-check-line {
  margin: 0;
}
.admin-coupon-list {
  display: grid;
  border-top: 1px solid var(--admin-line);
}
.admin-coupon-list article {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--admin-line);
}
.admin-coupon-list span b,
.admin-coupon-list span small {
  display: block;
}
.admin-coupon-list span b {
  font-size: 12px;
}
.admin-coupon-list span small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 9px;
}
.admin-coupon-list strong {
  font-size: 12px;
}
.shopify-product-manager {
  overflow: hidden;
}
.shopify-catalog-list {
  display: grid;
}
.shopify-catalog-item {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--admin-line);
}
.shopify-catalog-item.is-imported {
  background: color-mix(in srgb, var(--admin-accent) 4%, transparent);
}
.shopify-catalog-main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.shopify-product-placeholder {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--admin-muted);
  background: var(--admin-surface-2);
}
.shopify-catalog-main small,
.shopify-catalog-main strong,
.shopify-catalog-main p {
  display: block;
}
.shopify-catalog-main small {
  color: var(--admin-muted);
  font-size: 9px;
  letter-spacing: 0.11em;
}
.shopify-catalog-main strong {
  margin-top: 4px;
  font-size: 13px;
}
.shopify-catalog-main p {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 10px;
}
.shopify-catalog-state {
  display: grid;
  justify-items: end;
  gap: 7px;
  flex: 0 0 auto;
}
.shopify-catalog-state a,
.shopify-catalog-state button {
  padding: 8px 12px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  color: var(--admin-ink);
  background: var(--admin-surface);
  font-size: 10px;
  font-weight: 800;
}
.shopify-catalog-state button {
  color: #fff;
  background: #111;
  border-color: #111;
}
.shopify-manager-note {
  margin: 16px 22px 22px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--admin-surface-2);
}
.shopify-manager-note strong {
  font-size: 11px;
}
.shopify-manager-note p {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.55;
}
.editor-new-variant {
  border-top: 1px solid var(--admin-line);
}
.editor-new-variant > summary {
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
.editor-new-variant > summary b,
.editor-new-variant > summary small {
  display: block;
}
.editor-new-variant > summary b {
  font-size: 12px;
}
.editor-new-variant > summary small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 9px;
}
.editor-new-variant[open] > summary {
  background: var(--admin-surface-2);
}
@media (max-width: 620px) {
  .shopify-catalog-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .shopify-catalog-state {
    width: 100%;
    justify-items: stretch;
  }
  .shopify-catalog-state a,
  .shopify-catalog-state button {
    text-align: center;
    width: 100%;
  }
}

/* Dynamic storefront feedback */
.store-toast {
  position: fixed;
  z-index: 9999;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: #fff;
  background: #101010;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
  transform: translateY(28px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.store-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.store-toast.is-error {
  background: #982c2c;
}
.store-toast.is-warning {
  background: #8a5a10;
}
.store-toast.is-success {
  background: #176b45;
}
.store-toast.is-info {
  background: #20577a;
}
.store-toast-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-weight: 800;
}
.store-toast strong,
.store-toast small {
  display: block;
}
.store-toast strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.store-toast small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.store-toast button {
  color: #fff;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}
[data-ajax-wishlist] button[aria-pressed="true"] {
  background: #111;
  color: #fff;
}
[data-ajax-wishlist].is-loading,
[data-ajax-cart-add].is-loading,
[data-ajax-newsletter].is-loading {
  opacity: 0.62;
  pointer-events: none;
}
@media (max-width: 640px) {
  .store-toast {
    right: 16px;
    bottom: 76px;
  }
}

.editor-qikink-import {
  margin: 0 20px 18px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #fbfaf7;
}
.editor-qikink-import > summary {
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.editor-qikink-import > summary span,
.editor-qikink-import > summary b,
.editor-qikink-import > summary small {
  display: block;
}
.editor-qikink-import > summary b {
  font-size: 12px;
}
.editor-qikink-import > summary small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 9px;
}
.editor-qikink-import-body {
  padding: 0 18px 18px;
}
.editor-qikink-import-body label span {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
}
.editor-qikink-import-body textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  background: var(--admin-bg);
  font:
    10px/1.5 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  resize: vertical;
}
.editor-qikink-import-body .qikink-manager-note {
  margin: 12px 0 0;
}
.admin-product-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.admin-product-head-actions form {
  margin: 0;
}
.admin-product-head-actions form button {
  white-space: nowrap;
  color: #fff;
  background: #111;
  border-color: #111;
}
@media (max-width: 720px) {
  .admin-product-head-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
  .admin-product-head-actions form button,
  .admin-product-head-actions .admin-table-search {
    width: 100%;
  }
}
.shopify-product-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Product card actions and quick view */
.product-card-shell {
  min-width: 0;
  padding: 5px;
  border: 1px solid #e1e1e1;
}

.product-card-media {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 350ms ease;
}

.product-card-image {
  transform: scale(1);
  transition: transform 350ms ease;
  will-change: transform;
}

.product-card-media:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.product-card-media:hover .product-card-image {
  transform: scale(1.08);
}

.product-card-actions {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 10px;
}

.product-card-actions > * {
  margin: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  will-change: opacity, transform;
}

.product-card-actions > :nth-child(1) {
  transition-delay: 0ms;
}
.product-card-actions > :nth-child(2) {
  transition-delay: 80ms;
}
.product-card-actions > :nth-child(3) {
  transition-delay: 160ms;
}

.product-card-media:hover .product-card-actions > *,
.product-card-actions:focus-within > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.product-card-action {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #050505;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition:
    color 250ms ease,
    background 250ms ease,
    transform 250ms ease;
}

.product-card-action:hover,
.product-card-action:focus-visible {
  color: #fff;
  background: #050505;
  outline: none;
  transform: scale(1.08);
}

.product-card-action > span {
  position: absolute;
  right: 58px;
  width: max-content;
  padding: 6px 9px;
  color: #fff;
  background: #050505;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.product-card-action:hover > span,
.product-card-action:focus-visible > span {
  opacity: 1;
  transform: translateX(0);
}

[data-ajax-wishlist] button[aria-pressed="true"] svg {
  fill: currentColor;
}

.quick-view {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}

.quick-view.is-open {
  visibility: visible;
  pointer-events: auto;
}

.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.52);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 250ms ease;
}

.quick-view.is-open .quick-view-backdrop {
  opacity: 1;
}

.quick-view-panel {
  position: relative;
  width: min(1060px, 94vw);
  max-height: min(820px, 92vh);
  overflow: hidden;
  color: #050505;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  will-change: opacity, transform;
}

.quick-view.is-open .quick-view-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quick-view-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #e8e8e4;
}

.quick-view-header span {
  display: block;
  margin-bottom: 2px;
  color: #777772;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quick-view-header h2 {
  font-family: "Google Sans", var(--font-sans);
  font-size: 20px;
  font-weight: 600;
}

.quick-view-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #f5f5f2;
  border-radius: 999px;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.quick-view-close:hover {
  color: #fff;
  background: #050505;
  transform: rotate(4deg);
}
.quick-view-content {
  max-height: calc(92vh - 78px);
  overflow: auto;
}
.quick-view-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}
.quick-view-gallery {
  min-width: 0;
  padding: 24px;
  background: #f5f5f2;
}
.quick-view-stage {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eee;
}
.quick-view-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-view-thumbs {
  display: flex;
  gap: 9px;
  padding-top: 12px;
  overflow-x: auto;
}
.quick-view-thumb {
  flex: 0 0 62px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  background: #e8e8e4;
  border: 2px solid transparent;
}
.quick-view-thumb.is-selected {
  border-color: #050505;
}
.quick-view-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-view-details {
  padding: 30px;
}
.quick-view-category {
  color: #777772;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.quick-view-name {
  margin-top: 9px;
  font-family: "Google Sans", var(--font-sans);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.08;
}
.quick-view-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 12px;
}
.quick-view-rating b {
  letter-spacing: 0.08em;
}
.quick-view-rating span {
  color: #777772;
}
.quick-view-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: "Google Sans", var(--font-sans);
}
.quick-view-price strong {
  font-size: 22px;
  font-weight: 600;
}
.quick-view-price del {
  color: #8a8a85;
  font-size: 14px;
}
.quick-view-discount {
  padding: 4px 7px;
  color: #fff;
  background: #050505;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.quick-view-description {
  margin-top: 16px;
  color: #555550;
  font-size: 13px;
  line-height: 1.65;
}
.quick-view-option {
  margin-top: 22px;
}
.quick-view-option-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}
.quick-view-option-head span {
  color: #777772;
  font-weight: 500;
}
.quick-view-colors,
.quick-view-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.quick-view-color {
  width: 38px;
  height: 38px;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
}
.quick-view-color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.quick-view-color.is-selected {
  border-color: #050505;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.quick-view-size {
  min-width: 46px;
  height: 38px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #d8d8d3;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.quick-view-size.is-selected {
  color: #fff;
  background: #050505;
  border-color: #050505;
}
.quick-view-size:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.quick-view-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 22px;
}
.quick-view-qty {
  height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid #d8d8d3;
  border-radius: 999px;
}
.quick-view-qty button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
}
.quick-view-qty input {
  width: 34px !important;
  height: 40px;
  padding: 0 !important;
  text-align: center;
  border: 0 !important;
  box-shadow: none !important;
}
.quick-view-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4e4e49;
  font-size: 12px;
}
.quick-view-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #2f7d45;
  border-radius: 50%;
}
.quick-view-stock.is-out::before {
  background: #9b1c1c;
}
.quick-view-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px;
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid #e8e8e4;
  border-bottom: 1px solid #e8e8e4;
  color: #666660;
  font-size: 11px;
}
.quick-view-meta b {
  display: block;
  margin-bottom: 2px;
  color: #050505;
  font-weight: 600;
}
.quick-view-actions {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.quick-view-add,
.quick-view-details-link {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quick-view-add {
  color: #fff;
  background: #050505;
}
.quick-view-add:hover {
  background: #262626;
}
.quick-view-add:disabled {
  background: #aaa;
  cursor: not-allowed;
}
.quick-view-details-link {
  border: 1px solid #d8d8d3;
}
.quick-view-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 24px;
}
.quick-view-skeleton > div,
.quick-view-skeleton i {
  display: block;
  background: linear-gradient(90deg, #eee 25%, #f8f8f8 50%, #eee 75%);
  background-size: 200% 100%;
  animation: quick-view-shimmer 1.25s infinite;
}
.quick-view-skeleton > div {
  min-height: 560px;
}
.quick-view-skeleton section {
  padding: 20px 10px;
}
.quick-view-skeleton i {
  height: 18px;
  margin-bottom: 22px;
  border-radius: 4px;
}
.quick-view-skeleton i:nth-child(1) {
  width: 35%;
}
.quick-view-skeleton i:nth-child(2) {
  width: 82%;
  height: 42px;
}
.quick-view-skeleton i:nth-child(3) {
  width: 48%;
}
.quick-view-skeleton i:nth-child(4) {
  width: 100%;
  height: 90px;
}
.quick-view-skeleton i:nth-child(5) {
  width: 100%;
  height: 52px;
  margin-top: 100px;
}
.quick-view-error {
  padding: 70px 24px;
  text-align: center;
}
.quick-view-error h3 {
  font-size: 24px;
}
.quick-view-error p {
  margin-top: 8px;
  color: #777;
}
.quick-view-drag {
  display: none;
}

@keyframes quick-view-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (hover: none), (max-width: 767px) {
  .product-card-actions {
    top: 10px;
    right: 10px;
    gap: 8px;
  }
  .product-card-actions > * {
    opacity: 1;
    transform: none;
  }
  .product-card-action {
    width: 42px;
    height: 42px;
  }
  .product-card-action > span {
    display: none;
  }
}

@media (max-width: 700px) {
  .quick-view {
    align-items: end;
    padding: 0;
  }
  .quick-view-panel {
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .quick-view.is-open .quick-view-panel {
    transform: translateY(0);
  }
  .quick-view-drag {
    width: 42px;
    height: 4px;
    display: block;
    margin: 8px auto 0;
    background: #d1d1cd;
    border-radius: 99px;
  }
  .quick-view-header {
    height: 64px;
    padding: 0 16px;
  }
  .quick-view-header span {
    display: none;
  }
  .quick-view-content {
    max-height: calc(90vh - 64px);
  }
  .quick-view-layout {
    display: block;
  }
  .quick-view-gallery {
    padding: 12px 16px 16px;
  }
  .quick-view-stage {
    aspect-ratio: 4 / 4.7;
  }
  .quick-view-thumb {
    flex-basis: 52px;
    height: 60px;
  }
  .quick-view-details {
    padding: 22px 16px 110px;
  }
  .quick-view-name {
    font-size: 27px;
  }
  .quick-view-actions {
    position: fixed;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: 1fr;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e4e4df;
    backdrop-filter: blur(10px);
  }
  .quick-view-details-link {
    display: none;
  }
  .quick-view-skeleton {
    grid-template-columns: 1fr;
  }
  .quick-view-skeleton > div {
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-image,
  .product-card-media,
  .product-card-actions > *,
  .product-card-action,
  .quick-view-backdrop,
  .quick-view-panel {
    transition-duration: 0.01ms !important;
  }
  .quick-view-skeleton > div,
  .quick-view-skeleton i {
    animation: none;
  }
}

/* Main product information — aligned with the quick-view design */
.pdp-copy.pdp-copy-quick {
  display: flex;
  flex-direction: column;
  padding: 40px clamp(12px, 2vw, 26px);
  background: #fff;
  border-top: 1px solid #e8e8e4;
}

.pdp-copy-quick > .pdp-kicker {
  order: 1;
}
.pdp-copy-quick > h1 {
  order: 2;
}
.pdp-copy-quick > .pdp-rating {
  order: 3;
}
.pdp-copy-quick > .pdp-price-row {
  order: 4;
}
.pdp-copy-quick > .pdp-intro {
  order: 5;
}
.pdp-copy-quick > .pdp-buy-form {
  order: 6;
}
.pdp-copy-quick > .pdp-wishlist {
  order: 7;
}
.pdp-copy-quick > .pdp-promises {
  order: 8;
}
.pdp-copy-quick > .pdp-accordions {
  order: 9;
}

.pdp-copy-quick .pdp-kicker {
  color: #777772;
  font-family: "Google Sans", var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.pdp-copy.pdp-copy-quick h1 {
  margin: 16px 0 0;
  font-family: "Google Sans", var(--font-sans);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.pdp-copy-quick .pdp-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: "Google Sans", var(--font-sans);
  font-size: 13px;
}

.pdp-copy-quick .pdp-rating b {
  color: #050505;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.pdp-copy-quick .pdp-rating span {
  margin: 0;
  color: #7b7b76;
}

.pdp-copy-quick .pdp-price-row {
  margin-top: 28px;
  font-family: "Google Sans", var(--font-sans);
}

.pdp-copy-quick .pdp-price-row strong {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pdp-copy-quick .pdp-price-row del {
  font-size: 14px;
}
.pdp-copy-quick .pdp-price-row > span:last-child {
  display: none;
}

.pdp-copy-quick .pdp-intro {
  max-width: 590px;
  margin: 26px 0 0;
  color: #5f5f5a;
  font-size: 14px;
  line-height: 1.65;
}

.pdp-copy-quick .pdp-buy-form {
  margin-top: 4px;
}
.pdp-copy-quick .selected-variant {
  display: none;
}

.pdp-copy-quick .variant-heading {
  align-items: center;
  margin: 27px 0 13px;
  font-family: "Google Sans", var(--font-sans);
  font-size: 13px;
}

.pdp-copy-quick .variant-heading strong {
  font-weight: 600;
}
.pdp-copy-quick .variant-heading span {
  color: #7b7b76;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.pdp-copy-quick .pdp-color-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  overflow: visible;
  padding: 0;
}

.pdp-copy-quick .pdp-color-card {
  min-width: 0;
  width: 46px;
  height: 46px;
  display: block;
  padding: 3px !important;
  overflow: hidden;
  color: #050505;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  scroll-snap-align: none;
  transform: none;
}

.pdp-copy-quick .pdp-color-card:hover {
  background: #fff;
  border-color: #aaa;
  transform: none;
}

.pdp-copy-quick .pdp-color-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}

.pdp-copy-quick .pdp-color-card span,
.pdp-copy-quick .pdp-color-card > i {
  display: none;
}

.pdp-copy-quick .pdp-color-card.is-selected {
  color: #050505;
  background: #fff;
  border-color: #050505;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}

.pdp-copy-quick .pdp-size-heading {
  margin-top: 29px;
}

.pdp-copy-quick .pdp-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-copy-quick .pdp-size-options button {
  min-width: 58px;
  height: 48px;
  padding: 0 17px;
  color: #111;
  background: #fff;
  border: 1px solid #d8d8d3;
  border-radius: 999px;
  font-family: "Google Sans", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}

.pdp-copy-quick .pdp-size-options button:hover:not(:disabled) {
  border-color: #050505;
  transform: none;
}

.pdp-copy-quick .pdp-size-options button.is-selected {
  color: #fff;
  background: #050505;
  border-color: #050505;
}

.pdp-copy-quick .purchase-row {
  margin: 27px 0 16px;
}

.pdp-copy-quick .qty-stepper {
  grid-template-columns: 46px 42px 46px;
  height: 52px;
  overflow: hidden;
  border: 1px solid #d8d8d3;
  border-radius: 999px;
}

.pdp-copy-quick .qty-stepper button,
.pdp-copy-quick .qty-stepper input {
  height: 50px;
  font-family: "Google Sans", var(--font-sans);
}

.pdp-copy-quick .stock-status {
  gap: 9px;
  color: #555550;
  font-family: "Google Sans", var(--font-sans);
  font-size: 13px;
}

.pdp-copy-quick .stock-status small {
  display: none;
}

.pdp-copy-quick .pdp-add,
.pdp-copy-quick .pdp-buy-now {
  height: 54px;
  border-radius: 0;
  font-family: "Google Sans", var(--font-sans);
  font-weight: 600;
}

.pdp-copy-quick .pdp-wishlist button {
  font-family: "Google Sans", var(--font-sans);
  font-weight: 500;
}

@media (max-width: 900px) {
  .pdp-copy.pdp-copy-quick {
    padding: 30px 18px;
  }

  .pdp-copy.pdp-copy-quick h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
}
/* Catalog management and merchandising */
.catalog-main-nav {
  white-space: nowrap;
}
.catalog-nav-item {
  position: relative;
  padding: 0;
}
.catalog-mega {
  position: absolute;
  left: -24px;
  top: 62px;
  width: 260px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  background: #fff;
  border: 1px solid #e8e5df;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
  z-index: 70;
}
.catalog-mega a {
  padding: 8px 4px;
  color: #292824;
  font-size: 11px;
}
.catalog-nav-item:hover .catalog-mega,
.catalog-nav-item:focus-within .catalog-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.collection-hero-description {
  max-width: 620px;
  margin-top: 12px;
  color: #68665f;
  font-size: 14px;
  line-height: 1.7;
}
.catalog-landing-banner {
  max-width: 1400px;
  height: min(45vw, 520px);
  margin: 0 auto 44px;
  overflow: hidden;
  background: #efeee9;
}
.catalog-landing-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-featured-strip {
  max-width: 1400px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.catalog-featured-strip > header span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.catalog-featured-strip > header h2 {
  font-size: 30px;
  margin: 4px 0 20px;
}
.catalog-featured-strip > div {
  display: flex;
  gap: 14px;
  overflow: auto;
  padding-bottom: 8px;
}
.catalog-featured-strip a {
  min-width: 210px;
  display: grid;
  gap: 5px;
  color: inherit;
}
.catalog-featured-strip img {
  width: 210px;
  height: 128px;
  object-fit: cover;
  background: #eee;
}
.catalog-featured-strip strong {
  font-size: 13px;
}
.catalog-featured-strip small {
  color: #777;
}
.catalog-admin {
  display: grid;
  gap: 22px;
}
.catalog-admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(130deg, #111827, #28364b);
  color: #fff;
}
.catalog-admin-hero h1 {
  margin: 7px 0;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.04em;
}
.catalog-admin-hero p {
  max-width: 720px;
  color: #c8d0db;
}
.catalog-admin-hero > a {
  flex: none;
  padding: 11px 16px;
  border: 1px solid #ffffff50;
  border-radius: 10px;
  color: #fff;
}
.catalog-install {
  padding: 28px;
  border: 1px solid #f0c36d;
  background: #fffbeb;
  border-radius: 14px;
}
.catalog-install code {
  display: block;
  margin-top: 14px;
  padding: 14px;
  background: #18181b;
  color: #fafafa;
  border-radius: 8px;
}
.catalog-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.catalog-metrics article {
  padding: 20px;
  background: var(--admin-card, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.catalog-metrics span {
  display: block;
  font-size: 30px;
  font-weight: 800;
}
.catalog-metrics small {
  color: #6b7280;
}
.catalog-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: #eef0f3;
  border-radius: 12px;
  overflow: auto;
}
.catalog-tabs button {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-transform: capitalize;
  font-weight: 700;
  color: #667085;
}
.catalog-tabs button.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 8px #00000010;
}
.catalog-pane {
  display: none;
}
.catalog-pane.is-active {
  display: block;
}
.catalog-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
  gap: 18px;
  align-items: start;
}
.catalog-editor > form,
.catalog-list,
.catalog-assignment {
  padding: 22px;
  background: var(--admin-card, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}
.catalog-editor form > header,
.catalog-list > header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 18px;
}
.catalog-editor h2,
.catalog-list h2,
.catalog-assignment h2 {
  font-size: 19px;
  margin: 0;
}
.catalog-editor header p,
.catalog-assignment header p {
  color: #667085;
  font-size: 13px;
}
.catalog-editor header button,
.catalog-list header a {
  border: 0;
  background: #eef2f7;
  padding: 7px 11px;
  border-radius: 7px;
  color: #344054;
  font-size: 12px;
}
.catalog-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.catalog-form-grid label,
.catalog-assignment label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475467;
}
.catalog-form-grid input,
.catalog-form-grid select,
.catalog-form-grid textarea,
.catalog-assignment select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.catalog-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}
.catalog-form-grid .catalog-wide {
  grid-column: 1/-1;
}
.catalog-form-grid .catalog-check {
  display: flex;
  grid-column: auto;
  align-items: center;
  flex-direction: row;
}
.catalog-form-grid .catalog-check input {
  width: auto;
}
.catalog-save {
  margin-top: 16px;
  padding: 11px 16px;
  border: 0;
  border-radius: 9px;
  background: #111827;
  color: #fff;
  font-weight: 700;
}
.catalog-list {
  max-height: 760px;
  overflow: auto;
}
.catalog-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #eceef2;
}
.catalog-list article > div {
  min-width: 0;
  margin-right: auto;
}
.catalog-list strong,
.catalog-list small {
  display: block;
}
.catalog-list small {
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
}
.catalog-list article > span,
.catalog-list article > a {
  font-size: 11px;
  color: #667085;
}
.catalog-list article > button {
  padding: 6px 9px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: transparent;
  color: inherit;
}
.catalog-assignment > label {
  margin: 18px 0;
}
.catalog-assignment > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.catalog-assignment select[multiple] {
  min-height: 300px;
}
@media (max-width: 1050px) {
  .catalog-main-nav {
    gap: 12px;
  }
  .catalog-nav-item:nth-last-child(-n + 3) {
    display: flex;
  }
  .catalog-editor {
    grid-template-columns: 1fr;
  }
  .catalog-list {
    max-height: none;
  }
}
@media (max-width: 700px) {
  .catalog-admin-hero {
    align-items: start;
    flex-direction: column;
  }
  .catalog-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-form-grid,
  .catalog-assignment > div {
    grid-template-columns: 1fr;
  }
  .catalog-form-grid .catalog-wide {
    grid-column: auto;
  }
  .catalog-landing-banner {
    height: 58vw;
    margin-bottom: 24px;
  }
}
/* Dynamic first-order promotion */
.first-order-offer,
.bag-first-order,
.checkout-first-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #b9d8c2;
  border-radius: 12px;
  background: #f0faf3;
  color: #183e25;
}

/* Raksha Bandhan 2026 — restrained campaign layer */
.rakhi-announcement {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 16px;
  text-align: center;
  letter-spacing: 0.22em;
}
.rakhi-announcement span {
  color: #d7b46a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rakhi-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.28s ease,
    visibility 0.28s;
}
.rakhi-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.rakhi-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  cursor: default;
}
.rakhi-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 58px 54px 42px;
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(194, 145, 54, 0.12),
      transparent 38%
    ),
    #fbfaf7;
  border: 1px solid rgba(94, 70, 32, 0.22);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
  text-align: center;
  outline: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rakhi-modal.is-open .rakhi-card {
  transform: none;
}
.rakhi-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  background: transparent;
  font: 300 25px/1 Arial;
  color: #111;
}
.rakhi-close:hover,
.rakhi-close:focus-visible {
  background: #111;
  color: #fff;
}
.rakhi-thread {
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  overflow: visible;
  fill: none;
  stroke: #9c1f2f;
  stroke-width: 1.3;
}
.rakhi-thread circle {
  fill: #f6efe2;
  stroke: #b28a42;
}
.rakhi-thread path:last-child {
  fill: #b28a42;
  stroke: none;
}
.rakhi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 22px;
}
.rakhi-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9c1f2f;
}
.rakhi-dots i:nth-child(even) {
  background: #bd743c;
}
.rakhi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #8b672d;
}
.rakhi-card h2 {
  margin: 14px 0 17px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 6vw, 54px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.rakhi-offer {
  display: block;
  font-size: 15px;
  letter-spacing: 0.2em;
}
.rakhi-support {
  margin: 10px 0 22px;
  color: rgba(0, 0, 0, 0.6);
}
.rakhi-code {
  width: min(310px, 100%);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px dashed rgba(0, 0, 0, 0.32);
  background: #fff;
}
.rakhi-code span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rakhi-code b {
  font-size: 18px;
  letter-spacing: 0.16em;
}
.rakhi-card form button,
.rakhi-pdp-offer form button {
  width: min(310px, 100%);
  border: 1px solid #050505;
  background: #050505;
  color: #fff;
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.rakhi-card form button:hover,
.rakhi-card form button:focus-visible,
.rakhi-pdp-offer form button:hover {
  background: #9c1f2f;
  border-color: #9c1f2f;
}
.rakhi-card form button.is-applied {
  background: #315f42;
  border-color: #315f42;
  animation: rakhi-success 0.45s ease;
}
.rakhi-explore {
  display: block;
  margin: 17px auto 19px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.rakhi-card > small {
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
}
.rakhi-chip {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rakhi-chip span {
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #8d1d2b;
  color: #fff;
}
.rakhi-modal-open {
  overflow: hidden;
}
.rakhi-hero-badge {
  width: min(390px, 100%);
  margin: 0 0 24px;
  padding: 15px 18px;
  border-left: 2px solid #9c1f2f;
  background: linear-gradient(90deg, rgba(183, 139, 68, 0.12), transparent);
}
.rakhi-hero-badge span,
.rakhi-hero-badge b {
  display: block;
}
.rakhi-hero-badge span {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: #8b672d;
}
.rakhi-hero-badge b {
  margin: 5px 0 7px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.rakhi-hero-badge button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rakhi-product-badge {
  padding: 6px 9px;
  background: #8d1d2b;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.16em;
}
.rakhi-card-price small,
.rakhi-card-price em {
  display: block;
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.52);
}
.rakhi-card-price div {
  font-weight: 700;
}
.rakhi-card-price em {
  color: #8d1d2b;
}
.rakhi-card-note {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.52);
}
.rakhi-pdp-offer {
  margin: 15px 0 18px;
  padding: 19px;
  border: 1px solid rgba(142, 94, 30, 0.25);
  background: linear-gradient(120deg, #fbf7ef, #fff);
  text-align: left;
}
.rakhi-pdp-offer > span {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #8b672d;
}
.rakhi-pdp-offer h2 {
  margin: 6px 0;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}
.rakhi-pdp-offer p {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
}
.rakhi-pdp-offer form button {
  width: auto;
  padding: 11px 14px;
}
.bag-rakhi {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid rgba(142, 94, 30, 0.22);
  background: #fbf8f1;
}
.bag-rakhi b {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.bag-rakhi span {
  max-width: 620px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.62);
}
.result-campaign {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(142, 94, 30, 0.24);
  background: #fbf8f1;
}
.result-campaign span {
  font-size: 12px;
  line-height: 1.5;
}
.rakhi-admin-card {
  margin-bottom: 24px;
}
.rakhi-admin-stats {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.rakhi-admin-stats span {
  padding: 12px;
  background: #f6f6f4;
}
.rakhi-admin-stats small,
.rakhi-admin-stats b {
  display: block;
}
.rakhi-admin-stats small {
  font-size: 10px;
  color: #666;
}
.rakhi-admin-stats b {
  margin-top: 5px;
  font-size: 17px;
}
@keyframes rakhi-success {
  50% {
    transform: scale(1.025);
  }
}
@media (max-width: 700px) {
  .rakhi-announcement {
    display: block;
    line-height: 1.55;
    letter-spacing: 0.14em;
  }
  .rakhi-announcement span {
    display: block;
    margin-top: 2px;
    font-size: 8px;
  }
  .rakhi-card {
    padding: 45px 24px 30px;
  }
  .rakhi-card h2 {
    font-size: 39px;
  }
  .rakhi-thread {
    margin-top: 5px;
  }
  .rakhi-chip {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .bag-rakhi {
    display: grid;
  }
  .rakhi-admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rakhi-modal,
  .rakhi-card,
  .rakhi-card form button,
  .rakhi-pdp-offer form button {
    transition: none !important;
    animation: none !important;
  }
}
.first-order-offer {
  margin: 14px 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.first-order-offer b,
.bag-first-order b,
.checkout-first-order b {
  font-size: 13px;
}
.first-order-offer span,
.bag-first-order span,
.checkout-first-order span {
  font-size: 12px;
  color: #467153;
}
.bag-first-order {
  margin: 0 0 20px;
}
.checkout-first-order {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 18px;
}
.bag-item-title > strong {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.bag-item-title > strong del {
  font-size: 12px;
  font-weight: 500;
  color: #8b8b86;
}
.bag-unit-price b {
  color: #277341;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.promotion-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 20px;
}
.promotion-admin-grid {
  margin-bottom: 22px;
}
.promotion-admin-note {
  margin: 0 0 18px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}
.promotion-form label {
  display: grid;
  gap: 6px;
}
.promotion-form label > span {
  font-size: 11px;
  font-weight: 700;
  color: #475467;
}
.promotion-form .promotion-product-picker {
  grid-column: 1/-1;
}
.promotion-form select[multiple] {
  min-height: 190px;
  padding: 8px;
}
.promotion-form small {
  color: #667085;
  font-size: 11px;
}
.promotion-library article > strong {
  display: flex;
  align-items: center;
  gap: 10px;
}
.promotion-library article > strong > a {
  font-size: 12px;
  color: #344054;
  text-decoration: underline;
}
.promotion-allocation-note {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  background: #f8fafc;
}
.promotion-allocation-note b {
  font-size: 12px;
}
.promotion-allocation-note p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 1100px) {
  .promotion-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .first-order-offer,
  .bag-first-order,
  .checkout-first-order {
    align-items: flex-start;
    flex-direction: column;
  }
  .promotion-kpis {
    grid-template-columns: 1fr;
  }
}