.u-section-1 .u-sheet-1 {
  min-height: 136px;
}

.u-section-1 .u-layout-wrap-1 {
  width: 801px;
  margin: 12px auto 0 60px;
}

.u-section-1 .u-layout-cell-1 {
  min-height: 112px;
}

.u-section-1 .u-container-layout-1 {
  padding: 0;
}

.u-section-1 .u-image-1 {
  height: 106px;
  width: 163px;
  margin: -3px -1px 0;
}

.u-section-1 .u-layout-cell-2 {
  min-height: 112px;
}

.u-section-1 .u-container-layout-2 {
  padding: 22px 25px 9px 30px;
}

.u-section-1 .u-text-1 {
  font-style: italic;
  font-family: Allison;
  font-size: 3.75rem;
  font-weight: 400;
  margin: 1px auto 0;
}

.u-section-1 .u-group-1 {
  width: 118px;
  min-height: 118px;
  height: auto;
  margin: -115px 73px 10px auto;
}

.u-section-1 .u-image-2 {
  width: 117px;
  height: 117px;
  object-position: 50% 100%;
  margin: 1px auto 0 2px;
}

@media (max-width: 1199px) {
  .u-section-1 .u-group-1 {
    margin-top: 20px;
    height: auto;
  }

  .u-section-1 .u-image-2 {
    margin-left: 1px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: 122px;
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 570px;
    margin-left: 0;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 91px;
  }

  .u-section-1 .u-container-layout-1 {
    padding: 0;
  }

  .u-section-1 .u-image-1 {
    height: 94px;
    width: 144px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 91px;
  }

  .u-section-1 .u-container-layout-2 {
    padding: 0;
  }

  .u-section-1 .u-text-1 {
    width: auto;
    font-size: 3rem;
    margin-top: 19px;
    margin-right: 20px;
    margin-left: 0;
  }

  .u-section-1 .u-group-1 {
    width: 98px;
    min-height: 98px;
    margin-top: -91px;
    margin-right: 20px;
    margin-bottom: 12px;
  }

  .u-section-1 .u-image-2 {
    width: 97px;
    height: 97px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 407px;
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 540px;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 295px;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 100px;
  }

  .u-section-1 .u-group-1 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 165px;
  }

  .u-section-1 .u-layout-wrap-1 {
    margin-top: 10px;
    margin-right: initial;
    margin-left: initial;
    width: auto;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 102px;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 50px;
  }

  .u-section-1 .u-text-1 {
    font-size: 2.34375rem;
    margin-top: 0;
    margin-right: 0;
  }

  .u-section-1 .u-group-1 {
    margin-top: -152px;
    margin-right: 0;
    margin-bottom: 57px;
  }
}.u-section-2 .u-sheet-1 {
  min-height: 932px;
}

.u-section-2 .u-custom-html-1 {
  height: auto;
  min-height: 741px;
  margin: 12px auto -23px;
}

@media (max-width: 1199px) {
  .u-section-2 .u-custom-html-1 {
    margin-right: initial;
    margin-left: initial;
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-custom-html-1 {
    min-height: 915px;
    margin-bottom: 6px;
    margin-right: initial;
    margin-left: initial;
  }
}/* ===============================
   THE DIVINE — THEME TOKENS (ONE)
   =============================== */
:root{
  
  
}
/* ===============================
   CONFIGURATOR LAYOUT
   =============================== */
/* IMPORTANT:
   Use BOTH selectors so it still works if Nicepage wrappers change */
.td-layout,
.u-section-2 .u-custom-html-1 .td-layout{
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(400px, 460px) minmax(500px, 560px);
  gap: 40px;
  align-items: start;
  /* lock placement so Step 1 never "disappears" via auto-placement */
  grid-template-areas: "tdleft tdmid tdright";
}
/* prevent grid children from exploding */
.td-left, .td-mid, .td-right,
.u-section-2 .u-custom-html-1 .td-left,
.u-section-2 .u-custom-html-1 .td-mid,
.u-section-2 .u-custom-html-1 .td-right{
  min-width: 0;
}
/* lock columns to grid areas (desktop) */
.td-left,
.u-section-2 .u-custom-html-1 .td-left{ grid-area: tdleft; }
.td-mid,
.u-section-2 .u-custom-html-1 .td-mid{ grid-area: tdmid; }
.td-right,
.u-section-2 .u-custom-html-1 .td-right{ grid-area: tdright; }
/* allow scaled thumbnails to breathe */
.td-left{ overflow: visible; }
/* =========================================================
   CENTRE THE CONFIGURATOR GRID (desktop / laptop)
   ========================================================= */
@media (min-width: 992px){
  .td-layout,
  .u-section-2 .u-custom-html-1 .td-layout{
    max-width: 1400px;     /* adjust 1300–1500px to taste */
    margin-left: -100px;
    margin-right: auto;
  }
}
/* ===============================
   TABLET + MOBILE (stack)
   =============================== */
@media (max-width: 991px){
  .td-layout,
  .u-section-2 .u-custom-html-1 .td-layout{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  /* preview first */
  .td-right,
  .u-section-2 .u-custom-html-1 .td-right{
    order: -1;
    width: 100%;
  }
  /* ensure preview has real height (absolute children don't size parents) */
  .td-right .preview-stage,
  .td-builder .preview-stage{
    position: relative;
    display: block;
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 320px;
    margin: 0 auto 18px;
    overflow: hidden;
  }
}
/* ===============================
   DESIGN BUTTONS — IMAGE ONLY
   =============================== */
.td-design-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px; /* keeps Step 1 breathing room */
}
/* button wrapper */
.td-design{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* square image button */
.td-design__thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.td-design__thumb img{
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  display: block;
}
.td-design:hover .td-design__thumb{
  transform: translateY(-2px);
}
/* selected */
.td-design.is-active .td-design__thumb{
  background: rgba(0,0,0,.34);
  box-shadow:
    0 0 0 2px rgba(232,196,120,.55),
    0 0 22px rgba(232,196,120,.45);
}
/* label */
.td-design__name{
  margin-top: 8px;
  font-size: 13px;
  color: #2b2227;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* desktop: 30% larger designs (SINGLE block, not duplicated) */
@media (min-width: 992px){
  .td-design-grid{
    gap: 36px;
    margin-top: 28px;
  }
  .td-design__thumb{
    transform: scale(1.22);
    transform-origin: center;
  }
  .td-design__name{
    margin-top: 14px;
    font-size: 15px;
  }
}
/* ===============================
   PAGINATION (ONE DEFINITON)
   =============================== */
.td-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
  margin-top: 18px;
}
.td-pager button{
  appearance:none;
  border: 1px solid rgba(0,0,0,.12);
  background: #5b3f52;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.td-pager button:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(232,196,120,.22), 0 12px 24px rgba(0,0,0,.12);
}
.td-pager button.is-active,
.td-pager button[aria-current="page"]{
  background: #ffd34d;
  color: #5b3f52;
  border: 2px solid #5b3f52;
  box-shadow: 0 0 0 4px rgba(232,196,120,.28), 0 14px 28px rgba(0,0,0,.14);
}
.td-pager button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
/* ===============================
   PILLS / VIEW BUTTONS
   =============================== */
.td-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.td-pill,
.td-btn--view{
  appearance:none;
  border: 1px solid rgba(0,0,0,.12);
  background: #5b3f52;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.td-pill:hover,
.td-btn--view:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(232,196,120,.35), 0 10px 22px rgba(0,0,0,.12);
}
.td-pill.is-active,
.td-btn--view.is-active{
  background: #ffd34d;
  color: #5b3f52;
  border-color: rgba(91,63,82,.85);
  box-shadow: 0 0 0 4px rgba(232,196,120,.35), 0 12px 24px rgba(0,0,0,.14);
  transform: translateY(-1px);
}
/* keep Classic/Large/Vertical on one line */
#tdFrontLogoStep .td-pills{
  flex-wrap: nowrap;
  gap: 10px;
}
/* keep sizes on one line (incl 2XL) */
.td-pills--sizes{
  flex-wrap: nowrap;
}
/* ===============================
   ADD TO CART (primary button)
   =============================== */
#tdAddToCart,
#addToCart,
.td-btn--cart,
.td-add-to-cart,
.td-addtocart{
  appearance:none;
  border: 2px solid #5b3f52;
  background: #ffd34d;
  color: #5b3f52;
  font-weight: 800;
  cursor: pointer;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(232,196,120,.35), 0 14px 28px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
#tdAddToCart:hover,
#addToCart:hover,
.td-btn--cart:hover,
.td-add-to-cart:hover,
.td-addtocart:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(232,196,120,.45), 0 18px 34px rgba(0,0,0,.16);
}
#tdAddToCart:active,
#addToCart:active,
.td-btn--cart:active,
.td-add-to-cart:active,
.td-addtocart:active{
  transform: translateY(0);
}
/* ===============================
   STEPS SPACING
   =============================== */
.td-step{ margin-bottom: 18px; }
.td-step__label{
  display: block;
  margin: 10px 0 10px;
  font-weight: 700;
  color: #2b2227;
}
/* ===============================
   CUSTOMER SELECTIONS CARD (ONE)
   =============================== */
.td-selected-card{
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;      /* wider */
  padding: 12px 18px;    /* nicer */
  font-size: 12px;
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow:
    0 0 0 4px rgba(232,196,120,.35),
    0 12px 26px rgba(0,0,0,.10);
}
.td-selected-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin: 6px 0;
}
.td-selected-row span{ opacity: .85; }
.td-selected-row strong{ font-weight: 600; }
.td-selected-hint{
  white-space: nowrap;
}
/* ===============================
   "Your selections are:" spacing
   =============================== */
/* If it already has a wrapper class/id, this will catch it */
.td-selected-title,
.td-selected-heading,
#tdSelectedTitle{
  display:block;
  padding-top: 10px;     /* bring the heading down slightly */
}
/* Fallback: add space between the View buttons row and the heading/card */
.td-btnrow,
.td-pills + .td-selected-card{
  margin-top: 10px;
}
/* =========================================================
   PREVIEW STAGE (rosary background + internal shadow)
   ========================================================= */
.td-builder .preview-stage{
  position:relative;
  width:100%;
  max-width:600px;
  margin-top: 28px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:18px;
  border:2px solid rgba(0,0,0,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.4);
  background:linear-gradient(135deg, rgba(245,241,232,.95), rgba(227,216,200,.92));
}
/* Rosary background image layer */
.td-builder .preview-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("/the-divine/thumbnails/rosary.jpg") center/cover no-repeat; /* sizing */
  opacity:.18;
  filter:saturate(.85) contrast(.95) blur(.4px);
  transform:scale(1.03);
  mix-blend-mode:multiply;
}
/* Internal shadow / vignette overlay */
.td-builder .preview-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    inset 0 32px 70px rgba(0,0,0,.24),
    inset 0 -28px 60px rgba(0,0,0,.20),
    inset 0 0 120px rgba(0,0,0,.28);
}
/* Image layers inside the stage */
.td-builder .preview-stage .layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform, opacity;
  z-index:1;
  pointer-events:none;
}
/* Layer stacking order */
#shirtBase{z-index:2;}
#designOverlay{z-index:3;}
#logoOverlay{z-index:4;}
/* Swap/transition behaviour */
#shirtBase{
  transition:transform 1.15s ease, opacity .85s ease;
  transform-origin:50% 50%;
}
#designOverlay,
#logoOverlay{
  transition:opacity .75s ease, filter .75s ease;
}
#shirtBase.is-exiting{transform:rotateY(14deg) scale(.995);opacity:0;}
#shirtBase.is-entering{transform:rotateY(-14deg) scale(.995);opacity:0;}
#shirtBase.is-active{transform:rotateY(0deg) scale(1);opacity:1;}
#tdStage.is-swapping #designOverlay,
#tdStage.is-swapping #logoOverlay{
  opacity:.22;
  filter:saturate(.95) contrast(.98);
}

/* =========================================================
   FINAL: MOBILE/TABLET DESIGN STRIP (single row + full scroll)
   ========================================================= */
@media (max-width: 1199px){

  /* Force the design list to be a horizontal strip */
  #tdDesignGrid.td-design-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    /* iOS / touch */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain;

    /* Give room to reach the very last tile */
    box-sizing: border-box;
    padding: 6px 6px 12px !important;
    padding-right: 46px !important;
    scroll-padding-right: 46px;
    scroll-snap-type: x proximity !important;
  }

  /* Keep each tile a fixed width so scrollWidth grows */
  #tdDesignGrid.td-design-grid .td-design{
    flex: 0 0 150px !important;
  }

  /* optional spacer at the end so the last card can fully come into view */
  #tdDesignGrid.td-design-grid::after{
    content: "";
    flex: 0 0 46px;
  }

  /* Hide pager on non-desktop */
  #tdPager{ display: none !important; }

  /* Prevent any wrapper from clipping the strip */
  .u-custom-html,
  .u-sheet,
  .u-layout,
  .u-layout-row,
  .u-layout-col,
  .td-layout,
  .td-left{
    overflow-x: visible !important;
  }
}

@media (max-width: 1199px){

  /* Critical: prevent the strip from expanding wider than the viewport */
  .td-left,
  .td-layout,
  .u-custom-html,
  .u-sheet,
  .u-layout,
  .u-layout-row,
  .u-layout-col{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #tdDesignGrid{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    /* keep scroll enabled */
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

@media (max-width: 1199px){
  #tdViewMountRight .td-actions{
    display: flex;
    justify-content: center;   /* ← centre buttons */
    align-items: center;
    gap: 12px;
    margin: 8px auto 10px;     /* tighter vertical spacing */
  }
}

@media (max-width: 1199px){

  /* Reduce gap above section headings */
  .td-left h3,
  .td-left h2{
    margin-top: 6px !important;
  }

  /* Reduce gap between sections */
  .td-left .td-section{
    margin-top: 4px !important;
  }
}

@media (min-width: 1200px){
  #tdViewMountMid #tdViewFront,
  #tdViewMountMid #tdViewBack,
  #tdViewMountRight #tdViewFront,
  #tdViewMountRight #tdViewBack{
    margin-right: 12px;
  }

  /* remove margin on the last one */
  #tdViewMountMid #tdViewBack,
  #tdViewMountRight #tdViewBack{
    margin-right: 0;
  }
}