/** Shopify CDN: Minification failed

Line 1173:0 Unexpected "}"

**/
/* Muslim Lantern — Fear of God style overrides
   Typography, header, search, and contact form refinements.
   Loaded after main.css in layout/theme.liquid. */

/* Size guide table (in the Size Guide accordion) */
.ml-size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px;
  font-size: 13px;
}
.ml-size-table th,
.ml-size-table td {
  border: 1px solid rgba(var(--color-foreground), 0.15);
  padding: 8px 10px;
  text-align: center;
}
.ml-size-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  background: rgba(var(--color-foreground), 0.04);
}
.ml-size-table tbody th {
  text-align: left;
  font-weight: 500;
}
.ml-size-note {
  font-size: 11px;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0;
}

/* Image-based color swatches (set by ml-variant-images.js) — show each
   colorway's photo instead of a single color dot. */
.m-product-option--node__label.ml-img-swatch {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(var(--color-foreground), 0.15) !important;
  padding: 0 !important;
}
.m-product-option--node__label.ml-img-swatch[data-selected="true"] {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 2px;
  border-color: transparent !important;
}

/* ---------- Typography ---------- */

body {
  letter-spacing: 0.05em;
}

h1, h2, h3, h4, h5, h6,
.m-section__heading {
  text-transform: uppercase;
  letter-spacing: var(--heading-letter-spacing, 2px);
}

/* Main navigation — fearofgod.com measured: 14px / 400 / 1.8px / uppercase */
.m-menu__link--main {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* FOG header geometry — full-width bar (NOT capped/centered), content inset
   40px from each edge at any screen size. The theme caps container-fluid at
   1620px and centers it, which pulls the menu away from the edges on wide
   monitors — FOG's header is edge-to-edge, so remove the cap here. */
.m-header .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* On phones the 40px inset eats 80px of a ~390px bar, crowding the hamburger
   and bag against the centered logo. Pull the side items out to the edges. */
@media (max-width: 767px) {
  .m-header .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* The asset-fallback wordmark renders ~155px wide, so its right edge nearly
     touches the search icon. Cap it so the centered logo clears both side
     clusters and the hamburger/search/bag breathe at the edges. */
  .m-logo--mobile .m-logo__image,
  .m-logo--mobile .m-logo__image img,
  .m-logo--mobile img {
    max-width: 118px !important;
    width: 118px !important;
    height: auto !important;
  }
}

.m-header__desktop .m-header__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Nav items — FOG: ~12px between items (6px each side) */
.m-header__desktop {
  --main-link-px: 6px;
}

.m-header__desktop .m-menu__link--main {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Hover underline under top menu items — clean line directly under the text
   (matches the original Muslim Lantern store). */
.m-header__desktop .m-menu__link--main:after {
  display: block !important;
  height: 1px;
  bottom: 7px;
}

/* First item (FEATURED) has a smaller left padding than the underline's
   default offset — align the underline start to the text so it spans fully. */
.m-header__desktop .m-menu > .m-menu__item:first-child > .m-menu__link--main:after {
  left: 6px;
}
.m-header__desktop .m-menu > .m-menu__item:first-child:hover > .m-menu__link--main:after {
  width: calc(100% - 6px - var(--main-link-px));
}

/* Dropdown sub-links full white (like the FEATURED mega-menu) instead of the
   theme's default 60%-dimmed-until-hover. */
.m-header__desktop .m-sub-menu__item > a {
  color: rgb(var(--color-foreground)) !important;
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

/* Hover effect on submenu items: color change only (no underline) */
.m-header__desktop .m-sub-menu__item > a:hover {
  background: transparent !important;
  text-decoration: none !important;
  opacity: 0.55;
}

/* Sub-menu (dropdown / mega-menu) background matches the main menu bar's
   semi-transparent black on the homepage transparent header. */
.m-header.transparent-on-top:not(.stuck):not(.header-sticky-always) .m-header__dropdown-bg,
.m-header.transparent-on-top:not(.stuck):not(.header-sticky-always) .m-mega-menu {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* Keep both mega-menus (FEATURED + COLLECTIONS) the same height */
.m-header__desktop .m-mega-menu {
  min-height: 360px;
}

/* When a submenu opens on the homepage transparent header, the theme flips a
   solid black layer (.m-header__bg) fully opaque — keep it transparent so the
   bar stays translucent like Fear of God. */
.m-header.transparent-on-top:not(.stuck):not(.header-sticky-always).m-mega-active .m-header__bg {
  opacity: 0 !important;
}

/* FEATURED & COLLECTIONS are dropdown triggers only — clicking them shouldn't
   navigate (OUR STORY has no dropdown, so it stays a normal clickable link). */
.m-header__desktop .m-menu__item--has-submenu > .m-menu__link--main {
  pointer-events: none;
  cursor: default;
}

/* Right-side icons — FOG: 20px between Search/Account/Bag (10px each side) */
.m-header__desktop .m-header-text-action,
.m-header__desktop .m-header__account-text {
  padding: 11px 10px !important;
}

/* First menu item flush at the 30px inset, last action (Bag) at 40px from edge */
.m-header__desktop .m-menu > .m-menu__item:first-child > .m-menu__link--main {
  padding-left: 6px;
}

.m-header__desktop .m-header__right > *:last-child .m-header-text-action,
.m-header__desktop .m-cart-icon-bubble.m-header-text-action {
  padding-right: 0 !important;
}

/* Pull the right icon cluster flush to the 40px inset, like FOG */
.m-header__desktop .m-header__right {
  margin-right: -6px;
}

/* Hero SHOP button — fearofgod.com measured: 310x56, black, 14px/0.7px.
   Use flex centering so the label sits dead-center (theme default is
   display:block + min-height, which pins text to the top). */
.m-slide__content .m-button,
.m-slideshow-section .m-slide__content .m-button {
  min-width: 310px !important;
  min-height: 56px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.7px;
}

/* Homepage header — semi-transparent dark bar over the video (FOG style).
   Solidifies to black automatically when sticky/scrolled. */
.m-header.transparent-on-top:not(.stuck):not(.header-sticky-always) header:not(.header-drawer-open) {
  background-color: rgba(0, 0, 0, 0.45);
}

/* Section headings — fearofgod.com measured 24px (e.g. COLLECTION NINE) */
.m-section__heading.h3,
.m-section__heading.h4 {
  font-size: 26px;
}

/* Text overlaid on hero/slider images — FOG hero display scale */
.m-slide__title {
  font-size: 46px;
}

@media (max-width: 767px) {
  .m-slide__title {
    font-size: 32px;
  }
}

/* Dropdown / mega-menu links — fearofgod.com mega-menu spec.
   Weight 400, not 500: Roboto Condensed's medium cut reads like a different
   typeface next to the regular used site-wide. */
.m-sub-menu .m-menu__link,
.m-megamenu .m-menu__link {
  font-size: 12px;
  /* !important: header.css sets 500 at 0-4-0 and loads after this file */
  font-weight: 400 !important;
  letter-spacing: 1.8px;
}

/* Header action links (Search / Account / Bag) match the menu */
.m-header .m-header-text-action,
.m-header .m-header__search-icon,
.m-header .m-search-form__button,
.m-header .m-header__account-text {
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Wordmark logo scales inside its container */
.m-logo__image img {
  max-width: 100%;
  height: auto;
}

/* Bag item counter — plain number instead of the theme's white circle badge.
   The theme styles the badge with higher specificity, so override with !important. */
.m-cart-icon-bubble .m-cart-count-badge,
.m-cart-icon-bubble .m-cart-count,
.m-header .m-cart-count-badge,
.m-header .m-cart-count {
  position: static !important;
  background: none !important;
  background-color: transparent !important;
  color: inherit !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
  margin-left: 2px;
}

.m-cart-count-badge::before { content: "("; }
.m-cart-count-badge::after { content: ")"; }

/* Keep the counter hidden when the bag is empty */
.m-cart-count.m\:hidden,
.m-cart-count-badge.m\:hidden {
  display: none !important;
}

/* Footer — fearofgod.com: 12px uppercase */
.m-footer,
.m-footer p,
.m-footer a {
  font-size: 12px;
}

.m-footer .m-footer--block a,
.m-footer .m-footer--block .m-footer__heading,
.m-footer .m-footer__heading {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

/* Buttons — fearofgod.com measured: 14px / 400 / 1.8px, solid square, 48px tall */
.m-button {
  min-height: 48px;
  border-radius: 0;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  padding-left: 28px;
  padding-right: 28px;
}

/* Fullscreen hero fills the ENTIRE viewport — the transparent header overlays
   it (FOG style), so don't subtract header height. Match theme specificity. */
.m-slider:not(.m-slider--adapt).m-slider--fullscreen .m-slide__media,
.m-slider--fullscreen .m-slide__media {
  height: 100svh !important;
}

.m-slideshow-section.m-slider--fullscreen,
.m-slideshow-section.m-slider--fullscreen .swiper-container,
.m-slideshow-section.m-slider--fullscreen .swiper-slide {
  height: 100svh !important;
}

/* ---------- Minimal search popup ---------- */

/* Hide the logo and account/cart icon columns inside the search popup */
.m-search-popup .m\:w-2\/12 {
  display: none !important;
}

.m-search-popup .md\:m\:w-8\/12 {
  width: 100%;
}

/* Hide popular searches for a cleaner panel */
.m-search-popup .m-search-popular {
  display: none;
}

.m-search-popup--wrapper {
  padding: 40px 0;
}

.m-search-popup__search-form {
  max-width: 640px;
  margin: 0 auto;
}

/* Borderless input with a single hairline underneath */
.m-search-popup .m-search-form .form-field--input {
  border: 0;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.4);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: 0;
  box-shadow: none;
}

.m-search-popup .m-search-form .form-field--input:focus {
  border-color: rgb(var(--color-foreground));
  outline: none;
}

.m-search-popup .m-search-form .form-field--input::placeholder {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--color-foreground), 0.45);
}

/* ---------- Contact page (Fear of God layout) ---------- */

.m-contact-form__main {
  max-width: 560px;
}

.m-contact-form__heading {
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.m-contact-form__description {
  font-size: 13px;
  line-height: 1.7;
}

.m-contact-form .ml-field {
  margin-bottom: 22px;
}

.m-contact-form .ml-field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: rgba(var(--color-foreground), 0.75);
}

.m-contact-form .form-field--input,
.m-contact-form select.form-field--input {
  border-radius: 0;
  border: 1px solid rgba(var(--color-foreground), 0.3);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.05em;
  width: 100%;
}

.m-contact-form .form-field--input:focus {
  border-color: rgb(var(--color-foreground));
  outline: none;
  box-shadow: none;
}

.m-contact-form select.form-field--input {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--arrow-select-box);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
  height: 48px;
  cursor: pointer;
}

.m-contact-form .m-button {
  min-width: 160px;
}

/* =========================================================================
   FEAR OF GOD — mobile parity (≤767px)
   Match fearofgod.com's phone layout: icon-only bag, single-column stacked
   collection sections, 24px headings, and 47px square buttons.
   ========================================================================= */

/* Bag action: icon only on mobile (FOG), the "BAG" wordmark stays on desktop. */
.m-cart-bag-icon { display: none; }

@media (max-width: 767px) {
  .m-header__mobile-right .m-cart-icon-bubble {
    display: inline-flex;
    align-items: center;
  }
  .m-header__mobile-right .m-cart-text { display: none; }
  .m-header__mobile-right .m-cart-bag-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
  }
  /* FOG mobile header: 22px gap between search & bag, icons flush to the edge
     (FOG measured 22px gap, bag ~13px from the screen edge). */
  .m-header__mobile-right {
    gap: 22px;
    align-items: center;
  }
  .m-header__mobile-right > * + * { margin-left: 0 !important; }
  .m-header__mobile-right .m-cart-icon-bubble,
  .m-header__mobile-right m-search-popup,
  .m-header__mobile-right .m-header__search-icon {
    padding: 0 !important;
  }

  /* Section headings — FOG mobile measured 24px / 400 */
  .m-section__heading.h3,
  .m-section__heading.h4 {
    font-size: 24px !important;
    font-weight: 400 !important;
  }

  /* Buttons — FOG mobile measured: 47px tall, 16px/24px padding, 14px/0.7px.
     Solid-over-image buttons (hero + image sliders) keep their fill. */
  .m-button {
    min-height: 47px !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    letter-spacing: 0.7px !important;
  }
  .m-slide__content .m-button,
  .m-slideshow-section .m-slide__content .m-button {
    min-width: 240px !important;
    width: auto !important;
  }

  /* Collection list ("Shop the Collection") — FOG stacks one full-width image
     per row on mobile instead of the 2-up scroller. Pairs with the section's
     mobile_disable_slider=true / use_scroll_mobile=false settings. */
  .sf-home__collection-list .m-mixed-layout__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .sf-home__collection-list .m-collection-block__media,
  .sf-home__collection-list .m-collection-item__image {
    width: 100% !important;
  }
  /* Comfortable vertical rhythm between stacked sections */
  .sf-home__collection-list {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Fear of God has no mobile bottom toolbar — hide Minimog's sticky bar
   (home / grid / bag / search) so the phone layout matches FOG. */
.m-mobile-sticky-bar { display: none !important; }
/* Add safe-area padding back since the bar no longer reserves space */
.m-mobile-sticky-bar + * { margin-bottom: 0 !important; }

/* FOG has no back-to-top button on mobile either */
@media (max-width: 767px) {
  .m-button--scroll-top { display: none !important; }
}

/* Product card collection caption — FOG shows the line/collection name as a
   small muted label above the product name. */
.m-product-card__collection {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
  margin-bottom: 4px;
}

/* =========================================================================
   FEAR OF GOD — mobile menu (drawer) parity
   ========================================================================= */

/* FOG's mobile menu covers the full viewport. Minimog leaves a 40px gap
   (width: calc(100% - 40px)) — make the drawer and its sliding submenu panel
   span the full width. */
@media (max-width: 767px) {
  .m-menu-drawer__wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Remove the red separator line under the submenu "back" button — FOG has none.
   (Minimog draws border-bottom in the accent colour, which is red here.) */
.m-menu-mobile__back-button {
  border-bottom: 0 !important;
}

@media (max-width: 767px) {
  /* FOG's mobile menu is dark but translucent (you sense the page behind).
     Minimog's drawer is solid black — make it translucent + blurred. */
  .m-menu-drawer__wrapper {
    background-color: rgba(0, 0, 0, 0.86) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  /* The drill-down submenu panel slides on top of the main menu list, so it must
     stay OPAQUE — making it transparent let the main menu show through and the
     two layers of text overlapped. Keep it solid (main view stays translucent). */
  .m-megamenu-mobile {
    background-color: rgb(0, 0, 0) !important;
  }
  /* Search glyph reads heavier than FOG's (filled vs thin). Trim it down. */
  .m-header__mobile .m-header__search-icon svg,
  .m-header__mobile-right .m-header__search-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* FOG-style footer links at the bottom of the mobile drawer (replaces the
   Sign in / Register buttons). */
.m-menu-customer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 16px 12px;
}
.m-menu-customer__links a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground)) !important;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.m-menu-customer__links a:hover { opacity: 0.55; }

@media (max-width: 767px) {
  /* FOG's mobile header bar is 60px tall; Minimog's collapses to ~30px. */
  .m-header__mobile {
    min-height: 60px;
  }
  /* When the menu drawer is open, the header keeps `header-drawer-open` — match
     it to the dark translucent drawer so the bar and menu read as one surface
     (it was staying light over the hero, clashing with the open menu). */
  .m-header__mobile.header-drawer-open {
    background-color: rgba(0, 0, 0, 0.86) !important;
  }
}

/* Active product-gallery thumbnail highlight.
   The theme's rule targets `.nav-swiper-container .swiper-slide-thumb-active`,
   but the live thumbnail container is `.m-product-media--slider__thumbnails`,
   so the selected thumbnail never got highlighted.

   FC marks selection with a 2px black outline and does NOT dim the others —
   every thumbnail sits at full opacity (measured on their PDP). An earlier
   version here faded the inactive ones to 50%, which read as the images being
   washed out, so selection is carried by the outline alone. */
.m-product-media--slider__thumbnails .swiper-slide .m-product-media {
  opacity: 1;
  outline: none;
}
.m-product-media--slider__thumbnails .swiper-slide-thumb-active .m-product-media {
  opacity: 1;
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: -2px;
}

/* ── Uniform type weight (FOG: one regular cut everywhere) ─────────────────
   Minimog ships several UI bits in medium/semibold (500/600), which reads as
   a different typeface next to the 400 Roboto Condensed used site-wide:
   mega-menu sublinks, collection-card titles, cart drawer, search title,
   menu counters, locale picker. Normalize all of them to the regular cut. */
.m-menu__link,
.m-menu-mobile__back-button,
.m-collection-card__link,
.m-cart-drawer__title,
.m-cart-text,
.m-cart-addon__text,
.m-cart__subtotal--label,
.m-cart__subtotal--price,
.m-cart-count,
.m-cart-count-badge,
.m-tooltip__content,
.m-age-verifier__title,
h3.m\:text-base,
.m-menu sup,
sup,
.footer__locale-option {
  font-weight: 400;
}

/* Collection & mega-menu card titles: same treatment as the nav (FOG small
   caps) instead of 18px medium title-case, so card labels match site type. */
.m-collection-card__link {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

/* Product-count superscripts on collection cards/banners: Minimog sets 600
   at 0-3-1 specificity, so match it to bring them down to the regular cut. */
.m-collection-card--standard .m-collection-card__title sup,
.m-collection-banner__collection-name sup {
  /* !important: component-collection-card.css ties on specificity but is
     section-scoped, so it loads after this file and would win the tie */
  font-weight: 400 !important;
}

/* PDP accordion labels (Details / Size Guide / Shipping): Minimog renders
   them 18px medium; bring them to the site's 14px regular so the info
   column reads as one type system. */
.main-product__block .m-product-collapsible .m-collapsible--button,
.m-collapsible--button {
  font-weight: 400;
  /* !important: product.css sets 18px on the same selector but loads after */
  font-size: 14px !important;
}

/* PDP info column must fit a 660px laptop viewport while sticky, so the
   whole column (title → last accordion) is on screen without scrolling
   past the gallery. Tighten the 24px block gaps and the sticky offset.
   (657px column at top:30 was 49px too tall on a 1366x768 screen.) */
@media (min-width: 1024px) {
  .m-product-info--wrapper {
    /* 14px, not 16: with the blurb the column lands at 660.3px on a 660px
       viewport — the 2px keeps it fully on screen. */
    top: 14px !important;
  }
  .main-product__block-variant_picker,
  .main-product__block-buy_buttons,
  .main-product__block-collapsible_tab {
    margin-top: 16px !important;
  }
  .m-product-collapsible .m-collapsible--button {
    padding-top: 12px;
    padding-bottom: 8px;
  }
}

/* Last weight stragglers (found by full-page computed-style audit):
   mobile-drawer back-button labels, cart-addon "discount code" label
   (m:font-medium utility), selected locale option, cookie banner buttons.
   !important where a utility class or state selector outguns us. */
.m-menu-mobile__back-button span,
.m-cart-addon__title span,
.m-cart-addon__title.m\:font-medium,
.footer__locale-option,
.cookie-action--accept,
.cookie-action--decline {
  font-weight: 400 !important;
}

/* Weight stragglers only rendered on product-card/PDP mobile surfaces:
   card names, sale/sold-out badges, variant option labels, Foxkit size-guide
   button. (Size-table th stays bold — semantic, like strong.) */
.m-product-card__name,
.m-product-card__tag-name,
.m-product-tag,
.option-label--title,
.foxkit-sizechart-button--label,
/* collection sort-by dropdown — trigger and its options */
.m-select-custom--trigger-text,
.m-select-custom--option {
  font-weight: 400 !important;
}

/* ── PDP blurb — FOG-style short description ──────────────────────────────
   A few sentences of prose between ADD TO BAG and the accordions, like
   fearofgod.com PDPs (measured there: 12px, 1.6 line-height, 0.6px
   tracking). Content comes from the custom_liquid_mlblurb block in
   templates/product.json (per-product case on handle). */
.ml-product-blurb {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.6px;
}
.ml-product-blurb p {
  margin: 0;
}

/* The blurb adds ~4 lines to the sticky info column; reclaim height so the
   whole column still fits a 660px laptop viewport beside the gallery. */
@media (min-width: 1024px) {
  .main-product__block-variant_picker,
  .main-product__block-buy_buttons,
  .main-product__block-custom_liquid,
  .main-product__block-collapsible_tab {
    margin-top: 12px !important;
  }
  /* Variant picker internal spacing (FOG-compact): the tee's picker is the
     tallest block at 192px; tighter label/option gaps keep the full column
     under a 660px viewport now that the blurb wraps to the column width. */
  .m-product-option--label {
    margin-bottom: 6px !important;
  }
  .m-product-option:not(:last-child) {
    margin-bottom: 12px !important;
  }
  /* Breadcrumb: 15px font + 15px vertical padding is off the site scale
     and burns 53px of column height — align to the 13px utility size. */
  .main-product__block-breadcrumb .m-breadcrumb--item {
    font-size: 13px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ── Inner-page header: white bar (FOG) ───────────────────────────────────
   fearofgod.com keeps the header transparent over the homepage hero, and
   white with black type on every inner page. The theme only adds
   `transparent-on-top` on template index, so :not() targets inner pages
   exactly. Override the colour-scheme *variables* rather than individual
   colours so text, icons and borders all follow automatically.
   `--gradient-background` matters: .m-gradient paints via the `background`
   shorthand, so that variable — not background-color — is what wins.
   Dropdown rules are scoped under .m-header__desktop so the deliberately
   dark mobile drawer (.m-menu-drawer, also inside .m-header) is untouched. */
.m-header:not(.transparent-on-top) .m-header__desktop,
.m-header:not(.transparent-on-top) .m-header__mobile,
.m-header:not(.transparent-on-top) .m-header__bg,
.m-header:not(.transparent-on-top) .m-header__dropdown-bg,
.m-header:not(.transparent-on-top) .m-header__desktop .m-mega-menu,
.m-header:not(.transparent-on-top) .m-header__desktop .m-sub-menu {
  --color-background: 255,255,255;
  --gradient-background: #ffffff;
  --color-foreground: 34,34,34;
  --color-heading: 34,34,34;
  --color-border: 0,0,0;
}

/* Hairline under the bar so it separates from white page content */
.m-header:not(.transparent-on-top) .m-header__desktop,
.m-header:not(.transparent-on-top) .m-header__mobile {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* The mobile menu drawer stays dark (FOG), and the bar darkens to match it
   while open — so flip the bar's contents back to white for that state,
   including the now-black wordmark. */
.m-header:not(.transparent-on-top) .m-header__mobile.header-drawer-open {
  --color-foreground: 255,255,255;
  --color-heading: 255,255,255;
  border-bottom-color: transparent;
}
.m-header:not(.transparent-on-top) .m-header__mobile.header-drawer-open .m-logo__image img {
  filter: invert(1);
}

/* ── PDP gallery — frenchconnection.com geometry ──────────────────────────
   Gallery is layout-6 "Slider vertical": a thumbnail rail beside one large
   image. Measured on the FC PDP at a 1280px viewport and matched here:
     thumb rail  154px wide, starting 34px from the edge
     thumbnails  154x205 (3:4 portrait)
     main image  441x638 (0.691) starting at x=198
   Ours lands within a few px: rail 154 @30, thumbs 152x203, main 446x645.

   Three things had to be undone to get there:
   1. The media column carries the grid's 25px side gutter, which inset the
      whole gallery and left the dead space on the left — zeroed on desktop.
   2. Swiper sizes the vertical thumb slides through an inline --slide-height
      (70px, giving tiny 58px squares), so height/width are forced here.
   3. Each image sits in an .m-image wrapper that sizes itself to the photo's
      natural ratio — the image filled *that* box, not the frame, which is why
      a square flat-lay floated in a half-empty frame. The wrapper is now
      stretched to the frame so object-fit governs.
   Media is mixed (flat-lay square 2048², model shots 2:3), so `cover` fills
   the frame the way FC's does; the 2:3 shots are within 3% of the frame ratio
   and the square flat-lays have wide enough margins to crop safely. */
/* Frame shape applies from the tablet breakpoint up. The theme only switches
   to the vertical rail at 1024px, but it shows this same gallery from 768px —
   so without this, 768–1023px kept the old square frame with the product
   floating in it. Phones (<768) keep the theme's own arrangement. */
@media (min-width: 768px) {
  /* Frame is 2:3, matching Muslim Lantern's own photography rather than FC's
     0.691 — 86 of the 96 product photos are 1366x2048 (2:3), so this frame
     fills exactly with no crop and no letterbox. FC's ratio trimmed 3.6% off
     the top and bottom of every model shot.
     `contain`, not `cover`: the remaining 10 photos are square flat-lays
     (2048²) and cover cut 31% off their sides, clipping the sleeves. Contain
     shows them whole; the leftover space is white on a white page. */
  .m-media-gallery__inner .m-product-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }
  .m-media-gallery__inner .m-product-media .m-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .m-media-gallery__inner .m-product-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* The theme's image reveal animation (mZoomFadeSmall) starts at scale(1.1)
   and is supposed to settle back to 1, but on the product gallery it never
   does — measured stuck at 1.1 several seconds after load. Every gallery
   image therefore rendered 10% larger than its frame and was cropped by it,
   which quietly defeated the `contain` fit meant to show the whole garment.
   Freeze the transform so images sit exactly in their frame. */
.m-media-gallery__inner .m-product-media img,
.m-product-media--slider__thumbnails .m-product-media img {
  transform: none !important;
}

@media (min-width: 1024px) {
  /* Product section container, built like FC's. Theirs caps at 1900px and
     centres beyond that (verified: 250px each side at a 2400 viewport), and
     below the cap it runs full width with a modest inset.

     Ours previously had no cap and an asymmetric 34px/12% inset, so on wide
     screens the layout drifted left and left a growing dead strip on the
     right. Capped and centred with symmetric, viewport-scaled padding: 3vw,
     floored at 20px so phones/tablets keep a sane gutter and ceilinged at
     60px so it stops growing on very wide monitors. 1600 rather than FC's
     1900 because our info column is narrower than theirs — at 1900 the
     product image grew past the fold. */
  .m-main-product > .container {
    max-width: 1900px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(20px, 3vw, 60px) !important;
    padding-right: clamp(20px, 3vw, 60px) !important;
  }
  /* The theme's row uses -25px side margins paired with per-column padding to
     make its gutter; the column padding is zeroed below, so zero these too or
     the gallery starts 25px left of the container. */
  .m-main-product--wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* The two columns fill the container exactly (55 + 45), so there is no
     leftover strip inside it — the previous 53/46 split left ~115px unused,
     which read as dead space down the right. The container's own padding is
     now the only side whitespace, and it is symmetric.
     Image sizes that fall out of this: 575x863 at a 1900 viewport, 494x741 at
     1280, 393x590 at 1024 — all within the fold. */
  .m-main-product--media {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .m-main-product--info {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
  .m-product-media--wrapper,
  .m-media-gallery,
  .m-media-gallery__wrapper.m-product-media--slider {
    width: 100% !important;
    max-width: none !important;
  }

  /* Thumbnail rail — FC's `.pdp-redesign-thumbnails-rail`: a box exactly as
     tall as the main image with `overflow-y: auto`, so the thumbnails past
     the third are reached by scrolling the rail itself (theirs: 638px tall
     holding 1289px of thumbnails; ours 645px holding 2580px).

     It is positioned absolutely rather than left as a flex item because the
     rail is the tallest thing in the row — as a flex item it *defines* the
     row height, so it can never be sized *from* the main image. Out of flow,
     top/bottom:0 binds it to the row height, which the main image sets. The
     wrapper's padding-left then reserves the 164px the rail sits in.

     The theme pins Swiper's viewport to 70px wide / 450px max-height for the
     stock 58px thumbnails; left at that size the 154px slides overflow their
     own scroll container, which broke both scrolling and clicking. Uncapping
     it and freezing the wrapper transform hands scrolling to the browser —
     this Swiper build ships no mousewheel module, so its own carousel could
     not be wheel-scrolled at all. Thumbnail clicks still drive the main
     image (verified with real pointer events). */
  /* Rail width scales with the viewport, as FC's does: 12vw lands on 154px at
     a 1280 viewport and 228px at 1900 — both their measured widths. Bounded
     top and bottom so it neither collapses on small laptops nor keeps growing
     once the container itself has stopped. */
  .m-media-gallery__wrapper.m-product-media--slider {
    position: relative !important;
    padding-left: calc(24% + 14px) !important;
  }
  .m-product-media--slider__thumbnails {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    /* 24% of the gallery column, the proportion FC keeps (their rail is
       23-25% of the gallery at every width). A percentage rather than a
       clamped vw so it scales with the container instead of freezing. */
    width: 24% !important;
    height: auto !important;
    flex: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Scroll without a visible scrollbar, as FC does (their rail sets
       scrollbar-width:none; measured gutter 0px). */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .m-product-media--slider__thumbnails::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  /* Exactly three thumbnails fill the rail, so the bottom one ends flush with
     the bottom of the main image — as FC's does (their rail fits 3).

     Measured off the rail itself rather than computed from the layout: the
     wrapper is given the rail's height and the slides take a third of it
     each. An earlier version derived the height from viewport width, which
     matched at the two widths it was tuned for and drifted everywhere else.
     This holds at any size — verified flush at 1024, 1280, 1900 and 2400.

     min-height:0 is what makes it work: flex items default to min-height
     auto, so a tall thumbnail pushed the slide past its third (341px instead
     of 281px at 1900) and broke the alignment.

     --slide-height is set alongside height because the theme's own
     layout-6 rule sets `height: var(--slide-height) !important` and is the
     more specific selector. */
  .m-product-media--layout-6 .nav-swiper-container {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .m-product-media--layout-6 .nav-swiper-container .swiper-wrapper {
    transform: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .m-product-media--slider__thumbnails .swiper-slide {
    --slide-height: auto !important;
    height: auto !important;
    width: 100% !important;
    flex: 0 0 calc((100% - 20px) / 3) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  .m-product-media--slider__thumbnails .m-product-media {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: block !important;
  }
  .m-product-media--slider__thumbnails .m-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .m-product-media--slider__thumbnails img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Full width of the padded content box — the wrapper's padding-left already
     reserves the rail. Frame shape is set in the 768px block above.

     max-width bounds the image by the viewport HEIGHT rather than a fixed
     size: at a 2:3 frame, a width of (100vh - 150px) x 2/3 is exactly the
     widest the image can be while its full height still clears the header
     and stays on screen. Below that ceiling the column width governs and the
     image scales with the container, as FC's does; above it the height
     governs, which is what stops a tall 2:3 frame running past the fold on a
     wide but short screen. Both bounds are relative, so nothing is pinned to
     a hardcoded size. */
  .m-media-gallery__inner {
    width: 100% !important;
    max-width: calc((100vh - 60px) * 2 / 3) !important;
    flex: 1 1 auto !important;
    margin-left: 0 !important;
  }
}

/* ── Responsive copy utility ──────────────────────────────────────────────
   Several theme text fields render raw HTML, so one field can carry both a
   long-form desktop line and a shorter mobile one; the viewport picks. */
.ml-only-mobile { display: none; }
@media (max-width: 767px) {
  .ml-only-desktop { display: none; }
  .ml-only-mobile { display: inline; }
}

/* ── Hero launch offer ────────────────────────────────────────────────────
   Sits in the slide's subheading slot, directly above the SHOP button.
   The hero video travels from pale wood to near-black, so neither pure black
   nor pure white is safe on its own: set the copy in white and carry a dark
   halo with it, the same trick that keeps the nav legible over the video.
   Sized well above the theme's default subtitle so it reads as a statement
   rather than caption text. */
.sf-home__slideshow .m-slide__subtitle {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  max-width: 33em;
  margin: 0 auto 18px;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
  .sf-home__slideshow .m-slide__subtitle {
    font-size: 14px;
    letter-spacing: 0.05em;
    max-width: 22em;
    margin-bottom: 14px;
  }
}

/* ── PDP accordions — FOG treatment ───────────────────────────────────────
   fearofgod.com marks their Details/Size/Shipping rows with a small plus and
   no rules at all (measured: summary.details__header, zero border top or
   bottom, a 10x10 icon-plus SVG). Minimog ships a 16px chevron plus a 1px
   border under every row.

   The plus is drawn with pseudo-elements rather than by swapping the SVG, so
   no Liquid change is needed — the theme's chevron is simply hidden. The
   vertical stroke fades out when the row is open, turning the plus into a
   minus, which is how FOG's toggles read. State comes from the `open`
   attribute the theme sets on <collapsible-tab>. */
.m-product-collapsible .m-collapsible--button {
  border-bottom: 0 !important;
}
.m-product-collapsible .m-collapsible--icon svg {
  display: none !important;
}
.m-product-collapsible .m-collapsible--icon {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.m-product-collapsible .m-collapsible--icon::before,
.m-product-collapsible .m-collapsible--icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: opacity 0.2s ease;
}
.m-product-collapsible .m-collapsible--icon::before {
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.m-product-collapsible .m-collapsible--icon::after {
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%);
}
collapsible-tab[open="true"] .m-collapsible--icon::after {
  opacity: 0;
}

/* Accordion labels in caps, like FOG's rows. The span needs targeting as
   well as the button: the theme sets `text-transform: initial` on
   `.m-collapsible--button span`, which would otherwise win. Tracking added
   because condensed caps set tight without it — 1.8px is the value used by
   the nav and buttons site-wide. */
.m-product-collapsible .m-collapsible--button,
.m-product-collapsible .m-collapsible--button span {
  text-transform: uppercase !important;
  letter-spacing: 1.8px;
}

/* Accordion content sits directly under its label, as FOG's does (measured:
   zero gap between their summary and the first content line). Minimog
   stacked 16px of inner padding on top of the list's own 17.5px margin,
   giving a 34px gap. Line-height eased from 2.0 to 1.7 so the list reads as
   one block rather than widely spaced lines. */
.m-product-collapsible .m-collapsible--content__inner {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
}
.m-product-collapsible .m-collapsible--content__inner > *:first-child,
.m-product-collapsible .m-collapsible--content__inner ul,
.m-product-collapsible .m-collapsible--content__inner p {
  margin-top: 0 !important;
}
.m-product-collapsible .m-collapsible--content__inner li {
  line-height: 1.7 !important;
}

/* ── Launch offer in the announcement bar ─────────────────────────────────
   The offer rotates alongside the two shipping lines, and the bar turns red
   only while the offer is the visible slide — the strip is otherwise the
   site's black. :has() lets the bar react to which slide Swiper has marked
   active, so no extra script runs on every page.
   Red is the theme's own accent (206,32,39), the shade the old favicon used,
   rather than a new colour introduced just for this. */
.m-announcement-bar:has(.swiper-slide-active [data-ml-offer]),
.m-announcement-bar:has(.m-announcement-bar__item.is-active [data-ml-offer]) {
  --gradient-background: #ce2027;
  background: #ce2027 !important;
  transition: background 0.25s ease;
}
}

/* Announcement strip height — frenchconnection.com measured at 30px total
   (14px text on a 21px line, no vertical padding on the strip itself).
   Ours came to 40px: the same 14px text but 10px padding above and below
   the content. Trim to 5px so the strip lands on 30px, and keep the close
   button from re-inflating it. */
.m-announcement-bar__content {
  padding-top: 5px;
  padding-bottom: 5px;
}
.m-announcement-bar__close,
.m-announcement-bar .m-announcement-bar__close svg {
  max-height: 30px;
}

/* ── Bag drawer width ─────────────────────────────────────────────────────
   frenchconnection.com runs its mini-bag at 720px — a full 50% of a 1440px
   viewport, which is what makes it feel oversized. Merchant wants half that.
   Theme default is 460px (cart.css, min-width:768px); 360px here.
   Mobile is left as the theme has it (calc(100% - 40px)) — a 360px panel on
   a 375px phone would be the same thing with a sliver of backdrop. */
@media screen and (min-width: 768px) {
  /* Width: 75% of frenchconnection.com's 720px mini-bag = 540px.
     (360px — half of FC — read too slim; the theme default was 460px. FOG
     has no drawer at all, they use a full cart page, so there was never a
     FOG width to copy.) !important because cart.css carries the same
     selector and loads after this file. */
  .m-cart-drawer__inner {
    width: 540px !important;
  }
}

/* Free-shipping confirmation line (frenchconnection.com places this at the
   top of the bag). Rendered by snippets/cart-drawer.liquid only above the
   $100 / £100 thresholds in the US and UK. */
.ml-cart-eligible {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgb(var(--color-foreground));
}
.ml-cart-eligible__tick {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* International-order disclosure on the full cart page. Kept intentionally
   quiet and text-only so it reads as routine checkout information. */
.ml-cart-customs-notice {
  margin: 16px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.62);
}
.ml-cart-customs-notice a {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ml-cart-customs-notice a:hover {
  opacity: 0.7;
}
.ml-cart-customs-notice--drawer {
  margin: 10px 0 14px;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

/* ── Bag item row — frenchconnection.com treatment ────────────────────────
   Measured on their mini-bag: 150x198 thumbnail (3:4 portrait, cover),
   title 14px/400, "Colour:"/"Size:" 12px light, price 12px. Ours showed a
   110px SQUARE crop with 12.25px/500 labels and a 14px price — the square
   was the biggest visual difference, since a 3:4 thumbnail is what makes
   their row read as garment-first.
   Scaled to our half-width panel: 100px wide keeps FC's proportion of the
   panel without the row swallowing a 360px drawer. */
.m-cart-drawer .m-cart-item__image,
.m-cart-drawer .m-cart-drawer-item__image {
  width: 100px !important;
  min-width: 100px !important;
}
.m-cart-drawer .m-cart-drawer-item__image .m-image,
.m-cart-drawer responsive-image.m-cart-item__image {
  display: block;
  aspect-ratio: 3 / 4;
  height: auto !important;
}
.m-cart-drawer .m-cart-drawer-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-cart-drawer .m-cart-item__title {
  font-size: 14px;
  font-weight: 400;
}
.m-cart-drawer .m-cart-item__option,
.m-cart-drawer .m-cart-item__property {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}
.m-cart-drawer .m-cart-item__price,
.m-cart-drawer .m-cart-item__price--regular {
  font-size: 12px;
}

/* ── Sold-out badge ───────────────────────────────────────────────────────
   The theme centres a 54px light-grey disc over the product photo, which
   competes with the image. Replace it with a quiet uppercase label in the
   top-right corner: no fill, no radius, just type.
   `background: none` as well as background-color — .m-gradient paints via the
   `background` shorthand, so clearing the colour alone leaves the disc. */
.m-product-tag--soldout {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  color: rgb(var(--color-foreground)) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

/* ── Bag item row layout — frenchconnection.com arrangement ───────────────
   Matching type sizes was not enough: FC *spreads* the row, and ours stacked
   everything down the left. Theirs reads:

       [ thumb ]  title                       − qty +
                  Colour: / Size:
                  price                        Remove

   Three fixes get us there:
   1. The info column was flex: 0 1 auto, so it shrank to its content and the
      title wrapped inside 82px. Now flex: 1 1 auto — it fills beside the thumb.
   2. Remove lives *inside* the quantity container in this theme, so that
      container is pinned down the right edge as a space-between column: the
      stepper lands top-right, Remove bottom-right, exactly like FC.
   3. Price is pushed to the bottom of the info column (margin-top: auto)
      instead of sitting tight under the options, so it lines up with Remove.

   Mobile keeps the theme's stacked row — the spread needs the width. */
@media (min-width: 768px) {
  .m-cart-drawer .m-cart-drawer-item {
    position: relative;
  }
  .m-cart-drawer .m-cart-drawer-item__info {
    flex: 1 1 auto;
    width: auto;
    min-height: 135px;
    display: flex;
    flex-direction: column;
    padding-right: 100px;
  }
  .m-cart-drawer .m-cart-item__title,
  .m-cart-drawer .m-cart-drawer-item__variant {
    width: auto;
    max-width: none;
  }
  .m-cart-drawer .m-cart-item__price {
    margin-top: auto;
  }
  .m-cart-drawer .m-cart-drawer-item__quantity {
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 12px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }
  /* FC's stepper is borderless — ours sat in a boxed control */
  .m-cart-drawer .m-quantity {
    border: none;
  }
}

/* ── Bag drawer / cart thumbnails ─────────────────────────────────────────
   The theme frames each cart thumbnail in a 1px black border, which reads as
   a hard box around the garment. fearofgod.com floats the product on a soft
   grey ground instead — drop the frame and keep the tint. */
.m-cart-drawer-item__image,
.m-cart-item__image {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #f5f5f5 !important;
}