// Roam

.custom-page-content .section-module.roam .image-wrapper .gabbyicon {
        position: absolute;
        top: 5%;
        bottom: unset;
        left: 3%;
        right: unset;
        margin: 0 auto 0;
        width: 159px !important;
    }
    

.custom-page-content .section-module.roam .text-wrapper {
    position: absolute;
    top: 8%;
    right: 3%;
    width: 56%;
    pointer-events: none;
}

.roam .text-wrapper a,
.roam .text-wrapper .module-button {
  pointer-events: auto;
}

.custom-page-content .section-module.roam h2.big {
  font-size: 32px;
  line-height: 36px;
  font-family: 'helvetica', sans-serif !important;
  font-weight: bold;
  padding-bottom: 0px !important;
  color: #ffffff;
}

.custom-page-content .section-module.roam h2.medium {
    font-size: 22px;
  line-height: 33px;
  font-family: 'helvetica', sans-serif !important;
  font-weight: bold;
  padding-bottom: 30px !important;
  color: #ffffff;
}

.roam .text-wrapper .module-button a {
         border: none;
     }
     
      .custom-page-content .section-module.roam .text-wrapper .module-button .primary-light-button{
      background-color: #ffffff;
      border: 0px;
  }
    .custom-page-content .section-module.roam .text-wrapper .module-button .primary-light-button:hover{
      background-color: rgba(255,255,255,0.50);
      border: none;
  }
  
.roam .text-wrapper .quote {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 70px;
  padding-top: 30px !important;
  padding-bottom: 20px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.roam .text-wrapper .quote img {
  display: block !important;
  height: auto;
}

/* 900 tablet */
@media only screen and (max-width: 900px) {
    
    .custom-page-content .section-module.roam .text-wrapper {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: auto; /* or set a fixed width if needed */
    width: 96%;
    text-align: center;
}
    
    .custom-page-content .section-module.roam .image-wrapper .gabbyicon {
        position: absolute;
        top: 5%;
        bottom: unset;
        left: unset;
        right: 3%;
        margin: 0 auto 0;
        width: 129px !important;
    }
    
    .roam .text-wrapper .quote {
  max-width: 70px;
}
    
    .custom-page-content .section-module.roam h2.big {
  font-size: 22px;
  line-height: 26px;
  font-family: 'helvetica', sans-serif;
  font-weight: bold;
  padding-bottom: 0px !important;
  color: #ffffff;
}

.custom-page-content .section-module.roam h2.medium {
    font-size: 16px;
  line-height: 27px;
  font-family: 'helvetica', sans-serif;
  font-weight: bold;
  padding-bottom: 30px !important;
  color: #ffffff;
}
    
    .custom-page-content .section-module.roam h2.module-title {
        font-size: 25px !important;
        line-height: 1.5em;
    }
    
    .custom-page-content .section-module.roam .br-hide {
    display: none;
    }

    .roam .text-wrapper .module-button a {
         font-size: 12px;
         width: 180px !important;
     }

}

@media only screen and (min-width: 2400px) {

.custom-page-content .section-module.roam .image-wrapper .gabbyicon {
        position: absolute;
        top: 5%;
        bottom: unset;
        left: 5%;
        right: unset;
        margin: 0 auto 0;
        width: 137px !important;
    }

}

@media only screen and (max-width: 786px) {

.custom-page-content .section-module.roam {
        margin-top: 80px !important;
    }

}




li.flex-category {
    padding-right: unset !important;
    padding-left: unset !important;
    margin-bottom: 29px;
}

li.flex-category img {
    width: 94%;
    max-width: 94%;
    line-height: 0;
}

li.flex-category a.flex-category-link {
    font-family: soleil;
    font-weight: 100;
    font-size: 18px;
    letter-spacing: .04rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    line-height: 1.4em;
    background-color: #f3f1ed;
    width: 96%;
    height: 100%;
    margin-top: 12px;
    padding: 18px 0 20px 0;
    margin: 0 auto 0;
    display: block;
    text-align: center;
    color: #414042;
}

li.flex-category a.flex-category-link .category-label {
    text-decoration: underline;
    text-transform: uppercase;
}

li.flex-category a.flex-category-link:hover .category-label {
    color: #000;
    transition: all .2s ease;
    font-size: 19px;
}

/* Vionic Rewards */

.sole-circle-banner,
.social-instagram-2024 {
    line-height: 0;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding-right: .4rem !important;
    padding-left: .4rem !important;
}

.sole-circle-banner .text-wrapper,
.social-instagram-2024 .text-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 75%;
    left: 12%;
}

.social-instagram-2024 img.ig-logo {
    max-width: 50px;
    margin: 0 auto;
}

.sole-circle-banner .text-wrapper .module-link {
    color: #414042 !important;
    background-color: transparent;
    border: 1px solid #414042;
    text-transform: uppercase;
    font: italic !important;
}

.sole-circle-banner .text-wrapper .module-link:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    border: 1px solid #414042;
    color: #414042 !important;
    transition: all .2s ease;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1);
}

.social-instagram-2024 .module-button .module-link {
    color: #fff !important;
    background-color: transparent;
    border: 1px solid #fff;
    text-transform: uppercase;
    font: italic !important;
}

.custom-page-content .social-instagram-2024 .module-button a.module-link:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    border: 1px solid #fff;
    color: #fff !important;
    transition: all .2s ease;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1);
}

.sole-circle-banner .text-wrapper .subtitle {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    font-family: 'Tenor sans';
}

.sole-circle-banner .tw-mobile {
    display: none;
}

.custom-page-content .sole-circle-banner h2.module-title {
    font-size: 25px !important;
}


@media only screen and (max-width: 768px) {

    .section-module.full-width.sole-circle-banner .image-wrapper {
        max-width: 480px !important;
    }

    .custom-page-content .section-module {
        margin: 0 auto 50px;
    }

    .custom-page-content .section-module.mobile-full-width {
        width: calc(100% + 30px) !important;
        max-width: calc(100% + 30px) !important;
        overflow: hidden;
        margin-left: -15px;
    }

}

/* Tech Section */
section.tech-section-2023 {
    background-color: #f5f3ef;
    padding: 0 !important;
    margin: 0 auto 0;
    border: 0;
}

.custom-page-content .tech-section-2023 div.seo {
    padding: 0 1.5% 0;
}

.tech-section-2023 .seo span.show-content,
.tech-section-2023 .seo span.show-content:hover,
.tech-section-2023 .seo #hide-content,
#hide-content:hover {
    font-weight: 600;
    font-family: soleil, sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px;
    cursor: pointer;
}

.custom-page-content section.tech-section-2023 img {
    max-width: 100% !important;
}

.custom-page-content .section-module.tech-section-2023,
.custom-page-content .section-module.tech-section-2023 .image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

section.tech-section-2023 .image-wrapper {
    /* background-color: #382f24; */
    line-height: 0;
}

.custom-page-content .seo h2.module-title {
    text-align: left;
    max-width: 90%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .custom-page-content .section-module.tech-section-2023 {
        margin-left: -15px;
        width: calc(100% + 30px) !important;
        max-width: calc(100% + 30px) !IMPORTANT;
        overflow: hidden;
    }
}

/* General Rules */
.custom-page-content .supporting-text {
    font-family: soleil;
    font-weight: 100;
    font-style: normal;
    color: #414042;
    font-size: 18px;
    letter-spacing: .04rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    line-height: 1.4em;
}

/* Ensure overlay section text is white (like US site) */
.section-module.slippers .module-title,
.section-module.slippers .supporting-text,
.section-module.slippers .module-link,
.section-module.willa .module-title,
.section-module.willa .supporting-text,
.section-module.willa .module-link,
.section-module.flats .module-title,
.section-module.flats .module-link,
.section-module.flats .supporting-text {
  color: #ffffff !important;
}

/* BELLA */

.bella .image-wrapper,
.monarch .image-wrapper {
    position: relative;
}

.bella .text-wrapper {
    position: absolute;
    top: 32%;
    right: 0%;
    width: 50%;
    pointer-events: none;
}

.bella .text-wrapper a,
.bella .text-wrapper .module-button {
    pointer-events: auto;
}

.bella .text-wrapper p.supporting-text {
    padding-top: 10px;
    padding-bottom: 20px;
}

.bella .text-wrapper .module-button {
    padding-bottom: 25px;
}

.bella .text-wrapper .subtext,
.bella .text-wrapper-2 .subtext {
    font-size: 12px;
    text-transform: uppercase;
}

.bella .text-wrapper-mob {
    display: none;
}

.bella .image-wrapper .viomotion {
    position: absolute;
    display: block;
    right: 13%;
    left: unset;
    bottom: 6%;
    margin: 0 auto 0;
    width: 150px !important;
}


/* 900 tablet */
@media only screen and (max-width: 900px) {

    .bella .mob-hide {
        display: none;
    }

    .bella .image-wrapper .viomotion {
        position: absolute;
        display: block;
        right: unset;
        left: 6%;
        top: unset;
        bottom: 18%;
        margin: 0 auto 0;
        width: 150px !important;
    }

    .bella .text-wrapper-mob .module-title {
        margin-top: 25px;
    }

    .bella .text-wrapper-mob .supporting-text,
    .bella .text-wrapper-mob .module-button {
        padding-bottom: 20px !important;
    }

    .bella .text-wrapper-mob .module-title {
        padding-bottom: 10px !important;
    }

    .bella .text-wrapper-mob .subtext {
        font-size: 12px;
    }

    .bella .image-wrapper {
        margin-bottom: 0px;
    }

    .bella .text-wrapper,
    .bella .text-wrapper-2 {
        display: none;
    }

    .bella .text-wrapper-mob {
        display: block;
        position: relative;
        width: 90%;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        margin: 0 auto;
        text-align: center;
    }

}



/* Monarch */


.monarch .text-wrapper {
    position: absolute;
    top: 24%;
    left: 0%;
    width: 44%;
    pointer-events: none;
}

.monarch .text-wrapper a,
.monarch .text-wrapper .module-button {
    pointer-events: auto;
}

.monarch .text-wrapper p.supporting-text {
    padding-top: 10px;
    padding-bottom: 20px;
}

.monarch .text-wrapper .module-button {
    padding-bottom: 25px;
}

.monarch .text-wrapper .subtext,
.monarch .text-wrapper-2 .subtext {
    font-size: 12px;
    text-transform: uppercase;
}

.monarch .text-wrapper-mob {
    display: none;
}

.custom-page-content .section-module.monarch .image-wrapper .wwa {
    position: absolute;
    left: 2%;
    bottom: 3%;
    margin: 0;
    padding: 0;
}


/* 900 tablet */
@media only screen and (max-width: 900px) {

    .monarch .mob-hide {
        display: none;
    }

    .monarch .text-wrapper-mob .module-title {
        margin-top: 25px;
    }

    .monarch .text-wrapper-mob .supporting-text {
        padding-bottom: 20px !important;
    }

    .monarch .text-wrapper-mob .module-title {
        padding-bottom: 10px !important;
    }

    .monarch .text-wrapper-mob .subtext {
        font-size: 12px;
    }

    .monarch .image-wrapper {
        margin-bottom: 0px;
    }

    .monarch .text-wrapper,
    .monarch .text-wrapper-2 {
        display: none;
    }

    .monarch .text-wrapper-mob {
        display: block;
        position: relative;
        width: 90%;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        margin: 0 auto;
        text-align: center;
    }

}

/* ========== 1) Banner (ROAM) absolute overlays: create a sane positioning context  ========== */

.custom-page-content .section-module.roam .image-wrapper {
  position: relative; /* ensure absolutely-positioned children are anchored to the image */
  line-height: 0;     /* kill gaps around inline images */
}

.custom-page-content .section-module.roam picture,
.custom-page-content .section-module.roam img {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop/tablet: center the text overlay instead of right bias */
.custom-page-content .section-module.roam .text-wrapper {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%); /* horizontal center */
  width: min(56%, 880px);      /* keep your 56% idea but cap it for very large screens */
  right: auto;                 /* remove right:3%; */
  text-align: center;          /* visually centered */
  pointer-events: none;
}

.roam .text-wrapper .module-button,
.roam .text-wrapper a {
  pointer-events: auto; /* keep CTAs clickable */
}

/* Keep Gabby icon anchored but avoid crowding the left edge */
.custom-page-content .section-module.roam .image-wrapper .gabbyicon {
  position: absolute;
  top: 5%;
  left: 3%;
  right: auto;
  bottom: auto;
  width: 159px !important;
}

/* Ultra-wide monitors — nudge icon a touch inward */
@media only screen and (min-width: 2400px) {
  .custom-page-content .section-module.roam .image-wrapper .gabbyicon {
    left: 5%;
    width: 137px !important;
  }
}

/* Tablet/Mobile: keep your centered block, but ensure consistent max-width */
@media only screen and (max-width: 900px) {
  .custom-page-content .section-module.roam .text-wrapper {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;  /* slightly tighter than 96% to avoid edge clipping */
    text-align: center;
  }
  .custom-page-content .section-module.roam .image-wrapper .gabbyicon {
    right: 3%;
    left: auto;
    width: 129px !important;
  }
}

/* Small phones: a little more top margin so it doesn’t kiss the header */
@media only screen and (max-width: 786px) {
  .custom-page-content .section-module.roam {
    margin-top: 80px !important;
  }
}

/* ========== 2) Category tiles grid (8-up): restore gutters + center blocks  ========== */

/* Give the .row predictable gutters. (If your theme already does this, this rule is harmless.) */
.flex-category-row.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

/* Columns: apply consistent padding as gutters */
li.flex-category.col-xs-6.col-sm-3 {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 24px; /* slightly tighter than 29px for rhythm */
}

/* Remove mixed widths that cause optical misalignment */
li.flex-category img {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Make the entire card a vertically-centered flex block */
li.flex-category a.flex-category-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* label sits near bottom */
  text-align: center;

  background-color: #f3f1ed;
  width: 100%;          /* was 96% — now matches column width */
  height: 100%;
  margin: 0;            /* kill auto margins that shift cards a px or two */
  padding: 18px 10px 20px 10px; /* add tiny horizontal breathing room */
  color: #414042;
  line-height: 1.4;
}

/* Label: keep underline + uppercase but prevent jitter on hover */
li.flex-category a.flex-category-link .category-label {
  text-decoration: underline;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}

li.flex-category a.flex-category-link:hover .category-label {
  color: #000;
  transform: translateY(-1px); /* subtle “lift” instead of bumping font-size */
}

/* ========== 3) Bottom banners: center text-wrapper within each banner  ========== */

.sole-circle-banner,
.social-instagram-2024 {
  position: relative;
  text-align: center;
  line-height: 0;
}

/* Center the overlay within each half, not with arbitrary left:12% */
.sole-circle-banner .text-wrapper,
.social-instagram-2024 .text-wrapper {
  position: absolute;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 80%;
  max-width: 720px;            /* cap so lines don’t run too long */
  margin: 0 auto;
}

/* Instagram logo size + spacing remains, just ensure it’s centered by block behavior */
.social-instagram-2024 img.ig-logo {
  max-width: 50px;
  margin: 0 auto 12px;
  display: block;
}

/* Buttons keep the same look; alignment fixed by wrapper centering */

/* ========== 4) Full-width / mobile-full-width polish ========== */

.custom-page-content .section-module.mobile-full-width {
  width: calc(100% + 30px) !important;
  max-width: calc(100% + 30px) !important;
  overflow: hidden;
  margin-left: -15px;
}

@media (max-width: 768px) {
  .custom-page-content .section-module {
    margin: 0 auto 40px; /* consistent vertical rhythm on mobile */
  }
}

/* ========== 5) General helpers for picture/img ========== */

.section-module .image-wrapper picture,
.section-module .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 0) Base: match US text flow & line breaks ---------- */
/* Handles "More Flexible" and similar phrases without weird spacing. */
.supporting-text {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  text-wrap: balance;      /* balance short multi-line copy */
  text-wrap: pretty;       /* nicer breaks around punctuation */
  word-spacing: 0;         /* neutralize inherited spacing artifacts */
  letter-spacing: normal;
}

/* Optional: protect specific two-word phrases without   */
.nowrap { white-space: nowrap; }

/* ---------- 1) Banner (ROAM) — center exactly like US ---------- */
.custom-page-content .section-module.roam .image-wrapper {
  position: relative;     /* anchor abs children */
  line-height: 0;
}
.custom-page-content .section-module.roam picture,
.custom-page-content .section-module.roam img {
  display: block; width: 100%; height: auto;
}

/* Center the overlay to image, not the page */
.custom-page-content .section-module.roam .text-wrapper {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(56%, 880px);   /* mirrors US feel on wide screens */
  text-align: center;
  pointer-events: none;
}
.roam .text-wrapper .module-button,
.roam .text-wrapper a { pointer-events: auto; }

.custom-page-content .section-module.roam .image-wrapper .gabbyicon {
  position: absolute; top: 5%; left: 3%; width: 159px !important;
}
@media (min-width: 2400px){
  .custom-page-content .section-module.roam .image-wrapper .gabbyicon{
    left: 5%; width: 137px !important;
  }
}
@media (max-width: 900px){
  .custom-page-content .section-module.roam .text-wrapper{
    top: 30%; left: 50%; transform: translate(-50%,-50%);
    width: 92%;
  }
  .custom-page-content .section-module.roam .image-wrapper .gabbyicon{
    right: 3%; left: auto; width: 129px !important;
  }
}

/* ---------- 2) Category grid — equal gutters & centered labels ---------- */
/* Ensure .row has gutters like US */
.flex-category-row.row { display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px; }

/* Restore side padding on columns (you zeroed these out) */
li.flex-category.col-xs-6.col-sm-3 {
  padding-left:12px !important; padding-right:12px !important;
  margin-bottom:24px;
}

/* Make tiles perfectly flush within their column */
li.flex-category img { display:block; width:100%; max-width:100%; }

/* Anchor label area with flex (matches US visual rhythm) */
li.flex-category a.flex-category-link{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:100%; margin:0; text-align:center;
  background:#f3f1ed; padding:18px 10px 20px;
  color:#414042; line-height:1.4;
}
li.flex-category a.flex-category-link .category-label{
  text-transform:uppercase; text-decoration:underline;
  transition: color .2s ease, transform .2s ease;
}
li.flex-category a.flex-category-link:hover .category-label{
  color:#000; transform:translateY(-1px);
}

/* ---------- 3) Flats / Willa / Slippers sections — center overlays like US ---------- */
.section-module.flats .image-wrapper,
.section-module.willa .image-wrapper,
.section-module.slippers .image-wrapper { position:relative; line-height:0; }

.section-module.flats .text-wrapper,
.section-module.willa .text-wrapper,
.section-module.slippers .text-wrapper {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  width:min(80%, 720px); margin:0 auto;
}

@media (max-width: 900px){
  .section-module.flats .text-wrapper,
  .section-module.willa .text-wrapper,
  .section-module.slippers .text-wrapper {
    width:90%;
  }
}

/* ---------- 4) Bottom banners (Rewards + Instagram) — true centering ---------- */
.sole-circle-banner, .social-instagram-2024 { position:relative; line-height:0; text-align:center; }
.sole-circle-banner .text-wrapper, .social-instagram-2024 .text-wrapper{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  width:80%; max-width:720px; margin:0 auto;
}
.social-instagram-2024 img.ig-logo{ max-width:50px; margin:0 auto 12px; display:block; }

/* ---------- 5) Full-width polish (match US’s clean edges on mobile) ---------- */
.custom-page-content .section-module.mobile-full-width{
  width:calc(100% + 30px) !important; max-width:calc(100% + 30px) !important;
  overflow:hidden; margin-left:-15px;
}
@media (max-width:768px){
  .custom-page-content .section-module { margin:0 auto 40px; }
}

/* ---------- 6) Tech + SEO block spacing (US-esque) ---------- */
section.tech-section-2023{ background:#f5f3ef; padding:0 !important; margin:0 auto; border:0; }
.custom-page-content .seo h2.module-title{ text-align:left; max-width:90%; margin:0 auto; }