/* ==========================================================================
   5MA FASHIONS — pages.css
   Page-level components. Loaded after components.css, before responsive.css.

   1.  Toolbar + filters (shop, category)
   2.  Pagination
   3.  List view
   4.  Product detail
   5.  Cart
   6.  Checkout
   7.  Account
   8.  Auth
   9.  Track order
   10. Blog
   11. FAQ / accordion
   12. Legal pages
   13. Contact
   14. About
   15. 404
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOOLBAR + FILTERS
   -------------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #F0E6E6;
}
.toolbar__count { font-size: 15px; color: #6D6767; margin: 0; }
.toolbar__count strong { color: #1C1A1A; font-weight: 600; }
.toolbar__right { display: flex; align-items: center; gap: 12px; }

.viewtoggle { display: flex; gap: 2px; padding: 2px; background: #FCF9F9; border-radius: 999px; }
.viewtoggle__btn {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 999px;
  color: #6D6767;
  cursor: pointer;
  transition: background .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1);
}
.viewtoggle__btn.is-active { background: #FFFFFF; color: #75174E; box-shadow: 0 1px 2px rgba(26,24,24,.03), 0 2px 6px rgba(26,24,24,.03); }

.sortbox { min-width: 208px; }
.sortbox .field__control { min-height: 42px; padding-block: 0; font-size: 14px; }

/* Active filter pills */
.activefilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.activefilters__pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  background: #FCF9F9;
  border: 1px solid #F0E6E6;
  font-size: 14px;
  color: #1C1A1A;
}
.activefilters__pill button {
  border: 0; background: none; padding: 0;
  color: #6D6767; font-size: 13px; cursor: pointer; line-height: 1;
}
.activefilters__pill button:hover { color: #75174E; }

/* Sidebar */
.filters {
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
  padding: 24px;
  position: sticky;
  top: 168px;
}
.filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #F6EFEF;
  margin-bottom: 16px;
}
.filters__title { font-size: 15px; font-weight: 600; letter-spacing: normal; margin: 0; }
.filters__clear { font-size: 14px; color: #75174E; background: none; border: 0; padding: 0; cursor: pointer; }

.fgroup { border-bottom: 1px solid #F6EFEF; padding-block: 16px; }
.fgroup:last-child { border-bottom: 0; padding-bottom: 0; }
.fgroup__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 0;
  font-size: 15px; font-weight: 600; color: #1C1A1A;
  cursor: pointer; text-align: left;
}
.fgroup__toggle i { font-size: 10px; color: #6D6767; transition: transform .26s cubic-bezier(.16,1,.3,1); }
.fgroup__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.fgroup__panel { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.fgroup__inner { padding-top: 16px; }

/* Checkbox / radio line */
.checkline { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px 0; }
.checkline input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkline__box {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid #F0E6E6;
  border-radius: 5px;
  background: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px;
  transition: background .18s cubic-bezier(.22,.61,.36,1), border-color .18s cubic-bezier(.22,.61,.36,1);
}
.checkline__box i { opacity: 0; transition: opacity .18s cubic-bezier(.22,.61,.36,1); }
.checkline input:checked + .checkline__box { background: #75174E; border-color: #75174E; }
.checkline input:checked + .checkline__box i { opacity: 1; }
.checkline input:focus-visible + .checkline__box { outline: 2px solid #75174E; outline-offset: 2px; }
.checkline__text { font-size: 15px; color: #4E4A49; flex: 1 1 auto; }
.checkline__count { font-size: 14px; color: #6D6767; }
.checkline:hover .checkline__text { color: #1C1A1A; }
.checkline--radio .checkline__box { border-radius: 50%; }
.sizegrid { display: flex; flex-wrap: wrap; gap: 8px; }
.sizebtn {
  min-width: 46px; height: 38px; padding: 0 12px;
  border: 1px solid #F0E6E6; border-radius: 8px;
  background: #FFFFFF; color: #4E4A49;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.sizebtn:hover { border-color: #75174E; color: #75174E; }
.sizebtn.is-active { background: #75174E; border-color: #75174E; color: #fff; }
.sizebtn.is-out { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* Mobile filter trigger */
.filterbar { display: none; gap: 12px; margin-bottom: 24px; }
.filterbar .btn5 { flex: 1 1 0; }


/* --------------------------------------------------------------------------
   2. PAGINATION
   -------------------------------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-top: 64px;
}
.pager__link {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #F0E6E6; border-radius: 999px;
  background: #FFFFFF; color: #1C1A1A;
  font-size: 15px; font-weight: 500;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.pager__link:hover { border-color: #75174E; background: #75174E; color: #fff; }
.pager__link.is-current { background: #75174E; border-color: #75174E; color: #fff; }
.pager__link.is-disabled { opacity: .38; pointer-events: none; }
.pager__gap { color: #6D6767; padding: 0 4px; }


/* --------------------------------------------------------------------------
   3. LIST VIEW
   -------------------------------------------------------------------------- */
.is-listview .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.is-listview .pcard {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
  padding: 16px;
}
.is-listview .pcard__body { padding-top: 0; align-self: center; }
.is-listview .pcard__title { font-size: 15px; }
.is-listview .pcard__actions { position: static; opacity: 1; transform: none; margin-top: 16px; max-width: 320px; }
.is-listview .pcard__action { background: #FCF9F9; }


/* --------------------------------------------------------------------------
   4. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items: start; }

.gallery { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; position: sticky; top: 168px; }
.gallery__thumbs { display: flex; flex-direction: column; gap: 12px; }
.gallery__thumb {
  border: 1px solid #F0E6E6; border-radius: 12px;
  overflow: hidden; padding: 0; background: #FCF9F9; cursor: pointer;
  position: relative; transition: border-color .18s cubic-bezier(.22,.61,.36,1);
}
.gallery__thumb::before { content: ""; display: block; padding-top: 133%; }
.gallery__thumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.gallery__thumb.is-active { border-color: #75174E; }
.gallery__thumbwrap { display: contents; }   /* transparent on desktop — thumbs behave exactly as before */
.gallery__thumbnav { display: none; }          /* mobile/tablet only (enabled in responsive.css) */

.gallery__stage {
  position: relative; border-radius: 18px; overflow: hidden;
   cursor: zoom-in;
}
.gallery__stage::before { content: ""; display: block; padding-top: 128%; }
.gallery__stage img {
  /* top/right/bottom/left spelled out for older Android WebView / Samsung Internet
     that predate `inset`; there the image otherwise sat BELOW the aspect box. */
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .26s cubic-bezier(.22,.61,.36,1);
}
.gallery__stage.is-zoomed img { transform: scale(1.9); cursor: zoom-out; }
.gallery__hint {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-size: 13px; font-weight: 600; letter-spacing: normal;
  color: #1C1A1A;
}

.pdp__cat { font-size: 13px; font-weight: 600; letter-spacing: normal; color: #6D6767; }
.pdp__title { font-size: 24px; font-weight: 400; line-height: 1.3; margin: 12px 0 16px; }
.pdp__ratingrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 15px; color: #6D6767; }
.pdp__pricerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.pdp__price { font-size: 30px; font-weight: 600; letter-spacing: normal; }
.pdp__mrp { font-size: 17px; color: #6D6767; text-decoration: line-through; }
.pdp__save { font-size: 15px; font-weight: 600; color: #75174E; }
.pdp__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pdp__tax { font-size: 14px; color: #6D6767; }

.pdp__block { padding-block: 24px; border-top: 1px solid #F6EFEF; }
.pdp__blocktop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pdp__blocklabel { font-size: 15px; font-weight: 350; letter-spacing: normal; color: #6D6767; margin: 0; }
.pdp__blocklink { font-size: 14px; color: #75174E; text-decoration: underline; }

/* Quantity */
.qty { display: inline-flex; align-items: center; border: 1px solid #F0E6E6; border-radius: 999px; overflow: hidden; background: #FFFFFF; }
.qty button {
  width: 44px; height: 48px; border: 0; background: transparent;
  color: #1C1A1A; font-size: 15px; cursor: pointer;
  transition: background .18s cubic-bezier(.22,.61,.36,1);
}
.qty button:hover { background: #FCF9F9; }
.qty input {
  width: 46px; height: 48px; border: 0; text-align: center;
  font-size: 15px; font-weight: 600; background: transparent; color: #1C1A1A;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }

.pdp__buy { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; justify-content: flex-start; }
.pdp__buy .btn5 { flex: 0 0 auto; width: 210px; min-height: 50px; }   /* compact, side by side, left-aligned */

/* Per-size quantity selector (product page) */
.sizeqty { display: flex; flex-direction: column; gap: 8px; }
.sizeqty__row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border: 1px solid #F0E6E6; border-radius: 12px; background: #FFFFFF;
  transition: border-color .18s cubic-bezier(.22,.61,.36,1), background .18s cubic-bezier(.22,.61,.36,1);
}
.sizeqty__row.is-selected { border-color: #75174E; background: #FCF9F9; }
.sizeqty__row.is-out { opacity: .6; background: #FBF7F7; }
.sizeqty__size {
  flex: 0 0 auto; min-width: 46px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #F0E6E6; border-radius: 8px; background: #FCF9F9;
  font-size: 14px; font-weight: 700; color: #1C1A1A;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.sizeqty__row.is-selected .sizeqty__size { background: #75174E; border-color: #75174E; color: #FFFFFF; }
.sizeqty__row.is-out .sizeqty__size { text-decoration: line-through; }
.sizeqty__size--type { min-width: 0; padding: 0 16px; font-weight: 600; white-space: nowrap; }
.sizeqty__stock { flex: 1 1 auto; font-size: 13px; color: #2E7D48; display: inline-flex; align-items: center; gap: 7px; }
.sizeqty__stock.is-out { color: #9A8F8F; }
.sizeqty__stock .dot { width: 7px; height: 7px; border-radius: 50%; background: #2E7D48; display: inline-block; }
.sizeqty__stock.is-out .dot { background: #C9BEBE; }
.sizeqty__na { flex: 0 0 auto; font-size: 13px; color: #9A8F8F; }
.qty--sm { border-radius: 999px; }
.qty--sm button { width: 38px; height: 40px; font-size: 12px; }
.qty--sm input { width: 40px; height: 40px; font-size: 14px; }
.sizeqty__summary {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  padding: 10px 14px; border-radius: 10px; background: #F7EFEF; color: #6D3F40; font-size: 13px;
}
.sizeqty__summary i { color: #75174E; }
.sizeqty__summary strong { color: #1C1A1A; }

/* Sign-in method (Google-only account, profile page) */
.signin-method { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #F0E6E6; border-radius: 12px; background: #FCF9F9; }
.signin-method__logo { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; border: 1px solid #F0E6E6; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #4285F4; }
.signin-method__body { display: flex; flex-direction: column; gap: 3px; }
.signin-method__name { font-size: 15px; font-weight: 600; color: #1C1A1A; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signin-method__badge { font-size: 12px; font-weight: 600; color: #2E7D48; background: #E7F5EC; border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px; }
.signin-method__email { font-size: 13px; color: #6D6767; }
.setpass { margin-top: 18px; border-top: 1px solid #F6EFEF; padding-top: 16px; }
.setpass__toggle { font-size: 14px; font-weight: 600; color: #75174E; cursor: pointer; list-style: none; }
.setpass__toggle::-webkit-details-marker { display: none; }
.setpass__toggle::before { content: "+ "; }
.setpass[open] .setpass__toggle::before { content: "\2212 "; }
.pdp__minor { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.pdp__minor button, .pdp__minor a {
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: #4E4A49; cursor: pointer;
}
.pdp__minor button:hover, .pdp__minor a:hover { color: #75174E; }

/* Detail panels */
.panels { border-top: 1px solid #F0E6E6; }
.panel { border-bottom: 1px solid #F6EFEF; }
.panel__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0; background: none; border: 0;
  font-size: 15px; font-weight: 600; color: #1C1A1A; cursor: pointer; text-align: left;
}
.panel__toggle i { color: #6D6767; font-size: 11px; transition: transform .26s cubic-bezier(.16,1,.3,1); }
.panel__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.panel__body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.panel__inner { padding-bottom: 24px; font-size: 15px; color: #4E4A49; }

.spec { list-style: none; margin: 0; padding: 0; }
.spec li { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #F6EFEF; font-size: 15px; }
.spec li:last-child { border-bottom: 0; }
.spec dt, .spec .k { flex: 0 0 150px; color: #6D6767; }
.spec .v { color: #1C1A1A; }

/* Review summary */
.revsum { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; align-items: center; }
.revsum__score { font-size: 51px; font-weight: 300; letter-spacing: normal; line-height: 1; }
.revbar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #6D6767; }
.revbar + .revbar { margin-top: 8px; }
.revbar__track { flex: 1 1 auto; height: 6px; background: #FCF9F9; border-radius: 999px; overflow: hidden; }
.revbar__fill { height: 100%; background: #75174E; border-radius: 999px; }


/* --------------------------------------------------------------------------
   5. CART
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 48px; align-items: start; }

.cartlist { border: 1px solid #F6EFEF; border-radius: 18px; overflow: hidden; background: #FFFFFF; }
.cartlist__head {
  display: grid; grid-template-columns: minmax(0,1fr) 140px 130px 110px 44px;
  gap: 16px; align-items: center;
  padding: 16px 24px;
  background: #FCF9F9;
  font-size: 15px; font-weight: 600; letter-spacing: normal;
  color: #6D6767;
}
.cartline {
  display: grid; grid-template-columns: minmax(0,1fr) 140px 130px 110px 44px;
  gap: 16px; align-items: center;
  padding: 24px;
  border-top: 1px solid #F6EFEF;
}
.cartline:first-of-type { border-top: 0; }
.cartline__product { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cartline__thumb { width: 84px; flex: 0 0 84px; border-radius: 12px; overflow: hidden; background: #FCF9F9; position: relative; }
.cartline__thumb::before { content: ""; display: block; padding-top: 128%; }
.cartline__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.cartline__name { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.cartline__name a { color: #1C1A1A; }
.cartline__opt { font-size: 14px; color: #6D6767; margin: 0; }
.cartline__remove { width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #6D6767; cursor: pointer; }
.cartline__remove:hover { background: #FCF9F9; color: #75174E; }
.cartline__label { display: none; font-size: 14px; color: #6D6767; }

.summary { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; padding: 24px; position: sticky; top: 168px; }
.summary__title { font-size: 15px; font-weight: 600; letter-spacing: normal; color: #6D6767; margin-bottom: 24px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: #4E4A49; margin-bottom: 12px; }
.summary__row strong { color: #1C1A1A; font-weight: 600; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid #F0E6E6;
  font-size: 20px; font-weight: 600;
}

/* Order-summary checkout button: compact height + breathing space from the Total row.
   Scoped to the cart CTA so other btn5--lg buttons (e.g. product page) are unaffected. */
[data-cart-cta] { margin-top: 18px; }
[data-cart-cta] .btn5--lg { min-height: 50px; font-size: 15px; }
.summary__note { font-size: 14px; color: #6D6767; margin-top: 12px; }

/* Free shipping — "FREE" pill, progress note and the crossing celebration.
   Uses existing brand colours; degrades to no animation under reduced-motion. */
.ship-free { color: #1E7A46; font-weight: 700; letter-spacing: .02em; }
.freeship-wrap { margin: -4px 0 14px; }
.freeship-wrap:empty { display: none; margin: 0; }
.freeship { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4;
  color: #75174E; background: #FBF3F7; border-radius: 10px; padding: 7px 12px; max-width: 100%; }
.freeship i { flex: 0 0 auto; }
.freeship strong { font-weight: 700; }
.freeship--on { color: #1E7A46; background: #E9F6EE; }
.freeship-wrap--drawer .freeship { width: 100%; }

.ma5-confetti { position: fixed; inset: 0; z-index: 1200; pointer-events: none; overflow: hidden; }
.ma5-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  transform: translate(0,0) rotate(0); animation: ma5conf var(--dur, 2.4s) cubic-bezier(.2,.6,.35,1) forwards; }
@keyframes ma5conf {
  0%   { opacity: 0; transform: translate(0,0) rotate(0); }
  6%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .ma5-confetti { display: none; } }

.coupon { display: flex; gap: 8px; margin-bottom: 24px; }
.coupon input {
  flex: 1 1 auto; min-height: 44px; padding: 0 16px;
  border: 1px dashed #F0E6E6; border-radius: 999px;
  font-size: 15px; background: #FFFFFF;
}
.coupon input:focus { outline: none; border-color: #75174E; }

.shipnote { display: flex; gap: 12px; align-items: flex-start; background: #FCF9F9; border-radius: 12px; padding: 16px; font-size: 14px; color: #4E4A49; margin-bottom: 24px; }
.shipnote i { color: #78C060; margin-top: 2px; }


/* --------------------------------------------------------------------------
   6. CHECKOUT
   -------------------------------------------------------------------------- */
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 48px; align-items: start; }

.stepcard { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; padding: 32px; }
.stepcard + .stepcard { margin-top: 24px; }
.stepcard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.stepcard__num {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 999px; background: #75174E; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.stepcard__title { font-size: 18px; font-weight: 500; margin: 0; }

.payopt { display: block; cursor: pointer; }
.payopt + .payopt { margin-top: 12px; }
.payopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.payopt__box {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid #F0E6E6; border-radius: 12px;
  padding: 16px 24px;
  transition: border-color .18s cubic-bezier(.22,.61,.36,1), background .18s cubic-bezier(.22,.61,.36,1);
}
.payopt input:checked + .payopt__box { border-color: #75174E; background: #F9F3F3; }
.payopt input:focus-visible + .payopt__box { outline: 2px solid #75174E; outline-offset: 2px; }
.payopt__dot {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid #F0E6E6; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.payopt__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #75174E; opacity: 0; transition: opacity .18s cubic-bezier(.22,.61,.36,1); }
.payopt input:checked + .payopt__box .payopt__dot::after { opacity: 1; }
.payopt__name { font-size: 15px; font-weight: 600; display: block; }
.payopt__desc { font-size: 14px; color: #6D6767; }

.minicart { list-style: none; margin: 0 0 24px; padding: 0; }
.minicart li { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #F6EFEF; }
.minicart li:last-child { border-bottom: 0; margin-bottom: 0; }
.minicart__thumb { width: 56px; flex: 0 0 56px; border-radius: 8px; overflow: hidden; position: relative; background: #FCF9F9; }
.minicart__thumb::before { content: ""; display: block; padding-top: 128%; }
.minicart__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.minicart__name { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.minicart__meta { font-size: 13px; color: #6D6767; margin: 0; }
.minicart__price { margin-left: auto; font-size: 14px; font-weight: 600; }


/* --------------------------------------------------------------------------
   7. ACCOUNT
   -------------------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 48px; align-items: start; }

.acctnav { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; overflow: hidden; position: sticky; top: 168px; }
.acctnav__who { display: flex; gap: 12px; align-items: flex-start; padding: 24px; background: #FCF9F9; }
.acctnav__who > span { min-width: 0; }   /* lets a long email wrap instead of overflowing */
.acctnav__avatar {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 999px;
  background: #75174E; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: normal;
}
.acctnav__name { font-size: 15px; font-weight: 600; display: block; }
.acctnav__mail { font-size: 14px; color: #6D6767; overflow-wrap: anywhere; word-break: break-word; display: block; margin-top: 3px; }
/* Customer ID: the quietest line in the header, sits under the wrapped email */
.acctnav__cid { display: block; margin-top: 5px; font-family: 'Outfit', Arial, Helvetica, sans-serif; font-size: 12.5px; line-height: 1.5; color: #8A8080; overflow-wrap: anywhere; }
.acctnav__cid strong { font-weight: 600; color: #6D6767; }
.acctnav__list { list-style: none; margin: 0; padding: 12px; }
.acctnav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  font-size: 15px; color: #4E4A49;
  transition: background .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1);
}
.acctnav__link i { width: 17px; text-align: center; color: #6D6767; }
.acctnav__link:hover { background: #FFFFFF; color: #1C1A1A; }
.acctnav__link.is-current { background: #75174E; color: #fff; }
.acctnav__link.is-current i { color: #fff; }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; padding: 24px; }
.stat__num { font-size: 30px; font-weight: 300; letter-spacing: normal; line-height: 1; display: block; }
.stat__label { font-size: 14px; color: #6D6767; margin-top: 8px; display: block; }

.panelcard { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; padding: 32px; }
.panelcard + .panelcard { margin-top: 24px; }
.panelcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.panelcard__title { font-size: 17px; font-weight: 500; margin: 0; }

.orderrow {
  display: grid; grid-template-columns: 1.5fr 1fr 0.9fr 1fr 1.1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 12px; border-top: 1px solid #F6EFEF; border-radius: 10px;
  font-size: 14.5px; transition: background 120ms ease;
}
.orderrow:hover { background: #FBF6F5; }
.orderrow:first-of-type { border-top: 0; }
.orderrow__cell { min-width: 0; }
.orderrow__cell:nth-child(3) { text-align: center; }                 /* items  */
.orderrow__cell:nth-child(4) { text-align: right; }                  /* total  */
.orderrow__cell:nth-child(5) { text-align: center; }                 /* status */
.orderrow__id { font-weight: 600; color: #1C1A1A; }
.orderrow__total { font-weight: 600; color: #1C1A1A; font-variant-numeric: tabular-nums; }
.orderrow__action { justify-self: end; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.orderrow__action .btn5--sm { width: auto; }
.orderrow__track { grid-column: 1 / -1; }
.orderrow__count { margin: 2px 0 0; font-size: 13px; color: #6D6767; }
.orderrow__label { display: none; font-size: 14px; color: #6D6767; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: normal;
}
.pill i { font-size: 7px; }
.pill--done    { background: #F9F3F3; color: #75174E; }
.pill--transit { background: #F4F1F1; color: #4E4A49; }
.pill--pending { background: rgba(170,82,83,.14); color: #7A5A18; }
.pill--cancel  { background: rgba(109,103,103,.14); color: #6D6767; }

.addrcard { border: 1px solid #F0E6E6; border-radius: 12px; padding: 24px; position: relative; }
.addrcard.is-default { border-color: #75174E; }
.addrcard__tag { position: absolute; top: 16px; right: 16px; }
.addrcard__name { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.addrcard__text { font-size: 14px; color: #4E4A49; line-height: 1.65; margin: 0 0 16px; }
.addrcard__text + .addrcard__email { margin-top: -14px; }
.addrcard__email { word-break: break-word; }
.addrcard__email--missing { color: #B95F83; font-style: italic; }
.addrcard__acts { display: flex; gap: 16px; }
.addrcard__acts button { background: none; border: 0; padding: 0; font-size: 14px; color: #75174E; cursor: pointer; }


/* --------------------------------------------------------------------------
   9. TRACK ORDER
   -------------------------------------------------------------------------- */
.track { list-style: none; margin: 0 0 28px; padding: 0; position: relative; }
.track::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: #F0E6E6; }
.track li { position: relative; padding-left: 48px; padding-bottom: 32px; }
.track li:last-child { padding-bottom: 0; }
/* Rose fill segment that grows as each stage completes (§17). */
.track li::after {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px;
  background: #75174E; transform: scaleY(0); transform-origin: top;
  transition: transform .45s ease;
}
.track li.is-done::after { transform: scaleY(1); }
.track li:last-child::after { display: none; }
.track__dot {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 999px;
  background: #FFFFFF; border: 2px solid #F0E6E6;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6D6767; font-size: 12px;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Completed = 5MA rose with a check (§14). Active = rose, stronger, with a soft ring (§15). */
.track li.is-done .track__dot { background: #75174E; border-color: #75174E; color: #fff; }
.track li.is-active .track__dot { background: #75174E; border-color: #75174E; color: #fff; box-shadow: 0 0 0 4px rgba(170,82,83,.14); }
.track__title { font-size: 15px; font-weight: 600; margin: 0 0 2px; transition: color .3s ease; }
.track li.is-active .track__title { font-weight: 700; color: #1C1A1A; }
.track__meta { font-size: 14px; color: #6D6767; margin: 0; transition: color .3s ease, opacity .3s ease; }
/* One-time pulse when a stage becomes active — plays on change only (§13, §18). */
@keyframes trackPulse { 0% { box-shadow: 0 0 0 0 rgba(170,82,83,.42); } 100% { box-shadow: 0 0 0 12px rgba(170,82,83,0); } }
.track li.is-justactivated .track__dot { animation: trackPulse .6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .track li::after { transition: none; }
  .track__dot, .track__title, .track__meta { transition: none; }
  .track li.is-justactivated .track__dot { animation: none; }
}


/* --------------------------------------------------------------------------
   10. BLOG
   -------------------------------------------------------------------------- */
.bcard { display: flex; flex-direction: column; height: 100%; }
.bcard__media { border-radius: 18px; overflow: hidden; position: relative; background: #FCF9F9; display: block; }
.bcard__media::before { content: ""; display: block; padding-top: 66%; }
.bcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.bcard__body { padding-top: 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.bcard__meta { font-size: 14px; color: #6D6767; margin-bottom: 8px; }
.bcard__title { font-size: 17px; font-weight: 500; line-height: 1.45; margin: 0 0 12px; }
.bcard__title a { color: #1C1A1A; }
.bcard__title a:hover { color: #75174E; }
.bcard__excerpt { font-size: 15px; color: #6D6767; margin: 0 0 16px; flex: 1 1 auto; }

.post { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 64px; align-items: start; }
.post__cover { border-radius: 26px; overflow: hidden; position: relative; background: #FCF9F9; margin-bottom: 48px; }
.post__cover::before { content: ""; display: block; padding-top: 52%; }
.post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__body {
  max-width: 72ch; font-size: 17px; line-height: 1.65; color: #4E4A49; }
.post__body h2 { font-size: 24px; font-weight: 500; margin: 48px 0 16px; color: #1C1A1A; }
.post__body h3 { font-size: 18px; margin: 32px 0 12px; }
.post__body ul { padding-left: 16px; margin-bottom: 24px; }
.post__body li { margin-bottom: 8px; }
.post__body blockquote {
  margin: 32px 0; padding: 24px 32px;
  border-left: 2px solid #75174E; background: #FCF9F9;
  border-radius: 0 12px 12px 0;
  font-size: 17px; color: #1C1A1A;
}
.post__aside { position: sticky; top: 168px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: 12px; }
.toc a { font-size: 15px; color: #4E4A49; }
.toc a:hover { color: #75174E; }
.sharerow { display: flex; gap: 8px; }
.sharerow a {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid #F0E6E6;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1C1A1A; font-size: 15px;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.sharerow a:hover { background: #1C1A1A; border-color: #1C1A1A; color: #fff; }


/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faqnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.faq { border-top: 1px solid #F0E6E6; }
.faq__item { border-bottom: 1px solid #F6EFEF; }
.faq__toggle {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 500; color: #1C1A1A;
}
.faq__toggle i { color: #75174E; font-size: 12px; margin-top: 4px; flex: 0 0 auto; transition: transform .26s cubic-bezier(.16,1,.3,1); }
.faq__toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.faq__body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.faq__inner { padding-bottom: 24px; font-size: 15px; color: #4E4A49; max-width: 760px; line-height: 1.65; }


/* --------------------------------------------------------------------------
   12. LEGAL PAGES
   -------------------------------------------------------------------------- */
.legal { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 64px; align-items: start; }
.legal__aside { position: sticky; top: 168px; }
.legal__body { font-size: 15px; line-height: 1.65; color: #4E4A49; max-width: 780px; }
.legal__body h2 { font-size: 21px; font-weight: 500; color: #1C1A1A; margin: 48px 0 16px; scroll-margin-top: 160px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body ul { padding-left: 16px; margin-bottom: 24px; }
.legal__body li { margin-bottom: 8px; }
.legal__updated { font-size: 14px; color: #6D6767; padding: 16px; background: #FCF9F9; border-radius: 12px; margin-bottom: 32px; }

/* Shipping page — Courier Service & Delivery duration (reuses .legal__body).
   Heading icon inherits the h2 size via em; the closing line is a soft brand
   highlight; the duration line bolds the region label. */
.legal__body h2 .legal-h2-ico { color: #75174E; font-size: 0.82em; margin-right: 9px; vertical-align: baseline; }
.ship-serve { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 6px 0 24px; padding: 10px 16px; background: #FBF3F7; color: #75174E; border-radius: 12px; font-weight: 600; line-height: 1.4; }
.ship-serve i { color: #75174E; }
.ship-duration { margin: 0 0 6px; }
.ship-duration:last-child { margin-bottom: 0; }
.ship-duration strong { color: #1C1A1A; }


/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 48px; align-items: start; }
.contactcard { background: #FFFFFF; border: 1px solid #F6EFEF; border-radius: 18px; padding: 24px; }
.contactcard + .contactcard { margin-top: 16px; }
.contactcard__row { display: flex; gap: 16px; align-items: flex-start; }
.contactcard__icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  background: #FCF9F9; color: #75174E;
  display: inline-flex; align-items: center; justify-content: center;
}
.contactcard__label { font-size: 15px; font-weight: 600; letter-spacing: normal; color: #6D6767; display: block; margin-bottom: 4px; }
.contactcard__value { font-size: 15px; color: #1C1A1A; margin: 0; line-height: 1.65; }
.mapframe { border-radius: 18px; overflow: hidden; border: 1px solid #F6EFEF; background: #FCF9F9; position: relative; }
.mapframe::before { content: ""; display: block; padding-top: 56%; }
.mapframe iframe, .mapframe img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }


/* --------------------------------------------------------------------------
   14. ABOUT
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; align-items: center; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.number__big { font-size: 42px; font-weight: 300; letter-spacing: normal; line-height: 1; display: block; color: #1C1A1A; }
.number__label { font-size: 14px; color: #6D6767; margin-top: 8px; display: block; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid #F0E6E6; }
.timeline li { padding: 0 0 32px 32px; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #75174E;
}
.timeline__year { font-size: 15px; font-weight: 600; letter-spacing: normal; color: #75174E; display: block; margin-bottom: 4px; }
.timeline__title { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.timeline__text { font-size: 15px; color: #6D6767; margin: 0; }


/* --------------------------------------------------------------------------
   15. 404 + GENERIC EMPTY
   -------------------------------------------------------------------------- */
.err { text-align: center; padding-block: 160px; }
.err__code {
  font-size: 80px; font-weight: 200;
  letter-spacing: normal; line-height: .9; color: #F0E6E6;
  display: block; margin-bottom: 24px;
}
.err__title { font-size: 26px; margin-bottom: 16px; }
.err__text { max-width: 520px; margin: 0 auto 32px; color: #6D6767; }
.err__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.blank { text-align: center; padding-block: 120px; border: 1px dashed #F0E6E6; border-radius: 18px; }
.blank__icon { font-size: 32px; color: #F0E6E6; }
.blank__title { font-size: 18px; margin: 24px 0 8px; }
.blank__text { font-size: 15px; color: #6D6767; max-width: 420px; margin: 0 auto 24px; }


/* ==========================================================================
   16. LISTING PAGE HERO  (new arrivals, best sellers, sale, search)
   ========================================================================== */
.pagehero {
  background: #FCF9F9;
  border-radius: 26px;
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
.pagehero__title { margin: 0 0 12px; }
.pagehero__lead { color: #4E4A49; max-width: 560px; margin: 0; }
.pagehero__facts { display: flex; gap: 32px; flex-wrap: wrap; }
.pagehero__fact { text-align: right; }
.pagehero__num { font-size: 34px; font-weight: 300; letter-spacing: normal; line-height: 1; display: block; }
.pagehero__label { font-size: 14px; color: #6D6767; margin-top: 4px; display: block; }
.pagehero--dark { background: #75174E; }
.pagehero--dark .pagehero__title,
.pagehero--dark .pagehero__num { color: #fff; }
.pagehero--dark .pagehero__lead { color: rgba(255,255,255,.75); }
.pagehero--dark .pagehero__label { color: rgba(255,255,255,.5); }


/* ==========================================================================
   17. RANK BADGE — best sellers only.
   The numbering is used because this list genuinely is an ordered ranking.
   ========================================================================== */
.ranked { position: relative; }
.ranked__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: normal;
}
.ranked--top .ranked__num { background: #75174E; }
/* Push the card's own flags clear of the rank chip */
.ranked .pcard__flags { left: 54px; }


/* ==========================================================================
   18. SALE TIERS
   ========================================================================== */
.tiers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tier {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 24px;
  border: 1px solid #F0E6E6; border-radius: 999px;
  background: #FFFFFF; color: #1C1A1A;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.tier:hover, .tier.is-active { background: #75174E; border-color: #75174E; color: #fff; }
.tier__count { font-size: 14px; opacity: .7; }


/* ==========================================================================
   19. SEARCH RESULTS
   ========================================================================== */
.searchsum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.searchsum__q { font-size: 26px; font-weight: 300; letter-spacing: normal; margin: 0; }
.searchsum__q em { font-style: normal; color: #75174E; }
.searchsum__count { font-size: 15px; color: #6D6767; }
.didyoumean { font-size: 15px; color: #4E4A49; margin-bottom: 24px; }


/* ==========================================================================
   20. ORDER SUCCESS
   ========================================================================== */
.success { text-align: center; padding-block: 64px 48px; }
.success__mark {
  width: 76px; height: 76px; margin: 0 auto 24px;
  border-radius: 999px;
  background: #F9F3F3;
  color: #78C060;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.success__title { font-size: 26px; margin-bottom: 12px; }
.success__text { max-width: 560px; margin: 0 auto 24px; color: #6D6767; }
.success__id {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border: 1px dashed #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 15px;
}
.success__id strong { letter-spacing: normal; }

.nextsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nextstep { text-align: center; padding: 24px; }
.nextstep__num {
  width: 36px; height: 36px; margin: 0 auto 16px;
  border-radius: 999px;
  border: 1px solid #F0E6E6;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #75174E;
}
.nextstep__title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.nextstep__text { font-size: 14px; color: #6D6767; margin: 0; }


/* ==========================================================================
   21. SIZE GUIDE
   ========================================================================== */
.sizetable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid #F6EFEF; }
.sizetable { width: 100%; border-collapse: collapse; min-width: 620px; background: #FFFFFF; }
.sizetable th, .sizetable td { padding: 16px 24px; text-align: left; font-size: 15px; }
.sizetable thead th {
  background: #FCF9F9;
  font-size: 15px; font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
  white-space: nowrap;
}
.sizetable tbody tr { border-top: 1px solid #F6EFEF; }
.sizetable tbody tr:hover { background: #FFFFFF; }
.sizetable td:first-child { font-weight: 600; }
.sizetable .num { color: #4E4A49; font-variant-numeric: tabular-nums; }

.measure { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.measure__item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
  padding: 24px;
}
.measure__fig {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 12px;
  background: #FCF9F9;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.measure__fig img { width: 100%; height: 100%; object-fit: contain; }
.measure__title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.measure__text { font-size: 14px; color: #4E4A49; margin: 0; line-height: 1.65; }

.lengthpick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.lengthcard {
  border: 1px solid #F0E6E6;
  border-radius: 18px;
  padding: 24px;
  transition: border-color .18s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.16,1,.3,1);
}
.lengthcard:hover { border-color: #75174E; transform: translateY(-3px); }
.lengthcard__size { font-size: 26px; font-weight: 300; letter-spacing: normal; display: block; }
.lengthcard__for { font-size: 14px; color: #75174E; font-weight: 600; margin: 8px 0 12px; display: block; }
.lengthcard__text { font-size: 14px; color: #6D6767; margin: 0; }


/* ==========================================================================
   22. STYLEGUIDE (styleguide.php only — safe to delete with that page)
   ========================================================================== */
.sg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 24px;
  border: 1px solid #F0E6E6;
  border-radius: 18px;
  background: #FFFFFF;
}
.sg-bar__group { display: flex; align-items: center; gap: 12px; }
.sg-bar__label {
  font-size: 13px; font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
}
.sg-toggle { display: flex; gap: 2px; padding: 4px; background: #FCF9F9; border-radius: 999px; }
.sg-toggle__btn {
  border: 0; background: transparent;
  border-radius: 999px;
  height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 500;
  color: #4E4A49; cursor: pointer;
  transition: background .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1);
}
.sg-toggle__btn.is-active { background: #FFFFFF; color: #75174E; box-shadow: 0 1px 2px rgba(26,24,24,.03), 0 2px 6px rgba(26,24,24,.03); }
.sg-bar__code { margin: 0; font-size: 13px; color: #6D6767; }
.sg-bar__code code {
  background: #FCF9F9; color: #1C1A1A;
  padding: 2px 8px; border-radius: 4px; font-size: 13px; margin-left: 4px;
}

.sg-pal { cursor: pointer; transition: border-color .18s cubic-bezier(.22,.61,.36,1); }
.sg-pal:hover { border-color: #75174E; }

.sg-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sg-swatch { display: flex; flex-direction: column; gap: 4px; min-width: 74px; }
.sg-swatch__chip {
  display: block; height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
}
.sg-swatch__name { font-size: 13px; font-weight: 600; color: #1C1A1A; }
.sg-swatch__hex  { font-size: 13px; color: #6D6767; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .sg-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sg-toggle { flex-wrap: wrap; }
  .sg-swatch { min-width: 64px; }
}
.sg-petal-1 { background: #F9F3F3; }
.sg-petal-2 { background: #F9F3F3; }
.sg-petal-3 { background: #75174E; }
.sg-petal-4 { background: #75174E; }
.sg-petal-5 { background: #F0E6E6; }
.sg-pal-grid { align-items: start; }


/* --------------------------------------------------------------------------
   GOOGLE AUTH BUTTON
   Google's brand guidelines require their mark unaltered on a white or a
   single dark surface, with the wordmark legible. So this stays white with
   a neutral border rather than taking the site's brand colour — the one
   place on the site where an outside brand sets the rules.
   -------------------------------------------------------------------------- */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #1C1A1A;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn-google:hover {
  border-color: #c9c2c2;
  background: #fdfcfc;
  box-shadow: 0 2px 10px rgba(28,26,26,.07);
  color: #1C1A1A;
}
.btn-google:active { background: #f7f4f4; }

.btn-google__mark { flex: 0 0 auto; display: block; }

@media (max-width: 575.98px) {
  .btn-google { height: 48px; font-size: 15px; gap: 10px; }
}


/* --------------------------------------------------------------------------
   AUTH FIELD REFINEMENTS
   -------------------------------------------------------------------------- */

/* Country prefix sits inside the control rather than beside it, so the field
   still reads as one object */
.field__prefixed {
  display: flex;
  align-items: stretch;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.field__prefixed:focus-within {
  border-color: #75174E;
  box-shadow: 0 0 0 3px rgba(170,82,83,.12);
}
.field__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 12px;
  border-right: 1px solid #F0E6E6;
  background: #FCF9F9;
  font-size: 15px;
  color: #6D6767;
  white-space: nowrap;
}
.field__prefixed .field__control {
  border: 0;
  border-radius: 0;
  background: none;
  flex: 1 1 auto;
  min-width: 0;
}
.field__prefixed .field__control:focus { box-shadow: none; }

/* Password reveal */
.field__withbtn { position: relative; display: block; }
.field__withbtn .field__control { padding-right: 48px; }

.field__reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6D6767;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.field__reveal:hover { background: #F9F3F3; color: #75174E; }
.field__reveal.is-on { color: #75174E; }
/* Cross-device tap reliability: always above the input, no tap delay / double-tap
   zoom, the SVG never becomes the event target, and a 46px hit area around the
   34px icon without changing its look. */
.field__reveal { z-index: 2; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.field__reveal > * { pointer-events: none; }
.field__reveal::before { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
.field__reveal:focus-visible { outline: 2px solid #75174E; outline-offset: 2px; }
/* Browsers' own in-field password controls would sit under our eye: Edge's reveal
   and Safari's key icon are hidden on wrapped fields only (AutoFill / Keychain
   still work from the keyboard bar and the autofill dropdown). */
.field__withbtn input::-ms-reveal, .field__withbtn input::-ms-clear { display: none; }
.field__withbtn input::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; }


/* --------------------------------------------------------------------------
   CHECKOUT ADDRESS BOOK
   Picking a saved address is the common path, so it is the visible one. The
   form only appears when something genuinely needs typing — a checkout that
   opens with eight empty fields is where people leave.
   -------------------------------------------------------------------------- */
.stepcard__head { position: relative; }

.stepcard__act {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #1C1A1A;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.stepcard__act:hover { background: #75174E; border-color: #75174E; color: #fff; }

.addrbook { display: grid; gap: 12px; }

.addrbook__item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  margin: 0;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.addrbook__item:hover { border-color: #ddd0d0; }
.addrbook__item.is-selected {
  border-color: #75174E;
  background: #F9F3F3;
  box-shadow: 0 2px 10px rgba(170,82,83,.08);
}
.addrbook__item input { position: absolute; opacity: 0; pointer-events: none; }

.addrbook__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid #F0E6E6;
  border-radius: 50%;
  background: #FFFFFF;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.addrbook__item.is-selected .addrbook__mark {
  border-color: #75174E;
  border-width: 5px;
}

.addrbook__body { flex: 1 1 auto; min-width: 0; }

.addrbook__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.addrbook__label { font-size: 13px; font-weight: 600; color: #1C1A1A; }
.addrbook__default {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
}
.addrbook__name { display: block; font-size: 15px; color: #1C1A1A; margin-bottom: 2px; }
.addrbook__text { display: block; font-size: 13px; line-height: 1.65; color: #6D6767; }
.addrbook__email { word-break: break-word; }
.addrbook__email--missing { color: #B95F83; font-style: italic; }

.addrbook__acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.addrbook__acts button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: #6D6767;
  cursor: pointer;
  padding: 2px 0;
  transition: color .2s ease;
}
.addrbook__acts button:hover { color: #75174E; }
.addrbook__acts button[data-addr-del]:hover { color: #b4342f; }

/* Add / edit form */
.addrform {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid #F6EFEF;
  border-radius: 12px;
  background: #FCF9F9;
  animation: addrformIn .24s cubic-bezier(.22,.61,.36,1);
}
.addrform[hidden] { display: none; }

@keyframes addrformIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.addrform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.addrform__title { font-size: 15px; font-weight: 600; color: #1C1A1A; margin: 0; }
.addrform__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6D6767;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.addrform__close:hover { background: #F9F3F3; color: #75174E; }

.addrform .field__control { background: #FFFFFF; }
.addrform .field__prefixed { background: #FFFFFF; }

.field__opt {
  font-size: 13px;
  font-weight: 400;
  color: #6D6767;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 4px;
}

.addrform__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.addrform__tag {
  height: 34px;
  padding: 0 16px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  color: #4E4A49;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.addrform__tag:hover { border-color: #75174E; color: #75174E; }
.addrform__tag.is-active { background: #75174E; border-color: #75174E; color: #fff; }

.addrform__foot { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .addrbook__item { padding: 12px; gap: 11px; }
  .addrbook__acts { flex-direction: row; gap: 14px; align-items: center; }
  .addrform { padding: 16px; }
  .stepcard__act { padding: 4px 12px; font-size: 13px; }
}


/* --------------------------------------------------------------------------
   EXCHANGE REQUEST
   Four steps, each a card, in the order the customer thinks about them:
   which item, what is wrong, what instead, where to collect. The "what
   happens next" block at the end is doing real work — the commonest reason
   people avoid an exchange is not knowing what they are signing up for.
   -------------------------------------------------------------------------- */
.exwindow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  background: #F9F3F3;
  font-size: 15px;
  line-height: 1.65;
  color: #4E4A49;
}
.exwindow__icon { flex: 0 0 auto; color: #75174E; margin-top: 0px; }
.exwindow strong { color: #75174E; }

.exform .panelcard { margin-bottom: 16px; }
.exform .panelcard__head { display: flex; align-items: center; gap: 12px; }
.panelcard__lead {
  font-size: 15px;
  line-height: 1.65;
  color: #6D6767;
  margin: 0 0 16px;
}

/* Item picker */
.expick { display: grid; gap: 12px; }

.expick__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.expick__item:hover { border-color: #ddd0d0; }
.expick__item.is-selected {
  border-color: #75174E;
  background: #F9F3F3;
  box-shadow: 0 2px 10px rgba(170,82,83,.08);
}
.expick__item input { position: absolute; opacity: 0; pointer-events: none; }

.expick__mark,
.exreason__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid #F0E6E6;
  border-radius: 50%;
  background: #FFFFFF;
  transition: border-color .22s ease, border-width .22s ease;
}
.expick__item.is-selected .expick__mark,
.exreason__item.is-selected .exreason__mark {
  border-color: #75174E;
  border-width: 5px;
}

.expick__thumb {
  flex: 0 0 auto;
  width: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: #FCF9F9;
}
.expick__thumb img { display: block; width: 100%; height: auto; }

.expick__body { flex: 1 1 auto; min-width: 0; }
.expick__name { display: block; font-size: 15px; font-weight: 500; color: #1C1A1A; margin-bottom: 2px; }
.expick__meta { display: block; font-size: 13px; color: #6D6767; margin-bottom: 2px; }
.expick__price { display: block; font-size: 15px; font-weight: 600; color: #1C1A1A; }

/* Reasons */
.exreason { display: grid; gap: 8px; }

.exreason__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease;
}
.exreason__item:hover { border-color: #ddd0d0; }
.exreason__item.is-selected { border-color: #75174E; background: #F9F3F3; }
.exreason__item input { position: absolute; opacity: 0; pointer-events: none; }
.exreason__label { display: block; font-size: 15px; font-weight: 500; color: #1C1A1A; }
.exreason__hint { display: block; font-size: 13px; color: #6D6767; margin-top: 2px; }

/* What happens next */
.exsteps { list-style: none; margin: 0; padding: 0; counter-reset: exs; }
.exsteps li { display: flex; gap: 14px; padding: 12px 0; }
.exsteps li + li { border-top: 1px solid #F6EFEF; }
.exsteps__num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F9F3F3;
  color: #75174E;
  font-size: 12px;
  font-weight: 600;
}
.exsteps strong { display: block; font-size: 15px; font-weight: 500; color: #1C1A1A; margin-bottom: 2px; }
.exsteps li > span:last-child { font-size: 13px; line-height: 1.65; color: #6D6767; }

.exform__fine {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #6D6767;
}
/* field errors use the global .field-error style in style.css */

@media (max-width: 575.98px) {
  .expick__item { padding: 12px; gap: 11px; }
  .expick__thumb { width: 52px; }
  .exwindow { padding: 12px 12px; font-size: 13px; }
}


/* --------------------------------------------------------------------------
   TRACKING
   The AWB card only renders once the parcel exists — before pickup there is
   no tracking number to show, and a blank field reads as broken.
   -------------------------------------------------------------------------- */
.awbcard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 24px;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  background: #F0E6E6;
  overflow: hidden;
}

.tracknote {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FCF9F9;
  font-size: 13px;
  line-height: 1.65;
  color: #4E4A49;
}
.tracknote i { color: #75174E; margin-top: 2px; flex: 0 0 auto; }

/* Something needs the customer's attention */
.tracknote--warn {
  background: #FBF0EF;
  border-color: #F2D9D7;
  color: #7A3630;
}
.tracknote--warn i { color: #B4342F; }
.tracknote--warn a { color: #94215F; text-decoration: underline; }

@media (max-width: 575.98px) {
}


/* Photo upload for damage claims */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 16px;
  border: 1.5px dashed #F0E6E6;
  border-radius: 12px;
  background: #FCF9F9;
  cursor: pointer;
  text-align: center;
  transition: border-color .22s ease, background .22s ease;
}
.dropzone:hover { border-color: #75174E; background: #F9F3F3; }
.dropzone__icon { color: #75174E; margin-bottom: 4px; }
.dropzone__title { font-size: 15px; font-weight: 500; color: #1C1A1A; }
.dropzone__hint { font-size: 13px; color: #6D6767; }


/* --------------------------------------------------------------------------
   TRACKING NUMBER
   Shown only once the parcel is actually booked. Before that the page says so
   in words rather than presenting an empty field, which reads as broken.
   -------------------------------------------------------------------------- */
.tracknum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 16px;
  margin-bottom: 12px;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  background: #F9F3F3;
}
.tracknum__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
  margin-bottom: 4px;
}
.tracknum__value {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: normal;
  color: #1C1A1A;
  font-variant-numeric: tabular-nums;
}
.tracknum__courier { display: block; font-size: 13px; color: #6D6767; margin-top: 2px; }
.tracknum__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tracknum__acts .btn5 svg { margin-left: 4px; }


/* --------------------------------------------------------------------------
   SHIPPING DESK
   -------------------------------------------------------------------------- */
.adminbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.adminbar__title { font-size: 26px; font-weight: 500; margin: 0 0 4px; color: #1C1A1A; }
.adminbar__lead { font-size: 15px; line-height: 1.65; color: #6D6767; margin: 0; max-width: 54ch; }
.adminbar__stats { display: flex; gap: 10px; flex-wrap: wrap; }

.adminstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FFFFFF;
}
.adminstat strong { font-size: 22px; font-weight: 600; color: #1C1A1A; line-height: 1.2; }
.adminstat span { font-size: 13px; color: #6D6767; margin-top: 2px; }

.shiprow { padding: 16px 0; border-bottom: 1px solid #F6EFEF; }
.shiprow:last-of-type { border-bottom: 0; padding-bottom: 0; }
.shiprow__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.shiprow__order { font-size: 15px; font-weight: 600; color: #1C1A1A; }
.shiprow__meta { font-size: 13px; color: #6D6767; }

.shiprow__form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field--inline { margin-bottom: 0; flex: 1 1 200px; }
.shiprow__hint { font-size: 13px; color: #6D6767; margin: 8px 0 0; }

.tablewrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
  border-bottom: 1px solid #F0E6E6;
  white-space: nowrap;
}
.dtable td { padding: 12px 12px; border-bottom: 1px solid #F6EFEF; vertical-align: top; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable__mono { font-variant-numeric: tabular-nums; letter-spacing: normal; }

.adminfine {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #6D6767;
}

@media (max-width: 767.98px) {
  .tracknum { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tracknum__value { font-size: 19px; }
  .shiprow__form { flex-direction: column; align-items: stretch; }
  .adminbar__stats { width: 100%; }
  .adminstat { flex: 1 1 auto; min-width: 0; }
}


/* Tracking number on the orders list */
.orderrow__track {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-right: 8px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FCF9F9;
  font-size: 13px;
}
.orderrow__tracklabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
}
.orderrow__trackno { font-variant-numeric: tabular-nums; color: #1C1A1A; font-weight: 500; }
.orderrow__track a { color: #75174E; font-size: 13px; }
.orderrow__track a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .orderrow__track { width: 100%; margin: 0 0 8px; justify-content: flex-start; }
}

/* Left column of the tracking-number card — flagged by the class audit */
.tracknum__left { display: block; }


/* --------------------------------------------------------------------------
   CART REFINEMENTS
   -------------------------------------------------------------------------- */

/* Save for later. Removing an item should not be the only option — a piece
   someone is unsure about is worth keeping rather than losing. */
.cartline__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 8px;
  font: inherit;
  font-size: 13px;
  color: #6D6767;
  cursor: pointer;
  transition: color .2s ease;
}
.cartline__save:hover { color: #75174E; }

/* ==========================================================================
   AUTH PAGES — LOGIN, REGISTER, RESET

   These fit one screen on desktop. The header is 152px and the announcement
   bar another 44, so the card has to be lean: tighter fields, tighter gaps,
   and the footer is hidden on these pages. Nobody browses the footer while
   logging in, and its 400-odd pixels are what forced the scroll.
   ========================================================================== */

.authpage {
  position: relative;
  min-height: calc(100vh - 196px);
  min-height: calc(100dvh - 196px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
  background: #FCF9F9;
}

/* Two soft brand washes, clear of the text */
.authpage::before,
.authpage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.authpage::before {
  width: 460px; height: 460px;
  top: -180px; left: -150px;
  background: radial-gradient(circle at 35% 35%, rgba(170,82,83,.10), rgba(170,82,83,0) 68%);
}
.authpage::after {
  width: 560px; height: 560px;
  right: -220px; bottom: -240px;
  background: radial-gradient(circle at 60% 40%, rgba(170,82,83,.08), rgba(170,82,83,0) 68%);
}

/* Kolam-style dot field, drawn in CSS so it costs no request */
.authpage__motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle, rgba(170,82,83,.16) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

.authcard {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  padding: 32px 32px 24px;
  border: 1px solid #F6EFEF;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(28,26,26,.04),
              0 24px 60px rgba(28,26,26,.10);
  animation: authIn .5s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes authIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.authcard__mark { display: block; width: 38px; height: auto; margin: 0 auto 12px; }

.authcard__head { text-align: center; margin-bottom: 16px; }

.authcard__title {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  color: #1C1A1A;
  margin: 0 0 4px;
}

.authcard__lead {
  font-size: 14px;
  line-height: 1.65;
  color: #6D6767;
  margin: 0;
}

/* Compact fields — the whole point is that this fits one screen */
.authcard .field { margin-bottom: 12px; }
.authcard .field__control { height: 44px; border-radius: 11px; font-size: 15px; }
.authcard .field__hint { margin-top: 4px; font-size: 13px; }
.authcard .checkline { margin-bottom: 16px !important; }
.authcard .btn5--block { height: 48px; border-radius: 999px; }
.authcard .btn-google { height: 46px; }

.authcard__rule {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 0;
  font-size: 13px;
  color: #6D6767;
}
.authcard__rule::before,
.authcard__rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #F0E6E6;
}

.authcard__alt {
  text-align: center;
  font-size: 14px;
  color: #6D6767;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #F6EFEF;
}
.authcard__alt a { color: #75174E; font-weight: 500; }
.authcard__alt a:hover { text-decoration: underline; }

.authcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.authcard__row a { font-size: 13px; color: #75174E; }
.authcard__row a:hover { text-decoration: underline; }

.authtrust {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13px;
  color: #6D6767;
}
.authtrust span { display: inline-flex; align-items: center; gap: 6px; }
.authtrust i { color: #75174E; font-size: 11px; }

/* Short viewports and phones scroll normally rather than being squeezed */
@media (max-height: 760px) {
  .authpage { min-height: 0; padding-block: 24px; }
}

@media (max-width: 575.98px) {
  .authpage { min-height: 0; padding: 24px 16px 32px; }
  .authcard { padding: 24px 16px 24px; border-radius: 18px; }
  .authcard__title { font-size: 22px; }
  .authcard__mark { width: 34px; margin-bottom: 12px; }
  .authtrust { gap: 12px 18px; }
  .authpage::before, .authpage::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .authcard { animation: none; }
}


/* --------------------------------------------------------------------------
   AUTH PAGES WITHOUT CHROME
   No header, no footer. That removes every route off the page, so the mark
   and a plain link have to carry it — otherwise someone who lands here by
   mistake is stuck.
   -------------------------------------------------------------------------- */
.authcard__home { display: block; width: max-content; margin: 0 auto 12px; }
.authcard__home .authcard__mark { margin: 0; }
.authcard__home:hover { opacity: .82; }

.authback {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 16px 0 0;
  font-size: 13px;
}
.authback a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6D6767;
  transition: color .2s ease;
}
.authback a:hover { color: #75174E; }
.authback svg { transition: transform .24s cubic-bezier(.22,.61,.36,1); }
.authback a:hover svg { transform: translateX(-3px); }

/* With the chrome gone the page owns the whole viewport */
.page-login,
.page-register,
.page-forgot { background: #FCF9F9; }

.page-login .authpage,
.page-register .authpage,
.page-forgot .authpage { min-height: 100vh; min-height: 100dvh; padding-block: 32px; }

@media (max-height: 760px) {
  .page-login .authpage,
  .page-register .authpage,
  .page-forgot .authpage { min-height: 0; padding-block: 24px; }
}


/* --------------------------------------------------------------------------
   ANCHOR TARGETS
   The header is sticky and 152px tall, so a plain #anchor jump puts the
   heading underneath it. Every jump target clears it by the header height
   plus a little breathing room.
   -------------------------------------------------------------------------- */

.legal__body h2,
.legal__body [id],
.faq-group,
[id^="sizing"], [id^="panel"], [id^="delivery"], [id^="returns"] {
  scroll-margin-top: 160px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The header shrinks on scroll, and disappears entirely below 992px */
@media (max-width: 991.98px) {
}


/* ==========================================================================
   INNER PAGE BANNER  (.pagehead)

   One banner for every page except home. The ground is drawn rather than
   loaded, so it costs no request and never pixellates — a photograph is
   optional and layers underneath when a page wants one.

   Mobile sizes are here; tablet, laptop and desktop are in responsive.css.
   ========================================================================== */

.pagehead {
  position: relative;
  overflow: hidden;

  padding-top: 32px;
  padding-bottom: 32px;
}

/* Optional photograph, sitting under everything */
.pagehead__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A veil so text stays readable whatever sits behind it */
.pagehead__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The text is centred now, so the veil has to be even rather than weighted
     to one side. It holds .78 across the middle and eases at both edges, so
     the photograph still shows at the corners. Checked against a pure white
     photograph: the lead text clears 5.02:1. */
  
}

.pagehead__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Breadcrumb sits above the title, small and quiet */
.pagehead__nav { margin-bottom: 12px; }

.pagehead .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.pagehead .crumb li { display: inline-flex; align-items: center; gap: 8px; }
.pagehead .crumb li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(232,217,200,.42);
}
.pagehead .crumb a { color: rgba(240,232,225,.72); transition: color .18s ease; }
.pagehead .crumb a:hover { color: #FFFFFF; }
.pagehead .crumb span[aria-current] { color: #E8D9C8; }
.pagehead .crumb i { font-size: 12px; }

.pagehead__title {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: normal;
  margin: 0;
}

.pagehead__lead {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(240,232,225,.74);
  margin: 12px 0 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* A short brand rule under the block, the one warm mark on a dark ground */
.pagehead__rule {
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  background: #C08A55;
}

/* Everything rises together on load */
.pagehead__inner > * {
  animation: pageheadIn .55s cubic-bezier(.22,.61,.36,1) both;
}
.pagehead__nav   { animation-delay: .02s; }
.pagehead__title { animation-delay: .08s; }
.pagehead__lead  { animation-delay: .14s; }
.pagehead__rule  { animation-delay: .20s; }

@keyframes pageheadIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pagehead__inner > * { animation: none; }
}


/* --------------------------------------------------------------------------
   POLICY POINTS
   The three terms a customer must read before ordering. Set apart from the
   prose so they cannot be skimmed past, and phrased as statements rather
   than warnings — firm, not hostile.
   -------------------------------------------------------------------------- */
.policyset {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  overflow: hidden;
}
.policyset li {
  position: relative;
  padding: 16px 16px 16px 48px;
  font-size: 15px;
  line-height: 1.65;
  color: #4E4A49;
  background: #FFFFFF;
}
.policyset li + li { border-top: 1px solid #F6EFEF; }
.policyset li strong { color: #1C1A1A; }

/* A small mark rather than a bullet */
.policyset li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #75174E;
}
.policyset li::after {
  content: "";
  position: absolute;
  left: 24.5px;
  top: 28.5px;
  width: 5px;
  height: 1.5px;
  background: #75174E;
}

@media (min-width: 992px) {
  .policyset li { padding: 16px 24px 16px 48px; }
  .policyset li::before { left: 24px; }
  .policyset li::after  { left: 28.5px; }
}

@media (max-width: 575.98px) {
  .policyset li { padding: 12px 16px 12px 48px; font-size: 15px; }
  .policyset li::before { left: 16px; top: 20px; }
  .policyset li::after  { left: 20.5px; top: 26.5px; }
}

@media (max-width: 575.98px) {
}


/* --------------------------------------------------------------------------
   NO RETURNS NOTICE

   It sat as a third red pill above two red pills, so it read as a button and
   the eye had three equal things to choose between. A notice is not an
   action: square corners, no fill, a rule down the left. It is impossible to
   mistake for something clickable, and the buttons below can now be told
   apart from each other.
   -------------------------------------------------------------------------- */
.pdp__sizewarn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 0 12px 12px;
  border-left: 3px solid #75174E;
  background: none;
  border-radius: 0;
  color: #1C1A1A;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
}
.pdp__sizewarn i { font-size: 14px; color: #75174E; }
.pdp__sizewarn span { color: #1C1A1A; }

@media (max-width: 575.98px) {
  .pdp__sizewarn { padding-left: 12px; gap: 8px; }
}


/* --------------------------------------------------------------------------
   SIZE CHARTS
   Five garments, five tables. Each is a block with its own heading so the
   page reads as a set of specifications rather than one long table.
   -------------------------------------------------------------------------- */
.sizeblock { margin-bottom: 40px; }
.sizeblock:last-of-type { margin-bottom: 0; }

.sizeblock__title {
  font-size: 20px;
  font-weight: 500;
  color: #1C1A1A;
  margin: 0 0 4px;
}
.sizeblock__sub {
  font-size: 14px;
  color: #6D6767;
  margin: 0 0 16px;
}

/* The note that prevents most sizing mistakes, set apart from the tables */
.sizenote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 32px 0 0;
  padding: 16px 16px;
  border-left: 3px solid #75174E;
  background: #FCF9F9;
  font-size: 15px;
  line-height: 1.65;
  color: #1C1A1A;
}
.sizenote i { color: #75174E; margin-top: 2px; flex: 0 0 auto; }

/* COD notice at checkout */
.cod-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 10px;
  background: #FCF9F9;
  font-size: 14px;
  line-height: 1.6;
  color: #4E4A49;
}
.cod-note i { color: #75174E; margin-top: 2px; flex: 0 0 auto; }
.cod-note a { color: #75174E; text-decoration: underline; }

@media (max-width: 575.98px) {
  .sizeblock { margin-bottom: 32px; }
  .sizenote { padding: 12px 16px; font-size: 14px; }
}


/* ==========================================================================
   PRICE FILTER

   Two <input type="range"> stacked on one track. Native inputs give keyboard
   control and screen-reader announcement for nothing; a JS slider library
   would be 12KB and would have to reimplement both.

   The trick is that both inputs are transparent and pointer-events: none,
   with only their thumbs re-enabled — so each thumb is grabbable across the
   whole track and neither input blocks the other.
   ========================================================================== */

/* Presets. Most people want a bracket, not a figure. */
.pricepresets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.pricepreset {
  padding: 8px 12px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 14px;
  color: #4E4A49;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pricepreset:hover { border-color: #75174E; color: #75174E; }
.pricepreset.is-on { background: #75174E; border-color: #75174E; color: #FFFFFF; }

/* The rail */
.pricerail {
  position: relative;
  height: 32px;
  margin-bottom: 16px;
}
.pricerail__track,
.pricerail__fill {
  position: absolute;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}
.pricerail__track { left: 0; right: 0; background: #F0E6E6; }
.pricerail__fill  { background: #75174E; }

.pricerail__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;   /* the track is inert … */
}

/* … only the thumbs take the pointer */
.pricerail__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #75174E;
  box-shadow: 0 1px 3px rgba(28,26,26,.18);
  cursor: grab;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pricerail__input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #75174E;
  box-shadow: 0 1px 3px rgba(28,26,26,.18);
  cursor: grab;
}
.pricerail__input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pricerail__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }
.pricerail__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(170,82,83,.22);
}

/* The max thumb sits above so the two can meet without one being trapped */
.pricerail__input--max { z-index: 2; }

/* Typed figures */
.pricefields {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pricefield {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FFFFFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pricefield:focus-within {
  border-color: #75174E;
  box-shadow: 0 0 0 3px rgba(170,82,83,.12);
}
.pricefield__cur {
  padding-left: 12px;
  font-size: 14px;
  color: #6D6767;
}
.pricefield input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  padding: 10px 12px 10px 4px;
  font: inherit;
  font-size: 15px;
  color: #1C1A1A;
}
.pricefield input:focus { outline: none; }

/* Steppers take room and the rail already covers coarse adjustment */
.pricefield input::-webkit-outer-spin-button,
.pricefield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pricefield input { -moz-appearance: textfield; }

.pricefields__dash {
  width: 10px;
  height: 1px;
  background: #C9BFBC;
  flex: 0 0 auto;
}

.pricefoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  color: #6D6767;
}
.pricereset {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: #75174E;
  cursor: pointer;
  text-decoration: underline;
}
.pricereset[hidden] { display: none; }

/* When the range excludes everything, say so rather than showing a void */
[data-product-grid].is-empty::after {
  content: "Nothing in that range. Try widening it or clearing the filter.";
  display: block;
  width: 100%;
  padding: 64px 24px;
  text-align: center;
  font-size: 15px;
  color: #6D6767;
}

@media (max-width: 767.98px) {
  .pricerail { height: 40px; }
  .pricerail__input { height: 40px; }
  /* A bigger target — 20px is fine for a mouse, small for a thumb */
  .pricerail__input::-webkit-slider-thumb { width: 26px; height: 26px; }
  .pricerail__input::-moz-range-thumb { width: 26px; height: 26px; }
  .pricepreset { font-size: 14px; padding: 8px 12px; }
}

/* ============================================================
   Listing AJAX — subtle loading state over the product grid
   ============================================================ */
[data-products-region] { position: relative; min-height: 120px; }
[data-products-region].is-loading { opacity: .5; transition: opacity .15s ease; pointer-events: none; }
[data-products-region].is-loading::after {
  content: ""; position: absolute; top: 44px; left: 50%;
  width: 34px; height: 34px; margin-left: -17px;
  border: 3px solid #EADFE0; border-top-color: #75174E; border-radius: 50%;
  animation: listSpin .7s linear infinite; z-index: 3;
}
@keyframes listSpin { to { transform: rotate(360deg); } }

/* Cart page polish: stable number widths (no layout shift on qty change),
   a gentle total transition, and a subtle warning tint for unavailable rows.
   Additive only — the approved cart layout is unchanged. */
.cartline__total,
.summary__row strong,
.summary__total span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: opacity 140ms ease;
}
.cartline__total { display: inline-block; min-width: 84px; }
.summary__row strong,
.summary__total span:last-child { min-width: 96px; display: inline-block; }
.cartline__warn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cartline--unavailable,
.cartline:has(.cartline__warn) {
  background: #FCF3F2;
  border-radius: 12px;
}

/* Saved-address Edit action — matches the existing card action buttons. */
.addrcard__acts a.addrcard__edit { font-size: 14px; color: #75174E; text-decoration: none; cursor: pointer; }
.addrcard__acts a.addrcard__edit:hover { text-decoration: underline; }

/* ---- Report Damage: one-report-per-item + delete own report ---- */
.expick__item.is-reported{opacity:.6;cursor:not-allowed;}
.expick__item.is-reported .expick__mark{visibility:hidden;}
.expick__reported{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#9A6B12;background:#FDF2DD;padding:3px 10px;border-radius:999px;}
.drrow{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.drrow__actions{flex:none;display:flex;align-items:center;gap:8px;}
.drrow__locked{font-size:12px;color:#9A8F8F;font-weight:500;}
[data-reports] .badge5{display:inline-block;font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;}
[data-reports] .badge5--green{background:#E6F4EC;color:#1E7A46;}
[data-reports] .badge5--amber{background:#FDF2DD;color:#9A6B12;}
[data-reports] .badge5--blue{background:#E9F0FB;color:#2A5AA8;}
[data-reports] .badge5--red{background:#FBEAEA;color:#B23B3B;}
.drmodal{position:fixed;inset:0;z-index:1200;background:rgba(20,16,16,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.drmodal__box{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.drmodal__title{font-size:19px;font-weight:700;color:#1C1A1A;margin:0 0 8px;}
.drmodal__text{font-size:14px;color:#6D6767;line-height:1.55;margin:0 0 20px;}
.drmodal__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.drtoast{position:fixed;right:22px;bottom:22px;z-index:1210;background:#1C1A1A;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;}
.drtoast.is-show{opacity:1;transform:translateY(0);}
.drtoast--ok{background:#1E7A46;}
.drtoast--err{background:#B23B3B;}

/* ---- Checkout: premium action message under Place order (address / payment) ---- */
.checkout-action-message{display:flex;align-items:flex-start;gap:10px;margin:11px 0 0;padding:11px 14px;border-radius:12px;background:#FCEFED;border:1px solid #E7C2C0;color:#3A2B2B;font-size:13.5px;font-weight:500;line-height:1.45;text-align:left;}
.checkout-action-message[hidden]{display:none;}
.checkout-action-message::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f071";color:#75174E;font-size:15px;line-height:1.5;flex:none;}
.checkout-action-message--error{background:#FBE9E7;border-color:#E3B2AE;}
.checkout-action-message--error::before{content:"\f06a";color:#C0392B;}
.checkout-action-message--success{background:#E9F6EE;border-color:#B7E0C4;}
.checkout-action-message--success::before{content:"\f058";color:#2E7D48;}
.checkout-action-message.is-fading{opacity:0;transition:opacity .28s ease;}
.checkout-action-message:not([hidden]){animation:cam-in .18s ease both;}
/* Place-order validation: keep the warning clear of the sticky header when scrolled
   to, and briefly highlight the message + Save button so the customer sees why. */
.checkout-action-message{scroll-margin-top:120px;}
[data-addr-save],[data-billing-save]{scroll-margin-top:120px;}
.checkout-flash{animation:checkout-flash 1.6s ease;}
@keyframes checkout-flash{0%,100%{box-shadow:0 0 0 0 rgba(117,23,78,0);}20%,60%{box-shadow:0 0 0 3px rgba(117,23,78,.28);}}
@media (prefers-reduced-motion:reduce){.checkout-flash{animation:none;}}
@keyframes cam-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}

/* ---- Checkout address forms: per-field validation ---- */
/* field errors use the global .field-error style in style.css */
/* invalid controls use the global rule in style.css */
.addrform .field__control{scroll-margin-top:150px;}
.addrform{scroll-margin-top:130px;}

/* ---- Page banner: brand gradient title on the light banner ----------------
   The exact heading ramp already used by the homepage headings, applied once
   to the shared page-banner component so every non-home page inherits it.
   Breadcrumb and subtitle stay dark for readability on the light artwork. */
.pagehead .pagehead__title {
  background-image: linear-gradient(100deg,
    #4A266F 0%,
    #723665 18%,
    #9D485E 34%,
    #D25E4C 52%,
    #E56243 68%,
    #DE4149 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Match the homepage banner heading exactly: same ramp, same weight. */
  font-weight: 700;
  padding-bottom: 2px;          /* stops descenders clipping when text is clipped to the fill */
  display: inline-block;
}
/* No background-clip support (older Safari/IE): show the deep violet instead
   of transparent text, so the title can never disappear. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pagehead .pagehead__title {
    color: #4A266F;
    -webkit-text-fill-color: #4A266F;
  }
}

/* Dark, readable breadcrumb + subtitle on the light banner */
.pagehead .crumb a               { color: #222222; }
.pagehead .crumb a:hover         { color: #000000; }
.pagehead .crumb span[aria-current] { color: #222222; }
.pagehead .crumb i               { color: #111111; }
.pagehead .crumb li + li::before { background: #666666; }   /* the dot is drawn, not text */
.pagehead__lead                  { color: #333333; }
/* the decorative rule keeps the existing brand accent (#C08A55) */

/* The veil existed to hold light text over a dark photograph. Now that the
   title carries the gradient and the breadcrumb/subtitle are dark, it is a
   light wash instead — it still calms a busy banner without greying the
   artwork or hurting contrast. */
.pagehead__veil {
 
}

/* ---- About Us: Vision, Mission & Motto ----------------------------------
   Light premium section with faint decorative mandalas. Content sits in the
   site's existing shell, so the width matches every other section; only the
   decoration extends wider. */
/* Warm ivory surface: a soft blush gradient with a faint central light, so the
   white cards lift off it and the purple/coral/gold brand colours read richer.
   Layer order is background → diagonal pattern → mandalas → content. */
.vmm { position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 54%),
    linear-gradient(135deg, #FFFDFC 0%, #FBF6F2 48%, #F8F1ED 100%); }
/* Diagonal pattern as its own layer, kept barely-there so it reads as texture. */
.vmm::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(120,95,90,.035) 0 1px, transparent 1px 22px); }
.vmm > .shell { position: relative; z-index: 2; }

/* Mandalas: muted warm taupe, low opacity, and a very slow rotation that reads
   as calm rather than spinning. */
/* Both sides use the SAME mandala at the SAME size and speed — mirrored only in
   direction, so the section reads as balanced rather than two different shapes. */
.vmm__deco { position: absolute; width: 560px; height: 560px;
  color: #BBAEA8; opacity: .18; pointer-events: none; z-index: 1;
  /* Vertically centred on both sides. The -50% offset lives in the keyframes
     rather than a separate transform, because a transform on the element would
     be overwritten by the rotation. */
  top: 50%;
  transform-origin: 50% 50%; will-change: transform;
  animation: vmmSpin 60s linear infinite; }
.vmm__deco svg { width: 100%; height: 100%; display: block; }
.vmm__deco--l { left: -230px; }
.vmm__deco--r { right: -230px; animation-direction: reverse; }
@keyframes vmmSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.vmm__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.vmm__mark { display: inline-flex; color: #C08A55; margin-bottom: 12px; }
.vmm__mark svg { width: 44px; height: 30px; }
.vmm__mark img { max-width: 44px; max-height: 32px; width: auto; height: auto; display: block; object-fit: contain; }
.vmm__eyebrow { display: block; font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #D2694C; margin-bottom: 10px; }
.vmm__title { font-size: 38px; line-height: 1.22; margin: 0; }

.vmm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.vmm__card { background: #FFFFFF; border: 1px solid rgba(111,67,61,.06); border-radius: 18px; padding: 38px 30px;
  box-shadow: 0 12px 35px rgba(60,35,30,.06); text-align: left;
  display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.vmm__card:hover { box-shadow: 0 18px 44px rgba(60,35,30,.10); transform: translateY(-2px); }
.vmm__ico { color: #1C1A1A; margin-bottom: 20px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: flex-start; }
/* Fixed icon area so uploaded SVGs of different natural sizes never push the
   card titles out of alignment, and never stretch. */
.vmm__ico svg,
.vmm__ico img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  object-fit: contain; }
.vmm__ico svg { width: 40px; height: 40px; }
.vmm__cardtitle { font-family: 'Outfit', Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #4A266F; margin: 0 0 12px; }
.vmm__rule { display: block; width: 40px; height: 3px; border-radius: 3px; background: #D2694C; margin-bottom: 16px; }
.vmm__text { font-size: 15.5px; line-height: 1.75; color: #4E4A49; margin: 0; }

@media (max-width: 1024px) {
  .vmm__deco { width: 440px; height: 440px; }
  .vmm__deco--l { left: -210px; }
  .vmm__deco--r { right: -210px; }
  .vmm__title { font-size: 32px; }
  .vmm__grid { gap: 20px; }
  .vmm__card { padding: 32px 24px; }
}
@media (max-width: 860px) {
  .vmm__grid { grid-template-columns: 1fr 1fr; }
  .vmm__grid > :last-child { grid-column: 1 / -1; }   /* 2 + 1 on tablet */
}
@media (max-width: 640px) {
  .vmm__grid { grid-template-columns: 1fr; gap: 18px; }
  .vmm__grid > :last-child { grid-column: auto; }
  .vmm__title { font-size: 27px; }
  .vmm__head { margin-bottom: 32px; }
  .vmm__card { padding: 28px 22px; }
  /* Mobile keeps the warm background; both mandalas shrink equally, stay
     centred and sit further off-canvas so they never compete with the cards. */
  .vmm__deco { width: 320px; height: 320px; opacity: .12; }
  .vmm__deco--l { left: -190px; }
  .vmm__deco--r { right: -190px; }
}

/* Decoration stays visible but stops moving when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  /* Animation off, but the centring transform must be reapplied here — it
     otherwise only exists inside the keyframes. */
  .vmm__deco { animation: none; transform: translateY(-50%); }
}

/* ------------------------------------------------------------------
   Account → Password section — clearer vertical rhythm + 2-col rules.
   ------------------------------------------------------------------ */
.pwset__form .field { margin-bottom: 16px; }
.pwset__curfield { margin-bottom: 20px; }                 /* separate Current from New */
.pwset__form .authcard__row { margin-bottom: 8px; }       /* label + Suggest → input */
.pwset .passrules {
  list-style: none; padding: 0; margin: 15px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 13px;
}
.pwset .passrules li { padding: 1px 0; color: #6D6767; }
.pwset .passrules li.is-met { color: #2E7D48; }
.pwset .passrules [data-rule-ico] { display: inline-block; width: 16px; }
.pwset__form [data-pwsubmit] { margin-top: 20px; }        /* breathing room before button */
@media (max-width: 480px) { .pwset .passrules { grid-template-columns: 1fr; } }

/* ============================================================
   Mobile polish — Order Detail header, long identifiers, cards
   (targeted; desktop unaffected)
   ============================================================ */
@media (max-width: 560px) {
  /* Invoice header: let the status badge drop to its own line instead of
     colliding with a long Invoice number (§5, §9). */
  .panelcard__head { flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
  .panelcard__head > div:first-child { min-width: 0; flex: 1 1 100%; }
  .panelcard__title { overflow-wrap: anywhere; }
  .panelcard__head .pill,
  .panelcard__head [data-order-badge] { flex: 0 0 auto; }

  /* Long invoice / AWB / email / product names must wrap, never overflow (§6,§14,§16,§44). */
  .panelcard__title, .orderrow__id, .summary__row, .address-block,
  .shipcard__courier, .shipcard__awbno { overflow-wrap: anywhere; }

  /* Shipment card actions stack full-width and stay tappable (§10). */
  .shipcard__awb { gap: 10px; padding: 10px 12px; }
  .shipcard__awbno { flex: 1 1 auto; min-width: 0; word-break: break-all; }
  .shipcard__copy { flex: 0 0 auto; }
  .shipcard__cta { text-align: center; margin-top: 18px; }
  .shipcard__cta { text-align: center; margin-top: 16px; }
  .shipcard__cta .btn5 { display: inline-flex; width: auto; box-sizing: border-box; margin: 0 auto; padding-left: 34px; padding-right: 34px; }

  /* Shipment header: heading + status badge wrap cleanly, never collide (§4). */
  .shipcard { padding: 18px; }
  .shipcard__top { flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
  .shipcard__title { min-width: 0; flex: 1 1 auto; }
  .shipcard__status { flex-shrink: 0; }
  .shipcard__awbno { font-size: 17px; }
  /* Breathing room between the box, helper text and the CTA (§9). */
  .shipcard__help { margin-top: 14px; }

  /* Download Invoice / row actions are easy to tap. */
  .u-flex.u-gap-3.u-wrap .btn5 { flex: 1 1 auto; text-align: center; }
}

/* Flex children that hold long strings need min-width:0 to wrap at any width (§44). */
.orderrow, .cartline, .summary__row, .panelcard__head { min-width: 0; }

/* Category Product Tabs — a horizontal tab bar ABOVE the product listing.
   Data-driven, no hover dependency, horizontally scrollable on small screens. */
.cattabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px; padding: 0 0 2px;
}
.cattabs__tab {
  display: inline-flex; align-items: center; white-space: nowrap;
  text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1;
  color: #4E4A49; background: #FFFFFF; border: 1px solid #E7DEE1;
  border-radius: 999px; padding: 10px 18px; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cattabs__tab:hover { border-color: #75174E; color: #75174E; }
.cattabs__tab.is-active { background: #75174E; border-color: #75174E; color: #FFFFFF; }
[data-cattabs-wrap] { max-width: 100%; min-width: 0; }
@media (max-width: 767.98px) {
  [data-cattabs-wrap] { overflow: hidden; }   /* belt-and-braces: parent never grows */
  /* One-row, horizontally-scrollable tab strip that never widens the page. The
     key is max-width:100% + min-width:0 so the flex row is bounded by the parent
     and scrolls internally instead of pushing the document wider. */
  .cattabs {
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;              /* old Edge/IE */
    scroll-snap-type: x proximity;
  }
  .cattabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .cattabs__tab {
    flex: 0 0 auto;                        /* natural width, never shrink or wrap */
    white-space: nowrap;
    padding: 9px 15px; font-size: 13px;
    scroll-snap-align: start;
  }
}
.pdp__length { font-size: 14px; color: #4E4A49; margin: 0 0 14px; }
.pdp__length-lbl { font-weight: 600; color: #1C1A1A; }

/* Product Types — purchasable variant selector on product details (§8, §34). */
.pdp__types { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 20px; }
.pdp__typeslabel { font-size: 14px; font-weight: 600; color: #1C1A1A; margin: 0; }
.pdp__typebtns { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__typebtn {
  cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 96px;
  color: #4E4A49; background: #FFFFFF; border: 1px solid #E7DEE1; border-radius: 8px; padding: 0 16px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pdp__typebtn.is-active { box-shadow: 0 6px 16px rgba(117,23,78,.18); }
.pdp__typebtn:hover { border-color: #75174E; color: #75174E; }
.pdp__typebtn.is-active { background: #75174E; border-color: #75174E; color: #FFFFFF; }

/* Home Video Section — premium editorial brand-story, sharing the Best Sellers heading rhythm. */
.home-video { position: relative; padding-top: 64px; padding-bottom: 64px;
  background: linear-gradient(180deg, #FBF6F1 0%, #F8EFEA 42%, #FBF6F1 100%); }
/* Optional admin background image: a very subtle wash under a soft ivory overlay so text stays readable. */
.home-video[data-hv-bg] { background-image: linear-gradient(rgba(251,246,241,.86), rgba(248,239,234,.90)), var(--hv-secbg);
  background-size: cover; background-position: center; }
.home-video__diamonds svg { width: 8px; height: 8px; display: block; flex: 0 0 auto; color: #BE9A5B; }
.home-video__stage { margin-top: 22px; }
.home-video__item { min-width: 0; }
/* Frame hugs the actual video at its natural aspect ratio — no fixed landscape box,
   no black/white/blurred filler. Portrait stays portrait, landscape stays landscape. */
.home-video__frame { position: relative; border-radius: 18px; overflow: hidden; background: transparent;
  width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
  box-shadow: 0 20px 50px rgba(64,32,44,.16); }
.home-video__frame video { display: block; width: auto; height: auto; max-width: 100%; max-height: 650px;
  margin: 0 auto; background: transparent; }
.home-video__stage--one { max-width: 880px; margin-left: auto; margin-right: auto; }
.home-video__stage--two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1120px; margin: 22px auto 0; }
.home-video__stage--carousel { max-width: 940px; margin-left: auto; margin-right: auto; }
.home-video__stage--carousel .home-video__item { padding: 0 10px; }
.home-video__stage--carousel .banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.home-video__stage--carousel .banner-arrow--prev { left: -6px; }
.home-video__stage--carousel .banner-arrow--next { right: -6px; }
.home-video__stage--carousel .slick-dots li button:before { color: #75174E; }

/* Single video: content + video in one 50/50 row (desktop), stacked (mobile). */
.home-video__grid { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 992px) {
  .home-video { padding-top: 64px; padding-bottom: 64px; }
  .home-video__grid { flex-direction: row; align-items: center; gap: 48px; }
  .home-video__content { flex: 1 1 50%; max-width: none; margin: 0; text-align: left; }
  .home-video__content .arches__dots { justify-content: flex-start; margin-left: 0; }
  .home-video__content .arches__lead { margin-left: 0; margin-right: 0; }
  .home-video__grid .home-video__stage,
  .home-video__grid .home-video__stage--one { flex: 1 1 50%; max-width: none; margin: 0; }
  .home-video__grid .home-video__frame video { max-height: 560px; }
}
@media (max-width: 767.98px) {
  .home-video { padding-top: 40px; padding-bottom: 40px; }
  .home-video__stage { margin-top: 16px; }
  .home-video__stage--two { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .home-video__frame { max-width: 300px; }
  .home-video__frame video { max-height: 420px; }
}

/* COD inline link (Shipping Policy) + gentle FAQ target highlight. */
.cod-link { color: #B95F83; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cod-link:hover { color: #75174E; }

/* --- Swipeable gallery stage + full-screen lightbox --------------------- */
.gallery__stage { touch-action: pan-y; }        /* let vertical scroll through, JS handles horizontal */

/* Main-image slider arrows — DESKTOP: hidden (click-to-zoom only). */
.gallery__stagenav { display: none; }

.glightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,14,18,.92);
  opacity: 0; transition: opacity .25s ease;
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}
.glightbox.is-open { opacity: 1; }
.glightbox__track {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}
.glightbox__track img {
  max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;                 /* never stretch/crop (§10) */
  user-select: none; -webkit-user-drag: none;
}
.glightbox__close {
  position: absolute; top: calc(env(safe-area-inset-top,0) + 16px); right: calc(env(safe-area-inset-right,0) + 16px);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.glightbox__close:hover { background: rgba(255,255,255,.28); }
.glightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: background .2s ease;
}
.glightbox__nav:hover { background: rgba(255,255,255,.26); }
.glightbox__nav--prev { left: 20px; }
.glightbox__nav--next { right: 20px; }
.glightbox__counter {
  position: absolute; bottom: calc(env(safe-area-inset-bottom,0) + 18px); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  background: rgba(0,0,0,.35); padding: 5px 12px; border-radius: 999px;
}
/* MOBILE: swipe-first — no bulky arrow buttons/backgrounds over the image (§6,§7). */
@media (hover: none), (max-width: 767.98px) {
  .glightbox__nav { display: none; }
  .glightbox__track img { max-width: 100vw; max-height: 84vh; }
}
@media (prefers-reduced-motion: reduce) {
  .glightbox, .gallery__nav { transition: none; }
}

/* --- Size Chart link (below price) + modal ------------------------------- */
.pdp-sizechart {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 0 18px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #75174E;
  transition: color .18s ease, opacity .18s ease;
}
.pdp-sizechart i { font-size: 14px; }
.pdp-sizechart { text-decoration: none; }
.pdp-sizechart:hover { color: #94215F; opacity: .9; text-decoration: none; }
.scmodal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,14,18,.82); padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.scmodal.is-open { opacity: 1; }
.scmodal__img {
  max-width: min(92vw, 900px); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;   /* never stretch/distort */
  border-radius: 10px; background: #fff;
}
.scmodal__close {
  position: absolute; top: calc(env(safe-area-inset-top,0) + 16px); right: calc(env(safe-area-inset-right,0) + 16px);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px); transition: background .2s ease;
}
.scmodal__close:hover { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) { .scmodal { transition: none; } }


/* ---------------------------------------------------------------------------
 * Admin SEO FAQ width fix. The shared .faq__inner caps answers at 760px (correct
 * for the standalone FAQ page), which left empty space on the right in the per-page
 * Admin SEO FAQ. Scope the full-width behaviour to .seo-faq-section ONLY, so the
 * standalone /faq page is untouched. Alignment still comes from the existing .shell
 * container; this just stops the inner answer being narrower than that container.
 * ------------------------------------------------------------------------- */
.seo-faq-section .faq-group,
.seo-faq-section .faq,
.seo-faq-section .faq__item,
.seo-faq-section .faq__body,
.seo-faq-section .faq__inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.seo-faq-section .faq__inner {
  overflow-wrap: anywhere;   /* long words / links wrap, no horizontal scroll */
  word-break: normal;
}