/*
 * CFS shared content axis
 *
 * One desktop measure for the department menu, breadcrumbs and primary page
 * shells. Full-bleed section backgrounds remain full width; their content is
 * constrained to the shared measure. Component-level readable widths (forms,
 * cards and text columns) remain intentionally narrower inside this shell.
 */
:root {
  --cfs-layout-max: 1502px;
  --cfs-layout-edge: 16px;
}

/* Keep the desktop footer inside the viewport at the 1024-1199px boundary.
   The connect/newsletter group gets its own row instead of forcing five
   columns into tablet-landscape width. */
@media (min-width:1024px) and (max-width:1339px) {
  html body.cfs2030-shell .cfs-footer .cfs-footer-groups {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
  }

  html body.cfs2030-shell .cfs-footer .cfs-footer-connect {
    min-width:0;
    grid-column:1 / -1;
  }

  html body.cfs2030-shell .cfs-footer .cfs-footer-connect .cfs-socials {
    max-width:100%;
    flex-wrap:wrap;
  }
}

/* Category pages already expose relevant child categories beside the page
   description. Remove the second, horizontally scrolling category rail above
   the catalogue so sorting and products follow the introduction directly. */
body.cfs2030-shell[data-cfs-page="c-category"] #main-content .cfs2030-plp .cfs-plp-subcategories {
  display: none !important;
}

/* Match the homepage's 16px mobile page edge across the reusable catalogue,
   product and recommendation systems. Full-bleed media and fixed/sticky
   controls deliberately stay outside this rule. */
@media (max-width: 767.98px) {
  /* Search results were inheriting the Bootstrap container's 20px inset and
     then adding the shared 16px catalogue inset inside it. Remove only that
     outer duplicate so the page keeps one standard mobile edge and each card
     receives the recovered width. */
  body.cfs2030-shell.cfs-search-account-page[data-cfs-page="c-category"] #main-content .cfs2030-plp > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body.cfs2030-shell #main-content .cfs2030-plp .cfs-plp-hero,
  body.cfs2030-shell #main-content .cfs2030-plp .productSection.cfs-plp-catalogue,
  body.cfs2030-shell #main-content #pdp-main-content.pdp2030 > .bundle-section,
  body.cfs2030-shell #main-content .cfs-cart-recommendations > .container,
  body.cfs2030-shell #recentlyViewedContainer.cfs-recently-viewed {
    box-sizing: border-box;
    padding-inline: var(--cfs-layout-edge) !important;
  }

  body.cfs2030-shell #main-content #pdp-main-content.pdp2030 > :is(
    .pdp-information,
    .product-glance-section
  ) {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--cfs-layout-edge))) !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 1024px) {
  body.cfs2030-shell .cfs-category-nav {
    padding-inline: max(0px, calc((100% - var(--cfs-layout-max)) / 2));
  }

  /* Direct full-bleed breadcrumb bands must use the document's content box,
     not 100vw (which includes the scrollbar and produced an 8.5px start). */
  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell #main-content .cfs-brand-landing > .cfs-bp-breadcrumb,
  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell[data-cfs-page="c-brnd"] #main-content .cfs-brand-page--approved > .breadcrumb {
    width: min(calc(100% - (2 * var(--cfs-layout-edge))), var(--cfs-layout-max)) !important;
    margin-inline: auto !important;
  }

  /* Legacy sitemap breadcrumb is nested in a Bootstrap container. Re-centre
     it on the shared axis and remove the overflow created by its 100vw rule. */
  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell[data-cfs-page="c-site_map"] #main-content .breadcum:not(.breadcrumpSliderOuter) {
    width: min(calc(100vw - 47px), var(--cfs-layout-max)) !important;
    max-width: var(--cfs-layout-max) !important;
    margin-inline: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Shared breadcrumb measure and visual language. Every top-level page
   breadcrumb uses the same 38px navigation surface and typography, while the
   current page may retain its existing emphasis. */
body.cfs2030-shell #main-content :is(
  nav[aria-label*="breadcrumb" i],
  nav[aria-label="Page path"],
  nav[class*="breadcrumb" i],
  nav[class*="breadcum" i],
  .pdp-breadcrumbs,
  .cfs-range-breadcrumb,
  .cfs-bp-breadcrumb,
  .cfs-static__breadcrumb,
  .static-breadcrumb,
  .p13-breadcrumb,
  .cfs-info-page__breadcrumb,
  .cfs-breadcrumb,
  .cfs-plp-trail,
  .breadcrumbBlock,
  .breadcrumb-block,
  .breadCrumb,
  .breadcum:not(.breadcrumpSliderOuter)
) {
  box-sizing: border-box;
  width: min(100%, var(--cfs-layout-max));
  max-width: var(--cfs-layout-max);
  height: 38px;
  min-height: 38px;
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  background: var(--cfs-nav-bg, #fafbf5);
  border-bottom: 1px solid var(--cfs-theme-khaki, #dfdacf);
  box-shadow: 0 0 0 100vmax var(--cfs-nav-bg, #fafbf5);
  clip-path: inset(0 -100vmax);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

body.cfs2030-shell #main-content :is(
  nav[aria-label*="breadcrumb" i],
  nav[aria-label="Page path"],
  nav[class*="breadcrumb" i],
  nav[class*="breadcum" i],
  .pdp-breadcrumbs,
  .cfs-range-breadcrumb,
  .cfs-bp-breadcrumb,
  .cfs-static__breadcrumb,
  .static-breadcrumb,
  .p13-breadcrumb,
  .cfs-info-page__breadcrumb,
  .cfs-breadcrumb,
  .cfs-plp-trail,
  .breadcrumbBlock,
  .breadcrumb-block,
  .breadCrumb,
  .breadcum:not(.breadcrumpSliderOuter)
) :where(a, span, li, strong, b) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Primary page shells used by catalogue, PDP, cart and editorial templates. */
body.cfs2030-shell #main-content #pdp-main-content.pdp2030,
body.cfs2030-shell #main-content .cfs-range-listing > .listingPg > .container,
body.cfs2030-shell #main-content .cfs2030-cart > .container,
body.cfs2030-shell #main-content #cfs-static-page > .cfs-static__shell,
body.cfs2030-shell #main-content > .p13-shell,
body.cfs2030-shell #main-content .cfs-page13-live > .p13-shell,
body.cfs2030-shell #main-content .cfs-info-page > .cfs-info-page__shell,
body.cfs2030-shell #main-content > article[class^="cfs-"] > [class$="__shell"],
body.cfs2030-shell #main-content > .cfs-auth-main {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--cfs-layout-edge))), var(--cfs-layout-max));
  max-width: var(--cfs-layout-max);
  margin-inline: auto;
}

/* Wishlist uses the same simple-listing internals as New Arrivals and Best
   Sellers. Its legacy Bootstrap container capped the outer shell at 1320px,
   then the listing added its normal inset again. Let the outer shell span the
   content box so breadcrumb, hero and catalogue resolve to the shared axis. */
body.cfs2030-shell #main-content .cfs-wishlist-listing > .container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

@media (max-width: 1023.98px) {
  :is(#cfs-wishlist-axis#cfs-wishlist-axis#cfs-wishlist-axis#cfs-wishlist-axis, html) body.cfs2030-shell #main-content .cfs-wishlist-listing .cfs-plp-hero {
    padding-inline: var(--cfs-layout-edge) !important;
  }
}

/* Brand and collection templates keep full-bleed bands with one inner width. */
body.cfs2030-shell #main-content .cfs-brand-landing > :is(
  .cfs-brand-landing-hero,
  .cfs-brand-anchor
),
body.cfs2030-shell #main-content .cfs-brand-landing .cfs-bp-inner {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--cfs-layout-edge))), var(--cfs-layout-max));
  max-width: var(--cfs-layout-max);
  margin-inline: auto;
}

/* Range and simple-listing catalogue grids use the same outer edges. */
body.cfs2030-shell #main-content :is(
  .cfs-range-listing,
  .cfs2030-plp
) .productSection {
  box-sizing: border-box;
  width: min(100%, var(--cfs-layout-max));
  max-width: var(--cfs-layout-max);
  margin-inline: auto;
}

/* Remove page-specific desktop insets once the shared shell owns the axis. */
@media (min-width: 1024px) {
  body.cfs2030-shell #main-content .cfs-range-hero-copy,
  body.cfs2030-shell #main-content .cfs-brand-landing-copy {
    padding-left: 0;
  }

  /* The brand directory hero is itself full bleed. Its original responsive
     inset used a narrower 1280px measure, so its copy drifted inward from the
     department-menu and breadcrumb axis. Keep the band full width while its
     content begins on the shared 1502px axis. */
  body.cfs2030-shell[data-cfs-page="c-brnd"] #main-content .cfs-brand-page--approved > .brand-hero {
    padding-inline: max(0px, calc((100% - var(--cfs-layout-max)) / 2));
  }

  body.cfs2030-shell #main-content #cfs-static-page > .cfs-static__shell,
  body.cfs2030-shell #main-content > .p13-shell,
  body.cfs2030-shell #main-content .cfs-page13-live > .p13-shell,
  body.cfs2030-shell #main-content .cfs-info-page > .cfs-info-page__shell,
  body.cfs2030-shell #main-content > article[class^="cfs-"] > [class$="__shell"] {
    padding-inline: 0;
  }
}

/* Page-13 information, directory and editorial templates share the same
   top-section geometry as the approved Delivery page. This replaces the
   historical mix of flush-left desktop heroes and compact mobile cards. */
body.cfs2030-shell #main-content .p13-shell {
  padding-top: 0 !important;
}

/* On wide desktops, keep the brand copy on the shared content axis while
   allowing its adjacent hero image to continue to the viewport's right edge. */
@media (min-width: 1535px) {
  body.cfs2030-shell #main-content .cfs-brand-landing > .cfs-brand-landing-hero {
    width: calc(50% + 751px) !important;
    max-width: none !important;
    margin-left: calc(50% - 751px) !important;
    margin-right: 0 !important;
    grid-template-columns: 600.8px minmax(0, 1fr) !important;
  }
}

body.cfs2030-shell #main-content .p13-shell > .p13-breadcrumb {
  margin-top: 0 !important;
  gap: 10px;
}

body.cfs2030-shell #main-content .p13-hero {
  box-sizing: border-box;
  gap: 36px;
  padding: 48px 52px;
  background: #f6f4ef;
  border: 1px solid var(--cfs-theme-khaki, #dfdacf);
  border-radius: 16px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body.cfs2030-shell #main-content .p13-hero .p13-display {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.12;
}

@media (max-width: 767.98px) {
  body.cfs2030-shell #main-content .p13-hero {
    gap: 24px;
    padding: 30px 24px;
    border-radius: 12px;
  }
}

/* A few information templates paint the breadcrumb shell white. Keep their
   text on the shared axis while continuing the menu surface edge to edge. */
body.cfs2030-shell[data-cfs-page="c-author"] #main-content .cfs-authors > .p13-breadcrumb,
body.cfs2030-shell[data-cfs-page="c-best_selling_products"] #main-content .cfs2030-plp.cfs-simple-listing > .container > .cfs-breadcrumb {
  background: var(--cfs-nav-bg, #fafbf5);
  box-shadow: 0 0 0 100vmax var(--cfs-nav-bg, #fafbf5);
  clip-path: inset(0 -100vmax);
}

@media (max-width: 1023.98px) {
  /* The shared width already supplies the 16px mobile gutter. Some legacy
     content templates also add 16px to the shell itself, which doubles the
     outer inset to 32px. Keep component/card padding intact, but let every
     top-level editorial shell use the one shared page edge. */
  body.cfs2030-shell #main-content #cfs-static-page > .cfs-static__shell,
  body.cfs2030-shell #main-content > .p13-shell,
  body.cfs2030-shell #main-content .cfs-page13-live > .p13-shell,
  body.cfs2030-shell #main-content .cfs-info-page > .cfs-info-page__shell,
  body.cfs2030-shell #main-content > article[class^="cfs-"] > [class$="__shell"] {
    padding-inline: 0;
  }

  /* Breadcrumbs that already live inside one of the shared shells must fill
     that shell. Applying the viewport gutter a second time would move their
     text another 16px inward. */
  body.cfs2030-shell #main-content #cfs-static-page > .cfs-static__shell > .cfs-static__breadcrumb,
  body.cfs2030-shell #main-content > .p13-shell > .p13-breadcrumb,
  body.cfs2030-shell #main-content .cfs-page13-live > .p13-shell > .p13-breadcrumb,
  body.cfs2030-shell #main-content .cfs-info-page > .cfs-info-page__shell .cfs-info-page__breadcrumb {
    width: 100%;
    margin-inline: 0;
  }

  body.cfs2030-shell #main-content .cfs-info-page > .cfs-info-page__shell > nav[aria-label="Breadcrumb"] {
    padding-inline: 0;
  }

  body.cfs2030-shell #main-content > article[class^="cfs-"] > [class$="__shell"] > nav[aria-label="Breadcrumb"] {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  body.cfs2030-shell #main-content :is(
    nav[aria-label*="breadcrumb" i],
    nav[aria-label="Page path"],
    nav[class*="breadcrumb" i],
    nav[class*="breadcum" i],
    .pdp-breadcrumbs,
    .cfs-range-breadcrumb,
    .cfs-bp-breadcrumb,
    .cfs-static__breadcrumb,
    .static-breadcrumb,
    .p13-breadcrumb,
    .cfs-info-page__breadcrumb,
    .cfs-breadcrumb,
    .cfs-plp-trail,
    .breadcrumbBlock,
    .breadcrumb-block,
    .breadCrumb,
    .breadcum:not(.breadcrumpSliderOuter)
  ) {
    width: calc(100% - (2 * var(--cfs-layout-edge)));
  }

  /* Final mobile breadcrumb axis: every template begins at the same 16px
     edge. Brand/collection breadcrumbs were flush to 0, the simple listing
     used 14px, and range pages inherited Bootstrap's extra 14px container
     padding (32px total). */
  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell #main-content .cfs-bp-breadcrumb,
  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell #main-content .breadcrumb.cfs-breadcrumb {
    box-sizing: border-box;
    padding-inline-start: var(--cfs-layout-edge) !important;
  }

  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell #main-content .cfs-range-listing > .listingPg > .container > .cfs-range-breadcrumb {
    box-sizing: border-box;
    width: calc(100% + 28px) !important;
    margin-inline: -14px !important;
    padding-inline: 0 !important;
  }

  :is(#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis#cfs-final-breadcrumb-axis,html) body.cfs2030-shell[data-cfs-page="c-site_map"] #main-content .breadcum:not(.breadcrumpSliderOuter) {
    box-sizing: border-box;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline-start: 4px !important;
    left: 0 !important;
    transform: none !important;
  }
}