:root {
  --s5-bg: #F7F5F0;
  --s5-surface: #FFFFFF;
  --s5-ink: #1C1815;
  --s5-ink-soft: #504E4A;
  --s5-accent: #FCB424;
  --s5-accent-gold: #FFCD05;
  --s5-line: #EDEFF2;
}

.s5-buybox {
  background: var(--s5-bg);
  border-radius: 16px;
  padding: 26px 24px;
  margin: 22px 0;
}

.s5-buybox table.variations,
.s5-buybox table.variations tbody,
.s5-buybox table.variations tr,
.s5-buybox table.variations th,
.s5-buybox table.variations td {
  all: revert;
  display: block;
  width: 100%;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.s5-buybox table.variations tr + tr {
  margin-top: 22px !important;
}

.s5-buybox th.label label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--s5-ink);
  margin-bottom: 10px;
  display: block;
}

.s5-buybox .reset_variations {
  font-size: 13px;
  color: var(--s5-ink-soft);
  margin-left: 10px;
}

.s5-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.s5-swatch {
  position: relative;
  cursor: pointer;
  background: var(--s5-surface);
  border: 1.5px solid var(--s5-line);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 100px;
  font-family: Inter, sans-serif;
  color: var(--s5-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, padding .1s ease;
}

.s5-swatch:hover {
  border-color: var(--s5-accent);
}

.s5-swatch.is-selected {
  border: 2px solid var(--s5-accent);
  padding: 13px 19px;
  background: #FFF7E0;
  box-shadow: 0 4px 14px rgba(252, 180, 36, 0.28);
}

.s5-swatch__qty,
.s5-swatch__label {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.s5-swatch__price {
  font-size: 13px;
  color: var(--s5-ink-soft);
  line-height: 1.2;
}

.s5-swatch.is-selected .s5-swatch__price {
  color: var(--s5-ink);
  font-weight: 600;
}

.s5-swatch__stock {
  font-size: 11px;
  font-weight: 600;
  color: #3F8F5F;
  margin-top: 1px;
}

.s5-swatch__shipping {
  font-size: 10.5px;
  font-weight: 700;
  color: #2E7D4F;
  background: #E6F4EA;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 4px;
  white-space: nowrap;
}

.s5-swatch__badge {
  position: absolute;
  top: -11px;
  right: -10px;
  background: var(--s5-accent-gold);
  color: var(--s5-ink);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 10px 10px 10px 2px;
  box-shadow: 0 2px 5px rgba(28, 24, 21, 0.18);
  white-space: nowrap;
}

.s5-buybox .single_variation_wrap {
  margin-top: 24px;
}

.s5-buybox .woocommerce-variation-price .price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--s5-ink);
}

.s5-buybox .woocommerce-variation-availability {
  font-size: 13px;
  font-weight: 600;
  color: #3F8F5F;
  margin-top: 4px;
}

.s5-buybox .ct-cart-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  align-items: stretch;
}

.s5-buybox .quantity {
  border: 1.5px solid var(--s5-line);
  border-radius: 10px !important;
  background: var(--s5-surface);
}

.s5-buybox .single_add_to_cart_button {
  flex: 1;
  background: var(--s5-ink) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s5-buybox .single_add_to_cart_button:not(.disabled):hover {
  background: var(--s5-accent) !important;
  color: var(--s5-ink) !important;
}

.s5-buybox .single_add_to_cart_button.disabled {
  background: #D8D5CE !important;
  color: #8A867E !important;
  cursor: not-allowed;
}

.s5-btn-icon,
.s5-btn-arrow {
  font-size: 15px;
}

.s5-crosssell {
  margin-top: 24px;
}

.s5-crosssell__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--s5-ink);
  margin-bottom: 14px;
}

.s5-crosssell__card {
  background: var(--s5-surface);
  border: 1px solid var(--s5-line);
  border-radius: 16px;
  padding: 22px 24px;
}

.s5-crosssell__row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.s5-crosssell__img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}

.s5-crosssell__info {
  flex: 1;
  min-width: 0;
}

.s5-crosssell__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--s5-ink);
  line-height: 1.3;
}

.s5-crosssell__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--s5-ink);
  margin-top: 8px;
}

.s5-crosssell__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--s5-accent);
  color: var(--s5-ink) !important;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 20px;
  border-radius: 10px;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background-color .15s ease;
}

.s5-crosssell__btn:hover {
  background: var(--s5-accent-gold);
}

.s5-crosssell__btn.loading {
  opacity: .6;
}

.s5-swatches-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
}

/* ---------- Main product gallery image (show full product, no crop) ---------- */

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
  object-fit: contain !important;
  background: var(--s5-bg);
  aspect-ratio: 1 / 1 !important;
}

/* The source photos themselves have almost no built-in margin around the
   product (the subject nearly touches the edge of the frame), so even with
   a correct 1:1 non-cropping box the shoes look like they're bleeding off
   the edge. Add real breathing room by padding the box itself so the photo
   renders smaller, with visible background margin on every side. */
.woocommerce-product-gallery .ct-media-container {
  box-sizing: border-box !important;
  padding: 7% !important;
}

.woocommerce-product-gallery .flexy,
.woocommerce-product-gallery .flexy-view,
.woocommerce-product-gallery .flexy-items,
.woocommerce-product-gallery .flexy-item,
.woocommerce-product-gallery .ct-media-container {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ---------- Product description (OPIS) ---------- */

.s5-desc {
  max-width: 880px;
  margin: 0 auto;
  font-family: Inter, sans-serif;
  color: var(--s5-ink);
}

.s5-desc__block {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--s5-line);
}

.s5-desc__block:first-child {
  padding-top: 6px;
}

.s5-desc__block:last-child {
  border-bottom: 0;
}

.s5-desc__block--reverse {
  flex-direction: row-reverse;
}

.s5-desc__media {
  flex: 0 0 42%;
  min-width: 0;
}

.s5-desc__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--s5-bg);
}

.s5-desc__content {
  flex: 1;
  min-width: 0;
}

.s5-desc__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #B8790F;
  background: #FFF3D6;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.s5-desc__heading {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  color: var(--s5-ink);
  margin: 0 0 12px;
}

.s5-desc__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--s5-ink-soft);
  margin: 0;
}

.s5-desc__hero {
  text-align: center;
  padding: 4px 0 30px;
}

.s5-desc__hero .s5-desc__heading {
  font-size: clamp(24px, 3.2vw, 32px);
}

.s5-desc__hero .s5-desc__text {
  max-width: 560px;
  margin: 0 auto;
  font-size: 16.5px;
}

.s5-desc__specs {
  background: var(--s5-bg);
  border-radius: 16px;
  padding: 28px 30px;
  margin: 8px 0 32px;
}

.s5-desc__specs-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 16px;
}

.s5-desc__specs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.s5-desc__specs-list li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--s5-ink-soft);
  padding-left: 22px;
  position: relative;
}

.s5-desc__specs-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #3F8F5F;
  font-weight: 800;
}

.s5-desc__specs-list strong {
  color: var(--s5-ink);
}

.s5-desc__cta {
  text-align: center;
  background: linear-gradient(135deg, #FFF7E0, var(--s5-bg));
  border-radius: 20px;
  padding: 36px 24px;
  margin-top: 8px;
}

.s5-desc__cta .s5-desc__heading {
  font-size: clamp(20px, 2.6vw, 25px);
}

.s5-desc__cta .s5-desc__text {
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 680px) {
  .s5-desc__block,
  .s5-desc__block--reverse {
    flex-direction: column;
    gap: 18px;
    padding: 26px 0;
  }

  .s5-desc__media {
    flex-basis: auto;
    width: 100%;
  }

  .s5-desc__heading {
    font-size: 20px;
  }

  .s5-desc__text {
    font-size: 15px;
  }

  .s5-desc__specs-list {
    grid-template-columns: 1fr;
  }

  .s5-desc__specs {
    padding: 22px 20px;
  }

  .s5-desc__cta {
    padding: 28px 18px;
  }
}