/* ===== BEGIN: core.css ===== */
:root{
  --bg:#fff;
  --card: rgba(255,255,255,.72);
  --stroke: rgba(12,20,34,.10);
  --text:#0b1220;
  --muted: rgba(11,18,32,.66);
  --muted2: rgba(11,18,32,.52);
  --shadow: 0 18px 46px rgba(10,18,35,.16);
  --shadow2: 0 10px 24px rgba(10,18,35,.14);
  --radius: 18px;
  --brand1:#5b6cff;
  --brand2:#9a7bff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0d14;
    --card: rgba(18,22,34,.62);
    --stroke: rgba(255,255,255,.10);
    --text:#f2f6ff;
    --muted: rgba(242,246,255,.68);
    --muted2: rgba(242,246,255,.52);
    --shadow: 0 24px 60px rgba(0,0,0,.45);
    --shadow2: 0 12px 30px rgba(0,0,0,.38);
    --brand1:#7b86ff;
    --brand2:#b08bff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}
.wrap{max-width: 520px; margin:0 auto; padding: 0 14px calc(120px + var(--safe-bottom));}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  margin: 0 0 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,.25));
  border-bottom: 1px solid var(--stroke);
}
@media (prefers-color-scheme: dark){
  .topbar{background: linear-gradient(to bottom, rgba(10,13,20,.76), rgba(10,13,20,.28));}
}
.topbar-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  max-width: 520px;
  margin: 0 auto;
}
.tb-left{display:flex; align-items:center; gap:10px; min-width:0;}
.tb-title{
  font-weight:700;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 62vw;
}
.iconbtn{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
  color: var(--text);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.iconbtn:active{transform: scale(.98); filter: brightness(.98);}
.iconbtn svg{width:20px; height:20px}
.cartbtn{position:relative;}
.cart-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #ffb86b, #ff6a6a);
  color: #fff;
  font-weight: 950;
  font-size: 11px;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  pointer-events:none;
}

/* Content cards */
.section{margin-top: 12px;}
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
}
.card + .card{margin-top: 12px;}
.pad{padding: 14px;}
.row{display:flex; gap:12px; align-items:center;}
.row.between{justify-content:space-between;}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.divider{
  height:1px;
  margin: 12px 0;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.34) 16%, rgba(203,213,225,.88) 50%, rgba(148,163,184,.34) 84%, rgba(148,163,184,0));
}

.label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.label a{
  font-weight: 800;
  color: var(--text);
  opacity:.9;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.label a svg{width:16px; height:16px}

.btn{
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing:.2px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 16px 36px rgba(91,108,255,.24);
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px}
.btn:active{transform: scale(.99); filter: brightness(.98);}
.btn.secondary{
  color: var(--text);
  background: rgba(255,255,255,.60);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
@media (prefers-color-scheme: dark){
  .btn.secondary{background: rgba(255,255,255,.10);}
}

/* Bottom sheet */
.sheet{
  position: fixed;
  inset: 0;
  z-index: 120;
  display:none;
}
.sheet.on{display:block}
.sheet-back{
  position:absolute; inset:0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  transition: opacity .18s ease;
}
.sheet.on .sheet-back{opacity:1}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  background: var(--bg);
  border-top: 1px solid var(--stroke);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow);
  transform: translateY(110%);
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
  padding-bottom: calc(14px + var(--safe-bottom));
  max-height: 85vh;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sheet-panel::-webkit-scrollbar{display:none;}
.sheet.on .sheet-panel{transform: translateY(0)}
.sheet-panel.dragging{transition: none !important;}
.handle{
  width: 46px; height: 5px;
  border-radius: 999px;
  background: rgba(11,18,32,.22);
  margin: 10px auto 6px;
  touch-action: none;
}
@media (prefers-color-scheme: dark){
  .handle{background: rgba(255,255,255,.20);}
}
.sheet-head{
  padding: 10px 14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  touch-action: none;
}
.sheet-head h3{margin:0; font-size: 14px; font-weight: 900;}
.sheet-body{padding: 0 14px 14px;}
.sheet-body .divider{margin: 16px 0 18px;}
.sheet-card + .divider{margin-top: 18px;}
.sheet-actions + .divider{margin-top: 18px; margin-bottom: 18px;}
.review-sheet__body .divider{margin: 18px 0 20px;}
.review-sheet__field + .row.between{margin-top: 12px !important;}

.sheet-card{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.94);
  overflow:hidden;
  display:flex; gap:12px;
  padding: 12px;
  align-items:center;
}
@media (prefers-color-scheme: dark){
  .sheet-card{background: rgba(18,22,34,.92);}
}
.sheet-card img{
  width: 68px; height: 68px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  object-fit: cover;
}
.sheet-card .t{font-weight: 900; font-size: 12.5px; margin:0; line-height:1.2;}
.sheet-card .m{font-size: 12px; color: var(--muted); margin-top: 6px;}
.sheet-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
}
.sheet-actions .btn{flex:1}

/* Desktop (PC): show sheets as centered modal windows */
@media (hover: hover) and (pointer: fine){
  .sheet{padding: 16px;}
  .sheet-panel{
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    border-radius: 22px;
    transform: translate(-50%, -46%) scale(.98);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  .sheet.on .sheet-panel{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .sheet-back{
    background: rgba(2,6,23,.44);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .handle{display:none;}
}

/* Helpers */
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.small{font-size: 12px}
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.40);
  font-weight: 900;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (prefers-color-scheme: dark){
  .pill{background: rgba(255,255,255,.06);}
}
.pill svg{width:16px; height:16px}

/* ===== END: core.css ===== */

/* ===== BEGIN: catalog-cards.css ===== */
.catalog-cards .product-card {
  display: block;
  border-radius: var(--card-r, 24px);
  overflow: hidden;
  background: var(--card, #ffffff);
  box-shadow: var(--shadow, 0 18px 45px rgba(15, 23, 42, 0.12));
  text-decoration: none;
  color: inherit;
  transform: translateZ(0);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.catalog-cards .product-card:active {
  transform: scale(0.99);
}

.catalog-cards .product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  background: #f3f4f6;
}

.catalog-cards .product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.catalog-cards .product-card__titlebar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 14px 14px 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 42%,
    rgba(0, 0, 0, 0.58) 100%
  );
  color: rgba(255, 255, 255, 0.96);
}

.catalog-cards .product-card__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 17px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.catalog-cards .product-card__sku {
  font-weight: 800;
  opacity: 0.86;
  flex: none;
}

.catalog-cards .product-card__foot {
  padding: 12px 12px 14px;
  display: grid;
  gap: 10px;
  background: var(--card, #ffffff);
}

.catalog-cards .product-card__colorline {
  display: none !important;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-cards .product-card__metarow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(15, 23, 42, 0.66);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.catalog-cards .product-card__meta-pill {
  min-width: 0;
  max-width: calc((100% - 14px) / 2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.catalog-cards .product-card__meta-icon {
  width: 12px;
  height: 12px;
  opacity: 0.72;
  flex: none;
}

.catalog-cards .product-card__meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-cards .product-card__meta-sep {
  color: rgba(15, 23, 42, 0.36);
  flex: none;
}

.catalog-cards .product-card__actions {
  --action-icon-size: 30px;
  display: grid;
  grid-template-columns: var(--action-icon-size) var(--action-icon-size);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.catalog-cards .product-card__more,
.catalog-cards .product-card__pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--action-icon-size);
  height: var(--action-icon-size);
  min-height: var(--action-icon-size);
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  color: rgba(15, 23, 42, 0.76);
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}

.catalog-cards .product-card__more {
  grid-column: 1 / 2;
  justify-self: start;
  cursor: pointer;
  user-select: none;
}

.catalog-cards .product-card__pick {
  grid-column: 2 / 3;
  justify-self: end;
  cursor: pointer;
  user-select: none;
}

.catalog-cards .product-card__pick-icon {
  width: 18px;
  height: 18px;
  opacity: 0.86;
  pointer-events: none;
}

.catalog-cards .product-card__colors {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.catalog-cards .color-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  flex: none;
}

.catalog-cards .color-dot--more {
  width: auto;
  height: 12px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.72);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.catalog-cards .product-card__more-label,
.catalog-cards .product-card__pick-label {
  display: none !important;
}

.catalog-cards .product-card__more-icon {
  position: static;
  transform: none;
  width: 18px;
  height: 18px;
  opacity: 0.86;
  pointer-events: none;
}

.catalog-cards .product-card:hover .product-card__more,
.catalog-cards .product-card:hover .product-card__pick {
  background: transparent !important;
  border-color: transparent;
  color: rgba(15, 23, 42, 0.94);
}

.catalog-cards .product-card__more.is-shared {
  color: rgba(34,197,94,.96);
}

.catalog-cards .product-card.is-fav .product-card__pick,
.catalog-cards .product-card__pick.is-fav {
  background: transparent !important;
  border-color: transparent;
  color: rgba(67,56,202,.98);
}

.catalog-cards .product-card.is-fav:hover .product-card__pick,
.catalog-cards .product-card:hover .product-card__pick.is-fav {
  background: transparent !important;
  border-color: transparent;
  color: rgba(67,56,202,1);
}

.catalog-cards .product-card.is-fav .product-card__pick-icon,
.catalog-cards .product-card__pick.is-fav .product-card__pick-icon {
  fill: currentColor;
  stroke: currentColor;
  opacity: 1;
}

.catalog-cards .product-card__pick[data-busy="1"] {
  opacity: .55;
  pointer-events: none;
}

.catalog-cards .product-card.is-out .product-card__more,
.catalog-cards .product-card.is-out .product-card__pick {
  opacity: 0.82;
}

.catalog-cards .cutout {
  position: absolute;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  padding: 8px 10px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.catalog-cards .cutout--left {
  left: 0;
  background: linear-gradient(135deg, #34d399, #22c55e);
  border: 0;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  margin-top: 8px;
  margin-left: 8px;
  padding: 6px 9px;
}

.catalog-cards .cutout--left::before,
.catalog-cards .cutout--left::after {
  content: none;
}

.catalog-cards .cutout--colors {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.catalog-cards .cutout--right {
  top: -1px;
  right: -1px;
  border: 0;
  background: #fff;
  border-bottom-left-radius: var(--cut-r, 24px);
  border-top-right-radius: var(--card-r, 24px);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
}

.catalog-cards .cutout--right::before,
.catalog-cards .cutout--right::after {
  content: "";
  position: absolute;
  width: var(--cut-r, 24px);
  height: var(--cut-r, 24px);
  background: inherit;
  -webkit-mask-image: radial-gradient(
    circle at 0 100%,
    transparent var(--cut-r, 24px),
    #000 calc(var(--cut-r, 24px) + 1px)
  );
  mask-image: radial-gradient(
    circle at 0 100%,
    transparent var(--cut-r, 24px),
    #000 calc(var(--cut-r, 24px) + 1px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border: 0;
  box-shadow: none;
}

.catalog-cards .cutout--right::before {
  top: 0;
  right: calc(100% - 1px);
}

.catalog-cards .cutout--right::after {
  top: calc(100% - 1px);
  right: 0;
}

.catalog-cards .status-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(6, 95, 70, 0.92);
}

.catalog-cards .status-text__short { display: none; }

.catalog-cards .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(6, 95, 70, 0.9);
  box-shadow: 0 0 0 4px rgba(6, 95, 70, 0.18);
}

.catalog-cards .product-card.is-out .cutout--left:not(.cutout--colors) {
  background: linear-gradient(135deg, #fda4af, #fb7185);
  box-shadow: 0 10px 30px rgba(251, 113, 133, 0.22);
}

.catalog-cards .product-card.is-out .status-text { color: rgba(127, 29, 29, 0.92); }

.catalog-cards .product-card.is-out .status-dot {
  background: rgba(127, 29, 29, 0.9);
  box-shadow: 0 0 0 4px rgba(127, 29, 29, 0.18);
}

.catalog-cards .price-text {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.catalog-cards .price-text__short { display: none; }

@media (max-width: 520px) {
  .catalog-cards .cutout--right {
    top: -2px;
    right: -2px;
  }

  .catalog-cards .cutout--right::before {
    right: calc(100% - 2px);
  }

  .catalog-cards .cutout--right::after {
    top: calc(100% - 2px);
  }

  .catalog-cards .product-card {
    box-shadow: var(--shadow-soft, var(--shadow, 0 10px 28px rgba(15, 23, 42, 0.10)));
  }

  .catalog-cards .product-card__titlebar {
    padding: 12px 12px 11px;
  }

  .catalog-cards .product-card__title {
    font-size: 15px;
  }

  .catalog-cards .product-card__sku {
    font-size: 12px;
  }

  .catalog-cards .product-card__foot {
    padding: 10px 10px 12px;
    gap: 8px;
  }

  .catalog-cards .product-card__colorline {
    font-size: 11px;
  }

  .catalog-cards .product-card__metarow {
    font-size: 10.5px;
    gap: 5px;
  }

  .catalog-cards .product-card__meta-pill {
    gap: 3px;
    max-width: calc((100% - 12px) / 2);
  }

  .catalog-cards .product-card__meta-icon {
    width: 11px;
    height: 11px;
  }

  .catalog-cards .product-card__more,
  .catalog-cards .product-card__pick {
    width: var(--action-icon-size);
    height: var(--action-icon-size);
    min-height: var(--action-icon-size);
    padding: 0;
  }

  .catalog-cards .product-card__actions {
    --action-icon-size: 28px;
  }

  .catalog-cards .product-card__more {
    padding-right: 0;
  }

  .catalog-cards .color-dot {
    width: 10px;
    height: 10px;
  }

  .catalog-cards .color-dot--more {
    height: 10px;
    padding: 0 5px;
    font-size: 10px;
  }

  .catalog-cards .cutout {
    padding: 7px 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  }

  .catalog-cards .cutout--left {
    margin-top: 6px;
    margin-left: 6px;
    padding: 5px 7px;
  }

  .catalog-cards .status-text {
    gap: 6px;
    font-size: 11px;
  }

  .catalog-cards .status-text__long { display: none; }
  .catalog-cards .status-text__short { display: inline; }

  .catalog-cards .status-dot {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.18);
  }

  .catalog-cards .product-card.is-out .status-dot {
    box-shadow: 0 0 0 3px rgba(127, 29, 29, 0.18);
  }

  .catalog-cards .price-text {
    font-size: 15px;
  }

  .catalog-cards .price-text__long { display: none; }
  .catalog-cards .price-text__short { display: inline; }
}

/* ===== END: catalog-cards.css ===== */

/* ===== BEGIN: shop.css ===== */
:root {
  --bg-0: #f6f3f9;
  --bg-1: #eef2ff;
  --bg-2: #f7f4fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.62);
  --stroke: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.10);
  --card-r: 24px;
  --cut-r: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  min-height: 100vh;
}

/* Topbar */
.shop-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(0);
  opacity: 1;
  transition: transform .22s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform, opacity;
}

.shop-topbar.is-hidden{
  transform: translateY(calc(-100% - 8px));
  opacity: 0;
  box-shadow: none;
  pointer-events: none;
}

.shop-topbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.shop-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.92);
  font-weight: 800;
  letter-spacing: -0.02em;
  user-select: none;
}

.shop-brand__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18);
}

.shop-search {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.shop-cartbtn {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.80);
  color: rgba(15, 23, 42, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.shop-cartbtn:active { transform: scale(0.99); }
.shop-cartbtn svg { width: 20px; height: 20px; }

.shop-filterbtn{
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.shop-cartbtn__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffb86b, #ff6a6a);
  color: #fff;
  font-weight: 950;
  font-size: 11px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  pointer-events: none;
}

.shop-search__input {
  flex: 1 1 auto;
  width: auto;
  max-width: 560px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.80);
  color: rgba(15, 23, 42, 0.92);
  padding: 12px 14px;
  outline: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.shop-search__input::placeholder { color: rgba(15, 23, 42, 0.45); }
.shop-search__input:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

.shop-categories {
  position: sticky;
  top: calc(var(--shop-topbar-height, 74px) + 8px);
  z-index: 84;
  margin: 0 0 14px;
  transform: translateY(0);
  transition: transform .22s ease;
}

.shop-categories[hidden] {
  display: none !important;
}

.shop-categories.is-detached {
  transform: translateY(calc(var(--shop-topbar-height, 74px) * -1));
}

.shop-categories__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(249, 250, 251, 0.78));
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.shop-categories__tool {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  position: relative;
}

.shop-categories__tool.is-active {
  background: rgba(91, 108, 255, 0.08);
  color: var(--brand1, #5b6cff);
}

.shop-categories__bar > .shop-categories__tool,
.shop-categories__bar > .shop-categories__viewport {
  transition: opacity 220ms ease, transform 220ms ease;
}

.shop-categories__tool:hover {
  transform: translateY(-1px);
  background: rgba(241, 245, 249, 0.88);
}

.shop-categories__tool:active {
  transform: translateY(0);
}

.shop-categories__tool svg {
  width: 18px;
  height: 18px;
  display: block;
}

.shop-categories__toolbadge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #8ea2ff));
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 16px rgba(91, 108, 255, 0.24);
}

.shop-categories__viewport {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  border-radius: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.shop-categories__viewport::-webkit-scrollbar {
  display: none;
}

.shop-categories__search {
  position: absolute;
  inset: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.shop-categories__bar.is-searching > .shop-categories__tool,
.shop-categories__bar.is-searching > .shop-categories__viewport {
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
}

.shop-categories__bar.is-searching .shop-categories__search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.shop-categories__searchfield {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  border-radius: 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.shop-categories__searchicon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.48);
  pointer-events: none;
}

.shop-categories__searchicon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.shop-categories__searchinput {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.92);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0 14px 0 42px;
}

.shop-categories__searchinput::placeholder {
  color: rgba(15, 23, 42, 0.42);
}

.shop-categories__searchclose {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.shop-categories__searchclose:hover {
  transform: translateY(-1px);
  background: rgba(241, 245, 249, 0.88);
}

.shop-categories__searchclose:active {
  transform: translateY(0);
}

.shop-categories__searchclose svg {
  width: 18px;
  height: 18px;
  display: block;
}

.shop-categories__chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.98));
  color: rgba(15, 23, 42, 0.92);
  border-radius: 13px;
  min-width: 108px;
  min-height: 44px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  flex: 0 0 auto;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
  text-decoration: none;
  position: relative;
}

.shop-categories__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
  border-color: rgba(15, 23, 42, 0.12);
}

.shop-categories__chip:active {
  transform: translateY(0);
}

.shop-categories__chip.is-active {
  border-color: rgba(15, 23, 42, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 251, 0.99));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.shop-categories__chip--ghost {
  width: 108px;
  min-width: 108px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.92);
  pointer-events: none;
}

.shop-categories__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(241, 245, 249, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: rgba(15, 23, 42, 0.56);
}

.shop-categories__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.shop-categories__chip.is-active .shop-categories__icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  color: var(--brand1, #5b6cff);
  background: rgba(241, 245, 249, 0.88);
}

.shop-categories__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.shop-categories__label {
  display: block;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.shop-categories__count {
  display: block;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.48);
  white-space: nowrap;
}

.shop-activefilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

.shop-activefilters__list {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shop-activefilters__list::-webkit-scrollbar {
  display: none;
}

.shop-activefilters__chip,
.shop-filter-chip {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(15, 23, 42, 0.88);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.shop-filter-chip {
  min-height: 40px;
  padding: 8px 13px;
}

.shop-activefilters__chip:hover,
.shop-filter-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.shop-activefilters__chip.is-active,
.shop-filter-chip.is-active {
  border-color: rgba(91, 108, 255, 0.16);
  background: rgba(91, 108, 255, 0.08);
  color: var(--brand1, #5b6cff);
}

.shop-activefilters__chipicon,
.shop-filter-chip__count {
  color: rgba(15, 23, 42, 0.42);
}

.shop-activefilters__reset {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.92);
  color: rgba(15, 23, 42, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}

.shop-filters {
  position: fixed;
  inset: 0;
  z-index: 140;
  opacity: 0;
  transition: opacity 260ms ease;
}

.shop-filters[hidden] {
  display: none;
}

.shop-filters.is-open {
  opacity: 1;
}

.shop-filters__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at left top, rgba(91, 108, 255, 0.18), transparent 36%),
    rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  cursor: pointer;
  transition: opacity 220ms ease;
}

.shop-filters__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: min(420px, calc(100vw - 20px));
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top left, rgba(91, 108, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 24px 0 72px rgba(15, 23, 42, 0.18);
  opacity: 0.82;
  transform: translateX(calc(-100% - 24px)) scale(0.985);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  padding: calc(16px + var(--safe-top, 0px)) 16px calc(16px + var(--safe-bottom, 0px));
  overflow: hidden;
}

.shop-filters__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  pointer-events: none;
}

.shop-filters.is-open .shop-filters__backdrop {
  opacity: 1;
}

.shop-filters.is-open .shop-filters__panel {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.shop-filters__head,
.shop-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  transform: translateX(-18px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.shop-filters__head {
  position: relative;
  z-index: 1;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.shop-filters__headcopy {
  min-width: 0;
}

.shop-filters__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand1, #5b6cff);
}

.shop-filters__title {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, 0.96);
}

.shop-filters__close {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(15, 23, 42, 0.74);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.shop-filters__close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
}

.shop-filters__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 0;
  display: grid;
  gap: 16px;
  opacity: 0;
  transform: translateX(-14px);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.shop-filters__section {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.7));
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.82);
  opacity: 0;
  transform: translateY(14px);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, box-shadow 160ms ease;
}

.shop-filters__section:hover {
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.shop-filters.is-open .shop-filters__head,
.shop-filters.is-open .shop-filters__foot,
.shop-filters.is-open .shop-filters__body {
  opacity: 1;
  transform: translateX(0);
}

.shop-filters.is-open .shop-filters__section {
  opacity: 1;
  transform: translateY(0);
}

.shop-filters.is-open .shop-filters__section:nth-child(1) { transition-delay: 30ms; }
.shop-filters.is-open .shop-filters__section:nth-child(2) { transition-delay: 60ms; }
.shop-filters.is-open .shop-filters__section:nth-child(3) { transition-delay: 90ms; }
.shop-filters.is-open .shop-filters__section:nth-child(4) { transition-delay: 120ms; }
}

.shop-filters__sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.shop-filters__sectiontitle {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.9);
}

.shop-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shop-filter-toggle + .shop-filter-toggle {
  margin-top: 12px;
}

.shop-filter-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shop-filter-toggle__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-filter-toggle__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.92);
}

.shop-filter-toggle__meta {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.52);
}

.shop-filter-toggle__switch {
  position: relative;
  width: 48px;
  height: 30px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.88);
  transition: background 160ms ease;
}

.shop-filter-toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
  transition: transform 160ms ease;
}

.shop-filter-toggle input:checked + .shop-filter-toggle__switch {
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #8ea2ff));
}

.shop-filter-toggle input:checked + .shop-filter-toggle__switch::after {
  transform: translateX(18px);
}

.shop-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-filter-chip--color {
  padding-left: 10px;
}

.shop-filter-chip__swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 999px;
  background: var(--swatch, #cbd5e1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 0 0 1px rgba(15, 23, 42, 0.14);
}

.shop-filter-chip__count {
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
}

.shop-filter-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-filter-price__field {
  display: grid;
  gap: 6px;
}

.shop-filter-price__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.54);
}

.shop-filter-price__field input {
  min-height: 44px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.9);
  outline: none;
}

.shop-filter-price__hint {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.48);
}

.shop-filters__foot {
  position: relative;
  z-index: 1;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,0.86) 26%, rgba(248,250,252,0.98));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.shop-filters__secondary,
.shop-filters__primary {
  appearance: none;
  -webkit-appearance: none;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.shop-filters__secondary {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(241, 245, 249, 0.92);
  color: rgba(15, 23, 42, 0.76);
}

.shop-filters__primary {
  flex: 1 1 auto;
  border: 0;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #8ea2ff));
  color: #fff;
  box-shadow: 0 18px 34px rgba(91, 108, 255, 0.26);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.shop-filters__primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 36px rgba(91, 108, 255, 0.3);
}

.shop-filters__primarytext {
  display: block;
}

.shop-filters__primarymeta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.76);
}

.shop-filters__primary.is-counting {
  filter: saturate(0.92);
}

.shop-filters__primary.is-counting .shop-filters__primarymeta {
  color: rgba(255, 255, 255, 0.86);
}

/* Main */
.shop-main {
  max-width: 1120px;
  margin: 0 auto;
  min-height: calc(100vh - var(--shop-topbar-height, 74px) - 108px - var(--safe-bottom, 0px));
  padding: 16px 16px calc(108px + var(--safe-bottom, 0px));
}

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

@media (max-width: 520px) {
  .shop-main { padding: 12px 12px calc(108px + var(--safe-bottom, 0px)); }
  .shop-grid {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-categories {
    margin-bottom: 12px;
  }

  .shop-categories__viewport {
    gap: 6px;
    padding: 0;
    border-radius: 11px;
  }

  .shop-categories__bar {
    gap: 6px;
    min-height: 48px;
    padding: 4px 9px;
    border-radius: 14px;
  }

  .shop-categories__tool {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .shop-categories__toolbadge {
    top: -3px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .shop-categories__tool svg {
    width: 17px;
    height: 17px;
  }

  .shop-categories__search {
    inset: 4px 9px;
    gap: 6px;
  }

  .shop-categories__searchfield {
    height: 40px;
    border-radius: 12px;
  }

  .shop-categories__searchicon {
    left: 13px;
  }

  .shop-categories__searchinput {
    font-size: 13px;
    padding-left: 39px;
  }

  .shop-categories__searchclose {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }

  .shop-categories__chip {
    min-width: 96px;
    min-height: 40px;
    padding: 5px 9px;
    border-radius: 12px;
  }

  .shop-categories__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }

  .shop-categories__icon svg {
    width: 14px;
    height: 14px;
  }

  .shop-categories__label {
    font-size: 12px;
  }

  .shop-categories__count {
    display: none;
  }

  .shop-activefilters {
    gap: 8px;
    margin-bottom: 12px;
  }

  .shop-activefilters__chip,
  .shop-filter-chip {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .shop-filter-chip--color {
    padding-left: 9px;
  }

  .shop-filter-chip__swatch {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .shop-activefilters__reset {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 12px;
  }

  .shop-filters__panel {
    width: min(400px, calc(100vw - 8px));
    padding: calc(12px + var(--safe-top, 0px)) 10px calc(12px + var(--safe-bottom, 0px));
    border-radius: 0 24px 24px 0;
  }

  .shop-filters__section {
    padding: 11px;
    border-radius: 16px;
  }

  .shop-filters__head {
    padding-bottom: 12px;
  }

  .shop-filters__eyebrow {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .shop-filters__title {
    font-size: 18px;
  }

  .shop-filters__close {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
  }

  .shop-filters__body {
    gap: 12px;
    padding: 14px 0;
  }

  .shop-filter-toggle {
    gap: 10px;
  }

  .shop-filter-toggle__title {
    font-size: 13px;
  }

  .shop-filter-toggle__meta {
    font-size: 11px;
  }

  .shop-filter-toggle__switch {
    width: 44px;
    height: 28px;
    flex-basis: 44px;
  }

  .shop-filter-toggle__switch::after {
    width: 22px;
    height: 22px;
  }

  .shop-filter-toggle input:checked + .shop-filter-toggle__switch::after {
    transform: translateX(16px);
  }

  .shop-filter-chips {
    gap: 6px;
  }

  .shop-filters__foot {
    gap: 8px;
    padding-top: 12px;
  }

  .shop-filters__secondary,
  .shop-filters__primary {
    min-height: 42px;
    border-radius: 14px;
    font-size: 13px;
    padding: 0 14px;
  }

  .shop-filters__primarymeta {
    font-size: 10px;
  }

  .shop-filter-price {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 700px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .shop-topbar__inner {
    grid-template-columns: auto 1fr;
  }

  .shop-search {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .shop-search__input {
    width: 100%;
    max-width: none;
  }
}

.shop-load,
.shop-empty {
  padding: 18px 10px 6px;
  text-align: center;
  color: rgba(15, 23, 42, 0.72);
}

.shop-empty__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.shop-empty__sub {
  margin-top: 6px;
  opacity: 0.8;
  font-size: 14px;
}

/* Lightweight skeleton */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 100%);
  animation: skeleton 1.15s ease-in-out infinite;
}
@keyframes skeleton {
  to { transform: translateX(100%); }
}



/* ===== END: shop.css ===== */

/* ===== BEGIN: product.css ===== */
:root{
      --bg:#fff;
      --card: rgba(255,255,255,.72);
      --card2: rgba(255,255,255,.58);
      --stroke: rgba(12,20,34,.10);
      --stroke2: rgba(12,20,34,.14);
      --text:#0b1220;
      --muted: rgba(11,18,32,.66);
      --muted2: rgba(11,18,32,.52);
      --shadow: 0 18px 46px rgba(10,18,35,.16);
      --shadow2: 0 10px 24px rgba(10,18,35,.14);
      --radius: 18px;
      --radius2: 14px;
      --brand1:#5b6cff;
      --brand2:#9a7bff;
      --good:#22c55e;
      --warn:#f59e0b;
      --bad:#ef4444;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-top: env(safe-area-inset-top, 0px);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#0a0d14;
        --card: rgba(18,22,34,.62);
        --card2: rgba(18,22,34,.48);
        --stroke: rgba(255,255,255,.10);
        --stroke2: rgba(255,255,255,.14);
        --text:#f2f6ff;
        --muted: rgba(242,246,255,.68);
        --muted2: rgba(242,246,255,.52);
        --shadow: 0 24px 60px rgba(0,0,0,.45);
        --shadow2: 0 12px 30px rgba(0,0,0,.38);
        --brand1:#7b86ff;
        --brand2:#b08bff;
      }
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color:var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    button{font-family:inherit}
    .wrap{max-width: 520px; margin:0 auto; padding: 0 14px calc(120px + var(--safe-bottom));}

    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:50;
      padding: calc(10px + var(--safe-top)) 14px 10px;
      margin: 0 0 10px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,.25));
      border-bottom: 1px solid var(--stroke);
    }
    @media (prefers-color-scheme: dark){
      .topbar{background: linear-gradient(to bottom, rgba(10,13,20,.76), rgba(10,13,20,.28));}
    }
    .topbar-row{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      max-width: 520px;
      margin: 0 auto;
    }
    .tb-left{display:flex; align-items:center; gap:10px; min-width:0;}
    .tb-title{font-weight:700; font-size:14px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 62vw;}
    .chip{
      display:inline-flex; align-items:center; gap:6px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow2);
      color: var(--text);
    }
    .iconbtn{
      width: 40px; height: 40px;
      display:grid; place-items:center;
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: var(--card);
      box-shadow: var(--shadow2);
      color: var(--text);
      outline: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease, filter .12s ease;
    }
    .iconbtn:active{transform: scale(.98); filter: brightness(.98);}
    .iconbtn svg{width:20px; height:20px}
    .cartbtn{position:relative;}
    .cart-badge{
      position:absolute;
      top:-6px;
      right:-6px;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, #ffb86b, #ff6a6a);
      color: #fff;
      font-weight: 950;
      font-size: 11px;
      border: 2px solid rgba(255,255,255,.92);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
      pointer-events:none;
    }

    /* Hero gallery */
    .hero{
      border-radius: 22px;
      overflow:hidden;
      position:relative;
      background: rgba(255,255,255,.35);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
    }
    .gallery{
      position:relative;
      height: 420px;
      touch-action: pan-y;
      user-select: none;
    }
    .slides{
      height:100%;
      display:flex;
      transition: transform .28s cubic-bezier(.2,.9,.2,1);
      will-change: transform;
    }
    .slide{
      min-width:100%;
      height:100%;
      position:relative;
      overflow:hidden;
      background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.35), rgba(255,255,255,.10));
    }
    .slide img{
      width:100%; height:100%;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(1.03) contrast(1.02);
    }
    .hero-grad{
      position:absolute; inset:0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.00) 55%, rgba(0,0,0,.24) 88%, rgba(0,0,0,.36) 100%);
      pointer-events:none;
      z-index: 1;
    }
    .hero-badges{
      position:absolute; left:12px; top:56px;
      display:flex; flex-wrap:wrap; gap:8px; max-width: 70%;
      z-index: 3;
    }
    .badge{
      display:inline-flex; align-items:center; gap:6px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing:.2px;
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(15,20,30,.52);
      color: #fff;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 26px rgba(0,0,0,.24);
    }
    .badge svg{width:16px; height:16px}
    .badge.badge-sale{background: rgba(239,68,68,.62)}
    .badge.badge-new{background: rgba(34,197,94,.56)}
    .badge.badge-cashback{background: rgba(91,108,255,.55)}

    /* Hero overlays */
    .hero-swatches{
      position:absolute;
      right:12px; top:12px;
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:flex-end;
      z-index: 3;
      pointer-events:auto;
    }
    .swatches.swatches--hero{
      flex-direction:column;
      flex-wrap:nowrap;
      gap:8px;
    }
    .hero-swatches .swatch{
      width: 34px; height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.42);
      background: rgba(255,255,255,.20);
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform .12s ease, filter .12s ease;
    }
    .hero-swatches .swatch:active{transform: scale(.97); filter: brightness(.98);}
    .hero-swatches .swatch.on::after{border-radius: 999px;}
    .hero-swatches .swatch .c{
      width: 20px; height: 20px;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 10px 20px rgba(0,0,0,.18);
    }
    .hero-colorname{
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .15px;
      color: rgba(255,255,255,.96);
      background: rgba(15,20,30,.45);
      border: 1px solid rgba(255,255,255,.16);
      padding: 6px 10px;
      border-radius: 999px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 26px rgba(0,0,0,.22);
      text-shadow: 0 2px 12px rgba(0,0,0,.35);
      max-width: 44vw;
      text-align:right;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Price cutout (same style as in product cards) */
    .cutout{
      position:absolute;
      z-index: 3;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
      padding: 10px 12px;
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }
    .cutout--br{
      right: -1px;
      bottom: -1px;
      top: auto;
      border: 0;
      background: #fff;
      --cut-r: 22px;
      border-top-left-radius: var(--cut-r);
      border-bottom-right-radius: 22px;
      border-top-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .cutout--br::before,
    .cutout--br::after{
      content:"";
      position:absolute;
      width: var(--cut-r);
      height: var(--cut-r);
      background: inherit;
      -webkit-mask-image: radial-gradient(
        circle at 0 0,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px)
      );
      mask-image: radial-gradient(
        circle at 0 0,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px)
      );
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      border: 0;
      box-shadow: none;
    }
    .cutout--br::before{
      bottom: 0;
      right: calc(100% - 1px);
    }
    .cutout--br::after{
      bottom: calc(100% - 1px);
      right: 0;
    }
    .cutout--tl{
      left: -1px;
      top: -1px;
      bottom: auto;
      right: auto;
      border: 0;
      background: #fff;
      --cut-r: 22px;
      border-bottom-right-radius: var(--cut-r);
      border-top-left-radius: 22px;
      border-top-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .cutout--tl::before,
    .cutout--tl::after{
      content:"";
      position:absolute;
      width: var(--cut-r);
      height: var(--cut-r);
      background: inherit;
      -webkit-mask-image: radial-gradient(
        circle at 100% 100%,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px)
      );
      mask-image: radial-gradient(
        circle at 100% 100%,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px)
      );
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      border: 0;
      box-shadow: none;
    }
    .cutout--tl::before{
      top: 0;
      left: calc(100% - 1px);
    }
    .cutout--tl::after{
      top: calc(100% - 1px);
      left: 0;
    }
    .hero-price-cutout{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap: 4px;
    }
    .price-text{
      font-weight: 900;
      font-size: 17px;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .price-text__short{display:none;}
    .price-old{
      font-weight: 900;
      font-size: 12px;
      opacity:.72;
      text-decoration: line-through;
      text-decoration-thickness:2px;
      white-space: nowrap;
    }
    @media (max-width: 520px){
      .price-text__long{display:none;}
      .price-text__short{display:inline;}
    }
    .dots{
      position:absolute; left:50%; bottom: 12px;
      transform: translateX(-50%);
      display:flex; gap:7px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(15,20,30,.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 3;
    }
    .dot{
      width: 7px; height: 7px; border-radius: 999px;
      background: rgba(255,255,255,.28);
      transition: transform .2s ease, background .2s ease;
    }
    .dot.on{background: rgba(255,255,255,.92); transform: scale(1.35);}

    /* Hero action buttons (share + favorite) — bottom-left on photo */
    .hero-actions{
      position:absolute;
      left: 12px;
      bottom: 12px;
      z-index: 3;
      display:flex;
      gap: 8px;
      pointer-events:auto;
    }
    .hero-actions .iconbtn{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(15,20,30,.45);
      color: #fff;
      box-shadow: 0 10px 26px rgba(0,0,0,.22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .hero-actions .iconbtn svg{width:20px; height:20px;}

    /* Content cards */
    .section{margin-top: 12px;}
    .card{
      background: var(--card);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow:hidden;
    }
    .card + .card{margin-top: 12px;}
    .pad{padding: 14px;}
    .row{display:flex; gap:12px; align-items:center;}
    .row.between{justify-content:space-between;}
    .muted{color:var(--muted)}
    .muted2{color:var(--muted2)}
    .h1{
      margin:0;
      font-size: 18px;
      line-height: 1.15;
      letter-spacing: -0.2px;
      font-weight: 800;
    }
    .subline{
      margin-top: 6px;
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      font-size: 13px;
      color: var(--muted);
    }
    .star{
      display:inline-flex; align-items:center; gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.35);
    }
    @media (prefers-color-scheme: dark){
      .star{background: rgba(255,255,255,.06);}
    }
    .star svg{width:16px; height:16px}
    .divider{
  height:1px;
  margin: 12px 0;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.34) 16%, rgba(203,213,225,.88) 50%, rgba(148,163,184,.34) 84%, rgba(148,163,184,0));
}
    .price{
      display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
    }
    .p-now{
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.3px;
    }
    .p-old{
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(239,68,68,.60);
    }
    .p-save{
      font-size: 12px;
      font-weight: 800;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(239,68,68,.22);
      background: rgba(239,68,68,.10);
      color: rgba(239,68,68,.95);
    }
    @media (prefers-color-scheme: dark){
      .p-save{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.20);}
    }

    /* Pickers */
    .label{
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: .15px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
    }
    .label a{
      font-weight: 800;
      color: var(--text);
      opacity:.9;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .label a svg{width:16px; height:16px}

    .swatches{display:flex; gap:10px; flex-wrap:wrap;}
    .swatch{
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid var(--stroke2);
      background: var(--card2);
      box-shadow: 0 10px 22px rgba(10,18,35,.10);
      display:grid; place-items:center;
      position:relative;
      overflow:hidden;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease;
    }
    .swatch:active{transform: scale(.985);}
    .swatch .c{
      width: 26px; height: 26px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }
    .swatch.on::after{
      content:"";
      position:absolute; inset:0;
      border-radius: 14px;
      outline: 2px solid rgba(91,108,255,.55);
      outline-offset: -2px;
    }

    .sizes{
      display:flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 2px 2px;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-width: none;         /* Firefox */
      -ms-overflow-style: none;      /* IE/Edge Legacy */
    }
    .sizes::-webkit-scrollbar{display:none; width:0; height:0;} /* WebKit */
    .size{
      height: 44px;
      min-width: 56px;
      padding: 0 10px;
      flex: 0 0 auto;
      border-radius: 14px;
      border: 1px solid var(--stroke2);
      background: var(--card2);
      box-shadow: 0 10px 22px rgba(10,18,35,.10);
      display:grid; place-items:center;
      font-weight: 900;
      font-size: 13px;
      letter-spacing: .2px;
      position:relative;
      overflow:hidden;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease, filter .12s ease;
      scroll-snap-align: start;
    }
    .size:active{transform: scale(.985); filter: brightness(.99);}
    .size.off{
      opacity:.42;
      filter: grayscale(.1);
    }
    .size.off::after{
      content:"";
      position:absolute;
      width: 120%;
      height: 2px;
      background: rgba(239,68,68,.70);
      transform: rotate(-20deg);
      box-shadow: 0 6px 18px rgba(239,68,68,.25);
    }
    .size.on::before{
      content:"";
      position:absolute; inset:0;
      border-radius: 14px;
      outline: 2px solid rgba(91,108,255,.55);
      outline-offset: -2px;
    }

    /* Mini feature list */
    .mini{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .miniitem{
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.40);
      padding: 10px 10px;
      display:flex; gap:10px; align-items:flex-start;
    }
    @media (prefers-color-scheme: dark){
      .miniitem{background: rgba(255,255,255,.06);}
    }
    .miniic{
      width: 36px; height: 36px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(91,108,255,.18), rgba(154,123,255,.14));
      border: 1px solid rgba(91,108,255,.18);
      flex: 0 0 auto;
    }
    .miniic svg{width:18px; height:18px}
    .minit{
      font-weight: 800;
      font-size: 12px;
      margin:0;
      line-height: 1.2;
    }
    .minis{
      font-size: 12px;
      margin-top: 3px;
      color: var(--muted);
      line-height: 1.2;
    }

    /* Tabs */
    .tabs{
      display:flex; gap:8px; padding: 10px;
      background: rgba(255,255,255,.40);
      border-bottom: 1px solid var(--stroke);
    }
    @media (prefers-color-scheme: dark){
      .tabs{background: rgba(255,255,255,.06);}
    }
    .tab{
      flex:1;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.58);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .15px;
      color: var(--text);
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease, filter .12s ease;
    }
    @media (prefers-color-scheme: dark){
      .tab{background: rgba(255,255,255,.08);}
    }
    .tab:active{transform: scale(.99); filter: brightness(.99);}
    .tab.on{
      border-color: rgba(91,108,255,.30);
      background: linear-gradient(135deg, rgba(91,108,255,.22), rgba(154,123,255,.18));
    }
    .tabpanes{padding: 12px 14px 14px;}
    .pane{display:none}
    .pane.on{display:block}

    .p{
      font-size: 13.5px;
      line-height: 1.55;
      margin: 0;
      color: var(--muted);
    }
    .list{
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap:10px;
    }
    .li{
      display:flex; gap:10px;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.35);
    }
    @media (prefers-color-scheme: dark){
      .li{background: rgba(255,255,255,.06);}
    }
    .li svg{width:18px; height:18px; opacity:.9}
    .li b{font-weight: 900; color: var(--text)}
    .li span{color: var(--muted); font-size: 12.5px; line-height: 1.3}

    .specs{
      width:100%;
      border-collapse: separate;
      border-spacing: 0 8px;
      margin-top: 10px;
      font-size: 12.5px;
      color: var(--muted);
    }
    .specs td{
      padding: 10px 12px;
      background: rgba(255,255,255,.35);
      border: 1px solid var(--stroke);
    }
    @media (prefers-color-scheme: dark){
      .specs td{background: rgba(255,255,255,.06);}
    }
    .specs td:first-child{
      width: 42%;
      border-radius: 14px 0 0 14px;
      font-weight: 900;
      color: var(--text);
    }
    .specs td:last-child{
      border-radius: 0 14px 14px 0;
    }

    /* Reviews */
    .reviews-list{
      display:grid;
      gap:14px;
    }
    .reviews-list .review{margin-top:0;}
    .review{
        position: relative;
        overflow: visible;
      border-radius: 22px;
      border: 1px solid rgba(15,23,42,.08);
      background:
        radial-gradient(circle at top right, rgba(254,240,138,.18), rgba(255,255,255,0) 34%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.96));
      box-shadow: 0 16px 34px rgba(15,23,42,.06);
      padding: 16px;
      display:grid;
      gap:12px;
      margin-top: 10px;
    }
    


.review-actions{
  position: relative;
  flex: 0 0 auto;
}

.review-actions__toggle{
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: rgba(15,23,42,.72);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

.review-actions__toggle:hover{
  background:#fff;
  color: rgba(15,23,42,.92);
}

.review-actions__menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 184px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 46px rgba(15,23,42,.14);
  display:grid;
  gap:6px;
  z-index: 8;
  z-index: 24;
}


.review-actions__menu[hidden]{
  display:none !important;
}
.review-actions__item{
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(15,23,42,.86);
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}

.review-actions__item:hover{
  background: rgba(15,23,42,.05);
}

.review-actions__item--danger{
  color: #b91c1c;
}

.review-actions__item--danger:hover{
  background: rgba(239,68,68,.08);
}

.review-replies{
  margin-top: 14px;
  display:grid;
  gap:10px;
}

.review-reply{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(148,163,184,.16);
}

.review-reply.is-owner{
  background: rgba(239,246,255,.92);
  border-color: rgba(147,197,253,.32);
}

.review-reply__avatar{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d4ed8, #0f172a);
  color:#fff;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 32px;
}

.review-reply__body{
  min-width: 0;
}

.review-reply__meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 4px;
}

.review-reply__name{
  font-size: 13px;
  font-weight: 800;
}

.review-reply__date{
  font-size: 12px;
  color: rgba(15,23,42,.48);
}

.review-reply__text{
  color: rgba(15,23,42,.78);
  line-height: 1.5;
}
    @media (prefers-color-scheme: dark){
      .review{background: rgba(255,255,255,.06);}
    }
    .r-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
    .r-user{display:flex; align-items:center; gap:10px; min-width:0;}
    .avatar{
      width: 40px; height: 40px;
      border-radius: 16px;
      border: 1px solid rgba(15,23,42,.08);
      background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(245,158,11,.18));
      box-shadow: 0 10px 18px rgba(15,23,42,.06);
      display:grid; place-items:center;
      font-weight: 900;
      color: var(--text);
    }
    .r-name{
      font-weight: 900;
      font-size: 13.5px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .r-date{
      font-size: 12px;
      color: var(--muted2);
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
        .r-stars{display:flex; gap:4px; color: var(--warn);}
    .r-stars svg{width:17px; height:17px}
    .r-stars .s{font-size: 14px; line-height: 1;}
    .r-stars .s.off{opacity:.25;}
    .r-text{
      margin:0;
      font-size: 13.5px;
      line-height:1.7;
      color: rgba(15,23,42,.76);
    }

    /* Recos */
    .recos{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .reco{
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      overflow:hidden;
      box-shadow: 0 10px 22px rgba(10,18,35,.10);
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease, filter .12s ease;
    }
    @media (prefers-color-scheme: dark){
      .reco{background: rgba(255,255,255,.08);}
    }
    .reco:active{transform: scale(.99); filter: brightness(.99);}
    .reco img{width:100%; height: 120px; object-fit: cover;}
    .reco .p{padding: 10px 10px 12px; color: var(--text);}
    .reco .t{font-weight: 900; font-size: 12.5px; margin:0; line-height:1.2;}
    .reco .m{margin-top: 6px; font-size: 12px; color: var(--muted);}
    .reco .pr{margin-top: 8px; font-weight: 900; font-size: 12.5px;}

    /* Catalog-like product cards (used for the "Новинки" block) */
    .pdp-newarrivals{
      --card: #ffffff;
      --text: #0f172a;
      --muted: rgba(15, 23, 42, 0.62);
      --stroke: rgba(15, 23, 42, 0.10);
      --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
      --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.10);
      --card-r: 24px;
      --cut-r: 24px;
    }

    /* Mobile: make "Новинки" horizontally scrollable as well */
    .pdp-newarrivals .recos{
      display:flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 2px 4px 6px;
      scroll-padding-left: 4px;
      scroll-padding-right: 4px;
      scrollbar-width: none;
    }
    .pdp-newarrivals .recos::-webkit-scrollbar{display:none;}
    .pdp-newarrivals .recos .product-card{
      flex: 0 0 auto;
      width: min(220px, calc(100vw - 96px));
      scroll-snap-align: start;
    }
    /* Sticky buy bar */
    .buybar{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 70;
      padding: 10px 12px calc(10px + var(--safe-bottom));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-top: 1px solid var(--stroke);
      background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.30));
    }
    @media (prefers-color-scheme: dark){
      .buybar{background: linear-gradient(to top, rgba(10,13,20,.86), rgba(10,13,20,.30));}
    }
    .buyrow{
      max-width: 520px;
      margin: 0 auto;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      padding: 0 2px;
    }
    .buyprice{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .buyprice b{font-size: 14px; font-weight: 900;}
    .buyprice span{font-size: 12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 52vw;}
    .btn{
      height: 48px;
      padding: 0 16px;
      border: 0;
      border-radius: 16px;
      font-weight: 900;
      letter-spacing:.2px;
      color: #fff;
      background: linear-gradient(135deg, var(--brand1), var(--brand2));
      box-shadow: 0 16px 36px rgba(91,108,255,.24);
      display:inline-flex;
      gap:10px;
      align-items:center;
      justify-content:center;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s ease, filter .12s ease;
      white-space:nowrap;
    }
    .btn svg{width:18px; height:18px}
    .btn:active{transform: scale(.99); filter: brightness(.98);}
    .btn.secondary{
      color: var(--text);
      background: rgba(255,255,255,.60);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow2);
    }
    @media (prefers-color-scheme: dark){
      .btn.secondary{background: rgba(255,255,255,.10);}
    }

    /* Bottom sheet */
    .sheet{
      position: fixed;
      inset: 0;
      z-index: 120;
      display:none;
    }
    .sheet.on{display:block}
    .sheet-back{
      position:absolute; inset:0;
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      opacity:0;
      transition: opacity .18s ease;
    }
    .sheet.on .sheet-back{opacity:1}
    .sheet-panel{
      position:absolute; left:0; right:0; bottom:0;
      background: var(--bg);
      border-top: 1px solid var(--stroke);
      border-radius: 22px 22px 0 0;
      box-shadow: var(--shadow);
      transform: translateY(110%);
      transition: transform .22s cubic-bezier(.2,.9,.2,1);
      padding-bottom: calc(14px + var(--safe-bottom));
      max-height: 85vh;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }
    .sheet-panel::-webkit-scrollbar{display:none;}
    .sheet.on .sheet-panel{transform: translateY(0)}
    .sheet-panel.dragging{transition: none !important;}
    .handle{
      width: 46px; height: 5px;
      border-radius: 999px;
      background: rgba(11,18,32,.22);
      margin: 10px auto 6px;
      touch-action: none;
    }
    @media (prefers-color-scheme: dark){
      .handle{background: rgba(255,255,255,.20);}
    }
    .sheet-head{
      padding: 10px 14px 10px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      touch-action: none;
    }
    .sheet-head h3{margin:0; font-size: 14px; font-weight: 900;}
    .sheet-body{padding: 0 14px 14px;}
    .sheet-card{
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.94);
      overflow:hidden;
      display:flex; gap:12px;
      padding: 12px;
      align-items:center;
    }
    @media (prefers-color-scheme: dark){
      .sheet-card{background: rgba(18,22,34,.92);}
    }
    .sheet-card img{
      width: 68px; height: 68px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      object-fit: cover;
    }
    .sheet-card .t{font-weight: 900; font-size: 12.5px; margin:0; line-height:1.2;}
    .sheet-card .m{font-size: 12px; color: var(--muted); margin-top: 6px;}
    .sheet-actions{
      margin-top: 12px;
      display:flex;
      gap:10px;
    }
    .sheet-actions .btn{flex:1}

    /* Desktop (PC): show sheets as centered modal windows */
    @media (hover: hover) and (pointer: fine){
      .sheet{padding: 16px;}
      .sheet-panel{
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(560px, calc(100vw - 32px));
        max-height: min(82vh, 760px);
        border-radius: 22px;
        transform: translate(-50%, -46%) scale(.98);
        opacity: 0;
        transition: transform .18s ease, opacity .18s ease;
      }
      .sheet.on .sheet-panel{
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
      .sheet-back{
        background: rgba(2,6,23,.44);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .handle{display:none;}
    }

    /* Review form (sheet) */
    .rform-stars{
      display:flex;
      gap:10px;
      justify-content:space-between;
    }
    .rstar{
      flex: 1 1 0;
      height: 44px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.94);
      font-size: 22px;
      line-height: 1;
      color: rgba(245,158,11,.35);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
      -webkit-tap-highlight-color: transparent;
    }
    @media (prefers-color-scheme: dark){
      .rstar{background: rgba(18,22,34,.92);}
    }
    .rstar:active{transform: scale(.99); filter: brightness(.98);}
    .rstar.on{
      color: rgba(245,158,11,.98);
      background: rgba(245,158,11,.12);
      border-color: rgba(245,158,11,.30);
      box-shadow: 0 12px 26px rgba(245,158,11,.16);
    }
    .rtextarea{
      width:100%;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.94);
      padding: 12px;
      color: var(--text);
      font: inherit;
      resize: vertical;
      min-height: 120px;
      line-height: 1.45;
      outline: none;
      box-shadow: var(--shadow2);
    }
    @media (prefers-color-scheme: dark){
      .rtextarea{background: rgba(18,22,34,.92);}
    }
    .rtextarea:focus{border-color: rgba(91,108,255,.40); box-shadow: 0 0 0 3px rgba(91,108,255,.14);}

    /* Toast */
    .toast{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: calc(10px + var(--safe-top));
      z-index: 200;
      display:none;
      width: min(520px, calc(100vw - 20px));
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    @media (prefers-color-scheme: dark){
      .toast{background: rgba(18,22,34,.72);}
    }
    .toast.on{display:block; animation: pop .18s ease-out;}
    @keyframes pop{
      from{transform: translateX(-50%) translateY(-6px); opacity:.0}
      to{transform: translateX(-50%) translateY(0); opacity:1}
    }
    .toast .trow{display:flex; gap:10px; align-items:flex-start;}
    .toast .tic{
      width: 34px; height: 34px;
      border-radius: 14px;
      display:grid; place-items:center;
      border: 1px solid var(--stroke);
      background: linear-gradient(135deg, rgba(91,108,255,.18), rgba(154,123,255,.14));
      flex: 0 0 auto;
    }
    .toast .tic svg{width:18px; height:18px}
    .toast b{display:block; font-size: 12.5px; font-weight: 900;}
    .toast span{display:block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height:1.25}

    /* Helpers */
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
    .small{font-size: 12px}
    .pill{
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.40);
      font-weight: 900;
      font-size: 12px;
      display:inline-flex; align-items:center; gap:6px;
    }
    @media (prefers-color-scheme: dark){
      .pill{background: rgba(255,255,255,.06);}
    }
    .pill svg{width:16px; height:16px}

    .hint{
      display:flex; gap:10px; align-items:flex-start;
      padding: 10px 10px;
      border-radius: 16px;
      border: 1px dashed rgba(91,108,255,.38);
      background: rgba(91,108,255,.08);
      color: var(--muted);
    }
    .hint svg{width:18px; height:18px; flex:0 0 auto; margin-top: 1px;}
  
    /* (hero-info removed; dots stay at bottom) */

    /* ------------------------------------------------------------
       Desktop (PC) layout — matches product_desktop (14).html mock
       ------------------------------------------------------------ */

    .pdp-desktop{display:none;}
    .pdp-mobile{display:block;}

    @media (min-width: 860px){
      body{
        background: #ffffff;
        font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      }
      .pdp-desktop{display:block;}
      .pdp-mobile{display:none;}

      /* Desktop topbar */
      .pdp-topbar-d{
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255,255,255,.72);
        border-bottom: 1px solid rgba(15,23,42,.06);
        box-shadow: 0 10px 28px rgba(15,23,42,.08);
      }
      .pdp-topbar-d__inner{
        max-width: 1120px;
        margin: 0 auto;
        padding: 14px 16px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
      }

      .pdp-brand{
        display:inline-flex;
        align-items:center;
        gap: 10px;
        color: rgba(15,23,42,.92);
        font-weight: 800;
        letter-spacing: -0.02em;
        user-select: none;
        text-decoration:none;
      }
      .pdp-brand__dot{
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display:block;
        background: linear-gradient(135deg, #34d399, #22c55e);
        box-shadow: 0 0 0 6px rgba(34,197,94,.18);
      }
      .pdp-brand__text{
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .pdp-brand__sub{
        display:none;
      }

      .pdp-search{
        flex: 1 1 auto;
        min-width: 240px;
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.80);
        box-shadow: 0 10px 28px rgba(15,23,42,.06);
        transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
      }
      .pdp-search:focus-within{
        background: rgba(255,255,255,.92);
        border-color: rgba(15,23,42,.16);
        box-shadow: 0 16px 34px rgba(15,23,42,.10);
      }
      .pdp-search svg{opacity:.7; width:20px; height:20px;}
      .pdp-search input{
        width:100%;
        border:none;
        outline:none;
        background:transparent;
        color: rgba(15,23,42,.92);
        font-size: 14px;
      }
      .pdp-search input::placeholder{color: rgba(15,23,42,.45);}

      .pdp-actions{display:flex; align-items:center; gap:10px;}
      .pdp-iconbtn{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        display:grid;
        place-items:center;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.80);
        box-shadow: 0 10px 28px rgba(15,23,42,.06);
        cursor:pointer;
        transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
        color: rgba(15,23,42,.92);
        position: relative;
      }
      .pdp-iconbtn:hover{
        background: rgba(255,255,255,.92);
        border-color: rgba(15,23,42,.16);
      }
      .pdp-iconbtn:active{transform: scale(0.99);}
      .pdp-iconbtn svg{width:20px; height:20px; opacity:.9}
      .pdp-cartbadge{
        position:absolute;
        top:-6px;
        right:-6px;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        display:grid;
        place-items:center;
        background: linear-gradient(135deg, #ffb86b, #ff6a6a);
        color: #fff;
        font-weight: 950;
        font-size: 11px;
        border: 2px solid rgba(255,255,255,.92);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
        pointer-events:none;
      }

      /* Desktop container/grid */
      .pdp-container{
        max-width: 1120px;
        margin: 0 auto;
        padding: 16px 16px calc(108px + var(--safe-bottom, 0px));
      }
      .pdp-crumbs{
        margin: 16px 0 14px;
        color: rgba(11,18,32,.52);
        font-size: 12.5px;
        display:flex;
        gap: 8px;
        align-items:center;
        flex-wrap: wrap;
      }
      .pdp-crumbs a{color: rgba(11,18,32,.66); text-decoration:none}
      .pdp-crumbs a:hover{color: var(--text)}
      .pdp-sep{opacity:.55}

      .pdp-grid{
        display:grid;
        grid-template-columns: 1.18fr 1fr;
        gap: 18px;
        align-items:start;
      }
      @media (max-width: 1120px){
        .pdp-grid{grid-template-columns: 1fr;}
      }

      .pdp-leftcol-d{
        display:flex;
        flex-direction:column;
        gap: 16px;
        min-width: 0;
      }

      .pdp-card{
        background: #ffffff;
        border: 1px solid rgba(15,23,42,.10);
        border-radius: 24px;
        box-shadow: 0 18px 45px rgba(15,23,42,.12);
        overflow:hidden;
      }
      .pdp-pad{padding: 16px;}

      /* Gallery */
      .pdp-gallery-d{
        overflow:hidden;
        border-radius: 24px;
        position: relative;
        align-self: start;
        display:flex;
        flex-direction:column;
        /* Не розтягуємо на весь екран (якщо екран високий) — фото виглядає завеликим. */
        max-height: none;
      }
      /* Make the cutout match desktop card rounding (like in the catalog cards). */
      .pdp-gallery-d .cutout--br{
        --cut-r: 24px;
        border-bottom-right-radius: 24px;
      }
      @media (max-width: 1120px){
        .pdp-gallery-d{
          max-height: none;
        }
      }
      .pdp-viewer-d{
        position:relative;
        flex: 0 0 auto;
        /* Трохи нижче по висоті — фото не повинно бути гігантським на ПК. */
        aspect-ratio: 16 / 9;
        min-height: 220px;
        background: rgba(0,0,0,.18);
      }
      @media (max-width: 1120px){
        /* На вузьких екранах 1 колонка: обмежуємо висоту, щоб фото не стало гігантським. */
        .pdp-viewer-d{
          aspect-ratio: auto;
          height: clamp(260px, 46vh, 440px);
        }
      }
      .pdp-viewer-d img{
        width:100%;
        height:100%;
        object-fit: cover;
        display:block;
        transform: none !important;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
      }
      .pdp-overlay-d{
        position:absolute;
        inset:0;
        background: linear-gradient(180deg, rgba(2,6,23,.36), transparent 38%, transparent 70%, rgba(2,6,23,.38));
        pointer-events:none;
      }

      .pdp-viewer-top{
        position:absolute;
        left: 14px;
        right: 14px;
        top: 14px;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap: 10px;
        pointer-events:none;
      }
      .pdp-viewer-bottom{
        position:absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        gap: 10px;
        pointer-events:none;
      }
      .hero-photo-actions{
        position:absolute;
        right:14px;
        bottom:14px;
        z-index:4;
        display:flex;
        align-items:center;
        gap:10px;
      }
      .hero-photo-action{
        background: rgba(255,255,255,.78);
        border-color: rgba(15,23,42,.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 10px 24px rgba(15,23,42,.10);
      }
      .hero-photo-action:hover{
        background: rgba(255,255,255,.92);
      }

      .pdp-pill{
        display:inline-flex;
        align-items:center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.82);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: rgba(2,6,23,.92);
        font-weight: 950;
        font-size: 12.5px;
        white-space:nowrap;
        box-shadow: 0 14px 34px rgba(2,6,23,.14);
      }
      .pdp-pill svg{width:16px;height:16px;opacity:.95}
      .pdp-pill .pdp-cnt{opacity:.78;font-weight:900}
      .pdp-pill--ok{
        background: rgba(22,163,74,.12);
        border-color: rgba(22,163,74,.18);
      }
      .pdp-pill--off{
        background: rgba(220,38,38,.12);
        border-color: rgba(220,38,38,.18);
      }

      .pdp-pricebox{
        display:flex;
        align-items:baseline;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.82);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-weight: 950;
        color: rgba(2,6,23,.92);
        box-shadow: 0 14px 34px rgba(2,6,23,.14);
      }
      .pdp-now{font-size: 16px; letter-spacing:-.2px}
      .pdp-old{font-size: 12.5px; opacity:.72; text-decoration: line-through; text-decoration-thickness:2px}

      .pdp-savebox{
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(220,38,38,.12);
        border: 1px solid rgba(220,38,38,.22);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-weight: 950;
        color: rgba(2,6,23,.92);
        font-size: 12.5px;
        max-width: 56%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        box-shadow: 0 14px 34px rgba(2,6,23,.10);
      }

      /* Align hero swatches to the same offsets as pills */
      .pdp-viewer-d .hero-swatches{
        right: 14px;
        top: 14px;
      }
      .pdp-viewer-d .hero-colorname{max-width: 40ch;}

      /* Bigger price badge on desktop photo */
      .pdp-gallery-d .hero-price-cutout{
        padding: 12px 14px;
      }
      .pdp-gallery-d .hero-price-cutout .price-text{font-size: 20px;}
      .pdp-gallery-d .hero-price-cutout .price-old{font-size: 13px;}

      .pdp-thumbs-d{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 12px;
        background: #ffffff;
        border-top: 1px solid rgba(15,23,42,.06);
      }
      .pdp-thumb{
        height: 90px;
        border-radius: 18px;
        overflow:hidden;
        border: 1px solid rgba(15,23,42,.10);
        cursor:pointer;
        position:relative;
        transition: transform .15s ease, border-color .15s ease, background .15s ease;
        background: rgba(15,23,42,.02);
        padding: 0;
      }
      .pdp-thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
      .pdp-thumb:hover{transform: translateY(-1px); border-color: rgba(15,23,42,.14)}
      .pdp-thumb.on{border-color: rgba(91,108,255,.55); box-shadow: 0 0 0 3px rgba(91,108,255,.14);}

      /* Right column */
      .pdp-rightcol-d{
        display:flex;
        flex-direction:column;
        gap: 16px;
        min-width: 0;
      }

      .pdp-buy-d{position: sticky; top: 74px;}
      .pdp-buy-d{
        background: rgba(255,255,255,.82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: rgba(15,23,42,.08);
        box-shadow: 0 18px 36px rgba(15,23,42,.08);
      }
      @media (max-width: 1120px){
        .pdp-buy-d{position: static;}
      }

      .pdp-k{
        font-size: 12px;
        color: rgba(11,18,32,.58);
        font-weight: 900;
        letter-spacing: .2px;
        text-transform: uppercase;
      }
      .pdp-buy-head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap: 12px;
      }
      .pdp-buy-topbadges{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap: 8px;
        flex-wrap: wrap;
      }
      .pdp-buy-topbadges .pdp-mini-pill{
        padding: 6px 9px;
        font-size: 12px;
      }
      .pdp-buy-topbadges .pdp-mini-pill svg{width:14px; height:14px;}
      .pdp-buy-price{
        display:flex;
        align-items:baseline;
        gap: 10px;
        flex-wrap:wrap;
      }
      .pdp-buy-now{
        font-size: 28px;
        font-weight: 950;
        letter-spacing: -0.35px;
      }
      .pdp-buy-old{
        color: rgba(11,18,32,.58);
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        font-weight: 900;
        font-size: 14px;
      }
      .pdp-buy-meta{
        margin-top: 10px;
        color: rgba(11,18,32,.58);
        font-size: 13px;
        line-height: 1.35;
      }
      .pdp-buy-actions{
        display:flex;
        flex-direction:row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        margin-top: 12px;
      }
      .pdp-buy-actions .pdp-btn{
        width: auto;
        flex: 1 1 0;
        min-width: 0;
      }
      .pdp-buy-actions .pdp-iconbtn{
        flex: 0 0 44px;
        box-shadow: none;
        background: rgba(15,23,42,.04);
      }
      .pdp-buy-actions .pdp-iconbtn:hover{
        background: rgba(15,23,42,.06);
      }

      /* Buy card header (replaces duplicated price block) */
      .pdp-buy-info{display:flex; flex-direction:column; gap: 10px;}
      .pdp-buy-h1{
        margin: 0;
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -0.28px;
        font-weight: 950;
      }
      .pdp-buy-sku{display:grid; gap: 4px;}
      .pdp-buy-sku-k{
        font-size: 12px;
        color: rgba(11,18,32,.58);
        font-weight: 900;
        letter-spacing: .2px;
        text-transform: uppercase;
      }
      .pdp-buy-sku-v{
        font-size: 18px;
        font-weight: 950;
        letter-spacing: -0.02em;
      }
      .pdp-buy-topmeta{display:grid; gap: 8px;}
      .pdp-buy-ratingline,
      .pdp-buy-seasonline{
        display:flex;
        align-items:center;
        gap: 8px;
        font-weight: 950;
        color: rgba(15,23,42,.86);
      }
      .pdp-buy-ratingline svg{
        width: 16px;
        height: 16px;
        color: #f59e0b;
        fill: currentColor;
        stroke: currentColor;
        flex: 0 0 auto;
      }
      .pdp-buy-seasonline svg{width: 16px; height: 16px; opacity:.9; flex: 0 0 auto;}
      .pdp-buy-dot{opacity:.55;}
      .pdp-buy-ratingcount{color: rgba(11,18,32,.66);}
      .pdp-buy-info .pdp-pill{
        padding: 8px 11px;
        font-size: 12.5px;
        box-shadow: none;
      }
      .pdp-btn{
        width: 100%;
        border: none;
        border-radius: 999px;
        padding: 12px 14px;
        background: linear-gradient(135deg, var(--brand1), var(--brand2));
        color: #ffffff;
        font-weight: 950;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 10px;
        box-shadow: 0 18px 44px rgba(91,108,255,.20);
        transition: transform .12s ease, filter .12s ease;
      }
      .pdp-btn:hover{transform: translateY(-1px); filter: brightness(1.04);}
      .pdp-btn:active{transform: translateY(0px); filter: brightness(.98);}
      .pdp-btn svg{width:18px; height:18px}
      .pdp-btn--secondary{
        background: rgba(15,23,42,.04);
        border: 1px solid rgba(15,23,42,.12);
        color: rgba(15,23,42,.86);
        box-shadow: none;
      }

      /* Details card */
      .pdp-title{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap: 12px;
      }
      .pdp-article{
        font-weight: 950;
        font-size: 13px;
        letter-spacing: -0.15px;
        color: rgba(11,18,32,.58);
        white-space: nowrap;
        flex: 0 0 auto;
        padding-top: 4px;
      }
      .pdp-article-v{
        font-weight: 950;
        color: rgba(15,23,42,.92);
      }
      @media (prefers-color-scheme: dark){
        .pdp-article{
          color: rgba(242,246,255,.58);
        }
        .pdp-article-v{color: rgba(242,246,255,.92);}
      }
      .pdp-h1{
        margin: 0;
        font-size: 22px;
        line-height: 1.12;
        letter-spacing: -0.035em;
        font-weight: 950;
        color: rgba(15,23,42,.98);
        text-wrap: balance;
      }
      .pdp-section-title{
        display:inline-flex;
        align-items:center;
        gap:10px;
        min-width:0;
        font-size:21px;
        line-height:1.12;
        letter-spacing:-0.03em;
        font-weight:950;
        color: rgba(15,23,42,.96);
      }
      .pdp-section-title i{
        width:18px;
        height:18px;
        flex:0 0 auto;
        color:rgba(15,23,42,.62);
        filter: drop-shadow(0 6px 10px rgba(15,23,42,.08));
      }
      .pdp-section-title span{
        min-width:0;
      }
      .pdp-section-title--new i{
        color:#15803d;
      }
      .pdp-section-title--reviews i{
        color:#d97706;
        fill:rgba(245,158,11,.18);
      }
      .pdp-section-title--mobile{
        margin:0 0 4px;
        font-size:21px;
        font-weight:950;
        letter-spacing:-0.03em;
      }
      .pdp-sku-block{
        margin-top: 8px;
        display:grid;
        gap: 4px;
      }
      .pdp-sku-label{
        font-size: 12px;
        color: rgba(11,18,32,.58);
        font-weight: 900;
        letter-spacing: .2px;
        text-transform: uppercase;
      }
      .pdp-sku-value{
        font-weight: 950;
        letter-spacing: -0.02em;
        color: rgba(15,23,42,.92);
      }
      .pdp-mini{
        display:flex;
        gap: 10px;
        align-items:center;
        flex-wrap: wrap;
        margin-top: 10px;
        color: rgba(11,18,32,.66);
        font-size: 13px;
      }
      .pdp-mini-dot{opacity:.6;}
      .pdp-mini-pill{
        display:inline-flex;
        gap: 6px;
        align-items:center;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(15,23,42,.03);
        border: 1px solid rgba(15,23,42,.10);
        color: rgba(15,23,42,.88);
        font-weight: 900;
      }
      .pdp-mini-pill svg{width:16px; height:16px; opacity:.9}
      .pdp-mini-pill--ok{
        background: rgba(22,163,74,.10);
        border-color: rgba(22,163,74,.18);
      }
      .pdp-mini-pill--off{
        background: rgba(220,38,38,.10);
        border-color: rgba(220,38,38,.18);
      }
      .pdp-mini-pill--muted{opacity:.85}

      .pdp-divider{
  height:1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.34) 16%, rgba(203,213,225,.88) 50%, rgba(148,163,184,.34) 84%, rgba(148,163,184,0));
}
      .pdp-block{display:flex; flex-direction:column; gap: 10px;}
      .pdp-sizes,.pdp-colors{display:flex; gap: 10px; flex-wrap: wrap;}
      .pdp-chip{
        border-radius: 14px;
        padding: 10px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(15,23,42,.02);
        cursor:pointer;
        user-select:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap: 10px;
        font-weight: 900;
        color: rgba(15,23,42,.86);
        transition: transform .12s ease, border-color .12s ease, background .12s ease;
      }
      .pdp-chip:hover{transform: translateY(-1px); border-color: rgba(15,23,42,.18); background: rgba(15,23,42,.03);}
      .pdp-chip.on{border-color: rgba(91,108,255,.45); background: rgba(91,108,255,.10); box-shadow: 0 0 0 3px rgba(91,108,255,.10);}
      .pdp-chip.off{opacity:.45; cursor:not-allowed; text-decoration: line-through; text-decoration-thickness:2px}
      .pdp-chip--action{
        background: rgba(15,23,42,.03);
      }
      .pdp-chip--wide{width:100%; justify-content:center;}

      .pdp-dot{
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.22);
        box-shadow: 0 10px 24px rgba(15,23,42,.14);
      }
      .pdp-colorname{
        margin-top: 10px;
        color: rgba(11,18,32,.66);
        font-weight: 900;
        font-size: 13px;
      }

      .pdp-desc{
        color: rgba(15,23,42,.78);
        font-size: 14px;
        line-height: 1.55;
      }
      .pdp-specs{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      @media (max-width: 1120px){
        .pdp-specs{grid-template-columns: 1fr;}
      }
      .pdp-spec{
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.02);
        display:flex;
        gap: 10px;
        align-items:flex-start;
      }
      .pdp-spec svg{opacity:.9; margin-top:1px}
      .pdp-spec b{display:block; font-weight: 950; font-size: 13px}
      .pdp-spec span{display:block; color: rgba(11,18,32,.58); font-size: 12.5px; margin-top: 2px}

      /* Reviews (desktop inside details card) */
      .pdp-reviews-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .pdp-reviews-title{
        font-weight: 950;
        letter-spacing: -0.03em;
        font-size: 21px;
        line-height: 1.12;
      }
      .pdp-reviews-d{
        background:
          radial-gradient(circle at top right, rgba(254,240,138,.14), rgba(255,255,255,0) 26%),
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
      }
      .pdp-reviews-d .pdp-pad{
        padding: 22px 24px;
      }
      .pdp-reviews-d .pdp-divider{
        margin: 16px 0 18px;
      }
      .pdp-reviews-d .pdp-chip--action{
        border-color: rgba(15,23,42,.08);
        background: rgba(255,255,255,.86);
        box-shadow: 0 10px 20px rgba(15,23,42,.05);
      }
      .pdp-reviews-d .pdp-chip--action:hover{
        background:#fff;
        border-color: rgba(37,99,235,.16);
      }

      /* New arrivals carousel (desktop, under the photo) */
      .pdp-new-head{
        padding-bottom: 0;
        padding-left: 24px;
        padding-right: 24px;
        margin-bottom: 14px;
      }
      .pdp-new-title{
        font-weight: 950;
        letter-spacing: -0.2px;
      }
      .pdp-carousel{
        display:flex;
        gap: 12px;
        padding: 12px 12px 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .pdp-carousel::-webkit-scrollbar{display:none;}
      .pdp-newarrivals .pdp-carousel{
        /* Match the section header padding so the first card doesn't stick to the edge */
        padding-left: 24px;
        padding-right: 24px;
        scroll-padding-left: 24px;
        scroll-padding-right: 24px;
      }
      .pdp-newarrivals .pdp-carousel .product-card{
        flex: 0 0 calc((100% - 24px) / 3);
        scroll-snap-align: start;
        /* In a scroll container, large shadows get clipped at edges; keep the shadow tighter */
        box-shadow: 0 14px 22px rgba(15,23,42,.12);
      }
      /* Home page: show 5 cards in the "Слайдер новинок" row on desktop. */
      .page-home .home-section.pdp-newarrivals .pdp-carousel .product-card{
        flex: 0 0 calc((100% - 48px) / 5);
      }
      .page-home .home-section.pdp-newarrivals .pdp-carousel{
        padding-left: 8px;
        padding-right: 8px;
        scroll-padding-left: 8px;
        scroll-padding-right: 8px;
      }
      .pdp-newarrivals .product-card:hover{
        transform: translateY(-2px);
        box-shadow: 0 20px 46px rgba(15,23,42,.12);
      }
      .pdp-newarrivals .pdp-carousel .product-card:hover{
        box-shadow: 0 18px 34px rgba(15,23,42,.14);
      }
      .pdp-newarrivals .product-card:hover .product-card__more,
      .pdp-newarrivals .product-card:hover .product-card__pick{
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.07), rgba(15, 23, 42, 0.12));
        border-color: rgba(15, 23, 42, 0.14);
      }

      /* Toast (desktop placement like the mock) */
      .toast{
        left: auto;
        top: auto;
        right: 18px;
        bottom: 18px;
        transform: none;
        width: min(420px, calc(100vw - 36px));
      }
      .toast.on{animation: popd .18s ease both;}
      @keyframes popd{
        from{transform: translateY(6px); opacity:0}
        to{transform: translateY(0); opacity:1}
      }
    }


/* ===== END: product.css ===== */

/* ===== BEGIN: cart.css ===== */
:root{
  --cart-stroke: rgba(15, 23, 42, 0.10);
  --cart-soft: rgba(15, 23, 42, 0.06);
}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cart-item{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items:start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--cart-stroke);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
}

.cart-img{
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--cart-stroke);
  background: #f3f4f6;
  display:block;
}

.cart-title{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: var(--text);
}

.cart-meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-bottom{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.cart-price{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -0.15px;
  color: var(--text);
  white-space: nowrap;
}

.stepper{
  display:grid;
  grid-template-columns: 34px 40px 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--cart-stroke);
  background: var(--cart-soft);
  overflow:hidden;
}

.stepper button{
  border: 0;
  background: transparent;
  color: rgba(15,23,42,.88);
  font-weight: 950;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stepper button:active{background: rgba(15,23,42,.06);}

.stepper .qty{
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,.78);
}

.cart-remove{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--cart-stroke);
  background: rgba(255,255,255,.82);
  color: rgba(15,23,42,.62);
  display:grid;
  place-items:center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cart-remove:active{transform: scale(.98); filter: brightness(.98);}

.field{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.field label{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .1px;
}
.input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,.92);
  color: rgba(15, 23, 42, 0.92);
  padding: 12px 14px;
  outline: none;
  box-shadow: 0 10px 22px rgba(10,18,35,.06);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.input:focus{
  background: rgba(255,255,255,.98);
  border-color: rgba(91,108,255,.38);
  box-shadow: 0 16px 34px rgba(10,18,35,.10);
}

.paygrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.radio{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.04);
  font-weight: 900;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.86);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio input{accent-color: #5b6cff;}
.radio:active{transform: scale(.99);}

.checkout-error{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: rgba(127,29,29,.92);
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 380px){
  .cart-item{grid-template-columns: 64px 1fr auto;}
  .cart-img{width:64px; height:64px;}
  .paygrid{grid-template-columns: 1fr;}
}


/* ===== END: cart.css ===== */

/* ===== BEGIN: account.css ===== */
:root{
  --acc-bg: #f8fafc;
  --acc-surface: #e2e8f0;
  --acc-card: #ffffff;
  --acc-text: rgba(15,23,42,.95);
  --acc-muted: rgba(15,23,42,.60);
  --acc-stroke: rgba(15,23,42,.10);
  --acc-shadow: 0 18px 45px rgba(15,23,42,.10);
  --acc-r: 28px;
}

body.acc{
  background: var(--acc-bg);
  color: var(--acc-text);
}
@media (prefers-color-scheme: dark){
  body.acc{
    background: #0a0d14;
    --acc-card: rgba(18,22,34,.68);
    --acc-surface: rgba(255,255,255,.10);
    --acc-text: rgba(242,246,255,.92);
    --acc-muted: rgba(242,246,255,.58);
    --acc-stroke: rgba(255,255,255,.10);
    --acc-shadow: 0 26px 70px rgba(0,0,0,.48);
  }
}

.acc-container{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header (like profile_pwa_ios.html) */
.acc-head{
  background: var(--acc-card);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: calc(16px + var(--safe-top)) 0 14px;
}
@media (prefers-color-scheme: dark){
  .acc-head{
    border-bottom-color: rgba(255,255,255,.08);
  }
}

.acc-headrow{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}

.acc-avatar{
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 12px 34px rgba(15,23,42,.14);
  color: #fff;
  font-weight: 950;
  font-size: 30px;
  flex: none;
}

.acc-meta{min-width:0; flex: 1;}
.acc-name{
  margin:0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-email{
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--acc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-badges{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.acc-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--acc-stroke);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.86);
}
.acc-badge svg{width:14px; height:14px}
@media (prefers-color-scheme: dark){
  .acc-badge{background: rgba(255,255,255,.06); color: rgba(242,246,255,.88);}
}
.acc-badge--vip{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.22);
  color: rgba(180,83,9,.98);
}
@media (prefers-color-scheme: dark){
  .acc-badge--vip{color: rgba(253,230,138,.98);}
}
.acc-badge--ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
  color: rgba(6,95,70,.98);
}
@media (prefers-color-scheme: dark){
  .acc-badge--ok{color: rgba(187,247,208,.98);}
}

.acc-actions{
  display:flex;
  gap: 10px;
  flex: none;
}
.acc-icbtn{
  width: 42px;
  height: 42px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid var(--acc-stroke);
  background: var(--acc-surface);
  color: var(--acc-text);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.acc-icbtn:active{transform: scale(.98); filter: brightness(.98);}
.acc-icbtn svg{width:20px; height:20px}

.acc-flash{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--acc-stroke);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  font-weight: 900;
  font-size: 13px;
}
@media (prefers-color-scheme: dark){
  .acc-flash{background: rgba(18,22,34,.78);}
}
.acc-flash--ok{
  border-color: rgba(34,197,94,.22);
  background: rgba(34,197,94,.12);
  color: rgba(6,95,70,.98);
}
.acc-flash--bad{
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.10);
  color: rgba(127,29,29,.92);
}
@media (prefers-color-scheme: dark){
  .acc-flash--ok{color: rgba(187,247,208,.98);}
  .acc-flash--bad{color: rgba(254,202,202,.98);}
}

/* Main */
.acc-main{
  padding-top: 14px;
  padding-bottom: calc(18px + var(--safe-bottom));
}

.acc-card{
  background: var(--acc-card);
  border: 1px solid var(--acc-stroke);
  border-radius: var(--acc-r);
  box-shadow: var(--acc-shadow);
  overflow:hidden;
}

.acc-pad{padding: 16px;}

/* Bonus/summary card */
.acc-bonus{
  border: none;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #fff;
  box-shadow: 0 16px 38px rgba(15,23,42,.16);
  position: relative;
}
.acc-bonus::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 62%);
  animation: accpulse 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes accpulse{
  0%,100%{transform: scale(1); opacity:.55}
  50%{transform: scale(1.08); opacity:.9}
}
.acc-bonusTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  position: relative;
}
.acc-bonusLabel{
  display:inline-flex;
  align-items:center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.98);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(2,6,23,.28);
}
.acc-bonusVal{
  margin-top: 6px;
  font-size: 40px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 3px 12px rgba(2,6,23,.34);
}
.bonus-smiles{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bonus-smiles svg{
  width: 16px;
  height: 16px;
  color: #f59e0b;
  flex: 0 0 auto;
}
.bonus-smiles--lg svg{
  width: 20px;
  height: 20px;
}
.bonus-smiles--hero svg{
  width: 28px;
  height: 28px;
}
.acc-bonusSub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 3px rgba(2,6,23,.26);
}
.acc-qrbtn{
  width: 56px;
  height: 56px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
  position: relative;
}
.acc-qrbtn:active{transform: scale(.98); filter: brightness(.98);}
.acc-qrbtn svg{width:26px; height:26px}
.acc-bgrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
.acc-bcell{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(2,6,23,.14);
  padding: 12px;
  text-align:center;
}
.acc-bcell .k{
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(2,6,23,.24);
}
.acc-bcell .v{
  margin-top: 6px;
  font-size: 15px;
  font-weight: 950;
  color: #fff;
  text-shadow: 0 1px 4px rgba(2,6,23,.26);
}

/* Divider with label (like iOS sections) */
.acc-divider{
  position: relative;
  text-align:center;
  margin: 16px 0 10px;
}
.acc-divider::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.10), transparent);
}
@media (prefers-color-scheme: dark){
  .acc-divider::before{background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.24) 16%, rgba(226,232,240,.42) 50%, rgba(148,163,184,.24) 84%, rgba(148,163,184,0));}
}
.acc-divider span{
  position: relative;
  display:inline-block;
  padding: 0 12px;
  background: var(--acc-bg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc-muted);
}
@media (prefers-color-scheme: dark){
  .acc-divider span{background: #0a0d14;}
}

/* Info rows */
.acc-info{
  display:flex;
  flex-direction:column;
}
.acc-row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 13px 16px;
}
.acc-row + .acc-row{border-top: 1px solid rgba(15,23,42,.08);}
@media (prefers-color-scheme: dark){
  .acc-row + .acc-row{border-top-color: rgba(255,255,255,.08);}
}
.acc-rowIco{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: var(--acc-surface);
  border: 1px solid var(--acc-stroke);
  flex: none;
}
.acc-rowIco svg{width:22px; height:22px}
.acc-rowBody{min-width:0; flex:1;}
.acc-rowBody .k{font-size: 11px; font-weight: 850; color: var(--acc-muted);}
.acc-rowBody .v{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.acc-rowEdit{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid var(--acc-stroke);
  background: var(--acc-surface);
  color: var(--acc-text);
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.acc-rowEdit:active{transform: scale(.98); filter: brightness(.98);}
.acc-rowEdit svg{width:18px; height:18px}

.acc-note{
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.03);
  color: var(--acc-muted);
  font-weight: 850;
  font-size: 12px;
  line-height: 1.35;
}
@media (prefers-color-scheme: dark){
  .acc-note{
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    color: rgba(242,246,255,.62);
  }
}

/* Menu list */
.acc-menu{
  display:flex;
  flex-direction:column;
}
.acc-menuItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, transform .12s ease, filter .12s ease;
}
.acc-menuItem + .acc-menuItem{border-top: 1px solid rgba(15,23,42,.08);}
@media (prefers-color-scheme: dark){
  .acc-menuItem + .acc-menuItem{border-top-color: rgba(255,255,255,.08);}
}
.acc-menuItem:active{background: rgba(15,23,42,.04); transform: scale(.995); filter: brightness(.99);}
@media (prefers-color-scheme: dark){
  .acc-menuItem:active{background: rgba(255,255,255,.06);}
}
.acc-miLeft{display:flex; align-items:center; gap: 12px; min-width:0;}
.acc-miIco{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  flex:none;
}
.acc-miIco svg{width:20px; height:20px}
.acc-miIco--blue{background: rgba(59,130,246,.12); color: rgba(59,130,246,.95);}
.acc-miIco--green{background: rgba(34,197,94,.12); color: rgba(34,197,94,.95);}
.acc-miIco--amber{background: rgba(245,158,11,.14); color: rgba(245,158,11,.95);}
.acc-miIco--violet{background: rgba(168,85,247,.12); color: rgba(168,85,247,.95);}
.acc-miIco--pink{background: rgba(236,72,153,.12); color: rgba(236,72,153,.95);}
.acc-miText{min-width:0;}
.acc-miTitle{font-weight: 950; font-size: 13px; letter-spacing:-0.1px;}
.acc-miSub{margin-top: 2px; font-size: 11px; font-weight: 850; color: var(--acc-muted);}
.acc-miChevron{opacity:.40}
.acc-miChevron svg{width:20px; height:20px}

/* Orders */
.orders{display:flex; flex-direction:column; gap: 10px;}
.order{
  display:block;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--acc-stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  text-decoration:none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.order:active{transform: scale(.995); filter: brightness(.99);}
@media (prefers-color-scheme: dark){
  .order{background: rgba(18,22,34,.62); box-shadow: 0 18px 45px rgba(0,0,0,.46);}
}

.favorites{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 8px;
  scrollbar-width: none;
}
.favorites::-webkit-scrollbar{display:none;}

.acc-favorites-section .favorites{
  margin-top: 2px;
}

.acc-favorites-section.pdp-newarrivals .favorites.pdp-carousel{
  padding-left: 2px;
  padding-right: 2px;
  scroll-padding-left: 2px;
  scroll-padding-right: 2px;
}

.acc-favorites-section.pdp-newarrivals .favorites.pdp-carousel .product-card{
  flex: 0 0 min(220px, calc(100vw - 108px));
  scroll-snap-align: start;
}

@media (hover: hover) and (pointer: fine){
  .acc-favorites-section.pdp-newarrivals .favorites.pdp-carousel .product-card{
    flex: 0 0 calc((100% - 24px) / 3);
  }
}
.favorite-empty{
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed var(--acc-stroke);
  color: var(--acc-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.acc-delivery-headActions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.acc-addbtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--acc-stroke);
  background: rgba(255,255,255,.90);
  color: rgba(15,23,42,.88);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.acc-addbtn svg{
  width: 17px;
  height: 17px;
}
.acc-addbtn:active{
  transform: scale(.98);
  filter: brightness(.98);
}

.acc-delivery-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-delivery-swipe{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  touch-action: pan-y;
}

.acc-delivery-swipe.is-locked{
  touch-action: auto;
}

.acc-delivery-swipe__menu{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 112px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}

.acc-delivery-swipe.is-open .acc-delivery-swipe__menu{
  opacity: 1;
  pointer-events: auto;
}

.acc-delivery-swipe.is-dragging .acc-delivery-swipe__menu{
  opacity: 1;
}

.acc-delivery-empty{
  display: grid;
  gap: 10px;
}

.acc-delivery-item{
  position: relative;
  border: 1px solid var(--acc-stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  padding: 12px;
  transition: transform .2s ease, opacity .18s ease, filter .18s ease;
  will-change: transform;
}

.acc-delivery-swipe.is-open .acc-delivery-item{
  transform: translateX(-112px);
}

.acc-delivery-swipe.is-dragging .acc-delivery-item{
  transition: none !important;
}

.acc-delivery-swipe.is-deleting .acc-delivery-item{
  opacity: .55;
  filter: saturate(.72);
}

.acc-delivery-item.is-primary{
  border-color: rgba(91,108,255,.30);
  background: linear-gradient(135deg, rgba(91,108,255,.08), rgba(154,123,255,.10));
}

.acc-delivery-item__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 34px;
}

.acc-delivery-item__type{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.05);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.74);
}

.acc-delivery-item__main{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.24);
  background: rgba(34,197,94,.10);
  font-size: 11px;
  font-weight: 900;
  color: rgba(6,95,70,.98);
}

.acc-delivery-item__line{
  margin-top: 9px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.12px;
  color: rgba(15,23,42,.94);
  line-height: 1.35;
}

.acc-delivery-item__meta{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 850;
  color: var(--acc-muted);
}

.acc-delivery-delete{
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.acc-delivery-delete[disabled]{
  pointer-events: none;
  opacity: .55;
}

.acc-delivery-delete--desktop{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.80);
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.acc-delivery-delete--desktop svg{
  width: 15px;
  height: 15px;
}

.acc-delivery-delete--desktop:active{
  transform: scale(.96);
  filter: brightness(.98);
}

.acc-delivery-delete--swipe{
  width: 112px;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(239,68,68,.94), rgba(220,38,38,.98));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
}

.acc-delivery-delete--swipe:active{
  filter: brightness(.96);
}

.acc-delivery-swipe.is-locked .acc-delivery-item__top{
  padding-right: 0;
}

@media (min-width: 1024px){
  .acc-delivery-swipe{
    overflow: visible;
    touch-action: auto;
  }

  .acc-delivery-swipe__menu{
    display: none;
  }

  .acc-delivery-swipe.is-open .acc-delivery-item{
    transform: none;
  }

  .acc-delivery-delete--desktop{
    display: inline-flex;
  }
}

@media (max-width: 1023px){
  .acc-delivery-delete--desktop{
    display: none !important;
  }
}

.acc-suggest{
  margin-top: 8px;
  border: 1px solid var(--acc-stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
  max-height: 230px;
  overflow: auto;
}
.acc-suggest[hidden]{
  display: none !important;
}
.acc-suggest__meta{
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 850;
  color: var(--acc-muted);
}
.acc-suggest__item{
  width: 100%;
  border: 0;
  border-top: 1px solid var(--acc-stroke);
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.acc-suggest__item:first-child{
  border-top: 0;
}
.acc-suggest__item strong{
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.08px;
  color: rgba(15,23,42,.92);
}
.acc-suggest__item small{
  display: block;
  font-size: 11px;
  font-weight: 850;
  color: var(--acc-muted);
}
.acc-suggest__item:active{
  background: rgba(91,108,255,.08);
}

@media (prefers-color-scheme: dark){
  .acc-addbtn{
    background: rgba(255,255,255,.10);
    color: rgba(242,246,255,.92);
    box-shadow: 0 16px 36px rgba(0,0,0,.34);
  }
  .acc-suggest{
    background: rgba(18,22,34,.94);
    box-shadow: 0 18px 45px rgba(0,0,0,.40);
  }
  .acc-suggest__item strong{
    color: rgba(242,246,255,.94);
  }
  .acc-delivery-item{
    background: rgba(18,22,34,.62);
    box-shadow: 0 18px 45px rgba(0,0,0,.46);
  }
  .acc-delivery-delete--desktop{
    border-color: rgba(255,255,255,.16);
    background: rgba(18,22,34,.84);
    color: rgba(242,246,255,.92);
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
  }
  .acc-delivery-delete--swipe{
    background: linear-gradient(180deg, rgba(248,113,113,.92), rgba(239,68,68,.95));
    color: rgba(255,255,255,.98);
  }
  .acc-delivery-item.is-primary{
    border-color: rgba(154,123,255,.34);
    background: linear-gradient(135deg, rgba(91,108,255,.20), rgba(154,123,255,.22));
  }
  .acc-delivery-item__type{
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: rgba(242,246,255,.86);
  }
  .acc-delivery-item__line{
    color: rgba(242,246,255,.94);
  }
}

.order-top{display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;}
.order-num{font-weight: 950; letter-spacing: -0.2px;}
.order-date{margin-top: 3px; font-size: 12px; color: var(--acc-muted); font-weight: 850;}
.order-meta{margin-top: 10px; display:flex; align-items:center; justify-content:space-between; gap: 10px;}
.order-sum{font-weight: 950; letter-spacing: -0.2px; white-space: nowrap;}
.order-items{margin-top: 3px; font-size: 12px; color: var(--acc-muted); font-weight: 850; text-align: right;}

.status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--acc-stroke);
  background: rgba(15,23,42,.04);
  font-weight: 950;
  font-size: 12px;
  color: rgba(15,23,42,.86);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){
  .status{background: rgba(255,255,255,.06); color: rgba(242,246,255,.88);}
}
.status-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.95);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
  flex: none;
}
.status--new .status-dot{background: rgba(99,102,241,.95); box-shadow:0 0 0 4px rgba(99,102,241,.18);}
.status--packing .status-dot{background: rgba(245,158,11,.95); box-shadow:0 0 0 4px rgba(245,158,11,.18);}
.status--sent .status-dot{background: rgba(14,165,233,.95); box-shadow:0 0 0 4px rgba(14,165,233,.18);}
.status--delivered .status-dot{background: rgba(34,197,94,.95); box-shadow:0 0 0 4px rgba(34,197,94,.18);}
.status--returned .status-dot{background: rgba(239,68,68,.95); box-shadow:0 0 0 4px rgba(239,68,68,.18);}
.status--closed .status-dot{background: rgba(148,163,184,.95); box-shadow:0 0 0 4px rgba(148,163,184,.18);}
.status--cancelled .status-dot{background: rgba(239,68,68,.95); box-shadow:0 0 0 4px rgba(239,68,68,.18);}

.acc-logout{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--acc-r);
  border: 1px solid rgba(239,68,68,.18);
  background: var(--acc-card);
  color: rgba(239,68,68,.96);
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.acc-logout svg{width:18px; height:18px}
.acc-logout:active{transform: scale(.995); filter: brightness(.99);}

.acc-foot{
  text-align:center;
  margin-top: 14px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 850;
  color: rgba(15,23,42,.40);
}
@media (prefers-color-scheme: dark){
  .acc-foot{color: rgba(242,246,255,.32);}
}

/* QR modal */
.acc-modal{
  position: fixed;
  inset: 0;
  z-index: 140;
  display:none;
}
.acc-modal.on{display:block;}
.acc-modal-back{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.acc-modal-card{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 28px));
  border-radius: 26px;
  border: 1px solid var(--acc-stroke);
  background: var(--acc-card);
  box-shadow: var(--acc-shadow);
  padding: 16px;
}
.acc-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.acc-modal-head h3{
  margin:0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing:-0.02em;
}
.page-account .sheet-head{
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.page-account .sheet-head__title i,
.page-account .acc-modal-head__title i{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.page-account .acc-modal-head__title i{
  color: rgba(15,23,42,.58);
}
.page-account #profilePanel .sheet-head__title i{
  color: #2563eb;
}
.page-account #deliveryPanel .sheet-head__title i{
  color: #15803d;
}
.acc-qrbox{
  margin: 14px 0 10px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  position: relative;
}
.acc-qrbox::before{
  content:none;
}
.acc-qrbox::after{
  content:none;
}
.acc-qrbox > *{
  position: relative;
  z-index: 2;
}
.acc-qrbox img,
.acc-qrbox canvas{
  display: block;
  max-width: min(220px, 72vw);
  height: auto !important;
  border-radius: 16px;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.acc-qrbox table{
  display: block;
  max-width: min(220px, 72vw);
  width: auto !important;
  height: auto !important;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 16px;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  overflow: hidden;
}
.acc-modal-note{
  text-align:center;
  margin: 10px 0 14px;
  color: var(--acc-muted);
  font-weight: 850;
  font-size: 12px;
}

/* ===== END: account.css ===== */

/* ===== PAGE OVERRIDES ===== */
body.page-catalog {
  --bg-0: #f6f3f9;
  --bg-1: #eef2ff;
  --bg-2: #f7f4fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.62);
  --stroke: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.10);
  --card-r: 24px;
  --cut-r: 24px;

  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  min-height: 100vh;
}

@media (prefers-color-scheme: dark){
  body.page-catalog {
    --card: #ffffff;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, 0.62);
    --stroke: rgba(15, 23, 42, 0.10);
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.10);
    background: #fff;
    color: #0f172a;
  }
}

body.page-home{
  --home-bg-1: #ffffff;
  --home-bg-2: #ffffff;
  --home-hero-1: #2563eb;
  --home-hero-2: #22c55e;
  --home-hero-3: #06b6d4;
  background: #ffffff;
  color: var(--text, #0f172a);
  min-height: 100vh;
  overflow-x: hidden;
}

.app-header--home{
  margin-bottom: 12px;
}

.home-main{
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px calc(118px + var(--safe-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.home-main > *{
  min-width: 0;
}

/* ===== FINAL HOME + HEADER REFINEMENTS END ===== */
.home-group--fallback{
  background: linear-gradient(135deg, #eef4ff, #f8fafc 58%, #ecfeff);
}

.home-group__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.94), rgba(255,255,255,.42) 46%, rgba(255,255,255,0) 74%),
    linear-gradient(135deg, rgba(219,234,254,.92), rgba(191,219,254,.38) 52%, rgba(236,252,203,.54));
}

.home-group__placeholder i{
  width: 52px;
  height: 52px;
  color: rgba(37,99,235,.58);
}

.app-header--catalog .shop-topbar__navmenu,
.app-header--catalog .shop-topbar__profilemenu,
.app-header--catalog .shop-topbar__mobilemenu{
  position: relative;
}

@media (min-width: 901px){
  .app-header--catalog .shop-topbar__navmenu::after,
  .app-header--catalog .shop-topbar__profilemenu::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 18px;
  }

  .app-header--catalog .shop-topbar__profilemenu::after{
    left: -6px;
    right: -6px;
  }

  .app-header--catalog .app-header__inner{
    gap: 16px;
  }

  .app-header--catalog .shop-topbar__actions{
    margin-left: 12px;
  }

  .app-header--catalog .shop-topbar__navdropdown{
    top: calc(100% + 10px);
  }

  .app-header--catalog .shop-topbar__profiledropdown{
    top: calc(100% + 10px);
  }
}

.shop-topbar__mobilemenu{
  display: none;
  flex: 0 0 auto;
}

.shop-topbar__mobilemenu > summary{
  list-style: none;
  cursor: pointer;
}

.shop-topbar__mobilemenu > summary::-webkit-details-marker{
  display: none;
}

.shop-topbar__mobiletrigger{
  transition: background 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiletrigger{
  background: #fff !important;
  border-color: rgba(91,108,255,.16) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.08) !important;
}

.shop-topbar__mobiledropdown{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
  box-shadow:
    0 28px 54px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.88);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 240;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiledropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.shop-topbar__mobilehead{
  display: grid;
  gap: 6px;
  padding: 2px 2px 14px;
}

.shop-topbar__mobileeyebrow{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(37,99,235,.72);
}

.shop-topbar__mobiletitle{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(15,23,42,.96);
}

.shop-topbar__mobilemeta{
  color: rgba(15,23,42,.56);
  font-size: 12px;
  line-height: 1.55;
}

.shop-topbar__mobileprimary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 14px;
}

.shop-topbar__mobilepill{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.92);
  color: rgba(15,23,42,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.shop-topbar__mobilepill.is-active{
  color: rgba(15,23,42,.96);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.shop-topbar__mobilesection{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(226,232,240,.72);
}

.shop-topbar__mobilesectionhead{
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.shop-topbar__mobilesectiontitle{
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.94);
}

.shop-topbar__mobilesectionmeta{
  color: rgba(15,23,42,.52);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilegrid{
  display: grid;
  gap: 8px;
}

.shop-topbar__mobilecard{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.88);
  color: rgba(15,23,42,.92);
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(15,23,42,.05);
  transition: transform 160ms ease, box-shadow 180ms ease, border-color 160ms ease, background 160ms ease;
}

.shop-topbar__mobilecard:hover{
  transform: translateY(-1px);
  border-color: rgba(91,108,255,.14);
  background: #fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}

.shop-topbar__mobilecard i{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.90));
  color: #2563eb;
  box-shadow: 0 12px 24px rgba(37,99,235,.14);
}

.shop-topbar__mobilecardcopy{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-topbar__mobilecardtitle{
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
}

.shop-topbar__mobilecardmeta{
  color: rgba(15,23,42,.56);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilecta{
  margin-top: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), #7c8cff 52%, #4f46e5);
  box-shadow: 0 18px 32px rgba(91,108,255,.24);
}

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

  .app-header--catalog .app-header__inner{
    gap: 10px;
  }

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

  .shop-topbar__actions{
    margin-left: auto;
  }
}

@media (max-width: 640px){
  .home-main{
    gap: 12px;
  }

  .home-hero{
    gap: 14px;
    padding: 20px 16px;
    border-radius: 22px;
  }

  .home-hero__title{
    max-width: 9ch;
    font-size: clamp(26px, 8.2vw, 34px);
  }

  .home-hero__text{
    font-size: 14px;
    line-height: 1.55;
  }

  .home-hero__spotlight-card{
    padding: 14px;
    border-radius: 18px;
  }

  .home-groups{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .home-group,
  .home-group:nth-child(6n + 1),
  .home-group:nth-child(6n + 2),
  .home-group:nth-child(6n + 3){
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 146px;
    padding: 14px 14px 16px;
    border-radius: 20px;
  }

  .home-group:nth-child(6n + 1){
    min-height: 162px;
  }

  .home-group__media{
    inset: 8px 8px 8px 42%;
    border-radius: 18px;
  }

  .home-group__media img{
    object-fit: contain;
    object-position: center center;
    padding: 10px;
    background:
      radial-gradient(circle at center, rgba(255,255,255,.26), rgba(255,255,255,0) 64%),
      linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.01));
    filter: saturate(1.04) brightness(.96);
    transform: none;
  }

  .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.72) 44%, rgba(15,23,42,.26) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 34%);
  }

  .home-group--fallback .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.64) 46%, rgba(37,99,235,.20) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%);
  }

  .home-group__title,
  .home-group:nth-child(6n + 1) .home-group__title{
    left: 14px;
    right: 44%;
    bottom: 15px;
    font-size: 16px;
    max-width: none;
  }

  .home-group:nth-child(6n + 1) .home-group__title{
    font-size: 18px;
  }

  .home-group__meta{
    top: 12px;
    left: 12px;
    right: auto;
    min-width: 36px;
    height: 24px;
    padding: 0 9px;
  }

  .home-group::after{
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
  }

  .home-group__placeholder{
    inset: 6px;
    border-radius: 16px;
  }

  .home-group__placeholder i{
    width: 46px;
    height: 46px;
  }
}

/* ===== CLASSIC HEADER REWORK FINAL END ===== */
.app-header--catalog,
body.page-home .app-header--catalog,
body.page-account .app-header--catalog,
body.page-offer .app-header--catalog,
body.page-policy .app-header--catalog,
body.page-catalog .app-header--catalog{
  position: sticky;
  top: 0;
  z-index: 120;
  padding: calc(8px + var(--safe-top, 0px)) 0 0;
  background: rgba(252,250,247,.96) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.app-header--catalog .app-header__inner,
body.page-home .app-header--catalog .app-header__inner,
body.page-account .app-header--catalog .app-header__inner,
body.page-offer .app-header--catalog .app-header__inner,
body.page-policy .app-header--catalog .app-header__inner,
body.page-catalog .app-header--catalog .app-header__inner{
  max-width: 1180px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 20px 10px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.shop-topbar__brand{
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.shop-topbar__brandmark{
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}

.shop-topbar__brandmark img{
  width: 28px !important;
  height: 28px !important;
}

.shop-topbar__brandcopy{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shop-topbar__brandname{
  color: #111827 !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

.shop-topbar__brandmeta{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.shop-topbar__branddot{
  width: 4px !important;
  height: 4px !important;
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

.shop-topbar__brandstatus{
  color: #94a3b8 !important;
}

.shop-topbar__nav{
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__nav > *{
  position: relative;
}

.app-header--catalog .shop-topbar__navmenu,
.app-header--catalog .shop-topbar__profilemenu{
  position: relative;
}

.app-header--catalog .shop-topbar__navmenu::after,
.app-header--catalog .shop-topbar__profilemenu::after{
  content: "";
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 16px;
}

.shop-topbar__navlink,
.shop-topbar__navmenu > summary.shop-topbar__navlink{
  min-height: auto !important;
  padding: 12px 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.shop-topbar__navlink:hover,
.shop-topbar__navmenu:hover > summary.shop-topbar__navlink,
.shop-topbar__navlink.is-active,
.shop-topbar__navmenu[open] > .shop-topbar__navlink,
.shop-topbar__navmenu.is-active > .shop-topbar__navlink{
  color: #111827 !important;
  border-bottom-color: #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__navchev{
  width: 12px !important;
  height: 12px !important;
  color: #94a3b8 !important;
  transition: transform .22s ease, color .22s ease;
}

.shop-topbar__navmenu[open] .shop-topbar__navchev,
.shop-topbar__navmenu:hover .shop-topbar__navchev{
  color: #111827 !important;
  transform: rotate(180deg);
}

.shop-topbar__navdropdown{
  top: calc(100% + 12px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(680px, calc(100vw - 56px)) !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 26px 56px rgba(15,23,42,.12) !important;
  transform: translate(-50%, -8px) !important;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  transform: translate(-50%, 0) !important;
}

.shop-topbar__navdropdown::before{
  display: none !important;
}

.shop-topbar__navdropdownhead{
  margin-bottom: 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
}

.shop-topbar__navdroptitle{
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.shop-topbar__navdropmeta{
  margin-top: 6px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.shop-topbar__navgrid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.shop-topbar__navcard{
  min-height: 0 !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
}

.shop-topbar__navcard:hover{
  border-color: rgba(148,163,184,.54) !important;
  box-shadow: 0 12px 22px rgba(15,23,42,.06) !important;
  transform: translateY(-1px);
}

.shop-topbar__navcard i,
.shop-topbar__profilelink i,
.shop-topbar__mobilecard i{
  color: #475569 !important;
}

.shop-topbar__navcardtitle,
.shop-topbar__profilename,
.shop-topbar__profilepaneltitle,
.shop-topbar__mobiletitle,
.shop-topbar__mobilecardtitle,
.shop-topbar__mobilesectiontitle{
  color: #111827 !important;
}

.shop-topbar__navcardmeta,
.shop-topbar__profilemeta,
.shop-topbar__profilepanelmeta,
.shop-topbar__mobilemeta,
.shop-topbar__mobilesectionmeta,
.shop-topbar__mobilecardmeta{
  color: #64748b !important;
}

.shop-topbar__actions,
.app-header--catalog .app-header__actions{
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.app-header--catalog .app-iconbtn,
.app-header--catalog .shop-topbar__mobiletrigger,
.app-header--catalog .shop-topbar__profiletrigger,
.app-header--catalog .shop-cartbtn{
  min-height: 46px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  color: #111827 !important;
}

.shop-cartbtn__badge{
  background: #111827 !important;
  color: #fff !important;
}

.shop-topbar__profiletrigger{
  min-width: 0;
  padding: 7px 12px 7px 8px !important;
  gap: 10px;
}

.shop-topbar__profileavatar,
.shop-topbar__profilepanelavatar{
  background: #f4efe8 !important;
  color: #7c5b3a !important;
}

.shop-topbar__profilemenu[open] > .shop-topbar__profiletrigger{
  border-color: rgba(15,23,42,.12) !important;
}

.shop-topbar__profiledropdown{
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 28px)) !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 52px rgba(15,23,42,.12) !important;
}

.shop-topbar__profilepanelhead{
  padding: 0 0 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
}

.shop-topbar__profilelink{
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #334155 !important;
}

.shop-topbar__profilelink:hover{
  border-color: rgba(226,232,240,.92) !important;
  background: #f8fafc !important;
}

.shop-topbar__profilelink--danger{
  color: #b91c1c !important;
}

.shop-topbar__mobilemenu{
  display: none !important;
}

.shop-topbar__mobiledropdown{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 28px 60px rgba(15,23,42,.16) !important;
}

.shop-topbar__mobilehead{
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
}

.shop-topbar__mobileeyebrow{
  color: #a16207 !important;
}

.shop-topbar__mobileprimary{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-topbar__mobilepill{
  min-height: 44px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.shop-topbar__mobilepill.is-active{
  border-color: rgba(15,23,42,.18) !important;
  background: #f8fafc !important;
  color: #111827 !important;
}

.shop-topbar__mobilecard{
  min-height: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
}

.shop-topbar__mobilecta{
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid #111827 !important;
  background: #111827 !important;
  box-shadow: none !important;
}

@media (max-width: 980px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 68px;
    padding: 0 14px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .shop-topbar__nav{
    display: none !important;
  }

  .shop-topbar__brand{
    gap: 10px;
  }

  .shop-topbar__brandmark{
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px;
    border-radius: 13px !important;
  }

  .shop-topbar__brandmark img{
    width: 24px !important;
    height: 24px !important;
  }

  .shop-topbar__brandname{
    font-size: 16px !important;
  }

  .shop-topbar__brandmeta{
    gap: 6px;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-topbar__brandstatus{
    display: none;
  }

  .shop-topbar__actions,
  .app-header--catalog .app-header__actions{
    gap: 8px;
  }

  .shop-topbar__mobilemenu{
    display: block !important;
  }

  .shop-topbar__mobiletrigger,
  .shop-cartbtn,
  .shop-topbar__profiletrigger,
  .app-header--catalog .app-iconbtn{
    width: 44px;
    min-width: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center;
  }

  .shop-topbar__profilecopy,
  .shop-topbar__profilechev{
    display: none !important;
  }

  .shop-topbar__mobiledropdown{
    position: fixed !important;
    top: calc(var(--safe-top, 0px) + 74px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 88px)) !important;
    padding: 16px !important;
    overflow: auto;
  }

  .shop-topbar__mobileprimary,
  .shop-topbar__mobilegrid{
    grid-template-columns: 1fr !important;
  }

  .shop-topbar__mobilepill{
    justify-content: flex-start;
    padding: 0 14px !important;
  }
}

@media (max-width: 640px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 64px;
    padding: 0 12px 8px;
  }

  .shop-topbar__brandname{
    font-size: 15px !important;
  }

  .shop-topbar__brandmeta{
    max-width: 140px;
  }

  .shop-topbar__mobiledropdown{
    top: calc(var(--safe-top, 0px) + 68px) !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 20px !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 80px)) !important;
  }
}

/* ===== MOBILE HEADER RESCUE ===== */
@media screen and (max-width: 980px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 12px 8px !important;
    min-height: 62px !important;
    align-items: center !important;
  }

  .app-header--catalog .shop-topbar__left{
    min-width: 0 !important;
    width: auto !important;
  }

  .app-header--catalog .shop-topbar__brand{
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-header--catalog .shop-topbar__brandmark{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 12px !important;
  }

  .app-header--catalog .shop-topbar__brandmark img{
    width: 22px !important;
    height: 22px !important;
  }

  .app-header--catalog .shop-topbar__brandcopy{
    min-width: 0 !important;
    gap: 0 !important;
  }

  .app-header--catalog .shop-topbar__brandname{
    font-size: 14px !important;
    line-height: 1.05 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-header--catalog .shop-topbar__brandmeta,
  .app-header--catalog .shop-topbar__branddot,
  .app-header--catalog .shop-topbar__brandstatus{
    display: none !important;
  }

  .app-header--catalog .shop-topbar__nav,
  .app-header--catalog nav.shop-topbar__nav,
  body.page-home .app-header--catalog .shop-topbar__nav,
  body.page-account .app-header--catalog .shop-topbar__nav,
  body.page-offer .app-header--catalog .shop-topbar__nav,
  body.page-policy .app-header--catalog .shop-topbar__nav,
  body.page-catalog .app-header--catalog .shop-topbar__nav{
    position: absolute !important;
    left: -200vw !important;
    top: auto !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: hidden !important;
  }

  .app-header--catalog .shop-topbar__actions,
  body.page-home .app-header--catalog .shop-topbar__actions,
  body.page-account .app-header--catalog .shop-topbar__actions,
  body.page-offer .app-header--catalog .shop-topbar__actions,
  body.page-policy .app-header--catalog .shop-topbar__actions,
  body.page-catalog .app-header--catalog .shop-topbar__actions{
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .app-header--catalog .shop-topbar__actions > *{
    flex: 0 0 auto !important;
  }

  .app-header--catalog .shop-topbar__mobilemenu{
    display: block !important;
  }

  .app-header--catalog .shop-topbar__mobiletrigger,
  .app-header--catalog .shop-cartbtn,
  .app-header--catalog .shop-topbar__profiletrigger,
  .app-header--catalog .app-iconbtn{
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
    box-shadow: 0 6px 14px rgba(15,23,42,.05) !important;
  }

  .app-header--catalog .shop-topbar__profilecopy,
  .app-header--catalog .shop-topbar__profilechev{
    display: none !important;
  }

  .app-header--catalog .shop-topbar__profileavatar{
    margin: 0 !important;
  }

  .app-header--catalog .shop-cartbtn__badge{
    top: 4px !important;
    right: 4px !important;
  }

  .app-header--catalog .shop-topbar__mobiledropdown{
    position: fixed !important;
    top: calc(var(--safe-top, 0px) + 64px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 76px)) !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow: auto !important;
  }

  .app-header--catalog .shop-topbar__mobilehead{
    gap: 4px !important;
    padding-bottom: 12px !important;
  }

  .app-header--catalog .shop-topbar__mobileeyebrow{
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  .app-header--catalog .shop-topbar__mobiletitle{
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  .app-header--catalog .shop-topbar__mobilemeta{
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .app-header--catalog .shop-topbar__mobileprimary,
  .app-header--catalog .shop-topbar__mobilegrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .app-header--catalog .shop-topbar__mobilepill{
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
  }

  .app-header--catalog .shop-topbar__mobilesection{
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  .app-header--catalog .shop-topbar__mobilesectionhead{
    gap: 2px !important;
    margin-bottom: 8px !important;
  }

  .app-header--catalog .shop-topbar__mobilesectiontitle{
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .app-header--catalog .shop-topbar__mobilesectionmeta{
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .app-header--catalog .shop-topbar__mobilecard{
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .app-header--catalog .shop-topbar__mobilecard i{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  .app-header--catalog .shop-topbar__mobilecardtitle{
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .app-header--catalog .shop-topbar__mobilecardmeta{
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .app-header--catalog .shop-topbar__mobilecta{
    min-height: 44px !important;
    margin-top: 12px !important;
    font-size: 13px !important;
  }
}

@media screen and (max-width: 420px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    gap: 8px !important;
    padding: 0 10px 8px !important;
  }

  .app-header--catalog .shop-topbar__brandname{
    font-size: 13px !important;
  }

  .app-header--catalog .shop-topbar__mobiletrigger,
  .app-header--catalog .shop-cartbtn,
  .app-header--catalog .shop-topbar__profiletrigger,
  .app-header--catalog .app-iconbtn{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* ===== CLASSIC HEADER REWORK FINAL ===== */
body.shop-header-menu-open::before{
  background: rgba(15,23,42,.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.app-header--catalog,
body.page-home .app-header--catalog,
body.page-account .app-header--catalog,
body.page-offer .app-header--catalog,
body.page-policy .app-header--catalog,
body.page-catalog .app-header--catalog{
  position: sticky;
  top: 0;
  z-index: 90;
  padding: calc(8px + var(--safe-top, 0px)) 0 0;
  background: rgba(252,250,247,.96) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.app-header--catalog .app-header__inner,
body.page-home .app-header--catalog .app-header__inner,
body.page-account .app-header--catalog .app-header__inner,
body.page-offer .app-header--catalog .app-header__inner,
body.page-policy .app-header--catalog .app-header__inner,
body.page-catalog .app-header--catalog .app-header__inner{
  max-width: 1180px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 20px 10px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shop-topbar__left{
  min-width: 0;
}

.shop-topbar__brand,
body.page-home .app-header--catalog .shop-topbar__brand,
body.page-account .app-header--catalog .shop-topbar__brand,
body.page-offer .app-header--catalog .shop-topbar__brand,
body.page-policy .app-header--catalog .shop-topbar__brand,
body.page-catalog .app-header--catalog .shop-topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.shop-topbar__brandmark,
body.page-home .app-header--catalog .shop-topbar__brandmark,
body.page-account .app-header--catalog .shop-topbar__brandmark,
body.page-offer .app-header--catalog .shop-topbar__brandmark,
body.page-policy .app-header--catalog .shop-topbar__brandmark,
body.page-catalog .app-header--catalog .shop-topbar__brandmark{
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}

.shop-topbar__brandmark img,
body.page-home .app-header--catalog .shop-topbar__brandmark img,
body.page-account .app-header--catalog .shop-topbar__brandmark img,
body.page-offer .app-header--catalog .shop-topbar__brandmark img,
body.page-policy .app-header--catalog .shop-topbar__brandmark img,
body.page-catalog .app-header--catalog .shop-topbar__brandmark img{
  width: 28px;
  height: 28px;
}

.shop-topbar__brandcopy{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shop-topbar__brandname,
body.page-home .app-header--catalog .shop-topbar__brandname,
body.page-account .app-header--catalog .shop-topbar__brandname,
body.page-offer .app-header--catalog .shop-topbar__brandname,
body.page-policy .app-header--catalog .shop-topbar__brandname,
body.page-catalog .app-header--catalog .shop-topbar__brandname{
  color: #111827 !important;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .06em;
}

.shop-topbar__brandmeta,
body.page-home .app-header--catalog .shop-topbar__brandmeta,
body.page-account .app-header--catalog .shop-topbar__brandmeta,
body.page-offer .app-header--catalog .shop-topbar__brandmeta,
body.page-policy .app-header--catalog .shop-topbar__brandmeta,
body.page-catalog .app-header--catalog .shop-topbar__brandmeta{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #6b7280 !important;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
}

.shop-topbar__branddot{
  width: 4px;
  height: 4px;
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

.shop-topbar__brandstatus{
  color: #94a3b8 !important;
}

.shop-topbar__nav,
body.page-home .app-header--catalog .shop-topbar__nav,
body.page-account .app-header--catalog .shop-topbar__nav,
body.page-offer .app-header--catalog .shop-topbar__nav,
body.page-policy .app-header--catalog .shop-topbar__nav,
body.page-catalog .app-header--catalog .shop-topbar__nav{
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__nav > *{
  position: relative;
}

.app-header--catalog .shop-topbar__navmenu,
.app-header--catalog .shop-topbar__profilemenu{
  position: relative;
}

.app-header--catalog .shop-topbar__navmenu::after,
.app-header--catalog .shop-topbar__profilemenu::after{
  content: "";
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 16px;
}

.shop-topbar__navlink,
.shop-topbar__navmenu > summary.shop-topbar__navlink{
  min-height: auto !important;
  padding: 12px 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.shop-topbar__navlink:hover,
.shop-topbar__navmenu:hover > summary.shop-topbar__navlink{
  color: #111827 !important;
  background: transparent !important;
}

.shop-topbar__navlink.is-active,
.shop-topbar__navmenu[open] > .shop-topbar__navlink,
.shop-topbar__navmenu.is-active > .shop-topbar__navlink{
  color: #111827 !important;
  border-bottom-color: #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__navchev{
  width: 12px;
  height: 12px;
  color: #94a3b8 !important;
  transition: transform .22s ease, color .22s ease;
}

.shop-topbar__navmenu[open] .shop-topbar__navchev,
.shop-topbar__navmenu:hover .shop-topbar__navchev{
  color: #111827 !important;
  transform: rotate(180deg);
}

.shop-topbar__navdropdown,
.app-header--catalog .shop-topbar__navdropdown{
  top: calc(100% + 12px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(680px, calc(100vw - 56px)) !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 26px 56px rgba(15,23,42,.12) !important;
  transform: translate(-50%, -8px) !important;
  transform-origin: top center;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  transform: translate(-50%, 0) !important;
}

.shop-topbar__navdropdown::before{
  display: none !important;
}

.shop-topbar__navdropdownhead{
  margin-bottom: 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
}

.shop-topbar__navdroptitle{
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.shop-topbar__navdropmeta{
  margin-top: 6px !important;
  max-width: 54ch;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.shop-topbar__navgrid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.shop-topbar__navcard{
  min-height: 0 !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.shop-topbar__navcard:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,.54) !important;
  box-shadow: 0 12px 22px rgba(15,23,42,.06) !important;
}

.shop-topbar__navcard i{
  width: 18px;
  height: 18px;
  color: #475569 !important;
}

.shop-topbar__navcardtitle{
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.shop-topbar__navcardmeta{
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.shop-topbar__actions,
.app-header--catalog .app-header__actions{
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.app-header--catalog .app-iconbtn,
.app-header--catalog .shop-topbar__mobiletrigger,
.app-header--catalog .shop-topbar__profiletrigger,
.app-header--catalog .shop-cartbtn{
  min-height: 46px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  color: #111827 !important;
}

.app-header--catalog .app-iconbtn:hover,
.app-header--catalog .shop-topbar__mobiletrigger:hover,
.app-header--catalog .shop-topbar__profiletrigger:hover,
.app-header--catalog .shop-cartbtn:hover{
  border-color: rgba(100,116,139,.36) !important;
  background: #fff !important;
}

.shop-cartbtn__badge{
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.18) !important;
}

.shop-topbar__profiletrigger{
  min-width: 0;
  padding: 7px 12px 7px 8px !important;
  gap: 10px;
}

.shop-topbar__profileavatar,
.shop-topbar__profilepanelavatar{
  background: #f4efe8 !important;
  color: #7c5b3a !important;
}

.shop-topbar__profilecopy{
  min-width: 0;
}

.shop-topbar__profilename,
.shop-topbar__profilepaneltitle{
  color: #111827 !important;
}

.shop-topbar__profilemeta,
.shop-topbar__profilepanelmeta{
  color: #6b7280 !important;
}

.shop-topbar__profilechev{
  color: #94a3b8 !important;
}

.shop-topbar__profilemenu[open] > .shop-topbar__profiletrigger{
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}

.shop-topbar__profiledropdown,
.app-header--catalog .shop-topbar__profiledropdown{
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 28px)) !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 52px rgba(15,23,42,.12) !important;
}

.shop-topbar__profilepanelhead{
  padding: 0 0 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
}

.shop-topbar__profilelink{
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #334155 !important;
}

.shop-topbar__profilelink:hover{
  border-color: rgba(226,232,240,.92) !important;
  background: #f8fafc !important;
}

.shop-topbar__profilelink i{
  color: #475569 !important;
}

.shop-topbar__profilelink--danger{
  color: #b91c1c !important;
}

.shop-topbar__profilelink--danger i{
  color: currentColor !important;
}

.shop-topbar__mobilemenu{
  display: none !important;
}

.shop-topbar__mobilemenu > summary,
.shop-topbar__mobilemenu > summary::-webkit-details-marker{
  list-style: none;
}

.shop-topbar__mobiledropdown{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 28px 60px rgba(15,23,42,.16) !important;
}

.shop-topbar__mobilehead{
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
}

.shop-topbar__mobileeyebrow{
  color: #a16207 !important;
}

.shop-topbar__mobiletitle{
  color: #111827 !important;
}

.shop-topbar__mobilemeta,
.shop-topbar__mobilesectionmeta,
.shop-topbar__mobilecardmeta{
  color: #64748b !important;
}

.shop-topbar__mobileprimary{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-topbar__mobilepill{
  min-height: 44px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.shop-topbar__mobilepill.is-active{
  border-color: rgba(15,23,42,.18) !important;
  background: #f8fafc !important;
  color: #111827 !important;
}

.shop-topbar__mobilesectiontitle{
  color: #111827 !important;
}

.shop-topbar__mobilegrid{
  gap: 10px !important;
}

.shop-topbar__mobilecard{
  min-height: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
}

.shop-topbar__mobilecard i{
  color: #475569 !important;
}

.shop-topbar__mobilecardtitle{
  color: #111827 !important;
}

.shop-topbar__mobilecta{
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid #111827 !important;
  background: #111827 !important;
  box-shadow: none !important;
}

@media (max-width: 1100px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    gap: 18px;
  }

  .shop-topbar__nav{
    gap: 18px;
  }
}

@media (max-width: 980px){
  .app-header--catalog,
  body.page-home .app-header--catalog,
  body.page-account .app-header--catalog,
  body.page-offer .app-header--catalog,
  body.page-policy .app-header--catalog,
  body.page-catalog .app-header--catalog{
    padding-top: calc(6px + var(--safe-top, 0px));
  }

  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 68px;
    padding: 0 14px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .shop-topbar__nav{
    display: none !important;
  }

  .shop-topbar__brand{
    gap: 10px;
  }

  .shop-topbar__brandmark{
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
  }

  .shop-topbar__brandmark img{
    width: 24px;
    height: 24px;
  }

  .shop-topbar__brandname{
    font-size: 16px !important;
    letter-spacing: .05em !important;
  }

  .shop-topbar__brandmeta{
    gap: 6px;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-topbar__brandstatus{
    display: none;
  }

  .shop-topbar__actions,
  .app-header--catalog .app-header__actions{
    gap: 8px;
  }

  .shop-topbar__mobilemenu{
    display: block !important;
  }

  .shop-topbar__mobiletrigger,
  .shop-cartbtn,
  .shop-topbar__profiletrigger,
  .app-header--catalog .app-iconbtn{
    width: 44px;
    min-width: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center;
  }

  .shop-topbar__profilecopy,
  .shop-topbar__profilechev{
    display: none !important;
  }

  .shop-topbar__profileavatar{
    margin: 0;
  }

  .shop-topbar__mobiledropdown{
    position: fixed !important;
    top: calc(var(--safe-top, 0px) + 74px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 88px)) !important;
    padding: 16px !important;
    overflow: auto;
  }

  .shop-topbar__mobileprimary{
    grid-template-columns: 1fr;
  }

  .shop-topbar__mobilepill{
    justify-content: flex-start;
    padding: 0 14px !important;
  }

  .shop-topbar__mobilegrid{
    grid-template-columns: 1fr !important;
  }

  .shop-topbar__mobilecard{
    gap: 12px;
  }
}

@media (max-width: 640px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 64px;
    padding: 0 12px 8px;
  }

  .shop-topbar__brandname{
    font-size: 15px !important;
  }

  .shop-topbar__brandmeta{
    max-width: 140px;
  }

  .shop-topbar__mobiledropdown{
    top: calc(var(--safe-top, 0px) + 68px) !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 20px !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 80px)) !important;
  }
}

/* ===== CLASSIC HEADER REWORK ===== */
body.shop-header-menu-open::before{
  background: rgba(15,23,42,.16);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.app-header--catalog,
body.page-home .app-header--catalog,
body.page-account .app-header--catalog,
body.page-offer .app-header--catalog,
body.page-policy .app-header--catalog,
body.page-catalog .app-header--catalog{
  padding: calc(8px + var(--safe-top, 0px)) 0 0;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(15,23,42,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.app-header--catalog .app-header__inner,
body.page-home .app-header--catalog .app-header__inner,
body.page-account .app-header--catalog .app-header__inner,
body.page-offer .app-header--catalog .app-header__inner,
body.page-policy .app-header--catalog .app-header__inner,
body.page-catalog .app-header--catalog .app-header__inner{
  max-width: 1180px;
  margin: 0 auto;
  min-height: 72px;
  padding: 0 18px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-topbar__left{
  min-width: 0;
}

.shop-topbar__brand,
body.page-home .app-header--catalog .shop-topbar__brand,
body.page-account .app-header--catalog .shop-topbar__brand,
body.page-offer .app-header--catalog .shop-topbar__brand,
body.page-policy .app-header--catalog .shop-topbar__brand{
  gap: 12px;
  text-decoration: none;
}

.shop-topbar__brandmark,
body.page-home .app-header--catalog .shop-topbar__brandmark,
body.page-account .app-header--catalog .shop-topbar__brandmark,
body.page-offer .app-header--catalog .shop-topbar__brandmark,
body.page-policy .app-header--catalog .shop-topbar__brandmark{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: none;
}

.shop-topbar__brandmark img,
body.page-home .app-header--catalog .shop-topbar__brandmark img,
body.page-account .app-header--catalog .shop-topbar__brandmark img,
body.page-offer .app-header--catalog .shop-topbar__brandmark img,
body.page-policy .app-header--catalog .shop-topbar__brandmark img{
  width: 28px;
  height: 28px;
}

.shop-topbar__brandcopy{
  display: grid;
  gap: 2px;
}

.shop-topbar__brandname,
body.page-home .app-header--catalog .shop-topbar__brandname,
body.page-account .app-header--catalog .shop-topbar__brandname,
body.page-offer .app-header--catalog .shop-topbar__brandname,
body.page-policy .app-header--catalog .shop-topbar__brandname,
body.page-catalog .app-header--catalog .shop-topbar__brandname{
  color: #111827;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .04em;
}

.shop-topbar__brandmeta,
body.page-home .app-header--catalog .shop-topbar__brandmeta,
body.page-account .app-header--catalog .shop-topbar__brandmeta,
body.page-offer .app-header--catalog .shop-topbar__brandmeta,
body.page-policy .app-header--catalog .shop-topbar__brandmeta,
body.page-catalog .app-header--catalog .shop-topbar__brandmeta{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.shop-topbar__branddot{
  width: 3px;
  height: 3px;
  background: #d1d5db;
  box-shadow: none;
}

.shop-topbar__brandstatus{
  color: #9ca3af;
}

.shop-topbar__nav,
body.page-home .app-header--catalog .shop-topbar__nav,
body.page-account .app-header--catalog .shop-topbar__nav,
body.page-offer .app-header--catalog .shop-topbar__nav,
body.page-policy .app-header--catalog .shop-topbar__nav,
body.page-catalog .app-header--catalog .shop-topbar__nav{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-topbar__nav > *{
  position: relative;
}

.shop-topbar__navlink{
  min-height: auto;
  padding: 12px 0 10px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent !important;
  box-shadow: none !important;
  color: #374151;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

.shop-topbar__navlink:hover{
  color: #111827;
  background: transparent !important;
}

.shop-topbar__navlink.is-active,
.shop-topbar__navmenu[open] > .shop-topbar__navlink{
  color: #111827;
  border-bottom-color: #111827;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__navlink--menu{
  gap: 6px;
}

.shop-topbar__navchev{
  width: 12px;
  height: 12px;
  color: #9ca3af;
}

.shop-topbar__navmenu[open] .shop-topbar__navchev{
  color: #111827;
}

.app-header--catalog .shop-topbar__navmenu,
.app-header--catalog .shop-topbar__profilemenu{
  position: relative;
}

.app-header--catalog .shop-topbar__navmenu::after,
.app-header--catalog .shop-topbar__profilemenu::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.app-header--catalog .shop-topbar__profilemenu::after{
  left: -6px;
  right: -6px;
}

.shop-topbar__navdropdown,
.app-header--catalog .shop-topbar__navdropdown{
  top: calc(100% + 12px) !important;
  left: 50%;
  right: auto;
  width: min(680px, calc(100vw - 64px));
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 26px 52px rgba(15,23,42,.10);
  transform: translate(-50%, -8px) !important;
  transform-origin: top center;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  transform: translate(-50%, 0) !important;
}

.shop-topbar__navdropdown::before{
  display: none;
}

.shop-topbar__navdropdownhead{
  margin-bottom: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(226,232,240,.9);
}

.shop-topbar__navdroptitle{
  color: #111827;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}

.shop-topbar__navdropmeta{
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
  max-width: 56ch;
}

.shop-topbar__navgrid{
  gap: 10px 12px;
}

.shop-topbar__navcard{
  min-height: 0;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.9);
  background: #fff;
  box-shadow: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta";
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.shop-topbar__navcard:hover{
  transform: none;
  border-color: #d1d5db;
  background: #f9fafb;
  box-shadow: none;
}

.shop-topbar__navcard i{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f3f4f6;
  color: #111827;
  box-shadow: none;
}

.shop-topbar__navcardtitle{
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
}

.shop-topbar__navcardmeta{
  color: #6b7280;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: none;
}

.shop-topbar__navcard::after{
  display: none;
}

.shop-topbar__actions,
body.page-home .app-header--catalog .shop-topbar__actions,
body.page-account .app-header--catalog .shop-topbar__actions,
body.page-offer .app-header--catalog .shop-topbar__actions,
body.page-policy .app-header--catalog .shop-topbar__actions,
body.page-catalog .app-header--catalog .shop-topbar__actions{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px !important;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-header .app-iconbtn,
.app-header .shop-cartbtn,
.app-header--catalog .shop-topbar__mobiletrigger,
.app-header--catalog .shop-topbar__profiletrigger{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.app-header .app-iconbtn:hover,
.app-header .shop-cartbtn:hover,
.app-header--catalog .shop-topbar__mobiletrigger:hover,
.app-header--catalog .shop-topbar__profiletrigger:hover{
  border-color: rgba(15,23,42,.18);
  background: #f9fafb;
}

.app-header--catalog .shop-topbar__profiletrigger,
body.page-home .app-header--catalog .shop-topbar__profiletrigger,
body.page-account .app-header--catalog .shop-topbar__profiletrigger,
body.page-offer .app-header--catalog .shop-topbar__profiletrigger,
body.page-policy .app-header--catalog .shop-topbar__profiletrigger,
body.page-catalog .app-header--catalog .shop-topbar__profiletrigger{
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  gap: 10px;
  border-radius: 12px;
  box-shadow: none;
}

.shop-topbar__profilemenu[open] > .shop-topbar__profiletrigger{
  border-color: #d1d5db !important;
  background: #fff !important;
  box-shadow: none !important;
}

.shop-topbar__profileavatar{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  box-shadow: none;
}

.shop-topbar__profilecopy{
  display: grid;
  gap: 1px;
}

.shop-topbar__profilename{
  color: #111827;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 700;
}

.shop-topbar__profilemeta{
  color: #6b7280;
  font-size: 11px;
  line-height: 1.35;
}

.shop-topbar__profilechev{
  color: #9ca3af;
}

.shop-topbar__profiledropdown,
.app-header--catalog .shop-topbar__profiledropdown,
body.page-home .app-header--catalog .shop-topbar__profiledropdown,
body.page-account .app-header--catalog .shop-topbar__profiledropdown,
body.page-offer .app-header--catalog .shop-topbar__profiledropdown,
body.page-policy .app-header--catalog .shop-topbar__profiledropdown,
body.page-catalog .app-header--catalog .shop-topbar__profiledropdown{
  top: calc(100% + 12px) !important;
  right: 0;
  min-width: 244px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 24px 48px rgba(15,23,42,.10);
}

.shop-topbar__profilepanelhead{
  padding: 6px 6px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(226,232,240,.9);
}

.shop-topbar__profilepanelavatar{
  border-radius: 12px;
  background: #111827;
  box-shadow: none;
}

.shop-topbar__profilepaneltitle{
  color: #111827;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
}

.shop-topbar__profilepanelmeta{
  color: #6b7280;
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__profilelink{
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  transform: none !important;
  opacity: 1 !important;
}

.shop-topbar__profilelink:hover{
  background: #f9fafb;
  color: #111827;
}

.shop-topbar__profilelink i{
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.shop-topbar__profilelink--danger{
  color: #9f1239;
}

.shop-topbar__profilelink--danger i{
  color: inherit;
}

.shop-topbar__mobilemenu{
  display: none;
}

@media (max-width: 900px){
  .app-header--catalog,
  body.page-home .app-header--catalog,
  body.page-account .app-header--catalog,
  body.page-offer .app-header--catalog,
  body.page-policy .app-header--catalog,
  body.page-catalog .app-header--catalog{
    padding: calc(8px + var(--safe-top, 0px)) 0 0;
  }

  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 64px;
    padding: 0 12px 10px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .shop-topbar__brand{
    gap: 10px;
  }

  .shop-topbar__brandmark{
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .shop-topbar__brandmark img{
    width: 25px;
    height: 25px;
  }

  .shop-topbar__brandname{
    font-size: 15px;
    letter-spacing: .03em;
  }

  .shop-topbar__brandmeta{
    gap: 6px;
    font-size: 11px;
  }

  .shop-topbar__brandstatus,
  .shop-topbar__branddot{
    display: none;
  }

  .shop-topbar__mobilemenu{
    display: block;
  }

  .shop-topbar__actions{
    gap: 8px !important;
  }

  .shop-topbar__mobiletrigger,
  .shop-topbar__actions .app-iconbtn,
  .shop-topbar__actions .shop-cartbtn{
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
  }

  .shop-topbar__profilecopy,
  .shop-topbar__profilechev{
    display: none;
  }

  .shop-topbar__profiletrigger{
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 4px !important;
  }

  .app-header--catalog .shop-topbar__navmenu::after,
  .app-header--catalog .shop-topbar__profilemenu::after{
    display: none;
  }

  .shop-topbar__mobiledropdown{
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    box-shadow: 0 24px 48px rgba(15,23,42,.10);
  }

  .shop-topbar__mobilehead{
    display: grid;
    gap: 4px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(226,232,240,.9);
  }

  .shop-topbar__mobileeyebrow{
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .shop-topbar__mobiletitle{
    color: #111827;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .shop-topbar__mobilemeta{
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
  }

  .shop-topbar__mobileprimary{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 12px;
  }

  .shop-topbar__mobilepill{
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    color: #374151;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
  }

  .shop-topbar__mobilepill.is-active{
    border-color: #111827;
    background: #111827;
    color: #fff;
    box-shadow: none;
  }

  .shop-topbar__mobilesection{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(226,232,240,.9);
  }

  .shop-topbar__mobilesectionhead{
    gap: 3px;
    margin-bottom: 8px;
  }

  .shop-topbar__mobilesectiontitle{
    color: #6b7280;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .shop-topbar__mobilesectionmeta{
    display: none;
  }

  .shop-topbar__mobilegrid{
    gap: 0;
  }

  .shop-topbar__mobilecard{
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(241,245,249,.95);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shop-topbar__mobilecard:last-child{
    border-bottom: 0;
  }

  .shop-topbar__mobilecard:hover{
    transform: none;
    border-color: rgba(241,245,249,.95);
    background: transparent;
    box-shadow: none;
  }

  .shop-topbar__mobilecard i{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #111827;
    box-shadow: none;
  }

  .shop-topbar__mobilecardtitle{
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
  }

  .shop-topbar__mobilecardmeta{
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .shop-topbar__mobilecta{
    margin-top: 14px;
    min-height: 44px;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .shop-topbar__profiledropdown{
    top: calc(100% + 10px) !important;
    right: 0;
    width: min(280px, calc(100vw - 24px));
    min-width: 0;
  }
}

@media (max-width: 640px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 60px;
    padding: 0 10px 10px;
    gap: 10px;
  }

  .shop-topbar__brandmeta{
    max-width: 120px;
  }

  .shop-topbar__brandmeta > span:first-child{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shop-topbar__mobiledropdown{
    width: calc(100vw - 20px);
  }
}

/* ===== FINAL HOME + HEADER REFINEMENTS ===== */
.home-group--fallback{
  background: linear-gradient(135deg, #eef4ff, #f8fafc 58%, #ecfeff);
}

.home-group__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.94), rgba(255,255,255,.42) 46%, rgba(255,255,255,0) 74%),
    linear-gradient(135deg, rgba(219,234,254,.92), rgba(191,219,254,.38) 52%, rgba(236,252,203,.54));
}

.home-group__placeholder i{
  width: 52px;
  height: 52px;
  color: rgba(37,99,235,.58);
}

.app-header--catalog .shop-topbar__navmenu,
.app-header--catalog .shop-topbar__profilemenu,
.app-header--catalog .shop-topbar__mobilemenu{
  position: relative;
}

@media (min-width: 901px){
  .app-header--catalog .shop-topbar__navmenu::after,
  .app-header--catalog .shop-topbar__profilemenu::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 18px;
  }

  .app-header--catalog .shop-topbar__profilemenu::after{
    left: -6px;
    right: -6px;
  }

  .app-header--catalog .app-header__inner{
    gap: 16px;
  }

  .app-header--catalog .shop-topbar__actions{
    margin-left: 12px;
  }

  .app-header--catalog .shop-topbar__navdropdown{
    top: calc(100% + 10px);
  }

  .app-header--catalog .shop-topbar__profiledropdown{
    top: calc(100% + 10px);
  }
}

.shop-topbar__mobilemenu{
  display: none;
  flex: 0 0 auto;
}

.shop-topbar__mobilemenu > summary{
  list-style: none;
  cursor: pointer;
}

.shop-topbar__mobilemenu > summary::-webkit-details-marker{
  display: none;
}

.shop-topbar__mobiletrigger{
  transition: background 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiletrigger{
  background: #fff !important;
  border-color: rgba(91,108,255,.16) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.08) !important;
}

.shop-topbar__mobiledropdown{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
  box-shadow:
    0 28px 54px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.88);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 240;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiledropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.shop-topbar__mobilehead{
  display: grid;
  gap: 6px;
  padding: 2px 2px 14px;
}

.shop-topbar__mobileeyebrow{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(37,99,235,.72);
}

.shop-topbar__mobiletitle{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(15,23,42,.96);
}

.shop-topbar__mobilemeta{
  color: rgba(15,23,42,.56);
  font-size: 12px;
  line-height: 1.55;
}

.shop-topbar__mobileprimary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 14px;
}

.shop-topbar__mobilepill{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.92);
  color: rgba(15,23,42,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.shop-topbar__mobilepill.is-active{
  color: rgba(15,23,42,.96);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.shop-topbar__mobilesection{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(226,232,240,.72);
}

.shop-topbar__mobilesectionhead{
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.shop-topbar__mobilesectiontitle{
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.94);
}

.shop-topbar__mobilesectionmeta{
  color: rgba(15,23,42,.52);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilegrid{
  display: grid;
  gap: 8px;
}

.shop-topbar__mobilecard{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.88);
  color: rgba(15,23,42,.92);
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(15,23,42,.05);
  transition: transform 160ms ease, box-shadow 180ms ease, border-color 160ms ease, background 160ms ease;
}

.shop-topbar__mobilecard:hover{
  transform: translateY(-1px);
  border-color: rgba(91,108,255,.14);
  background: #fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}

.shop-topbar__mobilecard i{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.90));
  color: #2563eb;
  box-shadow: 0 12px 24px rgba(37,99,235,.14);
}

.shop-topbar__mobilecardcopy{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-topbar__mobilecardtitle{
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
}

.shop-topbar__mobilecardmeta{
  color: rgba(15,23,42,.56);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilecta{
  margin-top: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), #7c8cff 52%, #4f46e5);
  box-shadow: 0 18px 32px rgba(91,108,255,.24);
}

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

  .app-header--catalog .app-header__inner{
    gap: 10px;
  }

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

  .shop-topbar__actions{
    margin-left: auto;
  }
}

@media (max-width: 640px){
  .home-main{
    gap: 12px;
  }

  .home-hero{
    gap: 14px;
    padding: 20px 16px;
    border-radius: 22px;
  }

  .home-hero__title{
    max-width: 9ch;
    font-size: clamp(26px, 8.2vw, 34px);
  }

  .home-hero__text{
    font-size: 14px;
    line-height: 1.55;
  }

  .home-hero__spotlight-card{
    padding: 14px;
    border-radius: 18px;
  }

  .home-groups{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .home-group,
  .home-group:nth-child(6n + 1),
  .home-group:nth-child(6n + 2),
  .home-group:nth-child(6n + 3){
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 146px;
    padding: 14px 14px 16px;
    border-radius: 20px;
  }

  .home-group:nth-child(6n + 1){
    min-height: 162px;
  }

  .home-group__media{
    inset: 8px 8px 8px 42%;
    border-radius: 18px;
  }

  .home-group__media img{
    object-fit: contain;
    object-position: center center;
    padding: 10px;
    background:
      radial-gradient(circle at center, rgba(255,255,255,.26), rgba(255,255,255,0) 64%),
      linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.01));
    filter: saturate(1.04) brightness(.96);
    transform: none;
  }

  .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.72) 44%, rgba(15,23,42,.26) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 34%);
  }

  .home-group--fallback .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.64) 46%, rgba(37,99,235,.20) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%);
  }

  .home-group__title,
  .home-group:nth-child(6n + 1) .home-group__title{
    left: 14px;
    right: 44%;
    bottom: 15px;
    font-size: 16px;
    max-width: none;
  }

  .home-group:nth-child(6n + 1) .home-group__title{
    font-size: 18px;
  }

  .home-group__meta{
    top: 12px;
    left: 12px;
    right: auto;
    min-width: 36px;
    height: 24px;
    padding: 0 9px;
  }

  .home-group::after{
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
  }

  .home-group__placeholder{
    inset: 6px;
    border-radius: 16px;
  }

  .home-group__placeholder i{
    width: 46px;
    height: 46px;
  }
}

[data-home-reveal]{
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-home-reveal].is-visible{
  opacity: 1;
  transform: none;
}

.page-home .skeleton{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(226,232,240,.84), rgba(255,255,255,.98), rgba(226,232,240,.84));
  background-size: 220% 100%;
}

.page-home .skeleton::after{
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.74), rgba(255,255,255,0));
  animation: homeSkeletonSweep 1.28s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes homeSkeletonSweep{
  from{ transform: translateX(-110%); }
  to{ transform: translateX(110%); }
}

.home-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 24px;
  align-items: stretch;
  min-height: 360px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.42);
  padding: 30px;
  color: #fff;
  background: #10213a;
  box-shadow: 0 30px 64px rgba(15,23,42,.22);
}

.home-hero::before{
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  pointer-events: none;
  background: var(--home-hero-photo, linear-gradient(125deg, var(--home-hero-1), var(--home-hero-2) 52%, var(--home-hero-3)));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(5px) saturate(1.04);
  transform: scale(1.04);
}

.home-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(8,20,43,.72) 0%, rgba(14,39,80,.42) 44%, rgba(12,33,61,.18) 100%),
    linear-gradient(125deg, rgba(37,99,235,.44), rgba(34,197,94,.26) 48%, rgba(6,182,212,.24)),
    radial-gradient(420px 240px at 100% -10%, rgba(255,255,255,.24), transparent 72%);
}

.home-hero > *{
  position: relative;
  z-index: 2;
  min-width: 0;
}

.home-hero__content{
  display: grid;
  align-content: end;
}

.home-hero__kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-hero__title{
  margin: 16px 0 0;
  max-width: 11ch;
  font-size: clamp(34px, 5vw, 54px);
  line-height: .96;
  letter-spacing: -0.06em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.home-hero__text{
  margin: 16px 0 0;
  max-width: 560px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1.65;
}

.home-hero__chips{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-hero__chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.home-hero__chip i{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.home-hero__actions{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.home-hero .app-btn{
  box-shadow: 0 18px 34px rgba(15,23,42,.18);
}

.home-hero .app-btn--secondary{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.home-hero__spotlight{
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.home-hero__spotlight-card{
  width: min(100%, 360px);
  margin-left: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(9,19,36,.38), rgba(9,19,36,.22));
  box-shadow: 0 22px 42px rgba(2,6,23,.20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.home-hero__spotlight-label{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-hero__spotlight-title{
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #fff;
}

.home-hero__facts{
  display: grid;
  gap: 10px;
}

.home-hero__fact{
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
}

.home-hero__fact strong{
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.home-hero__fact span{
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.45;
}

.home-hero__spotlight-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 30px rgba(15,23,42,.12);
}

.home-section{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 36px rgba(15,23,42,.06),
    var(--shadow2, 0 10px 24px rgba(10,18,35,.10));
  padding: 18px;
  min-width: 0;
}

.home-section--new{
  border-color: rgba(22,163,74,.20);
  background:
    radial-gradient(circle at top right, rgba(187,247,208,.92), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(240,253,244,.99), rgba(255,255,255,.94));
  box-shadow:
    0 18px 34px rgba(22,163,74,.10),
    var(--shadow2, 0 10px 24px rgba(10,18,35,.10));
}

.home-section--new::before{
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 132px;
  height: 132px;
  border-radius: 32px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='18' y='18' width='84' height='84' rx='24' fill='none' stroke='%2386d39c' stroke-width='6'/%3E%3Ctext x='60' y='69' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-size='28' font-weight='700' fill='%2386d39c'%3ENEW%3C/text%3E%3C/svg%3E") center/72px 72px no-repeat,
    radial-gradient(circle at center, rgba(187,247,208,.48), rgba(240,253,244,0) 72%);
  opacity: .2;
  pointer-events: none;
  z-index: 0;
}

.home-section--new .home-section__title{
  color: #166534;
}

.home-section--new .home-section__link{
  color: #166534;
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.14);
}

.home-section--new .product-card{
  box-shadow:
    0 18px 34px rgba(22,163,74,.08),
    0 12px 24px rgba(15,23,42,.08);
  position: relative;
  z-index: 1;
}

.home-section--new .cutout--right{
  background: linear-gradient(135deg, rgba(236,253,243,.98), rgba(220,252,231,.98));
  border-color: rgba(22,163,74,.10);
}

.home-section--new .cutout--right::before,
.home-section--new .cutout--right::after{
  background: inherit;
}

.home-section--new .price-text{
  color: #166534;
  text-shadow: none;
}

.home-section--new .product-card:hover .cutout--right{
  background: linear-gradient(135deg, rgba(220,252,231,1), rgba(187,247,208,1));
}

.home-section--sale{
  border-color: rgba(239,68,68,.16);
  background:
    radial-gradient(circle at top right, rgba(254,226,226,.92), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,250,250,.98), rgba(255,255,255,.94));
  box-shadow:
    0 18px 34px rgba(239,68,68,.10),
    var(--shadow2, 0 10px 24px rgba(10,18,35,.10));
}

.home-section--sale::before{
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 132px;
  height: 132px;
  border-radius: 32px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3a5a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") center/64px 64px no-repeat,
    radial-gradient(circle at center, rgba(254,226,226,.56), rgba(254,242,242,0) 72%);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

.home-section--sale .home-section__title{
  color: #b91c1c;
}

.home-section--sale .home-section__link{
  color: #b91c1c;
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.12);
}

.home-section--sale .product-card{
  box-shadow:
    0 18px 34px rgba(239,68,68,.08),
    0 12px 24px rgba(15,23,42,.08);
  position: relative;
  z-index: 1;
}

.home-section--sale .cutout--right{
  background: linear-gradient(135deg, rgba(255,244,244,.98), rgba(255,236,236,.98));
  border-color: rgba(239,68,68,.08);
}

.home-section--sale .cutout--right::before,
.home-section--sale .cutout--right::after{
  background: inherit;
}

.home-section--sale .price-text{
  color: #b91c1c;
  text-shadow: none;
}

.home-section--sale .product-card:hover .cutout--right{
  background: linear-gradient(135deg, rgba(254,242,242,1), rgba(255,228,230,1));
}

.home-section--groups{
  border-color: rgba(37,99,235,.10);
  background:
    radial-gradient(circle at top left, rgba(219,234,254,.70), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.94));
}

.home-section--assurance{
  border-color: rgba(8,145,178,.14);
  background:
    radial-gradient(circle at top left, rgba(207,250,254,.72), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(248,254,255,.99), rgba(255,255,255,.95));
}

.home-section--scenarios{
  border-color: rgba(249,115,22,.12);
  background:
    radial-gradient(circle at top right, rgba(255,237,213,.76), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(255,252,248,.99), rgba(255,255,255,.95));
}

.home-section--personal{
  border-color: rgba(14,116,144,.14);
  background:
    radial-gradient(circle at top left, rgba(224,242,254,.88), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(244,251,255,.99), rgba(255,255,255,.95));
}

.home-section--lookbook{
  border-color: rgba(15,118,110,.12);
  background:
    radial-gradient(circle at top right, rgba(204,251,241,.70), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(247,255,252,.99), rgba(255,255,255,.95));
}

.home-section--news{
  border-color: rgba(245,158,11,.12);
  background:
    radial-gradient(circle at top right, rgba(254,243,199,.64), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,240,.95));
}

.home-section__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 14px;
}

.home-section__head > *{
  margin-top: 0;
  margin-bottom: 0;
}

.home-section__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.04em;
  min-width: 0;
}

.home-section__title--withicon{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.home-section__title--withicon i{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.home-section__title--withicon span{
  min-width: 0;
}

.home-section__title--sale{
  display: inline-flex;
  align-items: center;
}

.home-section__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.84);
  color: var(--muted, rgba(15,23,42,.66));
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}

.home-section__link::after{
  content: "->";
  font-size: 12px;
  opacity: .72;
}

.home-section.pdp-newarrivals .pdp-carousel{
  margin-top: 0;
  padding-left: 4px;
  padding-right: 4px;
  scroll-padding-left: 4px;
  scroll-padding-right: 4px;
}

.page-home .catalog-cards .product-card{
  transition: transform .18s ease, box-shadow .22s ease;
}

.page-home .catalog-cards .product-card__img{
  transition: transform .28s ease, filter .28s ease;
}

.page-home .catalog-cards .product-card:hover .product-card__img{
  transform: scale(1.035);
  filter: saturate(1.06);
}

.page-home .catalog-cards .product-card__deal{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 26px rgba(15,23,42,.06);
}

.page-home .catalog-cards .product-card__deal i{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.page-home .catalog-cards .product-card__deal span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .catalog-cards .product-card__deal--fresh{
  color: #166534;
  background: rgba(220,252,231,.94);
  border: 1px solid rgba(22,163,74,.12);
}

.page-home .catalog-cards .product-card__deal--sale{
  color: #b91c1c;
  background: rgba(254,226,226,.92);
  border: 1px solid rgba(239,68,68,.12);
}

.page-home .catalog-cards .product-card__deal--critical{
  color: #fff;
  background: linear-gradient(135deg, rgba(239,68,68,.96), rgba(244,63,94,.94));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 32px rgba(239,68,68,.20);
}

.page-home .catalog-cards .product-card__deal--warning{
  color: #9a3412;
  background: rgba(255,237,213,.94);
  border: 1px solid rgba(249,115,22,.14);
}

.page-home .catalog-cards .product-card__deal--warm{
  color: #92400e;
  background: rgba(254,243,199,.94);
  border: 1px solid rgba(245,158,11,.16);
}

.page-home .catalog-cards .product-card__deal--soldout{
  color: #7f1d1d;
  background: rgba(254,226,226,.88);
  border: 1px solid rgba(239,68,68,.12);
}

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

.home-assurance__card{
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 214px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}

.home-assurance__card::before{
  content: "";
  position: absolute;
  top: -44px;
  right: -34px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: .72;
  pointer-events: none;
}

.home-assurance__card--programs::before{
  background: radial-gradient(circle, rgba(34,211,238,.28), rgba(34,211,238,0) 70%);
}

.home-assurance__card--payments::before{
  background: radial-gradient(circle, rgba(251,146,60,.24), rgba(251,146,60,0) 70%);
}

.home-assurance__card--delivery::before{
  background: radial-gradient(circle, rgba(74,222,128,.24), rgba(74,222,128,0) 70%);
}

.home-assurance__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-assurance__icon{
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 28px rgba(15,23,42,.08);
}

.home-assurance__card--programs .home-assurance__icon{
  background: linear-gradient(135deg, rgba(207,250,254,.98), rgba(165,243,252,.92));
  color: #0891b2;
}

.home-assurance__card--payments .home-assurance__icon{
  background: linear-gradient(135deg, rgba(255,237,213,.98), rgba(254,215,170,.92));
  color: #ea580c;
}

.home-assurance__card--delivery .home-assurance__icon{
  background: linear-gradient(135deg, rgba(220,252,231,.98), rgba(187,247,208,.92));
  color: #16a34a;
}

.home-assurance__icon i{
  width: 22px;
  height: 22px;
}

.home-assurance__eyebrow{
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.60);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-assurance__title{
  margin: 0;
  font-size: 21px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-assurance__text{
  margin: 0;
  color: rgba(15,23,42,.62);
  font-size: 14px;
  line-height: 1.65;
}

.home-assurance__chips{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-assurance__chip{
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.72);
  font-size: 11px;
  font-weight: 800;
}

.home-scenarios{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.home-scenario{
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: 160px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 16px 30px rgba(15,23,42,.08);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-scenario::before{
  content: "";
  position: absolute;
  inset: auto -24px -32px auto;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  opacity: .82;
  pointer-events: none;
}

.home-scenario--girls::before{
  background: radial-gradient(circle, rgba(251,207,232,.56), rgba(251,207,232,0) 70%);
}

.home-scenario--boys::before{
  background: radial-gradient(circle, rgba(191,219,254,.56), rgba(191,219,254,0) 70%);
}

.home-scenario--school::before{
  background: radial-gradient(circle, rgba(254,240,138,.48), rgba(254,240,138,0) 70%);
}

.home-scenario--spring::before{
  background: radial-gradient(circle, rgba(187,247,208,.54), rgba(187,247,208,0) 70%);
}

.home-scenario--indoor::before{
  background: radial-gradient(circle, rgba(165,243,252,.42), rgba(165,243,252,0) 70%);
}

.home-scenario:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.12);
}

.home-scenario__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
}

.home-scenario__icon i{
  width: 20px;
  height: 20px;
}

.home-scenario__title{
  font-size: 17px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.home-scenario__meta{
  color: rgba(15,23,42,.58);
  font-size: 13px;
  line-height: 1.55;
}

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

.home-personal__card{
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 228px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}

.home-personal__card::before{
  content: "";
  position: absolute;
  top: -48px;
  right: -36px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: .75;
  pointer-events: none;
}

.home-personal__card--favorites::before{
  background: radial-gradient(circle, rgba(191,219,254,.48), rgba(191,219,254,0) 70%);
}

.home-personal__card--recent::before{
  background: radial-gradient(circle, rgba(253,230,138,.42), rgba(253,230,138,0) 70%);
}

.home-personal__card--repeat::before{
  background: radial-gradient(circle, rgba(153,246,228,.40), rgba(153,246,228,0) 70%);
}

.home-personal__eyebrow{
  min-height: 28px;
  width: fit-content;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.60);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-personal__value{
  margin-top: 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.home-personal__text{
  margin: 0;
  color: rgba(15,23,42,.62);
  font-size: 14px;
  line-height: 1.6;
}

.home-personal__link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(14,116,144,.10);
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

.home-personal__recent{
  display: grid;
  gap: 10px;
}

.home-personal__recent-item{
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 12px 24px rgba(15,23,42,.05);
}

.home-personal__recent-thumb{
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow: hidden;
  background: #e2e8f0;
}

.home-personal__recent-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-personal__recent-body{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.home-personal__recent-title{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-personal__recent-meta{
  color: rgba(15,23,42,.56);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-personal__empty{
  min-height: 86px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.12);
  display: grid;
  align-items: center;
  color: rgba(15,23,42,.54);
  font-size: 13px;
  line-height: 1.55;
  background: rgba(255,255,255,.74);
}

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

.home-lookbook__card{
  position: relative;
  grid-column: span 4;
  overflow: hidden;
  isolation: isolate;
  min-height: 250px;
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 20px 42px rgba(15,23,42,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-lookbook__card--wide{
  grid-column: span 8;
  min-height: 286px;
}

.home-lookbook__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 48px rgba(15,23,42,.18);
}

.home-lookbook__media,
.home-lookbook__overlay{
  position: absolute;
  inset: 0;
}

.home-lookbook__media{
  z-index: 0;
}

.home-lookbook__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.02) brightness(.88);
  transform: scale(1.04);
  transition: transform .26s ease, filter .26s ease;
}

.home-lookbook__card:hover .home-lookbook__media img{
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.04) brightness(.82);
}

.home-lookbook__overlay{
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.26) 38%, rgba(15,23,42,.78) 100%),
    radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 34%);
}

.home-lookbook__eyebrow,
.home-lookbook__title,
.home-lookbook__meta{
  position: relative;
  z-index: 2;
}

.home-lookbook__eyebrow{
  min-height: 28px;
  width: fit-content;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-lookbook__title{
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.05em;
  max-width: 14ch;
}

.home-lookbook__meta{
  max-width: 34ch;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.6;
}

.home-groups{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 118px;
  grid-auto-flow: dense;
  gap: 12px;
  min-width: 0;
}

.home-group{
  position: relative;
  grid-column: span 4;
  overflow: hidden;
  isolation: isolate;
  min-height: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-group:nth-child(6n + 1){
  grid-column: span 7;
  grid-row: span 2;
}

.home-group:nth-child(6n + 2),
.home-group:nth-child(6n + 3){
  grid-column: span 5;
}

.home-group:nth-child(6n + 1)::after,
.home-group:nth-child(6n + 2)::after,
.home-group:nth-child(6n + 3)::after,
.home-group:nth-child(6n + 4)::after,
.home-group:nth-child(6n + 5)::after,
.home-group:nth-child(6n + 6)::after{
  content: "->";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  transition: transform .18s ease, background .18s ease;
}

.home-group:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(15,23,42,.14);
  border-color: rgba(255,255,255,.28);
}

.home-group__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.home-group__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(1.02) brightness(.92);
  transform: scale(1.02);
  transform-origin: center;
  transition: transform .24s ease, filter .24s ease;
}

.home-group__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.18) 26%, rgba(15,23,42,.68) 100%),
    radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 36%);
  pointer-events: none;
  transition: background .24s ease;
}

.home-group__title{
  position: absolute;
  left: 16px;
  right: 72px;
  bottom: 16px;
  z-index: 2;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 8px 24px rgba(15,23,42,.34);
  transition: transform .18s ease, opacity .18s ease;
}

.home-group:nth-child(6n + 1) .home-group__title{
  font-size: 24px;
  max-width: 58%;
}

.home-group__meta{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-width: 38px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.88);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 12px 24px rgba(15,23,42,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (hover: hover){
  .home-group:hover .home-group__media img{
    transform: scale(1.05);
    filter: blur(1.6px) saturate(1.06) brightness(.80);
  }

  .home-group:hover .home-group__overlay{
    background:
      linear-gradient(180deg, rgba(15,23,42,.08) 0%, rgba(15,23,42,.24) 20%, rgba(15,23,42,.76) 100%),
      radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 36%);
  }

  .home-group:hover .home-group__title{
    transform: translateY(-2px);
  }

  .home-group:hover::after{
    transform: translateX(2px);
    background: rgba(255,255,255,.22);
  }
}

.home-news{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.home-news__card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 268px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  padding: 18px;
}

.home-news__card::before{
  content: "";
  position: absolute;
  top: -40px;
  right: -24px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
}

.home-news__card--clients::before{
  background: radial-gradient(circle, rgba(96,165,250,.24), rgba(96,165,250,0) 70%);
}

.home-news__card--partners::before{
  background: radial-gradient(circle, rgba(52,211,153,.24), rgba(52,211,153,0) 70%);
}

.home-news__card[id]{
  scroll-margin-top: 118px;
}

.home-news__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-news__tag{
  min-height: 28px;
  width: fit-content;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, rgba(15,23,42,.64));
  display: inline-flex;
  align-items: center;
}

.home-news__stamp{
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.54);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-news__icon{
  width: 50px;
  height: 50px;
  margin-top: 18px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 28px rgba(15,23,42,.10);
}

.home-news__card--clients .home-news__icon{
  background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.94));
  color: #2563eb;
}

.home-news__card--partners .home-news__icon{
  background: linear-gradient(135deg, rgba(220,252,231,.98), rgba(187,247,208,.94));
  color: #15803d;
}

.home-news__icon i{
  width: 22px;
  height: 22px;
}

.home-news__title{
  margin: 18px 0 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-news__text{
  margin: 10px 0 0;
  color: var(--muted, rgba(15,23,42,.62));
  font-size: 14px;
  line-height: 1.6;
}

.home-news__meta{
  margin: 10px 0 0;
  color: rgba(15,23,42,.48);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.home-news__link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

.home-news__card--clients .home-news__link{
  background: rgba(37,99,235,.10);
  color: #2563eb;
}

.home-news__card--partners .home-news__link{
  background: rgba(21,128,61,.10);
  color: #15803d;
}

.home-status{
  margin-top: 10px;
}

@media (max-width: 900px){
  .home-main{
    padding: 8px 12px calc(106px + var(--safe-bottom, 0px));
    gap: 14px;
  }

  .home-hero{
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 18px;
    padding: 22px 18px;
    border-radius: 24px;
  }

  .home-hero__title{
    max-width: 12ch;
    font-size: clamp(30px, 8vw, 42px);
  }

  .home-hero__text{
    font-size: 15px;
  }

  .home-hero__spotlight-card{
    width: 100%;
    max-width: none;
    padding: 18px;
    border-radius: 22px;
  }

  .home-section{
    padding: 15px;
    border-radius: 22px;
  }

  .home-section__head{
    align-items: flex-start;
    gap: 10px;
  }

  .home-section__title{
    font-size: 19px;
  }

  .home-assurance,
  .home-personal{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .home-lookbook__card,
  .home-lookbook__card--wide{
    grid-column: span 1;
    min-height: 240px;
  }

  .home-groups{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 132px;
    gap: 12px;
  }

  .home-group,
  .home-group:nth-child(6n + 2),
  .home-group:nth-child(6n + 3){
    grid-column: span 1;
  }

  .home-group:nth-child(6n + 1){
    grid-column: 1 / -1;
    grid-row: span 1;
    min-height: 176px;
  }

  .home-group:nth-child(6n + 1) .home-group__title{
    font-size: 21px;
    max-width: 62%;
  }

  .home-news{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .home-assurance,
  .home-personal,
  .home-lookbook{
    grid-template-columns: 1fr;
  }

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

  .home-assurance__card,
  .home-personal__card,
  .home-lookbook__card,
  .home-lookbook__card--wide{
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }

  .home-personal__recent-item{
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .home-personal__recent-thumb{
    width: 54px;
    height: 54px;
  }

  .home-hero__chips{
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-hero__chip{
    width: 100%;
    justify-content: flex-start;
  }

  .home-hero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero__actions .app-btn{
    width: 100%;
    justify-content: center;
  }

  .home-section__head{
    flex-direction: column;
  }

  .home-section__link{
    min-height: 34px;
  }

  .home-scenario{
    min-height: 146px;
    padding: 14px;
    border-radius: 18px;
  }

  .home-scenario__title{
    font-size: 16px;
  }

  .home-lookbook__title{
    font-size: 24px;
    max-width: 12ch;
  }

  .page-home .catalog-cards .product-card__deal{
    max-width: 100%;
  }

  .home-groups{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 118px;
    gap: 10px;
  }

  .home-group,
  .home-group:nth-child(6n + 1),
  .home-group:nth-child(6n + 2),
  .home-group:nth-child(6n + 3){
    grid-column: span 1;
    grid-row: auto;
    min-height: 118px;
    padding: 13px;
    border-radius: 18px;
  }

  .home-group:nth-child(6n + 1){
    grid-column: 1 / -1;
    min-height: 154px;
  }

  .home-group:nth-child(6n + 1) .home-group__title{
    font-size: 18px;
    max-width: 62%;
  }

  .home-group__title{
    left: 13px;
    right: 56px;
    bottom: 13px;
    font-size: 14px;
    max-width: none;
  }

  .home-group::after{
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
  }

  .home-group__meta{
    top: 10px;
    right: 10px;
    min-width: 34px;
    height: 24px;
    font-size: 10px;
  }

  .home-group__media img{
    object-fit: contain;
    object-position: center center;
    padding: 10px 8px 8px;
    background:
      radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 64%),
      linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  }

  .home-news__card{
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }

  .home-news__title{
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-home-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .skeleton::after,
  .page-home .catalog-cards .product-card,
  .page-home .catalog-cards .product-card__img,
  .home-scenario,
  .home-lookbook__card,
  .home-lookbook__media img,
  .home-group,
  .home-group__media img{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ===== UNIFIED HEADER ===== */
.app-header{
  position: sticky;
  top: 0;
  z-index: 80;
  padding: calc(10px + var(--safe-top, 0px)) 14px 10px;
  margin: 0 0 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,.28));
  border-bottom: 1px solid var(--stroke, rgba(15, 23, 42, 0.10));
}

@media (prefers-color-scheme: dark){
  .app-header{
    background: linear-gradient(to bottom, rgba(10,13,20,.82), rgba(10,13,20,.30));
  }
}

.app-header__inner{
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}

.app-header__left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

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

.app-header__title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted2, rgba(15, 23, 42, 0.52));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.shop-topbar__nav{
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shop-topbar__nav > *{
  position: relative;
  flex: 0 0 auto;
}

.shop-topbar__navlink{
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  white-space: nowrap;
  position: relative;
}

.shop-topbar__navlink:hover{
  color: rgba(15, 23, 42, 0.92);
  background: rgba(15, 23, 42, 0.03);
}

.shop-topbar__navlink.is-active{
  color: var(--brand1, #5b6cff);
  background: rgba(91, 108, 255, 0.05);
  box-shadow: none;
}

.shop-topbar__navmenu{
  position: static;
}

.shop-topbar__navmenu > summary{
  list-style: none;
  cursor: pointer;
}

.shop-topbar__navmenu > summary::-webkit-details-marker{
  display: none;
}

.shop-topbar__navlink--menu{
  gap: 5px;
}

.shop-topbar__navchev{
  width: 11px;
  height: 11px;
  color: rgba(15, 23, 42, 0.28);
  transition: transform 180ms ease, color 160ms ease;
}

.shop-topbar__navmenu[open] > .shop-topbar__navlink{
  color: var(--brand1, #5b6cff);
  background: rgba(91, 108, 255, 0.08);
  box-shadow: none;
}

.shop-topbar__navmenu[open] .shop-topbar__navchev{
  color: var(--brand1, #5b6cff);
  transform: rotate(180deg);
}

.shop-topbar__navdropdown{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  width: auto;
  padding: 24px 28px 26px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255,255,255,0.99);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transform-origin: top center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 230;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.shop-topbar__navdropdownhead{
  padding: 0 0 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.56);
}

.shop-topbar__navdroptitle{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(15, 23, 42, 0.96);
}

.shop-topbar__navdropmeta{
  margin-top: 7px;
  color: rgba(15, 23, 42, 0.52);
  font-size: 11.5px;
  line-height: 1.6;
  max-width: 520px;
}

.shop-topbar__navgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.shop-topbar__navcard{
  min-height: 76px;
  padding: 14px 0 12px;
  border-radius: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title arrow"
    "icon meta arrow";
  align-items: start;
  column-gap: 10px;
  row-gap: 4px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.58);
  background: transparent;
  box-shadow: none;
  color: rgba(15, 23, 42, 0.90);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
  position: relative;
}

.shop-topbar__navcard:hover{
  transform: translateX(2px);
  border-color: rgba(91, 108, 255, 0.18);
}

.shop-topbar__navcard i{
  width: 15px;
  height: 15px;
  grid-area: icon;
  color: var(--brand1, #5b6cff);
  align-self: center;
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-topbar__navcardtitle{
  grid-area: title;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: rgba(15, 23, 42, 0.96);
  align-self: start;
}

.shop-topbar__navcardmeta{
  grid-area: meta;
  color: rgba(15, 23, 42, 0.52);
  font-size: 11.5px;
  line-height: 1.55;
  max-width: 30ch;
}

.shop-topbar__navcard::after{
  content: "";
  grid-area: arrow;
  width: 8px;
  height: 8px;
  align-self: start;
  justify-self: end;
  margin-top: 6px;
  border-top: 1.25px solid rgba(15, 23, 42, 0.18);
  border-right: 1.25px solid rgba(15, 23, 42, 0.18);
  transform: rotate(45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}

.shop-topbar__navcard:hover::after{
  transform: translateX(2px) rotate(45deg);
  border-color: rgba(91, 108, 255, 0.62);
}

@media (min-width: 901px){
  .shop-topbar__nav{
    display: inline-flex;
  }
}

.app-header__search{
  flex: 1 1 320px;
  width: auto;
  max-width: 560px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--stroke, rgba(15, 23, 42, 0.10));
  background: rgba(255, 255, 255, 0.84);
  color: rgba(15, 23, 42, 0.92);
  padding: 10px 14px;
  outline: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.app-header__search::placeholder{ color: rgba(15, 23, 42, 0.45); }

.app-header__search:focus{
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

.app-iconbtn,
.app-header .iconbtn,
.app-header .shop-cartbtn,
.app-header .pdp-iconbtn,
.app-header .acc-icbtn{
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--stroke, rgba(15, 23, 42, 0.10));
  background: rgba(255, 255, 255, 0.84);
  color: rgba(15, 23, 42, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.app-iconbtn:active,
.app-header .iconbtn:active,
.app-header .shop-cartbtn:active,
.app-header .pdp-iconbtn:active,
.app-header .acc-icbtn:active{
  transform: scale(0.99);
}

.app-iconbtn svg,
.app-header .iconbtn svg,
.app-header .shop-cartbtn svg,
.app-header .pdp-iconbtn svg,
.app-header .acc-icbtn svg{
  width: 20px;
  height: 20px;
}

body.page-catalog .app-header--catalog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  margin: 0 0 8px;
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  transition: transform .22s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.page-catalog .app-header--catalog.is-hidden{
  border-bottom-color: transparent;
  box-shadow: none;
}

body.page-catalog .shop-main{
  min-height: calc(100vh - 108px - var(--safe-bottom, 0px));
  padding-top: calc(var(--shop-topbar-height, 74px) + 16px);
}

body.page-catalog .app-header--catalog .shop-topbar__inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0;
}

body.page-catalog .app-header--catalog .shop-topbar__left{
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

body.page-catalog .app-header--catalog .shop-topbar__nav{
  grid-column: 2;
  justify-self: end;
  width: auto;
  margin-left: auto;
}

body.page-catalog .app-header--catalog .shop-topbar__brand{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.96);
  text-decoration: none;
}

body.page-catalog .app-header--catalog .shop-topbar__brandmark{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.page-catalog .app-header--catalog .shop-topbar__brandmark img{
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

body.page-catalog .app-header--catalog .shop-topbar__brandcopy{
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.06;
}

body.page-catalog .app-header--catalog .shop-topbar__brandname{
  display: block;
  font-size: 15px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

body.page-catalog .app-header--catalog .shop-topbar__brandmeta{
  display: block;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: rgba(15, 23, 42, 0.62);
  white-space: nowrap;
}

body.page-catalog .app-header--catalog .shop-topbar__actions{
  grid-column: 3;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
}

body.page-home .app-header--catalog .shop-topbar__inner,
body.page-account .app-header--catalog .shop-topbar__inner,
body.page-offer .app-header--catalog .shop-topbar__inner,
body.page-policy .app-header--catalog .shop-topbar__inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0;
}

body.page-home .app-header--catalog .shop-topbar__left,
body.page-account .app-header--catalog .shop-topbar__left,
body.page-offer .app-header--catalog .shop-topbar__left,
body.page-policy .app-header--catalog .shop-topbar__left{
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

body.page-home .app-header--catalog .shop-topbar__nav,
body.page-account .app-header--catalog .shop-topbar__nav,
body.page-offer .app-header--catalog .shop-topbar__nav,
body.page-policy .app-header--catalog .shop-topbar__nav{
  grid-column: 2;
  justify-self: end;
  width: auto;
  margin-left: auto;
}

body.page-home .app-header--catalog .shop-topbar__brand,
body.page-account .app-header--catalog .shop-topbar__brand,
body.page-offer .app-header--catalog .shop-topbar__brand,
body.page-policy .app-header--catalog .shop-topbar__brand{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.96);
  text-decoration: none;
}

body.page-home .app-header--catalog .shop-topbar__brandmark,
body.page-account .app-header--catalog .shop-topbar__brandmark,
body.page-offer .app-header--catalog .shop-topbar__brandmark,
body.page-policy .app-header--catalog .shop-topbar__brandmark{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.page-home .app-header--catalog .shop-topbar__brandmark img,
body.page-account .app-header--catalog .shop-topbar__brandmark img,
body.page-offer .app-header--catalog .shop-topbar__brandmark img,
body.page-policy .app-header--catalog .shop-topbar__brandmark img{
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

body.page-home .app-header--catalog .shop-topbar__brandcopy,
body.page-account .app-header--catalog .shop-topbar__brandcopy,
body.page-offer .app-header--catalog .shop-topbar__brandcopy,
body.page-policy .app-header--catalog .shop-topbar__brandcopy{
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.06;
}

body.page-home .app-header--catalog .shop-topbar__brandname,
body.page-account .app-header--catalog .shop-topbar__brandname,
body.page-offer .app-header--catalog .shop-topbar__brandname,
body.page-policy .app-header--catalog .shop-topbar__brandname{
  display: block;
  font-size: 15px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

body.page-home .app-header--catalog .shop-topbar__brandmeta,
body.page-account .app-header--catalog .shop-topbar__brandmeta,
body.page-offer .app-header--catalog .shop-topbar__brandmeta,
body.page-policy .app-header--catalog .shop-topbar__brandmeta{
  display: block;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: rgba(15, 23, 42, 0.62);
  white-space: nowrap;
}

body.page-home .app-header--catalog .shop-topbar__actions,
body.page-account .app-header--catalog .shop-topbar__actions,
body.page-offer .app-header--catalog .shop-topbar__actions,
body.page-policy .app-header--catalog .shop-topbar__actions{
  grid-column: 3;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu,
body.page-home .app-header--catalog .shop-topbar__profilemenu,
body.page-account .app-header--catalog .shop-topbar__profilemenu,
body.page-offer .app-header--catalog .shop-topbar__profilemenu,
body.page-policy .app-header--catalog .shop-topbar__profilemenu{
  position: relative;
  flex: 0 0 auto;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu summary,
body.page-home .app-header--catalog .shop-topbar__profilemenu summary,
body.page-account .app-header--catalog .shop-topbar__profilemenu summary,
body.page-offer .app-header--catalog .shop-topbar__profilemenu summary,
body.page-policy .app-header--catalog .shop-topbar__profilemenu summary{
  list-style: none;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu summary::-webkit-details-marker,
body.page-home .app-header--catalog .shop-topbar__profilemenu summary::-webkit-details-marker,
body.page-account .app-header--catalog .shop-topbar__profilemenu summary::-webkit-details-marker,
body.page-offer .app-header--catalog .shop-topbar__profilemenu summary::-webkit-details-marker,
body.page-policy .app-header--catalog .shop-topbar__profilemenu summary::-webkit-details-marker{
  display: none;
}

body.page-catalog .app-header--catalog .shop-topbar__profiletrigger,
body.page-home .app-header--catalog .shop-topbar__profiletrigger,
body.page-account .app-header--catalog .shop-topbar__profiletrigger,
body.page-offer .app-header--catalog .shop-topbar__profiletrigger,
body.page-policy .app-header--catalog .shop-topbar__profiletrigger{
  min-height: 44px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

body.page-catalog .app-header--catalog .shop-topbar__profileavatar,
body.page-home .app-header--catalog .shop-topbar__profileavatar,
body.page-account .app-header--catalog .shop-topbar__profileavatar,
body.page-offer .app-header--catalog .shop-topbar__profileavatar,
body.page-policy .app-header--catalog .shop-topbar__profileavatar{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #8ea2ff));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.03em;
  box-shadow: 0 10px 20px rgba(91, 108, 255, 0.24);
}

body.page-catalog .app-header--catalog .shop-topbar__profilecopy,
body.page-home .app-header--catalog .shop-topbar__profilecopy,
body.page-account .app-header--catalog .shop-topbar__profilecopy,
body.page-offer .app-header--catalog .shop-topbar__profilecopy,
body.page-policy .app-header--catalog .shop-topbar__profilecopy{
  min-width: 0;
  display: none;
}

body.page-catalog .app-header--catalog .shop-topbar__profilename,
body.page-home .app-header--catalog .shop-topbar__profilename,
body.page-account .app-header--catalog .shop-topbar__profilename,
body.page-offer .app-header--catalog .shop-topbar__profilename,
body.page-policy .app-header--catalog .shop-topbar__profilename{
  display: block;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.94);
  white-space: nowrap;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemeta,
body.page-home .app-header--catalog .shop-topbar__profilemeta,
body.page-account .app-header--catalog .shop-topbar__profilemeta,
body.page-offer .app-header--catalog .shop-topbar__profilemeta,
body.page-policy .app-header--catalog .shop-topbar__profilemeta{
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.5);
  white-space: nowrap;
}

body.page-catalog .app-header--catalog .shop-topbar__profilechev,
body.page-home .app-header--catalog .shop-topbar__profilechev,
body.page-account .app-header--catalog .shop-topbar__profilechev,
body.page-offer .app-header--catalog .shop-topbar__profilechev,
body.page-policy .app-header--catalog .shop-topbar__profilechev{
  display: none;
  color: rgba(15, 23, 42, 0.42);
}

body.page-catalog .app-header--catalog .shop-topbar__profiledropdown,
body.page-home .app-header--catalog .shop-topbar__profiledropdown,
body.page-account .app-header--catalog .shop-topbar__profiledropdown,
body.page-offer .app-header--catalog .shop-topbar__profiledropdown,
body.page-policy .app-header--catalog .shop-topbar__profiledropdown{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  box-shadow:
    0 22px 44px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 220;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profiledropdown,
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profiledropdown,
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profiledropdown,
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profiledropdown,
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profiledropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.page-catalog .app-header--catalog .shop-topbar__profilelink,
body.page-home .app-header--catalog .shop-topbar__profilelink,
body.page-account .app-header--catalog .shop-topbar__profilelink,
body.page-offer .app-header--catalog .shop-topbar__profilelink,
body.page-policy .app-header--catalog .shop-topbar__profilelink{
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.88);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: background 160ms ease, opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-catalog .app-header--catalog .shop-topbar__profilelink:hover,
body.page-home .app-header--catalog .shop-topbar__profilelink:hover,
body.page-account .app-header--catalog .shop-topbar__profilelink:hover,
body.page-offer .app-header--catalog .shop-topbar__profilelink:hover,
body.page-policy .app-header--catalog .shop-topbar__profilelink:hover{
  background: rgba(241, 245, 249, 0.9);
}

body.page-catalog .app-header--catalog .shop-topbar__profilelink i,
body.page-home .app-header--catalog .shop-topbar__profilelink i,
body.page-account .app-header--catalog .shop-topbar__profilelink i,
body.page-offer .app-header--catalog .shop-topbar__profilelink i,
body.page-policy .app-header--catalog .shop-topbar__profilelink i{
  width: 16px;
  height: 16px;
  color: rgba(15, 23, 42, 0.52);
}

body.page-catalog .app-header--catalog .shop-topbar__profilelink--danger,
body.page-home .app-header--catalog .shop-topbar__profilelink--danger,
body.page-account .app-header--catalog .shop-topbar__profilelink--danger,
body.page-offer .app-header--catalog .shop-topbar__profilelink--danger,
body.page-policy .app-header--catalog .shop-topbar__profilelink--danger{
  color: #c2410c;
}

body.page-catalog .app-header--catalog .shop-topbar__profilelink--danger i,
body.page-home .app-header--catalog .shop-topbar__profilelink--danger i,
body.page-account .app-header--catalog .shop-topbar__profilelink--danger i,
body.page-offer .app-header--catalog .shop-topbar__profilelink--danger i,
body.page-policy .app-header--catalog .shop-topbar__profilelink--danger i{
  color: #c2410c;
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink,
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink,
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink,
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink,
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink{
  opacity: 1;
  transform: translateY(0);
}

body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(1){ transition-delay: 30ms; }
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(1){ transition-delay: 30ms; }
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(1){ transition-delay: 30ms; }
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(1){ transition-delay: 30ms; }
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(1){ transition-delay: 30ms; }
body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(2){ transition-delay: 60ms; }
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(2){ transition-delay: 60ms; }
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(2){ transition-delay: 60ms; }
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(2){ transition-delay: 60ms; }
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(2){ transition-delay: 60ms; }
body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(3){ transition-delay: 90ms; }
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(3){ transition-delay: 90ms; }
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(3){ transition-delay: 90ms; }
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(3){ transition-delay: 90ms; }
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(3){ transition-delay: 90ms; }
body.page-catalog .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(4){ transition-delay: 120ms; }
body.page-home .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(4){ transition-delay: 120ms; }
body.page-account .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(4){ transition-delay: 120ms; }
body.page-offer .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(4){ transition-delay: 120ms; }
body.page-policy .app-header--catalog .shop-topbar__profilemenu[open] .shop-topbar__profilelink:nth-of-type(4){ transition-delay: 120ms; }

@media (min-width: 901px){
  body.page-catalog .app-header--catalog .shop-topbar__profiletrigger,
body.page-home .app-header--catalog .shop-topbar__profiletrigger,
body.page-account .app-header--catalog .shop-topbar__profiletrigger,
body.page-offer .app-header--catalog .shop-topbar__profiletrigger,
body.page-policy .app-header--catalog .shop-topbar__profiletrigger{
    padding-right: 10px;
  }

  body.page-catalog .app-header--catalog .shop-topbar__profilecopy,
body.page-home .app-header--catalog .shop-topbar__profilecopy,
body.page-account .app-header--catalog .shop-topbar__profilecopy,
body.page-offer .app-header--catalog .shop-topbar__profilecopy,
body.page-policy .app-header--catalog .shop-topbar__profilecopy{
    display: block;
  }

  body.page-catalog .app-header--catalog .shop-topbar__profilechev,
body.page-home .app-header--catalog .shop-topbar__profilechev,
body.page-account .app-header--catalog .shop-topbar__profilechev,
body.page-offer .app-header--catalog .shop-topbar__profilechev,
body.page-policy .app-header--catalog .shop-topbar__profilechev{
    display: block;
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 720px){
  body.page-catalog .shop-main{
    padding-top: calc(var(--shop-topbar-height, 74px) + 12px);
  }

  body.page-catalog .app-header--catalog .shop-topbar__inner{
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.page-catalog .app-header--catalog .shop-topbar__brand{
    gap: 8px;
  }

  body.page-catalog .app-header--catalog .shop-topbar__brandmark{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 999px;
  }

  body.page-catalog .app-header--catalog .shop-topbar__brandmark img{
    width: 36px;
    height: 36px;
  }

  body.page-catalog .app-header--catalog .shop-topbar__brandname{
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  body.page-catalog .app-header--catalog .shop-topbar__brandmeta{
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  body.page-catalog .app-header--catalog .shop-topbar__actions{
    grid-column: 2;
    justify-content: flex-end;
  }

  body.page-home .app-header--catalog .shop-topbar__inner,
  body.page-account .app-header--catalog .shop-topbar__inner,
  body.page-offer .app-header--catalog .shop-topbar__inner,
  body.page-policy .app-header--catalog .shop-topbar__inner{
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.page-home .app-header--catalog .shop-topbar__brand,
  body.page-account .app-header--catalog .shop-topbar__brand,
  body.page-offer .app-header--catalog .shop-topbar__brand,
  body.page-policy .app-header--catalog .shop-topbar__brand{
    gap: 8px;
  }

  body.page-home .app-header--catalog .shop-topbar__brandmark,
  body.page-account .app-header--catalog .shop-topbar__brandmark,
  body.page-offer .app-header--catalog .shop-topbar__brandmark,
  body.page-policy .app-header--catalog .shop-topbar__brandmark{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 999px;
  }

  body.page-home .app-header--catalog .shop-topbar__brandmark img,
  body.page-account .app-header--catalog .shop-topbar__brandmark img,
  body.page-offer .app-header--catalog .shop-topbar__brandmark img,
  body.page-policy .app-header--catalog .shop-topbar__brandmark img{
    width: 36px;
    height: 36px;
  }

  body.page-home .app-header--catalog .shop-topbar__brandname,
  body.page-account .app-header--catalog .shop-topbar__brandname,
  body.page-offer .app-header--catalog .shop-topbar__brandname,
  body.page-policy .app-header--catalog .shop-topbar__brandname{
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  body.page-home .app-header--catalog .shop-topbar__brandmeta,
  body.page-account .app-header--catalog .shop-topbar__brandmeta,
  body.page-offer .app-header--catalog .shop-topbar__brandmeta,
  body.page-policy .app-header--catalog .shop-topbar__brandmeta{
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  body.page-home .app-header--catalog .shop-topbar__actions,
  body.page-account .app-header--catalog .shop-topbar__actions,
  body.page-offer .app-header--catalog .shop-topbar__actions,
  body.page-policy .app-header--catalog .shop-topbar__actions{
    grid-column: 2;
    justify-content: flex-end;
  }

  body.page-catalog .app-header--catalog .shop-topbar__profiletrigger,
body.page-home .app-header--catalog .shop-topbar__profiletrigger,
body.page-account .app-header--catalog .shop-topbar__profiletrigger,
body.page-offer .app-header--catalog .shop-topbar__profiletrigger,
body.page-policy .app-header--catalog .shop-topbar__profiletrigger{
    min-height: 40px;
    padding: 2px;
    gap: 0;
  }

  body.page-catalog .app-header--catalog .shop-topbar__profileavatar,
body.page-home .app-header--catalog .shop-topbar__profileavatar,
body.page-account .app-header--catalog .shop-topbar__profileavatar,
body.page-offer .app-header--catalog .shop-topbar__profileavatar,
body.page-policy .app-header--catalog .shop-topbar__profileavatar{
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body.page-catalog .app-header--catalog .shop-topbar__profiledropdown,
body.page-home .app-header--catalog .shop-topbar__profiledropdown,
body.page-account .app-header--catalog .shop-topbar__profiledropdown,
body.page-offer .app-header--catalog .shop-topbar__profiledropdown,
body.page-policy .app-header--catalog .shop-topbar__profiledropdown{
    top: calc(100% + 10px);
    min-width: 210px;
    border-radius: 18px;
  }
}

@media (max-width: 1100px){
  .shop-topbar__navdropdown{
    padding: 20px 20px 20px;
  }

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

  .shop-topbar__navcard{
    min-height: 72px;
  }
}

body.shop-header-menu-open::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 78;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(15,23,42,.12));
}

.app-header--catalog{
  padding: calc(10px + var(--safe-top, 0px)) 14px 12px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-header--catalog .app-header__inner{
  padding: 10px 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.54);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:
    0 20px 46px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (prefers-color-scheme: dark){
  .app-header--catalog .app-header__inner{
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(10,13,20,.82), rgba(10,13,20,.68));
  }
}

body.page-catalog .app-header--catalog,
body.page-home .app-header--catalog,
body.page-account .app-header--catalog,
body.page-offer .app-header--catalog,
body.page-policy .app-header--catalog{
  border-bottom-color: transparent;
  box-shadow: none;
  background: transparent;
}

.app-header--catalog .shop-topbar__brand,
body.page-home .app-header--catalog .shop-topbar__brand,
body.page-account .app-header--catalog .shop-topbar__brand,
body.page-offer .app-header--catalog .shop-topbar__brand,
body.page-policy .app-header--catalog .shop-topbar__brand{
  gap: 12px;
}

.app-header--catalog .shop-topbar__brandmark,
body.page-home .app-header--catalog .shop-topbar__brandmark,
body.page-account .app-header--catalog .shop-topbar__brandmark,
body.page-offer .app-header--catalog .shop-topbar__brandmark,
body.page-policy .app-header--catalog .shop-topbar__brandmark{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.94), rgba(255,255,255,.38) 58%, rgba(191,219,254,.24) 100%);
  border: 1px solid rgba(255,255,255,.74);
  box-shadow:
    0 14px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.app-header--catalog .shop-topbar__brandcopy,
body.page-home .app-header--catalog .shop-topbar__brandcopy,
body.page-account .app-header--catalog .shop-topbar__brandcopy,
body.page-offer .app-header--catalog .shop-topbar__brandcopy,
body.page-policy .app-header--catalog .shop-topbar__brandcopy{
  gap: 4px;
}

.app-header--catalog .shop-topbar__brandmeta,
body.page-home .app-header--catalog .shop-topbar__brandmeta,
body.page-account .app-header--catalog .shop-topbar__brandmeta,
body.page-offer .app-header--catalog .shop-topbar__brandmeta,
body.page-policy .app-header--catalog .shop-topbar__brandmeta{
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.shop-topbar__brand{
  gap: 12px;
}

.shop-topbar__brandmark{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.94), rgba(255,255,255,.38) 58%, rgba(191,219,254,.24) 100%);
  border: 1px solid rgba(255,255,255,.74);
  box-shadow:
    0 14px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.shop-topbar__brandcopy{
  gap: 4px;
}

.shop-topbar__brandmeta{
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.shop-topbar__branddot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(34,197,94,.92);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
  flex: 0 0 auto;
}

.shop-topbar__brandstatus{
  color: rgba(15,23,42,.56);
}

.shop-topbar__actions{
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 28px rgba(15,23,42,.06);
}

.shop-topbar__nav{
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 28px rgba(15,23,42,.06);
}

.shop-topbar__nav > *{
  position: relative;
}

.shop-topbar__navmenu{
  position: relative;
}

.shop-topbar__navlink{
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  color: rgba(15,23,42,.68);
  font-size: 11.5px;
  letter-spacing: .08em;
}

.shop-topbar__navlink:hover{
  background: rgba(15,23,42,.05);
}

.shop-topbar__navlink.is-active,
.shop-topbar__navmenu[open] > .shop-topbar__navlink{
  color: rgba(15,23,42,.96);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.shop-topbar__navlink--menu{
  gap: 7px;
}

.shop-topbar__navdropdown{
  top: calc(100% + 14px);
  left: 50%;
  right: auto;
  width: min(740px, calc(100vw - 56px));
  padding: 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:
    0 28px 54px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.84);
  transform: translate(-50%, -8px) scale(.985);
  transform-origin: top center;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  transform: translate(-50%, 0) scale(1);
}

.shop-topbar__navdropdown::before{
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background: inherit;
  border-top: 1px solid rgba(255,255,255,.72);
  border-left: 1px solid rgba(255,255,255,.72);
  transform: rotate(45deg);
}

.shop-topbar__navdropdownhead{
  padding: 0 0 16px;
  margin-bottom: 14px;
}

.shop-topbar__navdropmeta{
  max-width: 58ch;
}

.shop-topbar__navgrid{
  gap: 14px;
}

.shop-topbar__navcard{
  min-height: 86px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.88);
  box-shadow: 0 14px 28px rgba(15,23,42,.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.shop-topbar__navcard:hover{
  transform: translateY(-2px);
  border-color: rgba(91,108,255,.16);
  background: #fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.10);
}

.shop-topbar__navcard i{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.92));
  color: #2563eb;
  box-shadow: 0 14px 24px rgba(37,99,235,.14);
}

.shop-topbar__navcardmeta{
  max-width: none;
}

.shop-topbar__profiletrigger{
  transition: background 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.app-header--catalog .shop-topbar__profiletrigger,
body.page-home .app-header--catalog .shop-topbar__profiletrigger,
body.page-account .app-header--catalog .shop-topbar__profiletrigger,
body.page-offer .app-header--catalog .shop-topbar__profiletrigger,
body.page-policy .app-header--catalog .shop-topbar__profiletrigger{
  background: rgba(255,255,255,.84);
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.shop-topbar__profilemenu[open] > .shop-topbar__profiletrigger{
  background: #fff !important;
  border-color: rgba(91,108,255,.14) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.08) !important;
}

.app-header--catalog .shop-topbar__profiledropdown,
body.page-home .app-header--catalog .shop-topbar__profiledropdown,
body.page-account .app-header--catalog .shop-topbar__profiledropdown,
body.page-offer .app-header--catalog .shop-topbar__profiledropdown,
body.page-policy .app-header--catalog .shop-topbar__profiledropdown{
  min-width: 248px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.74);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
}

.shop-topbar__profiledropdown{
  min-width: 248px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.74);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
}

.shop-topbar__profilepanelhead{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(226,232,240,.72);
}

.shop-topbar__profilepanelavatar{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #8ea2ff));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.03em;
  box-shadow: 0 14px 26px rgba(91,108,255,.22);
}

.shop-topbar__profilepanelcopy{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-topbar__profilepaneltitle{
  font-size: 14px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(15,23,42,.96);
}

.shop-topbar__profilepanelmeta{
  color: rgba(15,23,42,.52);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}

@media (max-width: 1100px){
  .shop-topbar__navdropdown{
    width: min(680px, calc(100vw - 48px));
    padding: 20px;
  }
}

@media (max-width: 720px){
  .app-header--catalog{
    padding: calc(8px + var(--safe-top, 0px)) 12px 8px;
  }

  .app-header--catalog .app-header__inner{
    padding: 10px 10px;
    border-radius: 22px;
  }

  .shop-topbar__brand{
    gap: 10px;
  }

  .shop-topbar__brandmeta{
    gap: 6px;
  }

  .shop-topbar__brandstatus{
    display: none;
  }

  .shop-topbar__actions{
    gap: 7px !important;
    padding: 4px;
  }

  .shop-topbar__profiledropdown{
    top: calc(100% + 10px);
    right: 0;
    width: min(280px, calc(100vw - 24px));
    min-width: 0;
  }
}

header.app-header .pdp-topbar-d__inner{
  padding: 0;
}

body.page-account .acc-head{
  padding-top: 16px;
}

/* ===== UNIFIED PRIMITIVES ===== */
.app-btn,
.btn,
.pdp-btn{
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .15px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #9a7bff));
  box-shadow: 0 14px 32px rgba(91,108,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  text-decoration: none;
}

.app-btn:active,
.btn:active,
.pdp-btn:active{
  transform: scale(.99);
  filter: brightness(.98);
}

.app-btn--secondary,
.btn.secondary,
.pdp-btn--secondary{
  color: var(--text, #0b1220);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke, rgba(15,23,42,.12));
  box-shadow: var(--shadow2, 0 10px 24px rgba(10,18,35,.14));
}

@media (prefers-color-scheme: dark){
  .app-btn--secondary,
  .btn.secondary,
  .pdp-btn--secondary{
    background: rgba(255,255,255,.10);
  }
}

.app-card,
.card,
.acc-card:not(.acc-bonus),
.pdp-card{
  border-radius: 18px;
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
  background: var(--card, rgba(255,255,255,.72));
  box-shadow: var(--shadow2, 0 10px 24px rgba(10,18,35,.14));
}

.app-input,
.input,
.rtextarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,.92);
  color: rgba(15, 23, 42, 0.92);
  padding: 12px 14px;
  outline: none;
  box-shadow: 0 10px 22px rgba(10,18,35,.06);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.app-input:focus,
.input:focus,
.rtextarea:focus{
  background: rgba(255,255,255,.98);
  border-color: rgba(91,108,255,.38);
  box-shadow: 0 16px 34px rgba(10,18,35,.10);
}

/* Prevent mobile browser auto-zoom on form focus (iOS/Android touch browsers). */
@media (hover: none) and (pointer: coarse){
  .app-input,
  .input,
  .rtextarea{
    font-size: 16px;
    line-height: 1.35;
  }
}

/* ===== UNIFIED FOOTER ===== */
.app-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(8,11,18,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -10px 28px rgba(0,0,0,.28);
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  transition: transform .22s ease, opacity .18s ease, background .18s ease;
  will-change: transform, opacity;
}

.app-footer.is-hidden{
  /* Footer should not auto-hide (desktop/mobile). Keep rule as a no-op for safety. */
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.app-footer__inner{
  max-width: 1120px;
  margin: 0 auto;
  min-height: 68px;
  padding: 14px 16px calc(14px + var(--safe-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (prefers-color-scheme: dark){
  .app-footer{
    background: rgba(8,11,18,.96);
    border-top-color: rgba(255,255,255,.10);
    box-shadow: 0 -10px 26px rgba(0,0,0,.30);
  }

  .app-footer__inner{
    color: rgba(242,246,255,.92);
  }
}

.app-footer__brand{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16px;
  color: rgba(242,246,255,.68);
  white-space: nowrap;
  flex: 0 0 auto;
}

.app-footer__nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-footer__nav::-webkit-scrollbar{
  display: none;
}

.app-footer__link{
  position: relative;
  min-height: 28px;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  color: rgba(242,246,255,.90);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  opacity: .8;
  border-radius: 10px;
  transition: opacity .14s ease, color .14s ease, background .14s ease;
}

.app-footer__link + .app-footer__link{
  margin-left: 2px;
}

.app-footer__link + .app-footer__link::before{
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.18);
  opacity: .9;
}

.app-footer__link:hover{
  opacity: 1;
  background: rgba(255,255,255,.08);
}

.app-footer__link:focus-visible{
  opacity: 1;
  background: rgba(255,255,255,.10);
  outline: none;
}

.app-footer__icon,
.app-footer__ripple{
  display: none;
}

.app-footer__text{
  display: inline-flex;
  align-items: center;
}

@media (max-width: 640px){
  .app-footer__inner{
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px calc(12px + var(--safe-bottom, 0px));
  }

  .app-footer__brand{
    font-size: 11px;
  }

  .app-footer__nav{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    gap: 6px;
  }

  .app-footer__link + .app-footer__link{
    margin-left: 0;
  }

  .app-footer__link + .app-footer__link::before{
    content: none;
  }
}

@media (max-width: 720px){
  .app-footer{
    left: 50%;
    right: auto;
    bottom: var(--safe-bottom, 0px);
    width: calc(100vw - 12px);
    max-width: 400px;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateX(-50%);
  }

  .app-footer.is-hidden{
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-footer__inner{
    max-width: none;
    min-height: auto;
    padding: 12px 10px;
    display: block;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.10);
  }

  .app-footer__brand{
    display: none;
  }

  .app-footer__nav{
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .app-footer__link{
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    justify-content: center;
    gap: 6px;
    background: #f8f9fb;
    border-radius: 999px;
    color: #8a94a6;
    opacity: 1;
    overflow: hidden;
    position: relative;
    transition: all .40s cubic-bezier(.4, 0, .2, 1);
  }

  .app-footer__link + .app-footer__link{
    margin-left: 0;
  }

  .app-footer__link::before{
    content: none !important;
  }

  .app-footer__link:hover{
    transform: translateY(-2px);
    background: #f3f5f9;
  }

  .app-footer__icon{
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .app-footer__icon svg{
    width: 16px;
    height: 16px;
  }

  .app-footer__text{
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-10px);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    transition: all .40s cubic-bezier(.4, 0, .2, 1);
  }

  .app-footer__link.is-current{
    flex: 1.5 1 0;
    min-width: 96px;
    background: linear-gradient(135deg, var(--brand1, #5b6cff), var(--brand2, #9a7bff));
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(91,108,255,.26);
  }

  .app-footer__link.is-current .app-footer__text{
    max-width: 88px;
    opacity: 1;
    transform: translateX(0);
  }

  .app-footer__link.is-current .app-footer__icon,
  .app-footer__link.is-current .app-footer__text{
    color: #ffffff;
  }

  .app-footer__link[data-mobile-role="support"]{
    display: none;
  }

  .app-footer__ripple{
    display: block;
    position: absolute;
    border-radius: 50%;
    background: rgba(26, 59, 92, 0.15);
    transform: scale(0);
    animation: appFooterRipple .55s ease-out forwards;
    pointer-events: none;
  }
}

@keyframes appFooterRipple{
  to{
    transform: scale(4);
    opacity: 0;
  }
}

html.spa-loading{
  cursor: progress;
}

html.spa-loading .shop-topbar,
html.spa-loading .app-footer,
html.spa-swapping .shop-topbar,
html.spa-swapping .app-footer,
html.spa-loading .app-footer__link,
html.spa-loading .app-footer__text,
html.spa-swapping .app-footer__link,
html.spa-swapping .app-footer__text{
  transition: none !important;
  animation: none !important;
}

::view-transition-old(root){
  animation: shopSpaFadeOut .14s ease both;
}

::view-transition-new(root){
  animation: shopSpaFadeIn .18s ease both;
}

@keyframes shopSpaFadeOut{
  from{ opacity: 1; }
  to{ opacity: .985; }
}

@keyframes shopSpaFadeIn{
  from{ opacity: .985; }
  to{ opacity: 1; }
}

.acc-desktop-wrap{
  display: block;
}

.acc-rail-kpi,
.acc-rail-nav{
  display: none;
}

.acc-desk-head{
  display: none;
}

.acc-desktop-summary{
  display: none;
}

@media (min-width: 1024px){
  body.page-account.acc{
    --acc-bg: #f6f7fb;
    --acc-surface: #f8fafc;
    --acc-card: #ffffff;
    --acc-text: #0b1220;
    --acc-muted: #64748b;
    --acc-stroke: rgba(2,6,23,.10);
    --acc-shadow: 0 12px 32px rgba(2,6,23,.08);
    background: var(--acc-bg);
  }

  body.page-account .app-header{
    padding: 14px 16px;
    margin: 0 0 4px;
    border-bottom: 1px solid rgba(2,6,23,.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
    box-shadow: 0 1px 0 rgba(2,6,23,.04);
  }

  body.page-account .app-header__inner{
    max-width: 1120px;
  }

  .acc-desktop-wrap{
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 16px calc(104px + var(--safe-bottom, 0px));
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .acc-head{
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 88px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(2,6,23,.20);
    background: linear-gradient(180deg, #0b1220, #101a2d);
    isolation: isolate;
  }

  .acc-head::before{
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    top: -90px;
    background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 62%);
    pointer-events: none;
    z-index: 0;
  }

  .acc-head::after{
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: -110px;
    top: -110px;
    background: radial-gradient(circle at 60% 40%, rgba(37,99,235,.34), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }

  .acc-head .acc-container{
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .acc-headrow{
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  .acc-avatar{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    box-shadow: none;
    font-size: 24px;
  }

  .acc-name{
    font-size: 18px;
    color: rgba(255,255,255,.94);
  }

  .acc-email{
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255,255,255,.60);
  }

  .acc-badges{
    margin-top: 8px;
    gap: 8px;
  }

  .acc-badge{
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
  }

  .acc-badge--ok{
    border-color: rgba(34,197,94,.28);
    background: rgba(34,197,94,.10);
    color: rgba(187,247,208,.98);
  }

  .acc-badge--vip{
    border-color: rgba(245,158,11,.28);
    background: rgba(245,158,11,.12);
    color: rgba(254,243,199,.96);
  }

  .acc-actions{
    gap: 8px;
  }

  .acc-head .acc-icbtn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.90);
    box-shadow: none;
  }

  .acc-flash{
    margin: 10px 16px 0;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.90);
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  .acc-flash--ok{
    border-color: rgba(34,197,94,.26);
    background: rgba(34,197,94,.12);
    color: rgba(187,247,208,.98);
  }

  .acc-flash--bad{
    border-color: rgba(239,68,68,.26);
    background: rgba(239,68,68,.12);
    color: rgba(254,202,202,.98);
  }

  .acc-rail-kpi{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px 0;
    position: relative;
    z-index: 1;
  }

  .acc-rail-kpiBox{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 10px;
    color: rgba(255,255,255,.92);
  }

  .acc-rail-kpiBox .k{
    font-size: 11px;
    font-weight: 900;
    color: rgba(255,255,255,.62);
  }

  .acc-rail-kpiBox .v{
    margin-top: 2px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .acc-rail-nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    position: relative;
    z-index: 1;
  }

  .acc-rail-item{
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.88);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
    position: relative;
  }

  .acc-rail-item:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
  }

  .acc-rail-item:active{
    transform: translateY(1px) scale(.995);
  }

  .acc-rail-item.is-active{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
  }

  .acc-rail-item.is-active::before{
    content: "";
    position: absolute;
    left: 8px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
  }

  .acc-rail-itemIco{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    flex: 0 0 auto;
  }

  .acc-rail-itemIco svg{
    width: 18px;
    height: 18px;
  }

  .acc-rail-itemText{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
  }

  .acc-rail-itemTitle{
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.1px;
  }

  .acc-rail-itemHint{
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .acc-rail-itemArrow{
    color: rgba(255,255,255,.55);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
  }

  .acc-rail-itemArrow svg{
    width: 18px;
    height: 18px;
  }

  .acc-main{
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .acc-desk-head{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(2,6,23,.10);
    border-radius: 16px;
    background: #fff;
    margin-bottom: 12px;
  }

  .acc-desk-head__title{
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.15px;
    color: rgba(2,6,23,.94);
  }

  .acc-desk-head__hint{
    font-size: 12px;
    font-weight: 800;
    color: rgba(100,116,139,.96);
  }

  .acc-main > .acc-view,
  .acc-main > .acc-divider[data-view-target],
  .acc-main > .acc-logout[data-view-target]{
    display: none;
  }

  .acc-main > .acc-view.is-active{
    display: block;
    animation: accdeskfade .16s ease;
  }

  .acc-main > .acc-desktop-summary.acc-view.is-active{
    display: grid;
  }

  .acc-main > .acc-divider[data-view-target].is-active{
    display: block;
  }

  .acc-main > .acc-logout[data-view-target].is-active{
    display: flex;
  }

  .acc-main > .acc-divider{
    margin: 18px 0 12px;
  }

  .acc-card{
    border-radius: 16px;
    border: 1px solid rgba(2,6,23,.08);
    box-shadow: 0 10px 26px rgba(2,6,23,.07);
  }

  .acc-view.acc-bonus{
    border: 1px solid rgba(2,6,23,.10);
    background: #fff;
    color: #0b1220;
    box-shadow: 0 12px 30px rgba(2,6,23,.08);
  }

  .acc-view.acc-bonus::before{
    content: none;
  }

  .acc-view.acc-bonus .acc-bonusLabel{
    border: 1px solid rgba(2,6,23,.10);
    background: #f8fafc;
    color: #475569;
    text-shadow: none;
    letter-spacing: .05em;
  }

  .acc-view.acc-bonus .acc-bonusVal{
    color: #0b1220;
    text-shadow: none;
    font-size: 34px;
  }

  .acc-view.acc-bonus .acc-bonusSub{
    color: #64748b;
    text-shadow: none;
  }

  .acc-view.acc-bonus .acc-bcell{
    border: 1px solid rgba(2,6,23,.10);
    background: #fff;
    box-shadow: none;
    text-align: left;
    border-radius: 14px;
    padding: 10px;
  }

  .acc-view.acc-bonus .acc-bcell .k{
    color: #64748b;
    text-shadow: none;
  }

  .acc-view.acc-bonus .acc-bcell .v{
    color: #0b1220;
    text-shadow: none;
    font-size: 18px;
    margin-top: 4px;
  }

  .acc-view.acc-bonus .acc-qrbtn{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 10px 24px rgba(37,99,235,.18);
  }

  @keyframes accdeskfade{
    from{ opacity: 0; transform: translateY(4px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  .acc-main .app-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin-top: 0;
    pointer-events: auto;
  }

  .acc-main .app-footer__inner{
    max-width: 1120px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px){
  body.page-account.acc{
    --acc-bg: #f3f6fb;
    --acc-surface: #ffffff;
    --acc-card: #ffffff;
    --acc-text: #0f172a;
    --acc-muted: #64748b;
    --acc-stroke: rgba(15,23,42,.08);
    --acc-shadow: 0 18px 44px rgba(15,23,42,.08);
    background:
      radial-gradient(circle at top left, rgba(191, 219, 254, 0.24), transparent 28%),
      linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
  }

  body.page-account .app-header{
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
  }

  .acc-desktop-wrap{
    max-width: 1120px;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 8px;
    padding-top: 22px;
  }

  .acc-head{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15,23,42,.10);
    background:
      radial-gradient(circle at top right, rgba(191, 219, 254, 0.65), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    overflow: hidden;
    align-self: start;
  }

  .acc-head::before{
    width: 220px;
    height: 220px;
    right: -110px;
    top: -90px;
    background: radial-gradient(circle at center, rgba(59,130,246,.18), transparent 66%);
  }

  .acc-head::after{
    width: 220px;
    height: 220px;
    left: -120px;
    top: auto;
    bottom: -110px;
    background: radial-gradient(circle at center, rgba(16,185,129,.14), transparent 66%);
  }

  .acc-headrow{
    padding: 14px 14px 12px;
    gap: 10px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    align-items: center;
  }

  .acc-avatar,
  .acc-meta,
  .acc-name,
  .acc-email,
  .acc-actions{
    display: none;
  }

  .acc-rail-profile{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    background: rgba(248,250,252,.96);
    box-shadow: none;
    text-align: left;
    color: #0f172a;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
  }

  .acc-rail-profile:hover{
    background: #fff;
    border-color: rgba(37,99,235,.14);
    transform: translateX(1px);
  }

  .acc-rail-profile__avatar{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(37,99,235,.14);
    flex: 0 0 auto;
  }

  .acc-rail-profile__meta{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
  }

  .acc-rail-profile__name{
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .acc-rail-profile__sub{
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .acc-avatar{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(37,99,235,.10);
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    box-shadow: 0 12px 22px rgba(37,99,235,.16);
    font-size: 20px;
  }

  .acc-name{
    color: #0f172a;
    font-size: 16px;
    letter-spacing: -.02em;
  }

  .acc-email{
    font-size: 12px;
    color: #64748b;
  }

  .acc-head .acc-icbtn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.9);
    color: #334155;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
  }

  .acc-flash{
    margin: 12px 22px 0;
    border-color: rgba(15,23,42,.08);
    background: #fff;
    color: #334155;
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
  }

  .acc-flash--ok{
    border-color: rgba(34,197,94,.14);
    background: #f0fdf4;
    color: #166534;
  }

  .acc-flash--bad{
    border-color: rgba(239,68,68,.14);
    background: #fef2f2;
    color: #b91c1c;
  }

  .acc-rail-kpi{
    display: none;
  }

  .acc-rail-nav{
    gap: 6px;
    padding: 10px;
  }

  .acc-rail-item{
    border: 1px solid rgba(15,23,42,.06);
    background: rgba(248,250,252,.96);
    color: #0f172a;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: none;
  }

  .acc-rail-item:hover{
    background: #fff;
    border-color: rgba(37,99,235,.14);
    transform: translateX(1px);
  }

  .acc-rail-item.is-active{
    background: linear-gradient(135deg, rgba(239,246,255,1), rgba(248,250,252,1));
    border-color: rgba(37,99,235,.18);
    box-shadow: 0 8px 18px rgba(37,99,235,.08);
  }

  .acc-rail-item.is-active::before{
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
  }

  .acc-rail-itemIco{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.08);
    background: #fff;
    color: #2563eb;
  }

  .acc-rail-itemTitle{
    font-size: 13px;
  }

  .acc-rail-itemHint,
  .acc-rail-itemArrow{
    color: #64748b;
  }

  .acc-rail-itemHint{
    font-size: 10px;
  }

  .acc-rail-itemArrow{
    opacity: .66;
  }

  .acc-main{
    padding-top: 0;
    min-width: 0;
  }

  .acc-container.acc-main{
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .acc-desk-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.96));
    box-shadow: 0 16px 36px rgba(15,23,42,.06);
    margin-bottom: 16px;
  }

  .acc-desktop-summary{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(15,23,42,.08);
    background:
      radial-gradient(circle at top right, rgba(191,219,254,.62), rgba(255,255,255,0) 28%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98));
    box-shadow: 0 18px 40px rgba(15,23,42,.07);
  }

  .acc-desktop-summary__hero{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
  }

  .acc-desktop-summary__eyebrow{
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .acc-desktop-summary__title{
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 900;
    color: #0f172a;
    max-width: 12ch;
  }

  .acc-desktop-summary__text{
    max-width: 54ch;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
  }

  .acc-desktop-summary__stats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
  }

  .acc-desktop-stat{
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
  }

  .acc-desktop-stat__label{
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
  }

  .acc-desktop-stat__value{
    margin-top: 10px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 900;
    color: #0f172a;
  }

  .acc-desktop-stat__hint{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
  }

  .acc-desktop-summary__actions{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 6px;
  }

  .acc-desktop-chip{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    border: 1px solid rgba(15,23,42,.08);
    background: #ffffff;
    color: #0f172a;
    border-radius: 18px;
    min-height: 58px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  }

  .acc-desktop-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(37,99,235,.18);
    background: #fff;
    box-shadow: 0 14px 28px rgba(15,23,42,.06);
  }

  .acc-desktop-chip svg{
    width: 16px;
    height: 16px;
    color: #2563eb;
  }

  .acc-desk-head__title{
    font-size: 24px;
    letter-spacing: -.04em;
    color: #0f172a;
  }

  .acc-desk-head__hint{
    font-size: 13px;
    color: #64748b;
  }

  .acc-card{
    border-radius: 24px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 36px rgba(15,23,42,.06);
    overflow: hidden;
  }

  .acc-pad{
    padding-left: 22px;
    padding-right: 22px;
  }

  .acc-view.acc-bonus{
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 18px 40px rgba(15,23,42,.07);
    background:
      radial-gradient(circle at top right, rgba(219,234,254,.75), rgba(255,255,255,0) 32%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }

  .acc-view.acc-bonus .acc-bonusLabel{
    background: #eff6ff;
    color: #1d4ed8;
    border-color: rgba(37,99,235,.12);
  }

  .acc-view.acc-bonus .acc-bonusVal{
    font-size: 38px;
    color: #0f172a;
  }

  .acc-view.acc-bonus .acc-bcell{
    border-radius: 18px;
    border-color: rgba(15,23,42,.07);
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
  }

  .acc-view.acc-bonus .acc-qrbtn{
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 14px 28px rgba(37,99,235,.18);
  }

  .acc-view[data-view="orders"] .orders{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .acc-view[data-view="orders"] .order{
    min-height: 124px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
  }

  .acc-view[data-view="orders"] .order:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15,23,42,.08);
  }

  .acc-view[data-view="orders"] .order-num{
    font-size: 16px;
  }

  .acc-view[data-view="orders"] .order-date,
  .acc-view[data-view="orders"] .order-items{
    color: #64748b;
  }

  .acc-view[data-view="orders"] .order-sum{
    font-size: 20px;
    color: #0f172a;
  }

  .acc-view[data-view="settings"] .acc-info{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 22px 4px;
  }

  .acc-view[data-view="settings"] .acc-row{
    margin: 0;
    min-height: 96px;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.04);
  }

  .acc-view[data-view="settings"] .acc-pad:last-child{
    padding-top: 14px !important;
  }

  .acc-view[data-view="settings"] .acc-note{
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
    padding: 14px 16px;
  }

  .acc-view[data-view="delivery"] .acc-delivery-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .acc-view[data-view="delivery"] .acc-delivery-item{
    min-height: 126px;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 12px 26px rgba(15,23,42,.05);
  }

  .acc-view[data-view="delivery"] .acc-delivery-empty{
    grid-column: 1 / -1;
  }

  .acc-view[data-view="favorites"] #favoritesList{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .acc-view[data-view="favorites"] #favoritesList .product-card{
    width: auto;
    flex: 0 0 auto;
  }

  .acc-view[data-view="favorites"] #favoritesEmpty{
    padding: 18px 0 8px;
  }

  .acc-view[data-view="bonuses"] .acc-bgrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .acc-row,
  .acc-delivery-item,
  .order-item,
  .favorite-item{
    border-radius: 18px;
  }

  .acc-divider{
    margin: 20px 0 12px;
  }

  .acc-logout{
    border-radius: 18px;
    border: 1px solid rgba(239,68,68,.12);
    background: #fff;
    color: #b91c1c;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
  }
}

@media (min-width: 1024px) and (max-width: 1220px){
  .acc-desktop-summary{
    grid-template-columns: 1fr;
  }

  .acc-view[data-view="favorites"] #favoritesList{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acc-view[data-view="orders"] .orders,
  .acc-view[data-view="delivery"] .acc-delivery-list,
  .acc-view[data-view="settings"] .acc-info{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px){
  .acc-desktop-wrap{
    display: block;
  }

  .acc-desk-head{
    display: none !important;
  }

  .acc-rail-kpi,
  .acc-rail-nav{
    display: none;
  }
}


/* Premium reviews */
.reviews-list--separated{
  position: relative;
  margin-top: 18px;
  padding-top: 18px;
}

.reviews-list--separated::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.34) 16%, rgba(203,213,225,.88) 50%, rgba(148,163,184,.34) 84%, rgba(148,163,184,0));
}

#btnMoreReviews,
#btnMoreReviewsD{
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98));
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

#btnMoreReviews:hover,
#btnMoreReviewsD:hover{
  border-color: rgba(37,99,235,.16);
  background: #fff;
}

#btnMoreReviewsD{
  width: 100%;
}

.review-sheet .sheet-back{
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(10px);
}

.review-sheet__panel{
  background:
    radial-gradient(circle at top right, rgba(191,219,254,.36), rgba(255,255,255,0) 28%),
    radial-gradient(circle at top left, rgba(254,240,138,.30), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.99));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 28px 80px rgba(15,23,42,.20);
}

.review-sheet__handle{
  background: rgba(15,23,42,.16);
}

.review-sheet__head{
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.56));
}

.review-sheet__head h3{
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.review-sheet__eyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(37,99,235,.78);
}

.review-sheet__body{
  padding: 18px 20px 20px;
}

.review-sheet__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.review-sheet__stars{
  gap: 12px;
}

.review-sheet__stars .rstar{
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.review-sheet__stars .rstar.active,
.review-sheet__stars .rstar[aria-checked="true"]{
  border-color: rgba(245,158,11,.42);
  background: linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,237,213,.95));
  box-shadow: 0 16px 34px rgba(245,158,11,.16);
}

.review-sheet__field{
  display:block;
  margin-top: 4px;
}

.review-sheet__field-label{
  display:block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
}

.review-sheet__textarea{
  min-height: 150px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 26px rgba(15,23,42,.04);
  padding: 15px 16px;
}

.review-sheet__textarea::placeholder{
  color: rgba(100,116,139,.88);
}

.review-sheet__submit{
  width: 100%;
  height: 48px;
  min-height: 48px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 16px 36px rgba(91,108,255,.24);
}

.review-sheet__submit:hover{
  filter: brightness(1.03);
}

.review-sheet__hint{
  text-align: center;
}

@media (hover: hover) and (pointer: fine){
  .review-sheet__panel{
    width: min(620px, calc(100vw - 48px));
    border-radius: 30px;
  }
}

.pdp-chip--measure{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:14px;font-size:13px;font-weight:900;color:rgba(15,23,42,.86);border:1px solid rgba(15,23,42,.08);background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.96));box-shadow:0 10px 24px rgba(15,23,42,.06);text-decoration:none;} .pdp-chip--measure:hover{background:#fff;border-color:rgba(37,99,235,.16);}

.review-meta-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 2px;
}

.review-head-side{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  flex: 0 0 auto;
}

.review .r-stars{
  gap:3px;
}

.review .r-stars .s{
  font-size: 13px;
}

.review-actions__menu{
  z-index: 24;
}

.reviews-list,
.pdp-reviews-d{
  overflow: visible;
}

/* Product page unified standard */
.page-product{
  --pdp-space-1: 4px;
  --pdp-space-2: 8px;
  --pdp-space-3: 12px;
  --pdp-space-4: 16px;
}

.page-product .home-section__title,
.page-product .sheet-head__title{
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,.96) !important;
}

.page-product .home-section__title,
.page-product .sheet-head__title,
.page-product .pdp-section-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
}

.page-product .home-section__title i,
.page-product .sheet-head__title i,
.page-product .pdp-section-title i{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
}

.page-product .home-section__title span,
.page-product .sheet-head__title span,
.page-product .pdp-section-title span{
  min-width: 0;
}

.page-product .pdp-section-title--product i,
.page-product .sheet-head__title i[data-lucide="shopping-bag"],
.page-product .sheet-head__title i[data-lucide="ruler"]{
  color: rgba(15,23,42,.58) !important;
}

.page-product .pdp-section-title--new i{
  color: #15803d !important;
}

.page-product .pdp-section-title--reviews i,
.page-product .review-sheet__head .sheet-head__title i{
  color: #d97706 !important;
  fill: rgba(245,158,11,.14);
}

.page-product .pdp-pad,
.page-product .home-section,
.page-product .sheet-body{
  padding: var(--pdp-space-4) !important;
}

.page-product .pdp-reviews-d .pdp-pad{
  padding: var(--pdp-space-4) !important;
}

.page-product .pdp-title,
.page-product .home-section__head,
.page-product .pdp-reviews-head,
.page-product #reviewsSection .row.between,
.page-product .sheet-head{
  align-items: center !important;
  margin-bottom: var(--pdp-space-3) !important;
  padding-bottom: var(--pdp-space-3) !important;
  border-bottom: 1px solid rgba(148,163,184,.22) !important;
}

.page-product .pdp-title > *,
.page-product .home-section__head > *,
.page-product .pdp-reviews-head > *,
.page-product #reviewsSection .row.between > *,
.page-product .sheet-head > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-product .pdp-title + .pdp-divider{
  display: none !important;
}
.page-product .pdp-divider,
.page-product .divider{
  margin: var(--pdp-space-3) 0 !important;
}

.page-product .pdp-reviews-d #reviewsSubD,
.page-product #reviewsSection #reviewsSub{
  display: block;
  margin-top: var(--pdp-space-1) !important;
  line-height: 1.35 !important;
}

.page-product .pdp-newarrivals{
  padding: var(--pdp-space-4) !important;
}

.page-product .pdp-new-d .pdp-new-head,
.page-product .pdp-newarrivals .home-section__head{
  padding: 0 !important;
  margin-bottom: var(--pdp-space-2) !important;
}

.page-product .pdp-newarrivals .pdp-carousel,
.page-product .pdp-newarrivals .recos,
.page-product .pdp-reviews-d .reviews-list,
.page-product #reviewsSection .reviews-list{
  margin-top: 0 !important;
}

.page-product .pdp-newarrivals .pdp-carousel,
.page-product .pdp-newarrivals .recos{
  padding: 0 0 var(--pdp-space-1) !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

.page-product .pdp-newarrivals .pdp-carousel .product-card,
.page-product .pdp-newarrivals .recos .product-card{
  margin-top: 0 !important;
}

.page-product .sheet-head{
  padding: 10px var(--pdp-space-4) !important;
}


/* Storefront unified block spacing */
:root{
  --store-block-gap: 16px;
}

@media (max-width: 520px){
  :root{
    --store-block-gap: 12px;
  }
}

.home-main,
.shop-main,
.page-product .wrap,
.page-account .acc-main{
  display: flex;
  flex-direction: column;
  gap: var(--store-block-gap) !important;
}

.page-product .pdp-grid,
.page-product .pdp-leftcol-d,
.page-product .pdp-rightcol-d,
.acc-desktop-summary,
.acc-desktop-wrap,
.shop-grid,
.recos,
.pdp-carousel,
.pdp-newarrivals .recos,
.pdp-newarrivals .pdp-carousel,
.home-groups,
.home-news,
.page-account .acc-view[data-view="orders"] .orders,
.page-account .acc-view[data-view="settings"] .acc-info,
.page-account .acc-view[data-view="delivery"] .acc-delivery-list,
.page-account .acc-view[data-view="favorites"] #favoritesList,
.page-account .acc-view[data-view="bonuses"] .acc-bgrid{
  gap: var(--store-block-gap) !important;
}

.home-main > *,
.shop-main > *,
.page-product .wrap > *,
.page-product .pdp-leftcol-d > *,
.page-product .pdp-rightcol-d > *,
.page-account .acc-main > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-product .section,
.page-product .card + .card,
.page-product .pdp-card,
.home-section,
.page-account .acc-card,
.page-account .acc-view,
.page-account .acc-desktop-summary{
  margin-top: 0 !important;
}

.page-product .pdp-newarrivals .pdp-carousel,
.page-product .pdp-newarrivals .recos,
.page-product .pdp-reviews-d .reviews-list,
.page-product #reviewsSection .reviews-list,
.home-groups,
.home-news{
  margin-top: 0 !important;
}

.pdp-carousel,
.pdp-newarrivals .recos,
.pdp-newarrivals .pdp-carousel,
.page-home .home-section.pdp-newarrivals .pdp-carousel{
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

.page-account .acc-main > .acc-divider{
  margin: 0 !important;
}

.page-product .pdp-newarrivals .home-section__head,
.page-product .pdp-reviews-head,
.page-product .pdp-title,
.page-home .home-section__head,
.page-account .acc-modal-head,
.page-account .sheet-head{
  margin-bottom: var(--store-block-gap) !important;
}

.shop-filterbtn.is-active{
  border-color: rgba(22,163,74,.18);
  background: linear-gradient(180deg, rgba(240,253,244,.98), rgba(220,252,231,.92));
  color: #166534;
  box-shadow: 0 16px 30px rgba(34,197,94,.12);
}

/* Account page aligned with catalog visual language */
body.page-account.acc{
  --acc-bg: #ffffff;
  --acc-surface: #ffffff;
  --acc-card: #ffffff;
  --acc-text: #0f172a;
  --acc-muted: #64748b;
  --acc-stroke: rgba(15,23,42,.08);
  --acc-shadow: 0 16px 34px rgba(15,23,42,.06);
  background: #ffffff;
  color: var(--acc-text);
}

body.page-account .app-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  margin: 0 0 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.page-account .app-header__title{
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.02em;
}

body.page-account .app-header__meta{
  color: rgba(15,23,42,.52);
}

body.page-account .acc-desktop-wrap{
  max-width: 1120px;
  margin: 0 auto;
  gap: 16px;
  align-items: start;
  align-content: start;
}

body.page-account .acc-head,
body.page-account .acc-desktop-summary,
body.page-account .acc-card,
body.page-account .acc-logout{
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 16px 36px rgba(15,23,42,.06);
}

body.page-account .acc-head::before,
body.page-account .acc-head::after{
  display: none;
}

body.page-account .acc-headrow{
  align-items: center;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

body.page-account .acc-rail-profile{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: none;
}

body.page-account .acc-rail-profile:hover{
  border-color: rgba(91,108,255,.18);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

body.page-account .acc-rail-profile__avatar{
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 10px 22px rgba(91,108,255,.16);
}

body.page-account .acc-rail-nav{
  gap: 8px;
}

body.page-account .acc-rail-item{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: none;
}

body.page-account .acc-rail-item:hover{
  border-color: rgba(91,108,255,.18);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
  transform: translateX(1px);
}

body.page-account .acc-rail-item.is-active{
  background: rgba(91,108,255,.08);
  border-color: rgba(91,108,255,.18);
  box-shadow: inset 0 0 0 1px rgba(91,108,255,.05);
}

body.page-account .acc-rail-item.is-active::before{
  display: none;
}

body.page-account .acc-rail-itemIco{
  background: rgba(91,108,255,.08);
  border-color: rgba(91,108,255,.10);
  color: var(--brand1);
}

body.page-account .acc-main{
  display: grid;
  gap: 16px;
  align-content: start;
}

body.page-account .acc-main > *{
  margin: 0 !important;
}

body.page-account .acc-divider{
  display: flex;
  align-items: center;
  min-height: 28px;
}

body.page-account .acc-divider::before{
  top: auto;
  bottom: 0;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.28) 16%, rgba(203,213,225,.72) 50%, rgba(148,163,184,.28) 84%, rgba(148,163,184,0));
}

body.page-account .acc-divider span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 0;
  background: #ffffff;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: none;
  color: #0f172a;
}

body.page-account .acc-divider span i{
  width: 17px;
  height: 17px;
  color: var(--brand1);
  flex: 0 0 auto;
}

body.page-account .acc-sectionhead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.page-account .acc-sectionhead--stack{
  justify-content: flex-start;
}

body.page-account .acc-sectioncopy{
  min-width: 0;
}

body.page-account .acc-sectiontitle{
  font-size: 18px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0f172a;
}

body.page-account .acc-sectionhint{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--acc-muted);
}

body.page-account .acc-sectiontools{
  flex: 0 0 auto;
}

body.page-account .acc-desktop-summary{
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

body.page-account .acc-desktop-summary__eyebrow{
  background: rgba(91,108,255,.08);
  color: var(--brand1);
}

body.page-account .acc-desktop-summary__title{
  max-width: 13ch;
}

body.page-account .acc-desktop-stat{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

body.page-account .acc-desktop-chip{
  border-color: rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

body.page-account .acc-desktop-chip:hover{
  border-color: rgba(91,108,255,.18);
  background: #ffffff;
}

body.page-account .acc-desktop-chip svg{
  color: var(--brand1);
}

body.page-account .acc-view.acc-bonus{
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.page-account .acc-view.acc-bonus .acc-bonusLabel{
  background: rgba(91,108,255,.08);
  color: var(--brand1);
}

body.page-account .acc-view[data-view="orders"] .order,
body.page-account .acc-view[data-view="delivery"] .acc-delivery-item,
body.page-account .acc-view[data-view="settings"] .acc-row{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

body.page-account .acc-view[data-view="orders"] .order:hover{
  border-color: rgba(91,108,255,.18);
}

body.page-account .acc-note,
body.page-account .favorite-empty,
body.page-account .acc-delivery-empty{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  background: #f8fafc;
}

@media (min-width: 1024px){
  body.page-account .acc-desktop-wrap{
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    padding: calc(var(--shop-topbar-height, 74px) + 12px) 16px calc(28px + var(--safe-bottom, 0px));
  }

  body.page-account .acc-head{
    position: sticky;
    top: calc(var(--shop-topbar-height, 74px) + 12px);
    align-self: start;
  }

  body.page-account .acc-container.acc-main{
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 1023px){
  body.page-account .acc-desktop-wrap{
    display: block;
    padding-top: calc(var(--shop-topbar-height, 74px) + 10px);
    padding-bottom: calc(18px + var(--safe-bottom, 0px));
  }

  body.page-account .acc-head{
    margin: 0 16px 14px;
    padding: 0;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    overflow: hidden;
  }

  body.page-account .acc-head .acc-container{
    padding: 0 16px;
  }

  body.page-account .acc-headrow{
    padding: 16px 0 14px;
  }

  body.page-account .acc-container.acc-main{
    padding: 0 16px;
  }

  body.page-account .acc-main{
    padding-top: 0;
    padding-bottom: calc(108px + var(--safe-bottom, 0px));
  }

  body.page-account .acc-card,
  body.page-account .acc-desktop-summary,
  body.page-account .acc-logout{
    border-radius: 24px;
  }

  body.page-account .acc-divider span{
    font-size: 16px;
  }

  body.page-account .acc-sectiontitle{
    font-size: 16px;
  }

  body.page-account .acc-main > .acc-divider[data-view-target="overview"]{
    display: none;
  }

  body.page-account .acc-main > .acc-view[data-view]:not([data-view="overview"]),
  body.page-account .acc-main > .acc-divider[data-view-target]:not([data-view-target="overview"]),
  body.page-account .acc-main > .acc-logout[data-view-target]{
    display: none !important;
  }

  body.page-account .acc-main > .acc-desktop-summary.acc-view[data-view="overview"]{
    display: block;
    margin-bottom: 12px;
    padding: 18px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    background:
      radial-gradient(circle at top right, rgba(191,219,254,.55), rgba(255,255,255,0) 38%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 32px rgba(15,23,42,.06);
  }

  body.page-account .acc-desktop-summary__hero{
    gap: 8px;
  }

  body.page-account .acc-desktop-summary__eyebrow{
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(91,108,255,.09);
    color: var(--brand1);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  body.page-account .acc-desktop-summary__title{
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 900;
    color: #0f172a;
  }

  body.page-account .acc-desktop-summary__text{
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.52;
    color: #64748b;
  }

  body.page-account .acc-overview-bonus{
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 20px;
  }

  body.page-account .acc-overview-bonus__value{
    font-size: 24px;
  }

  body.page-account .acc-overview-bonus__hint{
    font-size: 11px;
  }

  body.page-account .acc-desktop-summary__stats{
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.page-account .acc-desktop-stat{
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.08);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15,23,42,.04);
  }

  body.page-account .acc-desktop-stat__label{
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
  }

  body.page-account .acc-desktop-stat__value{
    margin-top: 8px;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 900;
    color: #0f172a;
  }

  body.page-account .acc-desktop-stat__hint{
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
  }

  body.page-account .acc-desktop-summary__actions{
    display: none;
  }

  body.page-account .acc-overview-tools{
    margin-top: 14px;
    display: grid;
    gap: 10px;
  }

  body.page-account .acc-overview-tool{
    border-radius: 20px;
    padding: 14px;
  }

  body.page-account .acc-overview-tool__title{
    font-size: 14px;
  }

  body.page-account .acc-overview-tool__text{
    font-size: 12px;
  }

  body.page-account .acc-overview-tool__icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  body.page-account .acc-overview-tool__icon svg{
    width: 18px;
    height: 18px;
  }

  body.page-account .acc-module-sheet__panel{
    height: calc(100vh - var(--safe-top, 0px) - var(--shop-topbar-height, 74px) - 15px);
    max-height: calc(100vh - var(--safe-top, 0px) - var(--shop-topbar-height, 74px) - 15px);
    border-radius: 24px 24px 0 0;
    background:
      radial-gradient(circle at top right, rgba(191,219,254,.52), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.99));
    border-top: 1px solid rgba(255,255,255,.76);
  }

  body.page-account .acc-module-sheet__head{
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    background: transparent;
  }

  body.page-account .acc-module-sheet__body{
    padding: 14px 14px 16px;
  }

  body.page-account .acc-module-sheet__body > .acc-view{
    display: block !important;
    margin: 0;
  }

  body.page-account .acc-module-sheet__body > .acc-card,
  body.page-account .acc-module-sheet__body > .acc-bonus{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.page-account .acc-module-sheet__body .acc-pad{
    padding: 0;
  }

  body.page-account .acc-module-sheet__body .acc-divider,
  body.page-account .acc-module-anchor{
    display: none !important;
  }

  body.page-account .acc-module-sheet__body .order,
  body.page-account .acc-module-sheet__body .acc-history-item{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.page-account .acc-module-sheet__body .order,
  body.page-account .acc-module-sheet__body .acc-history-item{
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
  }

  body.page-account .acc-module-sheet__body .orders > :last-child,
  body.page-account .acc-module-sheet__body .acc-history-list > :last-child{
    border-bottom: 0 !important;
  }

  body.page-account .acc-module-sheet__body .orders,
  body.page-account .acc-module-sheet__body .acc-history-list{
    gap: 0 !important;
  }

  body.page-account .acc-module-sheet__body .acc-sectionhead{
    margin-bottom: 10px;
  }

  body.page-account .acc-module-sheet[data-module-key="bonuses"] .acc-bonusTop,
  body.page-account .acc-module-sheet[data-module-key="bonuses"] .acc-bgrid{
    display: none !important;
  }

  body.page-account .acc-module-sheet[data-module-key="bonuses"] .acc-view[data-view="bonuses"]{
    border: 0;
    background: transparent;
    color: #0f172a;
    box-shadow: none;
  }

  body.page-account .acc-module-sheet[data-module-key="bonuses"] .acc-history-block{
    margin-top: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (min-width: 1024px){
  body.page-account .acc-module-sheet{
    display: none !important;
  }

  body.page-account .acc-overview-bonus{
    display: none;
  }
}

/* Account modules: overview tools, tabs, bonus history, children */
body.page-account .acc-overview-bonus{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(91,108,255,.16);
  background:
    radial-gradient(circle at top right, rgba(191,219,254,.60), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, rgba(91,108,255,.12), rgba(91,108,255,.06));
  box-shadow: 0 10px 24px rgba(91,108,255,.12);
}

body.page-account .acc-overview-bonus__copy{
  min-width: 0;
  display: grid;
  gap: 4px;
}

body.page-account .acc-overview-bonus__label{
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(37,99,235,.82);
}

body.page-account .acc-overview-bonus__value{
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #0f172a;
}

body.page-account .acc-overview-bonus__hint{
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}

body.page-account .acc-overview-bonus__qr{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(37,99,235,.18);
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(37,99,235,.26);
}

body.page-account .acc-overview-bonus__qr svg{
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px){
  body.page-account .acc-overview-bonus{
    display: none !important;
  }
}

body.page-account .acc-overview-tools{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

body.page-account .acc-overview-actions{
  margin-top: var(--store-block-gap);
}

body.page-account .acc-overview-actions .acc-pad{
  padding: 0;
}

body.page-account .acc-overview-actions-grid{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-account .acc-overview-actions .acc-desktop-chip{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  text-align: left;
  color: #0f172a;
  min-height: 62px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

body.page-account .acc-overview-actions .acc-desktop-chip > span:first-child{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(91,108,255,.10);
  color: var(--brand1);
}

body.page-account .acc-overview-actions .acc-desktop-chip > span:last-child{
  min-width: 0;
  display: block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

body.page-account .acc-overview-actions .acc-desktop-chip::after{
  content: "›";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: #94a3b8;
  flex: 0 0 auto;
}

body.page-account .acc-overview-actions .acc-desktop-chip:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(91,108,255,.22);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
  color: var(--brand1);
}

body.page-account .acc-overview-actions .acc-desktop-chip svg{
  width: 18px;
  height: 18px;
  color: var(--brand1);
}

body.page-account .acc-overview-tool{
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  color: var(--acc-text);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.page-account .acc-overview-tool:hover{
  transform: translateY(-1px);
  border-color: rgba(91,108,255,.18);
  box-shadow: 0 16px 32px rgba(15,23,42,.06);
}

body.page-account .acc-overview-tool__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(91,108,255,.08);
  color: var(--brand1);
}

body.page-account .acc-overview-tool__icon svg{
  width: 20px;
  height: 20px;
}

body.page-account .acc-overview-tool__copy{
  min-width: 0;
  display: grid;
  gap: 4px;
}

body.page-account .acc-overview-tool__title{
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

body.page-account .acc-overview-tool__text{
  font-size: 12px;
  line-height: 1.5;
  color: var(--acc-muted);
}

body.page-account .acc-history-block{
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

body.page-account .acc-history-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.page-account .acc-history-title{
  font-size: 17px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0f172a;
}

body.page-account .acc-history-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acc-muted);
}

body.page-account .acc-history-list{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

body.page-account .acc-history-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.07);
  background: #ffffff;
}

body.page-account .acc-history-item__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  flex: 0 0 auto;
}

body.page-account .acc-history-item__icon svg{
  width: 18px;
  height: 18px;
}

body.page-account .acc-history-item__body{
  min-width: 0;
  flex: 1 1 auto;
}

body.page-account .acc-history-item__title{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 850;
  color: #0f172a;
}

body.page-account .acc-history-item__meta{
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--acc-muted);
}

body.page-account .acc-history-item__value{
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--brand1);
}

body.page-account .acc-badge--soft{
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  border: 1px solid rgba(91,108,255,.1);
}

body.page-account .acc-inline-tabs{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

body.page-account .acc-inline-tab{
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

body.page-account .acc-inline-tab span{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.06);
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

body.page-account .acc-inline-tab:hover{
  border-color: rgba(91,108,255,.18);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

body.page-account .acc-inline-tab.is-active{
  border-color: rgba(91,108,255,.18);
  background: rgba(91,108,255,.08);
  color: var(--brand1);
}

body.page-account .acc-inline-tab.is-active span{
  background: rgba(91,108,255,.14);
}

body.page-account .acc-emptybox{
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px dashed rgba(148,163,184,.44);
  background: #f8fafc;
  color: var(--acc-muted);
  font-size: 13px;
  line-height: 1.55;
}

body.page-account .acc-emptybox--children{
  display: grid;
  gap: 12px;
  justify-items: start;
}

body.page-account .acc-emptybox__title{
  font-size: 16px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

body.page-account .acc-emptybox__text{
  max-width: 56ch;
}

body.page-account .acc-children-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.page-account .acc-children-list{
  display: grid;
  gap: 12px;
}

body.page-account .acc-child-card{
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

body.page-account .acc-child-card__top{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

body.page-account .acc-child-card__avatar{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(91,108,255,.16), rgba(91,108,255,.07));
  color: var(--brand1);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
}

body.page-account .acc-child-card__copy{
  min-width: 0;
  flex: 1 1 auto;
}

body.page-account .acc-child-card__name{
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0f172a;
}

body.page-account .acc-child-card__meta{
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acc-muted);
}

body.page-account .acc-child-card__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

body.page-account .acc-child-card__actions form{
  margin: 0;
}

body.page-account .acc-child-card__facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.page-account .acc-child-pill{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

body.page-account .acc-child-pill svg{
  width: 14px;
  height: 14px;
  color: var(--brand1);
}

body.page-account .acc-child-card__note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

body.page-account .acc-icbtn--soft{
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  border-color: rgba(91,108,255,.12);
}

body.page-account .acc-icbtn--danger{
  background: rgba(239,68,68,.08);
  color: #dc2626;
  border-color: rgba(239,68,68,.12);
}

body.page-account .acc-icbtn--soft:hover,
body.page-account .acc-icbtn--danger:hover{
  transform: translateY(-1px);
}

body.page-account #orderTabEmpty{
  margin-top: 12px;
}

body.page-account #childNote{
  min-height: 112px;
  resize: vertical;
}

@media (max-width: 1023px){
  body.page-account .acc-overview-tools{
    grid-template-columns: 1fr;
  }

  body.page-account .acc-overview-actions-grid{
    grid-template-columns: 1fr;
  }

  body.page-account .acc-overview-tool,
  body.page-account .acc-history-block,
  body.page-account .acc-child-card{
    border-radius: 22px;
  }

  body.page-account .acc-history-head,
  body.page-account .acc-sectionhead{
    gap: 10px;
  }

  body.page-account .acc-inline-tabs{
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.page-account .acc-inline-tabs::-webkit-scrollbar{
    display: none;
  }
}

/* Order details page */
body.page-order{
  background: #ffffff;
}

.page-order .order-page{
  display: grid;
  gap: 16px;
  padding-bottom: calc(120px + var(--safe-bottom, 0px));
}

.page-order .order-hero-card,
.page-order .order-info-card,
.page-order .order-items-card{
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 16px 36px rgba(15,23,42,.06);
}

.page-order .order-hero{
  display: grid;
  gap: 18px;
}

.page-order .order-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.page-order .order-hero__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-order .order-hero__copy{
  min-width: 0;
}

.page-order .order-hero__number{
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 950;
  color: #0f172a;
}

.page-order .order-hero__date{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
  font-weight: 800;
}

.page-order .order-hero__sumwrap{
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 10px;
  flex: 0 0 auto;
}

.page-order .order-hero__sum{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.05em;
  color: #0f172a;
}

.page-order .order-hero__status{
  margin-top: 0 !important;
}

.page-order .order-meta-grid,
.page-order .order-delivery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-order .order-meta-card{
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  min-width: 0;
}

.page-order .order-meta-label{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.page-order .order-meta-value{
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -.02em;
  color: #0f172a;
  word-break: break-word;
}

.page-order .order-meta-note{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.page-order .order-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-order .order-danger-btn{
  border-color: rgba(239,68,68,.16);
  color: #dc2626;
  background: rgba(254,242,242,.96);
}

.page-order .order-danger-btn:hover{
  background: rgba(254,226,226,.96);
}

.page-order .order-sectionhead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.page-order .order-sectiontitle{
  font-size: 20px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #0f172a;
}

.page-order .order-sectionhint{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 800;
}

.page-order .order-sectioncount{
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  font-size: 13px;
  font-weight: 900;
}

.page-order .order-lines{
  display: grid;
  gap: 12px;
}

.page-order .order-line{
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.page-order .order-line__media{
  width: 78px;
  height: 78px;
  border-radius: 20px;
  overflow: hidden;
  background: #f8fafc;
}

.page-order .order-line__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-order .order-line__body{
  min-width: 0;
}

.page-order .order-line__title{
  font-size: 15px;
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

.page-order .order-line__meta,
.page-order .order-line__qty{
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 800;
}

.page-order .order-line__meta{
  margin-top: 5px;
}

.page-order .order-line__qty{
  margin-top: 8px;
}

.page-order .order-line__sum{
  text-align: right;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
  white-space: nowrap;
}

.page-order .order-totalbar{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #475569;
  font-weight: 850;
}

.page-order .order-totalbar strong{
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
}

.page-order .order-empty{
  padding: 18px;
  border-radius: 20px;
  border: 1px dashed rgba(148,163,184,.44);
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.page-order #orderActionError{
  margin-top: 14px;
}

@media (max-width: 1023px){
  .page-order .order-meta-grid,
  .page-order .order-delivery-grid{
    grid-template-columns: 1fr;
  }

  .page-order .order-hero__head,
  .page-order .order-sectionhead{
    flex-direction: column;
    align-items: stretch;
  }

  .page-order .order-hero__sumwrap{
    justify-items: start;
    text-align: left;
  }

  .page-order .order-line{
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .page-order .order-line__media{
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .page-order .order-line__sum{
    grid-column: 2;
    text-align: left;
    margin-top: 8px;
  }
}

/* Order details page refinements */
.page-order .order-page{
  max-width: 1120px;
  margin: 0 auto;
}

.page-order .order-hero-card{
  position: relative;
  overflow: hidden;
}

.page-order .order-hero-card::before{
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 168px;
  background:
    radial-gradient(circle at top right, rgba(91,108,255,.12), transparent 44%),
    radial-gradient(circle at top left, rgba(99,102,241,.08), transparent 38%);
  pointer-events: none;
}

.page-order .order-hero,
.page-order .order-info-card .pad,
.page-order .order-items-card .pad{
  position: relative;
  z-index: 1;
}

.page-order .order-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-order .order-chip{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.84);
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-order .order-chip svg{
  width: 14px;
  height: 14px;
  color: var(--brand1);
}

.page-order .order-chip--status{
  color: var(--brand1);
  background: rgba(91,108,255,.09);
  border-color: rgba(91,108,255,.14);
}

.page-order .order-note-card{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.95));
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.page-order .order-note-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,108,255,.08);
  color: var(--brand1);
  flex: 0 0 auto;
}

.page-order .order-note-card__icon svg{
  width: 18px;
  height: 18px;
}

.page-order .order-note-card__body{
  min-width: 0;
}

.page-order .order-note-card__title{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

.page-order .order-note-card__text{
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.page-order .order-sectionbadge{
  max-width: min(420px, 100%);
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.page-order .order-sectionbadge svg{
  width: 16px;
  height: 16px;
  color: var(--brand1);
  flex: 0 0 auto;
}

.page-order .order-line__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.page-order .order-mini-chip{
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(15,23,42,.08);
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

.page-order .order-line__meta{
  opacity: .78;
}

@media (max-width: 1023px){
  .page-order .order-page{
    max-width: none;
  }

  .page-order .order-sectionbadge{
    max-width: none;
  }
}

@media (max-width: 767px){
  .page-order .wrap.order-page{
    padding-bottom: calc(138px + var(--safe-bottom, 0px));
  }

  .page-order .order-page{
    gap: 12px;
  }

  .page-order .order-hero-card,
  .page-order .order-info-card,
  .page-order .order-items-card{
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
  }

  .page-order .order-hero-card::before{
    height: 124px;
    background:
      radial-gradient(circle at top right, rgba(91,108,255,.10), transparent 42%),
      radial-gradient(circle at top left, rgba(99,102,241,.06), transparent 36%);
  }

  .page-order .order-hero,
  .page-order .order-info-card .pad,
  .page-order .order-items-card .pad{
    padding: 16px !important;
  }

  .page-order .order-hero{
    gap: 14px;
  }

  .page-order .order-hero__eyebrow{
    min-height: 28px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .page-order .order-hero__number{
    font-size: 28px;
    line-height: 1;
  }

  .page-order .order-hero__date{
    margin-top: 6px;
    font-size: 12px;
  }

  .page-order .order-hero__chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-top: 12px;
    scrollbar-width: none;
  }

  .page-order .order-hero__chips::-webkit-scrollbar{
    display: none;
  }

  .page-order .order-chip{
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 32px;
    padding: 0 11px;
    font-size: 11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-order .order-hero__sum{
    font-size: 28px;
  }

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

  .page-order .order-meta-grid .order-meta-card:last-child{
    grid-column: 1 / -1;
  }

  .page-order .order-meta-card{
    padding: 14px;
    border-radius: 20px;
  }

  .page-order .order-meta-label{
    font-size: 10px;
  }

  .page-order .order-meta-value{
    margin-top: 7px;
    font-size: 14px;
  }

  .page-order .order-meta-note{
    margin-top: 5px;
    font-size: 11px;
  }

  .page-order .order-note-card{
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
  }

  .page-order .order-note-card__icon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .page-order .order-note-card__title{
    font-size: 13px;
  }

  .page-order .order-note-card__text{
    margin-top: 4px;
    font-size: 12px;
  }

  .page-order .order-actions{
    position: sticky;
    bottom: calc(12px + var(--safe-bottom, 0px));
    z-index: 12;
    margin-top: 2px;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .page-order .order-actions .btn{
    width: 100%;
    justify-content: center;
  }

  .page-order .order-sectionhead{
    margin-bottom: 12px;
  }

  .page-order .order-sectiontitle{
    font-size: 18px;
  }

  .page-order .order-sectionhint{
    margin-top: 3px;
    font-size: 11px;
  }

  .page-order .order-sectionbadge{
    width: 100%;
    max-width: none;
    min-height: 38px;
    padding: 10px 12px;
    border-radius: 18px;
    font-size: 11px;
  }

  .page-order .order-sectioncount{
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .page-order .order-lines{
    gap: 10px;
  }

  .page-order .order-line{
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
  }

  .page-order .order-line__media{
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .page-order .order-line__title{
    font-size: 14px;
  }

  .page-order .order-line__badges{
    gap: 5px;
    margin-top: 7px;
  }

  .page-order .order-mini-chip{
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .page-order .order-line__meta,
  .page-order .order-line__qty{
    font-size: 11px;
  }

  .page-order .order-line__sum{
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(91,108,255,.08);
    color: var(--brand1);
    font-size: 14px;
  }

  .page-order .order-totalbar{
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
  }

  .page-order .order-totalbar strong{
    font-size: 22px;
  }

  .page-order .order-empty{
    padding: 16px;
    border-radius: 18px;
    font-size: 12px;
  }
}

/* Order details cleanup: less duplicate, cleaner mobile */
.page-order .order-meta-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-order .order-mini-chip--muted{
  background: rgba(248,250,252,.9);
  color: #64748b;
}

.page-order .order-line__badges{
  margin-top: 10px;
}

.page-order .order-line__qty{
  margin-top: 10px;
}

@media (max-width: 767px){
  .page-order .order-hero-card,
  .page-order .order-info-card,
  .page-order .order-items-card{
    border-radius: 22px;
  }

  .page-order .order-hero-card::before{
    height: 108px;
  }

  .page-order .order-meta-grid,
  .page-order .order-delivery-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-order .order-meta-grid .order-meta-card:last-child{
    grid-column: auto;
  }

  .page-order .order-meta-card{
    padding: 13px 14px;
  }

  .page-order .order-meta-label{
    font-size: 10px;
    letter-spacing: .07em;
  }

  .page-order .order-meta-value{
    font-size: 13px;
    line-height: 1.4;
  }

  .page-order .order-meta-note{
    font-size: 11px;
    line-height: 1.45;
  }

  .page-order .order-note-card{
    padding: 13px 14px;
    gap: 10px;
    border-radius: 18px;
  }

  .page-order .order-note-card__icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .page-order .order-note-card__title{
    font-size: 12px;
  }

  .page-order .order-note-card__text{
    font-size: 11px;
    line-height: 1.5;
  }

  .page-order .order-actions{
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15,23,42,.08);
  }

  .page-order .order-actions .btn{
    min-height: 44px;
    border-radius: 14px;
    font-size: 13px;
  }

  .page-order .order-sectionhead{
    margin-bottom: 10px;
  }

  .page-order .order-sectiontitle{
    font-size: 16px;
  }

  .page-order .order-line{
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
  }

  .page-order .order-line__media{
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .page-order .order-line__title{
    font-size: 13px;
    line-height: 1.28;
  }

  .page-order .order-line__badges{
    margin-top: 7px;
    gap: 4px;
  }

  .page-order .order-mini-chip{
    min-height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  .page-order .order-line__qty{
    margin-top: 7px;
    font-size: 11px;
  }

  .page-order .order-line__sum{
    min-height: 28px;
    padding: 0 9px;
    font-size: 13px;
  }

  .page-order .order-totalbar{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .page-order .order-totalbar strong{
    font-size: 20px;
  }
}

/* Order page redesign: cleaner minimal layout */
.page-order .order-page{
  max-width: 880px;
  gap: 14px;
}

.page-order .order-summary-card,
.page-order .order-block-card{
  border-radius: 26px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15,23,42,.05);
}

.page-order .order-summary,
.page-order .order-block-card .pad{
  padding: 20px !important;
}

.page-order .order-summary{
  display: grid;
  gap: 16px;
}

.page-order .order-summary__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-order .order-summary__label{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.page-order .order-summary__number{
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 950;
  color: #0f172a;
}

.page-order .order-summary__amount{
  flex: 0 0 auto;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.05em;
  color: #0f172a;
}

.page-order .order-summary__status{
  display: flex;
  align-items: center;
}

.page-order .order-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-order .order-facts--stack{
  grid-template-columns: 1fr;
}

.page-order .order-fact{
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: #f8fafc;
}

.page-order .order-fact__key{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.page-order .order-fact__value{
  font-size: 14px;
  line-height: 1.45;
  font-weight: 850;
  letter-spacing: -.02em;
  color: #0f172a;
  word-break: break-word;
}

.page-order .order-summary__note{
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.page-order .order-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-order .order-actions .btn{
  min-width: 220px;
}

.page-order .order-danger-btn{
  background: #fff5f5;
  border-color: rgba(239,68,68,.16);
  color: #dc2626;
}

.page-order .order-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.page-order .order-block__title{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0f172a;
}

.page-order .order-block__meta{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.page-order .order-items-list{
  display: grid;
  gap: 10px;
}

.page-order .order-item-row{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

.page-order .order-item-row__media{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
}

.page-order .order-item-row__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-order .order-item-row__body{
  min-width: 0;
}

.page-order .order-item-row__title{
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

.page-order .order-item-row__meta,
.page-order .order-item-row__qty{
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 800;
}

.page-order .order-item-row__meta{
  margin-top: 5px;
}

.page-order .order-item-row__qty{
  margin-top: 8px;
}

.page-order .order-item-row__sum{
  white-space: nowrap;
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
}

.page-order .order-totalbar{
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 14px;
  color: #475569;
  font-weight: 850;
}

.page-order .order-totalbar strong{
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
}

.page-order .order-empty{
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.42);
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.page-order #orderActionError{
  margin-top: 12px;
}

@media (max-width: 767px){
  .page-order .wrap.order-page{
    padding-bottom: calc(116px + var(--safe-bottom, 0px));
  }

  .page-order .order-page{
    gap: 12px;
  }

  .page-order .order-summary-card,
  .page-order .order-block-card{
    border-radius: 22px;
    box-shadow: 0 10px 22px rgba(15,23,42,.04);
  }

  .page-order .order-summary,
  .page-order .order-block-card .pad{
    padding: 16px !important;
  }

  .page-order .order-summary{
    gap: 14px;
  }

  .page-order .order-summary__top{
    align-items: flex-end;
    gap: 10px;
  }

  .page-order .order-summary__label{
    font-size: 10px;
  }

  .page-order .order-summary__number{
    margin-top: 4px;
    font-size: 24px;
  }

  .page-order .order-summary__amount{
    font-size: 24px;
  }

  .page-order .order-facts{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-order .order-fact{
    padding: 12px 13px;
    border-radius: 16px;
  }

  .page-order .order-fact__key{
    font-size: 10px;
  }

  .page-order .order-fact__value{
    font-size: 13px;
  }

  .page-order .order-summary__note{
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 12px;
  }

  .page-order .order-actions{
    flex-direction: column;
    gap: 8px;
  }

  .page-order .order-actions .btn{
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .page-order .order-block__head{
    margin-bottom: 12px;
  }

  .page-order .order-block__title{
    font-size: 16px;
  }

  .page-order .order-item-row{
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  .page-order .order-item-row__media{
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .page-order .order-item-row__title{
    font-size: 13px;
  }

  .page-order .order-item-row__meta,
  .page-order .order-item-row__qty{
    font-size: 11px;
  }

  .page-order .order-item-row__qty{
    margin-top: 6px;
  }

  .page-order .order-item-row__sum{
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
    font-size: 14px;
    color: var(--brand1);
  }

  .page-order .order-totalbar{
    margin-top: 10px;
    padding-top: 10px;
  }

  .page-order .order-totalbar strong{
    font-size: 21px;
  }
}

/* Order view v2 */
body.page-order .ordv-page{
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding-bottom: calc(126px + var(--safe-bottom, 0px));
}

body.page-order .ordv-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

body.page-order .ordv-summary,
body.page-order .ordv-block{
  padding: 20px;
}

body.page-order .ordv-summary{
  display: grid;
  gap: 16px;
}

body.page-order .ordv-summary__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

body.page-order .ordv-summary__copy{
  min-width: 0;
}

body.page-order .ordv-summary__kicker{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

body.page-order .ordv-summary__number{
  margin: 6px 0 0;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 950;
  color: #0f172a;
}

body.page-order .ordv-summary__date{
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
  font-weight: 800;
}

body.page-order .ordv-summary__amount{
  flex: 0 0 auto;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.05em;
  color: #0f172a;
}

body.page-order .ordv-summary__status{
  display: flex;
  align-items: center;
}

body.page-order .ordv-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-order .ordv-facts--stack{
  grid-template-columns: 1fr;
}

body.page-order .ordv-fact{
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
}

body.page-order .ordv-fact__key{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

body.page-order .ordv-fact__value{
  font-size: 14px;
  line-height: 1.45;
  font-weight: 850;
  letter-spacing: -.02em;
  color: #0f172a;
  word-break: break-word;
}

body.page-order .ordv-note{
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

body.page-order .ordv-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-order .ordv-actions .btn{
  min-width: 220px;
}

body.page-order .ordv-btn-danger{
  background: #fff5f5;
  border-color: rgba(239,68,68,.16);
  color: #dc2626;
}

body.page-order .ordv-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body.page-order .ordv-block__title{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0f172a;
}

body.page-order .ordv-block__count{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

body.page-order .ordv-items{
  display: grid;
  gap: 10px;
}

body.page-order .ordv-item{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #ffffff;
}

body.page-order .ordv-item__media{
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
}

body.page-order .ordv-item__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-order .ordv-item__body{
  min-width: 0;
}

body.page-order .ordv-item__title{
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
}

body.page-order .ordv-item__meta,
body.page-order .ordv-item__qty{
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 800;
}

body.page-order .ordv-item__meta{
  margin-top: 5px;
}

body.page-order .ordv-item__qty{
  margin-top: 8px;
}

body.page-order .ordv-item__sum{
  white-space: nowrap;
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
}

body.page-order .ordv-total{
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 14px;
  color: #475569;
  font-weight: 850;
}

body.page-order .ordv-total strong{
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
}

body.page-order .ordv-empty{
  padding: 16px;
  border: 1px dashed rgba(148,163,184,.42);
  border-radius: 18px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

body.page-order #orderActionError{
  margin-top: 12px;
}

@media (max-width: 767px){
  body.page-order .ordv-page{
    gap: 12px;
    padding-bottom: calc(116px + var(--safe-bottom, 0px));
  }

  body.page-order .ordv-card{
    border-radius: 20px;
    box-shadow: 0 10px 22px rgba(15,23,42,.04);
  }

  body.page-order .ordv-summary,
  body.page-order .ordv-block{
    padding: 16px;
  }

  body.page-order .ordv-summary{
    gap: 14px;
  }

  body.page-order .ordv-summary__top{
    gap: 10px;
    align-items: flex-end;
  }

  body.page-order .ordv-summary__kicker{
    font-size: 10px;
  }

  body.page-order .ordv-summary__number,
  body.page-order .ordv-summary__amount{
    font-size: 24px;
  }

  body.page-order .ordv-summary__date{
    font-size: 12px;
    margin-top: 6px;
  }

  body.page-order .ordv-facts{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.page-order .ordv-fact{
    padding: 12px 13px;
    border-radius: 16px;
  }

  body.page-order .ordv-fact__key{
    font-size: 10px;
  }

  body.page-order .ordv-fact__value{
    font-size: 13px;
  }

  body.page-order .ordv-note{
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 12px;
  }

  body.page-order .ordv-actions{
    flex-direction: column;
    gap: 8px;
  }

  body.page-order .ordv-actions .btn{
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.page-order .ordv-block__head{
    margin-bottom: 12px;
  }

  body.page-order .ordv-block__title{
    font-size: 16px;
  }

  body.page-order .ordv-item{
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  body.page-order .ordv-item__media{
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  body.page-order .ordv-item__title{
    font-size: 13px;
  }

  body.page-order .ordv-item__meta,
  body.page-order .ordv-item__qty{
    font-size: 11px;
  }

  body.page-order .ordv-item__qty{
    margin-top: 6px;
  }

  body.page-order .ordv-item__sum{
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
    font-size: 14px;
    color: var(--brand1);
  }

  body.page-order .ordv-total{
    margin-top: 10px;
    padding-top: 10px;
  }

  body.page-order .ordv-total strong{
    font-size: 21px;
  }
}
body.page-order .ordtrk-card{
  overflow:hidden;
}
body.page-order .ordtrk-shell{
  display:grid;
  gap:18px;
}
body.page-order .ordtrk-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
body.page-order .ordtrk-head__meta{
  margin-top:6px;
  color:#6b7280;
  font-size:13px;
  line-height:1.5;
}
body.page-order .ordtrk-refresh{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(17,24,39,.08);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  color:#111827;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
body.page-order .ordtrk-refresh:hover{
  transform:translateY(-1px);
  border-color:rgba(17,24,39,.14);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
body.page-order .ordtrk-refresh:disabled{
  opacity:.7;
  cursor:wait;
}
body.page-order .ordtrk-refresh.is-loading i,
body.page-order .ordtrk-refresh.is-loading svg{
  animation:ordtrkSpin .8s linear infinite;
}
body.page-order .ordtrk-loading{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
  border:1px solid rgba(17,24,39,.06);
  color:#475569;
  font-size:14px;
  font-weight:700;
}
body.page-order .ordtrk-loading__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 0 0 8px rgba(255,112,110,.12);
  animation:ordtrkPulse 1.1s ease-in-out infinite;
}
body.page-order .ordtrk-error{
  padding:14px 16px;
  border-radius:20px;
  background:#fff4f4;
  border:1px solid rgba(239,68,68,.14);
  color:#b42318;
  font-size:14px;
  font-weight:700;
}
body.page-order .ordtrk-body{
  display:grid;
  gap:18px;
}
body.page-order .ordtrk-overview{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:16px;
}
body.page-order .ordtrk-current,
body.page-order .ordtrk-summary{
  border:1px solid rgba(17,24,39,.06);
  border-radius:28px;
  background:#fff;
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
body.page-order .ordtrk-current{
  padding:22px 22px 20px;
  background:
    radial-gradient(circle at top right, rgba(255,112,110,.11), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
}
body.page-order .ordtrk-current__eyebrow{
  color:#6b7280;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.page-order .ordtrk-current__title{
  margin-top:10px;
  color:#111827;
  font-size:28px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.03em;
}
body.page-order .ordtrk-current__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.page-order .ordtrk-current__pill.is-new,
body.page-order .ordtrk-current__pill.is-packing{
  background:#fff8e7;
  color:#9a6700;
}
body.page-order .ordtrk-current__pill.is-sent{
  background:#eff6ff;
  color:#1d4ed8;
}
body.page-order .ordtrk-current__pill.is-delivered,
body.page-order .ordtrk-current__pill.is-closed{
  background:#eefbf2;
  color:#197a42;
}
body.page-order .ordtrk-current__pill.is-returned,
body.page-order .ordtrk-current__pill.is-cancelled{
  background:#fff3f2;
  color:#c2410c;
}
body.page-order .ordtrk-current__meta{
  margin-top:12px;
  color:#6b7280;
  font-size:14px;
  line-height:1.65;
}
body.page-order .ordtrk-summary{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0;
  overflow:hidden;
}
body.page-order .ordtrk-summary__item{
  padding:18px 18px 16px;
  min-height:96px;
  display:grid;
  align-content:start;
  gap:8px;
  border-right:1px solid rgba(17,24,39,.06);
  border-bottom:1px solid rgba(17,24,39,.06);
}
body.page-order .ordtrk-summary__item:nth-child(2n){
  border-right:none;
}
body.page-order .ordtrk-summary__item:nth-last-child(-n+2){
  border-bottom:none;
}
body.page-order .ordtrk-summary__label{
  color:#94a3b8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.page-order .ordtrk-summary__value{
  color:#111827;
  font-size:16px;
  line-height:1.45;
  font-weight:800;
}
body.page-order .ordtrk-milestones{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
body.page-order .ordtrk-step{
  position:relative;
  padding:16px 16px 15px;
  border-radius:22px;
  border:1px solid rgba(17,24,39,.06);
  background:#fbfbfd;
  display:grid;
  gap:10px;
}
body.page-order .ordtrk-step__top{
  display:flex;
  align-items:center;
  gap:10px;
}
body.page-order .ordtrk-step__dot{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #d1d5db;
  background:#fff;
}
body.page-order .ordtrk-step__title{
  color:#111827;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
}
body.page-order .ordtrk-step__desc{
  color:#6b7280;
  font-size:13px;
  line-height:1.55;
}
body.page-order .ordtrk-step.is-done{
  background:linear-gradient(180deg, #f7fcf8 0%, #ffffff 100%);
}
body.page-order .ordtrk-step.is-done .ordtrk-step__dot{
  border-color:#16a34a;
  background:#16a34a;
  box-shadow:0 0 0 5px rgba(22,163,74,.12);
}
body.page-order .ordtrk-step.is-current{
  border-color:rgba(255,112,110,.18);
  background:linear-gradient(180deg, rgba(255,112,110,.08), rgba(255,255,255,.98));
  box-shadow:0 16px 34px rgba(255,112,110,.12);
}
body.page-order .ordtrk-step.is-current .ordtrk-step__dot{
  border-color:var(--brand1);
  background:var(--brand1);
  box-shadow:0 0 0 6px rgba(255,112,110,.16);
}
body.page-order .ordtrk-timeline-wrap{
  border:1px solid rgba(17,24,39,.06);
  border-radius:28px;
  background:#fff;
  box-shadow:0 16px 34px rgba(15,23,42,.05);
  padding:20px 20px 10px;
}
body.page-order .ordtrk-timeline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
body.page-order .ordtrk-timeline-title{
  color:#111827;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.02em;
}
body.page-order .ordtrk-timeline-hint{
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
}
body.page-order .ordtrk-timeline{
  position:relative;
  display:grid;
  gap:12px;
  padding-top:4px;
}
body.page-order .ordtrk-event{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr);
  gap:14px;
  align-items:stretch;
}
body.page-order .ordtrk-event__line{
  position:relative;
  display:flex;
  justify-content:center;
}
body.page-order .ordtrk-event__line::after{
  content:"";
  position:absolute;
  top:20px;
  bottom:-18px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(148,163,184,.26);
}
body.page-order .ordtrk-event:last-child .ordtrk-event__line::after{
  display:none;
}
body.page-order .ordtrk-event__dot{
  position:relative;
  z-index:1;
  width:14px;
  height:14px;
  margin-top:16px;
  border-radius:50%;
  border:3px solid #fff;
  background:#cbd5e1;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}
body.page-order .ordtrk-event.is-order .ordtrk-event__dot,
body.page-order .ordtrk-event.is-system .ordtrk-event__dot{
  background:#94a3b8;
}
body.page-order .ordtrk-event.is-delivery .ordtrk-event__dot{
  background:#3b82f6;
}
body.page-order .ordtrk-event.is-payment .ordtrk-event__dot{
  background:#f59e0b;
}
body.page-order .ordtrk-event.is-current .ordtrk-event__dot{
  background:var(--brand1);
  box-shadow:0 0 0 7px rgba(255,112,110,.12);
}
body.page-order .ordtrk-event__body{
  padding:14px 16px 15px;
  border:1px solid rgba(17,24,39,.06);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,252,.98));
  box-shadow:0 14px 28px rgba(15,23,42,.05);
}
body.page-order .ordtrk-event.is-current .ordtrk-event__body{
  border-color:rgba(255,112,110,.18);
  background:
    radial-gradient(circle at top right, rgba(255,112,110,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,250,250,.98));
  box-shadow:0 18px 36px rgba(255,112,110,.1);
}
body.page-order .ordtrk-event__top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
body.page-order .ordtrk-event__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(17,24,39,.06);
  color:#475569;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.page-order .ordtrk-event.is-delivery .ordtrk-event__badge{
  background:#eef6ff;
  color:#1d4ed8;
  border-color:rgba(59,130,246,.12);
}
body.page-order .ordtrk-event.is-payment .ordtrk-event__badge{
  background:#fff8eb;
  color:#b45309;
  border-color:rgba(245,158,11,.16);
}
body.page-order .ordtrk-event.is-order .ordtrk-event__badge,
body.page-order .ordtrk-event.is-system .ordtrk-event__badge{
  background:#f8fafc;
  color:#475569;
}
body.page-order .ordtrk-event__badge--current{
  background:rgba(255,112,110,.1) !important;
  color:var(--brand1) !important;
  border-color:rgba(255,112,110,.16) !important;
}
body.page-order .ordtrk-event__time{
  margin-left:auto;
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
}
body.page-order .ordtrk-event__title{
  margin-top:10px;
  color:#111827;
  font-size:16px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.01em;
}
body.page-order .ordtrk-event__meta{
  margin-top:5px;
  color:#6b7280;
  font-size:13px;
  line-height:1.55;
}
body.page-order .ordtrk-empty{
  padding:8px 0 18px 38px;
  color:#6b7280;
  font-size:14px;
  line-height:1.6;
}
@keyframes ordtrkPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.15); opacity:.78; }
}
@keyframes ordtrkSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@media (max-width: 960px){
  body.page-order .ordtrk-overview{
    grid-template-columns:1fr;
  }
  body.page-order .ordtrk-milestones{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  body.page-order .ordtrk-shell{
    gap:12px;
  }
  body.page-order .ordtrk-head{
    flex-direction:column;
    align-items:stretch;
  }
  body.page-order .ordtrk-head__meta{
    margin-top:4px;
    font-size:12px;
  }
  body.page-order .ordtrk-refresh{
    width:100%;
    justify-content:center;
    min-height:42px;
    padding:9px 12px;
    font-size:12px;
  }
  body.page-order .ordtrk-current,
  body.page-order .ordtrk-summary,
  body.page-order .ordtrk-timeline-wrap{
    border-radius:20px;
  }
  body.page-order .ordtrk-current{
    padding:16px 16px 15px;
  }
  body.page-order .ordtrk-current__title{
    font-size:20px;
  }
  body.page-order .ordtrk-current__meta{
    margin-top:10px;
    font-size:12px;
    line-height:1.55;
  }
  body.page-order .ordtrk-summary{
    grid-template-columns:1fr;
  }
  body.page-order .ordtrk-summary__item{
    min-height:auto;
    padding:13px 14px 12px;
    border-right:none;
    gap:6px;
  }
  body.page-order .ordtrk-summary__item:nth-last-child(-n+2){
    border-bottom:1px solid rgba(17,24,39,.06);
  }
  body.page-order .ordtrk-summary__item:last-child{
    border-bottom:none;
  }
  body.page-order .ordtrk-summary__label{
    font-size:10px;
    letter-spacing:.1em;
  }
  body.page-order .ordtrk-summary__value{
    font-size:14px;
    line-height:1.4;
  }
  body.page-order .ordtrk-milestones{
    grid-template-columns:1fr;
    gap:10px;
  }
  body.page-order .ordtrk-step{
    border-radius:16px;
    padding:12px 12px 11px;
    gap:8px;
  }
  body.page-order .ordtrk-step__title{
    font-size:13px;
  }
  body.page-order .ordtrk-step__desc,
  body.page-order .ordtrk-event__meta,
  body.page-order .ordtrk-empty{
    font-size:12px;
  }
  body.page-order .ordtrk-timeline-wrap{
    padding:14px 14px 6px;
  }
  body.page-order .ordtrk-timeline-head{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
    margin-bottom:10px;
  }
  body.page-order .ordtrk-timeline-title{
    font-size:15px;
  }
  body.page-order .ordtrk-timeline-hint{
    font-size:11px;
  }
  body.page-order .ordtrk-timeline{
    gap:8px;
  }
  body.page-order .ordtrk-event{
    grid-template-columns:18px minmax(0, 1fr);
    gap:8px;
  }
  body.page-order .ordtrk-event__dot{
    width:10px;
    height:10px;
    margin-top:12px;
    border-width:2px;
  }
  body.page-order .ordtrk-event__line::after{
    top:16px;
    bottom:-12px;
  }
  body.page-order .ordtrk-event__body{
    padding:10px 11px 11px;
    border-radius:16px;
  }
  body.page-order .ordtrk-event__top{
    gap:5px;
  }
  body.page-order .ordtrk-event__badge{
    min-height:22px;
    padding:0 7px;
    font-size:9px;
    letter-spacing:.07em;
  }
  body.page-order .ordtrk-event__time{
    width:100%;
    margin-left:0;
    font-size:10px;
  }
  body.page-order .ordtrk-event__title{
    margin-top:7px;
    font-size:13px;
    line-height:1.35;
  }
  body.page-order .ordtrk-event__meta{
    margin-top:4px;
    font-size:11px;
    line-height:1.45;
  }
  body.page-order .ordtrk-empty{
    padding:4px 0 12px 26px;
  }
}

/* ===== FINAL OVERRIDES: HOME + HEADER ===== */
.home-group--fallback{
  background: linear-gradient(135deg, #eef4ff, #f8fafc 58%, #ecfeff);
}

.home-group__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.94), rgba(255,255,255,.42) 46%, rgba(255,255,255,0) 74%),
    linear-gradient(135deg, rgba(219,234,254,.92), rgba(191,219,254,.38) 52%, rgba(236,252,203,.54));
}

.home-group__placeholder i{
  width: 52px;
  height: 52px;
  color: rgba(37,99,235,.58);
}

.shop-topbar__mobilemenu{
  display: none;
  flex: 0 0 auto;
  position: relative;
}

.shop-topbar__mobilemenu > summary{
  list-style: none;
  cursor: pointer;
}

.shop-topbar__mobilemenu > summary::-webkit-details-marker{
  display: none;
}

.shop-topbar__mobiletrigger{
  transition: background 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiletrigger{
  background: #fff !important;
  border-color: rgba(91,108,255,.16) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.08) !important;
}

.shop-topbar__mobiledropdown{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
  box-shadow:
    0 28px 54px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.88);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 240;
}

.shop-topbar__mobilemenu[open] > .shop-topbar__mobiledropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.shop-topbar__mobilehead{
  display: grid;
  gap: 6px;
  padding: 2px 2px 14px;
}

.shop-topbar__mobileeyebrow{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(37,99,235,.72);
}

.shop-topbar__mobiletitle{
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(15,23,42,.96);
}

.shop-topbar__mobilemeta{
  color: rgba(15,23,42,.56);
  font-size: 12px;
  line-height: 1.55;
}

.shop-topbar__mobileprimary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 14px;
}

.shop-topbar__mobilepill{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.92);
  color: rgba(15,23,42,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.shop-topbar__mobilepill.is-active{
  color: rgba(15,23,42,.96);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.shop-topbar__mobilesection{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(226,232,240,.72);
}

.shop-topbar__mobilesectionhead{
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.shop-topbar__mobilesectiontitle{
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.94);
}

.shop-topbar__mobilesectionmeta{
  color: rgba(15,23,42,.52);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilegrid{
  display: grid;
  gap: 8px;
}

.shop-topbar__mobilecard{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.88);
  color: rgba(15,23,42,.92);
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(15,23,42,.05);
}

.shop-topbar__mobilecard i{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.90));
  color: #2563eb;
  box-shadow: 0 12px 24px rgba(37,99,235,.14);
}

.shop-topbar__mobilecardcopy{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-topbar__mobilecardtitle{
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
}

.shop-topbar__mobilecardmeta{
  color: rgba(15,23,42,.56);
  font-size: 11px;
  line-height: 1.45;
}

.shop-topbar__mobilecta{
  margin-top: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand1, #5b6cff), #7c8cff 52%, #4f46e5);
  box-shadow: 0 18px 32px rgba(91,108,255,.24);
}

@media (min-width: 901px){
  .app-header--catalog .shop-topbar__navmenu,
  .app-header--catalog .shop-topbar__profilemenu{
    position: relative;
  }

  .app-header--catalog .shop-topbar__navmenu::after,
  .app-header--catalog .shop-topbar__profilemenu::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 18px;
  }

  .app-header--catalog .shop-topbar__profilemenu::after{
    left: -6px;
    right: -6px;
  }

  .app-header--catalog .app-header__inner{
    gap: 16px;
  }

  .app-header--catalog .shop-topbar__actions{
    margin-left: 12px;
  }

  .app-header--catalog .shop-topbar__navdropdown{
    top: calc(100% + 10px) !important;
  }

  .app-header--catalog .shop-topbar__profiledropdown,
  body.page-home .app-header--catalog .shop-topbar__profiledropdown,
  body.page-account .app-header--catalog .shop-topbar__profiledropdown,
  body.page-offer .app-header--catalog .shop-topbar__profiledropdown,
  body.page-policy .app-header--catalog .shop-topbar__profiledropdown,
  body.page-catalog .app-header--catalog .shop-topbar__profiledropdown{
    top: calc(100% + 10px) !important;
  }
}

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

  .app-header--catalog .app-header__inner{
    gap: 10px;
  }

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

  .shop-topbar__actions{
    margin-left: auto;
  }
}

@media (max-width: 640px){
  .home-main{
    gap: 12px;
  }

  .home-hero{
    gap: 14px;
    padding: 20px 16px;
    border-radius: 22px;
  }

  .home-hero__title{
    max-width: 9ch;
    font-size: clamp(26px, 8.2vw, 34px);
  }

  .home-hero__text{
    font-size: 14px;
    line-height: 1.55;
  }

  .home-hero__spotlight-card{
    padding: 14px;
    border-radius: 18px;
  }

  .home-groups{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .home-group,
  .home-group:nth-child(6n + 1),
  .home-group:nth-child(6n + 2),
  .home-group:nth-child(6n + 3){
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 146px;
    padding: 14px 14px 16px;
    border-radius: 20px;
  }

  .home-group:nth-child(6n + 1){
    min-height: 162px;
  }

  .home-group__media{
    inset: 8px 8px 8px 42%;
    border-radius: 18px;
  }

  .home-group__media img{
    object-fit: contain;
    object-position: center center;
    padding: 10px;
    background:
      radial-gradient(circle at center, rgba(255,255,255,.26), rgba(255,255,255,0) 64%),
      linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.01));
    filter: saturate(1.04) brightness(.96);
    transform: none;
  }

  .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.72) 44%, rgba(15,23,42,.26) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 34%);
  }

  .home-group--fallback .home-group__overlay{
    background:
      linear-gradient(90deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.64) 46%, rgba(37,99,235,.20) 82%, rgba(15,23,42,0) 100%),
      radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%);
  }

  .home-group__title,
  .home-group:nth-child(6n + 1) .home-group__title{
    left: 14px;
    right: 44%;
    bottom: 15px;
    font-size: 16px;
    max-width: none;
  }

  .home-group:nth-child(6n + 1) .home-group__title{
    font-size: 18px;
  }

  .home-group__meta{
    top: 12px;
    left: 12px;
    right: auto;
    min-width: 36px;
    height: 24px;
    padding: 0 9px;
  }

  .home-group::after{
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
  }

  .home-group__placeholder{
    inset: 6px;
    border-radius: 16px;
  }

  .home-group__placeholder i{
    width: 46px;
    height: 46px;
  }
}
/* ===== CLASSIC HEADER REWORK LIVE FOOTER ===== */
.app-header--catalog,
body.page-home .app-header--catalog,
body.page-account .app-header--catalog,
body.page-offer .app-header--catalog,
body.page-policy .app-header--catalog,
body.page-catalog .app-header--catalog{
  position: sticky;
  top: 0;
  z-index: 140;
  padding: calc(8px + var(--safe-top, 0px)) 0 0;
  background: rgba(252,250,247,.96) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
}

.app-header--catalog .app-header__inner,
body.page-home .app-header--catalog .app-header__inner,
body.page-account .app-header--catalog .app-header__inner,
body.page-offer .app-header--catalog .app-header__inner,
body.page-policy .app-header--catalog .app-header__inner,
body.page-catalog .app-header--catalog .app-header__inner{
  max-width: 1180px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 20px 10px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.shop-topbar__brandmark{
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}

.shop-topbar__brandname{
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

.shop-topbar__brandmeta{
  color: #6b7280 !important;
  font-size: 12px !important;
}

.shop-topbar__branddot{
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

.shop-topbar__brandstatus{
  color: #94a3b8 !important;
}

.shop-topbar__nav{
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  gap: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__navlink,
.shop-topbar__navmenu > summary.shop-topbar__navlink{
  min-height: auto !important;
  padding: 12px 0 10px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.shop-topbar__navlink:hover,
.shop-topbar__navmenu:hover > summary.shop-topbar__navlink,
.shop-topbar__navlink.is-active,
.shop-topbar__navmenu[open] > .shop-topbar__navlink,
.shop-topbar__navmenu.is-active > .shop-topbar__navlink{
  color: #111827 !important;
  border-bottom-color: #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-topbar__navdropdown{
  top: calc(100% + 12px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(680px, calc(100vw - 56px)) !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 26px 56px rgba(15,23,42,.12) !important;
  transform: translate(-50%, -8px) !important;
}

.shop-topbar__navmenu[open] > .shop-topbar__navdropdown{
  transform: translate(-50%, 0) !important;
}

.shop-topbar__navdropdown::before{
  display: none !important;
}

.shop-topbar__navcard{
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
}

.shop-topbar__actions,
.app-header--catalog .app-header__actions{
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.app-header--catalog .app-iconbtn,
.app-header--catalog .shop-topbar__mobiletrigger,
.app-header--catalog .shop-topbar__profiletrigger,
.app-header--catalog .shop-cartbtn{
  min-height: 46px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  color: #111827 !important;
}

.shop-topbar__profiledropdown{
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 28px)) !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 52px rgba(15,23,42,.12) !important;
}

.shop-topbar__mobilemenu{
  display: none !important;
}

.shop-topbar__mobiledropdown{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 28px 60px rgba(15,23,42,.16) !important;
}

.shop-topbar__mobilepill{
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #334155 !important;
}

.shop-topbar__mobilepill.is-active{
  border-color: rgba(15,23,42,.18) !important;
  background: #f8fafc !important;
  color: #111827 !important;
}

.shop-topbar__mobilecard{
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: none !important;
}

.shop-topbar__mobilecta{
  border-radius: 16px !important;
  border: 1px solid #111827 !important;
  background: #111827 !important;
  box-shadow: none !important;
}

@media (max-width: 980px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 68px;
    padding: 0 14px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .shop-topbar__nav{
    display: none !important;
  }

  .shop-topbar__brandmark{
    width: 42px !important;
    height: 42px !important;
  }

  .shop-topbar__brandname{
    font-size: 16px !important;
  }

  .shop-topbar__brandmeta{
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-topbar__brandstatus,
  .shop-topbar__profilecopy,
  .shop-topbar__profilechev{
    display: none !important;
  }

  .shop-topbar__mobilemenu{
    display: block !important;
  }

  .shop-topbar__mobiletrigger,
  .shop-cartbtn,
  .shop-topbar__profiletrigger,
  .app-header--catalog .app-iconbtn{
    width: 44px;
    min-width: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center;
  }

  .shop-topbar__mobiledropdown{
    position: fixed !important;
    top: calc(var(--safe-top, 0px) + 74px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 88px)) !important;
    padding: 16px !important;
    overflow: auto;
  }

  .shop-topbar__mobileprimary,
  .shop-topbar__mobilegrid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .app-header--catalog .app-header__inner,
  body.page-home .app-header--catalog .app-header__inner,
  body.page-account .app-header--catalog .app-header__inner,
  body.page-offer .app-header--catalog .app-header__inner,
  body.page-policy .app-header--catalog .app-header__inner,
  body.page-catalog .app-header--catalog .app-header__inner{
    min-height: 64px;
    padding: 0 12px 8px;
  }

  .shop-topbar__brandname{
    font-size: 15px !important;
  }

  .shop-topbar__brandmeta{
    max-width: 140px;
  }

  .shop-topbar__mobiledropdown{
    top: calc(var(--safe-top, 0px) + 68px) !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 20px !important;
    max-height: calc(100dvh - (var(--safe-top, 0px) + 80px)) !important;
  }
}