/* =========================================================
   USA Custom Handmade — shop-single.php inline styles
   Organized + de-duped
   ========================================================= */
/* -------------------------
   Product Title Formatting
   ------------------------- */
.prod-title {
  text-align: center;
}
/* -------------------------
   1) Form validation styling
   ------------------------- */
#customForm .field-error {
  border: 2px solid #d93025 !important;
  border-radius: 10px;
  padding: 10px;
  background: #fff5f5;
}
#customForm .field-error-msg {
  margin-top: 6px;
  color: #d93025;
  font-weight: 700;
  font-size: 13px;
}
/* =======================================
   Customization form readability upgrades
   ======================================= */

/* Group container */
#customForm fieldset {
  border: 1px solid #e6e6e6 !important;
  border-radius: 14px !important;
  background: #f7f7f7 !important;
  padding: 14px !important;
  margin: 14px 0 !important;
}

/* Each question block (your renderer uses [data-field]) */
#customForm [data-field] {
  border: 1px solid #e3e3e3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 12px !important;
  margin: 12px 0 !important;
}

/* Make the question title stand out a bit more */
#customForm [data-field] > div:first-child {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* Dependent questions: visually “nested” under the parent choice */
#customForm [data-field][data-parent][data-trigger] {
  background: #f3f6ff !important;
  border-left: 6px solid #c9d7ff !important;
  padding-left: 14px !important;
  margin-left: 8px !important;
}

/* Add a little separation when multiple dependent blocks appear */
#customForm
  [data-field][data-parent][data-trigger]
  + [data-field][data-parent][data-trigger] {
  margin-top: 14px !important;
}

/* Tame radio-card spacing a bit (your labels are “tiles”) */
#customForm label[style*="calc(50%"] {
  border-radius: 12px !important;
}

/* Mobile: stack the radio tiles full width */
@media (max-width: 575.98px) {
  #customForm label[style*="calc(50%"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------
   2) Price block (Lowes-like presentation)
   --------------------------------------- */
.price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.price-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.price-main {
  display: flex;
  align-items: flex-start;
  line-height: 1;
}

.price-currency {
  font-size: 18px;
  font-weight: 800;
  margin-top: 6px;
  margin-right: 2px;
}
.price-dollars {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.6px;
}
.price-cents {
  font-size: 16px;
  font-weight: 900;
  margin-top: 6px;
  margin-left: 2px;
}
.price-code {
  font-size: 12px;
  color: #6b7280;
  margin-left: 8px;
  margin-top: 14px;
}

.price-meta {
  margin-top: 6px;
  text-align: right;
}
.list-wrap {
  font-size: 14px;
  color: #6b7280;
  white-space: nowrap;
}
.list-label {
  margin-right: 6px;
  color: #6b7280;
  font-weight: 700;
}
.list-price {
  text-decoration: line-through;
  color: #6b7280;
  font-weight: 700;
}

.pct-line {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0a8a2a;
}

/* You had a diagonal "off-badge" earlier — now disabled */
.off-badge {
  display: none !important;
}

/* Special pricing note wrapper (allows raw HTML inside) */
.special-note-wrap {
  margin-top: 10px;
}

/* ---------------------------------------
   3) Price summary card + meta pills
   --------------------------------------- */
.price-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}
/* Keep price card + button + order area aligned */
.price-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px; /* controls spacing between card and button */
}

/* Make the button align to the card width */
.customize-btn {
  margin: 8px auto 10px auto;
  background: #111827;
  color: #fff;
  width: 90%;
}

/* Optional: on desktop, center the whole stack and cap width */
@media (min-width: 992px) {
  .price-card-stack {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

.price-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}
.price-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
  color: #374151;
}
.price-summary-row.total {
  font-weight: 800;
  font-size: 16px;
  color: #111827;
}

/* Meta info bar */
.meta-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 10px 0;
}
.meta-pill {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
}
.meta-pill.stock {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}
.meta-pill.out {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.meta-info-bar .meta-note {
  margin-left: 6px;
  font-weight: 600;
  color: #6b7280;
}

/* Right-side stock/production pills inside price row */
.price-side-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 75px;
  margin-top: 2px;
}
.price-side-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  white-space: nowrap;
  line-height: 1.1;
}
.price-side-pill.stock-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.price-side-pill.stock-out {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.price-side-sub {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
}

/* ---------------------------------------
   4) Deal pill overlay (on main image)
   --------------------------------------- */
.single-gallery-wrap {
  position: relative;
} /* anchor for absolute badge */
.ucm-gallery-main {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ucm-main-imgwrap {
  position: relative;
}

.single-gallery-wrap .deal-pill {
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: var(--deal-pad, 7px 12px);
  border-radius: var(--deal-radius, 6px);
  color: var(--deal-fg, #fff);
  font-size: var(--deal-font, 12px);
  font-weight: var(--deal-weight, 700);
  letter-spacing: var(--deal-letter, 0.2px);
  text-transform: var(--deal-transform, uppercase);

  z-index: 999;
  pointer-events: none;
  background: transparent;
}
.single-gallery-wrap .deal-pill[data-has-inline="1"] {
  --deal-pad: 0;
}
.single-gallery-wrap .deal-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--deal-radius, 6px);
  background: var(--deal-bg, #f97316);
  opacity: var(--deal-bg-opacity, 1);
  border: var(--deal-border, none);
  box-shadow: 0 8px 18px var(--deal-shadow, rgba(249, 115, 22, 0.25));
  backdrop-filter: var(--deal-backdrop, none);
  -webkit-backdrop-filter: var(--deal-backdrop, none);
  z-index: 0;
}
.single-gallery-wrap .deal-pill > * {
  position: relative;
  z-index: 1;
}
.single-gallery-wrap .deal-pill .deal-text {
  display: inline-block;
  background: transparent !important;
  line-height: 1;
}

.ucm-thumb-viewall > div:nth-child(1) > strong:nth-child(1) {
  display: none !important;
}
/* ---------------------------------------
   5) Tabs + details styling
   --------------------------------------- */
/* Hide XS accordion headers by default (desktop/tablet) */
.ucm-acc-hdr {
  display: none;
}

.prod-tabs {
  margin-top: 14px;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.prod-tab-head {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.prod-tab-btn {
  flex: 1;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.prod-tab-btn.active {
  background: #fff;
  border-bottom: 3px solid #111827;
}
.prod-tab-body {
  padding: 14px;
}
.prod-tab-panel {
  display: none;
}
.prod-tab-panel.active {
  display: block;
}

.feature-list {
  margin: 10px 0 0 18px;
}
.spec-group {
  font-weight: 900;
  margin-top: 12px;
}
.spec-list {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
}
.spec-list li {
  padding: 4px 0;
  border-bottom: 1px dotted #eee;
}

/* Details grid (key/value) */
.details-grid {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.detail-row {
  display: flex;
  gap: 14px;
  padding: 12px 12px;
  border-bottom: 1px solid #f1f5f9;
  align-items: flex-start;
}
.detail-row:last-child {
  border-bottom: 0;
}
.detail-k {
  width: 140px;
  min-width: 140px;
  font-weight: 900;
  color: #111827;
  font-size: 13px;
}
.detail-v {
  flex: 1;
  color: #111827;
  font-size: 13px;
  line-height: 1.45;
}
.detail-note {
  color: #6b7280;
  font-weight: 700;
  font-size: 12px;
  margin-left: 6px;
}
.detail-row.warn .detail-v {
  color: #991b1b;
  font-weight: 800;
}

/* ---------------------------------------
   6) Subtitle + materials + warnings
   --------------------------------------- */
.subtitle {
  margin: 10px 0 6px 0;
  font-size: 14px;
  line-height: 1.45;
}
.materials-used {
  margin: 0 0 8px 0;
  color: #555;
  font-size: 13px;
  line-height: 1.45;
}
.usage-warning {
  margin: 0 0 6px 0;
  color: #b00020;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}

.meta-link {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------
   7) Prop65 block
   --------------------------------------- */
.prop65-warning {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.prop65-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
}
.prop65-title {
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 12px;
  color: #111;
}
.prop65-tri {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #f5c400;
  position: relative;
  flex: 0 0 auto;
}
.prop65-tri:after {
  content: "!";
  position: absolute;
  left: -3px;
  top: 4px;
  font-weight: 900;
  font-size: 12px;
  color: #111;
}
.prop65-body {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  color: #111;
}
.prop65-items {
  padding: 0 12px 10px 12px;
  font-size: 13px;
  color: #111;
}

/* ---------------------------------------
   8) Customization UI + tag pills
   --------------------------------------- */

.custombox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.custombox-title {
  font-weight: 900;
  color: #111827;
}
.custombox-close {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  width: 36px;
  height: 32px;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}
.custombox-close:hover {
  background: #f3f4f6;
}

.tag-pills {
  margin: 10px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 12px;
  color: #333;
  background: #fafafa;
  white-space: nowrap;
}

/* ---------------------------------------
   9) Buttons (share/wishlist)
   --------------------------------------- */
.product-actions .btn,
.product-actions button {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}

/* =========================================================
   MEDIA QUERIES (Bootstrap breakpoints)
   ========================================================= */

/* =========================================================
   XS — phones: 0px–575.98px
   Fix:
   - Thumbnails UNDER main image (not left)
   - Thumbs row: 2 thumbs + View All (3 tiles)
   - Gallery can shrink to 280px
   ========================================================= */
@media (max-width: 575.98px) {
  /* Let the gallery shrink */
  .single-gallery-wrap {
    width: 100%;
    min-width: 260px;
  }

  /* =====================================================
     1) FORCE the left/right gallery layout to STACK
     ===================================================== */

  /* The gallery renderer is almost certainly outputting a flex row
     that makes thumbs on the left and image on the right.
     We nuke that and force column stacking.
  */
  .single-gallery-wrap,
  .single-gallery-wrap .ucm-gallery-main,
  .single-gallery-wrap .ucm-gallery,
  .single-gallery-wrap .product-gallery,
  .single-gallery-wrap .gallery,
  .single-gallery-wrap .gallery-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Any immediate children should be full width (except nav arrows)
   IMPORTANT: do NOT clamp the modal overlay */
  .single-gallery-wrap > *:not(.ucm-gal-modal),
  .single-gallery-wrap .ucm-gallery-main > *:not(.ucm-main-nav),
  .single-gallery-wrap .ucm-gallery > *,
  .single-gallery-wrap .product-gallery > * {
    width: 100% !important;
    max-width: 360px;
    min-width: 260px;
  }

  /* =====================================================
     2) MAIN image sizing (not huge)
     ===================================================== */
  .single-gallery-wrap .ucm-main-imgwrap {
    order: 1;
    width: 100% !important;
    max-width: 360px;
    min-width: 260px;
    margin: 0 auto !important;
  }

  .single-gallery-wrap .ucm-main-imgwrap img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 360px; /* caps “too big” feel */
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* =====================================================
     3) THUMB container: force BELOW + 3-tile row
     ===================================================== */
  .single-gallery-wrap .ucm-gallery-thumbs,
  .single-gallery-wrap .ucm-thumbs,
  .single-gallery-wrap .product-thumbs,
  .single-gallery-wrap [data-gallery-thumbs],
  .single-gallery-wrap .thumbs,
  .single-gallery-wrap .thumbnails {
    order: 2;
    width: 100% !important;
    max-width: 360px;
    min-width: 260px;
    margin: 10px auto 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 2 thumbs + view all */
    gap: 8px !important;
    align-items: stretch;
  }

  /* Thumb tiles */
  .single-gallery-wrap .ucm-gallery-thumbs a,
  .single-gallery-wrap .ucm-thumbs a,
  .single-gallery-wrap .product-thumbs a,
  .single-gallery-wrap [data-gallery-thumbs] a,
  .single-gallery-wrap .thumbs a,
  .single-gallery-wrap .thumbnails a,
  .single-gallery-wrap .ucm-gallery-thumbs button,
  .single-gallery-wrap .ucm-thumbs button,
  .single-gallery-wrap .product-thumbs button,
  .single-gallery-wrap [data-gallery-thumbs] button,
  .single-gallery-wrap .thumbs button,
  .single-gallery-wrap .thumbnails button {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
  }

  /* Thumb images */
  .single-gallery-wrap .ucm-gallery-thumbs img,
  .single-gallery-wrap .ucm-thumbs img,
  .single-gallery-wrap .product-thumbs img,
  .single-gallery-wrap [data-gallery-thumbs] img,
  .single-gallery-wrap .thumbs img,
  .single-gallery-wrap .thumbnails img {
    width: 100% !important;
    height: 78px;
    object-fit: cover;
    display: block;
  }

  /* Show ONLY first 2 thumbs + LAST (assumed View All) */
  .single-gallery-wrap
    .ucm-gallery-thumbs
    > *:not(:nth-child(-n + 2)):not(:last-child),
  .single-gallery-wrap .ucm-thumbs > *:not(:nth-child(-n + 2)):not(:last-child),
  .single-gallery-wrap
    .product-thumbs
    > *:not(:nth-child(-n + 2)):not(:last-child),
  .single-gallery-wrap
    [data-gallery-thumbs]
    > *:not(:nth-child(-n + 2)):not(:last-child),
  .single-gallery-wrap .thumbs > *:not(:nth-child(-n + 2)):not(:last-child),
  .single-gallery-wrap
    .thumbnails
    > *:not(:nth-child(-n + 2)):not(:last-child) {
    display: none !important;
  }

  /* If View All has a class, always keep it */
  .single-gallery-wrap .view-all {
    display: block !important;
  }
}

@media (max-width: 575.98px) {
  /* Hide horizontal tab bar */
  .prod-tab-head {
    display: none;
  }

  /* Make each panel look like accordion section */
  .prod-tab-panel {
    display: block !important;
    border-bottom: 1px solid #e5e7eb;
  }

  .prod-tab-body {
    padding: 20px 2px;
    font-size: 15px;
  }

  /* real accordion header button */
  .ucm-acc-hdr {
    display: block;
    width: 100%;
    padding: 14px 12px;
    font-weight: 800;
    font-size: 14px;
    background: #f9fafb;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    text-align: center;
  }

  .ucm-acc-hdr[aria-expanded="true"] {
    background: #fff;
  }

  /* collapse content by default; allow header to remain visible */
  .prod-tab-panel > * {
    display: none;
  }
  .prod-tab-panel > .ucm-acc-hdr {
    display: block;
  }

  /* open panel */
  .prod-tab-panel.active > * {
    display: block;
    padding: 3px;
  }
  .prod-tab-panel.active > .ucm-acc-hdr {
    padding: 14px 12px;
  }
}

/* =========================================================
   Special Situation: 0px–450px
   Goal:
  --All this does is change the Stock Level and Inventory from
  a column to a row in flexbox
   ========================================================= */
@media (max-width: 450px) {
  .price-side-meta {
    flex-direction: row;
  }
}
/* =========================================================
   XXS — phones: 0px–335px
   Goal:
  --Supper Small <335px stuff
   ========================================================= */
@media (max-width: 335px) {
  /*Allowing for Just a little Bit More 0 to 305 Remove some padding for small screens*/
  .container {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  /* NEW: ultra-small screens — keep accordion headers readable */
  .prod-tab-panel::before {
    font-size: 16px;
    padding: 12px 10px;
    letter-spacing: 0;
  }
  .prod-tab-panel.active {
    padding: 0;
  }
  .prod-tab-body {
    padding: 10px 1px;
    font-size: 14px;
  }
  .price-summary-row {
    font-size: 13px;
  }
  .price-summary-row.total {
    font-size: 13px;
  }
}

/* =========================================================
   When layout switches to thumbs-on-left (≥ 576px):
   show 4 thumbs + keep View All
   ========================================================= */
@media (min-width: 576px) {
  /* Hide thumb #5 and beyond, but keep the last tile (View All) */
  .single-gallery-wrap
    .ucm-gallery-thumbs
    > *:nth-child(n + 5):not(:last-child),
  .single-gallery-wrap .ucm-thumbs > *:nth-child(n + 5):not(:last-child),
  .single-gallery-wrap .product-thumbs > *:nth-child(n + 5):not(:last-child),
  .single-gallery-wrap
    [data-gallery-thumbs]
    > *:nth-child(n + 5):not(:last-child),
  .single-gallery-wrap .thumbs > *:nth-child(n + 5):not(:last-child),
  .single-gallery-wrap .thumbnails > *:nth-child(n + 5):not(:last-child) {
    display: none !important;
  }

  /* If View All has a class, this guarantees it stays visible */
  .single-gallery-wrap .view-all {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .single-gallery-wrap {
    max-width: 492px;
    margin-left: auto;
    margin-right: auto;
  }

  .single-gallery-wrap .ucm-main-imgwrap img {
    max-width: 492px;
    height: auto;
  }
}

/* =========================================================
   992px–1199.98px
   Hide thumbnail with data-idx="3"
   Result: 3 thumbnails + View All
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .single-gallery-wrap .ucm-thumb-btn[data-idx="3"] {
    display: none !important;
  }
}

.col-lg-6 {
  text-align: center;
}
/* =========================================================
   Mobile/iPhone fix: gallery Prev/Next overlap/stretch
   Your DOM: .ucm-gallery-main contains .ucm-main-imgwrap + nav divs
   ========================================================= */

/* =========================================================
   Gallery Prev / Next Navigation (final, enforced)
   Prevents iOS Safari stretch when other rules set width or both sides
   ========================================================= */

.single-gallery-wrap .ucm-gallery-main {
  position: relative;
}

.single-gallery-wrap .ucm-main-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* hard stop: keep fixed size even if theme sets width:100% */
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;

  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.18);

  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* hard stop: avoid “left + right” stretch */
  left: auto !important;
  right: auto !important;
}

.single-gallery-wrap .ucm-main-prev {
  left: 10px !important;
  right: auto !important;
}

.single-gallery-wrap .ucm-main-next {
  right: 10px !important;
  left: auto !important;
}

.single-gallery-wrap .ucm-main-nav svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* =========================================
   lightGallery — Toolbar + Controls
   ========================================= */

.lg-toolbar {
  background: rgba(0, 0, 0, 0.65) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Icons brighter + larger */
.lg-toolbar .lg-icon {
  color: #f8f8f8 !important;
  font-size: 24px !important;
  opacity: 1 !important;
}
.lg-toolbar .lg-icon:hover {
  color: #fff !important;
}

/* Specific icon sizing */
.lg-toolbar .lg-close {
  font-size: 28px !important;
  margin-right: 10px !important;
  margin-top: 8px !important;
}
.lg-toolbar .lg-zoom-in,
.lg-toolbar .lg-zoom-out {
  font-size: 22px !important;
  margin-top: 8px !important;
}

@media (max-width: 575.98px) {
  .lg-toolbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .lg-toolbar .lg-close {
    margin-right: 12px !important;
    margin-top: 10px !important;
  }
}

/* =========================================
   lightGallery — Caption "pill"
   - centered
   - edge padding
   - real gap from image
   ========================================= */

/* Edge padding + centering lane */
.lg-outer .lg-components {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Wrapper between image and thumbs */
.lg-outer .lg-sub-html-wrap {
  width: 100% !important;
  padding-top: 3px !important; /* gap above pill */
  box-sizing: border-box !important;
  text-align: center !important;
  margin: 0 !important;
}

/* The pill */
.lg-outer .lg-sub-html {
  display: inline-block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: min(92vw, 900px) !important;

  padding: 8px 14px !important;

  background: rgba(114, 61, 0, 0.85) !important;
  color: #f5f5f5 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;

  text-align: center !important;
  transform: none !important;
}

/* Real gap below image (shows as background strip otherwise) */
.lg-outer .lg-img-wrap {
  padding-bottom: 4px !important;
  box-sizing: border-box !important;
}

@media (max-width: 575.98px) {
  .lg-outer .lg-components {
    padding: 0 12px !important;
  }
  .lg-outer .lg-sub-html {
    font-size: 15px !important;
    padding: 7px 12px !important;
  }
}

/*****Added******
   =======================================
   Customization form — small screen fixes
   ======================================= */

/* 1) On small screens, remove the indent for dependent questions */
@media (max-width: 575.98px) {
  #customForm [data-field][data-parent][data-trigger] {
    margin-left: 0 !important;
    padding-left: 12px !important; /* keep normal padding */
    border-left-width: 4px !important; /* still show dependency */
  }
}

/* 2) Tighten layout starting around 340px to prevent overflow */
@media (max-width: 340px) {
  /* Reduce “card” padding */
  #customForm fieldset {
    padding: 10px !important;
  }

  #customForm [data-field] {
    padding: 10px !important;
  }

  /* Slightly smaller label text */
  #customForm [data-field] > div:first-child {
    font-size: 15px !important;
  }

  /* Radio tile sizing: slightly tighter */
  #customForm label[style*="calc(50%"] {
    padding: 10px !important;
  }

  /* Price lines under radio tiles */
  #customForm label[style*="calc(50%"] div[style*="font-size:12px"] {
    font-size: 11px !important;
  }
}

/* 3) Ultra-small phones (285px and below): last-resort tightening */
@media (max-width: 285px) {
  #customForm fieldset {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  #customForm [data-field] {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  #customForm [data-field] > div:first-child {
    font-size: 14px !important;
  }

  /* Make sure long text can wrap instead of forcing overflow */
  #customForm label,
  #customForm .help,
  #customForm small,
  #customForm p,
  #customForm div {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
/* =======================================
   Phase A — Hide per-choice info buttons
   (product_customization_choices.info_html)
   ======================================= */

#customForm .info-btn {
  display: none !important;
}

/* Also hide any hidden info payload containers if they use a class */
#customForm .info-payload,
#customForm .choice-info,
#customForm [data-info] {
  display: none !important;
}

/* =======================================
   Question-level "What is this?" toggle
   Uses product_customization_fields.info_html
   ======================================= */

/* =======================================
   Force stacked layout for question meta
   ======================================= */

#customForm .ucm-qmeta {
  margin-top: 6px;
}

#customForm .ucm-qinfo-wrap {
  display: block;
  width: 100%;
  text-align: center; /* center What is this */
  margin-bottom: 6px;
}

#customForm .ucm-qinfo-summary {
  cursor: pointer;
  font-weight: 800;
  text-decoration: underline;
  list-style: none;
  display: inline-block;
}

/* remove default marker */
#customForm details.ucm-qinfo > summary::-webkit-details-marker {
  display: none;
}

#customForm .ucm-qinfo-body {
  margin-top: 8px;
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#customForm .ucm-qhint-wrap {
  display: block;
  width: 100%;
}

#customForm .ucm-qhint {
  margin-top: 6px;
  font-size: 13px;
  color: #555;
}

/* =======================================
   Customization card validation colors
   (after submit / server-side validation)
   ======================================= */

/* Keep ONLY last occurrence of .ucm-field-card.ucm-field-ok */
#customForm .ucm-field-card.ucm-field-ok {
  border: 2px solid #1e8e3e !important;
  background: #f2fff5 !important;
}

/* =======================================
   FINAL OVERRIDES — card validation fill
   (must be near bottom of CSS)
   ======================================= */

/* Error card = red-tinted fill + inset glow */
#customForm [data-field].ucm-field-card.ucm-field-error {
  border: 2px solid #d93025 !important;
  background: #fff5f5 !important;
  box-shadow: inset 0 0 0 9999px rgba(217, 48, 37, 0.06) !important;
}

/* OK card = green-tinted fill + inset glow */
#customForm [data-field].ucm-field-card.ucm-field-ok {
  border: 2px solid #1e8e3e !important;
  background: #f2fff5 !important;
  box-shadow: inset 0 0 0 9999px rgba(30, 142, 62, 0.06) !important;
}

/* Optional: make the transition feel nicer */
#customForm [data-field].ucm-field-card {
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

/* Required field error state (KEEP LAST OCCURRENCE) */
#customForm .ucm-field-card.ucm-field-error {
  border: 4px solid #d93025 !important;
  border-radius: 12px;
  background: #fff5f5;
}

#customForm .ucm-field-card.ucm-field-error label {
  color: inherit;
}