/* Shandaar Wears — generated CSS for the Tier-B (HtmlRenderer) sections.
   Uploaded to site_settings.sx_css_location (the store's dedicated generated-CSS
   file, separate from the merchant's own css_location) and concatenated there.
   Do NOT @import or minify — the BEGIN/END markers are comments and must survive.

   Every selector is namespaced under .sx so nothing leaks into the theme's
   header, footer, product cards or native sections. Brand colour comes from the
   theme's own --secondary-main; the fallback is the logo-extracted orange. */

/* BEGIN shoopy-gen:base */

.section-wrapper-1 {
  background-color: #faf5ee !important;
}

.sx {
  --sx-brand: var(--secondary-main, #f58220);
  --sx-ink: #1f1b16;
  --sx-espresso: #241e18;
  --sx-muted: #6e6456;
  --sx-cream: #faf5ee;
  --sx-sand: #f3e9da;
  --sx-line: #e8dfd2;
  --sx-gap: 16px;
  --sx-radius: 14px;
  --sx-max: 1240px;
}
.sx,
.sx * {
  box-sizing: border-box;
}
.sx {
  width: 100%;
  color: var(--sx-ink);
}
.sx .sx-wrap {
  max-width: var(--sx-max);
  margin: 0 auto;
  padding: 0 18px;
}
.sx .sx-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c2560b;
}
.sx .sx-h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.sx .sx-lede {
  margin: 0;
  color: var(--sx-muted);
  font-size: 15px;
  line-height: 1.6;
}
.sx .sx-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--sx-ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.sx .sx-rule {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--sx-brand);
  border-radius: 2px;
}
@media (min-width: 768px) {
  .sx .sx-wrap {
    padding: 0 28px;
  }
  .sx .sx-h2 {
    font-size: 34px;
  }
}
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
/* Deliberately a single compact line: it sits between the hero and the first
   products, so every pixel it takes is a pixel of delay before a price. */
.sx-usp {
  background: #fff;
  border-bottom: 1px solid var(--sx-line);
  padding: 12px 0;
}
.sx-usp .sx-usp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px var(--sx-gap);
}
.sx-usp .sx-usp__item {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}
.sx-usp .sx-usp__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.sx-usp .sx-usp__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--sx-brand);
  fill: none;
  stroke-width: 1.7;
}
.sx-usp .sx-usp__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.sx-usp .sx-usp__sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--sx-muted);
  line-height: 1.3;
}
@media (min-width: 900px) {
  .sx-usp .sx-usp__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sx-usp .sx-usp__item {
    justify-content: center;
  }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:offers-1 */
/* The page's second dark moment, and the only place a coupon code appears.
   Sits directly under Best Sellers, where intent is highest. */
.sx-offers {
  background: var(--sx-espresso);
  padding: 26px 0;
}
.sx-offers .sx-offers__grid {
  display: grid;
  gap: 12px;
}
.sx-offers .sx-offers__card {
  border: 1px dashed rgba(245, 130, 32, 0.55);
  border-radius: var(--sx-radius);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.sx-offers .sx-offers__badge {
  flex: 0 0 auto;
  background: var(--sx-brand);
  color: var(--sx-espresso);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 9px 12px;
  border-radius: 9px;
  text-align: center;
  line-height: 1.1;
}
.sx-offers .sx-offers__badge small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.sx-offers .sx-offers__title {
  margin: 0;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}
.sx-offers .sx-offers__sub {
  margin: 3px 0 0;
  color: #c9bfb0;
  font-size: 12.5px;
  line-height: 1.45;
}
.sx-offers .sx-offers__code {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sx-brand);
}
@media (min-width: 820px) {
  .sx-offers {
    padding: 30px 0;
  }
  .sx-offers .sx-offers__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
/* END shoopy-gen:offers-1 */

/* BEGIN shoopy-gen:story-1 */
.sx-story {
  padding: 40px 0;
  background: var(--sx-sand);
}
.sx-story .sx-story__grid {
  display: grid;
  gap: 26px;
}
.sx-story .sx-story__points {
  display: grid;
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.sx-story .sx-story__point {
  display: flex;
  gap: 14px;
}
.sx-story .sx-story__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sx-brand);
  color: var(--sx-ink);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}
.sx-story .sx-story__ptitle {
  margin: 4px 0 3px;
  font-size: 15px;
  font-weight: 700;
}
.sx-story .sx-story__ptext {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sx-muted);
}
.sx-story .sx-story__aside {
  background: #fff;
  border-radius: var(--sx-radius);
  padding: 26px 24px;
  align-self: start;
}
.sx-story .sx-story__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sx-line);
}
.sx-story .sx-story__stat:last-child {
  border-bottom: 0;
}
.sx-story .sx-story__statnum {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sx-story .sx-story__statlabel {
  font-size: 13px;
  color: var(--sx-muted);
}
@media (min-width: 900px) {
  .sx-story {
    padding: 60px 0;
  }
  .sx-story .sx-story__grid {
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: center;
  }
}
/* END shoopy-gen:story-1 */

/* BEGIN shoopy-gen:reviews-1 */
.sx-reviews {
  padding: 40px 0 46px;
  background: var(--sx-cream);
}
.sx-reviews .sx-reviews__head {
  text-align: center;
  margin-bottom: 22px;
}
.sx-reviews .sx-reviews__head .sx-rule {
  margin: 14px auto 0;
}
.sx-reviews .sx-reviews__score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  padding: 7px 16px;
}
.sx-reviews .sx-reviews__scorenum {
  font-size: 19px;
  font-weight: 800;
}
.sx-reviews .sx-reviews__scoretext {
  font-size: 12.5px;
  color: var(--sx-muted);
}
.sx-reviews .sx-reviews__grid {
  display: grid;
  gap: 14px;
}
.sx-reviews .sx-reviews__card {
  background: #fff;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  padding: 22px 20px;
}
.sx-reviews .sx-reviews__stars {
  margin: 0;
  color: var(--sx-brand);
  font-size: 14px;
  letter-spacing: 2px;
}
.sx-reviews .sx-reviews__quote {
  margin: 10px 0 16px;
  font-size: 14.5px;
  line-height: 1.65;
}
.sx-reviews .sx-reviews__who {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}
.sx-reviews .sx-reviews__where {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--sx-muted);
}
.sx-reviews .sx-reviews__verified {
  color: #1e7a46;
  font-weight: 700;
}
@media (min-width: 820px) {
  .sx-reviews {
    padding: 56px 0 60px;
  }
  .sx-reviews .sx-reviews__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
/* END shoopy-gen:reviews-1 */

/* =========================================================
   CSS EXTRACTED FROM index.html
   Combined with theme.css — 10 Sep 2026
   ========================================================= */

:root {
  --secondary-main: #f58220; /* brand — logo-extracted */
  --secondary-dark: #d96a12;
  --deal-text: #c2560b; /* orange dark enough for text on white */
  --ink: #1f1b16; /* text + PRIMARY CTA */
  --espresso: #241e18; /* dark sections — the page's contrast moments */
  --ink-soft: #3a342c;
  --muted: #6e6456;
  --cream: #faf5ee; /* page */
  --sand: #f3e9da; /* panels */
  --surface: #ffffff;
  --line: #e8dfd2;
  --success: #1e7a46;
  --star: #b57200; /* rating stars — 3.91:1 on white, distinct from brand + deal */
  --radius: 12px;
  --radius-lg: 18px;
  --pill: 999px;
  --container: 1240px;
  --font-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* section framing */
.sec {
  padding: 30px 0;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deal-text);
  margin: 0 0 7px;
}
.section-heading h2 {
  font-size: 23px;
}
.section-heading .sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}
.viewall {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--secondary-main);
  padding-bottom: 2px;
}

/* buttons — PRIMARY CTA is ink; orange is reserved for deals, so "buy" never
   competes with "save" */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* ---- Tier C: notice bar ---- */
.notice {
  background: var(--espresso);
  color: #fff;
  font-size: 12.5px;
  text-align: center;
  padding: 2px;
}
.notice b {
  color: var(--secondary-main);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ---- Tier C: header ---- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.brand img {
  height: 42px;
  width: auto;
}
.search {
  flex: 1;
  display: none;
  align-items: center;
  gap: 9px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 10px 16px;
  color: var(--muted);
  font-size: 13.5px;
}
.search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.9;
}
.hdr-call {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
}
.hdr-call svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: var(--secondary-main);
  fill: none;
  stroke-width: 1.8;
}
.hdr-call b {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.hdr-call i {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
}
.icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.iconbtn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.iconbtn:hover {
  background: var(--cream);
}
.iconbtn svg {
  width: 19px;
  height: 19px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  background: var(--secondary-main);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
  font-style: normal;
}
.burger {
  display: grid;
}
.....nav-link {
  gap: 24px;
  padding: 0 0 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.....nav-link a {
  padding-bottom: 3px !important;
  border-bottom: 2px solid transparent !important;
}
.....nav-link a:hover {
  border-bottom-color: var(--secondary-main);
}
.....nav-link .sale {
  color: var(--deal-text);
  font-weight: 700;
}
.search-m {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 9px 15px;
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 10px;
}
.search-m svg {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.9;
}

/* ---- Tier A: hero (StoreBanner) ----
   Copy sits on the banner image's own dark panel — 46% of the width on desktop,
   the top 40% on mobile — so the offer, the price anchor and the CTA are all
   above the fold and the garment still gets the whole photo half. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar {
  display: none;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.slide img {
  width: 100%;
  display: block;
  aspect-ratio: 900/1400;
  object-fit: cover;
}
/* Legibility scrim over the copy zone — invisible on the pale wall these shots
   are composed around, insurance if a busier photograph is dropped in later. */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(250, 245, 238, 0.94) 0%,
    rgba(250, 245, 238, 0.82) 34%,
    rgba(250, 245, 238, 0) 56%
  );
}
.slide-copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 0;
  color: var(--ink);
  z-index: 1;
}
.offer-pill {
  display: inline-block;
  background: var(--secondary-main);
  color: var(--espresso);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 6px 11px;
  border-radius: 5px;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.slide-copy h1 {
  font-size: 27px;
  line-height: 1.07;
  color: var(--ink);
}
.slide-copy .lede {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  max-width: 32ch;
}
.price-anchor {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 13px 0 15px;
  flex-wrap: wrap;
}
.price-anchor .from {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.price-anchor .amt {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
}
.price-anchor .cut {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}
.hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  gap: 7px;
  z-index: 2;
  background: rgba(31, 27, 22, 0.3);
  padding: 7px 11px;
  border-radius: var(--pill);
}
.hero-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.hero-dots button[aria-current="true"] {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* ---- Tier A: categories — portrait cards, not circles.
   Circular torso crops made "Kurta Pajama" and "Kids' Kurta" both read as a
   white torso; a portrait card shows the whole look. ---- */
.cats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar {
  display: none;
}
.cat {
  flex: 0 0 auto;
  width: 124px;
}
.cat .shot {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.cat img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.cat b {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}
.cat i {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Tier A: product rows / grids ---- */
.prow {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.prow::-webkit-scrollbar {
  display: none;
}
.prow .pcard {
  flex: 0 0 63%;
  scroll-snap-align: start;
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcard .pimg {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.pcard .pimg img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pcard:hover .pimg img {
  transform: scale(1.04);
}
.off {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--secondary-main);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.rank {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--espresso);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: 0.06em;
}
.rank ~ .off {
  top: 34px;
}
.wish {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
}
.wish svg {
  width: 15px;
  height: 15px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.7;
}
.sizes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 9px 7px;
  font-size: 10px;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97),
    rgba(255, 255, 255, 0)
  );
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.pbody {
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prate {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
}
.prate .stars {
  color: var(--star);
  letter-spacing: 0.5px;
}
.prate .cnt {
  color: var(--muted);
  font-weight: 500;
}
.pfab {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pname {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pprice {
  margin-top: auto;
}
.pprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 7px;
  flex-wrap: wrap;
}
.pnow {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-head);
}
.pmrp {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: line-through;
}
.psave {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--deal-text);
}
.padd {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
  text-align: center;
}
.pcod {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--success);
  font-weight: 600;
}

/* ---- Tier A: BannerCollection ---- */
.promo {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.promo img {
  width: 100%;
  display: block;
}
.promo-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 0;
}
.promo-content h2 {
  font-size: 24px;
  line-height: 1.08;
}
.promo-content p {
  margin: 9px 0 15px;
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 30ch;
}

/* ---- Tier A: LargeCollectionCard trio ---- */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.fcard {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
}
.fcard img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.fcard .fc {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(
    to top,
    rgba(31, 27, 22, 0.8),
    rgba(31, 27, 22, 0)
  );
}
.fcard h3 {
  color: #fff;
  font-size: 19px;
}
.fcard span {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid var(--secondary-main);
  padding-bottom: 2px;
}

/* ---- Tier C: footer ---- */
.ftr {
  background: var(--espresso);
  color: #c9bfb0;
  padding: 36px 0 0;
  font-size: 13.5px;
}
.ftr-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
.ftr h4 {
  color: #fff;
  font-size: 12.5px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.ftr-brand strong {
  display: block;
  font-family: var(--font-head);
  font-size: 21px;
  color: #fff;
}
.ftr-brand strong em {
  font-style: normal;
  color: var(--secondary-main);
}
.ftr-brand p {
  margin: 9px 0 0;
  line-height: 1.65;
  max-width: 34ch;
}
.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ftr a:hover {
  color: #fff;
}
.ftr-contact li {
  display: flex;
  gap: 9px;
  line-height: 1.5;
}
.ftr-contact svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  stroke: var(--secondary-main);
  fill: none;
  stroke-width: 1.8;
}
.pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.pay span {
  background: #fff;
  color: var(--espresso);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 4px;
}
.ftr-legal {
  margin-top: 28px;
  border-top: 1px solid #3e3730;
  padding: 16px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
  color: #8c8275;
}

@media (min-width: 560px) {
  .prow .pcard {
    flex: 0 0 42%;
  }
}
@media (min-width: 768px) {
  .slide img {
    aspect-ratio: 1920/760;
  }
  .slide::after {
    background: linear-gradient(
      to right,
      rgba(250, 245, 238, 0.92) 0%,
      rgba(250, 245, 238, 0.74) 34%,
      rgba(250, 245, 238, 0) 58%
    );
  }
  .slide-copy {
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    padding: 0 22px 0 28px;
    max-width: 52%;
  }
  .slide-copy h1 {
    font-size: 30px;
  }
  .promo-content {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: 50%;
    padding: 0 30px 26px 10px;
  }
  .promo-content h2 {
    font-size: 28px;
  }
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .prow .pcard {
    flex: 0 0 31%;
  }
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 820px) {
  .ftr-cols {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  }
}
@media (min-width: 1024px) {
  .sec {
    padding: 44px 0;
  }
  .wrap {
    padding: 0 28px;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .search {
    display: flex;
  }
  .search-m {
    display: none;
  }
  .hdr-call {
    display: flex;
  }
  .....nav-link-link-link-link {
    display: flex;
  }
  .burger {
    display: none;
  }
  .brand img {
    height: 50px;
  }
  /* Indent to the container's left edge, but ONLY on the left — the trailing
     inset stays fixed so the measure doesn't collapse on wide screens. */
  .slide-copy {
    padding: 0 28px 0 max(28px, calc((100vw - var(--container)) / 2 + 28px));
  }
  .slide-copy h1 {
    font-size: 47px;
  }
  .slide-copy .lede {
    font-size: 15.5px;
    margin-top: 13px;
  }
  .price-anchor {
    margin: 18px 0 22px;
  }
  .price-anchor .amt {
    font-size: 32px;
  }
  .promo-content {
    width: 46%;
    padding: 0 40px 46px 0;
  }
  .promo-content h2 {
    font-size: 36px;
  }
  .promo-content p {
    font-size: 14.5px;
  }
  .pgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .prow {
    gap: 18px;
  }
  .prow .pcard {
    flex: 0 0 calc((100% - 3 * 18px) / 4);
  }
  .pname {
    font-size: 13.8px;
  }
  .pnow {
    font-size: 18px;
  }
  .cat {
    width: 180px;
  }
  .cat b {
    font-size: 13.5px;
    margin-top: 11px;
  }
  .features {
    gap: 18px;
  }
}
@media (min-width: 1280px) {
  .slide-copy h1 {
    font-size: 54px;
  }
}
.section-wrapper-1 .section-1 {
  background-color: #faf5ee !important;
}
.md\:px-10 {
  background-color: #faf5ee !important;
}
.sh-product-plus-minus-button {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
  text-align: center;
}
.sh-product-plus-minus-button:hover {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
  text-align: center;
}

.pr-outlined-button {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
  text-align: center;
}
.pr-outlined-button:hover {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
  text-align: center;
}

.cat-card-img {
  border-radius: 20px !important;
}
.badge {
  color: var(--header-badge-main) !important;
  background-color: var(--header-badge-contrast-text) !important;
}

.title-punchline--desktop {
  font-size: 16px;
  margin-bottom: 4px;

  color: #FAF5EE !imprtant;
}
.app-bar-main {
  background-color: #FAF5EE !important;
}