/* Accesso — design tokens (CSS variables) + global styles + animations. */

:root {
  /* surface */
  --accesso-surface: #f7f6f2;
  --accesso-surface-container-lowest: #ffffff;
  --accesso-surface-container-low: #f1f1ed;
  --accesso-surface-container: #e8e8e4;
  --accesso-surface-container-high: #e3e3de;
  --accesso-surface-container-highest: #ddddd8;
  --accesso-inverse-surface: #0d0f0d;
  --accesso-on-surface: #2e2f2d;
  --accesso-on-surface-variant: #5b5c59;

  /* primary */
  --accesso-primary: #af232b;
  --accesso-primary-dim: #9e1521;
  --accesso-primary-container: #ff7672;
  --accesso-on-primary: #ffefee;
  --accesso-on-primary-container: #4e0008;

  /* secondary */
  --accesso-secondary: #006381;
  --accesso-secondary-container: #90dcff;
  --accesso-on-secondary-container: #004e65;

  /* tertiary */
  --accesso-tertiary: #516200;
  --accesso-tertiary-container: #d4ff00;
  --accesso-on-tertiary-container: #4e5f00;

  /* utility */
  --accesso-outline: #767774;
  --accesso-outline-variant: #adadaa;
  --accesso-radius-md: 1.5rem;
  --accesso-radius-lg: 2rem;
  --accesso-radius-xl: 3rem;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--accesso-surface);
  color: var(--accesso-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section{
  display: block !important;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ─── Home: floaty, marquee, spin, hero-grid-bg, tilt, noise, reveal, btn-primary ─── */

@keyframes accesso-floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
.floaty { animation: accesso-floaty 6s ease-in-out infinite; }

/* Marquee — two identical copies inside, translateX -50% creates a seamless loop. */
@keyframes accesso-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-track {
  animation: accesso-marquee 28s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  width: max-content;
  min-width: 100%;
}
.marquee-track > * { flex-shrink: 0; }
.marquee-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@keyframes accesso-spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: accesso-spin-slow 18s linear infinite; }

.hero-grid-bg {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,118,114,0.18), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(212,255,0,0.22), transparent 40%),
    radial-gradient(circle at 65% 90%, rgba(144,220,255,0.22), transparent 45%);
}

.tilt-card { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tilt-card:hover { transform: rotate(-2deg) scale(1.03); }

.noise-bg { position: relative; }
.noise-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>");
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, #af232b 0%, #9e1521 100%);
  box-shadow: 0 10px 30px -12px rgba(175, 35, 43, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-primary:hover { background: linear-gradient(180deg, #9e1521, #7a0010); }

/* ─── Shop page ─── */
.chip { cursor: pointer; transition: all .2s; }
.chip.active { background: var(--accesso-primary) !important; color: var(--accesso-on-primary) !important; }
.product-card { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.product-card:hover { transform: translateY(-4px); }

/* ─── Line clamp fallback ─── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Product page (PDP) ─── */
.accesso-swatch { cursor: pointer; transition: transform .2s; }
.accesso-swatch:hover { transform: scale(1.12); }
.accesso-swatch.active { box-shadow: 0 0 0 2px #f7f6f2, 0 0 0 4px #af232b; }

.accesso-thumb { cursor: pointer; transition: all .2s; }
.accesso-thumb.active { outline: 3px solid #af232b; outline-offset: 2px; }

.accesso-device-chip { transition: all .2s; }
.accesso-device-chip.active {
  background-color: var(--accesso-on-surface);
  color: var(--accesso-surface);
}

@keyframes accesso-slow-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.hero-tilt { animation: accesso-slow-tilt 8s ease-in-out infinite; }

/* Accordion: grid-template-rows trick for smooth height transitions */
details.acc > .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.2,.7,.2,1), opacity .24s ease;
  opacity: 0;
}
details.acc > .acc-body > .acc-inner { overflow: hidden; min-height: 0; }
details.acc[open] > .acc-body { grid-template-rows: 1fr; opacity: 1; }
details.acc > summary .chev { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
details.acc[open] > summary .chev { transform: rotate(180deg); }
details.acc > summary { transition: color .2s; list-style: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { color: var(--accesso-primary); }
@media (prefers-reduced-motion: reduce) {
  details.acc > .acc-body { transition: none; }
  details.acc > summary .chev { transition: none; }
}

/* Number input — hide browser spinners */
input[type="number"].appearance-none::-webkit-outer-spin-button,
input[type="number"].appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Product rail: CSS Grid approach ───
 * Grid with grid-auto-flow:column and grid-auto-columns gives each child
 * an exact width, and is immune to plugin CSS that resets display:flex.
 */

#trending {
  overflow: hidden;
}

#trending-rail,
[data-carousel] {
  position: relative;
}

#trending-rail {
  --accesso-rail-card-width: min(82vw, 260px);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem;
  overflow-x: auto !important;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#trending-rail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  #trending-rail {
    --accesso-rail-card-width: 300px;
    gap: 1.5rem;
  }
}

#trending-rail > * {
  flex: 0 0 var(--accesso-rail-card-width) !important;
  width: var(--accesso-rail-card-width) !important;
  max-width: calc(100vw - 4rem);
  scroll-snap-align: start;
  min-width: 0;
}

.accesso-rail-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 9999px !important;
  background: var(--accesso-surface-container-lowest) !important;
  color: var(--accesso-on-surface) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, opacity .2s, transform .15s;
  box-shadow: 0 2px 10px rgba(46, 47, 45, 0.06);
}
.accesso-rail-btn:hover { background: var(--accesso-primary); color: var(--accesso-on-primary); }
.accesso-rail-btn[data-disabled] {
  opacity: .35;
  transform: scale(.95);
}

/* ─── Studio ─── */
.tool-btn.active { background: var(--accesso-primary); color: var(--accesso-on-primary); }

.sticker { position: absolute; user-select: none; cursor: grab; touch-action: none; }
.sticker.drag { cursor: grabbing; }

.bg-swatch { cursor: pointer; transition: transform .15s; }
.bg-swatch.active {
  outline: 3px solid var(--accesso-primary);
  outline-offset: 3px;
  transform: scale(1.08);
}

.sticker-tile { cursor: pointer; transition: transform .15s; }
.sticker-tile:hover { transform: scale(1.1) rotate(-4deg); }

.phone-shell {
  background: linear-gradient(135deg, #1a1a1a 0%, #2e2f2d 100%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.tilt-preview { transform-style: preserve-3d; transition: transform .2s ease-out; }

.phone-mask { -webkit-mask-image: radial-gradient(closest-side, black 99%, transparent 100%); }

/* ─── Checkout stepper ─── */
.accesso-step .dot {
  background: var(--accesso-surface-container);
  color: var(--accesso-on-surface);
}
.accesso-step.active .dot { background: var(--accesso-primary); color: var(--accesso-on-primary); }
.accesso-step.done   .dot { background: var(--accesso-tertiary); color: var(--accesso-surface); }

.accesso-step .connector,
#accesso-stepper .connector { background: var(--accesso-surface-container); }
.accesso-step.active ~ .connector,
.accesso-step.done   ~ .connector,
.accesso-step.done   .connector,
.accesso-step.active .connector { background: var(--accesso-primary); }

/* Checkout form — pill inputs matching the reference design.
 * Labels are hidden (placeholders carry the hint text), fields use a rounded
 * pill with a thin outline, focus ring is primary red.
 */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid rgba(46, 47, 45, 0.2) !important;
  border-radius: 9999px !important;
  padding: 1rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  color: var(--accesso-on-surface) !important;
  height: auto !important;
  min-height: 54px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  line-height: 1.3 !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--accesso-primary) !important;
  box-shadow: 0 0 0 3px rgba(175, 35, 43, 0.15) !important;
}

/* Select2 (country/state) inner rendering */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.3 !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  color: var(--accesso-on-surface) !important;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 1.25rem !important;
  height: auto !important;
}

/* Placeholders — grayer, matches source field resting look */
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--accesso-on-surface-variant) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Hide all field labels (placeholders become the hints — source pattern) */
.woocommerce-checkout .form-row > label:not(.checkbox) {
  display: none !important;
}

/* Row rhythm */
.woocommerce-checkout .form-row { margin-bottom: .75rem; }

/* Grid layout for billing/shipping fields so name/city-country-zip align in
 * columns like the reference. WC adds .form-row-first/-last/-wide classes. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .shipping_address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout .shipping_address > .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_country_field,
.woocommerce-checkout .shipping_address > #shipping_country_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
.woocommerce-checkout .shipping_address > #shipping_address_1_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_2_field,
.woocommerce-checkout .shipping_address > #shipping_address_2_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_email_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_phone_field {
  grid-column: 1 / -1;
}

/* Hide the default "Billing details" heading — our form already has
 * the h2 "Contact Information" above it. */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  display: none !important;
}

/* Inline checkboxes (e.g. "Create account", newsletter opt-in) — small round dot */
.woocommerce-checkout .form-row.woocommerce-form__input-checkbox,
.woocommerce-checkout .woocommerce-form__label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accesso-on-surface);
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0 !important;
  line-height: 1.3;
}
.woocommerce-checkout input[type="checkbox"] {
  width: 1.1rem !important;
  height: 1.1rem !important;
  min-height: 0 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(46, 47, 45, 0.3) !important;
  padding: 0 !important;
  accent-color: var(--accesso-primary);
}

/* "Ship to a different address?" — keep visible but style as a soft section toggle */
.woocommerce-checkout h3#ship-to-different-address {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin: 1.5rem 0 .75rem !important;
  color: var(--accesso-on-surface) !important;
}
/* Checkout section headings — match the source h2 weight:
 * text-3xl md:text-4xl font-black tracking-[-0.03em]
 */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 1.75rem 0 1rem;
  color: var(--accesso-on-surface);
}
@media (min-width: 768px) {
  .woocommerce-checkout .woocommerce-billing-fields > h3,
  .woocommerce-checkout .woocommerce-shipping-fields > h3,
  .woocommerce-checkout .woocommerce-additional-fields > h3,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout h3 {
    font-size: 2.25rem;
  }
}

.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.wc_payment_methods li {
  border: 2px solid rgba(173, 173, 170, .2);
  border-radius: .75rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wc_payment_methods li.wc_payment_method input[type="radio"]:checked + label,
.wc_payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--accesso-primary);
  background: var(--accesso-surface-container-lowest);
  box-shadow: 0 0 0 3px rgba(175, 35, 43, 0.1);
}
.wc_payment_methods .payment_box {
  background: var(--accesso-surface-container-low);
  padding: 1rem;
  border-radius: .5rem;
  margin-top: .75rem;
  font-size: .85rem;
}

#place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
  width: 100%;
  background: var(--accesso-primary);
  color: var(--accesso-on-primary);
  border: 0;
  border-radius: 9999px;
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s, transform .1s;
  margin-top: 1rem;
}
#place_order:hover { background: var(--accesso-primary-dim); }
#place_order:active { transform: scale(.98); }

.shop_table {
  width: 100%;
  border-collapse: collapse;
}
.shop_table th, .shop_table td {
  padding: .5rem .25rem;
  text-align: left;
  font-size: .85rem;
  border-bottom: 1px solid rgba(173, 173, 170, .2);
}

/* ─── Cart overflow fix ─── */
.accesso-cart-qty-dec, .accesso-cart-qty-inc { background: transparent; border: 0; }

.woocommerce-info{
  display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ─── Checkout: coupon notice + coupon form ─── */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout > .woocommerce-info {
  background: var(--accesso-surface-container-low);
  border: 0 !important;
  border-radius: 9999px;
  padding: .85rem 1.5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accesso-on-surface-variant);
  margin: 0 0 1.75rem;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout > .woocommerce-info::before { display: none; }
.woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-checkout > .woocommerce-info a.showcoupon {
  color: var(--accesso-primary);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}
.woocommerce-form-coupon-toggle a.showcoupon:hover,
.woocommerce-checkout > .woocommerce-info a.showcoupon:hover { color: var(--accesso-primary-dim); }

form.checkout_coupon.woocommerce-form-coupon {
  background: var(--accesso-surface-container-low);
  border: 0;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
form.checkout_coupon.woocommerce-form-coupon > p:first-of-type {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accesso-on-surface-variant);
  margin: 0;
}
form.checkout_coupon.woocommerce-form-coupon .form-row {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
form.checkout_coupon.woocommerce-form-coupon input#coupon_code {
  width: 100% !important;
  background: var(--accesso-surface-container-lowest) !important;
  border: 0 !important;
  border-radius: .75rem !important;
  padding: .9rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  outline: none !important;
  transition: box-shadow .15s;
}
form.checkout_coupon.woocommerce-form-coupon input#coupon_code:focus {
  box-shadow: 0 0 0 3px rgba(175, 35, 43, 0.2);
}
form.checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"] {
  align-self: flex-start;
  background: var(--accesso-primary);
  color: var(--accesso-on-primary);
  border: 0;
  border-radius: 9999px;
  padding: .75rem 1.5rem;
  font-weight: 900;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
form.checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"]:hover {
  background: var(--accesso-primary-dim);
}
form.checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"]:active {
  transform: scale(.98);
}

/* ─── Edit Account form: first / last / display name in one row on desktop ─ */
.woocommerce-EditAccountForm > .clear { display: none !important; }

@media (min-width: 768px) {
  .woocommerce-EditAccountForm {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: .75rem;
    row-gap: .75rem;
  }
  /* Place the three name fields on the first row, one per column. */
  .woocommerce-EditAccountForm > #account_first_name_field   { grid-column: 1 / 2; grid-row: 1; width: 100% !important; }
  .woocommerce-EditAccountForm > #account_last_name_field    { grid-column: 2 / 3; grid-row: 1; width: 100% !important; }
  .woocommerce-EditAccountForm > #account_display_name_field { grid-column: 3 / 4; grid-row: 1; width: 100% !important; }
  /* Everything else spans the full row. */
  .woocommerce-EditAccountForm > p.form-row:not(#account_first_name_field):not(#account_last_name_field):not(#account_display_name_field),
  .woocommerce-EditAccountForm > fieldset {
    grid-column: 1 / -1;
    width: 100% !important;
    float: none !important;
  }
  /* Neutralise the floated form-row-first / form-row-last styles from WC. */
  .woocommerce-EditAccountForm > p.form-row-first,
  .woocommerce-EditAccountForm > p.form-row-last {
    float: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  /* Display-name helper text ("This will be how your name will be displayed…")
   * stays directly under its field — it sits inside the <p> so it's OK. */
}

/* ─── My Account pages ─────────────────────────────────────────────────── */

.accesso-account-wrap {
  padding: 2.5rem 1rem 5rem;
}
@media (min-width: 1024px) {
  .accesso-account-wrap { padding: 2.5rem 1.5rem 5rem; }
}
.accesso-account-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.accesso-account-heading {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--accesso-primary);
  margin-bottom: .25rem;
}
@media (min-width: 768px) {
  .accesso-account-heading { font-size: 3.75rem; }
}

.accesso-account-sub {
  color: var(--accesso-on-surface-variant);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

/* Two-column layout: sidebar + content */
.accesso-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .accesso-account-grid {
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
  }
}

/* Sidebar navigation */
.woocommerce-MyAccount-navigation {
  position: relative;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--accesso-surface-container-low);
  border-radius: 1rem;
  padding: .75rem;
}
@media (min-width: 1024px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    position: sticky;
    top: 7rem;
  }
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: .75rem 1.25rem;
  border-radius: 9999px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accesso-on-surface);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--accesso-surface-container-high);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accesso-primary);
  color: var(--accesso-on-primary);
}
.woocommerce-MyAccount-navigation ul li--customer-logout a::before {
  content: '↳ ';
  opacity: .6;
}

/* Content area */
.woocommerce-MyAccount-content {
  background: var(--accesso-surface-container-low);
  border-radius: 1.5rem;
  padding: 1.75rem;
  color: var(--accesso-on-surface);
}
@media (min-width: 768px) {
  .woocommerce-MyAccount-content { padding: 2.5rem; }
}
.woocommerce-MyAccount-content > p:first-child {
  font-size: 1rem;
  color: var(--accesso-on-surface);
  line-height: 1.6;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 1rem;
  color: var(--accesso-on-surface);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 1rem !important;
  border: 0 !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600 !important;
  background: var(--accesso-surface-container) !important;
  color: var(--accesso-on-surface) !important;
  margin-bottom: 1.5rem !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message { background: var(--accesso-tertiary-container) !important; color: var(--accesso-on-tertiary-container) !important; }
.woocommerce-error  { background: var(--accesso-primary-container) !important; color: var(--accesso-on-primary-container) !important; }
.woocommerce-error a,
.woocommerce-message a { color: inherit; font-weight: 800; text-decoration: underline; }

/* Login + register card layout */
.accesso-login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .accesso-login-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.accesso-login-card {
  background: var(--accesso-surface-container-low);
  border-radius: 1.5rem;
  padding: 2rem;
}
@media (min-width: 768px) {
  .accesso-login-card { padding: 2.5rem; }
}
.accesso-login-card h2 {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 .5rem;
  color: var(--accesso-on-surface);
}
@media (min-width: 768px) {
  .accesso-login-card h2 { font-size: 2.25rem; }
}
.accesso-login-card .accesso-login-tagline {
  color: var(--accesso-on-surface-variant);
  font-weight: 600;
  margin: 0 0 1.75rem;
  font-size: .95rem;
}

/* Account form fields (login/register/lost-password/edit-account) share
 * the checkout pill input styling. Apply the same rules globally to WC forms. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100% !important;
  background: var(--accesso-surface-container-lowest) !important;
  border: 1px solid rgba(46, 47, 45, 0.2) !important;
  border-radius: 9999px !important;
  padding: 1rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  color: var(--accesso-on-surface) !important;
  height: auto !important;
  min-height: 54px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--accesso-primary) !important;
  box-shadow: 0 0 0 3px rgba(175, 35, 43, 0.15) !important;
}

/* Labels on account forms (kept visible but small + tight) */
.woocommerce form .form-row label:not(.checkbox) {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accesso-on-surface-variant);
  margin-bottom: .35rem;
}
.woocommerce form .form-row .required { color: var(--accesso-primary); text-decoration: none; }

/* Primary WooCommerce buttons everywhere (login, register, save, update, etc.) */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce form .button,
.woocommerce-account button.button,
.woocommerce-account .button.wp-element-button {
  background: var(--accesso-primary) !important;
  color: var(--accesso-on-primary) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: .95rem 2rem !important;
  font-weight: 900 !important;
  font-size: .85rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--accesso-primary-dim) !important; }
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button:active { transform: scale(.98); }
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--accesso-on-surface) !important;
  color: var(--accesso-surface) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--accesso-inverse-surface) !important; }

/* Remember me + lost password row */
.woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem;
  margin: 0;
  font-weight: 600;
  color: var(--accesso-on-surface-variant);
}
.woocommerce-LostPassword {
  display: block;
  margin-top: .75rem;
}
.woocommerce-LostPassword a {
  color: var(--accesso-primary);
  font-weight: 800;
  text-decoration: none;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.woocommerce-LostPassword a:hover { color: var(--accesso-primary-dim); }

/* Orders / downloads tables */
.woocommerce-orders-table,
.woocommerce-table,
.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}
.woocommerce-orders-table thead,
.woocommerce-table thead {
  background: var(--accesso-surface-container);
}
.woocommerce-orders-table thead th,
.woocommerce-table thead th {
  padding: 1rem 1.25rem;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accesso-on-surface);
  text-align: left;
  border: 0;
}
.woocommerce-orders-table thead th:first-child { border-top-left-radius: .75rem; border-bottom-left-radius: .75rem; }
.woocommerce-orders-table thead th:last-child  { border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; }
.woocommerce-orders-table tbody td,
.woocommerce-table tbody td {
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--accesso-on-surface);
  border-bottom: 1px solid rgba(173, 173, 170, 0.2);
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table .button { padding: .5rem 1.1rem !important; font-size: .7rem !important; }

/* Addresses grid (billing + shipping) */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .woocommerce-Addresses { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.woocommerce-Address {
  background: var(--accesso-surface-container-lowest);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
.woocommerce-Address-title .edit {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accesso-primary);
  text-decoration: none;
}
.woocommerce-Address address {
  font-style: normal;
  font-weight: 600;
  color: var(--accesso-on-surface-variant);
  line-height: 1.6;
  font-size: .9rem;
}

/* Select2 (country dropdown) inherits pill + height fix */
.woocommerce-account .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--single {
  min-height: 54px !important;
  background: var(--accesso-surface-container-lowest) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(46, 47, 45, 0.2) !important;
}
.woocommerce .select2-container .select2-selection__rendered {
  line-height: 54px !important;
  padding-left: 1.5rem !important;
}
.woocommerce .select2-container .select2-selection__arrow {
  top: 50% !important;
  right: 1.25rem !important;
  transform: translateY(-50%);
}

/* ─── WordPress admin bar adjustment ─── */
.admin-bar nav.sticky { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar nav.sticky { top: 46px; }
}