/* Poppins draws its own stylised ₹; this font holds only the standard ₹ glyph (from Noto Sans, SIL Open Font License)
   and sits first in every font stack, so the rupee sign looks right next to any text. */
@font-face {
  font-family: 'Rupee Sign';
  src: url('../fonts/rupee-noto-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+20B9;
}

:root {
  --rose: #b8124a;
  --rose-dark: #960c3b;
  --rose-light: #e4577f;
  --maroon: #4a1626;
  --plum: #3d0e1d;
  --brown: #6e3b34;
  --green: #1e5a3c;
  --ink: #2a1a1e;
  --muted: #6b5a5e;
  --line: #f0dfe3;
  --tint: #fcf0f2;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Rupee Sign', 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif; margin: 0; line-height: 1.15; font-weight: 600; }
p, figure, blockquote { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
.icon { width: 1em; height: 1em; display: block; }
[hidden] { display: none !important; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.section { padding-top: 48px; }
.section-pad { padding-top: 48px; padding-bottom: 48px; }
.tinted { background: linear-gradient(180deg, var(--white) 0%, var(--tint) 100%); margin-top: 48px; }
.styled-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: clamp(28px, 3.2vw, 46px);
  color: var(--ink);
  text-align: center;
}
.styled-title em { font-style: italic; font-weight: 500; color: var(--rose); }
.styled-title .upright { font-style: normal; }
.styled-title::before,
.styled-title::after { content: ''; flex-shrink: 0; width: clamp(36px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--rose)); }
.styled-title::after { background: linear-gradient(90deg, var(--rose), transparent); }
.title-flourish { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: #d4466f; }
.title-flourish svg { width: 30px; height: 25px; }
.title-flourish i { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); opacity: 0.55; }
.feature-heading { margin-bottom: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-primary { background: var(--rose); color: var(--white); }
.btn-primary:hover { background: var(--rose-dark); }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-pink { background: var(--rose-light); color: var(--white); }
.btn-small { padding: 9px 18px; font-size: 13px; border-radius: 20px; color: var(--white); background: var(--rose); }
.variant-green .btn-small { background: var(--green); }
.variant-brown .btn-small { background: var(--brown); }

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 86px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: auto; height: 64px; flex-shrink: 0; display: block; }
.logo-text strong {
  display: block;
  font-family: 'Rupee Sign', 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--maroon);
  line-height: 1;
}
.logo-js { color: #d98877; }
.logo.light .logo-js { color: #f2b3a3; }
.logo-text small { display: block; font-size: 9px; letter-spacing: 1.6px; color: var(--muted); margin-top: 4px; }
.logo-text strong, .logo-text small { white-space: nowrap; }
.logo.light .logo-text strong { color: var(--white); }
.logo.light .logo-text small { color: #e3c3cb; }

.main-nav { display: flex; gap: 36px; font-size: 14px; }
.main-nav a { padding: 8px 0; position: relative; }
.main-nav a.active, .main-nav a:hover { color: var(--rose); }
.main-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--rose);
}

.header-icons { display: flex; gap: 22px; font-size: 22px; color: var(--ink); }
.cart { position: relative; }
.badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--rose);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

/* Image placeholders until real photos are added */
.img-ph { position: relative; overflow: hidden; background: #c98b95; }
.tone-rose { background: linear-gradient(135deg, #a5123f, #d23d68 55%, #f2b6c5); }
.tone-green { background: linear-gradient(135deg, #123f29, #2d7650 55%, #a8cdb3); }
.tone-brown { background: linear-gradient(135deg, #5a2d27, #a2554a 55%, #ecc0b0); }
.tone-maroon { background: linear-gradient(135deg, #3c1220, #7a2c40 55%, #c98b95); }
.tone-pink { background: linear-gradient(135deg, #dc6f8d, #f6c6d3); }
.tone-navy { background: linear-gradient(135deg, #111c3a, #2c4277 70%, #8c9ccc); }
.tone-gold { background: linear-gradient(135deg, #a7741a, #e2b142 55%, #f6e3b0); }
.tone-mauve { background: linear-gradient(135deg, #7d4a5a, #b88c97 55%, #ead3d9); }

.photo-cover { position: relative; overflow: hidden; }
.photo-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero */
.hero {
  position: relative;
  aspect-ratio: 2014 / 781;
  min-height: 480px;
  background-color: #f4e2d4;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.hero-slide .container,
.hero-dots .container { position: relative; width: 100%; max-width: none; padding-left: clamp(24px, 5vw, 96px); }
.hero-slide .container { z-index: 2; }
.hero-text { padding: 56px 0; max-width: 640px; }
.hero-slide :is(.eyebrow, .hero-title, .hero-sub) { text-shadow: 0 1px 14px rgba(255, 246, 240, 0.85); }
.eyebrow { font-size: 13px; letter-spacing: 4px; color: var(--ink); margin-bottom: 18px; font-weight: 500; }
.hero-title { font-size: clamp(36px, 4vw, 58px); color: var(--ink); line-height: 1.12; }
.hero-title .accent { color: var(--rose); }
.hero-sub { margin: 22px 0 28px; color: var(--ink); font-size: 14px; }
.hero-sub i { font-style: normal; margin: 0 6px; color: var(--muted); }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 2; }
.dots { display: flex; gap: 10px; }
.dots button { width: 9px; height: 9px; border-radius: 50%; background: #ecc3cd; transition: background 0.2s, width 0.2s; }
.dots button.on { background: var(--rose); width: 22px; border-radius: 5px; }

/* Category cards */
.services-heading { padding-top: 52px; }
.category-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.category-card {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 38%);
  border-radius: 8px;
  overflow: hidden;
  min-height: 300px;
}
.category-card.variant-rose { background: #fbe1e7; }
.category-card.variant-green { background: #e8f0e5; }
.category-card.variant-brown { background: #f8e8de; }
.category-body { padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.category-icon { font-size: 54px; color: var(--rose); }
.variant-green .category-icon { color: var(--green); }
.variant-brown .category-icon { color: var(--brown); }
.category-body h3 { font-size: 26px; color: var(--rose); }
.variant-green h3 { color: var(--green); }
.variant-brown h3 { color: var(--brown); }
.category-body p { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.category-body .btn-small { align-self: flex-start; padding-left: 14px; padding-right: 14px; }

/* Makeup banner */
.makeup-banner {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  align-items: stretch;
  min-height: 260px;
  color: var(--white);
  background: linear-gradient(90deg, #5e1b2c 0%, #8a3447 60%, #6a2132 100%);
}
.banner-text { display: flex; align-items: center; gap: 28px; padding: 32px 0 32px 48px; }
.banner-icon { font-size: 64px; color: #f2c6d2; opacity: 0.85; }
.makeup-banner h2 { font-size: 38px; font-weight: 500; color: #f7dfe5; }
.makeup-banner p { margin: 12px 0 20px; color: #f2cfd8; font-size: 14px; }
.banner-media { position: relative; min-height: 100%; overflow: hidden; }
.banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.banner-list { display: grid; align-content: center; gap: 22px; padding: 32px 40px; font-size: 14px; }
.banner-list li { display: flex; align-items: center; gap: 14px; }
.banner-list li span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f6e4e8;
  color: var(--maroon);
  font-size: 16px;
}

/* Section headings */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.section-head h2 { font-size: 32px; color: var(--ink); }
.section-head a { color: var(--rose); font-size: 14px; font-weight: 500; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.product-card { position: relative; }
.product-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 6px; }
.product-card h4 a:hover { color: var(--rose); }
.product-card h4 { font-family: 'Rupee Sign', 'Poppins', sans-serif; font-size: 13px; font-weight: 500; margin-top: 14px; }
.product-card .price { color: var(--rose); font-weight: 600; font-size: 15px; margin-top: 4px; }
.wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 16px;
}

/* Why choose */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1300px; margin: 0 auto; }
.feature-card {
  background: var(--white);
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(74, 22, 38, 0.05);
}
.feature-icon {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #f8dde4;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px #ecb6c4, 0 6px 18px rgba(74, 22, 38, 0.15);
}
.feature-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Newsletter */
.newsletter { background: linear-gradient(180deg, var(--tint) 0%, #f8dbe3 100%); }
.newsletter-inner { display: flex; align-items: center; gap: 32px; padding-top: 36px; padding-bottom: 36px; }
.newsletter-art { font-size: 80px; color: #e9a7b8; }
.newsletter-text { flex: 1; }
.newsletter-text h2 { font-size: 28px; color: var(--ink); margin-bottom: 8px; font-weight: 500; }
.newsletter-text p { font-size: 13px; color: var(--muted); }
.newsletter-form {
  display: flex;
  width: 540px;
  max-width: 100%;
  background: var(--white);
  border-radius: 6px;
  padding: 6px;
}
.newsletter-form input { flex: 1; min-width: 0; padding: 10px 14px; border: 0; outline: none; background: transparent; }
.newsletter-form .btn { padding: 12px 34px; }

/* Footer */
.site-footer { background: var(--plum); color: #e4c9d0; padding-top: 56px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1.1fr; gap: 40px; }
.footer-brand p { font-size: 13px; margin: 18px 0 22px; max-width: 320px; color: #dcbcc4; }
.site-footer h4 { font-family: 'Rupee Sign', 'Poppins', sans-serif; font-size: 15px; color: var(--white); margin-bottom: 18px; font-weight: 500; }
.site-footer li { font-size: 13px; margin-bottom: 12px; }
.site-footer li a:hover { color: var(--white); }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list .icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; color: var(--white); }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #8f5565;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--white);
}
.payments { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; }
.pay {
  height: 38px;
  background: var(--white);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.pay-visa { color: #1a1f71; font-style: italic; font-size: 14px; }
.pay-mastercard { display: flex; justify-content: center; align-items: center; }
.pay-mastercard i { width: 18px; height: 18px; border-radius: 50%; background: #eb001b; display: block; }
.pay-mastercard i + i { background: #f79e1b; margin-left: -7px; opacity: 0.9; }
.pay-rupay { color: #0f5a9c; font-style: italic; }
.pay-upi { color: #4a4a4a; font-style: italic; }
.pay-paytm { color: #00baf2; }
.pay-paytm b { color: #002e6e; }
.pay-gpay { color: #5f6368; font-weight: 600; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid #5c2535;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.footer-legal a + a::before { content: '|'; margin: 0 10px; color: #8f5565; }

/* Blouse categories page */
/* Floral arch backdrop in three layers: the side decorations always show whole at the section's height,
   and the plain watercolour middle stretches to fill whatever width is left. */
.catalog {
  position: relative;
  overflow: hidden;
  padding: 48px 16px 56px;
  background:
    url('../img/rack/backdrop-left.webp') left center / auto 100% no-repeat,
    url('../img/rack/backdrop-right.webp') right center / auto 100% no-repeat,
    #fcebe7 url('../img/rack/backdrop-wash.jpg') center / cover no-repeat;
}
.catalog-heading { position: relative; margin: 0 0 30px; padding: 0 16px; text-align: center; }
.catalog-sub { margin-top: 12px; color: var(--muted); font-size: 15px; }
.rack {
  max-width: 1305px;
  margin: 0 auto;
  padding: 10px 12px 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ecc9a6 0%, #dcae84 100%);
  box-shadow: 0 22px 44px rgba(92, 53, 25, 0.22), inset 0 0 0 1px rgba(255, 240, 220, 0.6);
}
.rack-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.rack-cell { position: relative; }
/* Each photo's width and height attributes give its shape (464 x 488 blouses; 370 wide chudidars and sarees). */
.rack-cell img { width: 100%; height: auto; display: block; }
.rack-label {
  position: absolute;
  left: 6.5%;
  right: 6.5%;
  top: 82.6%;
  bottom: 2.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fffaf4 0%, #fbeee0 100%);
  border: 1px solid #ecd6bd;
  box-shadow: 0 3px 8px rgba(92, 53, 25, 0.16);
  font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif;
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.rack-label .icon { font-size: 1.3em; color: #9b2c3f; flex-shrink: 0; }

/* Chudidar and saree racks: each label covers the one printed in the photo, so it follows that spot per column and shelf. */
.rack--photo .rack-grid { align-items: end; }
.rack--photo .rack-cell { --l: 6.5%; --r: 6.5%; --t: 82%; --b: 3.2%; }
.rack--photo .rack-cell:nth-child(n + 6) { --t: 81.2%; --b: 5.4%; }
.rack--photo .rack-cell:nth-child(5n + 1) { --l: 9.1%; --r: 6.8%; }
.rack--photo .rack-cell:nth-child(5n + 2) { --l: 5.7%; }
.rack--photo .rack-cell:nth-child(5n + 3) { --l: 6.2%; --r: 6.2%; }
.rack--photo .rack-cell:nth-child(5n + 4) { --l: 6%; --r: 5.7%; }
.rack--photo .rack-cell:nth-child(5n) { --r: 8.6%; }
.rack--photo .rack-label { left: var(--l); right: var(--r); top: var(--t); bottom: var(--b); }
.rack--photo .rack-label .icon { color: #e0245e; }

.collection-tabs { display: inline-flex; gap: 4px; margin-top: 18px; padding: 5px; border: 1px solid #f1cfd5; border-radius: 999px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 6px 18px rgba(150, 40, 70, 0.08); }
.collection-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 24px; border-radius: 999px; font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 600; color: var(--maroon); transition: background 0.2s, color 0.2s; }
.collection-tabs a .icon { font-size: 19px; color: var(--rose); }
.collection-tabs a:hover { background: #fdebef; }
.collection-tabs a[aria-current="true"] { background: linear-gradient(180deg, #e8195b, #c90f49); color: var(--white); box-shadow: 0 4px 12px rgba(200, 15, 73, 0.3); }
.collection-tabs a[aria-current="true"] .icon { color: var(--white); }
.collection-tabs a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.promises { background: linear-gradient(180deg, #fcebe7 0%, #f9dfdc 100%); border-top: 1px solid #f1d2c8; }
.promise-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px 0; }
.promise-strip li { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 12px; }
.promise-strip li + li { border-left: 1px solid #e9c2b9; }
.promise-icon { color: var(--maroon); font-size: 34px; flex-shrink: 0; }
.promise-icon .icon { stroke-width: 1.3; }
.promise-strip strong { display: block; font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 600; color: var(--maroon); }
.promise-strip li div span { font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  /* The section gets tall here, so the side decorations keep a fixed size at the top instead. */
  .catalog { background-size: auto 520px, auto 520px, cover; background-position: left top, right top, center; }
  .rack { width: 100%; max-width: 560px; margin: 0 auto; }
  .rack-grid { grid-template-columns: repeat(2, 1fr); }
  .rack-label { font-size: 13px; }
}

@media (max-width: 640px) {
  .catalog { background-size: auto 300px, auto 300px, cover; }
}

@media (max-width: 1100px) {
  .promise-strip { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .promise-strip li:nth-child(odd) { border-left: 0; }
}

@media (max-width: 768px) {
  .catalog { padding: 32px 16px 40px; }
  .catalog-sub { font-size: 13px; }
  .collection-tabs a { gap: 6px; padding: 8px 14px; font-size: 14px; }
  .collection-tabs a .icon { font-size: 16px; }
  .rack { padding: 6px 8px 10px; }
  .rack-grid { grid-template-columns: repeat(2, 1fr); }
  .rack-label { gap: 5px; font-size: 12px; }
  .promise-strip { grid-template-columns: 1fr; padding: 18px 0; }
  .promise-strip li { justify-content: flex-start; padding: 12px 4px; }
  .promise-strip li + li { border-left: 0; border-top: 1px solid #e9c2b9; }
}

@media (max-width: 400px) {
  .collection-tabs { gap: 2px; padding: 4px; }
  .collection-tabs a { gap: 5px; padding: 7px 10px; font-size: 13px; }
  .collection-tabs a .icon { font-size: 15px; }
  .rack-label { gap: 4px; padding: 0 3px; font-size: 10.5px; letter-spacing: -0.2px; }
}

@media (max-width: 340px) {
  .catalog-heading { padding: 0; }
  .collection-tabs a { padding: 7px 8px; font-size: 12.5px; }
  .collection-tabs a .icon { display: none; }
  .rack-label { font-size: 9.5px; }
  .rack-label .icon { display: none; }
}

/* Product page */
.pd-wrap { max-width: 1200px; }
.pd-hero { background: #fcf3f1; padding: 18px 0 36px; }
.pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.pd-crumbs .icon { font-size: 12px; color: var(--muted); }
.pd-crumbs a:hover { color: var(--rose); }
.pd-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; margin-top: 18px; align-items: start; }

.pd-gallery { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.pd-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pd-thumb { border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--white); box-shadow: 0 1px 4px rgba(74, 22, 38, 0.1); }
.pd-thumb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pd-thumb.is-active { border-color: var(--rose); }
.pd-main { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: #f4e2d8; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-wish, .pd-arrow, .pd-zoom {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(74, 22, 38, 0.15);
  font-size: 20px;
}
.pd-wish { top: 14px; right: 14px; }
.pd-zoom { right: 14px; bottom: 14px; font-size: 18px; }
.pd-arrow { top: 50%; transform: translateY(-50%); }
.pd-prev { left: 14px; }
.pd-next { right: 14px; }
.wish-toggle[aria-pressed="true"] { color: var(--rose); }
.wish-toggle[aria-pressed="true"] .icon path { fill: currentColor; }

.pd-info h1 { font-size: clamp(24px, 2.1vw, 30px); color: var(--maroon); }
.pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ink); }
.pd-meta i { font-style: normal; color: #d8c2c6; margin: 0 6px; }
.stars { display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.stars::before {
  content: '\2605\2605\2605\2605\2605';
  background: linear-gradient(90deg, #f0a32c calc(var(--rating) / 5 * 100%), #e6d6d6 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pd-price { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pd-price strong { font-size: 28px; font-weight: 600; color: var(--ink); }
.pd-price s { font-size: 17px; color: var(--muted); }
.pd-off { padding: 4px 10px; border-radius: 4px; background: #fde0e6; color: var(--rose); font-size: 14px; font-weight: 600; }
.pd-summary { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #4d3a3f; }

.pd-option { margin-top: 16px; }
.pd-option h2 { font-family: 'Rupee Sign', 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.pd-option-head { display: flex; justify-content: space-between; align-items: baseline; }
.pd-size-link { display: inline-flex; align-items: center; gap: 6px; color: var(--rose); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.pd-size-link .icon { font-size: 18px; }
.pd-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-sizes input { position: absolute; opacity: 0; pointer-events: none; }
.pd-sizes span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e5cfd3;
  border-radius: 4px;
  background: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-sizes label:hover span { border-color: var(--rose); }
.pd-sizes input:checked + span { background: var(--rose); border-color: var(--rose); color: var(--white); }
.pd-sizes input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 3px; }
.pd-qty-row { display: flex; align-items: center; gap: 22px; }
.pd-qty-row h2 { margin: 0; }
.pd-qty { display: inline-flex; border: 1px solid #e5cfd3; border-radius: 4px; background: var(--white); }
.pd-qty button { width: 32px; height: 32px; font-size: 18px; color: var(--ink); }
.pd-qty input { width: 48px; border: 0; border-left: 1px solid #e5cfd3; border-right: 1px solid #e5cfd3; text-align: center; font-size: 15px; -moz-appearance: textfield; appearance: textfield; }
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.pd-actions .btn { justify-content: center; padding: 12px 18px; font-size: 15px; border-radius: 6px; }
.pd-cart { background: var(--rose); color: var(--white); }
.pd-cart:hover { background: var(--rose-dark); }
.pd-cart .icon { font-size: 20px; }
.pd-buy { background: #fde7ec; color: var(--rose); border: 1px solid #f3c0cc; }
.pd-buy:hover { background: #fbd6df; }
.pd-promises { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
.pd-promises li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; text-align: center; }
.pd-promises li + li { border-left: 1px solid #ecd2d2; }
.pd-promises .icon { font-size: 28px; color: var(--rose); margin-bottom: 4px; }
.pd-promises strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pd-promises span { font-size: 11px; color: var(--muted); }

.pd-below { padding-top: 8px; padding-bottom: 56px; }
.pd-tabs { display: flex; gap: 36px; border-bottom: 1px solid #ecdcdc; }
.pd-tabs button { position: relative; padding: 16px 0 14px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.pd-tabs button[aria-selected="true"] { color: var(--rose); font-weight: 600; }
.pd-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -1px; height: 2px; background: var(--rose); }
.pd-details { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.78fr); gap: 28px; margin-top: 22px; align-items: start; }
.pd-panel > p { font-size: 15px; line-height: 1.7; color: #3d2c30; }
.pd-checks { margin-top: 16px; display: grid; gap: 10px; }
.pd-checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pd-checks span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rose); color: var(--white); font-size: 13px; flex-shrink: 0; }
.pd-checks span .icon { stroke-width: 2.4; }
.pd-size-table { width: 100%; max-width: 440px; border-collapse: collapse; font-size: 14px; }
.pd-size-table caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 8px; }
.pd-size-table th, .pd-size-table td { padding: 9px 12px; border-bottom: 1px solid #f0e2e2; text-align: left; }
.pd-size-table thead th { background: #fdf3f2; font-weight: 600; }
.pd-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.pd-review-score { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pd-review-score strong { font-size: 34px; font-weight: 600; }
.pd-card { background: #fdf3f2; border: 1px solid #f6e0e0; border-radius: 10px; padding: 20px 24px; }
.pd-card h3 { font-size: 20px; color: #9b2c3f; margin-bottom: 14px; }
.pd-specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; font-size: 14px; }
.pd-specs dt { color: var(--muted); }
.pd-specs dd { margin: 0; color: var(--ink); }
.pd-specs dd::before { content: ':'; margin: 0 14px 0 -14px; color: var(--muted); }
.pd-care { display: grid; gap: 12px; font-size: 14px; }
.pd-care li { display: flex; align-items: center; gap: 12px; }
.pd-care .icon { font-size: 20px; color: #9b2c3f; flex-shrink: 0; }

.pd-similar { margin-top: 44px; }
.pd-similar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sim-card { position: relative; }
.sim-media { display: block; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; background: #f4e2d8; }
.sim-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; transition: transform 0.3s; }
.sim-card:hover .sim-media img { transform: scale(1.04); }
.sim-wish { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 16px; box-shadow: 0 1px 6px rgba(74, 22, 38, 0.12); }
.sim-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 10px; }
.sim-body h3 { font-family: 'Rupee Sign', 'Poppins', sans-serif; font-size: 13px; font-weight: 500; }
.sim-body h3 a:hover { color: var(--rose); }
.sim-body p { margin-top: 4px; font-size: 13px; }
.sim-body strong { font-size: 14px; font-weight: 600; }
.sim-body s { color: var(--muted); margin-left: 6px; }
.sim-cart { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #f1b9c7; border-radius: 6px; color: var(--rose); font-size: 18px; }
.sim-cart:hover { background: #fde7ec; }

@media (max-width: 1100px) {
  .pd-details { grid-template-columns: 1fr 1fr; }
  .pd-panels { grid-column: 1 / -1; }
  .pd-similar-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .pd-top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-thumbs { order: 2; flex-direction: row; overflow-x: auto; }
  .pd-thumb { width: 68px; flex-shrink: 0; }
  .pd-main { order: 1; }
  .pd-promises { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .pd-promises li:nth-child(odd) { border-left: 0; }
  .pd-tabs { gap: 24px; overflow-x: auto; }
  .pd-tabs button[aria-selected="true"]::after { left: 0; right: 0; }
  .pd-details { grid-template-columns: 1fr; }
  .pd-similar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .category-row { grid-template-columns: 1fr; }
  .makeup-banner { grid-template-columns: 1fr 1fr; }
  .banner-media { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { height: 64px; }
  .logo { gap: 8px; }
  .logo-mark { height: 44px; }
  .logo-text strong { font-size: 22px; }
  .logo-text small { font-size: 7.5px; letter-spacing: 1.1px; }
  .header-icons { gap: 14px; font-size: 20px; }
  .hero { display: grid; aspect-ratio: auto; min-height: 0; }
  .hero-slide { position: relative; inset: auto; grid-area: 1 / 1; display: block; background: #fbf1ec; }
  .hero-slide::before { display: none; }
  .hero-photo { position: relative; inset: auto; aspect-ratio: 2066 / 761; }
  .hero-text { padding: 24px 0 64px; }
  .hero-dots { bottom: 28px; }
  .section-head h2 { font-size: 24px; }
  .category-card { grid-template-columns: 48% 1fr; min-height: 220px; }
  .category-body h3 { font-size: 22px; }
  .makeup-banner { grid-template-columns: 1fr; }
  .banner-text { padding: 28px 24px 0; gap: 16px; }
  .banner-icon { display: none; }
  .makeup-banner h2 { font-size: 28px; }
  .banner-list { padding: 20px 24px 28px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .newsletter-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .newsletter-art { display: none; }
  .newsletter-form { width: 100%; }
  .newsletter-form .btn { padding: 12px 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand, .footer-grid > div:nth-last-child(-n+2) { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 380px) {
  .header-inner { gap: 12px; }
  .logo { gap: 6px; }
  .logo-mark { height: 38px; }
  .logo-text strong { font-size: 19px; }
  .logo-text small { font-size: 6.5px; letter-spacing: 0.8px; }
  .header-icons { gap: 10px; font-size: 19px; }
}

/* Customize blouse page */
.cz-page {
  --cz-rose: #e8195b;
  --cz-rose-dark: #c90f49;
  --cz-soft: #fde6eb;
  --cz-maroon: #560c1f;
  --cz-text: #4f5359;
  padding: 12px 0 48px;
}
.cz-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "band side" "lower side";
  column-gap: 18px;
  align-items: start;
}
.cz-band {
  grid-area: band;
  padding-bottom: 10px;
  background: #fdf7f7;
  box-shadow: 0 0 0 100vmax #fdf7f7;
  clip-path: inset(-12px -100vmax 0 -100vmax);
}
.cz-side { grid-area: side; position: relative; z-index: 1; padding: 6px 0 18px; border-radius: 4px; background: var(--white); box-shadow: 0 0 0 15px var(--white); }
.cz-lower { grid-area: lower; align-self: stretch; display: flex; flex-direction: column; padding-bottom: 18px; }

.cz-gallery { grid-template-columns: 93px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.cz-gallery .pd-thumbs { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 9px; }
.cz-gallery .pd-thumb { position: relative; min-height: 0; border-radius: 7px; }
.cz-gallery .pd-thumb img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.cz-gallery .pd-main { aspect-ratio: 7 / 5; }
.cz-gallery .pd-main img { object-position: 50% 70%; }
.pd-main:fullscreen { aspect-ratio: auto; border-radius: 0; background: #1d0e12; }
.pd-main:fullscreen img { object-fit: contain; }

.cz-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; padding: 12px 0; border-radius: 8px; background: #fbe9eb; }
.cz-promises li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 8px; }
.cz-promises li + li { border-left: 1px solid #efc7ce; }
.cz-promises .icon { flex-shrink: 0; font-size: 30px; color: #ee1a52; stroke-width: 1.4; }
.cz-promises strong { display: block; font-family: 'Rupee Sign', 'Playfair Display', serif; font-size: 13.5px; font-weight: 700; color: #3e0812; white-space: nowrap; }
.cz-promises span { display: block; font-size: 11.5px; color: #6c6a6c; white-space: nowrap; }

.cz-info h1 { font-size: 26.5px; font-weight: 700; color: var(--cz-maroon); }
.cz-info .pd-meta { margin-top: 6px; font-size: 13px; color: #3b3f44; }
.cz-info .stars { font-size: 16px; }
.cz-info .pd-price { margin-top: 6px; }
.cz-info .pd-price strong { font-size: 27px; color: #111418; }
.cz-info .pd-price s { font-size: 15px; }
.cz-info .pd-off { padding: 3px 9px; background: #fde3e8; color: var(--cz-rose); font-size: 13.5px; }
.cz-info .pd-summary { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--cz-text); }

.cz-form { margin-top: 14px; padding: 0 18px 16px; border: 1px solid #f8d3dc; border-radius: 10px; background: #fffdfd; }
.cz-form-header { display: flex; justify-content: space-between; align-items: center; margin: 0 -18px 4px; padding: 11px 18px; border-bottom: 1px solid #fbe3e7; border-radius: 10px 10px 0 0; background: #fef2f2; }
.cz-form-header h2 { font-size: 22px; font-weight: 700; color: #d3093f; }
.cz-reset { display: inline-flex; align-items: center; gap: 6px; color: var(--cz-rose); font-size: 13.5px; }
.cz-reset .icon { font-size: 17px; stroke-width: 1.8; }
.cz-reset:hover { color: var(--cz-rose-dark); }

.cz-section { position: relative; margin-top: 12px; }
.cz-form-header + .cz-section { padding-bottom: 14px; border-bottom: 1px solid #f7e4e7; }
.cz-step { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; font-size: 17px; font-weight: 700; color: var(--cz-maroon); }
.cz-step span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: var(--cz-rose); color: var(--white); font: 600 12px 'Rupee Sign', 'Poppins', sans-serif; }
.cz-step small { font: 400 11.5px 'Rupee Sign', 'Poppins', sans-serif; color: #3b3f44; }
.cz-form:not(:focus-within) .cz-form-header + .cz-section .cz-step,
.cz-section:focus-within .cz-step { color: #c8103c; }
.cz-indent { margin-left: 36px; }
.cz-label { margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #262a2f; }
.cz-fabrics + .cz-label { margin-top: 12px; }

.cz-form input[type="radio"], .cz-form input[type="checkbox"] { margin: 0; }
.cz-fabrics label input, .cz-colors input, .cz-designs input { position: absolute; opacity: 0; pointer-events: none; }
.cz-fabrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.cz-fabrics label { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px; cursor: pointer; }
.cz-fabrics img { width: 100%; height: 45px; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 3px rgba(60, 20, 30, 0.12); transition: box-shadow 0.15s; }
.cz-fabrics span { font-size: 10.5px; color: var(--cz-text); white-space: nowrap; }
.cz-fabrics label:hover img { box-shadow: 0 0 0 2px #f6b6c7; }
.cz-fabrics input:checked + img { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--cz-rose); }
.cz-fabrics input:focus-visible + img { outline: 2px solid var(--cz-rose-dark); outline-offset: 6px; }

.cz-colors { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 3px; }
.cz-colors label { cursor: pointer; }
.cz-colors span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.15s; }
.cz-colors input:checked + span { box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4px var(--cz-rose); }
.cz-colors input:focus-visible + span { outline: 2px solid var(--cz-rose-dark); outline-offset: 5px; }

.cz-guide { position: absolute; top: 2px; right: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--cz-rose); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.cz-guide .icon { font-size: 19px; }
.cz-measure-type { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.cz-measure-type label { display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--cz-text); cursor: pointer; }
.cz-measure-type input {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid #3d4248;
  border-radius: 50%;
  cursor: pointer;
}
.cz-measure-type input:checked { border-color: var(--cz-rose); background: radial-gradient(var(--cz-rose) 0 4px, transparent 4.5px); }
.cz-measure-type input:focus-visible { outline: 2px solid var(--cz-rose); outline-offset: 2px; }
.cz-sizes { margin-top: 12px; }

.cz-measure { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 10px; padding: 12px 16px 12px 10px; border-radius: 8px; background: #fdf3f2; }
.cz-figure { width: 54px; height: auto; }
.cz-measure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 4px 30px;
  background: linear-gradient(#f2d5da, #f2d5da) center / 1px 100% no-repeat;
}
.cz-measure-field { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; white-space: nowrap; color: var(--cz-text); }
.cz-unit { display: flex; flex-shrink: 0; width: 60px; height: 24px; border: 1px solid #efe6e6; border-radius: 4px; overflow: hidden; background: var(--white); }
.cz-unit input { width: 100%; min-width: 0; padding: 0 7px; border: 0; font-size: 12px; color: #2a2e33; -moz-appearance: textfield; appearance: textfield; }
.cz-unit input::-webkit-outer-spin-button, .cz-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cz-unit input:focus { outline: none; }
.cz-unit:focus-within { border-color: var(--cz-rose); }
.cz-unit i { display: grid; place-items: center; width: 20px; flex-shrink: 0; background: #f2efef; font-style: normal; font-size: 11.5px; color: #4f5359; }

.cz-designs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cz-designs label { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; cursor: pointer; }
.cz-tile { display: grid; place-items: center; width: 100%; height: 46px; border: 1px solid #ece4e5; border-radius: 5px; background: linear-gradient(180deg, #fbfafa, #f3f1f1); color: #3b3638; transition: border-color 0.15s; }
.cz-tile svg { width: 52px; height: 40px; }
.cz-designs label > span:last-child { font-size: 10px; color: var(--cz-text); white-space: nowrap; letter-spacing: -0.2px; }
.cz-designs label:hover .cz-tile { border-color: #f4b2c3; }
.cz-designs input:checked + .cz-tile { border: 2px solid var(--cz-rose); }
.cz-designs input:focus-visible + .cz-tile { outline: 2px solid var(--cz-rose-dark); outline-offset: 2px; }

.cz-addons { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 3px 30px; }
.cz-addons label { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: 12px; white-space: nowrap; color: var(--cz-text); cursor: pointer; }
.cz-addons input {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #bdb6b8;
  border-radius: 3px;
  cursor: pointer;
}
.cz-addons input:checked {
  border-color: var(--cz-rose);
  background: var(--cz-rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cz-addons input:focus-visible { outline: 2px solid var(--cz-rose); outline-offset: 2px; }
.cz-addons b { font-weight: 500; color: #f0306a; }

.cz-notes { display: block; width: calc(100% - 30px); height: 38px; min-height: 38px; margin-left: 30px; padding: 9px 12px; border: 1px solid #f5d5dc; border-radius: 5px; font: 12px 'Rupee Sign', 'Poppins', sans-serif; color: var(--ink); resize: vertical; }
.cz-notes::placeholder { color: #8a8d92; }
.cz-notes:focus { outline: none; border-color: var(--cz-rose); }

.cz-actions { display: grid; grid-template-columns: 122px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.cz-qty { display: flex; height: 40px; border: 1px solid #f6d3db; border-radius: 6px; overflow: hidden; background: var(--white); }
.cz-qty button { width: 38px; flex-shrink: 0; background: #fdeef1; color: var(--cz-rose); font-size: 20px; }
.cz-qty button:hover { background: #fbdde4; }
.cz-qty input { width: 100%; min-width: 0; border: 0; border-left: 1px solid #f6d3db; border-right: 1px solid #f6d3db; text-align: center; font-size: 15px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.cz-qty input::-webkit-outer-spin-button, .cz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cz-actions .btn { justify-content: center; height: 40px; padding: 0 14px; border-radius: 6px; font-family: 'Rupee Sign', 'Playfair Display', serif; font-size: 18px; font-weight: 600; }
.cz-cart { gap: 10px; background: var(--cz-rose); color: var(--white); }
.cz-cart:hover { background: var(--cz-rose-dark); }
.cz-cart .icon { font-size: 22px; }
.cz-buy { border: 1px solid #f8cbd5; background: #fde4e8; color: var(--cz-rose); }
.cz-buy:hover { background: #fbd5dd; }

.cz-lower .pd-tabs { gap: 40px; margin-top: 14px; padding-left: 12px; border-bottom-color: #f3e3e4; }
.cz-lower .pd-tabs button { padding: 12px 0 11px; font-size: 14.5px; color: #3b3f44; }
.cz-lower .pd-tabs button[aria-selected="true"] { color: var(--cz-rose); }
.cz-lower .pd-tabs button[aria-selected="true"]::after { background: var(--cz-rose); }
.cz-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; align-items: start; }
.cz-details .pd-panel > p { font-size: 13px; line-height: 1.6; color: var(--cz-text); }
.cz-details .pd-checks { margin-top: 14px; gap: 8px; }
.cz-details .pd-checks li { font-size: 14px; color: #3b3f44; }
.cz-details .pd-checks span { background: var(--cz-rose); }
.cz-specs-card { padding: 14px 18px; border-color: #fbe4e7; background: #fdf1f2; }
.cz-specs-card h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--cz-rose); }
.cz-specs-card .pd-specs { gap: 4px 22px; font-size: 12.5px; }
.cz-specs-card .pd-specs dt { color: #4f5359; }

.cz-similar { margin-top: auto; padding-top: 26px; }
.cz-similar .section-head { margin-bottom: 10px; }
.cz-similar .section-head h2 { font-size: 23px; font-weight: 700; color: #48030a; }
.cz-similar .section-head a { color: var(--cz-rose); font-size: 14.5px; }
.cz-similar .pd-similar-grid { gap: 10px; }
.cz-similar .sim-media { aspect-ratio: 8 / 7; }
.cz-similar .sim-wish { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 15px; }
.cz-similar .sim-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; margin-top: 8px; }
.cz-similar .sim-body > div { display: contents; }
.cz-similar .sim-body h3 { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cz-similar .sim-body p { margin-top: 0; }
.cz-similar .sim-body h3 { font-size: 11.5px; font-weight: 400; color: #2a2e33; }
.cz-similar .sim-body p { font-size: 11.5px; white-space: nowrap; }
.cz-similar .sim-body strong { font-size: 13.5px; }
.cz-similar .sim-body s { margin-left: 3px; }
.cz-similar .sim-cart { width: 28px; height: 28px; border-color: #f6b4c4; border-radius: 5px; color: var(--cz-rose); font-size: 16px; }

@media (max-width: 1100px) {
  .cz-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "band" "side" "lower"; }
  .cz-side { margin-top: 18px; padding: 0; }
  .cz-lower .pd-similar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .cz-gallery { grid-template-columns: minmax(0, 1fr); }
  .cz-gallery .pd-thumbs { display: flex; }
  .cz-gallery .pd-thumb { height: 60px; }
  .cz-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .cz-promises li { justify-content: flex-start; padding-left: 14px; }
  .cz-promises li:nth-child(odd) { border-left: 0; }
  .cz-info h1 { font-size: 24px; }
  .cz-form { padding: 0 14px 14px; }
  .cz-form-header { margin: 0 -14px 4px; padding: 11px 14px; }
  .cz-form-header h2 { font-size: 19px; }
  .cz-indent { margin-left: 0; }
  .cz-fabrics, .cz-designs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .cz-designs label > span:last-child { white-space: normal; text-align: center; line-height: 1.25; }
  .cz-colors { justify-content: flex-start; gap: 12px; }
  .cz-guide { position: static; margin: -2px 0 10px 36px; }
  .cz-measure { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .cz-figure { display: none; }
  .cz-measure-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 6px; background: none; }
  .cz-addons { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 6px; }
  .cz-notes { width: 100%; height: 64px; margin-left: 0; }
  .cz-actions { grid-template-columns: 1fr 1fr; }
  .cz-qty { grid-column: 1 / -1; width: 122px; }
  .cz-actions .btn { font-size: 16px; }
  .cz-lower .pd-tabs { gap: 24px; padding-left: 0; }
  .cz-details { grid-template-columns: minmax(0, 1fr); }
  .cz-lower .pd-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cart page */
:root {
  --ct-rose: #ec1459;
  --ct-rose-dark: #cc0d4a;
  --ct-maroon: #680a1e;
  --ct-line: #f3e2e5;
  --ct-text: #55595e;
}
.ct-page, .co-page {
  padding: 18px 0 48px;
  background: #fdf8fa;
}
.ct-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ct-head .pd-crumbs { font-size: 14px; color: #3b3f44; }
.ct-head h1 { margin-top: 8px; font-size: 42px; font-weight: 700; color: var(--ct-maroon); }
.ct-head h1 span { font-size: 22px; font-weight: 500; font-variant-numeric: lining-nums; color: #63676c; }
.ct-continue { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; height: 47px; padding: 0 28px; border: 1px solid #f8cfda; border-radius: 6px; background: #fde9ef; font-size: 14.5px; font-weight: 500; color: #4a0d1c; }
.ct-continue:hover { background: #fbdde6; }
.ct-continue .icon { font-size: 19px; color: var(--ct-rose); }

.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 20px; align-items: start; margin-top: 13px; }
.ct-card { padding: 9px 9px 0; border: 1px solid var(--ct-line); border-radius: 8px; background: var(--white); }

.ct-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ct-table th { height: 37px; padding: 0 10px; background: #fef1f3; font-size: 13px; font-weight: 600; text-align: left; color: #5a0b1d; }
.ct-table th:first-child { border-radius: 6px 0 0 6px; }
.ct-table th:last-child { border-radius: 0 6px 6px 0; }
.ct-table th:nth-child(2) { width: 28%; }
.ct-table th:nth-child(4) { width: 82px; }
.ct-table th:nth-child(5) { width: 108px; }
.ct-table th:nth-child(6) { width: 92px; }
.ct-table th:nth-child(7) { width: 76px; }
.ct-table td { padding: 17px 10px; border-bottom: 1px solid #f5eaec; vertical-align: middle; }
.ct-table th:nth-child(6), .ct-table td:nth-child(6) { padding-left: 18px; }
.ct-table th.ct-check, .ct-table td.ct-check { width: 46px; padding: 0 0 0 14px; }
.ct-table .ct-center { text-align: center; }

.ct-box {
  appearance: none;
  display: block;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1.5px solid #c9c1c3;
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
}
.ct-box:checked {
  border-color: var(--ct-rose);
  background: var(--ct-rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.ct-box:indeterminate {
  border-color: var(--ct-rose);
  background: var(--ct-rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.ct-box:focus-visible { outline: 2px solid var(--ct-rose); outline-offset: 2px; }

.ct-product { display: flex; align-items: center; gap: 14px; }
.ct-thumb { flex-shrink: 0; width: 90px; aspect-ratio: 9 / 10; border-radius: 7px; overflow: hidden; background: #f6ece9; }
.ct-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ct-name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #7a1420; }
.ct-name:hover { color: var(--ct-rose); }
.ct-sku { margin-top: 6px; font-size: 13px; color: var(--ct-text); }
.ct-tag { display: inline-block; margin-top: 9px; padding: 4px 13px; border: 1px solid #fbd7e0; border-radius: 4px; background: #fdecf1; font-size: 12.5px; font-weight: 500; color: var(--ct-rose); }

.ct-details { display: flex; align-items: center; gap: 10px; }
.ct-details dl { flex: 1; min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; font-size: 12.5px; line-height: 1.55; }
.ct-details dt { display: flex; justify-content: space-between; gap: 8px; padding-right: 9px; color: #72767b; }
.ct-details dt::after { content: ':'; }
.ct-details dd { margin: 0; color: var(--ct-text); }
.ct-edit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-top: 24px; padding: 0 10px; border: 1px solid #fbd2dc; border-radius: 5px; background: #fdebf0; font-size: 13px; font-weight: 500; color: var(--ct-rose); }
.ct-edit:hover { background: #fbdde6; }
.ct-edit .icon { font-size: 14px; }

.ct-amount { font-size: 17px; font-weight: 600; white-space: nowrap; color: #1d2024; }
.ct-qty { display: inline-flex; height: 34px; border: 1px solid #f6dde2; border-radius: 6px; overflow: hidden; background: var(--white); vertical-align: middle; }
.ct-qty button { width: 33px; background: #fef4f6; color: var(--ct-rose); font-size: 19px; }
.ct-qty button:hover { background: #fbe1e8; }
.ct-qty input { width: 38px; border: 0; border-left: 1px solid #f6dde2; border-right: 1px solid #f6dde2; text-align: center; font-size: 14.5px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.ct-qty input::-webkit-outer-spin-button, .ct-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-row-actions { display: inline-flex; gap: 18px; vertical-align: middle; font-size: 23px; }
.ct-row-actions .icon { stroke-width: 1.7; }
.ct-wish { color: #8a1c35; }
.ct-trash { color: var(--ct-rose); }
.ct-wish:hover, .ct-trash:hover { color: var(--ct-rose-dark); }

.ct-empty { padding: 48px 16px; text-align: center; font-size: 15px; color: var(--ct-text); }
.ct-empty a { font-weight: 500; color: var(--ct-rose); }

.ct-foot { display: flex; align-items: center; gap: 22px; padding: 14px 5px 15px 14px; }
.ct-select-all { display: flex; align-items: center; gap: 16px; padding-right: 22px; border-right: 1px solid #eedfe2; font-size: 14.5px; color: #2a2e33; cursor: pointer; }
.ct-remove-selected { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ct-rose); }
.ct-remove-selected .icon { font-size: 21px; }
.ct-remove-selected:hover { color: var(--ct-rose-dark); }
.ct-status { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--ct-text); }
.ct-foot-actions { display: flex; gap: 12px; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 20px; border: 1px solid #f9d2dc; border-radius: 6px; background: #fdecf0; font-size: 14.5px; font-weight: 500; white-space: nowrap; color: #3a1a22; }
.ct-btn:hover { background: #fbdde5; }
.ct-btn .icon { font-size: 20px; }
.ct-btn-wish { color: var(--ct-rose); }

.ct-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ct-summary { padding: 16px 16px 15px; border: 1px solid var(--ct-line); border-radius: 8px; background: var(--white); }
.ct-summary h2 { font-size: 25px; font-weight: 700; color: var(--ct-maroon); }
.ct-lines { display: grid; gap: 9px; margin: 14px 0 0; padding-bottom: 16px; border-bottom: 1px solid #f3e6e9; font-size: 14px; color: var(--ct-text); }
.ct-lines div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ct-lines dt { display: flex; align-items: center; gap: 8px; }
.ct-lines dd { margin: 0; font-weight: 600; color: #1d2024; }
.ct-lines .ct-discount { color: #1f9d3a; }
.ct-info { font-size: 16px; color: #72767b; cursor: help; }
.ct-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif; font-weight: 700; font-variant-numeric: lining-nums; }
.ct-total span { font-size: 21px; color: var(--ct-maroon); }
.ct-total strong { font-size: 28px; color: var(--ct-rose); }
.ct-checkout { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 53px; margin-top: 12px; border-radius: 6px; background: var(--ct-rose); font-size: 15px; font-weight: 500; color: var(--white); }
.ct-checkout:hover { background: var(--ct-rose-dark); }
.ct-checkout[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ct-checkout .icon { font-size: 23px; }
.ct-checkout .icon:last-child { font-size: 18px; }
.ct-coupon { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f3e6e9; }
.ct-coupon label { display: block; font-size: 14.5px; font-weight: 600; color: #5a0b1d; }
.ct-coupon > div { display: flex; gap: 8px; margin-top: 10px; }
.ct-coupon input { flex: 1; width: 100%; min-width: 0; height: 40px; padding: 0 13px; border: 1px solid #ebe5e7; border-radius: 5px; background: #f8f7f8; font-size: 13px; }
.ct-coupon input::placeholder { color: #6d7177; }
.ct-coupon input:focus { outline: none; border-color: var(--ct-rose); background: var(--white); }
.ct-coupon button { flex-shrink: 0; width: 78px; border-radius: 5px; background: var(--ct-rose); font-size: 15px; font-weight: 500; color: var(--white); }
.ct-coupon button:hover { background: var(--ct-rose-dark); }
.ct-coupon-msg { margin-top: 7px; font-size: 12.5px; color: var(--ct-rose-dark); }
.ct-coupon-msg:empty { display: none; }

.ct-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; border: 1px solid #f6e3e7; border-radius: 8px; background: #fdf3f5; }
.ct-promises li { display: grid; justify-items: center; align-content: center; padding: 10px 6px; text-align: center; }
.ct-promises li:nth-child(even) { border-left: 1px solid #f3dce1; }
.ct-promises li:nth-child(n + 3) { border-top: 1px solid #f3dce1; }
.ct-promises .icon { margin-bottom: 6px; font-size: 30px; color: var(--ct-rose); stroke-width: 1.4; }
.ct-promises strong { font-size: 13px; font-weight: 600; color: #3a0d18; }
.ct-promises span { font-size: 12px; color: var(--ct-text); }

@media (max-width: 1180px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
}

@media (max-width: 900px) {
  .ct-card { padding: 0 14px; }
  .ct-table, .ct-table tbody, .ct-table td { display: block; }
  .ct-table thead { display: none; }
  .ct-table tr {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr) auto;
    grid-template-areas: "check product product" ". details details" ". price qty" ". total actions";
    align-items: center;
    gap: 12px 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f5eaec;
  }
  .ct-table td, .ct-table td.ct-check { width: auto; padding: 0; border: 0; }
  .ct-table td:nth-child(1) { grid-area: check; }
  .ct-table td:nth-child(2) { grid-area: product; }
  .ct-table td:nth-child(3) { grid-area: details; }
  .ct-table td:nth-child(4) { grid-area: price; }
  .ct-table td:nth-child(5) { grid-area: qty; }
  .ct-table td:nth-child(6) { grid-area: total; }
  .ct-table td:nth-child(7) { grid-area: actions; justify-self: end; padding-right: 6px; }
  .ct-amount::before { content: attr(data-label); margin-right: 10px; font-size: 13px; font-weight: 400; color: var(--ct-text); }
  .ct-foot { flex-wrap: wrap; gap: 14px 22px; padding: 16px 0; }
  .ct-status { flex-basis: 100%; order: 3; text-align: left; }
  .ct-status:empty { display: none; }
  .ct-foot-actions { order: 4; width: 100%; }
  .ct-foot-actions .ct-btn { flex: 1; }
}

@media (max-width: 640px) {
  .ct-head { flex-direction: column; align-items: flex-start; }
  .ct-head h1 { font-size: 32px; }
  .ct-head h1 span { font-size: 18px; }
  .ct-continue { height: 42px; padding: 0 20px; }
  .ct-side { grid-template-columns: minmax(0, 1fr); }
  .ct-select-all { padding-right: 0; border-right: 0; }
  .ct-foot-actions { flex-direction: column; }
  .ct-foot-actions .ct-btn { flex: none; }
}

/* Checkout page (shares the cart palette) */
.co-head { display: flex; align-items: center; gap: 24px 116px; }
.co-head .pd-crumbs { font-size: 14px; color: #3b3f44; }
.co-head h1 { margin-top: 6px; font-size: 40px; font-weight: 700; color: var(--ct-maroon); }
.co-steps { display: flex; align-items: center; margin-top: -18px; font-size: 14px; color: #33373c; }
.co-steps li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.co-steps li + li::before { content: ''; width: 66px; height: 1px; margin: 0 4px 0 12px; background: #a5aab2; }
.co-steps li.is-current + li::before { background: #c0687c; }
.co-steps span { display: grid; place-items: center; width: 27px; height: 27px; border: 1.5px solid #5d6166; border-radius: 50%; font-size: 13px; font-weight: 500; }
.co-steps .is-current { font-weight: 600; color: var(--ct-rose); }
.co-steps .is-current span { border-color: var(--ct-rose); background: var(--ct-rose); color: var(--white); }

.co-layout { display: grid; grid-template-columns: minmax(0, 1.59fr) minmax(0, 1fr); gap: 17px; align-items: start; margin-top: 14px; }
.co-card { padding: 20px; border: 1px solid #f4e6ea; border-radius: 6px; background: var(--white); }
.co-card h2 { font-size: 21px; font-weight: 700; color: var(--ct-maroon); }
/* Room for the pincode hint under the last row. */
.co-shipping { padding-bottom: 30px; }

.co-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.co-card-head h2 { display: flex; align-items: center; gap: 12px; }
.co-card-head h2 .icon { font-size: 25px; color: var(--ct-rose); }
.co-default { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4f5359; cursor: pointer; }
.co-default .ct-box { width: 18px; height: 18px; border-color: #6d7177; }
.co-default .ct-box:checked { border-color: var(--ct-rose); }
.co-notice, .co-alert { margin-top: 16px; padding: 11px 14px; border-radius: 6px; font-size: 13.5px; }
.co-notice { background: #eaf6ee; color: #1d6b35; }
.co-alert { background: #fdecf0; color: #b30d3f; }

.co-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 16px; margin-top: 16px; }
.co-span-3 { grid-column: span 3; }
.co-span-6 { grid-column: span 6; }
.co-span-12 { grid-column: 1 / -1; }
.co-field label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 500; color: #33373c; }
.co-req { color: var(--ct-rose); }
.co-field input, .co-field select, .co-field textarea {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 15px;
  border: 1px solid #f0dfe5;
  border-radius: 6px;
  background: var(--white);
  font: 14px 'Rupee Sign', 'Poppins', sans-serif;
  color: var(--ink);
}
.co-field textarea { height: 88px; min-height: 64px; padding: 13px 15px; resize: vertical; }
.co-field select {
  appearance: none;
  padding: 0 32px 0 13px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2333373c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 19px no-repeat;
  cursor: pointer;
}
.co-field select:invalid, .co-field select:disabled { color: #85898f; }
.co-field select:disabled { background-color: #f8f7f8; cursor: not-allowed; }
.co-field input[readonly] { background: #f8f7f8; cursor: default; }
.co-field input[readonly]:focus { border-color: #c9c1c3; box-shadow: none; }
.co-field select option { color: var(--ink); }
.co-field ::placeholder { color: #85898f; }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { outline: none; border-color: var(--ct-rose); box-shadow: 0 0 0 3px #fde3ea; }
.co-field [aria-invalid="true"] { border-color: #e23a64; }
.co-error { margin-top: 6px; font-size: 12.5px; color: #c8103c; }
.co-prefixed { display: flex; align-items: center; height: 45px; border: 1px solid #f0dfe5; border-radius: 6px; background: var(--white); }
.co-prefixed span { padding: 0 12px 0 15px; border-right: 1px solid #f0dfe5; font-size: 14px; font-weight: 500; line-height: 24px; color: #33373c; }
.co-field .co-prefixed input { flex: 1; min-width: 0; height: 100%; padding-left: 12px; border: 0; background: none; box-shadow: none; }
.co-prefixed:focus-within { border-color: var(--ct-rose); box-shadow: 0 0 0 3px #fde3ea; }
.co-prefixed:has([aria-invalid="true"]) { border-color: #e23a64; }
.co-field:has(.co-hint) { position: relative; }
.co-hint { position: absolute; top: 100%; left: 0; margin-top: 2px; font-size: 12px; line-height: 1.3; white-space: nowrap; color: #1f8a3a; }
.co-hint.is-error { color: #c8103c; }

.co-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-summary-head h2 span { font: 400 15px 'Rupee Sign', 'Poppins', sans-serif; color: #4f5359; }
.co-edit { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ct-rose); white-space: nowrap; }
.co-edit .icon { font-size: 18px; }
.co-edit:hover { color: var(--ct-rose-dark); }

.co-items { margin-top: 10px; }
.co-items li { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 7px 0; }
.co-items img { display: block; width: 82px; height: 77px; border-radius: 4px; object-fit: cover; object-position: 50% 45%; }
.co-items p { font-size: 12.5px; line-height: 1.55; color: #5d6166; }
.co-name { display: block; margin-bottom: 1px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #7a1420; }
.co-name:hover { color: var(--ct-rose); }
.co-specs b { font-weight: 500; color: #33373c; }
.co-specs span + span::before { content: '|'; margin: 0 7px; color: #8b8f94; }
.co-items strong { font-size: 15.5px; font-weight: 700; white-space: nowrap; color: #1d2024; }

.co-coupon { margin-top: 10px; padding-top: 12px; border-top: 1px solid #f1e5e8; }
.co-coupon label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #7a1420; }
.co-coupon label .icon { font-size: 22px; color: var(--ct-rose); transform: rotate(90deg); }
.co-coupon > div { display: flex; gap: 8px; margin: 6px 0 0 32px; }
.co-coupon input { flex: 1; width: 100%; min-width: 0; height: 41px; padding: 0 13px; border: 1px solid #ebdfe3; border-radius: 5px; font-size: 13.5px; }
.co-coupon input::placeholder { color: #6d7177; }
.co-coupon input:focus { outline: none; border-color: var(--ct-rose); }
.co-coupon button { flex-shrink: 0; width: 97px; border-radius: 5px; background: var(--ct-rose); font-size: 15px; font-weight: 500; color: var(--white); }
.co-coupon button:hover { background: var(--ct-rose-dark); }
.co-coupon-msg { margin: 6px 0 0 32px; font-size: 12.5px; color: var(--ct-rose-dark); }
.co-coupon-msg:empty { display: none; }

.co-lines { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 0; border-top: 1px solid #f1e5e8; border-bottom: 1px solid #f1e5e8; font-size: 14.5px; color: #33373c; }
.co-lines div { display: flex; justify-content: space-between; gap: 12px; }
.co-lines dd { margin: 0; font-weight: 700; color: #1d2024; }
.co-lines .co-discount { color: #1f9d3a; }
.co-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.co-total span { font-family: 'Rupee Sign', 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--ct-maroon); }
.co-total strong { font-size: 28px; font-weight: 700; color: var(--ct-rose); }

.co-pay { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 49px; margin-top: 10px; border-radius: 6px; background: var(--ct-rose); font-size: 16px; color: var(--white); }
.co-pay:hover { background: var(--ct-rose-dark); }
.co-pay .icon { font-size: 20px; }
.co-pay > span { display: flex; align-items: center; gap: 8px; }
.co-razorpay { display: inline-flex; align-items: center; gap: 2px; font-size: 21px; font-weight: 700; font-style: italic; letter-spacing: -0.3px; }
.co-razorpay svg { width: 13px; height: 16px; fill: currentColor; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: #4f5359; }
.co-secure .icon { font-size: 19px; color: var(--ct-rose); }

/* Below this the four-across address row is too tight beside the summary. */
@media (max-width: 1340px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .co-head { flex-wrap: wrap; gap: 14px 40px; }
  .co-steps { margin-top: 0; }
}

@media (max-width: 900px) {
  .co-span-3 { grid-column: span 6; }
}

@media (max-width: 640px) {
  .co-head h1 { font-size: 32px; }
  .co-steps { width: 100%; font-size: 12px; }
  .co-steps li { gap: 6px; white-space: normal; line-height: 1.25; }
  .co-steps li + li::before { flex-shrink: 0; width: 18px; margin: 0 0 0 6px; }
  .co-steps span { flex-shrink: 0; width: 24px; height: 24px; font-size: 12px; }
  .co-card { padding: 16px 14px; }
  .co-card-head { flex-wrap: wrap; }
  .co-card h2 { font-size: 19px; }
  .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .co-span-3 { grid-column: span 1; }
  .co-span-6, .co-field:has([name="pincode"]), .co-field:has([name="post_office"]) { grid-column: 1 / -1; }
  .co-items li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .co-items img { width: 64px; height: 64px; }
  .co-items strong { grid-column: 2; }
  .co-coupon > div, .co-coupon-msg { margin-left: 0; }
}

/* Login popup and account menu */
.login-modal { width: min(436px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 0; border: 0; border-radius: 14px; background: var(--white); box-shadow: 0 24px 60px rgba(74, 22, 38, 0.25); color: var(--ink); }
.login-modal::backdrop { background: rgba(42, 26, 30, 0.55); }
.login-form { position: relative; padding: 34px 36px 30px; }
.login-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; color: #6d7177; }
.login-close:hover { background: #fdecf0; color: var(--ct-rose); }
.login-form h2 { text-align: center; font-size: 34px; font-weight: 700; color: var(--ct-maroon); }
.login-sub { margin-top: 8px; text-align: center; font-size: 14px; color: #4f5359; }
.login-message { margin-top: 16px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.login-message.is-error { background: #fdecf0; color: #b30d3f; }
.login-message.is-info { background: #f4f2f3; color: #3b3f44; }
.login-label { display: block; margin: 22px 0 8px; font-size: 14px; font-weight: 600; color: #33373c; }
.login-label + .login-input + .login-label { margin-top: 18px; }
.login-input { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 1px solid #ece2e5; border-radius: 6px; }
.login-input:focus-within { border-color: var(--ct-rose); box-shadow: 0 0 0 3px #fde3ea; }
.login-input > .icon { flex-shrink: 0; font-size: 19px; color: #5d6166; }
.login-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 14px; }
.login-input input::placeholder { color: #85898f; }
.login-eye { flex-shrink: 0; font-size: 19px; color: #4f5359; }
.login-input:has([aria-invalid="true"]) { border-color: #e23a64; }
.login-hint, .login-field-error { margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
.login-hint { color: #6d7177; }
.login-field-error { color: #c8103c; }
.login-field-error + .login-hint { display: none; }
.login-eye[aria-pressed="false"] .icon:last-child, .login-eye[aria-pressed="true"] .icon:first-child { display: none; }
.login-eye:focus-visible { outline: 2px solid var(--ct-rose); outline-offset: 2px; border-radius: 3px; }
.login-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.login-remember { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: #33373c; cursor: pointer; }
.login-remember .ct-box { width: 18px; height: 18px; border-color: #5d6166; }
.login-remember .ct-box:checked { border-color: var(--ct-rose); }
.login-link { font-size: 14px; color: var(--ct-rose); text-decoration: underline; text-underline-offset: 3px; }
.login-link:hover { color: var(--ct-rose-dark); }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 43px; margin-top: 22px; border-radius: 6px; background: var(--ct-rose); font-size: 16px; font-weight: 500; color: var(--white); }
.login-submit:hover { background: var(--ct-rose-dark); }
.login-submit:disabled { opacity: 0.65; cursor: wait; }
.login-submit .icon { font-size: 19px; }
.login-or { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 0 24px; font-size: 13px; color: #5d6166; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: #ece2e5; }
.login-new { margin-top: 16px; text-align: center; font-size: 14px; color: #4f5359; }
.login-new .login-link { margin-left: 4px; }

.login-sub strong { font-weight: 600; color: var(--ink); white-space: nowrap; }
.otp-change { margin-top: 6px; text-align: center; }
.login-message + .login-message { margin-top: 8px; }
.otp-boxes { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.otp-boxes input { width: 48px; height: 54px; padding: 0; border: 1px solid #e3d6da; border-radius: 8px; text-align: center; font-size: 22px; font-weight: 600; color: var(--ink); }
.otp-boxes input:focus { outline: none; border-color: var(--ct-rose); box-shadow: 0 0 0 3px #fde3ea; }
.otp-resend { margin-top: 18px; text-align: center; font-size: 14px; color: #4f5359; }
.otp-resend .login-link:disabled { color: #9a9ea3; text-decoration: none; cursor: default; }
.otp-resend span { color: #6d7177; }

.account { position: relative; }
.account-menu { position: absolute; top: calc(100% + 14px); right: -10px; z-index: 50; width: 268px; max-width: calc(100vw - 32px); padding: 6px 0 8px; border: 1px solid #f3e4e8; border-radius: 12px; background: var(--white); box-shadow: 0 14px 34px rgba(74, 22, 38, 0.16); color: var(--ink); }
.account-menu[hidden] { display: none; }
.account-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fde4ea; color: var(--rose); }
.account-avatar .icon { width: 20px; height: 20px; }
.account-head strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.account-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-list { padding: 4px 10px; }
.account-logout { margin: 6px 0 0; padding: 6px 10px 0; border-top: 1px solid #f3e4e8; }
.account-item { display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.account-item .icon { width: 20px; height: 20px; flex-shrink: 0; }
.account-item:hover { background: #fdf1f4; }
.account-item.is-active { background: #fde4ea; color: var(--rose); }

/* Offcanvas panels that slide in from the right */
.oc-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(42, 26, 30, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.oc-backdrop.is-open { opacity: 1; visibility: visible; }
.oc { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; display: flex; flex-direction: column; width: min(420px, 100%); background: var(--white); box-shadow: -12px 0 40px rgba(74, 22, 38, 0.18); transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0.3s; }
.oc.is-open { transform: none; visibility: visible; }
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #f3e4e8; }
.oc-head h2 { font: 600 22px/1.2 'Playfair Display', Georgia, serif; color: var(--maroon); }
.oc-close { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); }
.oc-close .icon { width: 18px; height: 18px; }
.oc-close:hover { background: #fdf1f4; }
.oc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 26px; }
.oc-add { width: 100%; height: 44px; border: 1px dashed var(--rose-light); border-radius: 8px; background: #fdf1f4; font-size: 14.5px; font-weight: 500; color: var(--rose); }
.oc-add:hover { background: #fbdde5; }
.oc-address { margin-top: 14px; padding: 16px 18px; border: 1px solid #f3e4e8; border-radius: 10px; }
.oc-address.is-default { border-color: #f6c9d5; background: #fff8fa; }
.oc-address-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-address-top strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.oc-badge { padding: 3px 10px; border-radius: 4px; background: #fde4ea; font-size: 12px; color: var(--rose); }
.oc-address-text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.oc-address-actions { display: flex; gap: 10px; margin-top: 12px; }
.oc-address-actions button { height: 30px; padding: 0 14px; border: 1px solid #f3c7d3; border-radius: 5px; background: #fdecf0; font-size: 13px; color: var(--rose); }
.oc-address-actions button + button { border-color: #e4e0e2; background: var(--white); color: var(--muted); }
.oc-form .login-submit { margin-top: 26px; }
.oc-form .login-message { margin-top: 0; margin-bottom: 4px; }

@media (max-width: 480px) {
  .login-form { padding: 30px 20px 24px; }
  .otp-boxes { gap: 8px; }
  .otp-boxes input { width: 42px; height: 50px; }
  .login-form h2 { font-size: 30px; }
  .login-or { padding: 0; }
}

/* Saree pre-pleating page */
.pp-hero {
  --pp-maroon: #750a14;
  --pp-rose: #ef0c4b;
  --pp-rose-dark: #cf0840;
  --pp-text: #4a515e;
  position: relative;
  height: 380px;
  overflow: hidden;
  background: #fef3f3;
}
/* The photo hugs the right edge at the hero's height; its left edge fades into the pink. */
.pp-photo { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1490 / 578; }
.pp-photo > img { display: block; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%); mask-image: linear-gradient(90deg, transparent, #000 8%); }
/* Sits exactly where the card was in the design photo (it was painted out of the image). */
.pp-offer { position: absolute; left: 44.3%; top: 12.4%; width: 32.9%; min-height: 64.4%; padding: 28px 32px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 30px rgba(117, 10, 20, 0.06); }
.pp-offer h2 { font-size: 25px; font-weight: 700; color: var(--pp-maroon); }
.pp-offer-sub { margin-top: 6px; font-size: 15px; color: #545b68; }
.pp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.pp-price strong { font-size: 37px; font-weight: 600; line-height: 1.1; color: var(--pp-rose); }
.pp-price span { font-size: 15px; color: #636673; }
.pp-book { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 28px; border-radius: 6px; background: var(--pp-rose, #ef0c4b); font-size: 17px; font-weight: 500; white-space: nowrap; color: var(--white); }
.pp-book:hover { background: var(--pp-rose-dark, #cf0840); }
.pp-book .icon { font-size: 20px; }
.pp-offer .pp-book { width: 100%; margin-top: 18px; }

.pp-intro { position: relative; width: fit-content; max-width: 480px; padding-top: 38px; }
.pp-eyebrow { font-size: 15px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: #bf606e; }
.pp-intro h1 { margin-top: 10px; font-size: 60px; font-weight: 700; line-height: 1.03; color: var(--pp-maroon); }
.pp-intro h1 span { background: linear-gradient(90deg, #f52061 0%, #e8195b 45%, #800413 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-lead { max-width: 306px; margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--pp-text); }
.pp-features { display: flex; gap: 28px; margin-top: 16px; }
.pp-features li { display: grid; justify-items: center; gap: 8px; width: 86px; text-align: center; font-size: 13.5px; white-space: nowrap; color: #41454d; }
.pp-features span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fce3e6; font-size: 28px; color: #9e121c; }

.pp-body {
  --pp-maroon: #750a14;
  display: grid;
  grid-template-columns: minmax(0, 635fr) minmax(0, 342fr);
  grid-template-areas: "how why" "occasions types";
  gap: 10px 50px;
  align-items: start;
  margin-top: 16px;
}
.pp-body h2 { font-size: 25px; font-weight: 700; color: var(--pp-maroon); }
.pp-how { grid-area: how; padding-top: 16px; }
.pp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
.pp-steps li { position: relative; display: grid; justify-items: center; text-align: center; }
/* Arrow between steps, level with the icon circles. */
.pp-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25px;
  right: -9px;
  width: 16px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 7h13M9 2l5 5-5 5' fill='none' stroke='%239a9ca6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pp-step-icon { display: grid; place-items: center; width: 63px; height: 63px; border-radius: 50%; background: #fdebee; font-size: 30px; color: #ea113d; }
.pp-steps h3 { margin-top: 14px; font: 600 15px 'Rupee Sign', 'Poppins', sans-serif; color: #7e0f14; }
.pp-steps p { margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: #4f5563; }

.pp-why { grid-area: why; position: relative; margin-left: 42px; padding: 15px 28px 16px; border-radius: 12px; background: #fef0f1; }
.pp-why h2 { font-size: 21px; }
.pp-why ul { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: 8px; }
.pp-why li { display: flex; align-items: center; gap: 15px; font-size: 13.5px; color: #565b65; }
.pp-why li .icon { flex-shrink: 0; font-size: 20px; color: #b41a2c; }
.pp-branch { position: absolute; right: -28px; bottom: 0; width: 72px; height: 175px; fill: none; stroke: #f2b6c3; stroke-width: 1.2; }

.pp-occasions { grid-area: occasions; }
.pp-types { grid-area: types; padding-top: 10px; }
.pp-types h2 { font-size: 22px; }
.pp-occasions ul, .pp-types ul { display: grid; gap: 13px; margin-top: 14px; }
.pp-occasions ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pp-types ul { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.pp-occasions li, .pp-types li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; justify-items: center; text-align: center; font-size: 14px; color: #30353e; }
.pp-occasions img, .pp-types img { display: block; width: 100%; height: auto; border-radius: 8px; object-fit: cover; }
.pp-occasions img { aspect-ratio: 118 / 66; }
.pp-types img { aspect-ratio: 76 / 62; }
.pp-types li { font-size: 13px; white-space: nowrap; }

.pp-cta { position: relative; display: flex; align-items: center; min-height: 125px; margin: 28px 0 48px; padding: 0 0 0 52px; overflow: hidden; border-radius: 16px; background: #feebee; }
.pp-cta-icon { flex-shrink: 0; width: 78px; height: 84px; }
.pp-cta-hook { fill: none; stroke: #a0172a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-cta-blouse { fill: #fde4ea; stroke: #f0628a; stroke-width: 2; stroke-linejoin: round; }
.pp-cta-line { fill: none; stroke: #f0628a; stroke-width: 1.6; stroke-linecap: round; }
.pp-cta-dot { fill: #f0628a; }
.pp-cta-text { padding: 0 64px 0 22px; border-right: 1px solid #f3cfd8; }
.pp-cta h2 { font-size: 23px; font-weight: 700; line-height: 1.15; color: #7b000c; }
.pp-cta p { margin-top: 6px; font-size: 15.5px; color: #5b5f6f; }
.pp-cta .pp-book { position: relative; z-index: 1; width: 320px; margin-left: 62px; }
.pp-cta-photo { position: absolute; top: 0; right: 0; width: 34.5%; height: 100%; object-fit: cover; object-position: right center; }

@media (max-width: 1400px) {
  .pp-features { gap: 16px; }
}

/* Below this the photo would run under the headline, so it moves (card and all) below the words. */
@media (max-width: 1340px) {
  .pp-hero { display: flex; flex-direction: column; height: auto; }
  .pp-hero > .container { width: 100%; }
  .pp-photo { position: relative; order: 2; width: 100%; height: auto; }
  .pp-photo > img { height: auto; -webkit-mask-image: none; mask-image: none; }
  .pp-intro { padding: 32px 0 28px; }
  .pp-offer { padding: 22px 24px; }
  .pp-offer h2 { font-size: 21px; }
  .pp-price strong { font-size: 32px; }
  .pp-offer .pp-book { height: 46px; font-size: 15.5px; }
}

@media (max-width: 1200px) {
  .pp-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "how" "why" "occasions" "types"; gap: 28px; }
  .pp-why { margin-left: 0; }
  .pp-branch { right: 18px; }
  .pp-cta .pp-book { margin-left: 32px; width: auto; }
  .pp-cta-text { padding-right: 32px; }
}

@media (max-width: 900px) {
  /* The card is too small to sit on the photo here, so it follows it, overlapping the bottom edge. */
  .pp-hero { padding-bottom: 24px; }
  .pp-photo { aspect-ratio: auto; }
  .pp-photo > img { height: 280px; object-fit: cover; object-position: 30% center; }
  .pp-offer { position: relative; z-index: 1; left: auto; top: auto; width: auto; min-height: 0; margin: -48px 16px 0; background: var(--white); }
  .pp-intro { padding: 28px 0 24px; }
  .pp-cta { flex-wrap: wrap; gap: 18px; padding: 24px; }
  .pp-cta-text { padding: 0; border: 0; }
  .pp-cta .pp-book { margin-left: 0; }
  .pp-cta-photo { display: none; }
}

@media (max-width: 640px) {
  .pp-intro h1 { font-size: 42px; }
  .pp-eyebrow { font-size: 13px; letter-spacing: 1.8px; }
  .pp-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pp-features li { width: auto; font-size: 12.5px; line-height: 1.3; white-space: normal; }
  .pp-features span { width: 52px; height: 52px; font-size: 24px; }
  .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .pp-steps li:nth-child(2)::after { display: none; }
  .pp-why { padding: 16px 18px; }
  .pp-branch { display: none; }
  .pp-occasions ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-types ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-cta-icon { width: 60px; height: 64px; }
  .pp-cta .pp-book { width: 100%; padding: 0 16px; }
}

/* Makeup services page */
.mk-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: linear-gradient(90deg, #feedf0, #fce9e9);
}
.mk-hero-branch { position: absolute; left: -10px; top: 26px; width: 62px; height: 150px; fill: none; stroke: #f4bcc8; stroke-width: 1.2; }
/* The photo hugs the right edge at the hero's height; its left edge fades into the pink. */
.mk-photo { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1452 / 654; }
.mk-photo > img { display: block; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%); mask-image: linear-gradient(90deg, transparent, #000 8%); }
/* The four cards sit where they were in the design photo (they were painted out of the image). */
.mk-picks { position: absolute; left: 64.5%; top: 7.2%; width: 32.2%; height: 79.9%; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.mk-picks a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 0 14px 0 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 6px 20px rgba(106, 2, 9, 0.05); font-size: 12px; white-space: nowrap; color: #5b606b; }
.mk-picks a:hover { background: rgba(255, 255, 255, 0.92); }
.mk-picks .icon { font-size: 38px; color: #c31527; stroke-width: 1.2; }
/* Drawn larger than its box so it matches the design without squeezing the text. */
.mk-picks .icon:first-child { transform: scale(1.22); }
.mk-picks .icon:last-child { font-size: 20px; color: #f86a94; stroke-width: 1.6; }
.mk-picks strong { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 600; color: #490b0d; }

.mk-intro { position: relative; width: fit-content; max-width: 480px; padding-top: 32px; }
.mk-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase; color: #ca6873; }
.mk-intro h1 { margin-top: 10px; font-size: 54px; font-weight: 700; line-height: 1.04; color: #6a0209; }
.mk-intro h1 span { display: block; color: #ee1351; }
.mk-lead { max-width: 392px; margin-top: 12px; font-size: 15.5px; line-height: 1.45; color: #47505e; }
.mk-book { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 44px; padding: 0 30px; border-radius: 6px; background: #ef034f; font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--white); }
.mk-book:hover { background: #cc0343; }
.mk-book .icon { font-size: 19px; }
.mk-intro .mk-book { margin-top: 18px; }
.mk-features { display: flex; margin: 20px 0 0 -22px; }
.mk-features li { display: grid; justify-items: center; gap: 8px; width: 119px; text-align: center; font-size: 13px; line-height: 1.3; color: #575b6a; }
.mk-features .icon { font-size: 30px; color: #af1121; stroke-width: 1.3; }

.mk-body { display: grid; grid-template-columns: minmax(0, 723fr) minmax(0, 305fr); gap: 24px; align-items: stretch; margin-top: 14px; }
.mk-body h2, .mk-band h2 { font-weight: 700; }
.mk-services h2 { font-size: 22px; color: #91020f; }
.mk-services ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mk-services li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; overflow: hidden; border: 1px solid #f6e1e4; border-radius: 8px; background: #fef8f8; }
.mk-services img { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 134 / 116; object-fit: cover; }
.mk-services li > div { padding: 14px 0 16px 10px; }
.mk-services h3 { font: 600 12px 'Rupee Sign', 'Poppins', sans-serif; letter-spacing: -0.3px; color: #561517; }
.mk-services p { margin-top: 4px; font-size: 11.5px; color: #696d78; }
.mk-services li > a { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 8px 0 2px; border-radius: 50%; background: #fde4e9; font-size: 14px; color: #e8194f; }
.mk-services li > a:hover { background: #fbd0da; }

.mk-why { position: relative; overflow: hidden; padding: 18px 26px 18px 30px; border-radius: 12px; background: #feedf0; }
.mk-why h2 { font-size: 21px; color: #89020c; }
.mk-why ul { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 14px; }
.mk-why li { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: #555968; }
.mk-why li .icon { flex-shrink: 0; font-size: 22px; color: #dc1a46; }
.mk-why-branch { position: absolute; right: 18px; bottom: 8px; width: 78px; height: 190px; fill: none; stroke: #f2b6c3; stroke-width: 1.1; }

.mk-band { display: grid; grid-template-columns: minmax(0, 672fr) minmax(0, 420fr); min-height: 184px; margin: 16px 0 44px; overflow: hidden; border-radius: 12px; background: #fdf5f6; }
.mk-how { padding: 16px 0 18px 23px; }
.mk-how h2 { display: flex; align-items: center; gap: 14px; font-size: 20px; color: #950311; }
.mk-how h2::after { content: ''; width: 40px; height: 1px; background: #eed9db; }
.mk-how ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.mk-how li { position: relative; display: grid; justify-items: center; text-align: center; }
.mk-how li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  right: -8px;
  width: 16px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 7h13M9 2l5 5-5 5' fill='none' stroke='%23a3a1ac' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-how li > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fce5e8; font-size: 27px; color: #e41148; }
.mk-how h3 { margin-top: 10px; font: 600 14.5px 'Rupee Sign', 'Poppins', sans-serif; color: #8b0b12; }
.mk-how p { margin-top: 4px; font-size: 13px; line-height: 1.4; color: #5a5d6c; }

.mk-ready { position: relative; display: flex; align-items: center; padding-left: 70px; overflow: hidden; border-radius: 62px 0 0 62px / 50% 0 0 50%; background: linear-gradient(110deg, #fde1e0, #fbcdca); }
.mk-ready > div { position: relative; z-index: 1; }
.mk-ready h2 { font-size: 21px; line-height: 1.15; color: #73050d; }
.mk-ready p { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: #5c5765; }
.mk-ready .mk-book { height: 42px; margin-top: 14px; padding: 0 32px; font-size: 17px; }
.mk-ready > img { position: absolute; top: 0; right: 0; width: auto; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.mk-ready-branch { position: absolute; left: 26px; bottom: -6px; width: 44px; height: 108px; fill: none; stroke: #f5bcc4; stroke-width: 1.2; }

@media (max-width: 1360px) {
  .mk-hero { display: flex; flex-direction: column; height: auto; }
  .mk-hero > .container { width: 100%; }
  .mk-photo { position: relative; order: 2; width: 100%; height: auto; }
  .mk-photo > img { height: auto; -webkit-mask-image: none; mask-image: none; }
  .mk-intro { padding: 32px 0 28px; }
  .mk-picks a { gap: 14px; padding: 0 16px; font-size: 12.5px; }
  .mk-picks .icon { font-size: 32px; }
  .mk-picks strong { font-size: 15px; }
}

@media (max-width: 1200px) {
  .mk-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mk-band { grid-template-columns: minmax(0, 1fr); }
  .mk-how { padding-right: 23px; }
  .mk-ready { min-height: 184px; border-radius: 0; }
}

@media (max-width: 900px) {
  /* The cards are too small to sit on the photo here, so they follow it. */
  .mk-photo > img { height: 300px; object-fit: cover; object-position: 22% center; }
  .mk-picks { position: static; width: auto; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; padding: 16px; }
  .mk-picks a { min-height: 76px; background: var(--white); border: 1px solid #f6e1e4; }
  .mk-services ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .mk-intro h1 { font-size: 40px; }
  .mk-eyebrow { font-size: 12.5px; letter-spacing: 1.8px; }
  .mk-lead { font-size: 15px; }
  .mk-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-left: 0; }
  .mk-features li { width: auto; font-size: 12px; }
  .mk-picks { grid-template-columns: minmax(0, 1fr); }
  .mk-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .mk-how li:nth-child(2)::after { display: none; }
  .mk-ready { padding: 26px 20px; }
  .mk-ready > img, .mk-ready-branch { display: none; }
  .mk-why-branch { display: none; }
}

/* Book Makeup Service popup (Makeup page) */
.bk-modal { --bk-pink: #f5185e; --bk-pink-dark: #d90c4c; --bk-ink: #1d2133; --bk-line: #e2e3e8; width: min(800px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 10px; background: var(--white); box-shadow: 0 24px 60px rgba(20, 24, 51, 0.25); color: var(--bk-ink); overflow: hidden; }
.bk-modal[open] { display: flex; flex-direction: column; }
.bk-modal::backdrop { background: rgba(42, 26, 30, 0.55); }
.bk-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bk-head { flex-shrink: 0; display: flex; align-items: center; gap: 22px; padding: 7px 18px 7px 25px; background: linear-gradient(90deg, #fdeff3, #fdf7f9 55%); }
.bk-head-icon { display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: #fde3ec; font-size: 24px; color: var(--bk-pink); }
.bk-head h2 { font: 600 20px/1.3 'Rupee Sign', 'Poppins', sans-serif; color: #141833; }
.bk-head p { margin-top: 2px; font-size: 12.5px; color: #81838f; }
.bk-close { align-self: flex-start; display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; margin: 4px 0 0 auto; border-radius: 50%; font-size: 18px; color: #676981; }
.bk-close:hover { background: #fde3ec; color: var(--bk-pink); }
.bk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 14px; }
.bk-body > .login-message { margin: 0 0 12px; }

.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 24px; }
.bk-span-2 { grid-column: span 2; }
.bk-address { grid-template-columns: minmax(0, 1.24fr) repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.bk-contact { gap: 10px 17px; }
.bk-field { min-width: 0; }
.bk-field > label, .bk-label, .bk-title { display: block; margin-bottom: 5px; font: 600 12.5px/16px 'Rupee Sign', 'Poppins', sans-serif; color: var(--bk-ink); }
.bk-title { margin-bottom: 6px; }
.bk-field.is-split > label { padding-left: 41px; }
.bk-req { color: var(--bk-pink); }
.bk-section { margin-top: 13px; padding-top: 9px; border-top: 1px solid #f0f0f2; }
.bk-home { min-width: 0; margin: 0; padding: 0; border: 0; }

.bk-input { position: relative; display: flex; align-items: center; height: 34px; border: 1px solid var(--bk-line); border-radius: 5px; background: var(--white); }
.bk-input > .icon { position: absolute; left: 13px; font-size: 17px; color: var(--bk-pink); pointer-events: none; }
.bk-input.is-muted > .icon { color: #8a8f9c; }
.bk-input input, .bk-input textarea, .bk-select { display: block; width: 100%; height: 100%; padding: 0 12px 0 42px; border: 0; border-radius: inherit; outline: none; background: none; font: 12.5px 'Rupee Sign', 'Poppins', sans-serif; color: var(--bk-ink); }
.bk-date input { appearance: none; padding-right: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%233b3f4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; cursor: pointer; }
.bk-input ::placeholder { color: #9b9daa; opacity: 1; }
.bk-input:focus-within { border-color: var(--bk-pink); box-shadow: 0 0 0 3px #fde3ea; }
.bk-input:has([aria-invalid="true"]), .bk-coord:has([aria-invalid="true"]) { border-color: #e23a64; }
.bk-input.is-split::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 40px; border-right: 1px solid var(--bk-line); border-radius: 5px 0 0 5px; background: #f9f9fb; }
.bk-input.is-split > .icon { left: 11px; }
.bk-input.is-split input { padding-left: 52px; }
.bk-input.is-textarea { height: auto; }
.bk-input.is-textarea > .icon { top: 10px; }
.bk-input textarea { height: 50px; min-height: 50px; padding: 9px 12px 8px 42px; line-height: 1.45; resize: vertical; }
/* A date box has no placeholder of its own, so an empty one shows "Select Date" until it is used. */
.bk-date input::-webkit-calendar-picker-indicator { display: none; }
.bk-placeholder { position: absolute; left: 42px; display: none; font-size: 12.5px; color: #9b9daa; pointer-events: none; }
.bk-date.is-empty:not(:focus-within) input { color: transparent; }
.bk-date.is-empty:not(:focus-within) .bk-placeholder { display: block; }
/* Dropdowns: the select itself is hidden; this button shows the choice and opens the list. */
.bk-select { display: flex; align-items: center; padding-right: 36px; text-align: left; cursor: pointer; }
.bk-select.is-placeholder { color: #9b9daa; }
.bk-select-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-select::after { content: ''; position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; margin-top: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%233b3f4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.2s; }
.bk-input.is-open { border-color: var(--bk-pink); box-shadow: 0 0 0 3px #fde3ea; }
.bk-input.is-open .bk-select::after { transform: rotate(180deg); }
/* The post office box's arrow, shown once the pincode has found its post offices. */
.bk-suggest { position: absolute; top: 0; right: 0; width: 36px; height: 100%; border-radius: 0 5px 5px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%233b3f4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.2s; }
.bk-input.is-open .bk-suggest { transform: rotate(180deg); }
.bk-input:has(.bk-suggest:not([hidden])) input { padding-right: 36px; }
.bk-select-panel { position: fixed; z-index: 20; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #f1e1e7; border-radius: 10px; background: var(--white); box-shadow: 0 16px 36px rgba(20, 24, 51, 0.16), 0 2px 6px rgba(20, 24, 51, 0.06); animation: bk-drop 0.14s ease-out; }
.bk-select-panel.is-up { animation-name: bk-drop-up; }
.bk-select-list { position: relative; flex: 1; min-height: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #f3b4c8 transparent; }
.bk-select-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.35; color: #3a3e4d; cursor: pointer; }
.bk-select-list [role="option"] + [role="option"] { margin-top: 2px; }
.bk-select-list .is-active { background: #fdf0f4; color: var(--bk-ink); }
.bk-select-list [aria-selected="true"] { background: #fde3ec; font-weight: 600; color: var(--bk-pink); }
.bk-select-list [aria-selected="true"].is-active { background: #fcd7e3; }
.bk-select-list [aria-selected="true"]::after { content: ''; flex-shrink: 0; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23f5185e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bk-select-list [aria-disabled="true"] { background: none; color: #bfc1ca; cursor: not-allowed; }
/* Long lists: a search box on top (beating the .bk-input input rule) and a heading over each group, which stays put while its options scroll. */
.bk-select-panel .bk-select-search { flex-shrink: 0; width: calc(100% - 16px); min-width: 0; height: 34px; margin: 8px 8px 2px; padding: 0 10px 0 32px; -webkit-appearance: none; appearance: none; border: 1px solid var(--bk-line); border-radius: 6px; outline: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238a8f9c' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%238a8f9c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px center / 15px no-repeat; font: 12.5px 'Rupee Sign', 'Poppins', sans-serif; color: var(--bk-ink); }
.bk-select-panel .bk-select-search::placeholder { color: #9b9daa; }
.bk-select-panel .bk-select-search:focus { border-color: var(--bk-pink); box-shadow: 0 0 0 3px #fde3ea; }
.bk-select-panel .bk-select-search::-webkit-search-cancel-button { cursor: pointer; }
.bk-select-none { padding: 14px 12px 16px; font-size: 12.5px; text-align: center; color: #8a8f9c; }
.bk-select-group + .bk-select-group, [role="option"] + .bk-select-group, .bk-select-group + [role="option"] { margin-top: 6px; }
.bk-select-group-name { position: sticky; top: -6px; z-index: 1; display: block; padding: 8px 12px 5px; background: var(--white); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #a3949a; }
@keyframes bk-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bk-drop-up { from { opacity: 0; transform: translateY(6px); } }
@media (pointer: coarse) {
  .bk-select-list [role="option"] { padding: 11px 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-select-panel { animation: none; }
  .bk-select::after, .bk-suggest { transition: none; }
}

.bk-people { display: flex; align-items: center; gap: 22px; }
.bk-people-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 34px; border: 1px solid #f7e4eb; border-radius: 5px; background: #fef6f9; font-size: 19px; color: var(--bk-pink); }
.bk-stepper { display: flex; flex: 1; max-width: 180px; height: 34px; overflow: hidden; border: 1px solid var(--bk-line); border-radius: 5px; }
.bk-stepper:focus-within { border-color: var(--bk-pink); box-shadow: 0 0 0 3px #fde3ea; }
.bk-stepper button { display: grid; place-items: center; flex-shrink: 0; width: 40px; background: #f7f7f9; font-size: 16px; color: var(--bk-pink); }
.bk-stepper button:hover:not(:disabled) { background: #fdecf1; }
.bk-stepper button:disabled { color: #f7a6bf; cursor: not-allowed; }
.bk-stepper input { flex: 1; min-width: 0; border: 0; border-inline: 1px solid var(--bk-line); outline: none; text-align: center; font-size: 13.5px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.bk-stepper input::-webkit-inner-spin-button, .bk-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bk-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 58px; min-height: 34px; padding-left: 4px; }
.bk-radio { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #4a4d5c; cursor: pointer; }
.bk-radio:has(:checked) { color: var(--bk-ink); }
.bk-radio input { flex-shrink: 0; width: 19px; height: 19px; margin: 0; border: 1.5px solid #b9bcc7; border-radius: 50%; appearance: none; background: var(--white); cursor: pointer; }
.bk-radio input:checked { border-color: var(--bk-pink); background: radial-gradient(circle, var(--bk-pink) 0 4.6px, var(--white) 5.2px); }
.bk-radio input:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }

.bk-where { display: grid; grid-template-columns: minmax(0, 388fr) minmax(0, 338fr); gap: 14px 26px; }
.bk-map { position: relative; isolation: isolate; height: 78px; overflow: hidden; border: 1px solid var(--bk-line); border-bottom: 0; border-radius: 6px 6px 0 0; background: #f2efe9; font-size: 12px; }
.bk-map.is-failed { display: grid; place-items: center; padding: 0 16px; text-align: center; color: #6d7177; }
/* Leaflet's own stylesheet loads after this one, hence the doubled-up selectors. */
.bk-map.leaflet-container { background: #f2efe9; }
/* Softer tiles, like the design, so the pin stands out. */
.bk-map .leaflet-tile-pane { filter: saturate(0.5) brightness(1.04) contrast(0.92); }
.bk-map .leaflet-control-zoom.leaflet-bar { margin: 8px 8px 0 0; border: 1px solid var(--bk-line); border-radius: 4px; box-shadow: 0 2px 6px rgba(20, 24, 51, 0.12); }
.bk-map .leaflet-control-zoom.leaflet-bar a { width: 26px; height: 26px; font: 500 17px/25px 'Poppins', sans-serif; color: var(--bk-ink); }
.bk-map.leaflet-container .leaflet-control-attribution { padding: 0 4px; font-size: 8.5px; line-height: 1.4; }
.bk-pin { color: var(--bk-pink); filter: drop-shadow(0 2px 2px rgba(20, 24, 51, 0.25)); }
.bk-pin svg { display: block; width: 100%; height: 100%; }
.bk-locate { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 29px; border: 1px solid #f7558b; border-radius: 4px; background: #fef1f5; font-size: 12px; font-weight: 600; color: var(--bk-pink); }
.bk-locate:hover:not(:disabled) { background: #fde3ec; }
.bk-locate:disabled { opacity: 0.7; cursor: wait; }
.bk-locate .icon { font-size: 15px; }
.bk-coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-coord { position: relative; display: block; height: 41px; border: 1px solid #d5d8e1; border-radius: 5px; background: #f8f9fd; cursor: text; }
.bk-coord:focus-within { border-color: var(--bk-pink); box-shadow: 0 0 0 3px #fde3ea; background: var(--white); }
.bk-coord > .icon { position: absolute; top: 50%; left: 14px; translate: 0 -50%; font-size: 17px; color: #8a8f9c; }
.bk-coord b { position: absolute; top: 5px; left: 44px; font-size: 11.5px; font-weight: 600; color: var(--bk-ink); }
.bk-coord input { width: 100%; height: 100%; padding: 17px 8px 0 44px; border: 0; outline: none; background: none; font-size: 12.5px; color: var(--bk-ink); -moz-appearance: textfield; appearance: textfield; }
.bk-coord input::placeholder { color: #9b9daa; }
.bk-coord input::-webkit-inner-spin-button, .bk-coord input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bk-landmark { margin-top: 11px; }
.bk-notes { margin-top: 10px; }
.bk-studio { display: flex; gap: 12px; font-size: 13px; line-height: 1.55; color: #4a4d5c; }
.bk-studio > .icon { flex-shrink: 0; margin-top: 2px; font-size: 20px; color: var(--bk-pink); }
.bk-studio strong { display: block; font-weight: 600; color: var(--bk-ink); }

.bk-error, .bk-hint { margin-top: 5px; font-size: 12px; line-height: 1.35; }
.bk-error, .bk-hint.is-error { color: #c8103c; }
.bk-hint { color: #6d7177; }

.bk-foot { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 0 20px; padding: 10px 0 14px; border-top: 1px solid #f0f0f2; }
.bk-cancel, .bk-submit { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.bk-cancel { min-width: 118px; border: 1px solid #cfd1d9; background: var(--white); color: var(--bk-ink); }
.bk-cancel:hover { background: #f7f7f9; }
.bk-submit { min-width: 142px; background: var(--bk-pink); color: var(--white); }
.bk-submit:hover { background: var(--bk-pink-dark); }
.bk-submit:disabled { opacity: 0.65; cursor: wait; }
.bk-close:focus-visible, .bk-locate:focus-visible, .bk-cancel:focus-visible, .bk-submit:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }
.bk-stepper button:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: -2px; }
.bk-done { display: grid; justify-items: center; gap: 10px; padding: 36px 24px 32px; text-align: center; }
.bk-done-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e7f6ec; font-size: 30px; color: #1f8a3a; }
.bk-done h3 { font: 600 19px 'Rupee Sign', 'Poppins', sans-serif; color: #141833; }
.bk-done p { max-width: 440px; font-size: 13.5px; line-height: 1.6; color: #4a4d5c; }
.bk-done .bk-submit { margin-top: 8px; }

@media (max-width: 760px) {
  .bk-grid, .bk-address, .bk-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .bk-when > :first-child, .bk-span-2, .bk-address > :first-child { grid-column: 1 / -1; }
  .bk-where { grid-template-columns: minmax(0, 1fr); }
  .bk-radios { gap: 8px 32px; }
}

@media (max-width: 520px) {
  .bk-head { gap: 14px; padding-left: 16px; }
  .bk-head-icon { width: 42px; height: 42px; font-size: 20px; }
  .bk-head h2 { font-size: 18px; }
  .bk-body { padding: 14px 16px; }
  .bk-foot { margin: 0 16px; }
  .bk-grid, .bk-address, .bk-contact { grid-template-columns: minmax(0, 1fr); }
  .bk-stepper { max-width: none; }
  .bk-cancel, .bk-submit { flex: 1; min-width: 0; }
  .bk-done .bk-submit { flex: none; min-width: 142px; }
}

/* Saree Pre-Pleating booking popup (Saree Prepleating page). Its fields, dropdowns and footer are the bk- ones above. */
.sp-modal { width: min(1160px, calc(100% - 32px)); }
.sp-close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(20, 24, 51, 0.14); font-size: 17px; color: #3b3f4c; }
.sp-close:hover { color: var(--bk-pink); }
.sp-close:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }
.sp-body { padding: 0 20px 18px; background: linear-gradient(180deg, #fdf1f5 0, #fff8fa 180px, #fffafb 100%); }

.sp-head { position: relative; margin: 0 -20px 14px; padding: 20px 20px 0; }
.sp-head > :not(.sp-head-photo) { position: relative; }
.sp-head-photo { position: absolute; top: 0; right: 0; width: 360px; height: 150px; object-fit: cover; object-position: 50% 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, #000 60%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, #000 60%, transparent); mask-composite: intersect; }
.sp-head h2 { font: 700 30px/1.15 'Playfair Display', Georgia, serif; color: #141833; }
.sp-head h2 span { color: var(--bk-pink); }
.sp-head > p { margin-top: 6px; font-size: 13.5px; color: #4a4d5c; }
.sp-perks { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-top: 14px; }
.sp-perks li { display: flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 12.5px; font-weight: 500; color: #2b2f3a; }
.sp-perks li:first-child { padding-left: 0; }
.sp-perks li + li { border-left: 1px solid #e8d5dc; }
.sp-perks span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fde4ec; font-size: 17px; color: var(--bk-pink); }

.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 16px; align-items: start; }
.sp-main { display: grid; gap: 12px; min-width: 0; }
.sp-section { border: 1px solid #f4e2e8; border-radius: 10px; background: var(--white); box-shadow: 0 2px 10px rgba(232, 24, 94, 0.03); }
.sp-section-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #fdeaf1, #fff6f9 55%, #fff); }
.sp-section-head > div { flex: 1; min-width: 0; }
.sp-section-head h3 { font: 600 14.5px/1.3 'Rupee Sign', 'Poppins', sans-serif; color: #141833; }
.sp-section-head p { font-size: 12px; color: #6d7080; }
.sp-num { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ff4d86, #e3125a); box-shadow: 0 3px 8px rgba(227, 18, 90, 0.3); font-size: 12.5px; font-weight: 600; color: var(--white); }
.sp-section-body { padding: 12px 14px 14px; }
.sp-grid { display: grid; gap: 12px 16px; }
.sp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-cols-4 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.85fr) minmax(0, 1fr); }
.sp-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-span-2 { grid-column: span 2; }
.sp-span-3 { grid-column: span 3; }
.sp-modal .bk-date input { padding-right: 34px; background-image: none; }
.sp-stepper { max-width: none; }
.sp-stepper button { background: #fde8ef; }

.sp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4a4d5c; cursor: pointer; }
.sp-check .ct-box { width: 16px; height: 16px; }
.sp-urgent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: #fdecf2; }
.sp-urgent-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #141833; }
.sp-urgent-title .icon { font-size: 19px; color: var(--bk-pink); fill: currentColor; }
.sp-urgent .sp-check { margin-right: -18px; }
/* An (i) with a short explanation on hover or focus. */
.sp-info { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; color: #8a8f9c; }
.sp-info:hover, .sp-info:focus-visible { color: var(--bk-pink); outline: none; }
.sp-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; width: 230px; padding: 8px 10px; border-radius: 6px; background: #1d2133; box-shadow: 0 6px 18px rgba(20, 24, 51, 0.2); font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; color: var(--white); opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity 0.15s; pointer-events: none; }
.sp-info:hover::after, .sp-info:focus-visible::after { opacity: 1; visibility: visible; }
.bk-date .sp-info { position: absolute; top: 50%; right: 8px; margin-top: -11px; }
.bk-date .sp-info::after { left: auto; right: -8px; transform: none; }

.sp-saree { padding: 10px 14px 14px; border: 1px solid #f1e3e8; border-radius: 10px; background: #fffdfe; }
.sp-saree + .sp-saree { margin-top: 12px; }
.sp-saree-head { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 10px; }
.sp-saree-head > .icon { font-size: 22px; color: var(--bk-pink); }
.sp-saree-head h4 { font: 600 14px 'Rupee Sign', 'Poppins', sans-serif; color: #5c1a2c; }
.sp-remove { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: auto; padding: 0 12px; border-radius: 6px; background: #fde8ef; font-size: 12px; font-weight: 500; color: var(--bk-pink); }
.sp-remove:hover { background: #fbd4e0; }
.sp-remove .icon { font-size: 15px; }
.sp-image-field { margin-top: 12px; }
.sp-image { display: flex; gap: 10px; }
.sp-thumb { position: relative; flex-shrink: 0; width: 72px; height: 72px; margin: 0; overflow: hidden; border-radius: 6px; background: #f6eef1; }
.sp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-thumb button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); font-size: 12px; color: #3b3f4c; }
.sp-thumb button:hover { color: var(--bk-pink); }
.sp-upload { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; width: 176px; height: 72px; border: 1px solid var(--bk-line); border-radius: 6px; background: var(--white); text-align: center; font-size: 12.5px; color: #3b3f4c; cursor: pointer; }
.sp-upload:hover, .sp-upload:focus-within { border-color: var(--bk-pink); }
.sp-upload:focus-within { box-shadow: 0 0 0 3px #fde3ea; }
.sp-upload > .icon { margin-bottom: 2px; font-size: 18px; }
.sp-upload small { font-size: 10.5px; color: #8a8f9c; }
.sp-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sp-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 42px; margin-top: 12px; border: 1px dashed #f290b1; border-radius: 8px; background: #fef2f6; font-size: 13px; font-weight: 600; color: var(--bk-pink); }
.sp-add span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bk-pink); font-size: 13px; color: var(--white); }
.sp-add:hover:not(:disabled) { background: #fde5ed; }
.sp-add:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-add:focus-visible, .sp-remove:focus-visible, .sp-thumb button:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }
.sp-section-head .sp-same { margin-left: auto; white-space: nowrap; }

.sp-side { display: grid; gap: 14px; }
.sp-card { overflow: hidden; border: 1px solid #f4e2e8; border-radius: 10px; background: var(--white); box-shadow: 0 2px 10px rgba(232, 24, 94, 0.03); }
.sp-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.sp-card-head > .icon { flex-shrink: 0; font-size: 23px; color: var(--bk-pink); }
.sp-card-head h3 { font: 600 14.5px/1.3 'Rupee Sign', 'Poppins', sans-serif; color: #141833; }
.sp-card-head p { margin-top: 2px; font-size: 12px; color: #6d7080; }
.sp-card-head.is-tinted { margin-bottom: 4px; padding-bottom: 12px; background: linear-gradient(90deg, #fdeaf1, #fff8fa); }
.sp-card-head.is-tinted h3 { color: var(--bk-pink); }
.sp-card:has(.is-soft) .sp-card-head.is-tinted h3 { color: #141833; }
.sp-choices { margin: 0 14px 14px; padding: 4px 14px; border-radius: 8px; background: #fdf2f6; }
.sp-choices div { display: grid; grid-template-columns: 104px minmax(0, 1fr); padding: 8px 0; font-size: 12.5px; }
.sp-choices div + div { border-top: 1px solid #f7e1e9; }
.sp-choices dt { color: #4a4d5c; }
.sp-choices dd { margin: 0; font-weight: 500; color: #141833; }
.sp-choices dd::before { content: ':'; margin-right: 12px; font-weight: 400; color: #6d7080; }
.sp-steps { display: grid; gap: 11px; padding: 8px 16px 16px; counter-reset: sp-step; }
.sp-steps li { display: flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: 1.4; color: #2b2f3a; }
.sp-steps li::before { content: counter(sp-step); counter-increment: sp-step; display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bk-pink); font-size: 12px; font-weight: 600; color: var(--white); }
.sp-steps.is-soft li { color: #4a4d5c; }
.sp-steps.is-soft li::before { background: #fb8db0; }
.sp-send-to { margin: -4px 16px 16px; padding: 9px 12px; border-radius: 8px; background: #fdf2f6; font-size: 12px; line-height: 1.5; color: #4a4d5c; }
.sp-send-to strong { font-weight: 600; color: #141833; }
.sp-help ul { display: grid; gap: 10px; padding: 0 16px 16px 51px; }
.sp-help li { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #141833; }
.sp-help li .icon { font-size: 17px; color: var(--bk-pink); }
.sp-help a:hover { color: var(--bk-pink); }

@media (max-width: 1040px) {
  .sp-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* The perks run the full width here, so the photo would sit behind them. */
  .sp-head-photo { display: none; }
}

@media (max-width: 760px) {
  .sp-head { padding-right: 56px; }
  .sp-head h2 { font-size: 25px; }
  .sp-perks li { padding: 0 14px; }
  .sp-cols-3, .sp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-span-2, .sp-span-3 { grid-column: span 1; }
  .sp-section-head { flex-wrap: wrap; }
  .sp-section-head .sp-same { margin-left: 38px; }
  .sp-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .sp-body { padding: 0 14px 14px; }
  .sp-head { margin: 0 -14px 12px; padding: 16px 52px 0 14px; }
  .sp-perks li { width: 50%; padding: 0; border: 0 !important; }
  .sp-cols-3, .sp-cols-4, .sp-cols-6 { grid-template-columns: minmax(0, 1fr); }
  .sp-image { flex-wrap: wrap; }
  .sp-upload { flex: 1; }
}

/* About us page */
.ab-hero { position: relative; height: 266px; overflow: hidden; background: linear-gradient(90deg, #fff4f3, #fef0f1); }
.ab-hero-branch { position: absolute; left: -8px; bottom: -6px; width: 56px; height: 140px; fill: none; stroke: #f4bcc8; stroke-width: 1.2; }
/* The photo hugs the right edge at the hero's height; its left edge fades into the pink. */
/* On narrower screens the photo slides right (trimming the plain wall at its edge) so the script stays clear of the paragraph. */
.ab-photo { position: absolute; top: 0; right: min(0px, calc(100vw - 1413px)); height: 100%; aspect-ratio: 1242 / 408; }
.ab-photo > img { display: block; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%); mask-image: linear-gradient(90deg, transparent, #000 5%); }
.ab-intro { position: relative; width: fit-content; max-width: 600px; padding: 15px 0 14px 52px; }
.ab-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #cf6674; }
.ab-intro h1 { margin-top: 6px; font-size: 42px; font-weight: 700; line-height: 1.02; color: #79020d; }
.ab-intro h1 span { display: block; color: #f0164e; }
.ab-lead { max-width: 540px; margin-top: 10px; font-size: 13.5px; line-height: 1.2; color: #4c5365; }
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 36px; padding: 0 40px; border-radius: 5px; background: #f1164e; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--white); }
.ab-btn:hover { background: #cf0f42; }
.ab-btn .icon { font-size: 18px; }
.ab-intro .ab-btn { margin-top: 14px; }

.ab-stats { background: #fef8f8; }
.ab-stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; min-height: 68px; }
.ab-stats li { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 7px 0; }
.ab-stats li + li::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #f1dfe2; }
.ab-stats li > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fee7ea; font-size: 26px; color: #cd2137; }
.ab-stats p { font-size: 13.5px; line-height: 1.3; color: #676f7c; }
.ab-stats strong { display: block; font-size: 20px; font-weight: 700; color: #81060e; }

.ab-about { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-top: 12px; }
.ab-about h2 { font-size: 21px; font-weight: 700; color: #84040e; }
.ab-about p { margin-top: 6px; font-size: 14px; line-height: 1.24; color: #4f5661; }
.ab-who { padding: 4px 36px 4px 45px; }
.ab-aim { display: flex; align-items: center; gap: 30px; padding: 22px 26px 22px 36px; border-left: 1px solid #f1e1e4; }
.ab-aim > span { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: #fde9ec; font-size: 30px; color: #c90f23; }
.ab-aim h2 { font-size: 20px; }

.ab-heading { display: flex; align-items: center; gap: 14px; font-size: 21px; font-weight: 700; color: #80060f; }
.ab-heading::after { content: ''; width: 48px; height: 1px; background: #e9b9c2; }
.ab-offer { margin-top: 16px; }
.ab-offer ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 10px; }
.ab-offer li { display: grid; grid-template-columns: 166px minmax(0, 1fr) auto; align-items: center; min-height: 91px; overflow: hidden; border: 1px solid #fbe7ea; border-radius: 6px; background: #fef4f5; }
.ab-offer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-offer li > div { padding: 10px 10px 10px 20px; }
.ab-offer h3 { font-size: 16.5px; font-weight: 700; color: #870d11; }
.ab-offer p { margin-top: 4px; font-size: 12.5px; line-height: 1.28; color: #606573; }
.ab-offer li > a { display: grid; place-items: center; width: 27px; height: 27px; margin-right: 14px; border-radius: 50%; background: #fde0e6; font-size: 15px; color: #de4e63; }
.ab-offer li > a:hover { background: #fbcbd6; }

.ab-values { margin-top: 14px; }
.ab-values ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.ab-values li { display: flex; align-items: center; gap: 22px; padding: 4px 12px 4px 45px; }
.ab-values li + li { border-left: 1px solid #f1e1e4; }
.ab-values li > span { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; background: #fdedf0; font-size: 28px; color: #ae1623; }
.ab-values h3 { font: 600 15px 'Rupee Sign', 'Poppins', sans-serif; color: #8a0e11; }
.ab-values p { margin-top: 4px; font-size: 13px; line-height: 1.3; color: #676d79; }

.ab-cta { position: relative; display: flex; align-items: center; min-height: 74px; margin: 20px 0 44px; padding: 8px 140px 8px 140px; overflow: hidden; border-radius: 10px; background: #feedf1; }
.ab-cta h2 { flex-shrink: 0; font-size: 22px; font-weight: 700; line-height: 1.08; color: #8a030e; }
.ab-cta p { margin: 0 auto 0 96px; font-size: 13.5px; line-height: 1.35; color: #5a6071; }
.ab-cta .ab-btn { flex-shrink: 0; height: 38px; padding: 0 44px; font-size: 14.5px; }
.ab-cta-branch { position: absolute; bottom: -12px; width: 46px; height: 96px; fill: none; stroke: #f2b2bf; stroke-width: 1.3; }
.ab-cta-left { left: 26px; }
.ab-cta-right { right: 26px; transform: scaleX(-1); }

@media (max-width: 1340px) {
  .ab-hero { display: flex; flex-direction: column; height: auto; }
  .ab-hero > .container { width: 100%; }
  .ab-photo { position: relative; right: auto; order: 2; width: 100%; height: auto; }
  .ab-photo > img { height: auto; -webkit-mask-image: none; mask-image: none; }
  .ab-intro { padding: 28px 0 26px 40px; }
  .ab-cta { padding: 12px 90px; }
  .ab-cta p { margin-left: 40px; }
}

@media (max-width: 1100px) {
  .ab-about { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-who { grid-column: 1 / -1; padding: 16px 0; }
  .ab-aim:first-of-type { border-left: 0; padding-left: 0; }
  .ab-offer ul { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ab-values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .ab-values li { padding-left: 0; }
  .ab-values li + li { border-left: 0; }
  .ab-cta { flex-wrap: wrap; gap: 14px 40px; padding: 22px 90px; }
  .ab-cta p { flex: 1 1 320px; margin: 0; }
}

@media (max-width: 768px) {
  .ab-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats li { justify-content: flex-start; padding: 12px 0; }
  .ab-stats li + li::before { display: none; }
  .ab-about { grid-template-columns: minmax(0, 1fr); }
  .ab-aim { padding: 14px 0; border-left: 0; gap: 18px; }
  .ab-cta { padding: 24px; }
  .ab-cta-branch { display: none; }
}

@media (max-width: 640px) {
  .ab-intro { padding-left: 0; }
  .ab-intro h1 { font-size: 34px; }
  .ab-eyebrow { font-size: 12.5px; letter-spacing: 2.4px; }
  .ab-stats li { gap: 10px; }
  .ab-stats li > span { width: 46px; height: 46px; font-size: 22px; }
  .ab-stats strong { font-size: 18px; }
  .ab-stats p { font-size: 12.5px; }
  .ab-offer li { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .ab-offer li > div { padding-left: 14px; }
  .ab-values ul { grid-template-columns: minmax(0, 1fr); }
}

/* Contact us page */
.cu-hero {
  /* The studio photo keeps its full width on wide screens and narrows (cropping its plain left wall) on laptops. */
  --cu-photo: clamp(260px, calc(100vw - 926px), 429px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 476px var(--cu-photo);
  grid-template-rows: minmax(480px, auto);
  grid-template-areas: "intro form photo";
  padding-left: max(32px, calc((100% - 1440px) / 2 + 32px));
  overflow: hidden;
  background: linear-gradient(90deg, #fef6f7 45%, #fdeff1);
}
.cu-hero-branch { position: absolute; left: -14px; top: 110px; width: 86px; height: 250px; fill: none; stroke: #f4bcc8; stroke-width: 1.1; }
.cu-intro { grid-area: intro; position: relative; max-width: 420px; margin-left: clamp(0px, calc(100vw - 1348px), 77px); padding: 70px 24px 0 0; }
.cu-eyebrow { display: flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 500; letter-spacing: 3.6px; text-transform: uppercase; color: #c65a66; }
.cu-eyebrow::after { content: ''; width: 48px; height: 1px; background: #f2c4cb; }
.cu-intro h1 { margin-top: 20px; font-size: 56px; font-weight: 700; line-height: 1.05; color: #3b030a; }
.cu-intro h1 span { display: block; color: #530810; }
.cu-intro h1 em { font-style: normal; color: #f02159; }
.cu-lead { max-width: 378px; margin-top: 22px; font-size: 17px; line-height: 1.62; color: #56606e; }

.cu-form { grid-area: form; position: relative; z-index: 1; align-self: start; margin: 33px 0 23px; padding: 20px 24px 22px; border: 1px solid #f6e4e8; border-radius: 12px; background: var(--white); box-shadow: 0 10px 30px rgba(103, 2, 13, 0.05); }
.cu-form h2 { font-size: 24px; font-weight: 700; color: #67020d; }
.cu-form .co-field { margin-top: 12px; }
.cu-form .co-field label { margin-bottom: 6px; font-size: 14px; color: #5a616b; }
.cu-form .co-req { color: #f0164e; }
.cu-form .co-field input { height: 41px; border-color: #f0e6e8; font-size: 13.5px; }
.cu-form .co-field textarea { height: 89px; border-color: #f0e6e8; font-size: 13.5px; }
.cu-send { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 43px; margin-top: 16px; border-radius: 6px; background: #f2154d; font-size: 15.5px; font-weight: 500; color: var(--white); }
.cu-send:hover { background: #cf0f42; }
.cu-send .icon { font-size: 19px; }

/* The box takes its size from the layout (the form sets the height); the photo just fills it,
   trimming its plain left wall first so the logo sign stays whole. */
.cu-photo { grid-area: photo; position: relative; margin-left: -12px; }
.cu-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 96% center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }

.cu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; max-width: 1298px; margin: 15px auto 44px; }
.cu-cards li { display: flex; align-items: center; gap: 30px; min-height: 120px; padding: 12px 20px 12px 30px; border-radius: 10px; background: #fdf5f6; }
.cu-cards li > span { display: grid; place-items: center; flex-shrink: 0; width: 57px; height: 57px; border-radius: 50%; background: #fee5e9; font-size: 26px; color: #bc1124; }
.cu-cards div { min-width: 0; }
.cu-cards h2 { margin-bottom: 3px; font: 600 16.5px 'Rupee Sign', 'Poppins', sans-serif; color: #850f12; }
.cu-cards a, .cu-cards address { display: block; font-size: 15.5px; font-style: normal; line-height: 1.3; overflow-wrap: anywhere; color: #5e6775; }
.cu-cards a:hover { color: var(--ct-rose); }
.cu-cards small { display: block; margin-top: 4px; font-size: 13.5px; color: #636c7b; }

@media (max-width: 1340px) {
  .cu-cards li { gap: 20px; padding-left: 22px; }
}

@media (max-width: 1180px) {
  /* Too narrow for three columns: the photo moves under the words, beside the form. */
  .cu-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "photo form"; column-gap: 32px; padding: 0 32px 32px; }
  .cu-intro { max-width: none; margin-left: 0; padding: 40px 0 24px; }
  .cu-form { margin: 32px 0 0; }
  .cu-photo { min-height: 220px; margin: 0; overflow: hidden; border-radius: 12px; }
  .cu-hero-branch { display: none; }
  .cu-photo img { object-position: 50% 30%; -webkit-mask-image: none; mask-image: none; }
  .cu-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 768px) {
  .cu-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "photo"; row-gap: 20px; padding: 0 16px 24px; }
  .cu-intro { padding: 28px 0 0; }
  .cu-intro h1 { font-size: 42px; }
  .cu-lead { max-width: none; font-size: 15.5px; }
  .cu-form { margin: 0; padding: 20px 18px 22px; }
  .cu-photo { height: 240px; }
  .cu-cards li { gap: 18px; padding: 16px 18px; }
}

/* My orders page */
.or-page {
  padding: 44px 0 64px;
  background: #fdeef0 url('../img/orders/orders-bg.png') center / cover no-repeat;
}
.or-head { text-align: center; }
.or-title { font: 700 clamp(34px, 4.4vw, 46px)/1.1 'Playfair Display', Georgia, serif; color: var(--maroon); }
.or-title em { font-style: normal; color: var(--rose); }
.or-sub { margin-top: 10px; font-size: 15px; color: var(--muted); }

.or-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.or-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.or-search { display: flex; align-items: center; gap: 10px; width: 340px; height: 40px; padding: 0 14px; border: 1px solid #ecd9de; border-radius: 6px; background: var(--white); color: var(--muted); }
.or-search:focus-within { border-color: var(--rose); }
.or-search > .icon { flex-shrink: 0; font-size: 18px; }
.or-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 13.5px; color: var(--ink); }
.or-search input::placeholder { color: #8a7b80; }
.or-search input:focus { outline: none; }

/* Dropdowns for the status and date filters */
.or-select { position: relative; flex-shrink: 0; }
.or-select-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 190px; height: 40px; padding: 0 12px 0 14px; border: 1px solid #ecd9de; border-radius: 6px; background: var(--white); font-size: 13.5px; color: var(--ink); cursor: pointer; }
.or-select-btn:hover, .or-select.is-open .or-select-btn { border-color: var(--rose); }
.or-select-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.or-select-btn > .icon { flex-shrink: 0; font-size: 18px; color: var(--muted); }
.or-select-btn > .icon:last-child { margin-left: auto; font-size: 14px; transition: transform 0.2s; }
.or-select.is-open .or-select-btn > .icon:last-child { transform: rotate(180deg); }
.or-select-label { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.or-select-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 100%; padding: 6px; border: 1px solid #f3e4e8; border-radius: 8px; background: var(--white); box-shadow: 0 12px 30px rgba(74, 22, 38, 0.15); }
.or-select-menu[hidden] { display: none; }
.or-select-menu li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px; border-radius: 5px; font-size: 14px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.or-select-menu li.is-focus { background: #fdeef3; }
.or-select-menu li[aria-selected="true"] { font-weight: 500; color: var(--rose); }
.or-select-menu li[aria-selected="true"]::after { content: ''; flex-shrink: 0; width: 5px; height: 9px; margin-right: 3px; border: solid var(--rose); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.or-list { display: grid; gap: 14px; margin-top: 20px; }
.or-card { display: grid; grid-template-columns: 110px minmax(200px, 1fr) minmax(0, 1.2fr) 150px 150px; align-items: center; padding: 14px 16px; border: 1px solid #f3e4e8; border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(74, 22, 38, 0.04); }
.or-card[hidden] { display: none; }
.or-thumb { width: 110px; height: 122px; border-radius: 6px; object-fit: cover; background: #f6ece9; }
.or-info { min-width: 0; padding: 0 22px 0 20px; border-right: 1px solid #efe2e6; }
.or-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.or-id { padding: 3px 10px; border-radius: 4px; background: #fbe4eb; font-size: 13px; color: var(--rose); }
.or-name { margin-top: 10px; font: 600 20px/1.2 'Playfair Display', Georgia, serif; color: var(--ink); }
.or-details { margin-top: 6px; font-size: 13px; color: var(--muted); }
.or-details span + span::before { content: '|'; margin: 0 8px; color: #c9b3b9; }
.or-price { margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--ink); }

.or-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 24px; }
.or-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; font-size: 13px; color: var(--ink); }
.or-step strong { font-weight: 500; }
.or-step small { font-size: 12.5px; color: var(--muted); }
.or-step::before { content: ''; position: absolute; top: 10px; left: -50%; right: 50%; height: 2px; background: #e9dde0; }
.or-step:first-child::before { display: none; }
.or-step.is-done::before, .or-step.is-cancelled::before { background: var(--rose); }
.or-dot { position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 4px; border-radius: 50%; background: #e7e0e2; color: var(--white); }
.or-dot .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.or-tick { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.or-step.is-done .or-dot { background: var(--rose); }
.or-step.is-cancelled .or-dot { background: #c4112f; }

.or-side { display: flex; justify-content: center; padding: 0 18px; border-right: 1px solid #efe2e6; }
.or-status { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.or-status .icon { width: 17px; height: 17px; }
.or-status.is-delivered { background: #e7f6ec; color: #1f8a43; }
.or-status.is-shipped { background: #e8f1fd; color: #2057c4; }
.or-status.is-processing { background: #fdf1e4; color: #d9731a; }
.or-status.is-cancelled { background: #fde9ec; color: #c4112f; }
.or-status.is-returned { background: #f1ecf8; color: #6d3fa8; }

.or-actions { display: grid; gap: 10px; padding-left: 18px; }
.or-btn { height: 38px; padding: 0 14px; border: 1px solid var(--rose); border-radius: 6px; background: var(--white); font-size: 14px; white-space: nowrap; color: var(--rose); }
.or-btn:hover { background: #fdeef3; }
.or-btn.is-solid { background: var(--rose); color: var(--white); }
.or-btn.is-solid:hover { background: var(--rose-dark); }
.or-btn.is-cancel { border-color: #d6a3b2; color: var(--maroon); }
.or-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.or-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.or-empty { margin-top: 24px; text-align: center; font-size: 15px; color: var(--muted); }
.or-empty[hidden] { display: none; }

@media (max-width: 1100px) {
  .or-card { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "thumb info side" "steps steps steps" "actions actions actions"; row-gap: 14px; }
  .or-thumb { grid-area: thumb; width: 96px; height: 106px; }
  .or-info { grid-area: info; padding: 0 0 0 16px; border-right: 0; }
  .or-steps { grid-area: steps; padding: 0; }
  .or-side { grid-area: side; padding: 0; border-right: 0; }
  .or-actions { grid-area: actions; grid-auto-flow: column; justify-content: start; padding-left: 0; }
}

@media (max-width: 768px) {
  .or-toolbar { flex-direction: column; align-items: stretch; }
  .or-select { width: 100%; }
  .or-select-btn { min-width: 0; }
  .or-tools { flex-direction: column; align-items: stretch; }
  .or-search { width: auto; }
}

@media (max-width: 640px) {
  .or-page { padding: 32px 0 48px; }
  .or-sub { font-size: 13px; }
  .or-card { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumb info" "steps steps" "side side" "actions actions"; padding: 14px; }
  .or-thumb { width: 84px; height: 94px; }
  .or-info { padding-left: 14px; }
  .or-name { font-size: 18px; }
  .or-steps { padding: 0 4px; }
  .or-step { font-size: 12px; }
  .or-step small { font-size: 11.5px; }
  .or-side { justify-content: flex-start; }
  .or-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .or-btn { width: 100%; }
}

/* Order details page */
.od-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.od-crumbs a:hover { color: var(--rose); }
.od-crumbs [aria-current] { color: var(--rose); }
.od-crumbs .icon { width: 12px; height: 12px; }
.od-crumbs > a:first-child .icon { width: 15px; height: 15px; }
.od-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.od-title { font: 700 clamp(32px, 3.6vw, 40px)/1.1 'Playfair Display', Georgia, serif; color: var(--maroon); }
.od-id { margin-top: 6px; font: 500 19px/1.3 'Playfair Display', Georgia, serif; color: var(--muted); }
.od-placed { font-size: 15px; color: var(--muted); }

.od-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; margin-top: 22px; }
.od-main, .od-side { display: grid; gap: 16px; }
.od-card { padding: 20px; border: 1px solid #f3e4e8; border-radius: 10px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(74, 22, 38, 0.04); }
.od-card h2 { font: 600 18px/1.2 'Playfair Display', Georgia, serif; color: var(--ink); }
.od-card-title { margin-bottom: 14px; }
.od-meta { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.od-meta span + span::before { content: '|'; margin: 0 8px; color: #c9b3b9; }
.od-price { margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--ink); }
/* Every amount on the order pages uses the body font with even, aligned digits. */
.or-price, .od-price, .od-amount, .od-pmeta dd, .od-total strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-amount { font-size: 14px; font-weight: 500; }

.od-product { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.od-product-img { width: 170px; height: 150px; border-radius: 8px; object-fit: cover; background: #f6ece9; }
.od-product .or-status { margin-bottom: 12px; }
.od-name { font: 600 22px/1.2 'Playfair Display', Georgia, serif; color: var(--ink); }
.od-product-actions { display: grid; gap: 10px; width: 200px; }

.od-track { margin-top: 18px; padding: 18px 22px 22px; border-radius: 8px; background: #fdeef0; }
.od-track h3 { font: 600 18px/1.2 'Playfair Display', Georgia, serif; color: var(--maroon); }
.od-track > p { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.od-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.od-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; font-size: 13.5px; color: var(--ink); }
.od-step strong { margin-top: 4px; font-weight: 500; }
.od-step small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.od-step::before { content: ''; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; background: #e4d6da; }
.od-step:first-child::before { display: none; }
.od-step.is-done::before { background: #1f8a43; }
.od-node { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e4d6da; color: var(--white); }
.od-step.is-done .od-node { background: #1f8a43; }
.od-node .icon { width: 17px; height: 17px; }

.od-pinfo { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 16px; border: 1px solid #f3e4e8; border-radius: 8px; }
.od-pthumb { width: 110px; height: 92px; border-radius: 6px; object-fit: cover; background: #f6ece9; }
.od-pname { font: 600 17px/1.3 'Playfair Display', Georgia, serif; color: var(--ink); }
.od-pmeta { display: flex; margin: 0; }
.od-pmeta div { min-width: 96px; padding: 0 22px; border-left: 1px solid #efe2e6; text-align: center; }
.od-pmeta dt { font-size: 12.5px; color: var(--muted); }
.od-pmeta dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }

.od-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.od-help-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #f3e4e8; border-radius: 8px; background: var(--white); text-align: left; }
.od-help-tile:hover { border-color: var(--rose-light); }
.od-help-tile > .icon { width: 26px; height: 26px; color: var(--rose); }
.od-help-tile > .icon:last-child { width: 14px; height: 14px; color: var(--muted); }
.od-help-tile strong { display: block; font-size: 14px; font-weight: 600; color: var(--rose); }
.od-help-tile small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

.od-side-head { display: flex; align-items: center; gap: 10px; }
.od-side-head h2 { flex: 1; }
.od-side-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fde4ea; color: var(--rose); }
.od-side-icon .icon { width: 17px; height: 17px; }
.od-edit { height: 28px; padding: 0 12px; border: 1px solid #f3c7d3; border-radius: 5px; background: #fdecf0; font-size: 12.5px; color: var(--rose); }
.od-edit:hover { background: #fbdde5; }
.od-address { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.od-address strong { display: block; font-weight: 600; color: var(--ink); }
.od-address p + p { margin-top: 6px; }
.od-rows { display: grid; gap: 12px; margin: 14px 0 0; font-size: 14px; }
.od-rows div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.od-rows dt { color: var(--muted); }
.od-rows dd { margin: 0; text-align: right; color: var(--ink); }
.od-rows .od-discount { color: #1f8a43; }
.od-pay { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12.5px; font-weight: 500; }
.od-pay.is-paid { background: #e7f6ec; color: #1f8a43; }
.od-pay.is-pending { background: #fdf1e4; color: #d9731a; }
.od-pay.is-refunded { background: #e8f1fd; color: #2057c4; }
.od-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: #fdeef0; }
.od-total span { font-size: 15px; color: var(--maroon); }
.od-total strong { font-size: 18px; font-weight: 600; color: var(--rose); }

@media (max-width: 1100px) {
  .od-layout { grid-template-columns: minmax(0, 1fr); }
  .od-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .od-side { grid-template-columns: minmax(0, 1fr); }
  .od-help { grid-template-columns: minmax(0, 1fr); }
  .od-product { grid-template-columns: 130px minmax(0, 1fr); }
  .od-product-img { width: 130px; height: 120px; }
  .od-product-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
}

@media (max-width: 640px) {
  .od-card { padding: 16px; }
  .od-product { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .od-product-img { width: 96px; height: 96px; }
  .od-product-actions { grid-template-columns: minmax(0, 1fr); }
  .od-step { font-size: 11.5px; }
  .od-step small { font-size: 11px; }
  .od-step::before { top: 14px; }
  .od-node { width: 30px; height: 30px; }
  .od-node .icon { width: 14px; height: 14px; }
  .od-pinfo { grid-template-columns: 84px minmax(0, 1fr); }
  .od-pthumb { width: 84px; height: 80px; }
  .od-pmeta { grid-column: 1 / -1; }
  .od-pmeta div { flex: 1; min-width: 0; padding: 0 12px; }
}

.od-invoice { width: 100%; margin-top: 14px; }

/* Invoice page: shown on screen, and printed or saved as a PDF */
.inv-body { margin: 0; background: #f6eef0; }
.inv { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.inv-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rose); }
.inv-back .icon { width: 16px; height: 16px; }
.inv-sheet { padding: 36px 40px 32px; border-radius: 12px; background: var(--white); box-shadow: 0 10px 30px rgba(74, 22, 38, 0.1); }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 22px; border-bottom: 2px solid #f6d3dc; }
.inv-logo { font: 700 46px/1 'Playfair Display', Georgia, serif; color: #4a0d22; }
.inv-logo span { color: var(--rose); }
.inv-tag { margin-top: 8px; font-size: 12px; letter-spacing: 2px; white-space: nowrap; color: #5f6b7a; }
.inv-contact { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--ink); }
.inv-contact li { display: flex; align-items: center; gap: 10px; }
.inv-contact .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--rose); }
.inv-meta { min-width: 340px; padding: 18px 22px; border-radius: 10px; background: #fdeef0; }
.inv-meta h1 { font: 700 40px/1 'Playfair Display', Georgia, serif; color: var(--rose); }
.inv-meta dl { display: grid; gap: 8px; margin: 14px 0 0; font-size: 14px; }
.inv-meta dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.inv-meta dd { white-space: nowrap; }
.inv-meta dt { display: flex; justify-content: space-between; padding-right: 10px; color: var(--ink); }
.inv-meta dt::after { content: ':'; }
.inv-meta dd { margin: 0; color: var(--ink); }

.inv-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.inv-box { border: 1px solid #f3e4e8; border-radius: 10px; overflow: hidden; }
.inv-box h2 { padding: 12px 18px; background: #fde4ea; font: 600 18px/1.2 'Playfair Display', Georgia, serif; color: var(--rose); }
.inv-addr { padding: 14px 18px 18px; }
.inv-addr strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.inv-addr p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.inv-table-wrap { margin-top: 22px; overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inv-table th { padding: 12px 10px; background: #fde4ea; font-weight: 600; text-align: center; color: #7a0e2c; }
.inv-table td { padding: 16px 10px; border-top: 1px solid #f6e4e9; text-align: center; color: var(--ink); vertical-align: middle; }
.inv-table th:nth-child(2), .inv-table td:nth-child(2) { text-align: left; }
.inv-table .inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-table td strong { display: block; font: 600 16px/1.3 'Playfair Display', Georgia, serif; color: var(--ink); }
.inv-table td small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

.inv-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.inv-foot > .inv-box > dl { display: grid; gap: 12px; margin: 0; padding: 14px 18px 16px; font-size: 14px; }
.inv-foot dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inv-foot dt { color: var(--muted); }
.inv-foot dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-foot .inv-discount { color: #1f8a43; }
.inv-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fde4ea; }
.inv-total span { font: 600 18px/1.2 'Playfair Display', Georgia, serif; color: var(--rose); }
.inv-total strong { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.inv-thanks { margin-top: 22px; padding: 22px 26px; border-left: 4px solid var(--rose); border-radius: 8px; background: #fdeef0; }
.inv-thanks h2 { font: 600 24px/1.2 'Playfair Display', Georgia, serif; color: var(--rose); }
.inv-thanks p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }

@media (max-width: 720px) {
  .inv-sheet { padding: 22px 18px; }
  .inv-top { flex-direction: column; }
  .inv-meta { min-width: 0; width: 100%; box-sizing: border-box; }
  .inv-logo { font-size: 38px; }
  .inv-addresses, .inv-foot { grid-template-columns: minmax(0, 1fr); }
  .inv-table { min-width: 560px; }
}

@page { size: A4; margin: 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-body { background: #fff; }
  .inv { max-width: none; padding: 0; }
  .inv-actions { display: none; }
  .inv-sheet { padding: 0; border-radius: 0; box-shadow: none; }
  .inv-box, .inv-thanks, .inv-meta, .inv-table tr { break-inside: avoid; }
  .inv-logo { font-size: 36px; }
  .inv-top { padding-bottom: 14px; }
  .inv-addresses, .inv-table-wrap, .inv-foot, .inv-thanks { margin-top: 14px; }
  .inv-box h2 { padding: 9px 14px; }
  .inv-addr { padding: 10px 14px 12px; }
  .inv-table td { padding: 10px; }
  .inv-foot > .inv-box > dl { gap: 9px; padding: 10px 14px 12px; }
  .inv-total { padding: 10px 14px; }
  .inv-thanks { padding: 14px 18px; }
}

/* Maintenance page, shown to customers while the store is in maintenance mode */
.mt-body { display: grid; place-items: center; min-height: 100vh; margin: 0; background: var(--tint); }
.mt-page { max-width: 540px; padding: 40px 24px; text-align: center; }
.mt-page .logo { justify-content: center; }
.mt-page h1 { margin-top: 28px; font-size: clamp(30px, 5vw, 42px); color: var(--maroon); }
.mt-page p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.mt-page .mt-contact { font-size: 14px; }
.mt-page a { color: var(--rose); }