@import url(../vendor/swiper/swiper-bundle.min.css);
@import url("variables.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
button, input { font-family: inherit; }
button { cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { width: min(var(--wrap), calc(100% - 32px)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The wrapper only groups header markup; without a box of its own the header can stick to the page. */
#header-root { display: contents; }
.site-header { position: sticky; top: 0; z-index: var(--z-header); }
/* In-page anchors (e.g. #about, #reviews) land below the sticky header. */
[id] { scroll-margin-top: calc(var(--header-top) + var(--header-nav) + 16px); }
.header-top {
  height: var(--header-top);
  background: var(--blue);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: 24px;
  color: #fff;
  position: relative;
  z-index: 3;
}
.logo { width: 156px; height: 64px; flex: none; display: block; }
.header-tools, .ship-btn { flex: none; }
.chev { width: 16px; height: 16px; flex: none; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.ship-btn, .icon-btn, .login-btn, .nav-link, .plain-btn {
  background: none; border: 0; color: inherit; padding: 0;
}
.ship-btn {
  display: flex; align-items: center; gap: 8px; color: #fff;
  font-size: 13px; white-space: nowrap; text-align: start;
}
.pin {
  width: 32px; height: 32px; border-radius: 50%; flex: none; padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.3);
}
.pin img { width: 100%; height: 100%; }
.ship-text { display: flex; flex-direction: column; line-height: 1.2; }
.ship-text b { font-size: 13px; font-weight: 600; }
.ship-line { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.ship-line .chev { width: 16px; height: 16px; }
.search-form { position: relative; flex: 1; max-width: 636px; padding-inline: 32px; }
.search-form input {
  width: 100%; height: 47px; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.3); color: #fff;
  padding-inline: 44px 16px; font-size: 16px;
}
.search-form input::placeholder { color: rgba(255, 255, 255, 0.9); }
.search-form .search-icon {
  position: absolute; inset-inline-start: 46px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: #fff; pointer-events: none;
}
.search-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); background: #fff;
  color: var(--ink); border-radius: 8px; box-shadow: var(--shadow); z-index: 30;
  max-height: 360px; overflow: auto;
}
.search-panel a, .search-empty { display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 14px; }
.search-panel a:hover { background: var(--primary-tint); }
.search-panel img { width: 42px; height: 42px; object-fit: contain; }
.search-empty { color: var(--muted); }
.header-tools { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; }
.lang-btn { color: #fff; font-size: 15px; display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.lang-btn .flag { width: 24px; height: 24px; border-radius: 50%; }
.lang-btn .chev { width: 16px; height: 16px; }
.lang-sep { width: 1px; height: 23px; background: rgba(255, 255, 255, 0.3); margin-inline: 4px 12px; }
.login-btn {
  height: 34px; min-width: 144px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid #fff; color: #fff; font-weight: 600; font-size: 13px; background: transparent;
}
.icon-btn { width: 26px; height: 26px; color: #fff; position: relative; display: grid; place-items: center; }
.icon-btn img { width: auto; height: 24px; max-width: 26px; object-fit: contain; }
.badge {
  position: absolute; top: -2px; inset-inline-start: -2px; min-width: 16px; height: 16px;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; padding-inline: 3px;
}
.header-nav {
  height: var(--header-nav); background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; padding-inline: 32px; gap: 0; position: relative; z-index: 2;
}
.nav-link {
  height: 50px; display: inline-flex; align-items: center; gap: 8px;
  padding-inline: 24px 0; font-size: 13px; font-weight: 600; color: #424242; position: relative;
}
.nav-link:hover { color: var(--primary-ink); }
.nav-link img { width: 20px; height: 20px; object-fit: contain; }
.nav-link.is-cat { color: var(--primary-ink); font-size: 15px; border-inline-end: 1px solid #e5e7eb; padding-inline: 0 24px; }
.nav-link.is-cat svg:first-child { order: -1; }
.nav-link .chev { width: 16px; height: 16px; transition: transform 0.2s; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ship-wrap > .nav-link { color: #000; }
.header-top :focus-visible { outline-color: #fff; }

.mobile-header { display: none; background: var(--blue); color: #fff; min-height: var(--header-mobile); }
.m-ship { width: 100%; height: 57px; display: flex; align-items: center; gap: 8px; padding-inline: 16px; font-size: 13px; font-weight: 600; color: #fff; background: none; border: 0; border-bottom: 1px solid #fff; }
.m-ship .chev { margin-inline-start: 23px; }
.m-row { height: 69px; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px; }
.menu-btn, .m-heart { width: 40px; height: 45px; color: #fff; background: none; border: 0; display: grid; place-items: center; flex: none; }
.m-heart { background: #fff; color: var(--primary-ink); border-radius: 6px; border: 1px solid #bdbdbd; }
.m-heart svg { width: 20px; height: 20px; }
.mobile-header .search-form { padding-inline: 0; max-width: none; }
.mobile-header .search-form .search-icon { inset-inline-start: 14px; }
.m-logo { width: 112px; height: 46px; flex: none; }
.m-logo img { width: 100%; height: 100%; object-fit: contain; }
.mobile-header .search-form input {
  height: 45px; background: #fff; color: #242424; border-radius: 6px; border: 1px solid #bdbdbd;
}
.mobile-header .search-form input::placeholder { color: #8a8a8a; }
.mobile-header .search-icon { color: #8d8d8d; }

.overlay { position: fixed; inset: 146px 0 0; background: rgba(0, 0, 0, 0.55); z-index: var(--z-overlay); }
.mega, .mega-sub, .mini-drop, .ship-panel, .drawer {
  background: #fff; color: var(--ink);
}
.mega, .mega-sub { z-index: var(--z-mega); }
.mini-drop, .ship-panel { z-index: 5; }
.mega, .mega-sub {
  position: fixed; top: 146px; width: min(278px, 88vw); max-height: calc(100vh - 146px); overflow: auto;
}
.mega { inset-inline-start: 0; }
.mega-sub {
  inset-inline-start: min(278px, 88vw); width: min(920px, calc(100vw - 278px));
  background: var(--page); padding: 24px 32px; border-end-end-radius: 8px;
}
.mega-sub h3 { margin: 0 0 20px; font-size: 20px; font-weight: 500; color: #242424; }
.mega-sub .sub-links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); justify-content: start; gap: 24px 64px; }
.mega-row, .sub-link, .drop-link, .drawer .acc-panel a, .acc-btn {
  width: 100%; background: none; border: 0; text-align: start; color: inherit;
}
.mega-row { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 12px 32px 12px 8px; font-size: 16px; color: #424242; }
.mega-row.is-open { background: var(--blue); color: #fff; font-weight: 600; }
.sub-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #424242; line-height: 16px; }
.sub-link:hover { color: var(--primary-ink); }
.sub-link .new { background: #f00; color: #fff; font-size: 12px; font-weight: 700; border-radius: 12px; padding: 4px 8px; line-height: 14px; }
.mini-drop, .ship-panel {
  position: absolute; top: calc(100% + 0px); min-width: 240px; border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow); padding: 8px 0;
}
.services-drop {
  position: absolute; top: 100%; inset-inline-start: 24px; width: min(920px, calc(100vw - 420px)); min-width: 307px;
  background: var(--page); box-shadow: none; border-radius: 0; border-end-end-radius: 8px;
  padding: 24px 28px 24px 0; display: flex; flex-direction: column; gap: 16px;
}
.services-drop[hidden] { display: none; }
.services-drop .drop-link { display: flex; align-items: center; gap: 12px; width: auto; padding: 0; font-size: 15px; font-weight: 400; color: #424242; }
.services-drop .drop-link:hover { background: none; color: var(--primary-ink); }
.services-drop img { width: 32px; height: 32px; object-fit: contain; }
.drop-link, .ship-panel button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 12px 16px; font-weight: 700; }
.drop-link:hover, .ship-panel button:hover { background: var(--primary-tint); }
.ship-wrap { position: relative; }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer); transform: translateX(110%);
  transition: transform 0.28s ease; overflow: auto; padding: 18px 16px 90px;
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.guest { font-size: 20px; font-weight: 800; }
a.login-btn { display: inline-flex; align-items: center; justify-content: center; }
.drawer-login { display: block; text-align: center; border: 1px solid var(--blue); color: var(--primary-ink); border-radius: 8px; padding: 12px; font-weight: 800; margin-bottom: 8px; }
.drawer-link, .acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 4px; background: none; border: 0; border-bottom: 1px solid #eee; color: inherit; font: inherit; font-weight: 700; font-size: 16px; text-align: start; }
.drawer-link span { font-weight: 400; color: var(--primary-ink); }
.acc-panel { display: none; padding: 4px 8px 8px; background: #F6FAF4; }
.acc-panel a { display: block; padding: 8px; font-size: 14px; }
.acc.is-open > .acc-panel { display: block; }
.drawer .acc > .acc-btn .chev { transition: transform 0.2s; }
.drawer .acc.is-open > .acc-btn .chev { transform: rotate(-90deg); }
.acc-panel .acc { padding-inline: 8px; }
.social-row { display: flex; gap: 10px; padding: 8px 0 16px; }
.social-row img, .pay-row img, .apps img { width: 36px; height: 36px; object-fit: contain; }

.hero-swiper { width: 100%; aspect-ratio: 1179 / 1098; background: var(--primary-tint-2); }
.hero-swiper .swiper-slide, .hero-swiper a, .hero-swiper picture { height: 100%; display: block; }
.hero-swiper img, .bleed img, .strip img, .mid-swiper img, .tile-swiper img, .offer-card img, .brand-card img {
  width: 100%; height: 100%; object-fit: cover;
}
.section { margin-top: var(--gap); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.link-all { color: var(--primary-ink); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.cat-slide { width: 92px; text-align: center; }
.cat-slide img { width: 78px; height: 78px; margin-inline: auto; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cat-slide span { display: block; margin-top: 8px; font-size: 12px; color: #666; line-height: 1.35; min-height: 32px; }
.mid-swiper, .tile-swiper, .product-swiper, .brand-swiper { position: relative; }
.mid-swiper { border-radius: 8px; overflow: hidden; }
.mid-swiper img { aspect-ratio: 1064 / 301; }
.tile-swiper img { aspect-ratio: 592 / 255; border-radius: 8px; }
.bleed { display: block; }
.bleed img { aspect-ratio: 1920 / 620; }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offer-card { display: block; border-radius: 8px; overflow: hidden; background: #fff; }
.offer-card img { aspect-ratio: 213 / 316; }
.product-card { background: #fff; border-radius: 8px; padding: 8px; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; }
.product-media { position: relative; height: 168px; }
.product-media img { width: 100%; height: 100%; object-fit: contain; }
.wish, .add {
  position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center;
}
.wish { top: 0; inset-inline-end: 0; background: #fff; color: var(--primary-ink); box-shadow: var(--shadow); }
.wish.is-on { background: #fdecef; }
.add { bottom: 0; inset-inline-start: 0; background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(106, 168, 79, 0.28); }
.wish svg, .add svg { width: 16px; height: 16px; }
.off {
  align-self: flex-start; background: var(--red); color: #fff; border-radius: 24px;
  font-size: 12px; font-weight: 800; padding: 2px 8px; margin-top: 6px;
}
.product-card h3 { margin: 6px 0; font-size: 12px; font-weight: 500; line-height: 1.45; min-height: 35px; }
.product-card h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prices { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.now { color: var(--red); font-weight: 800; font-size: 15px; }
.old { color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: line-through; }
.meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 22px; font-size: 12px; }
.express { background: var(--green); color: #fff; border-radius: 24px; padding: 1px 8px; font-weight: 800; }
.rate { color: #f5a623; font-weight: 700; }
.rate span { color: var(--muted); font-weight: 600; }
.brands-band { background: #2a095f; padding: 28px 0 36px; margin-top: var(--gap); }
.brands-band h2 { color: #fff; margin: 0 0 16px; font-size: 22px; }
.brand-swiper .swiper-slide { width: 150px; }
.brand-card { display: block; width: 100%; }
.brand-card img { width: 100%; height: auto; aspect-ratio: 588 / 960; border-radius: 8px; object-fit: cover; }
.brand-card span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.nav-host { position: relative; }
.nav-host > .slider-btn {
  width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #fff;
  border: 1px solid #bdbdbd; color: var(--primary-ink); top: 50%;
}
.nav-host > .slider-btn:after { font-size: 16px; font-weight: 400; }
.nav-host > .swiper-button-prev { right: -20px; left: auto; }
.nav-host > .swiper-button-next { left: -20px; right: auto; }
.nav-host.is-bleed > .swiper-button-prev { right: max(8px, calc(50% - 620px)); }
.nav-host.is-bleed > .swiper-button-next { left: max(8px, calc(50% - 620px)); }
[dir="rtl"] .nav-host > .swiper-button-prev:after { content: "next"; }
[dir="rtl"] .nav-host > .swiper-button-next:after { content: "prev"; }
.nav-host > .swiper-button-disabled { opacity: 0; pointer-events: none; }
.mid-swiper .swiper-pagination { bottom: 16px; text-align: start; padding-inline: 24px; }
.mid-swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: #000; opacity: 0.2; margin: 0 4px !important; }
.mid-swiper .swiper-pagination-bullet-active { width: 24px; border-radius: 8px; opacity: 0.7; }
.hero-swiper .swiper-pagination-bullet { width: 6px; height: 6px; background: #cfcfcf; opacity: 1; }
.hero-swiper .swiper-pagination-bullet-active { width: 18px; border-radius: 8px; background: #4d4d4d; }

.site-footer { background: #fff; margin-top: 52px; padding: 28px 0 0; color: #222; }
.footer-grid, .footer-cats { display: grid; gap: 22px; }
.footer-grid { grid-template-columns: 1fr; }
.site-footer h2 { margin: 0 0 10px; font-size: 16px; }
.site-footer a, .site-footer button.acc-btn { font-size: 14px; }
.foot-links { display: grid; gap: 8px; }
.foot-acc { border-bottom: 1px solid #eee; }
.apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.apps img { width: auto; height: 40px; }
.pay-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pay-row img { width: 40px; height: 27px; object-fit: contain; }
.legal-row { display: flex; gap: 8px; align-items: center; }
.legal-row img { height: 35px; width: auto; object-fit: contain; }
.footer-band { background: var(--primary-tint); padding: 24px 0; }
.footer-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.fb-brand { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #000; }
.fb-brand img { width: 148px; height: 61px; object-fit: contain; }
.fb-brand nav { display: flex; gap: 16px; margin-top: 8px; }
.fb-pay { display: flex; flex-direction: column; gap: 12px; }
.fb-pay h2 { margin: 0; font-size: 15px; font-weight: 500; }
.footer-cr { background: var(--primary-tint-2); padding: 16px; text-align: center; font-size: 12px; color: #242424; }
.follow { font-weight: 800; margin-bottom: 8px; }

.bottom-nav {
  display: none; position: fixed; inset-inline: 0; bottom: 0; height: var(--bottom-nav);
  background: #fff; z-index: var(--z-bottom-nav); box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: #666; position: relative; background: none; border: 0; font-family: inherit; }
.product-swiper .swiper-slide { height: auto; }
.foot-acc.is-open .acc-panel { display: grid; gap: 8px; }
.bottom-nav img { width: 22px; height: 22px; object-fit: contain; }
.bottom-nav .is-active { color: var(--primary-ink); }
.ask {
  position: fixed; inset-inline-start: 14px; bottom: 86px; z-index: var(--z-ask); width: 52px; height: 52px;
  border: 0; background: transparent; padding: 0;
}
.ask img { width: 52px; height: 52px; object-fit: contain; }
.cookie {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: var(--z-cookie); background: #fff;
  border-radius: 10px; box-shadow: var(--shadow); padding: 12px; display: flex; gap: 10px; align-items: center;
  font-size: 13px;
}
.cookie p { margin: 0; flex: 1; }
.cookie button { border-radius: 8px; padding: 8px 12px; font-weight: 800; }
.cookie .ok { background: var(--blue); color: #fff; border: 0; }
.cookie .no { background: #fff; color: var(--primary-ink); border: 1px solid var(--blue); }
.toast {
  position: fixed; inset-inline-start: 16px; bottom: 90px; z-index: var(--z-toast); background: #17324d; color: #fff;
  border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow); max-width: min(320px, calc(100% - 32px));
}
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; }
.modal {
  width: min(420px, 100%); background: #fff; border-radius: 12px; padding: 20px; position: relative;
}
.modal h2 { margin: 0 0 8px; font-size: 20px; }
.modal p { margin: 0 0 14px; color: #444; }
.modal .close-x { position: absolute; top: 10px; inset-inline-end: 10px; border: 0; background: none; font-size: 22px; }
.stack { display: grid; gap: 8px; }
.stack button, .primary {
  border: 0; background: var(--blue); color: #fff; border-radius: 8px; min-height: 44px; font-weight: 800;
}

.empty-cart, .demo-card {
  background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 14px;
}

/* Cart */
.cart-page { padding: 16px 0 48px; }
.cart-empty { background: #fff; border-radius: 10px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); padding: 56px 16px; text-align: center; }
.cart-empty svg { width: 80px; height: 80px; }
.cart-empty p { margin: 16px 0 24px; font-size: 15px; color: #000; }
.cart-cta { display: inline-flex; align-items: center; justify-content: center; width: min(330px, 100%); height: 50px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.cart-cta:hover { background: var(--primary-strong); }
.cart-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.cart-head h1 { margin: 0; font-size: 24px; font-weight: 400; color: #000; }
.cart-head span { font-size: 13px; color: #757575; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cart-main { display: grid; gap: 12px; }
.cart-ship, .cart-free, .cart-lines, .cart-box { background: #fff; border-radius: 10px; }
.cart-ship { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.cart-ship .pin { background: var(--blue); border-color: var(--blue); }
.cart-ship div { flex: 1; display: grid; }
.cart-ship small { font-size: 11px; color: #757575; }
.cart-ship strong { font-size: 14px; color: #242424; }
.cart-ship button { background: none; border: 1px solid var(--blue); border-radius: 6px; color: var(--primary-ink); font-size: 13px; font-weight: 600; height: 34px; padding: 0 16px; }
.cart-free { padding: 12px 16px; }
.cart-free p { margin: 0 0 8px; font-size: 13px; color: #424242; }
.cart-free b { color: var(--primary-ink); }
.cart-free i { display: block; height: 6px; border-radius: 6px; background: #e4f0d9 linear-gradient(var(--blue), var(--blue)) no-repeat right / var(--p) 100%; }
.cart-free.is-done p { color: #1d7a49; font-weight: 600; }
.cart-free.is-done i { background: var(--green); }
.cart-lines { overflow: hidden; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 16px; border-bottom: 1px solid #f0f0f0; }
.cart-line:last-child { border-bottom: 0; }
.cart-line-img img { width: 96px; height: 96px; object-fit: contain; border: 1px solid #f0f0f0; border-radius: 8px; }
.cart-line-info { min-width: 0; display: grid; gap: 6px; align-content: start; justify-items: start; }
.cart-line-brand { font-size: 12px; font-weight: 600; color: var(--primary-ink); }
.cart-line-info h2 { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: #242424; }
.cart-line-info h2 a:hover { color: var(--primary-ink); }
.cart-line-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-line-price .now { font-size: 15px; }
.cart-line-price .off { margin: 0; font-size: 11px; padding: 2px 8px; }
.cart-std { font-size: 11px; color: #757575; }
.cart-line-info .express { font-size: 11px; padding: 1px 8px; }
.cart-line-actions { display: flex; gap: 16px; margin-top: 4px; }
.cart-line-actions button { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: #757575; }
.cart-line-actions button:hover { color: var(--primary-ink); }
.cart-line-actions [data-line-remove]:hover { color: var(--red); }
.cart-line-actions svg { width: 16px; height: 16px; }
.cart-line-side { display: grid; justify-items: end; align-content: space-between; gap: 12px; }
.qty-step { display: inline-flex; align-items: center; height: 36px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.qty-step button { width: 36px; height: 100%; display: grid; place-items: center; border: 0; background: #fff; color: var(--primary-ink); font-size: 18px; padding: 0; }
.qty-step button:hover:not(:disabled) { background: var(--page); }
.qty-step button:disabled { color: #c4c4c4; cursor: not-allowed; }
.qty-step button svg { width: 18px; height: 18px; color: var(--red); }
.qty-step span { min-width: 32px; text-align: center; font-size: 14px; font-weight: 700; }
.cart-line-total { font-size: 15px; color: #242424; }
.cart-continue { justify-self: start; font-size: 13px; font-weight: 600; color: var(--primary-ink); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.cart-summary { display: grid; gap: 12px; position: sticky; top: 162px; }
.cart-box { padding: 16px; }
.cart-box h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #242424; }
.coupon-form { display: flex; gap: 8px; }
.coupon-form input { flex: 1; min-width: 0; height: 42px; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0 12px; font: inherit; font-size: 14px; text-transform: uppercase; }
.coupon-form input:focus { outline: 0; border-color: var(--blue); }
.coupon-form button { height: 42px; padding: 0 18px; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: var(--primary-ink); font-weight: 700; }
.coupon-msg { margin: 8px 0 0; font-size: 12px; color: var(--red); min-height: 0; }
.coupon-msg:empty { display: none; }
.coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 6px; background: #effaf4; font-size: 13px; color: #1d7a49; }
.coupon-on button { background: none; border: 0; color: var(--red); font-size: 12px; font-weight: 700; }
.cart-box dl { margin: 0; display: grid; gap: 10px; }
.cart-box dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #424242; }
.cart-box dd { margin: 0; font-weight: 600; white-space: nowrap; }
.cart-box .is-save dd { color: #1d7a49; }
.cart-box .free { color: #1d7a49; }
.cart-box .is-total { border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 4px; font-size: 15px; color: #000; }
.cart-box .is-total dt { font-weight: 700; }
.cart-box .is-total small { font-weight: 400; font-size: 11px; color: #757575; }
.cart-box .is-total dd { font-size: 18px; font-weight: 700; }
.cart-points { display: flex; align-items: center; gap: 6px; margin: 14px 0; font-size: 12px; color: var(--primary-ink); }
.cart-points img { width: 14px; height: 14px; }
.cart-checkout, .cart-bar button { width: 100%; height: 50px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.cart-checkout:hover, .cart-bar button:hover { background: var(--primary-strong); }
.cart-pay { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.cart-pay img { width: 40px; height: 27px; object-fit: contain; }
.cart-bar { display: none; }
.note { color: var(--muted); font-size: 13px; }
.demo-hero { display: grid; gap: 16px; }
.demo-hero img { width: min(320px, 100%); height: 280px; object-fit: contain; background: #fff; border-radius: 8px; margin-inline: auto; }
.empty-cart { text-align: center; padding: 40px 16px; }
.empty-cart a, .primary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 18px; background: var(--blue); color: #fff; border-radius: 8px; font-weight: 800; }

/* Product listing */
.plp { padding: 16px 0 48px; }
.plp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.plp-titlebar { display: flex; align-items: center; gap: 12px; }
.plp-titlebar h1 { margin: 0; font-size: 24px; font-weight: 400; color: #000; }
.plp-count { font-size: 13px; font-weight: 600; color: #757575; padding-inline-start: 12px; border-inline-start: 1px solid #e0e0e0; line-height: 28px; }
.plp-controls { display: flex; align-items: center; gap: 16px; }
.plp-sort { position: relative; }
.sort-btn { min-width: 92px; height: 34px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid #bdbdbd; border-radius: 4px; background: #fff; font-size: 13px; color: #424242; }
.sort-btn .chev { width: 14px; height: 14px; }
.sort-menu { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 30; min-width: 220px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); padding: 6px 0; }
.sort-menu [data-sort] { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 10px 16px; font-size: 13px; color: #424242; }
.sort-menu [data-sort]:hover { background: var(--page); }
.sort-menu [aria-selected="true"] { color: var(--primary-ink); font-weight: 700; }
.view-toggle { display: flex; gap: 8px; }
.view-toggle button { width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #bdbdbd; }
.view-toggle button[aria-pressed="true"] { color: var(--primary-ink); }
.view-toggle svg { width: 24px; height: 24px; }
.plp-chips-wrap { position: relative; margin-bottom: 16px; }
.plp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.plp-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); font-size: 13px; font-weight: 600; color: #424242; white-space: nowrap; }
.chip:hover { color: var(--primary-ink); }
.chip.is-on { border-color: var(--blue); color: var(--primary-ink); background: #eef6e8; }
.chip-express { color: #000; }
.chip-express.is-on { border-color: var(--green); background: #effaf4; color: #1d7a49; }
.chip-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.chip-ic svg { width: 13px; height: 13px; }
.chip-drop .chev { width: 14px; height: 14px; }
.chips-arrow { position: absolute; inset-inline-end: -20px; top: 2px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #bdbdbd; background: #fff; color: var(--primary-ink); display: grid; place-items: center; padding: 0; }
.chips-arrow svg { width: 16px; height: 16px; }
.plp-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 18px; align-items: start; }
.plp-filters { background: #fff; border-radius: 10px; overflow: hidden; }
.pf-clear-row { padding: 10px 16px; text-align: end; border-bottom: 1px solid #f0f0f0; }
.pf-clear-row button, .tag-clear { background: none; border: 0; padding: 0; color: var(--primary-ink); font-size: 13px; font-weight: 600; text-decoration: underline; }
.pf-group { border-bottom: 1px solid #f0f0f0; }
.pf-group:last-of-type { border-bottom: 0; }
.pf-head { width: 100%; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: none; border: 0; font-size: 15px; color: #424242; }
.pf-head i { width: 14px; height: 14px; position: relative; }
.pf-head i::before, .pf-head i::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: #424242; border-radius: 2px; }
.pf-head i::after { transform: rotate(90deg); transition: transform 0.2s; }
.pf-group.is-open { background: var(--page); }
.pf-group.is-open .pf-head { color: var(--primary-ink); font-weight: 600; }
.pf-group.is-open .pf-head i::before, .pf-group.is-open .pf-head i::after { background: var(--blue); }
.pf-group.is-open .pf-head i::after { transform: rotate(0); }
.pf-body { display: none; padding: 0 16px 16px; }
.pf-group.is-open .pf-body { display: block; }
.pf-checks { display: grid; gap: 12px; }
.pf-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #242424; cursor: pointer; }
.pf-check input { appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1px solid #9e9e9e; border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.pf-check input:checked { background: var(--blue); border-color: var(--blue); }
.pf-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pf-check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pf-check span { flex: 1; }
.pf-check em { font-style: normal; font-size: 11px; color: #424242; }
.pf-check.is-all span { color: var(--primary-ink); }
.pf-search { display: block; margin-bottom: 14px; position: relative; }
.pf-search input { width: 100%; height: 44px; border: 0; border-radius: 6px; background: #fff; padding-inline: 40px 12px; font: inherit; font-size: 14px; }
.pf-search::before { content: ""; position: absolute; inset-inline-start: 12px; top: 12px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.pf-all { margin-top: 14px; background: none; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--blue); color: var(--primary-ink); font-size: 13px; font-weight: 600; }
.pf-none { margin: 0; font-size: 13px; color: #757575; }
.pf-range-vals { display: flex; justify-content: space-between; font-size: 11px; color: #242424; margin-bottom: 8px; }
.pf-range-track { position: relative; height: 24px; }
.pf-range-track::before { content: ""; position: absolute; inset: 10px 10px auto; height: 4px; border-radius: 4px; background: var(--primary-tint-2); }
.pf-range-fill { position: absolute; top: 10px; height: 4px; background: var(--blue); border-radius: 4px; margin-inline: 10px; }
.pf-range-track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; height: 24px; }
.pf-range-track input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); cursor: grab; }
.pf-range-track input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); cursor: grab; }
.pf-range-track input::-moz-range-track { background: none; }
.plp-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tag { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--blue); background: #fff; color: var(--primary-ink); font-size: 12px; font-weight: 600; }
.tag span[aria-hidden] { font-size: 16px; line-height: 1; }
.plp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plp-grid .product-card h3 { min-height: 35px; }
.plp-grid.is-list { grid-template-columns: 1fr; }
.plp-grid.is-list .product-card { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 20px; align-items: start; }
.plp-grid.is-list .product-media { grid-row: 1 / span 5; }
.plp-grid.is-list .product-card h3 { font-size: 14px; min-height: 0; }
.plp-empty { background: #fff; border-radius: 10px; padding: 40px 16px; text-align: center; }
.plp-empty p { margin: 0 0 16px; color: #424242; }
.pager { display: flex; justify-content: center; margin-top: 32px; }
.pg { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 24px; padding: 6px 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.pg button, .pg-gap { min-width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; font-size: 13px; color: #424242; padding: 0; }
.pg button:hover:not(:disabled) { color: var(--primary-ink); }
.pg button.is-current { background: var(--blue); color: #fff; width: 24px; min-width: 24px; height: 24px; margin: 4px; }
.pg-arrow svg { width: 16px; height: 16px; }
.pg-arrow:disabled { color: #d0d0d0; }
.plp-fab, .sheet-back, .brand-modal[hidden] { display: none; }
.brand-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; }
.brand-modal-box { position: relative; z-index: 1; width: min(600px, 100%); max-height: 80vh; overflow: auto; background: #fff; border-radius: 10px; padding: 20px 16px 16px; display: grid; gap: 20px; }
.brand-modal .primary { height: 50px; border: 0; border-radius: 6px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.sheet-back:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--z-sheet-back); background: rgba(0, 0, 0, 0.5); }
.brand-modal:not([hidden]) ~ .sheet-back, .sheet-back:not([hidden]) { display: block; }

/* Single product */
.m-pdp-row { display: none; }
.pdp { padding: 16px 0 0; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #757575; margin-bottom: 16px; }
.crumbs span { color: #424242; }
.crumbs .chev { width: 12px; height: 12px; }
.pdp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.pdp-main, .pdp-box { background: #fff; border-radius: 10px; }
.pdp-main { display: grid; grid-template-columns: 404px minmax(0, 1fr); gap: 39px; padding: 16px; }
.pdp-gallery { position: relative; min-width: 0; }
.pdp-actions { position: absolute; inset-inline-end: 0; top: 0; z-index: 3; display: grid; gap: 8px; }
.pdp-act { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blue); background: #fff; display: grid; place-items: center; padding: 2px; }
.pdp-act img { width: 20px; height: 20px; }
.pdp-act[data-share] img { width: 16px; height: 16px; }
.pdp-act.is-on { background: var(--primary-tint); }
.pdp-swiper img { width: 100%; height: 400px; object-fit: contain; }
.pdp-swiper .swiper-pagination { display: none; }
.pdp-thumbs { margin-top: 13px; position: relative; }
.pdp-thumbs .swiper-slide { width: 78px; height: 78px; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; cursor: pointer; }
.pdp-thumbs .swiper-slide-thumb-active { border-color: var(--blue); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs .slider-btn { width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); border: 1px solid #bdbdbd; color: var(--primary-ink); }
.pdp-thumbs .slider-btn:after { font-size: 14px; }
.pdp-thumbs .swiper-button-disabled { opacity: 0; }
.pdp-info { min-width: 0; }
.pdp-brand { display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary-ink); text-decoration: underline; text-underline-offset: 4px; margin-bottom: 10px; }
.pdp-title { margin: 0 0 16px; font-size: 20px; font-weight: 400; line-height: 30px; color: #242424; }
.pdp-price { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.pdp-price .now { display: inline-flex; align-items: center; gap: 4px; font-size: 24px; font-weight: 600; color: #ea264d; }
.pdp-price .sar { width: 15px; height: 17px; }
.pdp-price .old { font-size: 17px; font-weight: 600; color: #6b7280; text-decoration: line-through; }
.pdp-off { display: inline-flex; align-items: center; gap: 4px; background: #ea264d; color: #fff; border-radius: 24px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.pdp-off img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.pdp-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.pdp-points { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--blue); border-radius: 24px; padding: 4px 4px 4px 8px; font-size: 11px; font-weight: 700; color: var(--primary-ink); }
.pdp-points img, .pdp-rate img { width: 12px; height: 12px; }
.pdp-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #757575; }
.pdp-details { border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 16px 16px; }
.pdp-details .acc-btn { border: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; font-size: 15px; font-weight: 600; color: var(--primary-ink); }
.pdp-details .acc-btn .chev { width: 24px; height: 24px; color: #757575; transition: transform 0.3s; }
.pdp-details:not(.is-open) .acc-btn .chev { transform: rotate(180deg); }
.pdp-details .acc-panel { background: none; padding: 0; }
.pdp-details ul { margin: 0 0 12px; padding-inline-start: 18px; font-size: 13px; line-height: 20px; color: #424242; display: grid; gap: 8px; }
.pdp-details li b { font-weight: 700; }
.pdp-details .acc-panel .pdp-more { display: inline-block; padding: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--primary-ink); border-bottom: 2px solid var(--blue); }
.pdp-side { display: grid; gap: 16px; }
.pdp-buy { padding: 16px; }
.pdp-ship { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; font-size: 13px; font-weight: 600; color: #424242; }
.pdp-ship > span:first-child { flex: 1; }
.pdp-tip { background: none; border: 0; padding: 0; width: 20px; height: 20px; }
.pdp-tip img { width: 20px; height: 16px; object-fit: contain; }
.pdp-add { width: 100%; height: 50px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; position: relative; }
.pdp-add img { position: absolute; inset-inline-end: 16px; width: 20px; height: 20px; }
.pdp-add:hover { background: var(--primary-strong); }
.pdp-features { list-style: none; margin: 0; padding: 0; }
.pdp-features li { display: flex; align-items: center; gap: 12px; height: 57px; padding: 0 16px; border-bottom: 1px solid #f0f0f0; }
.pdp-features li:last-child { border-bottom: 0; }
.pdp-features img { width: 32px; height: 24px; object-fit: contain; }
.pdp-features p { margin: 0; font-size: 13px; font-weight: 600; color: #474747; }
.pdp-help { display: flex; align-items: center; gap: 12px; padding: 16px; font-size: 13px; color: #424242; }
.pdp-help img { width: 16px; height: 20px; object-fit: contain; }
.pdp-help p { margin: 0; flex: 1; display: grid; }
.pdp-help .chev { width: 20px; height: 20px; color: #424242; }
.pdp-about, .pdp-reviews { margin-top: 48px; }
.pdp-about h2, .pdp-reviews > h2 { margin: 0 0 16px; font-size: 24px; font-weight: 400; color: #000; }
.pdp-desc { padding: 24px; font-size: 13px; line-height: 1.6; color: #242424; }
.pdp-desc h3 { font-size: 13px; font-weight: 700; margin: 24px 0 8px; }
.pdp-desc p { margin: 0 0 12px; }
.pdp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.pdp-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.pdp-video .play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 12px; background: #f00; }
.pdp-video .play::after { content: ""; position: absolute; inset: 14px auto auto 27px; border: 10px solid transparent; border-inline-start: 0; border-left: 17px solid #fff; }
.rev-card { overflow: hidden; }
.rev-summary { display: flex; align-items: flex-start; gap: 32px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.rev-score { display: flex; align-items: center; gap: 8px; }
.rev-score b { font-size: 20px; font-weight: 700; }
.rev-score img { width: 24px; height: 24px; }
.rev-mobile { display: none; }
.rev-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rev-bars li { display: grid; grid-template-columns: 12px 410px 50px; align-items: center; gap: 12px; font-size: 11px; color: #424242; }
.rev-bars i { height: 8px; border-radius: 8px; background: #e6e6e6 linear-gradient(#fbb935, #fbb935) no-repeat right / var(--w) 100%; }
.rev-bars em { font-style: normal; color: #757575; }
.rev-write { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; height: 50px; padding: 0 32px; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: var(--primary-ink); font-size: 16px; font-weight: 600; }
.rev-all { margin: 0; padding: 24px 0 0; background: var(--page); font-size: 20px; font-weight: 400; }
.rev-item { padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.rev-item h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rev-item .tag { width: 16px; height: 8px; border-radius: 8px; background: #e7f6f2; }
.rev-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; margin-bottom: 8px; }
.rev-item p { margin: 0; font-size: 13px; }
.stars { --rate: 0; width: 120px; height: 24px; display: inline-block;
  background: linear-gradient(to left, #f39c3c calc(var(--rate) / 5 * 100%), #bdbdbd 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat-x; }
.rev-more { padding: 24px 0; text-align: center; }
.rev-more button { background: none; border: 0; border-bottom: 2px solid var(--blue); padding: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--primary-ink); }
.pdp-sticky { display: none; }

/* Login */
.is-login { background: var(--page); }
.is-login::before { content: ""; position: absolute; inset: 0 0 auto; height: 647px; background: var(--blue); z-index: -1; }
.auth-header { height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px; color: #fff; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; justify-self: start; }
.auth-back svg { width: 24px; height: 24px; }
.auth-logo img { width: 170px; height: 70px; object-fit: contain; }
.auth-mark { height: 44px; width: auto; }
.auth-tools { justify-self: end; display: flex; align-items: center; gap: 24px; }
.auth-help { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 11px; line-height: 1.4; max-width: 245px; }
.auth-help span { display: grid; }
.auth-help strong { font-size: 11px; }
.auth-help img { width: 16px; height: 20px; filter: brightness(0) invert(1); }
.auth-help .chev { width: 18px; height: 18px; }
.auth-main { display: grid; justify-items: center; padding: 184px 16px 120px; }
.auth-card { width: min(442px, 100%); background: #fff; border-radius: 8px; padding: 24px 24px 40px; }
.auth-step h1 { margin: 0 0 16px; font-size: 24px; font-weight: 400; color: #242424; }
.auth-sub { margin: 0 0 12px; font-size: 13px; color: #242424; }
.auth-sub b, .auth-sub bdi { font-weight: 700; }
.phone-field { display: flex; align-items: center; height: 52px; border: 1px solid #bdbdbd; border-radius: 6px; background: #fff; }
.phone-field:focus-within { border-color: var(--blue); }
.phone-field.is-error { border-color: var(--red); }
.cc { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-inline-end: 1px solid #e0e0e0; height: 28px; }
.cc .flag { width: 32px; height: 32px; border-radius: 50%; }
.cc-text { font-size: 14px; color: #242424; padding-left: 24px; }
.cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font: inherit; }
.cc:focus-within { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.cc .chev { position: absolute; inset-inline-end: 16px; width: 16px; height: 16px; pointer-events: none; color: #242424; }
.phone-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0 16px; font: inherit; font-size: 14px; direction: ltr; text-align: right; }
.phone-field input:focus { outline: 0; }
.phone-field input::placeholder { color: #9e9e9e; }
.auth-error { margin: 8px 0 0; font-size: 12px; color: var(--red); }
.auth-error:empty { display: none; }
.auth-submit { width: 100%; height: 50px; margin-top: 24px; border: 0; border-radius: 6px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.auth-submit:disabled { background: #757575; color: #bdbdbd; cursor: not-allowed; }
.auth-remember { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 13px; color: #242424; cursor: pointer; }
.auth-remember input { width: 20px; height: 20px; accent-color: #1a73e8; margin: 0; }
.auth-step-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; background: none; border: 0; padding: 0; color: var(--primary-ink); font-size: 13px; font-weight: 600; }
.auth-step-back svg { width: 20px; height: 20px; }
.otp { display: flex; gap: 12px; direction: ltr; justify-content: center; margin-top: 8px; }
.otp input { width: 56px; height: 56px; border: 1px solid #bdbdbd; border-radius: 8px; text-align: center; font: inherit; font-size: 22px; font-weight: 700; }
.otp input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(106, 168, 79, 0.15); }
.otp input.is-error { border-color: var(--red); animation: otp-shake 0.3s; }
@keyframes otp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.auth-demo { margin: 16px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--page); font-size: 12px; color: #424242; }
.auth-resend { margin: 16px 0 0; text-align: center; font-size: 13px; color: #757575; }
.auth-resend button { background: none; border: 0; padding: 0; color: var(--primary-ink); font-weight: 700; text-decoration: underline; }
.auth-done { text-align: center; }
.auth-done svg { width: 56px; height: 56px; margin-bottom: 12px; }

/* Wishlist */
.wish-page { padding: 16px 0 48px; }
.wish-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.wish-head > div { display: flex; align-items: baseline; gap: 8px; }
.wish-head h1 { margin: 0; font-size: 24px; font-weight: 400; color: #000; }
.wish-head span { font-size: 13px; color: #757575; }
.wish-tools { display: flex; gap: 12px; }
.wish-all, .wish-clear { height: 40px; padding: 0 18px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.wish-all { border: 0; background: var(--blue); color: #fff; }
.wish-clear { border: 1px solid #e0e0e0; background: #fff; color: #424242; }
.wish-clear:hover { border-color: var(--red); color: var(--red); }
.wish-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: #eef6e8; font-size: 13px; color: #242424; }
.wish-note p { margin: 0; }
.wish-note a { flex: none; font-weight: 700; color: var(--primary-ink); border-bottom: 2px solid var(--blue); }
.wish-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.wish-card .wish.is-on { color: var(--red); background: #fdecef; }
.wish-card .meta { margin-bottom: 10px; }
.wish-add { margin-top: auto; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: var(--primary-ink); font-size: 13px; font-weight: 700; }
.wish-add svg { width: 14px; height: 14px; }
.wish-add:hover { background: var(--blue); color: #fff; }

/* Forms and buttons (account, checkout) */
.btn-primary, .btn-ghost { height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-primary { border: 0; background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { border: 1px solid #e0e0e0; background: #fff; color: #424242; }
.btn-ghost:hover { border-color: var(--blue); color: var(--primary-ink); }
.is-danger { color: var(--red) !important; }
.btn-ghost.is-danger:hover { border-color: var(--red); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.f-field { display: grid; gap: 6px; font-size: 13px; color: #424242; }
.f-field.is-wide { grid-column: 1 / -1; }
.f-field small, .f-chips small { color: #9e9e9e; font-weight: 400; }
.f-field input, .f-field select { height: 44px; border: 1px solid #d6d6d6; border-radius: 6px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: #242424; }
.f-field input:focus, .f-field select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(106, 168, 79, 0.12); }
.f-field input[readonly] { background: var(--page); color: #757575; }
.f-field .is-invalid { border-color: var(--red); }
.f-err { font-style: normal; font-size: 12px; color: var(--red); }
.f-err:empty { display: none; }
.f-hint { font-style: normal; font-size: 11px; color: #9e9e9e; }
.f-chips { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips legend { font-size: 13px; color: #424242; margin-bottom: 8px; padding: 0; }
.f-chips label { cursor: pointer; }
.f-chips input { position: absolute; opacity: 0; }
.f-chips span { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid #d6d6d6; border-radius: 18px; font-size: 13px; background: #fff; }
.f-chips input:checked + span { border-color: var(--blue); background: #eef6e8; color: var(--primary-ink); font-weight: 700; }
.f-chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.f-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; cursor: pointer; }
.f-check input { width: 18px; height: 18px; accent-color: var(--blue); }
.f-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pill { font-style: normal; display: inline-block; padding: 2px 8px; border-radius: 10px; background: #eef6e8; color: var(--primary-ink); font-size: 11px; font-weight: 700; margin-inline-start: 6px; }
.muted { color: #757575; }

/* Checkout */
.is-checkout { background: var(--page); }
.co-header { background: var(--blue); color: #fff; }
.co-header-in { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.co-back, .co-secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; }
.co-back svg, .co-secure svg { width: 20px; height: 20px; }
.co-secure { justify-self: end; }
.co-logo img { width: 150px; height: 62px; object-fit: contain; }
.co-page { padding: 24px 0 64px; }
.co-title { margin: 0 0 16px; font-size: 24px; font-weight: 400; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.co-main { display: grid; gap: 16px; }
.co-step { background: #fff; border-radius: 10px; padding: 20px; }
.co-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.co-step-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.co-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e4f0d9; color: var(--primary-ink); font-size: 13px; font-weight: 700; }
.co-num.is-done { background: var(--green); color: #fff; }
.co-tabs { display: flex; gap: 4px; padding: 4px; background: var(--page); border-radius: 8px; margin-bottom: 16px; }
.co-tabs button { flex: 1; height: 40px; border: 0; border-radius: 6px; background: none; font-size: 14px; font-weight: 600; color: #757575; }
.co-tabs [aria-selected="true"] { background: #fff; color: var(--primary-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.co-options { display: grid; gap: 10px; }
.co-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; }
.co-opt:hover { border-color: #BCD9AF; }
.co-opt:has(input:checked) { border-color: var(--blue); background: #f4faf0; }
.co-opt input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; margin: 0; }
.co-opt-body { flex: 1; display: grid; gap: 3px; }
.co-opt-body b { font-size: 14px; font-weight: 600; color: #242424; }
.co-opt-body small { font-size: 12px; color: #757575; }
.co-pay-icons { display: flex; gap: 6px; }
.co-pay-icons img { width: 36px; height: 24px; object-fit: contain; }
.co-link { background: none; border: 0; padding: 0; color: var(--primary-ink); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.co-add { margin-top: 12px; width: 100%; height: 46px; border: 1px dashed var(--blue); border-radius: 8px; background: #fff; color: var(--primary-ink); font-size: 14px; font-weight: 700; }
.co-empty { margin: 0; padding: 12px; border-radius: 8px; background: var(--page); font-size: 13px; color: #424242; }
.co-phone { margin: 14px 0 0; font-size: 12px; color: #757575; }
.co-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.co-days button, .co-slots button { border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #424242; cursor: pointer; }
.co-days button { height: 58px; display: grid; place-content: center; gap: 2px; }
.co-days b { font-size: 13px; }
.co-days small { font-size: 11px; color: #9e9e9e; }
.co-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.co-slots button { height: 42px; font-size: 13px; }
.co-days [aria-pressed="true"], .co-slots [aria-pressed="true"] { border-color: var(--blue); background: #eef6e8; color: var(--primary-ink); font-weight: 700; }
.co-slots button:disabled { color: #c4c4c4; background: #fafafa; cursor: not-allowed; text-decoration: line-through; }
.co-summary { position: sticky; top: 16px; }
.co-summary h2 small { font-weight: 400; color: #757575; }
.co-items { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #f0f0f0; display: grid; gap: 10px; max-height: 260px; overflow: auto; }
.co-items li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: #242424; }
.co-items img { width: 48px; height: 48px; object-fit: contain; border: 1px solid #f0f0f0; border-radius: 6px; }
.co-items span { display: grid; gap: 2px; line-height: 1.4; }
.co-items small { color: #9e9e9e; }
.co-items b { white-space: nowrap; font-size: 12px; }
.co-missing { margin: 10px 0 0; padding-inline-start: 18px; font-size: 12px; color: #b7791f; display: grid; gap: 4px; }
.co-terms { margin: 12px 0 0; font-size: 11px; color: #757575; line-height: 1.6; }
.co-terms a { color: var(--primary-ink); text-decoration: underline; }
.co-edit-cart { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary-ink); }
.cart-checkout:disabled, .cart-bar button:disabled { background: #9e9e9e; cursor: not-allowed; }
.co-done { max-width: 560px; margin: 24px auto; background: #fff; border-radius: 10px; padding: 40px 24px; text-align: center; }
.co-done svg { width: 64px; height: 64px; }
.co-done h1 { margin: 12px 0; font-size: 24px; font-weight: 600; }
.co-done p { margin: 6px 0; font-size: 14px; color: #424242; }
.co-done-actions { display: flex; justify-content: center; gap: 12px; margin: 20px 0 8px; }
.co-note { font-size: 12px; color: #757575; }
.co-bar { display: none; }

/* Account */
.ac-page { padding: 16px 0 48px; }
.ac-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ac-side { background: #fff; border-radius: 10px; overflow: hidden; position: sticky; top: 162px; }
.ac-hello { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: var(--blue); color: #fff; }
.ac-hello div { display: grid; gap: 2px; }
.ac-hello strong { font-size: 15px; }
.ac-hello bdi { font-size: 12px; opacity: 0.85; }
.ac-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; }
.ac-avatar svg { width: 24px; height: 24px; }
.ac-menu { display: grid; }
.ac-menu a, .ac-menu button { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid #f0f0f0; background: none; font-size: 14px; color: #424242; text-align: start; width: 100%; cursor: pointer; }
.ac-menu svg { width: 20px; height: 20px; color: #757575; flex: none; }
.ac-menu a:hover, .ac-menu button:hover { background: var(--page); color: var(--primary-ink); }
.ac-menu [aria-current="page"] { color: var(--primary-ink); font-weight: 700; background: #f4faf0; border-inline-start: 3px solid var(--blue); }
.ac-menu [aria-current="page"] svg { color: var(--primary-ink); }
.ac-menu [data-sign-out] { color: var(--red); border-bottom: 0; }
.ac-menu [data-sign-out] svg { color: var(--red); }
.ac-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ac-panel h1 { margin: 0; font-size: 24px; font-weight: 400; color: #000; }
.ac-panel h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-box { background: #fff; border-radius: 10px; padding: 20px; }
.ac-box p { margin: 4px 0; font-size: 13px; color: #424242; }
.ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ac-list { display: grid; gap: 12px; }
.ac-empty { padding: 40px 16px; }
.ac-empty svg { width: 64px; height: 64px; }
.addr-card.is-default { box-shadow: inset 0 0 0 1px var(--blue); }
.addr-top { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; }
.addr-actions { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.addr-actions button { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--primary-ink); cursor: pointer; }
.ac-tabs { max-width: 520px; margin: 0; }
.order-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-top div { display: grid; gap: 2px; }
.order-top b { font-size: 15px; }
.order-top small { font-size: 12px; color: #757575; }
.status { padding: 4px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; background: #fff4e0; color: #b7791f; }
.status.is-shipped { background: #eef6e8; color: var(--primary-ink); }
.status.is-delivered { background: #effaf4; color: #1d7a49; }
.status.is-cancelled { background: #fdecef; color: var(--red); }
.order-thumbs { display: flex; gap: 8px; margin: 14px 0; }
.order-thumbs img, .order-thumbs span { width: 56px; height: 56px; border: 1px solid #f0f0f0; border-radius: 6px; object-fit: contain; }
.order-thumbs span { display: grid; place-items: center; font-size: 13px; color: #757575; }
.order-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #424242; }
.order-foot a { color: var(--primary-ink); font-weight: 700; }
.timeline { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; }
.timeline li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: #9e9e9e; text-align: center; }
.timeline li span { width: 18px; height: 18px; border-radius: 50%; background: #e0e0e0; position: relative; z-index: 1; }
.timeline li::before { content: ""; position: absolute; top: 8px; inset-inline-start: 50%; width: 100%; height: 2px; background: #e0e0e0; }
.timeline li:last-child::before { display: none; }
.timeline li.is-done { color: #242424; }
.timeline li.is-done span { background: var(--green); }
.timeline li.is-done::before { background: var(--green); }
.timeline li.is-now { font-weight: 700; color: var(--primary-ink); }
.timeline li.is-now span { background: var(--blue); box-shadow: 0 0 0 4px rgba(106, 168, 79, 0.2); }
.timeline li.is-now::before { background: #e0e0e0; }
.order-cancelled { color: var(--red) !important; font-weight: 600; }
.order-totals { margin: 0; display: grid; gap: 8px; }
.order-totals div { display: flex; justify-content: space-between; font-size: 13px; }
.order-totals dd { margin: 0; font-weight: 600; }
.order-totals .is-save dd { color: #1d7a49; }
.order-totals .is-total { border-top: 1px solid #f0f0f0; padding-top: 10px; font-size: 15px; font-weight: 700; }
.reorder-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; }
.reorder-row img { width: 64px; height: 64px; object-fit: contain; }
.reorder-row div { display: grid; gap: 4px; font-size: 13px; }
.reorder-row .wish-add { margin: 0; padding: 0 14px; }