/* MISHeMALL v2 — generated CSS (uploaded to site_settings.sx_css_location).
   Authored per-segment, concatenated into one file. Do NOT @import or minify
   (the BEGIN/END markers are comments and must survive). Every selector is
   namespaced under .sx so nothing leaks into the theme header/footer/cards.
   Brand color comes from the theme var --secondary-main (MISHeMALL royal blue);
   the gold / cream accents are namespaced --sx-* tokens. */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-royal: var(--secondary-main, #1e3a8a);
  --sx-navy: #101d44;
  --sx-gold: #c39633;
  --sx-gold-ink: #8a6a1e;
  --sx-gold-soft: #e8c976;
  --sx-cream: #faf6ee;
  --sx-cream-2: #f4ead7;
  --sx-ink: #18213b;
  --sx-muted: #6b7286;
  --sx-line: #ece2d0;
  --sx-radius: 20px;
  --sx-shadow: 0 18px 44px rgba(16, 29, 68, 0.1);
  --sx-max: 1200px;
  font-family: inherit;
  color: var(--sx-ink);
}
.sx,
.sx * {
  box-sizing: border-box;
}
.sx-wrap {
  max-width: var(--sx-max);
  margin: 0 auto;
  padding: 0 18px;
  width: 100%;
}
.sx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sx-gold-ink);
  margin: 0 0 12px;
}
.sx-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.sx a:focus-visible,
.sx button:focus-visible,
.sx input:focus-visible {
  outline: 3px solid var(--sx-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .sx,
  .sx * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
.sx-h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.12;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--sx-royal);
  letter-spacing: -0.015em;
}
.sx-h2 em {
  color: var(--sx-gold);
  font-style: italic;
}
.sx-sub {
  color: var(--sx-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 640px;
}
.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--sx-royal);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}
.sx-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(16, 29, 68, 0.22);
}
.sx-btn--gold {
  background: linear-gradient(135deg, #e0b64e, #c39633);
  color: #2a1e05;
}
.sx-btn--ghost {
  background: transparent;
  color: var(--sx-royal);
  border: 1.5px solid var(--sx-line);
}
.sx-btn svg {
  width: 18px;
  height: 18px;
}
.sx-section {
  padding: clamp(32px, 3.8vw, 52px) 0;
}
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp.sx-section {
  padding: 0;
}
.sx-usp__band {
  background: linear-gradient(
    100deg,
    #16275c 0%,
    var(--sx-royal) 55%,
    #1b3f9c 100%
  );
  border-top: 2px solid rgba(232, 201, 118, 0.45);
  border-bottom: 2px solid rgba(232, 201, 118, 0.45);
}
.sx-usp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sx-usp__cell {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 16px;
  justify-content: center;
}
.sx-usp__cell + .sx-usp__cell {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
}
.sx-usp__ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(232, 201, 118, 0.14);
  color: var(--sx-gold-soft);
}
.sx-usp__ic svg {
  width: 22px;
  height: 22px;
}
.sx-usp__t {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.sx-usp__d {
  display: block;
  font-size: 12px;
  color: #b9c6e8;
  margin-top: 2px;
}
@media (min-width: 760px) {
  .sx-usp__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sx-usp__cell {
    justify-content: flex-start;
    padding: 22px 20px;
  }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:promo-1 */
.sx-promo__card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  box-shadow: var(--sx-shadow);
}
.sx-promo__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(232, 201, 118, 0.45);
}
.sx-promo__media {
  grid-area: 1 / 1;
}
.sx-promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 420px;
}
.sx-promo__veil {
  grid-area: 1 / 1;
  background: linear-gradient(
    95deg,
    rgba(13, 23, 56, 0.94) 0%,
    rgba(13, 23, 56, 0.78) 40%,
    rgba(13, 23, 56, 0.12) 100%
  );
}
.sx-promo__body {
  grid-area: 1 / 1;
  position: relative;
  padding: clamp(30px, 5vw, 66px);
  max-width: 560px;
  align-self: center;
  color: #fff;
}
.sx-promo__body .sx-eyebrow {
  color: var(--sx-gold-soft);
}
.sx-promo__body h2 {
  font-family: Georgia, serif;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.015em;
}
.sx-promo__body h2 em {
  color: var(--sx-gold-soft);
  font-style: italic;
}
.sx-promo__body p {
  font-size: 15px;
  line-height: 1.7;
  color: #d8def0;
  margin: 0 0 26px;
  max-width: 430px;
}
.sx-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* END shoopy-gen:promo-1 */

/* BEGIN shoopy-gen:reviews-1 */
.sx-reviews {
  background: radial-gradient(
    120% 90% at 50% -10%,
    #ffffff 0%,
    var(--sx-cream) 60%
  );
}
.sx-reviews__head {
  text-align: center;
  margin-bottom: 34px;
}
.sx-reviews__head .sx-eyebrow {
  justify-content: center;
}
.sx-reviews__head .sx-sub {
  margin: 0 auto;
}
.sx-reviews__grid {
  display: grid;
  gap: 18px;
}
.sx-review {
  position: relative;
  background: #fff;
  border: 1px solid var(--sx-line);
  border-radius: 18px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px rgba(16, 29, 68, 0.06);
}
.sx-review__q {
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--sx-cream-2);
}
.sx-review__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--sx-gold);
  margin-bottom: 12px;
}
.sx-review__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.sx-review__text {
  font-size: 14px;
  line-height: 1.7;
  color: #3b4257;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.sx-review__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.sx-review__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sx-royal), #16275c);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 auto;
}
.sx-review__who b {
  display: block;
  font-size: 14px;
  color: var(--sx-royal);
}
.sx-review__who small {
  color: var(--sx-muted);
  font-size: 12px;
}
@media (min-width: 820px) {
  .sx-reviews__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* END shoopy-gen:reviews-1 */

/* Extracted from index.html */

:root {
  --secondary-main: #1e3a8a;
  --royal: #1e3a8a;
  --royal-d: #16275c;
  --navy: #101d44;
  --gold: #c39633;
  --gold-ink: #8a6a1e;
  --gold-soft: #e8c976;
  --cream: #faf6ee;
  --cream2: #f4ead7;
  --ink: #18213b;
  --muted: #6b7286;
  --line: #ece2d0;
  --green: #1f9d55;
  --save: #137a43;
}
* {
  box-sizing: border-box;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.m-cat:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .m-cat__img img,
  .m-pcard__img img {
    transform: none !important;
  }
}
body {
  margin: 0;
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    Roboto,
    sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  width: 100%;
}
.ic {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--f {
  fill: currentColor;
  stroke: none;
}
/* announcement */
.m-notice {
  background: var(--navy);
  color: var(--gold-soft);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 16px;
}
/* header */
.m-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.m-header__in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.m-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.m-logo img {
  height: 42px;
  width: auto;
  display: block;
}
.m-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--muted);
  font-size: 14px;
  max-width: 440px;
}
.m-search .ic {
  width: 18px;
  height: 18px;
  color: var(--royal);
  flex: 0 0 auto;
}
.m-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  min-width: 0;
}
.m-search input::placeholder {
  color: var(--muted);
}
.m-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.m-nav {
  display: none;
  gap: 22px;
  margin-left: auto;
}
.m-nav a {
  text-decoration: none;
  color: #34405c;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
}
.m-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  transition: right 0.25s ease;
  border-radius: 2px;
}
.m-nav a:hover {
  color: var(--royal);
}
.m-nav a:hover::after {
  right: 0;
}
.m-ico {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.m-ico__btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--royal);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.m-ico__btn:hover {
  background: var(--cream);
  border-color: var(--line);
}
.m-ico__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1e05;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
/* hero */
.m-hero {
  position: relative;
  background: var(--navy);
}
.m-hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m-hero__track::-webkit-scrollbar {
  display: none;
}
.m-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
}
.m-hero__slide img {
  width: 100%;
  height: clamp(490px, 82vh, 600px);
  object-fit: cover;
  display: block;
}
.m-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 29, 68, 0.34) 0%,
    rgba(16, 29, 68, 0.06) 36%,
    rgba(16, 29, 68, 0.8) 100%
  );
}
@media (min-width: 761px) {
  .m-hero__scrim {
    background: linear-gradient(
      96deg,
      rgba(16, 29, 68, 0.86) 0%,
      rgba(16, 29, 68, 0.5) 40%,
      rgba(16, 29, 68, 0) 66%
    );
  }
}
.m-hero__in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 761px) {
  .m-hero__in {
    align-items: center;
  }
}
.m-hero__c {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px 52px;
  color: #fff;
  width: 100%;
}
@media (min-width: 761px) {
  .m-hero__c {
    padding: 0 22px;
  }
}
.m-hero__box {
  max-width: 540px;
  width: 100%;
}
.m-hero__eye {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.m-hero__eye::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.m-hero h1 {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.06;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.3);
  overflow-wrap: break-word;
}
.m-hero h1 em {
  color: var(--gold-soft);
  font-style: italic;
}
.m-hero p {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.65;
  color: #e6ebf7;
  margin: 0 0 22px;
  max-width: 440px;
}
.m-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.m-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.m-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #e6ebf7;
}
.m-hero__chip .ic {
  width: 16px;
  height: 16px;
  color: var(--gold-soft);
}
.m-hero__chip b {
  color: #fff;
}
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    filter 0.16s;
}
.m-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.m-btn .ic {
  width: 18px;
  height: 18px;
}
.m-btn--gold {
  background: linear-gradient(135deg, #e0b64e, #c39633);
  color: #2a1e05;
}
.m-btn--glass {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
}
.m-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  gap: 7px;
  justify-content: center;
  z-index: 3;
}
.m-hero__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.m-hero__dots span.is-on {
  background: var(--gold-soft);
  width: 26px;
  border-radius: 999px;
}
/* section shells */
.m-sec {
  padding: clamp(32px, 3.8vw, 52px) 0;
}
.m-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.m-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 10px;
}
.m-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.m-h2 {
  font-family: Georgia, serif;
  font-size: clamp(25px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--royal);
  margin: 0;
  letter-spacing: -0.015em;
}
.m-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--royal);
  text-decoration: none;
  border: 1.5px solid var(--line);
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.m-link:hover {
  border-color: var(--gold-soft);
  background: var(--cream);
}
.m-link .ic {
  width: 16px;
  height: 16px;
}
/* category tiles */
.m-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.m-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
}
.m-cat__img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 12px 26px rgba(16, 29, 68, 0.07);
  margin-bottom: 8px;
}
.m-cat__img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(16, 29, 68, 0.06);
  transition: box-shadow 0.2s;
}
.m-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.m-cat:hover .m-cat__img img {
  transform: scale(1.07);
}
.m-cat:hover .m-cat__img::after {
  box-shadow: inset 0 0 0 2px var(--gold-soft);
}
.m-cat__n {
  font-weight: 700;
  font-size: 14px;
  color: var(--royal);
  line-height: 1.2;
}
.m-cat__c {
  font-size: 11.5px;
  color: var(--muted);
}
/* product rails */
.m-rail {
  position: relative;
}
.m-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m-row::-webkit-scrollbar {
  display: none;
}
.m-pcard {
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
}
.m-pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(16, 29, 68, 0.13);
  border-color: #e3d6bd;
}
.m-pcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #e0b64e, #c39633);
  color: #2a1e05;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(195, 150, 51, 0.35);
}
.m-pcard__fav {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--royal);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.15s;
}
.m-pcard__fav .ic {
  width: 17px;
  height: 17px;
}
.m-pcard__fav:hover {
  background: var(--royal);
  color: #fff;
  transform: scale(1.06);
}
.m-pcard__img {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  background: var(--cream);
  overflow: hidden;
  display: block;
}
.m-pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.m-pcard:hover .m-pcard__img img {
  transform: scale(1.06);
}
.m-pcard__b {
  padding: 15px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.m-pcard__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.m-pcard__b h4 {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.34;
  font-weight: 600;
}
.m-pcard__rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}
.m-pcard__rate svg {
  width: 14px;
  height: 14px;
  fill: var(--gold);
  stroke: none;
}
.m-pcard__rate small {
  color: var(--muted);
  font-weight: 500;
}
.m-pcard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.m-pcard__price b {
  font-size: 18px;
  color: var(--royal);
}
.m-pcard__mrp {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}
.m-pcard__save {
  font-size: 11px;
  font-weight: 800;
  color: var(--save);
  background: #e7f6ee;
  padding: 2px 7px;
  border-radius: 6px;
}
.m-pcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--royal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 11px;
  margin-top: auto;
  text-decoration: none;
  transition:
    filter 0.15s,
    transform 0.15s;
}
.m-pcard__cta .ic {
  width: 17px;
  height: 17px;
}
.m-pcard__cta:hover {
  filter: brightness(1.08);
}
/* footer */
.m-foot {
  background: var(--navy);
  color: #aeb6c9;
}
.m-news {
  background: linear-gradient(100deg, #16275c, #0c1738);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.m-news__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.m-news__t {
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  margin: 0 0 4px;
}
.m-news__t em {
  color: var(--gold-soft);
  font-style: italic;
}
.m-news__p {
  margin: 0;
  color: #9aa6c4;
  font-size: 13px;
}
.m-news__form {
  display: flex;
  gap: 10px;
  flex: 1 1 320px;
  max-width: 440px;
}
.m-news__form input {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 13px 18px;
  color: #fff;
  font-size: 14px;
}
.m-news__form input::placeholder {
  color: #9aa6c4;
}
.m-foot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 18px;
}
.m-foot__cols h4 {
  color: #fff;
  font-size: 14px;
  margin: 0 0 14px;
}
.m-foot__cols a,
.m-foot__cols p {
  display: block;
  color: #9aa3b8;
  text-decoration: none;
  font-size: 13px;
  line-height: 2;
  margin: 0;
}
.m-foot__cols a:hover {
  color: var(--gold-soft);
}
.m-foot__brand {
  grid-column: 1 / -1;
}
.m-foot__wm {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.m-foot__wm img {
  height: 38px;
  width: auto;
  display: block;
}
.m-foot__brand p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 330px;
  margin-bottom: 16px;
}
.m-soc {
  display: flex;
  gap: 10px;
}
.m-soc a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd5e3;
}
.m-soc a:hover {
  background: var(--gold);
  color: #2a1e05;
  border-color: var(--gold);
}
.m-soc .ic {
  width: 18px;
  height: 18px;
}
.m-foot__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.m-foot__bottom p {
  margin: 0;
  font-size: 12px;
  color: #6f7891;
}
.m-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.m-pay span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #cfd5e3;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 9px;
}
.m-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(31, 157, 85, 0.5);
  transition: transform 0.15s;
}
.m-wa:hover {
  transform: scale(1.07);
}
.m-wa .ic {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: none;
}
@media (min-width: 520px) {
  .m-cats {
    grid-template-columns: repeat(3, 1fr);
  }
  .m-row {
    grid-auto-columns: 300px;
  }
}
@media (min-width: 600px) {
  .m-foot__cols {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .m-foot__brand {
    grid-column: auto;
  }
}
@media (min-width: 960px) {
  .m-cats {
    grid-template-columns: repeat(5, 1fr);
  }
  .m-row {
    grid-auto-columns: 1fr;
    overflow: visible;
  }
}
@media (min-width: 980px) {
  .m-nav {
    display: flex;
  }
}

/* BEGIN shoopy-gen:store-overrides
   Live-store integration. The classic theme renders each custom HTML section
   inside a .page-container wrapper that adds 40px side padding (16px < 768px)
   and a 32px top margin the standalone index.html preview does not have.
   These rules let the full-bleed sections reach the wrapper edges so the live
   store matches the preview. Everything stays namespaced under .sx / .m. */
/* Cap every section's content — and the header row — to a consistent 1200px on
   large screens (the theme's own page-container maxes out at 1600, which left
   the category grid, product rails and header ~1520-1600 wide while the custom
   sections were already 1200). Full-bleed bands/backgrounds still reach the
   viewport edges via the calc() breakouts below. */
.page-container {
  max-width: 1400px !important;
}
/* Warm cream background — applied to the home page's section blocks only (not
   the <body>), so it never leaks onto product / listing / cart / account pages,
   which keep the theme's own background. The section-wrapper blocks are
   contiguous, so the cream reads as one continuous background on the home page. */
main [class*="section-wrapper"] {
  background: var(--cream, #faf6ee);
  /* flow-root contains the inner page-container's top margin so it doesn't
     collapse out and leave a white gap between sections — the cream stays
     continuous down the page. */
  display: flow-root;
}
/* The theme paints a white background on the native section grids (category +
   product collections). Clear it so every collection shows the cream backdrop
   consistently and the white product cards stand out against it. */
main [class*="section-wrapper"] .grid.section {
  background: transparent !important;
}
/* Reviews → horizontal swipe carousel on mobile/tablet (they stack as 3 tall
   cards otherwise). One card + peek, snap-scroll; the 3-up grid returns at
   820px. Plain HTML (no swiper) so native scroll just works. */
@media (max-width: 819px) {
  .sx-reviews__grid {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  .sx-reviews__grid::-webkit-scrollbar {
    display: none;
  }
  .sx-reviews__grid .sx-review {
    scroll-snap-align: start;
  }
}
/* Equal, tidy cards: let each card fill its (already equal-height) grid cell and
   push the price/CTA block to the bottom so rows line up even when one product
   has a variant selector or an out-of-stock note. */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-slide {
  display: flex;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-slide .sh-product-card {
  width: 100%;
  height: 100%;
}
main [class*="section-wrapper"] .sh-product-card .pr-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
main [class*="section-wrapper"] .sh-product-card .pr-price {
  margin-top: auto;
}
/* Full-bleed bands/backgrounds still reach the viewport edges, with their
   inner content held to the 1200 container. calc(50% - 50vw) adapts to any
   width, so no separate mobile rule is needed. */
.sx-usp,
.sx-reviews {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Home product rails — approximate the preview .m-pcard look. Scoped to the
   home collection cards (.sh-generic-collection-card) so product-listing and
   search cards elsewhere on the site keep the stock theme styling. */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .sh-product-card {
  border: 1px solid var(--line, #ece2d0) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .sh-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(16, 29, 68, 0.13) !important;
  border-color: #e3d6bd !important;
}
/* Discount badge → gold gradient, pinned top-left like the preview */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-discount {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  background: linear-gradient(135deg, #e0b64e, #c39633) !important;
  color: #2a1e05 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(195, 150, 51, 0.35);
}
/* Wishlist heart → top-right circle */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-wishlist {
  top: 10px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line, #ece2d0);
  display: grid;
  place-items: center;
}
/* Sale price → royal, bold */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-sale-price {
  color: var(--secondary-main, #1e3a8a) !important;
  font-weight: 700 !important;
}
/* Add to cart → filled royal button like the preview CTA */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-outlined-button {
  background: var(--secondary-main, #1e3a8a) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-outlined-button .pr-outlined-button-label,
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-outlined-button svg {
  color: #fff !important;
  fill: #fff !important;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .pr-outlined-button:hover {
  filter: brightness(1.08);
}
/* Collection row layout → mirror the preview .m-row exactly. The native swiper
   is turned into a CSS scroll-grid: ~1.25 cards peeking on mobile (horizontal
   scroll), 300px cards on tablet, and the whole collection in one row (equal
   1fr columns, no scroll) on desktop. */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-wrapper {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 14px;
  width: 100% !important;
  overflow-x: auto;
  transform: none !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* Since the swiper's JS panning is disabled (transform:none), the native
   grid must handle touch scrolling. Swiper sets touch-action:pan-y on the
   container, which — intersected with the wrapper — blocks all panning and
   freezes the rail. Allow both axes so a horizontal drag scrolls the rail and
   a vertical drag scrolls the page. */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper,
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-wrapper {
  touch-action: pan-x pan-y !important;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
/* Hide the theme's native "View All" button below the rail — the styled pill in
   the section heading already covers it (was showing as a duplicate). */
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .view-all {
  display: none !important;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-slide {
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-button-next,
:is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-button-prev {
  display: none !important;
}
@media (min-width: 520px) {
  :is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-wrapper {
    grid-auto-columns: 300px;
  }
}
@media (min-width: 960px) {
  :is(.sh-prod-grid-collection-card, .sh-generic-collection-card) .swiper-wrapper {
    grid-auto-columns: 1fr;
    overflow: visible;
  }
}

/* ---------- Section headings → preview .m-head (eyebrow + title + pill) ----------
   Heading block on the left, "View all" pill on the right, with the gold
   eyebrow line + label added above each title via ::before (per section). */
.section-heading-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
  text-align: left !important;
}
/* Keep the heading block from shrinking so the "View all" pill wraps onto its
   own line on narrow screens instead of overlapping the title. */
.section-heading-container > a:first-child {
  flex: 0 0 auto;
  max-width: 100%;
}
.section-heading {
  font-size: clamp(25px, 3.4vw, 38px) !important;
  line-height: 1.12 !important;
}
.section-heading::before {
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6a1e;
  margin: 0 0 10px;
  padding-left: 36px;
  background: linear-gradient(currentColor, currentColor) left center / 26px 2px
    no-repeat;
}
.section-wrapper-1 .section-heading::before {
  content: "Browse the store";
}
.section-wrapper-3 .section-heading::before {
  content: "Most loved";
}
.section-wrapper-4 .section-heading::before {
  content: "Top rated";
}
.section-wrapper-6 .section-heading::before {
  content: "Daily needs";
}
/* "View all" link → preview .m-link pill with trailing arrow */
.section-heading-viewall {
  /* Theme positions this absolutely (top-right), which makes it overlap a long
     title on narrow screens. Static lets it flow in the flex row and wrap to
     its own line when there isn't room. */
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--line, #ece2d0) !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  background: #fff !important;
  color: var(--secondary-main, #1e3a8a) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.section-heading-viewall:hover {
  border-color: var(--gold-soft, #e8c976) !important;
  background: var(--cream, #faf6ee) !important;
}
.section-heading-viewall::after {
  content: "→";
  font-size: 15px;
  line-height: 1;
}

/* ---------- Header chrome → preview palette ----------
   The header/notice are the classic theme's own components; these rules
   recolour them toward the preview (navy + gold + royal) and turn the
   click-to-open desktop search into an always-visible pill like the preview.
   All search rules are scoped to .app-bar.mob-hide (desktop header only), so
   the mobile header's search icon is untouched. */
.sh-header-main .notice {
  background: #101d44 !important;
}
.sh-header-main .notice,
.sh-header-main .notice-message,
.sh-header-main .notice-message * {
  color: #e8c976 !important;
}
/* Desktop nav → royal ink, royal on hover (preview .m-nav) */
.desktop-nav .nav-link {
  color: #34405c !important;
  font-weight: 600 !important;
}
.desktop-nav .nav-link:hover {
  color: var(--secondary-main, #1e3a8a) !important;
}
/* Header action icons → royal blue */
.app-bar.mob-hide .header-wishlist a,
.app-bar.mob-hide .account-popup,
.app-bar.mob-hide [aria-label="view cart"] {
  color: var(--secondary-main, #1e3a8a) !important;
}
/* Desktop search → always-open cream pill (preview .m-search), pinned to the
   left just after the logo. Positioned absolutely so it sits between the logo
   and the nav; the nav is pushed right to make room. */
.app-bar.mob-hide .app-bar-main .page-container {
  position: relative;
}
/* Neutralise the search wrapper's own positioning so the pill anchors to the
   header page-container (not the right-hand cluster). */
.app-bar.mob-hide .search-container {
  position: static !important;
}
.app-bar.mob-hide .input-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 220px;
  max-width: 440px;
  margin: 0 20px !important;
  height: 38px;
  align-items: center;
  padding: 0 8px 0 14px;
  box-sizing: border-box;
  background: var(--cream, #faf6ee);
  border: 1px solid var(--line, #ece2d0);
  border-radius: 999px;
  z-index: 3;
}
/* The theme keeps the collapsed search non-interactive with pointer-events:none;
   since we force it open, re-enable pointing so it's clickable and typeable. */
.app-bar.mob-hide .input-container,
.app-bar.mob-hide .input-container * {
  pointer-events: auto !important;
}
/* Search stays as an in-flow pill in the right cluster (next to the account /
   cart icons) at every desktop width — the nav keeps its natural position and
   overflow collapse, so nothing ever overlaps. */
/* Clean royal search icon (replaces the placeholder's colour emoji). */
.app-bar.mob-hide .input-container::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-right: 8px;
  background: var(--secondary-main, #1e3a8a);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>")
    center/contain no-repeat;
}
/* Hide the emoji the theme prepends to the placeholder ("🔍 Search…"): shift
   the placeholder left so the emoji is clipped — but ONLY while the field is
   not focused, otherwise the same shift would push the text caret off-screen.
   On focus, keep the caret at the start (no indent) and fade the whole
   placeholder out so the emoji doesn't reappear. Applies to BOTH the desktop
   and the mobile header search (they share .sh-header-search-box). */
.sh-header-search-box input:placeholder-shown:not(:focus),
input[placeholder^="🔍"]:placeholder-shown:not(:focus) {
  text-indent: -1.7em;
}
.sh-header-search-box input:focus::placeholder,
input[placeholder^="🔍"]:focus::placeholder {
  opacity: 0;
  color: transparent;
}
.sh-header-search-box input:focus::-webkit-input-placeholder,
input[placeholder^="🔍"]:focus::-webkit-input-placeholder {
  opacity: 0;
  color: transparent;
}
/* The preview CSS ships a global gold :focus-visible outline (for the custom
   sections); on the theme's header search it renders as a yellow card around
   the whole bar — suppress it there. */
.sh-header-search-box input:focus,
.sh-header-search-box input:focus-visible,
input[placeholder^="🔍"]:focus,
input[placeholder^="🔍"]:focus-visible {
  outline: none !important;
}
.app-bar.mob-hide .search-shell,
.app-bar.mob-hide .search-field,
.app-bar.mob-hide .search-input,
.app-bar.mob-hide .search-box {
  visibility: visible !important;
  display: flex !important;
  width: 100% !important;
  flex: 1;
  align-items: center;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
}
.app-bar.mob-hide .search-box input {
  width: 100% !important;
  height: 36px !important;
  min-height: 0 !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink, #18213b);
  visibility: visible !important;
  opacity: 1 !important;
}
.app-bar.mob-hide .search-btn-hidden,
.app-bar.mob-hide .search-icon {
  display: none !important;
}
/* Footer logo: the custom footer HTML ships a relative src (assets/icons/
   logo.png) that 404s on the live store — repoint it to the CDN asset. */
.m-foot__wm img {
  content: url("https://shpy-wix.b-cdn.net/mishemall-v2/assets/icons/logo.png");
}

/* ---------- Shop by Category (native tiles) → preview design ----------
   Pure styling of the theme's own category cards: keeps the store's images
   and titles, adds no data. Turns the cramped scroll row into a clean grid
   and gives each tile the preview's rounded/shadowed/gold-hover look. */
.category-swiper .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px 16px !important;
  transform: none !important;
}
.category-swiper .swiper-slide {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  /* Clear the theme's white slide background so the tile + label sit on the
     cream section backdrop. */
  background: transparent !important;
}
.category-swiper .swiper-button-next,
.category-swiper .swiper-button-prev,
.category-swiper .swiper-pagination {
  display: none !important;
}
@media (max-width: 959px) {
  .category-swiper .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 519px) {
  .category-swiper .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Drop the theme's per-tile padding (6px mobile / 10px desktop) so the tiles
   fill their grid cell and line up with the other sections' content. */
.category-swiper .cat-card {
  padding: 0 !important;
  width: 100%;
}
/* Every tile fills its grid cell as a uniform square (the store's category
   images vary in aspect ratio; object-fit: cover keeps them consistent). */
.category-swiper .cat-card-img-container,
.category-swiper .cat-card-img-root {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
}
.category-swiper .cat-card-img-root img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* Tile framing — 18px radius (same on mobile and desktop) */
.category-swiper .cat-card-img-container,
.category-swiper .cat-card-img-root {
  border-radius: 18px !important;
  overflow: hidden;
}
.category-swiper .cat-card-img-root {
  position: relative;
  background: transparent !important;
  box-shadow: 0 12px 26px rgba(16, 29, 68, 0.08);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
/* Subtle inset border ring (preview .m-cat__img::after) → gold on hover */
.category-swiper .cat-card-img-root::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(16, 29, 68, 0.06);
  transition: box-shadow 0.2s;
  pointer-events: none;
}
.category-swiper .cat-card:hover .cat-card-img-root::after {
  box-shadow: inset 0 0 0 2px var(--gold-soft, #e8c976);
}
.category-swiper .cat-card-img-root img {
  transition: transform 0.45s ease;
}
.category-swiper .cat-card:hover .cat-card-img-root {
  box-shadow: 0 16px 30px rgba(16, 29, 68, 0.12);
}
.category-swiper .cat-card:hover .cat-card-img-root img {
  transform: scale(1.06);
}
/* Tile title → royal, bold like the preview */
.category-swiper .cat-card-title {
  color: var(--secondary-main, #1e3a8a) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-top: 10px !important;
}
/* Section headings → royal serif like the preview .m-h2 */
.section-heading {
  font-family: Georgia, "Times New Roman", serif !important;
  color: var(--secondary-main, #1e3a8a) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}

/* ---------- Product page CTAs → theme brand colour ----------
   The classic theme renders the product-page Buy Now / Add to Cart in black;
   recolour them to the store's royal-blue brand (--secondary-main) so they match
   the rest of the store. Scoped to the product footer so no other button on the
   product/listing/cart pages is affected. */
.product-footer-buttons .solid-button__btn {
  background: var(--secondary-main, #1e3a8a) !important;
  border-color: var(--secondary-main, #1e3a8a) !important;
  color: #fff !important;
}
.product-footer-buttons .outlined-button__btn,
.product-footer-buttons .pr-outlined-button {
  border-color: var(--secondary-main, #1e3a8a) !important;
  color: var(--secondary-main, #1e3a8a) !important;
}
.product-footer-buttons .outlined-button__btn *,
.product-footer-buttons .pr-outlined-button .pr-outlined-button-label {
  color: var(--secondary-main, #1e3a8a) !important;
}
/* END shoopy-gen:store-overrides */
.category-swiper .cat-card-img-root { position: relative; }
.category-swiper .cat-card-img-root::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(16, 29, 68, 0.06);
  transition: box-shadow 0.2s;
  pointer-events: none;
}
.category-swiper .cat-card:hover .cat-card-img-root::after {
  box-shadow: inset 0 0 0 2px var(--gold-soft, #e8c976);
}