/** Shopify CDN: Minification failed

Line 359:0 Unexpected "}"
Line 1004:0 Unexpected "/"

**/
/* ============================================================================
   360 RELIEF — CUSTOM CSS
   Theme: Symmetry 8.3.2 (Groupthought)
   Loaded from layout/theme.liquid before </head>

   ORGANISATION
   ------------
   Rules are grouped by component. Inside every group, media queries run in
   ASCENDING order (base -> 768 -> 1000 -> 1100 -> 1200 -> 2200), because
   min-width queries all match simultaneously on a wide screen and the LAST
   matching declaration wins. Keep this order when adding rules or you will
   reintroduce the "nav is still 20px at 2400px" class of bug.

   max-width (mobile-only) queries sit directly beneath the base rule they
   modify, since they never overlap the min-width ladder.

   00  Variables
   01  Global links & buttons
   02  Header logo
   03  Navigation & mega menu
   04  Typography scale (cross-component)
   05  Layout containers
   06  Homepage collection cards
   07  Galleries
   08  Product page
   09  Ratings & Judge.me reviews
   10  Footer
   ============================================================================ */


/* ============================================================================
   00  VARIABLES
   --brand-accent is defined in theme settings / theme.liquid.
   --rating-star-color must be an RGB triplet, not a hex value.
   ============================================================================ */

:root {
  --rating-star-color: 255 184 0;
}
:root {
  --base-text-size: 18px;
}

@media (min-width: 2200px) {
  :root {
    --base-text-size: 24px;
  }
}

/* ============================================================================
   01  GLOBAL LINKS & BUTTONS
   ============================================================================ */

.link {
  color: #3e3d3d !important;
}

.underline,
.product-policies a,
.underline-child a {
  text-decoration-color: #3e3d3d !important;
  text-decoration-thickness: 1px;
}

.btn--primary:hover,
button.btn--primary:hover {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* Secondary / outline buttons invert on hover.
   NOTE: the shorthand `border` must come after any `border-color` or it will
   reset it. Only one border declaration here, deliberately. */
@media (hover: hover) {
  .btn:hover {
    border: 1.5px solid rgb(var(--btn-border-color));
    background: #fff;
    color: #000;
  }
}


/* ============================================================================
   02  HEADER LOGO
   ============================================================================ */

.pageheader .logo {
  padding: 4px 0 !important;
}

.pageheader .logo img,
.logo__image {
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
}

.logo-area__middle,
.logo-area__middle__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 2200px) {
  .pageheader .logo img,
  .logo__image {
    max-height: 100px !important;
  }
}


/* ============================================================================
   03  NAVIGATION & MEGA MENU
   All desktop nav rules live here in one ascending ladder.
   ============================================================================ */

/* ---- 768px: base desktop nav ---------------------------------------------- */
@media (min-width: 768px) {

  .navigation .navigation__link:hover,
  .navigation .menu-promotion__link:hover {
    color: var(--brand-accent) !important;
  }

  .navigation .navigation__link[aria-current="page"],
  .navigation .navigation__link--active {
    color: var(--brand-accent) !important;
  }

  /* -- Tier 2 container (shared shell for all dropdowns) -- */
  .navigation .navigation__tier-2-container {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    top: 100%;
    width: 100%;
    overflow: auto;
    transition: opacity 175ms ease-in, visibility 175ms;
    border-top: none;
    border-bottom: none;
    opacity: 0;
    text-align: start;
    pointer-events: none;
    background: transparent;
    margin: auto;
  }

  /* Higher specificity (3 classes) so this wins over the 100% above
     regardless of source order. */
  .navigation .navigation__item--with-children .navigation__tier-2-container,
  .navigation .navigation__item--with-children .navigation__tier-3-container {
    width: 70%;
  }

  /* -- Shop mega menu -- */
  .navigation .navigation__dropdown {
    max-width: 600px !important;
    padding: 32px 40px !important;
    margin-top: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  .navigation .navigation__columns {
    justify-content: center !important;
    gap: 20px !important;
    column-gap: 80px !important;
    padding: 8px !important;
    max-width: 100% !important;
    background-color: #fff !important;
  }

  .navigation__column {
    flex: 0 0 auto !important;
    min-width: 200px !important;
    max-width: 260px !important;
    padding-right: 20px !important;
  }

  .navigation__column-heading,
  .navigation__column > .navigation__link:first-child,
  .navigation__column .subheading,
  .menu-promotion__heading {
    display: block !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
  }

  .navigation__column .navigation__link,
  .navigation__column ul .navigation__link {
    color: #4a4a4a !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* -- Small dropdowns (Help etc.) -> 2 columns -- */
  .navigation__item--with-small-menu .navigation__tier-2-container {
    min-width: 300px !important;
    max-width: 350px !important;
    padding: 10px !important;
    background-color: #fff !important;
  }

  .navigation .navigation__item--with-small-menu > .navigation__tier-2-container .container {
    padding: 2px 5px;
  }

  .navigation__item--with-small-menu .navigation__tier-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .navigation__item--with-small-menu .navigation__tier-2 li {
    padding: 0 !important;
    margin: 0 !important;
  }

  .navigation__item--with-small-menu .navigation__tier-2 .navigation__link {
    display: block !important;
    color: #4a4a4a !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    white-space: nowrap !important;
  }

  .navigation__item--with-small-menu .navigation__tier-2 .navigation__link:hover {
    color: var(--brand-accent) !important;
  }

  /* -- Braces & Supports (3rd nav item) -> force 1 column --
     NOTE: nth-child(3) breaks if the menu order changes in Shopify admin. */
  .navigation > ul > li:nth-child(3) .navigation__tier-2-container,
  .navigation__tier-1 > li:nth-child(3) .navigation__tier-2-container {
    min-width: 220px !important;
    max-width: 260px !important;
  }

  .navigation > ul > li:nth-child(3) .navigation__tier-2,
  .navigation__tier-1 > li:nth-child(3) .navigation__tier-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 1100px: nav link size step 1 ---------------------------------------- */
@media (min-width: 1100px) {
  .navigation .navigation__link {
    font-size: 20px !important;
  }
}

/* ---- 2200px: nav link size step 2 + wider dropdown cards ----------------- */
@media (min-width: 2200px) {

  /* 32px with 8 top-level items is tight on a centred-logo header. If items
     start wrapping, drop to 26px rather than reducing the item spacing. */
  .navigation .navigation__link {
    font-size: 32px !important;
  }

  .navigation .navigation__dropdown {
    max-width: 1100px !important;
    padding: 48px 60px !important;
  }

  .navigation__column {
    min-width: 320px !important;
    max-width: 460px !important;
  }

  .navigation__column .navigation__link,
  .navigation__column ul .navigation__link {
    font-size: 32px !important;
  }

  /* Headings are currently SMALLER than the links they head (20px vs 32px).
     Raise to ~24px if that inversion looks wrong on the real screen. */
  .navigation__column-heading,
  .navigation__column .subheading,
  .menu-promotion__heading {
    font-size: 20px !important;
  }

  .navigation__item--with-small-menu .navigation__tier-2-container {
    min-width: 560px !important;
    max-width: 720px !important;
    padding: 24px !important;
  }

  .navigation__item--with-small-menu .navigation__tier-2 .navigation__link {
    font-size: 22px !important;
  }

  .utility-bar {
    font-size: 40px;
  }
}


/* ============================================================================
   04  TYPOGRAPHY SCALE
   Cross-component heading / body sizes, all in one ascending ladder so the
   steps are visible side by side.

   REMOVED: bare `.rte` from the 2200px body-text rule. It is a global class
   and was setting the footer brand paragraph to 44px. Scope any new body-text
   rule to a section (e.g. `.section-rich-text .rte`), never bare `.rte`.
   ============================================================================ */

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
  .text-overlay__title {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
  }
}

/* ---- 768px -------------------------------------------------------------- */
@media (min-width: 768px) {
  .text-overlay__title {
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* ---- 1000px ------------------------------------------------------------- */
/* @media (min-width: 1000px) {
  .text-overlay__title,
  .image-overlay__title {
    font-size: 60px !important;
    font-weight: 400 !important;
  } */

  .section-heading,
  h2.majortitle {
    font-size: 40px !important;
  }
}

/* ---- 1100px ------------------------------------------------------------- */
@media (min-width: 1100px) {
  #section-id-template--28433770545527__16117511238528a364 .testimonial__blockquote,
  .testimonial__author {
    font-size: 30px;
    font-weight: 500 !important;
  }
}

/* ---- 2200px ------------------------------------------------------------- */
@media (min-width: 2200px) {

  /* .text-overlay__title,
  .image-overlay__title {
    font-size: 80px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  } */
.text-overlay--products .slide-show--product-cards-portrait {
    --slideshow-width: 500px;
}
  .text-overlay__subheading,
  .image-overlay__subheading,
  .subheading {
    font-size: 40px !important;
  }

  .text-overlay__rte p,
  .text-overlay__text p,
  .image-with-text__text p {
    font-size: 44px !important;
    line-height: 1.6 !important;
  }

  /* .section-heading,
  .rich-text__heading,
  h2.majortitle {
    font-size: 44px !important;
  } */

  .btn,
  .text-overlay .btn {
    font-size: 15px !important;
    padding: 16px 32px !important;
  }
  #section-id-template--28433770545527__16117511238528a364 .testimonial__blockquote,
  .testimonial__author {
    font-size: 30px;
    font-weight: 500 !important;
  }
}


/* ============================================================================
   05  LAYOUT CONTAINERS

   WARNING: both rules below remove Symmetry's width constraints site-wide.
   `container--reading-width: 100%` means article and policy text runs the full
   page width on large monitors, which is why the 2200px `.reading-width` cap
   below was added as a patch. The cleaner fix is theme setting
   max_page_width (1900-2000px) plus leaving reading-width alone.
   ============================================================================ */

.container {
  max-width: 100%;
}


/* Default: pages run full width */
.container.container--reading-width,
.container .shopify-policy__container {
  max-width: 100%;
  box-sizing: content-box;
}

/* Exceptions: long-form legal/info pages keep a readable measure.
   body + 2 classes beats the rule above without !important. */
body.template-suffix-privacy-policy .container.container--reading-width,
body.template-suffix-return-policy .container.container--reading-width,
body.template-suffix-delivery-information .container.container--reading-width {
  max-width: 1400px;
  margin-inline: auto;
}

.page-section-spacing {
  margin-top: 28px !important;
  margin-bottom: 10px !important;
}

@media (min-width: 2200px) {
  /* Verify `.reading-width` exists in Symmetry 8.3 — it may be a no-op.
     `.container--reading-width` is the class the theme actually ships. */
  .reading-width {
    max-width: 1600px !important;
    margin-right: auto;
    margin-left: auto;
  }
}


/* ============================================================================
   06  HOMEPAGE COLLECTION CARDS & SECTION-SPECIFIC OVERRIDES
   ============================================================================ */

@media (max-width: 767px) {
  .text-overlay__inner--pad-large {
    padding: 20px !important;
  }
}

@media (min-width: 768px) {
  .text-overlay__inner--pad-large {
    padding: 20px !important;
  }

  .text-overlay__inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 800px) {
  .text-overlay__inner--pad-large {
    padding: 24px !important;
  }
}
.text-column__image {
    margin-right: auto;
    margin-left: 0;
} 
@media (min-width: 2200px) {

  /* Text column image cap — homepage */
  #section-id-template--28433770545527__1617292342c63ff855 .text-column__image {
    max-width: 1000px !important;
  }

 /* Remove the 700px image-overlap cap on two image-with-text sections
     (Sleep Eye Mask + one other) */
  #shopify-section-template--28433770545527__1521034575223 .image-overlap,
  #shopify-section-template--28433770545527__1521035976582 .image-overlap {
    max-width: 100% !important;
  }
}


/* ============================================================================
   07  GALLERIES
   Section IDs are template-specific: duplicating the homepage template will
   invalidate these selectors.
   ============================================================================ */

@media (max-width: 767px) {
  .gallery--height-fixed .gallery__item,
  .gallery--height-fixed .gallery__image,
  .gallery--height-fixed .gallery__item img {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
  }
}

@media (min-width: 768px) {

  /* Gallery 1 — Best Sellers row, portrait cards */
  #section-id-template--28433770545527__1619015739944f86f6 .gallery__item,
  #section-id-template--28433770545527__1619015739944f86f6 .gallery__image,
  #section-id-template--28433770545527__1619015739944f86f6 .gallery__item img {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    max-height: 800px !important;
    object-fit: cover !important;
  }

  /* Gallery 2 — landscape row */
  #section-id-template--28433770545527__gallery_3HQxcH .gallery__item,
  #section-id-template--28433770545527__gallery_3HQxcH .gallery__image,
  #section-id-template--28433770545527__gallery_3HQxcH .gallery__item img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}


/* ============================================================================
   08  PRODUCT PAGE
   ============================================================================ */

.product-title {
  margin: 0 0 0.5em;
  font-size: 28px;
  font-weight: 400;
}

.product-price--large .price__default {
  font-size: 24px !important;
  font-weight: 400;
}

.price-container {
  margin-bottom: 10px;
}

.product-inventory {
  color: #000 !important;
  font-size: 12px;
}

.opt-label {
  min-width: 50px;
  min-height: 50px;
  margin: 8px 8px 0 0;
  padding: 5px 7px;
  border: 1px var(--input-border-color) solid;
  border-radius: calc(var(--btn-border-radius) + max(0px, var(--btn-border-radius) - 3px));
}

.product-form .quantity-submit-row .quantity-submit-row__submit {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Swatch "+N more" label. Was declared identically at 768px and 2200px;
   the 2200px copy was redundant and has been removed. */
@media (min-width: 768px) {
  .product-block-options__more-label {
    margin: 0 7px 12px 4px;
    line-height: 14px;
    font-size: 14px !important;
  }
}

@media (min-width: 2200px) {
  .product-block .product-block__title,
  .product-info__title {
    font-size: 30px !important;
  }

  .product-price,
  .product-block .price {
    font-size: 30px !important;
  }
}


/* ============================================================================
   09  RATINGS & JUDGE.ME REVIEWS  —  STANDARD GRID CARDS
   Replaces the previous carousel-based section 09.

   Judge.me ships two class systems: newer .jm-* (Vue) and legacy .jdgm-*.
   Both are targeted throughout.

   NOT achievable in CSS (configure in the Judge.me dashboard instead):
     - Review photos  -> enable photo review requests; needs customer uploads
     - "Verified" badge -> Judge.me settings > verified badges
     - Star position within the card is reordered below via flex `order`,
       but the underlying markup order is set by the app.

   VERIFY BEFORE COMMITTING: the grid container class. Inspect the element
   wrapping the review cards and confirm it is .jm-review-widget__reviews or
   .jdgm-rev-widg__reviews. Judge.me renames these between versions.
   ============================================================================ */


/* ---- Star colour -------------------------------------------------------- */
.jdgm-star,
.spr-icon-star {
  color: #ffb800 !important;
}

.jm-star-rating__font-icon,
.jdgm-star {
  font-size: 1em !important;
}

.cc-rating-stars__svg {
  width: 1em;
  height: 1em;
  font-size: 0.75em !important;
  fill: #ffb800 !important;
  vertical-align: top;
}

.cc-rating-custom-caption {
  line-height: 1.7em;
  white-space: nowrap;
}


/* ---- Widget container: strip padding + Judge.me's inline 1200px cap ----- */
.jm-review-widget {
  padding-block: 0 !important;
}

#judgeme_product_reviews,
.jdgm-widget,
.jdgm-review-widget,
.jdgm--done-setup-widget,
.jdgm-widget-revamp {
  max-width: var(--page-container-width, 2000px) !important;
  margin-inline: auto !important;
}


/* ============================================================================
   SUMMARY BAR — average left, histogram beside it, button right
   ============================================================================ */

.jm-review-widget__header,
.jdgm-rev-widg__header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 40px !important;
  text-align: left !important;
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
}

/* Large average score */
.jm-review-widget__average,
.jm-rating-summary__average,
.jdgm-widget-actions-wrapper .jdgm-all-reviews-rating-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 44px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Histogram takes the middle, button pushed to the far right */
.jm-rating-histogram,
.jdgm-histogram {
  flex: 1 1 320px !important;
  max-width: 480px !important;
}

.jm-review-widget__actions,
.jdgm-widget-actions-wrapper {
  margin-left: auto !important;
}


/* ============================================================================
   CARD GRID
   ============================================================================ */

.jm-review-widget__reviews,
.jm-reviews-list,
.jdgm-rev-widg__reviews {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;   /* cards size to their own content */
}
.jm-text--align-center[data-v-6d928e9f] {
    text-align: start;
}
@media (min-width: 2200px) {
  .jm-review-widget__reviews,
  .jm-reviews-list,
  .jdgm-rev-widg__reviews {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  }
}


/* ---- Card shell: left-aligned, no forced height ------------------------- */
.jm-review-card,
.jm-paginated-reviews__review,
.jdgm-rev {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  height: auto !important;
  min-height: 0 !important;        /* was 330px for the carousel */
  background: #fff !important;
  box-shadow: 0 0 0 1px #eee !important;
  border-radius: 5px !important;
  padding: 20px !important;
  gap: 6px !important;
}


/* ---- Element order inside the card ------------------------------------- */
/* Target layout: photo, name, date, stars, title, body */
.jm-review-card__images,
.jdgm-rev__pics            { order: 0 !important; }

.jm-review-card__reviewer,
.jdgm-rev__author          { order: 1 !important; }

.jm-review-card__date,
.jdgm-rev__timestamp       { order: 2 !important; }

.jm-review-card__stars,
.jm-star-rating,
.jdgm-rev__rating          { order: 3 !important; }

.jm-review-card__title,
.jdgm-rev__title           { order: 4 !important; }

.jm-review-card__content,
.jdgm-rev__body            { order: 5 !important; }


/* ---- Card typography: left-aligned, theme font ------------------------- */
.jm-review-card__reviewer,
.jdgm-rev__author {
  width: auto !important;
  margin-top: 0 !important;        /* carousel pinned this to the bottom */
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #111 !important;
  text-align: left !important;
}

/* The carousel added an em-dash before the name; not wanted in cards */
.jdgm-rev__author::before,
.jdgm-carousel-item__reviewer::before {
  content: none !important;
}

.jm-review-card__date,
.jdgm-rev__timestamp {
  display: block !important;       /* was hidden for the carousel */
  font-size: 12px !important;
  color: #888 !important;
  text-align: left !important;
}

.jm-review-card__stars,
.jdgm-rev__rating {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 2px 0 !important;
}

.jm-review-card__title,
.jdgm-rev__title {
  font-family: inherit !important;  /* was Georgia serif */
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: left !important;
  margin: 0 !important;
}

.jm-review-card__content,
.jm-review-card__content .jm-text,
.jdgm-rev__body {
  font-family: inherit !important;  /* was Georgia serif */
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  text-align: left !important;
  margin: 0 !important;
}


/* ---- Review photos (only render once customers upload them) ------------ */
.jm-review-card__images,
.jdgm-rev__pics {
  width: 100% !important;
  margin-bottom: 10px !important;
}

.jm-review-card__images img,
.jdgm-rev__pic-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}


/* ---- Filters / sort row ------------------------------------------------ */
.jm-reviews-toolbar,
.jdgm-rev-widg__sort-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
/* ============================================================================
   10  FOOTER
   ============================================================================ */

.section-footer__row--blocks {
  padding-top: 30px;
  padding-bottom: 10px;
}

.section-footer__row-lower {
  padding-top: 20px;
  padding-bottom: 16px;
  font-size: var(--smaller-text-size-1);
  line-height: 1.4em;
}

.section-footer__text-block__content,
.section-footer__text-block .rte,
.section-footer__text-block p {
  text-align: left !important;
}

.section-footer__text-block__image {
  text-align: center !important;
  width: 100% !important;
}

.section-footer__text-block__image .theme-img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .section-footer__row--blocks {
    margin-bottom: -20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-footer__row-lower {
    flex-wrap: nowrap;
    padding-top: 20px;
    padding-bottom: 16px;
  }


  @media (min-width: 1600px) {
  .section-footer__text,
  .section-footer__row__col ul a {
    font-size: 20px !important;
  }
  .section-footer__title {
    font-size: 24px !important;
  }

  /* Distribute space as column width, not as gaps */
  .section-footer__row--blocks {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 60px !important;
    justify-content: stretch !important;
  }

  /* Stop the columns sizing themselves to their content */
  .section-footer__row__col {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
  }

  /* Uncap the text blocks so paragraphs fill their column */
  .section-footer__text,
  .section-footer__text-block__content {
    max-width: none !important;
  }
}

@media (min-width: 2200px) {
  /* Brand paragraph + address block */
  .section-footer__text {
    font-size: 28px !important;
    line-height: 1.6 !important;
  }

  /* Column headings: About / Shop / Newsletter */
  .section-footer__title {
    font-size: 28px !important;
  }

  /* Menu links inside the footer columns */
  .section-footer__row__col ul a {
    font-size: 28px !important;
    line-height: 1.9 !important;
  }

  /* Newsletter form */
  .section-footer .signup-form input[type="email"] {
    font-size: 28px !important;
    padding: 14px 16px !important;
  }
  .section-footer .signup-form button {
    font-size: 28px !important;
    padding: 14px 28px !important;
  }

  /* Bottom strip: copyright, payment icons, language selector */
  .section-footer__row-lower {
    font-size: 16px !important;
  }

  /* Footer logo */
  .section-footer__text-block__image .theme-img {
    max-width: 180px !important;
  }

  /* Social icons */
  .section-footer .social-icons svg,
  .section-footer .social-icons .icon {
    width: 22px !important;
    height: 22px !important;
  }
  }
}

/* ============================================================================
   11  COLLECTION / PAGE HEADER BANNER HEIGHT
   Height comes from padding on .text-overlay inside the page header.
   Scoped to .page-header--padded-huge so homepage collection cards
   (which share .text-overlay) are untouched.
   ============================================================================ */

@media (min-width: 2000px) {
  .page-header--with-background .text-overlay,
  .page-header--padded-huge .text-overlay {
    padding-top: clamp(400px, 10vw, 320px);
    padding-bottom: clamp(500px, 10vw, 420px);
  }
}

/* ============================================================================
   12  PER-PAGE OVERRIDES
   Scoped by Symmetry's body.template-suffix-* class, which is output
   automatically for any page using a custom template.
   ============================================================================ */



@media (min-width: 768px) {
    .product-info .product-column-right {
        flex: 0 0 auto;
        width: calc(50% - 44px);
        max-width: 800px;
        margin-inline-start: 44px;
    }
}
/
/* @media (min-width: 1040px) {
  .product-info {
    justify-content: flex-start;   /* centre is what pushed space to the sides */
    /* align-items: flex-start;
    gap: 40px;
  } */

  /* .product-info .media-gallery-size-small {
    flex: 0 0 30%;
    max-width: 30%;
  } */

  /* flex: 1 means "take everything left over" — no gaps possible */
  /* .product-info .media-gallery-size-small + .product-column-right {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  } */
} */
@media (min-width: 1600px) {
  body.template-suffix-contact .slim-column-left-layout {
    max-width: 1500px;
    margin-inline: auto;
  }
  body.template-suffix-contact .slim-column-left-layout > .column:first-child {
    width: 800px;
    margin-inline-end: 80px;
  }
  body.template-suffix-contact .account-form.righty-form {
    max-width: none;
    flex: 1 1 auto;
  }
  @media (min-width: 1600px) {
  .product-column-right .product-block {
    min-width: 200px;
  }
  .product-column-right .product-block__title {
    font-size: 15px;
    line-height: 1.35;
  }
}
  /* Section 12 — product page columns on large desktop */
@media (min-width: 2200px) {
  .product-column-right,
  .product-form {
    max-width: 760px;
  }
}
}
/* TODO (2200px): now that bare `.rte` no longer inflates the footer to 44px,
   the brand paragraph and the About/Shop link lists will render at theme
   default size. If they look too small on the 2788px screen, add a modest
   scoped bump here — e.g. .section-footer__text-block__content { font-size:
   18px } and .section-footer .navigation__link { font-size: 16px } — rather
   than reaching for a global class again. */