/* ================================================
   Aisha - Hijab Store Template (HTML / CSS / Bootstrap)
   Recreated from the Aisha Elementor template kit
   ================================================ */

:root {
  --dark: #222222;
  --gold: #dba372;
  /* Body copy is a solid grey instead of 50% black: at 50% it only reached
     ~4.0:1 on white (less on --light-grey), which fails WCAG AA for body text. */
  --body-text: #575757;
  --muted-text: #6e6e6e; /* dates, captions - still AA on white */
  --gold-ink: #a3672f;   /* accent that stays legible as text on white */
  --light-grey: #f2f2f2;
  --white: #ffffff;
  --border-light: rgba(17, 17, 17, 0.14);
  --border-strong: rgba(17, 17, 17, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Lato", Arial, sans-serif;
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", Arial, sans-serif;
  color: var(--dark);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--dark);
  transition: all 0.3s ease;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Dark surfaces need a light ring to keep the focus state visible. */
.site-header :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible,
.testi-wrap :focus-visible,
.section-dark :focus-visible,
.mobile-menu :focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a:hover { color: var(--gold); }

img { max-width: 100%; }

.container-x {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-text);
  font-weight: 700; /* 11px letter-spaced type needs the extra weight to read */
  margin-bottom: 6px;
}

.section-head {
  text-align: center;
  margin-bottom: 45px;
}

.section-head .eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin: 10px auto 14px;
}

.section-title {
  font-size: 34px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.btn-aisha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 26px;
  border: 1px solid var(--dark);
  border-radius: 0;
  line-height: 1;
}

.btn-aisha:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.btn-aisha-light {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
}

.btn-aisha-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.btn-aisha-outline {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--border-light);
}

.btn-aisha-outline:hover { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ---------- top bar ---------- */
.topbar {
  background: var(--light-grey);
  text-align: center;
  padding: 9px 15px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark);
  font-weight: 700;
}

.topbar a {
  display: inline-block;
  padding: 6px 2px;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- header / hero ---------- */
.hero {
  position: relative;
  min-height: 700px;
  display: flex;
  flex-direction: column;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* the scrim itself lives on .hero-slide so it is only painted once;
     this keeps the element for heroes rendered without a slide */
  background: none;
}

.site-header {
  position: relative;
  z-index: 6;
  padding-top: 22px;
  padding-bottom: 18px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 26px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}

.brand:hover { color: #fff; }

.brand-mark {
  width: 30px;
  height: 30px;
  background: var(--gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.header-social,
.header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header-social a,
.header-tools a {
  color: #fff;
  font-size: 14px;
  margin-right: 18px;
  opacity: 0.9;
}

.header-tools a:last-child { margin-right: 0; }

.header-social a:hover,
.header-tools a:hover { color: var(--gold); }

.header-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}

.header-cart-link i { font-size: 18px; order: -1; }

.cart-count {
  position: absolute;
  top: 0;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.cart-value { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }

.header-cart-modal { border: 0; border-radius: 0; }
.header-cart-modal .modal-header { padding: 20px 24px; border-bottom-color: var(--border-light); }
.header-cart-modal .modal-title { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.header-cart-modal .modal-title span { color: var(--body-text); font-weight: 400; }
.header-cart-modal .modal-body { padding: 0 24px; }
.header-cart-item { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-light); font-size: 12px; }
.header-cart-item img { width: 54px; height: 54px; object-fit: cover; }
.header-cart-item-details { flex: 1; min-width: 0; color: var(--body-text); }
.header-cart-item-name { color: var(--dark); font-weight: 700; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-cart-item-variant { margin-bottom: 3px; font-size: 11px; }
.header-cart-item strong { color: var(--dark); font-size: 12px; white-space: nowrap; }
.header-cart-empty { padding: 28px 0; color: var(--body-text); text-align: center; }
.header-cart-modal .modal-footer { padding: 18px 24px 24px; border-top: 0; }
.header-cart-total { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }

.main-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
  flex-wrap: wrap;
}

.main-nav a {
  position: relative;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  /* real padding so the links are a comfortable pointer/touch target */
  padding: 10px 13px;
}

.main-nav a:hover { color: var(--gold); }

/* underline marks the current page - previously there was no active state */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: #fff; }

.hero-body {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  align-items: center;
  /* clears the transparent header that overlays the slide */
  padding: 40px 0 110px;
}

.hero-carousel { position: absolute; inset: 0; z-index: 1; height: 100%; }
.hero-carousel .carousel-inner { height: 100%; }
.hero-slide { height: 100%; min-height: 700px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top band carries the overlaid header, left band carries the copy;
     white text needs roughly 4.5:1 over the pale hero photography */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 18%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.06) 72%, rgba(0, 0, 0, 0) 100%);
}
.hero-carousel .carousel-indicators { z-index: 5; }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  z-index: 5;
  width: 9%;
  opacity: 1;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  width: 46px;
  height: 46px;
  background-size: 15px;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--gold);
  border-color: var(--gold);
}

.hero-carousel .carousel-indicators { margin-bottom: 26px; }

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 26px;
  height: 3px;
  opacity: 0.55;
  /* transparent borders keep a ~23px tall touch target around a 3px bar */
  border: 10px solid transparent;
  border-left-width: 6px;
  border-right-width: 6px;
  background-clip: padding-box;
  transition: opacity 0.3s ease;
}

.hero-carousel .carousel-indicators .active { opacity: 1; background: var(--gold); }

.hero-content { max-width: 470px; color: #fff; }

.hero-content .eyebrow { color: rgba(255, 255, 255, 0.85); }

.hero-title {
  color: #fff;
  font-size: 60px;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.hero-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  margin-bottom: 28px;
}

/* ---------- features strip ---------- */
.features-wrap { background: var(--light-grey); padding: 55px 0 70px; }

.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
}

.feature i {
  flex: 0 0 26px;
  font-size: 23px;
  line-height: 1.15;
  color: var(--dark);
  text-align: center;
}

.feature h6 {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 4px;
  /* reserves a second line (2 x 1.5 line-height) so single-line titles keep
     the row's descriptions on a common baseline */
  min-height: 3em;
}

.feature p { font-size: 13px; line-height: 1.6; margin: 0; }

@media (max-width: 991.98px) {
  .feature h6 { min-height: 0; }
}

/* ---------- category tiles ---------- */
.cat-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  min-height: 240px;
  height: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  /* the old wash started at 30% and topped out at .45, which left captions
     unreadable over pale photography */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.7) 100%);
  transition: 0.35s;
}

.cat-tile:hover::before { background: rgba(0, 0, 0, 0.55); }

.cat-tile.tall { min-height: 500px; }

.cat-tile-inner { position: relative; z-index: 2; }

.cat-tile h3 {
  color: #fff;
  font-size: 22px;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

/* ---------- brands ---------- */
.brands { padding-top: 55px; }

.brands .eyebrow {
  text-align: center;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 0.24em;
  margin-bottom: 26px;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(17, 17, 17, 0.28);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 0;
}

.brand-logo i { font-size: 20px; }

.brand-logo:hover { color: var(--gold); }

/* ---------- products ---------- */
.section-pad { padding: 85px 0; }

.product {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-thumb {
  position: relative;
  overflow: hidden;
  background: var(--light-grey);
  aspect-ratio: 1 / 1;
}

.product-thumb > a { display: block; height: 100%; }

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product:hover .product-thumb img { transform: scale(1.06); }

.product-title {
  margin: 20px 0 6px;
}

.product-title a {
  display: -webkit-box;
  font-size: 13px;
  letter-spacing: 0.13em;
  font-weight: 700;
  line-height: 1.5;
  /* clamp to two lines so titles of different lengths keep rows aligned,
     and so the whole block is tappable */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
}

.stars { color: var(--gold); font-size: 11px; letter-spacing: 2px; }

.price { color: var(--dark); font-size: 14px; margin: 4px 0 14px; }

/* pushes every card's action to the bottom, whatever the title height */
.product .price { margin-top: auto; }
.product > form { margin-top: 0; }

.product .btn-aisha {
  padding: 12px 22px;
  font-size: 10px;
  /* equal-width actions across a row, regardless of the label */
  width: 100%;
  justify-content: center;
}

.divider-line {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: 0;
}

/* ---------- promo banners ---------- */
.promo {
  min-height: 320px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding: 40px 50px;
}

.promo.overlay { position: relative; }

.promo.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.promo > div { position: relative; z-index: 2; }

.promo h2 {
  color: #fff;
  font-size: 30px;
  line-height: 1.25;
  max-width: 300px;
  margin-bottom: 20px;
}

/* ---------- about ---------- */
.about-wrap { background: var(--light-grey); padding: 80px 0; }

.about-wrap p { margin-bottom: 18px; font-size: 14px; }

/* ---------- testimonials ---------- */
.testi-wrap { background: var(--dark); }

.testi-left { padding: 90px 60px 90px 40px; }

.testi-left .eyebrow { color: rgba(255, 255, 255, 0.75); }

.testi-left .eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin: 10px 0 14px;
}

.testi-left h2 { color: #fff; font-size: 32px; line-height: 1.25; margin-bottom: 18px; }

.testi-left p { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin-bottom: 26px; }

.testi-photos {
  height: 100%;
  min-height: 420px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.testi-photos img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.testi-card {
  background: #fff;
  padding: 45px 45px 50px;
  max-width: 560px;
  /* sized to its content and centred in the row: the old height:100% with a
     60px margin overflowed the row and clipped the photo column */
  margin: 60px 0;
  align-self: center;
  position: relative;
}

.testi-card .quote-mark {
  position: absolute;
  top: 32px;
  right: 40px;
  font-size: 40px;
  color: rgba(17, 17, 17, 0.12);
}

.testi-card h3 { font-size: 24px; margin: 16px 0 14px; }

.testi-card blockquote { font-size: 15px; line-height: 1.9; margin-bottom: 22px; }

.testi-author {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
}

/* ---------- blog ---------- */
.post { text-align: center; }

.post-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; }

.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

.post:hover .post-thumb img { transform: scale(1.06); }

.post { display: flex; flex-direction: column; height: 100%; }

.post h5 {
  margin: 20px 0 6px;
}

.post h5 a {
  display: -webkit-box;
  font-size: 13px;
  letter-spacing: 0.13em;
  font-weight: 700;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
}

.post-meta { font-size: 12px; color: var(--muted-text); margin-top: auto; }

/* ---------- gallery ---------- */
.gallery-tile {
  overflow: hidden;
  height: 100%;
  /* one shared ratio so the four small tiles and the feature tile crop
     consistently instead of each using its own pixel height */
  aspect-ratio: 1 / 1;
  background: var(--light-grey);
}

.gallery-tile-feature { aspect-ratio: auto; min-height: 300px; }

.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

@media (max-width: 991.98px) {
  .gallery-tile-feature { aspect-ratio: 4 / 3; min-height: 0; }
}

.gallery-tile:hover img { transform: scale(1.05); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); padding: 70px 0 0; }

.newsletter {
  background: var(--gold);
  padding: 40px 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.newsletter .eyebrow { color: rgba(255, 255, 255, 0.8); }

.newsletter h2 { color: #fff; font-size: 32px; }

.newsletter p { color: #fff; font-size: 13px; margin-bottom: 12px; }

.newsletter-form { display: flex; gap: 0; }

.newsletter-form input {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
  padding: 14px 18px;
  min-width: 260px;
  font-size: 13px;
  outline: none;
}

.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.85); }

.footer-main { padding: 65px 0 30px; }

.footer-col h6 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 24px;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }

.footer-col li { margin-bottom: 2px; }

.footer-col a {
  display: inline-block;
  /* tappable rows: these were 14px-tall hit areas on phones */
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.footer-col a:hover { color: var(--gold); }

.footer-brand .brand { margin-bottom: 20px; }

.footer-info { color: rgba(255, 255, 255, 0.72); font-size: 13px; margin-bottom: 10px; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.footer-social a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p { color: rgba(255, 255, 255, 0.68); font-size: 13px; margin: 0; }

.pay-icons { display: flex; gap: 8px; }

.pay-icons span {
  width: 34px;
  height: 22px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .hero-title { font-size: 44px; }
  .section-title { font-size: 27px; }
  .testi-left { padding: 60px 15px; }
}

@media (max-width: 767px) {
  .hero { min-height: 560px; }
  .hero-title { font-size: 34px; }
  .main-nav { gap: 18px; }
  .promo { padding: 30px; }
  .newsletter { padding: 30px; }
  .newsletter-form input { min-width: 0; width: 100%; }
}

/* ================================================
   Inner pages (about-us.html / product-details.html)
   ================================================ */

/* ---------- inner page hero (photo banner with header overlaid) ---------- */
.page-hero {
  position: relative;
  background-size: cover;
  /* anchor the photo to its top edge: the banner is much wider than the photo
     on large screens, and centring it cut off the model's head */
  background-position: right top;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.32) 45%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.page-hero-body {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 70px;
}

.page-hero-body .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.page-hero-body .eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-top: 8px;
}

.page-hero-body h1 {
  color: #fff;
  font-size: 52px;
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin-bottom: 18px;
}

.breadcrumb-x {
  display: flex;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.breadcrumb-x a { color: #fff; }
.breadcrumb-x a:hover { color: var(--gold); }
.breadcrumb-x span { color: rgba(255, 255, 255, 0.75); }

/* ---------- about page ---------- */
.founder-quote {
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.8;
  color: inherit;
  font-style: italic;
  margin: 26px 0 22px;
}

.founder-name { font-size: 20px; letter-spacing: 0.06em; margin-bottom: 4px; }

.founder-role {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* dark split section (story / founder) */
.section-dark { background: var(--dark); color: rgba(255, 255, 255, 0.75); padding: 90px 0; }

.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }

.section-dark .eyebrow { color: var(--gold); }

.section-dark .eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-top: 8px;
}

.section-dark .founder-role { color: var(--gold); }

.quality-wrap { padding: 90px 0; }

/* products split header (title left, text right) */
.split-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 45px;
}

.split-head .eyebrow { margin-bottom: 10px; }

.split-head .eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-top: 8px;
}

.split-head h2 { margin: 0; }

.split-head p { max-width: 420px; margin: 0; }

/* category tiles with top-left caption */
/* equal rows so the stacked tiles fill the same height as the tall tile
   beside them instead of leaving a gap under the column */
.cat-stack { display: grid; gap: 1.5rem; grid-auto-rows: 1fr; }

.cat-tile.tall { min-height: 640px; }

.cat-stack .cat-tile { min-height: 310px; }

.cat-tile.caption-top { align-items: flex-start; }

.cat-tile.caption-top::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.05) 100%);
}

/* ---------- product details ---------- */
.product-gallery { position: relative; }

.product-gallery img { width: 100%; height: auto; display: block; }

.product-zoom {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  font-size: 14px;
  transition: all 0.3s ease;
}

.product-zoom:hover { background: var(--dark); color: #fff; }

.pd-info h1.pd-title {
  font-size: 38px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.pd-price {
  font-size: 24px;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 12px;
}

.pd-rating { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 20px; }

.pd-rating a { color: var(--body-text); text-decoration: underline; }

.stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }

.stars .off { color: var(--border-light); }

.pd-desc { font-size: 14px; margin-bottom: 26px; }

.pd-meta { margin-bottom: 30px; }

.pd-meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 6px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.pd-meta-row .meta-label {
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10px;
  font-weight: 700;
}

.pd-meta-row a { color: var(--gold-ink); }

.qty-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }

.qty-box {
  display: inline-flex;
  width: 84px;
  height: 58px;
  border: 1px solid var(--border-light);
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.qty-box input {
  width: 100%;
  border: 0;
  text-align: center;
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
  outline: none;
  background: transparent;
  /* hide the native spinner: the box already has its own steppers */
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-steppers {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-light);
}

.qty-steppers button {
  flex: 1;
  width: 26px;
  border: 0;
  background: transparent;
  color: var(--body-text);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.qty-steppers button + button { border-top: 1px solid var(--border-light); }

.qty-steppers button:hover { color: var(--dark); }

.btn-add-cart {
  flex: 1 1 260px;
  background: var(--dark);
  color: #fff;
  border: 1px solid var(--dark);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  height: 58px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-add-cart:hover { background: var(--gold); border-color: var(--gold); }

/* tabs (boxed, like the original) */
.pd-tabs { display: flex; flex-wrap: wrap; margin-bottom: 36px; }

.pd-tabs button {
  background: none;
  border: 1px solid var(--border-light);
  border-left: 0;
  padding: 14px 30px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pd-tabs button:first-child { border-left: 1px solid var(--border-light); }

.pd-tabs button.active { color: var(--gold); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel h3 { font-size: 22px; margin-bottom: 16px; }

.review-item { display: flex; gap: 20px; margin-bottom: 30px; }

.review-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; }

.review-name {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  margin: 6px 0 6px;
}

.review-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.review-form input,
.review-form textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dark);
  outline: none;
  margin-bottom: 18px;
}

.review-form textarea { min-height: 130px; resize: vertical; }

/* related products (centered cards) */
.related-products .product { text-align: center; }

.related-products .product .btn-aisha { margin-top: 6px; }

@media (max-width: 767px) {
  .page-hero { min-height: 380px; }
  .page-hero-body h1 { font-size: 34px; }
  .pd-info h1.pd-title { font-size: 28px; }
}

/* ================================================
   ADDED — Shop listing, Cart, Checkout, Orders,
   Wishlist, Addresses, Blog single, Auth screens
   ================================================ */

/* ---------- auth layout ---------- */
.auth-body {
  background: var(--light-grey);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
}

.auth-shell-reverse {
  grid-template-columns: 1fr 1.08fr;
}

.auth-visual {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 60px 50px;
}

.auth-visual-left { order: 1; }
.auth-visual-right { order: 2; }

.auth-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.15), rgba(17,17,17,0.65));
}

.auth-brand-wrap {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 420px;
}

.auth-brand-wrap p {
  margin: 18px 0 0;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.8;
}

.auth-brand {
  color: #fff;
  font-size: 36px;
  letter-spacing: 0.14em;
}

.auth-brand:hover { color: #fff; }

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 40px 30px;
}

.auth-box {
  width: min(100%, 500px);
}

.auth-box h1 {
  font-size: 40px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--body-text);
  margin-bottom: 28px;
}

.auth-form {
  margin-top: 26px;
}

.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: 13px;
}

.auth-row a,
.auth-meta a {
  color: var(--dark);
  font-weight: 700;
}

.auth-row a:hover,
.auth-meta a:hover { color: var(--gold); }

.auth-meta {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
}

.auth-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 13px;
  border: 1px solid var(--border-light);
  background: var(--light-grey);
  color: var(--dark);
}

.auth-alert.success {
  border-color: rgba(47, 158, 68, 0.3);
  background: rgba(47, 158, 68, 0.06);
  color: #1d5e2e;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

@media (max-width: 991px) {
  .auth-shell,
  .auth-shell-reverse {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    min-height: 260px;
    padding: 40px 24px;
  }

  .auth-panel {
    padding: 30px 20px 50px;
  }
}

/* ---------- generic form fields (used by checkout/address/track-order) ---------- */
.form-x label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.form-x input,
.form-x select,
.form-x textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dark);
  outline: none;
  margin-bottom: 18px;
}

.form-x textarea { min-height: 110px; resize: vertical; }
.form-x .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.form-x .form-check input { width: auto; margin: 0; }
.form-x .field-error { color: #c0392b; font-size: 12px; margin: -12px 0 14px; display: block; }

/* ---------- shop listing (toolbar + sidebar + pagination) ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.shop-toolbar form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-toolbar select {
  height: 44px;
  border: 1px solid var(--border-light);
  padding: 0 34px 0 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dark);
  background: #fff;
}

/* every control in the toolbar shares one height and border treatment */
.shop-toolbar > form { gap: 8px; }
/* the input drops its right border to sit flush against the submit button,
   so this group must not inherit the toolbar's gap */
.shop-toolbar .shop-search { gap: 0; }

.shop-toolbar .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  /* reads as a field label attached to the control beside it */
  background: var(--light-grey);
}

.shop-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.shop-filter-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--dark);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.shop-filter-bar a.active,
.shop-filter-bar a:hover {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.shop-sidebar h6 {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.shop-sidebar ul { list-style: none; padding: 0; margin: 0 0 40px; }

.shop-sidebar-notes { font-size: 13px; }
.shop-sidebar-notes li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.shop-sidebar-notes li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold-ink);
  font-weight: 700;
}
.shop-sidebar li { margin-bottom: 12px; }
.shop-sidebar a { font-size: 13px; display: flex; justify-content: space-between; padding: 6px 0; }
.shop-sidebar a.active,
.shop-sidebar a:hover { color: var(--gold-ink); font-weight: 700; }

.pagination-x {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
}

.pagination-x a,
.pagination-x span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--dark);
}

.pagination-x a:hover { border-color: var(--gold); color: var(--gold); }
.pagination-x .current { background: var(--dark); color: #fff; border-color: var(--dark); }
.pagination-x .disabled { opacity: 0.35; }

/* ---------- empty state (cart/orders/wishlist) ---------- */
.empty-state {
  text-align: center;
  padding: 30px 20px 40px;
}

.empty-state > i { font-size: 42px; color: var(--border-strong); margin-bottom: 20px; display: block; }
.empty-state h3 { margin-bottom: 12px; }
.empty-state p { margin-bottom: 26px; }

/* ---------- cart table ---------- */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }

.cart-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  padding: 0 10px 16px;
  border-bottom: 1px solid var(--border-light);
}

.cart-table td {
  padding: 20px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-size: 14px;
}

.cart-product { display: flex; align-items: center; gap: 16px; }
.cart-product img { width: 76px; height: 76px; object-fit: cover; flex: 0 0 auto; }
.cart-product .name { font-size: 13px; letter-spacing: 0.06em; font-weight: 700; color: var(--dark); text-transform: uppercase; }

.cart-qty-form { display: flex; align-items: center; }
.cart-remove { color: var(--body-text); font-size: 15px; }
.cart-remove:hover { color: #c0392b; }

.cart-summary {
  background: var(--light-grey);
  padding: 34px;
}

.cart-summary h4 { font-size: 16px; letter-spacing: 0.12em; margin-bottom: 22px; }

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.cart-summary-row.total {
  border-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  padding-top: 16px;
}

.cart-summary .btn-aisha { width: 100%; justify-content: center; margin-top: 18px; }

/* ---------- checkout ---------- */
.checkout-box {
  border: 1px solid var(--border-light);
  padding: 34px;
  margin-bottom: 24px;
}

.checkout-box h4 {
  font-size: 15px;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.address-radio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border-light);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
}

.address-radio input { margin-top: 4px; }
.address-radio .addr-name { font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.address-radio .addr-line { font-size: 13px; }
.address-radio .addr-badge { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

.pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-light);
  padding: 16px 18px;
  margin-bottom: 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--dark);
}

/* ---------- orders (list + detail) ---------- */
.account-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.account-sidebar { border: 1px solid var(--border-light); background: var(--light-grey); padding: 22px 16px 16px; }
.account-sidebar__identity { display: flex; align-items: center; gap: 12px; padding: 2px 8px 20px; border-bottom: 1px solid var(--border-light); margin-bottom: 18px; }
.account-sidebar__avatar { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--dark); color: #fff; font-size: 15px; font-weight: 700; }
.account-sidebar__identity strong, .account-sidebar__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sidebar__identity strong { color: var(--dark); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.account-sidebar__identity small { max-width: 164px; font-size: 11px; }
.account-sidebar__label { margin: 0 8px 8px; color: var(--body-text); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.account-sidebar > a { display: flex; align-items: center; gap: 11px; padding: 11px 10px; color: var(--dark); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.account-sidebar > a i { width: 15px; color: var(--body-text); text-align: center; }
.account-sidebar > a:hover, .account-sidebar > a.active { background: #fff; color: var(--gold); }
.account-sidebar > a.active i { color: var(--gold); }
.account-sidebar form { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-light); }
.account-sidebar form a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--body-text); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.account-content { min-width: 0; }
.account-content__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-light); padding-bottom: 24px; margin-bottom: 28px; }
.account-content__heading .eyebrow { margin-bottom: 4px; }
.account-content__heading h2 { font-size: 25px; }
.account-content__heading .btn-aisha { padding: 12px 16px; }
.orders-table-wrap { overflow-x: auto; border: 1px solid var(--border-light); }
.orders-table { width: 100%; min-width: 650px; border-collapse: collapse; }
.orders-table th { background: var(--light-grey); color: var(--dark); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: 14px 18px; text-align: left; }
.orders-table td { padding: 18px; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--dark); }
.orders-table td:first-child { font-weight: 700; letter-spacing: .04em; }
.view-link { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tracking-card__heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 28px; }
.tracking-card__heading h4 { padding: 0; border: 0; margin: 0; }
.tracking-card__shipment { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 16px; background: var(--light-grey); color: var(--dark); }
.tracking-card__shipment > i { color: var(--gold); font-size: 20px; }.tracking-card__shipment strong, .tracking-card__shipment span { display: block; }.tracking-card__shipment span { font-size: 12px; }
.order-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr;
  gap: 16px;
  align-items: center;
  padding: 22px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.order-row.head {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
  border-bottom: 2px solid var(--dark);
}

.order-number { font-weight: 700; color: var(--dark); }

.status-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  color: var(--dark);
}

.status-badge.pending { color: #b8860b; border-color: #b8860b; }
.status-badge.processing { color: #2e6fb8; border-color: #2e6fb8; }
.status-badge.shipped { color: var(--gold); border-color: var(--gold); }
.status-badge.delivered { color: #2f9e44; border-color: #2f9e44; }
.status-badge.cancelled,
.status-badge.refunded { color: #c0392b; border-color: #c0392b; }

.order-timeline { list-style: none; margin: 0; padding: 0; }

.order-timeline li {
  display: flex;
  gap: 16px;
  padding-bottom: 26px;
  position: relative;
  padding-left: 26px;
}

.order-timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.order-timeline li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border-light);
}

.order-timeline li:last-child::after { display: none; }
.order-timeline .t-status { font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: 0.06em; }
.order-timeline .t-date { font-size: 12px; }

/* ---------- addresses ---------- */
.address-card {
  border: 1px solid var(--border-light);
  padding: 26px;
  height: 100%;
  position: relative;
}

.address-card .default-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}

.address-card h6 { font-size: 13px; letter-spacing: 0.08em; margin-bottom: 10px; }
.address-card p { font-size: 13px; margin-bottom: 4px; }
.address-card .addr-actions { margin-top: 16px; display: flex; gap: 16px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.address-card .addr-actions form { display: inline; }
.address-card .addr-actions button { background: none; border: 0; padding: 0; color: var(--body-text); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.address-card .addr-actions button:hover,
.address-card .addr-actions a:hover { color: var(--gold); }

.add-address-tile {
  border: 1px dashed var(--border-light);
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--body-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.add-address-tile i { font-size: 22px; }
.add-address-tile:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- blog single article ---------- */
.article-cover { width: 100%; height: 420px; object-fit: cover; margin-bottom: 34px; }
.article-meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.article-body p { margin-bottom: 20px; font-size: 15px; }
.article-body h3 { font-size: 20px; margin: 30px 0 16px; }

.comment-item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border-light); }
.comment-item .c-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dark); margin-bottom: 4px; }
.comment-item .c-date { font-size: 11px; color: var(--body-text); margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; }

@media (max-width: 767px) {
  .account-shell { grid-template-columns: 1fr; gap: 28px; }
  .account-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .account-sidebar__identity, .account-sidebar__label, .account-sidebar form { grid-column: 1 / -1; }
  .account-sidebar form { margin-top: 8px; }
  .account-content__heading { align-items: start; flex-direction: column; }
  .order-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .cart-table thead { display: none; }
  .cart-table tr { display: block; padding: 16px 0; }
  .cart-table td { display: block; border: 0; padding: 6px 0; }
}

/* ================================================
   RESPONSIVE
   Mobile menu + breakpoint overrides. Kept at the end
   of the file so these rules win over the ones above.
   Breakpoints match Bootstrap 5 (992 / 768 / 576).
   ================================================ */

/* ---------- mobile menu (desktop: hidden) ---------- */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  /* borderless: the bordered box read as a stray input against the photo */
  border: 0;
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-toggle:hover { color: var(--gold); }

.mobile-menu {
  /* bootstrap's own .offcanvas.offcanvas-start wins on specificity, so set its variable */
  --bs-offcanvas-width: min(320px, 86vw);
  background: var(--dark);
  color: rgba(255, 255, 255, 0.6);
}

.mobile-menu .offcanvas-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu .offcanvas-title {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.mobile-menu .btn-close { opacity: 0.7; }

.mobile-menu .offcanvas-body { padding: 6px 0 24px; }

.mobile-nav { display: flex; flex-direction: column; }

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav a i { width: 16px; text-align: center; color: var(--gold); font-size: 13px; }

.mobile-nav a:hover,
.mobile-nav a.active { color: var(--gold); background: rgba(255, 255, 255, 0.04); }

.mobile-nav-secondary { margin-top: 20px; }

.mobile-nav-secondary a { font-size: 11px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); }

.mobile-menu-social { display: flex; gap: 8px; padding: 18px 14px; }

.mobile-menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
}

.mobile-menu-social a:hover { color: var(--gold); }

/* ---------- tablet and below ---------- */
@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  .main-nav,
  .header-social { display: none; }

  .site-header { padding-top: 16px; padding-bottom: 8px; }
  /* three equal columns keep the wordmark optically centred between the
     menu button and the tools */
  .header-row { gap: 10px; }
  .header-row > .nav-toggle,
  .header-row > .header-tools { flex: 1 1 0; }
  .header-row > .header-tools { justify-content: flex-end; }
  .brand { flex: 0 1 auto; font-size: 20px; letter-spacing: 0.1em; }
  /* 44px minimum touch target on every header control */
  .header-tools a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: 0;
    padding: 0 4px;
    font-size: 16px;
  }

  /* the header sits on top of the hero image, so the slide body has to clear it */
  .hero,
  .hero-slide { min-height: 540px; }
  .hero-body { padding: 130px 0 70px; }
  .hero-content { max-width: 100%; }

  .page-hero { min-height: 420px; }
  .page-hero-body { padding: 120px 0 50px; }

  .section-pad,
  .about-wrap,
  .section-dark,
  .quality-wrap { padding: 60px 0; }

  .testi-left { padding: 55px 24px; }
  .testi-card { margin: 0; padding: 34px 26px 38px; max-width: none; }

  .promo { min-height: 260px; padding: 34px 30px; }
  .promo h2 { font-size: 26px; max-width: 100%; }

  .cat-tile.tall,
  .cat-stack .cat-tile { min-height: 300px; }

  .account-shell { grid-template-columns: 1fr; gap: 28px; }

  /* stacked auth pages put the photo on top, whichever side it sits on at desktop */
  .auth-visual-left,
  .auth-visual-right { order: -1; }
  .auth-visual { min-height: 220px; }

  .article-cover { height: 300px; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 767.98px) {
  .topbar { padding: 8px 14px; font-size: 10px; letter-spacing: 0.1em; line-height: 1.7; }

  .hero,
  .hero-slide { min-height: 470px; }
  .hero-body { padding: 118px 0 54px; }
  .hero-title { font-size: 32px; }
  .hero-text { font-size: 13px; margin-bottom: 22px; }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next { display: none; }

  .page-hero { min-height: 330px; }
  .page-hero-body { padding: 105px 0 40px; }
  .page-hero-body h1 { font-size: 30px; }

  .section-title { font-size: 24px; }
  .section-head { margin-bottom: 30px; }
  .features-wrap { padding: 40px 0 46px; }

  .split-head { gap: 20px; margin-bottom: 30px; }
  .split-head p { max-width: 100%; }

  /* product detail */
  .pd-info h1.pd-title { font-size: 24px; }
  .pd-price { font-size: 20px; }
  .pd-meta-row { grid-template-columns: 78px 1fr; gap: 10px; }
  .pd-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pd-tabs button { padding: 12px 18px; font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; }
  .tab-panel h3 { font-size: 18px; }
  .qty-box { height: 52px; }
  .btn-add-cart { flex: 1 1 100%; height: 52px; letter-spacing: 0.18em; }
  .review-item { gap: 14px; }
  .review-item img { width: 46px; height: 46px; }

  /* shop listing */
  .shop-toolbar { gap: 12px; }
  .shop-toolbar form { width: 100%; }
  .shop-toolbar select { flex: 1; min-width: 0; }

  /* cart table -> stacked cards with labels */
  .cart-table,
  .cart-table tbody,
  .cart-table tr { display: block; width: 100%; }
  .cart-table tr { padding: 16px 0 12px; border-bottom: 1px solid var(--border-light); }
  .cart-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    padding: 6px 0;
  }
  .cart-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dark);
  }
  .cart-table td.cart-cell-product { display: block; }
  .cart-table td.cart-cell-product::before,
  .cart-table td.cart-cell-remove::before { display: none; }
  .cart-table td.cart-cell-remove { justify-content: flex-end; }

  .cart-summary,
  .checkout-box { padding: 24px 20px; }

  /* footer */
  .newsletter { flex-direction: column; align-items: stretch; gap: 18px; padding: 28px 22px; }
  .newsletter h2 { font-size: 24px; }
  .newsletter-form { flex-wrap: wrap; gap: 10px; }
  .newsletter-form input { width: 100%; min-width: 0; }
  .newsletter-form .btn-aisha { width: 100%; justify-content: center; }
  .footer-main { padding: 45px 0 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .pay-icons { flex-wrap: wrap; }

  .article-cover { height: 220px; }
  .article-body p { font-size: 14px; }
  .empty-state { padding: 20px 16px 30px; }
}

/* ---------- small phones ---------- */
@media (max-width: 575.98px) {
  .container-x { padding: 0 16px; }

  .brand { font-size: 17px; letter-spacing: 0.08em; }
  .brand-mark { width: 26px; height: 26px; font-size: 13px; }
  .header-tools .cart-value { display: none; }

  .hero-title { font-size: 28px; }
  .section-title { font-size: 21px; }
  .page-hero-body h1 { font-size: 26px; }

  .btn-aisha { padding: 13px 20px; letter-spacing: 0.16em; }

  /* two product cards per row stay readable at 360px */
  .product-title { margin: 14px 0 4px; font-size: 12px; letter-spacing: 0.08em; }
  .price { font-size: 13px; margin-bottom: 10px; }
  .product .btn-aisha { padding: 11px 12px; font-size: 9px; letter-spacing: 0.12em; gap: 6px; }

  .cat-tile { padding: 22px; }
  .cat-tile h3 { font-size: 18px; }

  .testi-card { padding: 28px 20px 32px; }
  .testi-card h3 { font-size: 20px; }
  .testi-card blockquote { font-size: 14px; line-height: 1.8; }
  .testi-card .quote-mark { top: 22px; right: 22px; font-size: 30px; }

  .shop-filter-bar { gap: 8px; }
  .shop-filter-bar a { padding: 9px 12px; font-size: 10px; }
  .pagination-x { flex-wrap: wrap; gap: 6px; }

  .order-row { grid-template-columns: 1fr; row-gap: 6px; }
  .address-radio,
  .pay-option { padding: 14px; }

  .auth-box h1 { font-size: 30px; }
  .auth-brand { font-size: 28px; }

}

/* ================================================
   Feedback, product options and small-screen tweaks
   ================================================ */

/* ---------- flash toasts ---------- */
.flash-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  left: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 14px 16px;
  background: var(--white);
  color: var(--dark);
  font-size: 14px;
  line-height: 1.5;
  border-left: 4px solid var(--gold);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.16);
  animation: flash-in 0.25s ease-out;
}

.flash i { margin-top: 3px; color: var(--gold); }
.flash span { flex: 1; }
.flash a { margin-left: 6px; font-weight: 700; text-decoration: underline; color: var(--dark); }
.flash button { background: none; border: 0; padding: 0 2px; font-size: 20px; line-height: 1; color: var(--body-text); cursor: pointer; }
.flash-error { border-left-color: #c0392b; }
.flash-error i { color: #c0392b; }

@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- product cards ---------- */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: var(--dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price del,
.pd-price del { color: var(--body-text); font-size: 0.85em; margin-right: 6px; }

.btn-aisha-disabled,
.btn-aisha-disabled:hover { background: var(--light-grey); border-color: var(--light-grey); color: var(--body-text); cursor: not-allowed; }

/* ---------- product detail ---------- */
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.pd-thumbs button { flex: 0 0 72px; padding: 0; border: 1px solid var(--border-light); background: none; opacity: 0.6; cursor: pointer; }
.pd-thumbs button.active,
.pd-thumbs button:hover { opacity: 1; border-color: var(--dark); }
.pd-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.pd-rating a { color: inherit; }
.pd-meta .in-stock { color: #2e7d32; font-weight: 700; }
.pd-meta .out-of-stock { color: #c0392b; font-weight: 700; }

.pd-option { flex: 1 1 100%; }
.pd-option label,
.review-form select + label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
}
.pd-option select,
.review-form select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--dark);
  font-size: 14px;
}

.btn-add-cart:disabled { opacity: 0.45; cursor: not-allowed; }

.pd-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pd-wishlist:hover { color: var(--gold); }
.pd-wishlist i { font-size: 15px; color: var(--gold); }

/* ---------- shop listing search ---------- */
.shop-search { display: flex; flex: 1 1 240px; max-width: 360px; }
.shop-search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-light);
  border-right: 0;
  font-size: 14px;
  color: var(--dark);
}
.shop-search button { flex: 0 0 48px; width: 48px; height: 44px; border: 1px solid var(--dark); background: var(--dark); color: #fff; cursor: pointer; }
.shop-search button:hover { background: var(--gold); border-color: var(--gold); }
.shop-active-filter { margin: -6px 0 18px; font-size: 14px; }
.shop-active-filter a { margin-left: 8px; color: var(--dark); text-decoration: underline; }

@media (max-width: 767.98px) {
  .shop-search { max-width: none; flex-basis: 100%; }
  .flash-stack { top: auto; bottom: 16px; align-items: stretch; }
  .flash { max-width: none; }
}

@media (max-width: 575.98px) {
  /* readable, tappable buttons on the two-up product grid */
  .product .btn-aisha {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 12px 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .product-badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 9px; }
}

/* ================================================
   Content pages, currency switcher, guest checkout
   ================================================ */

/* topbar with currency switcher */
.topbar { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; }
.currency-switch { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
.currency-switch select {
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 6px;
  cursor: pointer;
}

/* home brand statement (replaces the placeholder logo row) */
.brand-statement { max-width: 760px; margin: 60px auto 0; text-align: center; }
.brand-statement h2 { color: var(--dark); font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase; margin: 6px 0 16px; }
.brand-statement p:last-child { margin: 0; }

/* shop intro + price filter */
.shop-intro { margin: 0 0 24px; }
.shop-price-filter { display: flex; align-items: center; gap: 8px; }
.shop-price-filter input {
  width: 84px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  color: var(--dark);
  font-size: 13px;
}
.shop-price-filter .btn-aisha { height: 44px; padding: 0 18px; }

/* product page */
.pd-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; color: var(--dark); font-size: 13px; font-weight: 700; }
.pd-trust i { color: var(--gold); margin-right: 6px; }
.pd-currency-note { margin: 12px 0 0; font-size: 12px; }

/* checkout */
.checkout-hint { font-size: 13px; margin-bottom: 16px; }
.checkout-hint a { color: var(--dark); font-weight: 700; text-decoration: underline; }

/* contact details list */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
}

.contact-item:last-child { border-bottom: 0; }

.contact-item > i {
  flex: 0 0 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--light-grey);
  color: var(--dark);
  font-size: 16px;
}

.contact-item h6 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 4px 0 4px;
}

.contact-item p { margin: 0; font-size: 14px; color: var(--dark); }
.contact-item p a { color: var(--dark); }
.contact-item p a:hover { color: var(--gold-ink); }

/* content pages */
.page-copy { max-width: 860px; }
.page-copy h2 { color: var(--dark); font-size: 22px; margin: 40px 0 12px; }
.page-copy ul,
.check-list { padding-left: 0; list-style: none; margin: 0 0 20px; }
.page-copy ul li,
.check-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--dark); }
.page-copy ul li::before,
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.page-copy a:not(.btn-aisha) { color: var(--dark); text-decoration: underline; }

.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.policy-card { padding: 28px 24px; background: var(--light-grey); }
.policy-card i { font-size: 26px; color: var(--gold); }
.policy-card h3 { color: var(--dark); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; margin: 14px 0 8px; }
.policy-card p { margin: 0; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border-light); padding: 0 22px; }
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  color: var(--dark);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 18px; }

/* footer "why choose" list */
.footer-list li { color: rgba(255, 255, 255, 0.72); font-size: 13px; }

@media (max-width: 767.98px) {
  /* one row, with the promo text truncating rather than pushing the
     currency switcher onto a second line */
  .topbar { gap: 10px; padding-right: 74px; }
  .topbar > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .currency-switch { right: 12px; }
  .currency-switch select { min-height: 30px; padding: 4px 6px; }

  .brand-statement { margin-top: 40px; }
  .brand-statement h2 { font-size: 21px; }
  .shop-price-filter { width: 100%; }
  .shop-price-filter input { flex: 1 1 90px; width: auto; min-width: 0; }
  .shop-price-filter .btn-aisha { flex: 0 0 auto; }
}

/* ================================================
   2026-09-25 client pass
   ================================================ */

/* Hero: push the banner text below the overlaid logo row + menu (≈170px);
   only the top padding changes, banner size and design stay as they were. */
@media (min-width: 992px) { .hero-body { padding-top: 200px; } }

/* Collections + "Why UZLUXE" band: breathing room when collections are hidden */
.features-wrap { padding: 80px 0; }
@media (max-width: 767.98px) { .features-wrap { padding: 56px 0; } }
.brand-statement { margin-top: 0; }
.about-text { white-space: pre-line; }

/* Brand promises: own band above the footer */
.promise-band { background: var(--light-grey); padding: 70px 0; border-top: 1px solid var(--border-light); }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.promise {
  position: relative;
  background: #fff;
  padding: 38px 26px 30px;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.promise::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.35s ease;
}
.promise:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.promise:hover::after { width: 60%; }
.promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--dark);
  font-size: 22px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.03);
  transition: background 0.35s ease, color 0.35s ease;
}
.promise:hover .promise-icon { background: var(--gold); color: #fff; }
.promise h6 { font-size: 12px; letter-spacing: 0.16em; font-weight: 700; line-height: 1.5; margin-bottom: 8px; text-transform: uppercase; }
.promise p { font-size: 13px; line-height: 1.6; margin: 0; }
@media (max-width: 991.98px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  .promise-band { padding: 50px 0; }
  .promise-grid { grid-template-columns: 1fr; gap: 14px; }
  .promise { padding: 26px 20px; }
}

/* Product card image carousel */
.product-thumb .carousel,
.product-thumb .carousel-inner,
.product-thumb .carousel-item { height: 100%; }
.product-thumb .carousel-item > a { display: block; height: 100%; }
.product-thumb .card-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--dark);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-thumb .card-carousel-btn.prev { left: 10px; }
.product-thumb .card-carousel-btn.next { right: 10px; }
.product:hover .card-carousel-btn,
.product-thumb .card-carousel-btn:focus-visible { opacity: 1; }
.product-thumb .carousel-indicators { margin-bottom: 8px; z-index: 3; }
.product-thumb .carousel-indicators [data-bs-target] { width: 6px; height: 6px; border-radius: 50%; border: 0; margin: 0 3px; background: #fff; }
@media (hover: none) { .product-thumb .card-carousel-btn { opacity: 1; } }

/* Product detail carousel */
.product-gallery .carousel-item img { width: 100%; height: auto; display: block; }
.product-gallery .carousel-control-prev,
.product-gallery .carousel-control-next { width: 12%; z-index: 3; }
.product-gallery .carousel-control-prev-icon,
.product-gallery .carousel-control-next-icon {
  width: 42px; height: 42px; background-size: 14px; border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
}

/* Cart page quantity: - [n] + */
.qty-inline { display: inline-flex; align-items: stretch; height: 42px; border: 1px solid var(--border-light); }
.qty-inline button { width: 36px; border: 0; background: transparent; color: var(--dark); font-size: 12px; cursor: pointer; }
.qty-inline button:hover { background: var(--light-grey); }
.qty-inline input {
  width: 46px; border: 0; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
  text-align: center; font-weight: 700; color: var(--dark); outline: none; background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-inline input::-webkit-outer-spin-button,
.qty-inline input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* In-flight state for AJAX cart forms */
.is-busy { opacity: 0.55; pointer-events: none; }

/* ================================================
   UI refresh — home + shop
   Editorial serif headings, warmer neutrals, quieter
   controls. Everything below overrides earlier rules.
   ================================================ */

:root {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cream: #f8f4ef;
  --cream-deep: #efe8df;
  --line: rgba(28, 26, 23, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body { font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }

/* ---------- display type ---------- */
.hero-title,
.section-title,
.page-hero-body h1,
.brand-statement h2,
.cat-tile h3,
.newsletter h2,
.post h5 a {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 500;
}

.section-title { font-size: 42px; line-height: 1.1; }

.eyebrow { font-size: 11px; letter-spacing: 0.24em; color: var(--gold-ink); margin-bottom: 12px; }
.section-head .eyebrow::after,
.split-head .eyebrow::after,
.page-hero-body .eyebrow::after { display: none; }

.section-head { margin-bottom: 48px; }

.split-head { align-items: flex-end; margin-bottom: 40px; gap: 16px 40px; }
.split-head .eyebrow { margin-bottom: 10px; }

/* quiet text link with an arrow that nudges on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.link-arrow i { font-size: 12px; transition: transform 0.3s var(--ease); }
.link-arrow:hover { color: var(--gold-ink); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- buttons ---------- */
.btn-aisha {
  padding: 16px 30px;
  letter-spacing: 0.2em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn-aisha-outline { border-color: var(--dark); }

/* ---------- topbar ---------- */
.topbar { background: var(--dark); color: rgba(255, 255, 255, 0.88); font-weight: 400; letter-spacing: 0.18em; padding: 8px 15px; }
.topbar a { color: #fff; font-weight: 700; text-decoration-color: var(--gold); }
.currency-switch select {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.currency-switch select option { color: var(--dark); }

/* ---------- header ---------- */
.site-header { padding-top: 20px; padding-bottom: 0; }
.site-header .header-row { padding-bottom: 14px; }
.brand { font-size: 24px; letter-spacing: 0.32em; font-weight: 700; }
.brand-mark { display: none; }
@media (min-width: 992px) { .header-tools a { font-size: 15px; margin-right: 22px; } }
.main-nav {
  gap: 4px 18px;
  padding: 4px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.main-nav a { font-size: 11px; letter-spacing: 0.22em; padding: 14px 10px; }
.main-nav a::after { left: 10px; right: 10px; bottom: 8px; }

/* ---------- hero ---------- */
.hero,
.hero-slide { min-height: 760px; }
.hero-slide::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.08) 26%, rgba(0, 0, 0, 0) 45%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.26) 42%, rgba(0, 0, 0, 0) 70%);
}
.hero-content { max-width: 560px; }
.hero-content .eyebrow { color: #fff; opacity: 0.9; margin-bottom: 18px; }
.hero-title { font-size: 76px; line-height: 1; font-weight: 400; margin-bottom: 22px; }
.hero-text { font-size: 16px; line-height: 1.7; max-width: 420px; margin-bottom: 34px; }
.hero .btn-aisha { background: #fff; border-color: #fff; color: var(--dark); }
.hero .btn-aisha:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 7%; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  width: 48px;
  height: 48px;
  background-size: 13px;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-carousel .carousel-indicators { margin-bottom: 34px; }
.hero-carousel .carousel-indicators [data-bs-target] { width: 40px; height: 2px; }

/* ---------- collections ---------- */
.features-wrap { background: #fff; padding: 100px 0 90px; }

.cat-tile {
  padding: 34px;
  color: #fff;
  background-color: var(--cream-deep);
  isolation: isolate;
}
.cat-tile::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.62) 100%);
  transition: opacity 0.5s var(--ease);
}
.cat-tile::after {
  /* a slow zoom on the photo, painted as its own layer so text stays crisp */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  background-size: cover;
  transition: transform 1.2s var(--ease);
}
.cat-tile:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 100%); }
.cat-tile:hover::after { transform: scale(1.05); }
.cat-tile:hover { color: #fff; }
.cat-tile-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.cat-tile h3 { font-size: 36px; line-height: 1.05; letter-spacing: 0; margin-bottom: 14px; color: #fff; }
.cat-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.cat-tile-link i { transition: transform 0.3s var(--ease); }
.cat-tile:hover .cat-tile-link i { transform: translateX(4px); }
.cat-stack { gap: 1rem; }
@media (min-width: 992px) { .cat-stack { gap: 1.5rem; } }
.cat-stack .cat-tile { min-height: 300px; }
.cat-tile.tall { min-height: 624px; }

/* ---------- brand statement ---------- */
.statement-band { background: var(--cream); padding: 110px 0; text-align: center; }
.brand-statement { max-width: 820px; }
.brand-statement h2 { font-size: 54px; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 22px; text-transform: none; }
.brand-statement h2 em { font-style: italic; color: var(--gold-ink); }
.brand-statement p:last-child { font-size: 16px; max-width: 560px; margin: 0 auto; }

/* ---------- product sections ---------- */
.section-pad { padding: 100px 0; }
.section-tint { background: var(--cream); }

/* ---------- product card ---------- */
.product { text-align: left; }
.product-thumb { aspect-ratio: 4 / 5; background: var(--cream-deep); }
.product:hover .product-thumb img { transform: scale(1.04); }
.product-thumb img { transition: transform 0.9s var(--ease); }

.product-badge {
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: #fff;
  color: var(--dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.product-action {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.product:hover .product-action,
.product-action:focus-within { opacity: 1; transform: none; }
.product-action form { margin: 0; }
.product-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.product-action-btn:hover { background: var(--dark); color: #fff; }
.product-action-btn.is-disabled { cursor: default; color: var(--muted-text); }
.product-action-btn.is-disabled:hover { background: rgba(255, 255, 255, 0.94); color: var(--muted-text); }
/* the carousel dots move up out of the way of the action */
.product-thumb .carousel-indicators { margin-bottom: 70px; }
.product-thumb .carousel-indicators [data-bs-target] { opacity: 0.6; }
.product-thumb .carousel-indicators .active { opacity: 1; }

.product-body { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; }
.product-title { margin: 0; flex: 1; min-width: 0; }
.product-title a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  min-height: 0;
  -webkit-line-clamp: 2;
}
.product .price {
  margin: 0;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  text-align: right;
  white-space: nowrap;
}
.price del { color: var(--muted-text); font-weight: 400; margin-right: 6px; font-size: 13px; }
.price .price-sale { color: #a23b2a; }

/* touch screens have no hover: show a compact action permanently */
@media (hover: none) {
  .product-action { opacity: 1; transform: none; left: auto; right: 10px; bottom: 10px; }
  .product-action-btn { width: auto; min-height: 34px; padding: 8px 12px; font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; }
  .product-thumb .carousel-indicators { margin-bottom: 14px; justify-content: flex-start; margin-left: 12px; }
}

/* ---------- about ---------- */
.about-wrap { background: #fff; padding: 110px 0; }
.about-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-wrap .section-title { margin-bottom: 22px !important; }
.about-wrap p.about-text { font-size: 16px; margin-bottom: 30px; }

/* ---------- blog ---------- */
.post { text-align: left; }
.post-thumb { aspect-ratio: 4 / 3; }
.post .post-meta { order: 0; margin: 18px 0 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.post h5 { margin: 0; }
.post h5 a { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: 0; min-height: 0; }

/* ---------- gallery ---------- */
.gallery-wrap { padding: 20px 0 110px; }

/* ---------- promise band ---------- */
.promise-band { background: #fff; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-grid { gap: 0; }
.promise {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 34px 26px;
  text-align: left;
  background: none;
  border-left: 1px solid var(--line);
}
.promise:first-child { border-left: 0; }
.promise::after { display: none; }
.promise:hover { transform: none; box-shadow: none; }
.promise-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: var(--cream);
  color: var(--gold-ink);
  font-size: 17px;
}
.promise:hover .promise-icon { background: var(--cream); color: var(--gold-ink); }
.promise h6 { font-size: 11px; margin-bottom: 2px; }
.promise p { font-size: 13px; }

/* ---------- footer / newsletter ---------- */
.site-footer { padding-top: 90px; }
.newsletter {
  background: none;
  padding: 0 0 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  align-items: flex-end;
}
.newsletter .eyebrow { color: var(--gold); }
.newsletter h2 { font-size: 46px; line-height: 1.05; }
.newsletter > div:last-child { flex: 0 1 460px; }
.newsletter p { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin-bottom: 16px; }
.newsletter-form {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.newsletter-form input { flex: 1; border: 0; padding: 14px 0; min-width: 0; font-size: 15px; }
.newsletter-form .btn-aisha { background: none; border: 0; padding: 14px 0 14px 16px; color: #fff; }
.newsletter-form .btn-aisha:hover { color: var(--gold); background: none; }
.footer-col h6 { font-size: 11px; letter-spacing: 0.22em; }
.footer-brand .brand { letter-spacing: 0.32em; }

/* ---------- inner page hero (shared) ---------- */
.page-hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 40%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
}
.page-hero-body h1 { font-size: 64px; line-height: 1.02; font-weight: 400; margin-bottom: 14px; }
.page-hero-body .breadcrumb-x { margin-bottom: 18px; }
.page-hero-compact { min-height: 440px; }
.page-hero-compact .page-hero-body { padding: 40px 0 64px; justify-content: flex-end; }
.page-hero-text { color: rgba(255, 255, 255, 0.88); font-size: 16px; max-width: 480px; margin: 0; }

/* ---------- shop listing ---------- */
.shop-wrap { padding: 44px 0 110px; }

.shop-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  padding: 0 0 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.shop-toolbar .shop-active-filter { margin: 0; font-size: 14px; color: var(--body-text); }
.shop-toolbar .shop-active-filter strong { color: var(--dark); }
.shop-active-filter a { margin-left: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.shop-toolbar-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-toolbar-controls form { gap: 0; }

.shop-search {
  position: relative;
  flex: 0 1 280px;
  max-width: none;
}
.shop-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--muted-text);
  pointer-events: none;
}
.shop-search input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.shop-search input:focus { outline: none; border-color: var(--dark); background: #fff; }

.shop-sort {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 6px 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.shop-sort label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-text); margin-right: 4px; }
.shop-toolbar .shop-sort select { height: 40px; border: 0; background-color: transparent; font-size: 13px; letter-spacing: 0; padding: 0 28px 0 6px; cursor: pointer; }
.shop-toolbar .shop-sort select:focus { outline: none; }

.shop-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--dark);
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shop-filter-bar {
  flex-wrap: nowrap;
  gap: 8px;
  /* bleeds to the screen edge so the chips scroll edge to edge; matches
     .container-x padding (15px, 16px on small phones) */
  margin: 0 -15px 24px;
  padding: 0 15px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-filter-bar::-webkit-scrollbar { display: none; }
.shop-filter-bar a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border-color: var(--line);
  background: #fff;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.shop-sidebar { position: sticky; top: 24px; }
.shop-sidebar-group { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.shop-sidebar-group:last-child { border-bottom: 0; margin-bottom: 0; }
.shop-sidebar h6 { font-size: 11px; letter-spacing: 0.22em; border: 0; padding: 0; margin-bottom: 16px; }
.shop-sidebar ul { margin: 0; }
.shop-sidebar li { margin-bottom: 2px; }
.shop-sidebar a {
  position: relative;
  padding: 7px 0 7px 0;
  font-size: 15px;
  color: var(--body-text);
  transition: color 0.25s var(--ease), padding 0.25s var(--ease);
}
.shop-sidebar a:hover { color: var(--dark); font-weight: 400; padding-left: 6px; }
.shop-sidebar a.active { color: var(--dark); font-weight: 700; padding-left: 18px; }
.shop-sidebar a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--gold-ink);
}

.shop-price-filter { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.shop-price-inputs { display: flex; align-items: center; gap: 8px; color: var(--muted-text); }
.shop-price-filter .shop-price-inputs input {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 14px;
}
.shop-price-filter .shop-price-inputs input:focus { outline: none; border-color: var(--dark); background: #fff; }
.shop-price-filter .btn-aisha { justify-content: center; padding: 13px 20px; }

.shop-sidebar-notes li { padding-left: 0; display: flex; gap: 12px; align-items: baseline; font-size: 13px; line-height: 1.6; }
.shop-sidebar-notes li::before { display: none; }
.shop-sidebar-notes i { color: var(--gold-ink); width: 16px; flex: 0 0 16px; }

.pagination-x a,
.pagination-x span { border-radius: 999px; min-width: 42px; height: 42px; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .hero,
  .hero-slide { min-height: 600px; }
  .hero-title { font-size: 54px; }
  .section-title { font-size: 34px; }
  .brand-statement h2 { font-size: 40px; }
  .page-hero-body h1 { font-size: 46px; }
  .page-hero-compact { min-height: 360px; }
  .page-hero-compact .page-hero-body { padding: 110px 0 44px; }

  .features-wrap,
  .section-pad,
  .about-wrap { padding: 72px 0; }
  .statement-band { padding: 80px 0; }
  .gallery-wrap { padding: 0 0 72px; }
  .cat-tile.tall,
  .cat-stack .cat-tile { min-height: 320px; }

  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .promise:nth-child(3) { border-left: 0; }
  .promise:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .newsletter { align-items: stretch; }
  .newsletter > div:last-child { flex-basis: 100%; }

  .shop-wrap { padding: 28px 0 72px; }
  .shop-toolbar { margin-bottom: 24px; }
  .shop-sidebar { position: static; padding: 24px; margin-bottom: 8px; background: var(--cream); }
  .shop-sidebar.collapsing { padding-top: 0; padding-bottom: 0; }
}

@media (max-width: 767.98px) {
  .topbar { font-size: 10px; letter-spacing: 0.1em; padding-right: 80px; }
  .hero,
  .hero-slide { min-height: 540px; }
  .hero-title { font-size: 42px; }
  .hero-text { font-size: 14px; }
  .section-title { font-size: 30px; }
  .brand-statement h2 { font-size: 32px; }
  .brand-statement p:last-child { font-size: 15px; }
  .page-hero-body h1 { font-size: 38px; }
  .page-hero-text { font-size: 14px; }
  .split-head { margin-bottom: 28px; }
  .cat-tile { padding: 24px; }
  .cat-tile h3 { font-size: 28px; }
  .newsletter { padding: 0 0 48px; }
  .newsletter h2 { font-size: 34px; }
  .newsletter-form { flex-wrap: nowrap; }
  .newsletter-form .btn-aisha { width: auto; }
  .site-footer { padding-top: 64px; }

  .shop-toolbar { flex-direction: column; align-items: stretch; }
  .shop-toolbar-controls { flex-wrap: nowrap; }
  .shop-toolbar-controls .shop-search { flex: 1 1 100%; order: -1; }
  .shop-toolbar-controls { display: grid; grid-template-columns: 1fr auto; }
  .shop-toolbar-controls .shop-search { grid-column: 1 / -1; }
  .shop-sort { min-width: 0; }
  .shop-toolbar .shop-sort select { flex: 1; min-width: 0; }
}

@media (max-width: 575.98px) {
  .hero-title { font-size: 38px; }
  .section-title { font-size: 28px; }
  .brand { font-size: 17px; letter-spacing: 0.24em; }
  .promise-grid { grid-template-columns: 1fr; gap: 0; }
  .promise { border-left: 0; padding: 20px 4px; }
  .promise:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .product-body { flex-direction: column; gap: 4px; padding-top: 12px; }
  .product-title a { font-size: 13px; }
  .product .price { text-align: left; font-size: 13px; }
  .product-badge { top: 10px; left: 10px; }
  .link-arrow { font-size: 10px; letter-spacing: 0.16em; }
  .split-head .link-arrow { display: none; }
  .shop-filter-bar { margin: 0 -16px 24px; padding: 0 16px 4px; }
}
.hero-carousel .carousel-indicators .active { background-color: #fff; background-clip: padding-box; }
.promise { align-items: flex-start; }
@media (min-width: 768px) {
  .shop-toolbar-controls { flex-wrap: nowrap; }
  .shop-toolbar-controls .shop-search { flex: 0 0 280px; }
}
/* the toggle stretches to balance the tools column, so pin its icon left */
@media (max-width: 991.98px) { .header-row > .nav-toggle { justify-content: flex-start; } }

/* ================================================
   Mobile follow-up (client feedback on live site)
   ================================================ */
@media (max-width: 991.98px) {
  .gallery-wrap .section-head { margin-bottom: 24px; }
}

@media (max-width: 767.98px) {
  /* shorter vertical rhythm on phones */
  .section-pad,
  .about-wrap { padding: 56px 0; }
  .statement-band { padding: 60px 0; }
  .gallery-wrap { padding: 0 0 56px; }
}

@media (max-width: 575.98px) {

}

/* card image dots sit top-right, clear of the Sale badge and the cart button */
.product-thumb .carousel-indicators {
  top: 12px;
  bottom: auto;
  left: auto;
  right: 12px;
  margin: 0;
  justify-content: flex-end;
}
.product-thumb .carousel-indicators [data-bs-target] { width: 6px; height: 6px; margin: 0 0 0 5px; }
@media (max-width: 767.98px) { .post-thumb { aspect-ratio: 16 / 9; } }
.product-thumb .product-badge { z-index: 3; }

/* square product photos at every size: 4:5 read as too long */
.product-thumb { aspect-ratio: 1 / 1; }

/* gallery: four squares in a 2x2 block with the big photo beside it, at
   every screen size (the big photo spans both rows) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "a b f f" "c d f f";
  gap: 16px;
}
.gallery-grid .gallery-tile { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
.gallery-grid .gallery-tile:nth-child(1) { grid-area: a; }
.gallery-grid .gallery-tile:nth-child(2) { grid-area: b; }
.gallery-grid .gallery-tile:nth-child(3) { grid-area: c; }
.gallery-grid .gallery-tile:nth-child(4) { grid-area: d; }
/* the big photo fills the height of the two rows beside it */
.gallery-grid .gallery-tile-feature { grid-area: f; aspect-ratio: auto; position: relative; }
.gallery-grid .gallery-tile-feature img { position: absolute; inset: 0; }
@media (max-width: 991.98px) { .gallery-grid { gap: 8px; } }

/* side padding: wider gutters at every size so content never runs to the
   screen edge (also covers Bootstrap's -1.5rem g-lg-5 row margins) */
.container-x { padding: 0 24px; }
.shop-filter-bar { margin: 0 -24px 24px; padding: 0 24px 4px; }
@media (min-width: 992px) { .container-x { max-width: 1248px; padding: 0 32px; } }
@media (max-width: 575.98px) {
  .container-x { padding: 0 20px; }
  .shop-filter-bar { margin: 0 -20px 20px; padding: 0 20px 4px; }
}

/* ================================================
   UI refresh — inner pages (product, cart, checkout,
   account, blog, about, contact, info, auth).
   Header / navbar / page banner are left as they are.
   ================================================ */

/* ---------- shared: headings in the serif, sentence case ---------- */
.pd-title,
.tab-panel h3,
.checkout-box h4,
.cart-summary h4,
.account-content__heading h2,
.tracking-card__heading h4,
.article-comments h3,
.form-card-title,
.policy-card h3,
.help-card h3,
.page-copy h2,
.empty-state h3,
.auth-box h1,
.section-dark h2,
.founder-name {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ---------- shared: form fields ---------- */
.form-x label,
.review-form label,
.summary-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--dark);
}
.form-x input:not([type=radio]):not([type=checkbox]),
.form-x select,
.form-x textarea,
.review-form input,
.review-form select,
.review-form textarea,
.pd-option select,
.summary-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  color: var(--dark);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-x input:not([type=radio]):not([type=checkbox]):focus,
.form-x select:focus,
.form-x textarea:focus,
.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus,
.pd-option select:focus,
.summary-input:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(28, 26, 23, 0.06);
}
/* radios and checkboxes keep their natural size (the 100% width above
   used to stretch them across the row, floating them above their labels) */
.form-x input[type=radio],
.form-x input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--dark);
}
.form-x textarea,
.review-form textarea { min-height: 130px; }

/* white card used for forms and panels */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px;
}
.form-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink);
  font-size: 20px;
}
.form-card-text { max-width: 420px; margin: 12px auto 0; font-size: 14px; }
.form-card-title { font-size: 28px; margin: 0 0 4px; }
.form-card .section-head { margin-bottom: 28px; }

.btn-block { width: 100%; justify-content: center; }

/* ---------- empty states ---------- */
.empty-state { padding: 48px 20px; }
.empty-state > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink);
  font-size: 26px;
  margin-bottom: 18px;
}
.empty-state h3 { font-size: 30px; margin-bottom: 8px; }

/* ---------- product detail ---------- */
.pd-wrap { padding: 64px 0 90px; }
.product-gallery { background: var(--cream-deep); }
.product-gallery .carousel-item img { aspect-ratio: 1 / 1; object-fit: cover; }
.product-zoom { border-radius: 50%; top: 16px; right: 16px; }
.pd-thumbs { gap: 12px; margin-top: 14px; }
.pd-thumbs button { flex: 0 0 84px; border-color: transparent; opacity: 0.55; }
.pd-thumbs button.active,
.pd-thumbs button:hover { border-color: var(--dark); opacity: 1; }

@media (min-width: 992px) { .pd-info { position: sticky; top: 24px; padding-left: 12px; } }
.pd-eyebrow { margin-bottom: 10px; }
.pd-info h1.pd-title { font-size: 48px; line-height: 1.05; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.pd-price { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.pd-price del { font-weight: 400; color: var(--muted-text); }
.pd-rating { margin-bottom: 22px; }
.pd-desc { font-size: 16px; line-height: 1.75; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.pd-meta { margin-bottom: 28px; }
.pd-meta-row { grid-template-columns: 110px 1fr; padding: 5px 0; font-size: 14px; letter-spacing: 0; }
.pd-meta-row .meta-label { font-size: 10px; letter-spacing: 0.18em; color: var(--muted-text); align-self: center; }
.pd-meta-row a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

.pd-option label { font-size: 11px; letter-spacing: 0.14em; }
.pd-option select { min-height: 52px; margin-bottom: 4px; cursor: pointer; }
.qty-row { gap: 12px; }
.qty-box { height: 56px; width: 96px; border-color: var(--line); }
.btn-add-cart { height: 56px; letter-spacing: 0.22em; }

.pd-trust {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  font-weight: 400;
  font-size: 14px;
  color: var(--body-text);
}
.pd-trust li { display: flex; align-items: center; gap: 14px; }
.pd-trust i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink);
  font-size: 14px;
}
.pd-wishlist { margin-top: 20px; font-size: 12px; letter-spacing: 0.14em; }

/* description / reviews: underlined tabs instead of boxes */
.pd-details { margin-top: 80px; }
.pd-tabs { gap: 36px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.pd-tabs button,
.pd-tabs button:first-child {
  position: relative;
  border: 0;
  padding: 0 0 16px;
  color: var(--muted-text);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.pd-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--dark);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.pd-tabs button.active { color: var(--dark); }
.pd-tabs button.active::after { transform: scaleX(1); }
.tab-panel { max-width: 820px; }
.tab-panel h3 { font-size: 30px; margin-bottom: 20px; }
.pd-long-desc { font-size: 16px; line-height: 1.85; white-space: pre-line; }
.review-item { padding: 22px 0; margin: 0; border-bottom: 1px solid var(--line); }
.review-name { letter-spacing: 0.1em; }
.review-form { margin-top: 12px; }

/* ---------- cart ---------- */
.cart-table th { font-size: 10px; letter-spacing: 0.18em; color: var(--muted-text); border-bottom-color: var(--line); }
.cart-table td { border-bottom-color: var(--line); padding: 24px 10px; }
.cart-product { gap: 20px; }
.cart-product img { width: 88px; height: 88px; background: var(--cream-deep); }
.cart-product .name { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dark); }
.cart-product .name:hover { color: var(--gold-ink); }
.cart-variant { font-size: 13px; color: var(--muted-text); margin-top: 2px; }
.qty-inline { border-color: var(--line); border-radius: 999px; overflow: hidden; }
.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
}
.cart-remove:hover { border-color: #c0392b; }

/* order summary panel (cart, checkout, order pages) */
.cart-summary { background: var(--cream); padding: 34px; border: 0; }
.cart-summary h4 { font-size: 28px; margin-bottom: 18px; }
.cart-summary-row { font-size: 14px; padding: 12px 0; border-bottom-color: var(--line); }
.cart-summary-row.total { font-size: 18px; padding-top: 18px; }
.cart-summary-row.total span:last-child { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; }
.summary-cta { margin-top: 20px; min-height: 54px; }
.summary-secure { margin: 14px 0 0; font-size: 12px; color: var(--muted-text); text-align: center; }
.summary-secure i { color: var(--gold-ink); margin-right: 4px; }
@media (min-width: 992px) { .cart-summary { position: sticky; top: 24px; } }

.summary-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary-thumb { position: relative; flex: 0 0 60px; }
.summary-thumb img { width: 60px; height: 60px; object-fit: cover; background: var(--cream-deep); display: block; }
.summary-qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.summary-name { flex: 1; min-width: 0; font-size: 14px; color: var(--dark); line-height: 1.4; }
.summary-name small { display: block; font-size: 12px; color: var(--muted-text); }
.summary-price { font-size: 14px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.summary-label { display: block; margin: 20px 0 8px; font-weight: 700; text-transform: uppercase; }
.summary-input { min-height: 46px; margin-bottom: 8px; }

/* ---------- checkout ---------- */
.checkout-box { border-color: var(--line); padding: 32px; margin-bottom: 20px; background: #fff; }
.checkout-box h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom-color: var(--line);
}
.checkout-box h4 small { font-family: "Lato", Arial, sans-serif; font-size: 13px; color: var(--muted-text); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.checkout-subhead { margin: 24px 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-text); }
.checkout-hint { font-size: 14px; }

.address-radio,
.pay-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.address-radio { align-items: flex-start; }
.address-radio input { margin-top: 3px !important; }
.address-radio:hover,
.pay-option:hover { border-color: var(--border-strong); }
.address-radio:has(input:checked),
.pay-option:has(input:checked) { border-color: var(--dark); background: var(--cream); }
.address-radio .addr-name { font-size: 15px; text-transform: none; letter-spacing: 0; }
.address-radio .addr-line { font-size: 14px; }
.addr-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: 0.12em;
  vertical-align: middle;
}
.pay-option { font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.pay-option span { flex: 1; }
.pay-option i { color: var(--muted-text); font-size: 18px; }

/* ---------- order confirmation ---------- */
.confirm-card { max-width: 640px; margin: 0 auto; text-align: center; }
.confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 0 0 10px var(--cream);
}
.confirm-text { max-width: 480px; margin: 14px auto 32px; font-size: 16px; }
.confirm-summary { text-align: left; }
.confirm-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- account area ---------- */
.account-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
.account-sidebar { background: #fff; border-color: var(--line); padding: 24px 14px 14px; }
.account-sidebar__identity { border-bottom-color: var(--line); }
.account-sidebar__avatar { border-radius: 50%; background: var(--cream); color: var(--gold-ink); font-family: var(--serif); font-size: 20px; }
.account-sidebar__identity strong { font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.account-sidebar > a,
.account-sidebar form a { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; padding: 11px 12px; }
.account-sidebar > a:hover,
.account-sidebar > a.active { background: var(--cream); color: var(--dark); }
.account-sidebar > a.active { font-weight: 700; }
.account-sidebar > a.active i { color: var(--gold-ink); }
.account-sidebar form { border-top-color: var(--line); }
.account-content__heading { border-bottom-color: var(--line); align-items: flex-end; }
.account-content__heading h2 { font-size: 36px; }
.account-empty-note { margin-bottom: 30px; }

.orders-table-wrap { border-color: var(--line); }
.orders-table th { background: var(--cream); font-size: 10px; letter-spacing: 0.16em; color: var(--muted-text); padding: 16px 20px; }
.orders-table td { border-top-color: var(--line); padding: 20px; font-size: 14px; }
.orders-table tbody tr { transition: background 0.2s var(--ease); }
.orders-table tbody tr:hover { background: var(--cream); }

.status-badge { border-radius: 999px; padding: 5px 12px; border: 0; font-size: 10px; }
.status-badge.pending { background: #fbf1dc; color: #8a6207; }
.status-badge.processing { background: #e3edf9; color: #25599a; }
.status-badge.shipped { background: #f5ebdf; color: var(--gold-ink); }
.status-badge.delivered { background: #e3f3e7; color: #26773a; }
.status-badge.cancelled,
.status-badge.refunded { background: #f9e3e0; color: #a3301f; }
.order-status-now { margin-bottom: 22px; }
.order-tracking { margin-top: 20px; font-size: 14px; }
.order-timeline li::before { background: var(--dark); box-shadow: 0 0 0 4px var(--cream); }
.order-timeline li::after { background: var(--line); }
.order-timeline .t-status { font-size: 14px; letter-spacing: 0; text-transform: none; }
.order-timeline .t-note { font-size: 13px; }

.address-card {
  border: 1px solid var(--line);
  padding: 24px 26px;
  margin-bottom: 16px;
  background: #fff;
}
.address-card .addr-name { font-family: var(--serif); font-size: 22px; color: var(--dark); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.address-card .addr-line { font-size: 14px; margin-bottom: 2px; }
.address-actions { display: flex; gap: 10px; margin-top: 16px; }
.address-actions form { margin: 0; }
.address-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.address-btn:hover { border-color: var(--dark); }
.address-btn.delete-link:hover { border-color: #c0392b; color: #c0392b; }
.address-edit { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }

.wishlist-remove { margin-top: 10px; }
.wishlist-remove button {
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--muted-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.wishlist-remove button:hover { color: #c0392b; }

/* ---------- blog ---------- */
.post-excerpt { margin: 10px 0 14px; font-size: 14px; line-height: 1.7; }
.post-more { align-self: flex-start; margin-top: auto; }
.post h5 { margin-bottom: 0; }
.article-cover { height: 460px; margin-bottom: 30px; }
.article-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold-ink); margin-bottom: 20px; }
.article-body { font-size: 17px; line-height: 1.9; }
.article-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.article-comments h3 { font-size: 30px; margin-bottom: 20px; }
.comment-item { border-bottom-color: var(--line); }
.article-comments .form-card { margin: 40px 0 0; }

/* ---------- about ---------- */
.about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.about-split .section-title { margin-bottom: 22px !important; }
.about-lead { font-family: var(--serif); font-size: 24px; line-height: 1.4; color: var(--dark); }
.section-dark { background: var(--dark); padding: 110px 0; }
.section-dark .section-title { color: #fff; }
.founder-quote { font-family: var(--serif); font-size: 26px; line-height: 1.4; font-style: italic; color: #fff; border-left-color: var(--gold); }
.quality-wrap { padding: 110px 0; }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--dark); }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before { position: static; flex: 0 0 auto; }
.check-list { margin-bottom: 30px; }

/* ---------- contact ---------- */
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink);
  font-size: 18px;
}
.contact-item h6 { font-size: 10px; letter-spacing: 0.18em; color: var(--muted-text); margin-bottom: 2px; }
.contact-item p { margin: 0; font-size: 16px; color: var(--dark); }
.contact-boxes { margin-top: 28px; }
.contact-submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contact-submit span { font-size: 13px; color: var(--muted-text); }
.contact-submit span i { color: var(--gold-ink); margin-right: 4px; }

/* ---------- info pages (FAQ, shipping, terms, privacy) ---------- */
.page-copy { max-width: 820px; margin: 0 auto; }
.page-copy h2 { font-size: 34px; }
.faq-item { border-color: var(--line); padding: 0 26px; margin: 0; background: #fff; transition: background 0.25s var(--ease); }
.faq-list { gap: 12px; }
.faq-item[open] { background: var(--cream); border-color: transparent; }
.faq-item summary { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--dark); padding: 22px 0; text-transform: none; letter-spacing: 0; }
.faq-item p { font-size: 15px; }

.policy-card { background: var(--cream); padding: 32px 28px; }
.policy-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--gold-ink);
  font-size: 19px;
  margin-bottom: 18px;
}
.policy-card h3 { font-size: 24px; margin-bottom: 8px; }
.policy-card p { font-size: 14px; margin: 0; }

.help-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 32px 36px;
  background: var(--dark);
  color: rgba(255, 255, 255, 0.78);
}
.help-card h3 { color: #fff; font-size: 30px; margin-bottom: 6px; }
.help-card p { margin: 0; font-size: 14px; }
.help-card .btn-aisha { flex: 0 0 auto; background: #fff; border-color: #fff; color: var(--dark); }
.help-card .btn-aisha:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.legal-copy { font-size: 16px; line-height: 1.85; }
.legal-copy ul { list-style: none; padding: 0; margin: 20px 0 24px; border-top: 1px solid var(--line); }
.legal-copy li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); color: var(--dark); }
.legal-copy li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--gold-ink);
  font-weight: 700;
}
.legal-copy a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- auth screens ---------- */
.auth-body { background: #fff; }
.auth-back {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-back:hover { color: var(--gold-ink); }
.auth-box h1 { font-size: 52px; line-height: 1.05; margin-bottom: 10px; }
.auth-subtitle { font-size: 15px; margin-bottom: 30px; }
.auth-form .btn-aisha { min-height: 52px; }
.auth-meta { font-size: 14px; }
.auth-meta a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.auth-brand { letter-spacing: 0.32em; }

/* ---------- inner pages: responsive ---------- */
@media (max-width: 991.98px) {
  .pd-wrap { padding: 32px 0 64px; }
  .pd-info h1.pd-title { font-size: 38px; }
  .pd-details { margin-top: 56px; }
  .account-shell { grid-template-columns: 1fr; gap: 28px; }
  .section-dark,
  .quality-wrap { padding: 72px 0; }
  .about-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 767.98px) {
  .pd-info h1.pd-title { font-size: 32px; }
  .pd-price { font-size: 22px; }
  .pd-thumbs button { flex-basis: 64px; }
  .form-card { padding: 26px 20px; }
  .checkout-box { padding: 24px 20px; }
  .checkout-box h4 { font-size: 22px; }
  .cart-summary { padding: 26px 20px; }
  .cart-summary h4 { font-size: 24px; }
  .account-content__heading { flex-direction: column; align-items: flex-start; }
  .account-content__heading h2 { font-size: 30px; }
  .help-card { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .help-card h3 { font-size: 26px; }
  .faq-item { padding: 0 18px; }
  .faq-item summary { font-size: 19px; }
  .article-cover { height: 240px; }
  .article-body { font-size: 16px; }
  .auth-box h1 { font-size: 40px; }
  .auth-back { top: 12px; left: 12px; }
  .about-lead { font-size: 21px; }
  .founder-quote { font-size: 22px; }
}

/* the option cards are <label>s inside .form-x: undo the small-caps field
   label style so their content reads as normal text in a flex row */
.form-x label.address-radio,
.form-x label.pay-option {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.form-x label.pay-option { font-weight: 700; }
.form-x label.address-radio { font-weight: 400; }
.check-list li { padding-left: 0; }

/* orders list: one card per order on phones instead of a clipped table */
@media (max-width: 767.98px) {
  .orders-table-wrap { border: 0; overflow: visible; }
  .orders-table { min-width: 0; }
  .orders-table thead { display: none; }
  .orders-table,
  .orders-table tbody,
  .orders-table tr,
  .orders-table td { display: block; width: 100%; }
  .orders-table tr { border: 1px solid var(--line); padding: 8px 18px; margin-bottom: 12px; }
  .orders-table td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 0; }
  .orders-table td + td { border-top: 1px solid var(--line); }
  .orders-table td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-text);
  }
  .orders-table td.orders-view { justify-content: flex-end; }
  .orders-table td.orders-view::before { content: none; }
}

/* ---------- payment state on the order confirmation ---------- */
.confirm-icon.is-pending { background: #f4efe6; color: #9a7b3f; }
.confirm-icon.is-failed { background: #f8eceb; color: #c0392b; }

.payment-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 0 26px;
  font-size: 13px;
}

.pay-badge {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--light-grey);
  color: var(--dark);
}

.pay-badge.pay-paid { background: #e7f2e8; color: #2e7d32; }
.pay-badge.pay-failed { background: #f8eceb; color: #c0392b; }
.pay-badge.pay-refunded { background: #eef1f7; color: #3f5b9a; }

.payment-ref { width: 100%; font-size: 12px; word-break: break-all; }

.pay-option small { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: none; font-weight: 400; color: var(--body-text); }

/* ---------- page banners (admin-managed, separate mobile crop) ---------- */
/* The view sets --hero-desktop / --hero-mobile; phones get the mobile crop
   when one was uploaded, everything from 768px up gets the desktop photo. */
.page-hero { background-image: var(--hero-mobile, var(--hero-desktop)); }

@media (min-width: 768px) {
  .page-hero { background-image: var(--hero-desktop, var(--hero-mobile)); }
}

/* ---------- email verification code ---------- */
.form-x input.otp-input {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: 0.5em;
}
.auth-meta form { display: inline; margin: 0; }
.link-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--gold-ink); }
.verify-meta { margin-top: 22px; }
.auth-alert.success { margin-bottom: 18px; }

/* ---------- hero images: separate phone image / focus (set per banner in admin) ---------- */
.hero-slide { background-image: var(--hero-img); }
@media (max-width: 767.98px) {
  .hero-slide {
    background-image: var(--hero-img-mobile, var(--hero-img));
    background-position: var(--hero-focus, 50% 50%);
  }
}

/* ---------- floating WhatsApp chat ---------- */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040; /* under Bootstrap modals (1055) */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.wa-fab i { font-size: 26px; }
.wa-fab:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); }
.wa-fab:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; }

.wa-dialog { max-width: 420px; }
.wa-modal { border: 0; border-radius: 16px; overflow: hidden; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 18px 20px; background: #075e54; color: #fff; }
.wa-head h2 { margin: 0; color: #fff; font-family: "Lato", Arial, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wa-head p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.wa-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #25d366; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.wa-close { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; }
.wa-close:hover { background: rgba(255, 255, 255, 0.22); }

.wa-body { padding: 20px; background: #efeae2; }
.wa-bubble {
  position: relative;
  margin: 0 0 16px;
  padding: 10px 14px;
  max-width: 88%;
  border-radius: 0 10px 10px 10px;
  background: #fff;
  color: #1c1a17;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.wa-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wa-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(7, 94, 84, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #075e54;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wa-option[hidden] { display: none; }
.wa-option:hover { border-color: #075e54; }
.wa-option.active { background: #075e54; border-color: #075e54; color: #fff; }
.wa-label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #54656f; }
.wa-message {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: #1c1a17;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.wa-message:focus { outline: none; border-color: #25d366; }

.wa-foot { padding: 16px 20px 20px; background: #fff; text-align: center; }
.wa-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.wa-send i { font-size: 22px; }
.wa-send:hover { background: #1ebe5a; color: #fff; }
.wa-note { margin: 10px 0 0; font-size: 12px; color: var(--muted-text); }

@media (max-width: 767.98px) {
  .wa-fab { right: 16px; bottom: 16px; width: 56px; padding: 0; justify-content: center; }
  .wa-fab-label { display: none; }
  /* keep toast messages clear of the button */
  .flash-stack { bottom: 84px; }
}

/* ---------- blog article body (rich-text editor output) ---------- */
.article-body > div,
.article-body p { margin: 0 0 1.2em; }
.article-body h1,
.article-body h2,
.article-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--dark);
  margin: 1.6em 0 0.6em;
}
.article-body h1 { font-size: 32px; }
.article-body h2 { font-size: 28px; }
.article-body h3 { font-size: 22px; }
.article-body ul,
.article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.4em; }
.article-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--dark);
}
.article-body a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; }
.article-body pre { white-space: pre-wrap; background: var(--cream); padding: 14px 16px; font-size: 14px; }
.article-body img { max-width: 100%; height: auto; }

/* ---------- gallery on phones: big photo first, then the four in a 2×2 grid ---------- */
@media (max-width: 767.98px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "f f" "a b" "c d";
    gap: 8px;
  }
  .gallery-grid .gallery-tile-feature { aspect-ratio: 4 / 3; }
  .gallery-wrap .section-head { margin-bottom: 20px; }
}

/* blog article: images, tables and video embeds from the editor */
.article-body img { border-radius: 2px; margin: 0.6em 0; }
.article-body img[style*="float: left"], .article-body img[style*="float:left"] { margin: 0.3em 1.4em 1em 0; }
.article-body img[style*="float: right"], .article-body img[style*="float:right"] { margin: 0.3em 0 1em 1.4em; }
.article-body table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.article-body th,
.article-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body th { background: var(--cream); color: var(--dark); }
.article-body iframe { display: block; width: 100% !important; max-width: 100%; aspect-ratio: 16 / 9; height: auto !important; margin: 0 0 1.4em; border: 0; }
.article-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); opacity: 1; }
.article-body u { text-underline-offset: 3px; }
@media (max-width: 575.98px) {
  .article-body img[style*="float"] { float: none !important; display: block; margin: 0.6em 0; width: 100% !important; }
}

/* Checkout coupon: code field + Apply button, with the result underneath */
.coupon-row { display: flex; gap: 8px; align-items: flex-start; }
.coupon-row .summary-input { flex: 1; min-width: 0; }
.coupon-row .coupon-apply { min-height: 46px; padding: 0 18px; white-space: nowrap; }
.coupon-message { font-size: 13px; margin: 0 0 8px; color: #2e7d32; min-height: 0; }
.coupon-message:empty { display: none; }
.coupon-message.is-error { color: #c62828; }

/* ================================================
   SMOOTH IMAGES
   Photos sit on a soft cream frame and fade in when they arrive (smooth-images.js
   adds .uz-fade only to images still loading, so nothing hides without JS).
   ================================================ */
.hero-slide { background-color: #2a2622; }
.hero { background-color: #2a2622; }
.product-gallery .carousel-inner,
.gallery-tile,
.post-thumb,
.pd-thumbs button { background-color: var(--cream-deep); }
img.uz-fade { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.9s var(--ease); }
img.uz-fade.is-loaded { opacity: 1; }
/* a slightly longer, eased cross-fade on the banner and card photos */
.carousel-fade .carousel-item { transition-duration: 0.8s; transition-timing-function: var(--ease); }
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end { transition: opacity 0s 0.8s; }
@media (prefers-reduced-motion: reduce) {
  img.uz-fade { transition: none; }
  .carousel-fade .carousel-item,
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end { transition: none; }
}

/* ================================================
   GALLERY TILES -> open in the viewer
   ================================================ */
.gallery-tile { display: block; position: relative; cursor: zoom-in; }
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0) 45%, rgba(20, 17, 14, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.gallery-tile-view {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.gallery-tile-view svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gallery-tile:hover::after,
.gallery-tile:focus-visible::after { opacity: 1; }
.gallery-tile:hover .gallery-tile-view,
.gallery-tile:focus-visible .gallery-tile-view { opacity: 1; transform: translate(-50%, 0); }
.gallery-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* touch screens have no hover: a small corner badge says the photo opens */
@media (hover: none) {
  .gallery-tile-view {
    left: auto; right: 10px; bottom: 10px; transform: none; opacity: 1;
    padding: 0; width: 32px; height: 32px; justify-content: center; font-size: 0; gap: 0;
    background: rgba(20, 17, 14, 0.35); border-color: rgba(255, 255, 255, 0.5);
  }
}

/* product page: the photo itself and the expand button open the viewer */
.product-gallery .carousel-item[data-lightbox] { cursor: zoom-in; }
.product-zoom {
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 20px rgba(20, 17, 14, 0.12);
}
.product-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.product-zoom:hover { transform: scale(1.06); }

/* ================================================
   IMAGE VIEWER (lightbox.js)
   ================================================ */
html.uzlb-lock,
html.uzlb-lock body { overflow: hidden; }
.uzlb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0s 0.32s;
}
.uzlb[hidden] { display: none; }
.uzlb.is-open { opacity: 1; visibility: visible; transition: opacity 0.32s var(--ease); }
.uzlb-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(46, 39, 33, 0.92) 0%, rgba(14, 12, 10, 0.97) 70%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.uzlb-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
}
.uzlb-brand { font-size: 12px; font-weight: 700; letter-spacing: 0.42em; color: var(--gold); }
.uzlb-count { font-family: var(--serif); font-size: 18px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); display: inline-flex; align-items: center; gap: 12px; }
.uzlb-count b { font-weight: 500; color: #fff; font-size: 22px; }
.uzlb-count span { display: inline-block; width: 34px; height: 1px; background: rgba(255, 255, 255, 0.35); }
.uzlb-close {
  justify-self: end;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.45s var(--ease), border-color 0.3s, background-color 0.3s, color 0.3s;
}
.uzlb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.uzlb-close:hover,
.uzlb-close:focus-visible { transform: rotate(90deg); border-color: var(--gold); background: var(--gold); color: #1c1a17; outline: none; }

.uzlb-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 96px;
}
.uzlb-figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.5s var(--ease);
}
.uzlb.is-open .uzlb-figure { transform: none; }
.uzlb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}
.uzlb-img.is-active { opacity: 1; transform: none; }
.uzlb-img.no-anim { transition: none; }
.uzlb-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
  animation: uzlb-spin 0.9s linear infinite;
}
.uzlb.is-loading .uzlb-loader { opacity: 1; transition-delay: 0.15s; }
@keyframes uzlb-spin { to { transform: rotate(360deg); } }

.uzlb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.uzlb-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.uzlb-prev { left: 24px; }
.uzlb-next { right: 24px; }
.uzlb-nav:hover,
.uzlb-nav:focus-visible { border-color: #fff; background: #fff; color: #1c1a17; outline: none; }
.uzlb-prev:hover { transform: translateX(-3px); }
.uzlb-next:hover { transform: translateX(3px); }

.uzlb-foot { position: relative; z-index: 2; padding: 10px 28px 22px; text-align: center; }
.uzlb-caption { font-family: var(--serif); font-style: italic; font-size: 20px; color: rgba(255, 255, 255, 0.85); margin: 0 0 14px; min-height: 1.2em; }
.uzlb-thumbs { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.uzlb-thumbs::-webkit-scrollbar { display: none; }
.uzlb-thumbs button {
  position: relative;
  flex: 0 0 56px;
  height: 70px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.uzlb-thumbs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}
.uzlb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uzlb-thumbs button:hover { opacity: 0.75; }
.uzlb-thumbs button.is-active { opacity: 1; transform: translateY(-2px); }
.uzlb-thumbs button.is-active::after { transform: scaleX(1); }
.uzlb-thumbs button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.uzlb.is-single .uzlb-nav,
.uzlb.is-single .uzlb-count { visibility: hidden; }

@media (max-width: 767.98px) {
  .uzlb-bar { padding: 12px 16px; }
  .uzlb-brand { font-size: 11px; letter-spacing: 0.34em; }
  .uzlb-count { font-size: 15px; gap: 8px; }
  .uzlb-count b { font-size: 18px; }
  .uzlb-count span { width: 20px; }
  .uzlb-close { width: 42px; height: 42px; }
  .uzlb-stage { padding: 4px 0; }
  .uzlb-img { filter: none; }
  /* swipe to browse; small arrows stay for those who prefer to tap */
  .uzlb-nav { top: auto; bottom: 12px; margin: 0; width: 40px; height: 40px; background: rgba(20, 17, 14, 0.45); }
  .uzlb-prev { left: 16px; }
  .uzlb-next { right: 16px; }
  .uzlb-foot { padding: 8px 16px 18px; }
  .uzlb-caption { font-size: 17px; margin-bottom: 10px; }
  .uzlb-thumbs button { flex-basis: 46px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .uzlb, .uzlb-figure, .uzlb-img, .uzlb-close, .uzlb-nav { transition: none; }
}

/* ================================================
   CART + CHECKOUT ON PHONES
   ================================================ */
/* the coupon "Apply" button was picking up the full-width summary button
   style and squeezing the code field to a sliver */
.cart-summary .coupon-row .coupon-apply { width: auto; flex: 0 0 auto; margin-top: 0; padding: 0 22px; min-height: 48px; }
.coupon-row { align-items: stretch; }
.coupon-row .summary-input { margin-bottom: 0; }
.coupon-row { margin-bottom: 10px; }

@media (max-width: 767.98px) {
  /* each cart line is a compact card: photo + name on top, then price,
     quantity and line total lined up under the name, remove in the corner */
  .cart-table { margin-bottom: 24px; border-top: 1px solid var(--line); }
  .cart-table tr {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name remove"
      "img price price"
      "img qty sub";
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .cart-table td { padding: 0; border: 0; min-width: 0; }
  /* let the photo and the name sit directly in the card grid */
  .cart-table td.cart-cell-product,
  .cart-table .cart-product { display: contents; }
  .cart-product img { grid-area: img; width: 84px; height: 105px; }
  .cart-product > div { grid-area: name; align-self: start; padding-top: 2px; }
  .cart-product .name { font-size: 15px; line-height: 1.35; display: block; }
  .cart-table td[data-label="Price"] { grid-area: price; justify-content: flex-start; gap: 8px; font-size: 13px; color: var(--muted-text); }
  .cart-table td[data-label="Price"]::before { font-size: 9px; color: var(--muted-text); }
  .cart-table td[data-label="Quantity"] { grid-area: qty; justify-content: flex-start; align-self: end; }
  .cart-table td[data-label="Subtotal"] { grid-area: sub; justify-content: flex-end; align-self: end; line-height: 38px; font-weight: 700; color: var(--dark); font-size: 15px; }
  .cart-table td[data-label="Quantity"]::before,
  .cart-table td[data-label="Subtotal"]::before { display: none; }
  .cart-table td.cart-cell-remove { grid-area: remove; align-self: start; }
  .cart-remove { width: 32px; height: 32px; }
  .qty-inline { height: 38px; }
  .qty-inline button { width: 34px; }
  .qty-inline input { width: 38px; }
  #cart-contents > .row > .col-lg-8 > .btn-aisha-outline { width: 100%; justify-content: center; }

  /* checkout: less nested padding so the fields get the width */
  .checkout-box { padding: 22px 18px; margin-bottom: 14px; }
  .checkout-box h4 { font-size: 21px; padding-bottom: 14px; margin-bottom: 18px; }
  .checkout-box .step-num { width: 28px; height: 28px; font-size: 12px; }
  .cart-summary { padding: 24px 18px; }
  .cart-summary h4 { font-size: 23px; }
  .summary-item { gap: 12px; }
  .summary-name { font-size: 14px; }
  .form-x input:not([type=radio]):not([type=checkbox]),
  .form-x select { min-height: 48px; font-size: 16px; } /* 16px stops iOS zooming into the field */
  .form-x textarea { font-size: 16px; }
}
/* no stray gap under the last field of each checkout step */
.checkout-box > :last-child,
.checkout-box > .row:last-child input,
.checkout-box > label.pay-option:last-child { margin-bottom: 0; }
/* city + country share a row at every width, with a tighter gutter on phones */
.checkout-pair { --bs-gutter-x: 1rem; }

/* ---------- image viewer: zoom ---------- */
.uzlb-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.uzlb-zoom {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.uzlb-zoom button {
  height: 38px;
  min-width: 38px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.uzlb-zoom button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.uzlb-zoom button:hover:not(:disabled),
.uzlb-zoom button:focus-visible { background: rgba(255, 255, 255, 0.14); outline: none; }
.uzlb-zoom button:disabled { opacity: 0.35; cursor: default; }
.uzlb-zoom .uzlb-zoom-level { min-width: 52px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.uzlb.is-single .uzlb-tools { visibility: visible; }

/* the photo follows the zoom quickly; while dragging or pinching it follows the finger exactly */
.uzlb-stage { touch-action: none; overflow: hidden; } /* a zoomed photo stays between the top bar and the thumbnails */
.uzlb-img.is-active { transition: opacity 0.5s var(--ease), transform 0.35s var(--ease); cursor: zoom-in; }
.uzlb-img.is-panning { transition: opacity 0.5s var(--ease); }
.uzlb.is-zoomed .uzlb-img.is-active { cursor: grab; filter: none; }
.uzlb.is-zoomed.is-dragging .uzlb-img.is-active { cursor: grabbing; }
/* while zoomed, the arrows step back so they don't sit on the photo */
.uzlb-nav { transition: opacity 0.3s var(--ease), border-color 0.3s, background-color 0.3s, color 0.3s, transform 0.3s var(--ease); }
.uzlb.is-zoomed .uzlb-nav { opacity: 0.25; }
.uzlb.is-zoomed .uzlb-nav:hover,
.uzlb.is-zoomed .uzlb-nav:focus-visible { opacity: 1; }

@media (max-width: 767.98px) {
  .uzlb-bar { grid-template-columns: auto 1fr; gap: 10px; }
  .uzlb-brand { display: none; }
  .uzlb-tools { gap: 8px; }
  .uzlb-zoom { height: 42px; padding: 0 2px; }
  .uzlb-zoom button { height: 36px; min-width: 36px; }
  .uzlb-zoom .uzlb-zoom-level { min-width: 46px; font-size: 10px; }
}