/* Fix: overflow-x:hidden on html/body breaks position:sticky.
     clip behaves the same but does NOT create a scroll container. */
  html, body.okra-vintage-pdp {
    overflow-x: clip !important;
  }
  html {
    scrollbar-gutter: stable;
    background-color: #f6efe4;
  }
  html.okra-scroll-locked {
    scrollbar-gutter: auto !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.okra-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.okra-vintage-pdp #wrapper {
    overflow: visible !important;
  }

  body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
    margin-top: 54px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing {
    padding-top: 40px !important;
  }

  body.okra-vintage-pdp .flat-spacing.pb-0 {
    padding-bottom: 86px !important;
  }

   /* page background image */
  body.okra-vintage-pdp{
    position: relative;
    background: transparent !important;
  }

  body.okra-vintage-pdp::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #f6efe4;
    background-image: url("../images/texture/product-back-critical.webp");
    background-image: image-set(
      url("../images/texture/product-back-critical.avif") type("image/avif"),
      url("../images/texture/product-back-critical.webp") type("image/webp")
    );
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* soft overlay so text stays readable */
  body.okra-vintage-pdp::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(244, 237, 226, 0.72);
    pointer-events: none;
  }

  /* keep main wrappers transparent so background is visible */
  body.okra-vintage-pdp #wrapper,
  body.okra-vintage-pdp .main-header,
  body.okra-vintage-pdp .tf-breadcrumb,
  body.okra-vintage-pdp .flat-spacing,
  body.okra-vintage-pdp .okra-related-grid-style,
  body.okra-vintage-pdp .okra-related-grid-style > .container,
  body.okra-vintage-pdp .okra-related-grid-style .flat-animate-tab,
  body.okra-vintage-pdp .okra-related-grid-style .tab-content,
  body.okra-vintage-pdp .okra-related-grid-style .tab-product{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .tab-product{
    border-top-color: rgba(85, 25, 18, 0.16) !important;
    border-bottom-color: rgba(85, 25, 18, 0.16) !important;
  }

  /* Tabs section ? dark texture background matching reference */
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) {
    background: url("../images/texture/des-back.png") center center / cover no-repeat !important;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    padding-top: 24px;
    padding-bottom: 60px;
  }

  /* Pull the tab row above the textured section like the reference. */
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-tabs.style-1 {
    position: relative;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab {
    position: relative;
    top: -55px;
    z-index: 3;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: -42px auto 36px;
    padding: 10px 0 14px;
    gap: clamp(28px, 4vw, 56px);
    justify-content: center;
    overflow-x: auto;
    background: transparent !important;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #2C2C2C !important;
  }

  /* Tab labels */
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title .inner {
    color: #2C2C2C !important;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title.active .inner,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title:hover .inner {
    color: #2C2C2C !important;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title.active::after,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-menu-tab .item-title:hover::after {
    background: #2C2C2C !important;
  }

  /* Content box: golden parchment */
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab {
    border: none !important;
    padding: 36px 40px !important;
  }

  /* Text colors inside parchment box */
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab h6,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab .okra-tab-title {
    color: #2b1209 !important;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab p,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab li,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab .text_secondary {
    color: #3d1f0d !important;
  }
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
    .widget-content-tab .okra-spec-list li span {
    color: #551912 !important;
  }

  @media (max-width: 767.98px){
    body.okra-vintage-pdp .flat-spacing.pb-0 {
      padding-bottom: 48px !important;
    }

    body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) {
      padding-top: 18px;
    }
    body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
      .widget-menu-tab {
      top: -10px;
      margin: -18px auto 20px;
      gap: 24px;
      max-width: calc(100% - 16px);
      padding: 8px 0 10px;
    }
    body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)
      .widget-menu-tab .item-title {
      font-size: 13px;
    }
  }

  body.okra-vintage-pdp #header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--okra-header-z, 9990) !important;
    background: var(--okra-header-page-bg, #f8efe4) !important;
    background-color: var(--okra-header-page-bg, #f8efe4) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--okra-header-page-border, rgba(85, 25, 18, 0.12)) !important;
    box-shadow: none !important;
  }

  body.okra-vintage-pdp #header::before,
  body.okra-vintage-pdp .okra-header-shell{
    background: var(--okra-header-page-bg, #f8efe4) !important;
    background-color: var(--okra-header-page-bg, #f8efe4) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body.okra-vintage-pdp #header::after{
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  body.okra-vintage-pdp .okra-topbar{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 40px 0;
    position: relative;
    z-index: 2;
  }

  body.okra-vintage-pdp .okra-menu-toggle{
    position: absolute;
    top: 26px;
    left: 32px;
    width: 42px;
    height: 34px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    z-index: 3;
    border: 0;
    background: none;
    padding: 0;
  }

  body.okra-vintage-pdp .okra-menu-toggle span{
    display: block;
    width: 40px;
    height: 2.2px;
    margin: 0 auto;
    background: #551911;
    transition: transform .18s ease, opacity .18s ease;
  }

  body.okra-vintage-pdp .okra-menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform: translateY(5px) rotate(45deg);
  }

  body.okra-vintage-pdp .okra-menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }

  body.okra-vintage-pdp .okra-menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-5px) rotate(-45deg);
  }

  body.okra-vintage-pdp .okra-brand{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.okra-vintage-pdp .okra-brand img{
    display: block;
    width: auto;
    height: clamp(34px, 4.2vw, 56px);
    max-width: none;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(12%) sepia(65%) saturate(2508%) hue-rotate(351deg) brightness(83%) contrast(93%);
  }

  body.okra-vintage-pdp .okra-cart-link{
    position: absolute;
    top: 18px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    z-index: 3;
  }

  body.okra-vintage-pdp .okra-cart-link img{
    width: 34px;
    height: 34px;
    max-width: none;
    object-fit: contain;
    display: block;
    filter: brightness(0) saturate(100%) invert(12%) sepia(65%) saturate(2508%) hue-rotate(351deg) brightness(83%) contrast(93%);
  }

  body.okra-vintage-pdp .okra-cart-count{
    position: absolute;
    left: -4px;
    bottom: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: currentColor;
    color: inherit;
    display: none;
    font-size: 0;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
  }

.okra-bottom-accent {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 3.25rem);
    padding: 0 clamp(1rem, 3.2vw, 3rem);
    min-height: clamp(2.2rem, 3.5vw, 3rem);
    background: #361C19;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  .okra-bottom-accent a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    letter-spacing: clamp(0.12em, 0.22vw, 0.2em);
    color: rgba(246, 240, 232, 0.82);
  }

  .okra-bottom-accent a:hover {
    color: rgba(246, 240, 232, 1);
  }

  .okra-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 4, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 1200;
    touch-action: none;
    overscroll-behavior: none;
  }

  .okra-cart-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .okra-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 100vw);
    height: 100vh;
    height: 100svh;
    background: #f3eee8;
    color: #181818;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 260ms ease;
    z-index: 1201;
    display: flex;
    flex-direction: column;
  }

  .okra-cart-drawer.is-open {
    transform: translateX(0);
    box-shadow: -22px 0 48px rgba(0, 0, 0, 0.24);
  }

  .okra-framing-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(560px, 100vw);
    height: 100vh;
    height: 100svh;
    background: #ffffff;
    color: #1f1f1f;
    transform: translate3d(104%, 0, 0);
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10022;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
  }

  .okra-framing-drawer.is-open {
    transform: translate3d(0, 0, 0);
  }

  .okra-framing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    padding: 28px 28px 18px 28px;
  }

  .okra-framing-head h2 {
    margin: 0;
    font-family: "OkraFont", Arial, sans-serif;
    font-size: clamp(1.4rem, 2vw, 2.05rem);
    font-weight: 500;
    line-height: 1.2;
    color: #111111;
  }

  .okra-framing-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 28px 20px;
  }

  .okra-framing-sections {
    display: grid;
    gap: 34px;
    padding-bottom: 28px;
  }

  .okra-framing-section h3 {
    margin: 0 0 18px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #566173;
  }

  .okra-framing-section p {
    margin: 0 0 16px;
    font-family: "OkraFont", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #4c5a6b;
  }

  .okra-framing-section p:last-child {
    margin-bottom: 0;
  }

  .okra-framing-panel {
    display: none;
  }

  .okra-framing-panel.is-active {
    display: block;
  }

  .okra-framing-tabs {
    position: sticky;
    bottom: 0;
    margin: 0 -28px;
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow-x: auto;
  }

  .okra-framing-tab {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(79, 94, 112, 0.72);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }

  .okra-framing-tab.is-active {
    color: #111111;
  }

  .okra-framing-tab:focus-visible {
    outline: 1px solid #551912;
    outline-offset: 4px;
  }

  .okra-sizeguide-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(520px, 100vw);
    height: 100vh;
    height: 100svh;
    background: #f7f2eb;
    color: #20130f;
    overflow: hidden;
    transform: translate3d(104%, 0, 0);
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10023;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
  }

  .okra-sizeguide-drawer.is-open {
    transform: translate3d(0, 0, 0);
  }

  .okra-sizeguide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    padding: 28px 28px 18px 28px;
  }

  .okra-sizeguide-head h2 {
    margin: 0;
    font-family: "OkraFont", Arial, sans-serif;
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    color: #111111;
  }

  .okra-sizeguide-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 28px 28px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .okra-sizeguide-copy {
    margin: 0 0 22px;
    font-family: "OkraFont", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #4c5a6b;
  }

  .okra-sizeguide-grid {
    display: grid;
    gap: 18px;
  }

  .okra-sizeguide-card {
    padding: 18px 20px;
    border: 0;
    background: rgba(255, 255, 255, 0.68);
  }

  .okra-sizeguide-card h3 {
    margin: 0 0 8px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #551912;
  }

  .okra-sizeguide-card p,
  .okra-sizeguide-card li {
    margin: 0;
    font-family: "OkraFont", Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4c5a6b;
  }

  .okra-sizeguide-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
  }

  .okra-sizeguide-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
  }

  .okra-sizeguide-table th,
  .okra-sizeguide-table td {
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    font-family: "OkraFont", Arial, sans-serif;
    font-size: 0.95rem;
    color: #4c5a6b;
  }

  .okra-sizeguide-table th {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #23130f;
  }

  .okra-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.1);
  }

  .okra-cart-head h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #181818;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
  }

  .okra-cart-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #1A1A1A;
  }

  .okra-cart-free {
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  }

  .okra-cart-progress {
    width: 100%;
    height: 6px;
    background: rgba(24, 24, 24, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .okra-cart-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: #7f1f12;
    transition: width 220ms ease;
  }

  .okra-cart-free p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(24, 24, 24, 0.76);
  }

  .okra-cart-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px 22px 20px;
  }

  .okra-cart-items {
    display: grid;
    gap: 16px;
  }

  .okra-cart-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: start;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  }

  .okra-cart-item img {
    width: 92px;
    height: 106px;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    background: #f6f6f4;
    display: block;
    box-sizing: border-box;
  }

  .okra-cart-item-main {
    display: grid;
    gap: 10px;
  }

  .okra-cart-item-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .okra-cart-item-title a {
    color: #181818;
    text-decoration: none;
  }

  .okra-cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(24, 24, 24, 0.14);
    min-height: 36px;
  }

  .okra-cart-qty button,
  .okra-cart-qty input {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    text-align: center;
    color: #181818;
    font-size: 0.95rem;
  }

  .okra-cart-qty input {
    width: 42px;
    outline: 0;
  }

  .okra-cart-qty input::-webkit-outer-spin-button,
  .okra-cart-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .okra-cart-remove {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(24, 24, 24, 0.68);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .okra-cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .okra-cart-item-line {
    font-size: 0.88rem;
    color: rgba(24, 24, 24, 0.7);
  }

  .okra-cart-item-line--gift,
  .okra-cart-item-line[data-gift-cart-line] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
   }

  .okra-cart-empty {
    padding: 40px 0 8px;
    text-align: center;
    color: rgba(24, 24, 24, 0.68);
    line-height: 1.5;
  }

  .okra-cart-foot {
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(24, 24, 24, 0.1);
    background: #f3eee8;
  }

  .okra-cart-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #181818;
  }

  .okra-cart-note {
    margin: 0 0 16px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(24, 24, 24, 0.68);
  }

  .okra-cart-actions {
    display: grid;
    gap: 10px;
  }

  .okra-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #181818;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
  }

  .okra-cart-btn--light {
    background: transparent;
    color: #181818;
  }

  .okra-cart-btn--light:hover {
    background: transparent;
    color: #181818;
  }

  .okra-cart-btn--dark {
    background: #181818;
    color: #f3eee8;
  }

  .okra-cart-btn--dark:hover {
    background: #181818;
    color: #f3eee8;
  }

  .okra-floating-close {
    position: fixed;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background-color: var(--Surface);
    color: #181818;
    font-size: 16px;
    line-height: 1;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10024;
    will-change: left, top, transform, opacity;
    transition: transform 160ms ease, opacity 160ms ease, visibility 0s linear 160ms;
  }

  .okra-floating-close.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
    cursor: none !important;
  }

  .okra-floating-close:focus-visible {
    outline: 1px solid #551912;
    outline-offset: 4px;
  }

  /* Restore the template�s close hover animation for our drawers + floating close. */
  .okra-framing-head .icon-close-popup,
  .okra-cart-head .icon-close-popup,
  .okra-floating-close.icon-close-popup {
    transition: color 0.3s ease;
  }

  .okra-framing-head .icon-close-popup::before,
  .okra-cart-head .icon-close-popup::before,
  .okra-floating-close.icon-close-popup::before {
    transition: transform 0.3s ease;
    display: inline-block;
    transform-origin: center;
  }

  .okra-framing-head .icon-close-popup:hover,
  .okra-cart-head .icon-close-popup:hover,
  .okra-floating-close.icon-close-popup:hover {
    color: var(--Primary);
  }

  .okra-framing-head .icon-close-popup:hover::before,
  .okra-cart-head .icon-close-popup:hover::before,
  .okra-floating-close.icon-close-popup:hover::before {
    transform: rotate(90deg);
  }

  /* Match template close button (used in Bootstrap modals/offcanvas) but as a real <button>. */
  .okra-drawer-close-btn {
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
  }

  .okra-drawer-close-btn:focus-visible {
    outline: 1px solid #551912;
    outline-offset: 4px;
  }

  /* Hide the system cursor ONLY on the overlay area (not inside drawers). */
  .okra-cart-overlay.okra-cursor-close,
  .okra-cart-overlay.okra-cursor-close * {
    cursor: none !important;
  }

  /* Drawer header close button (restored). */
  .okra-drawer-close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #111111;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .okra-drawer-close:hover {
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
  }

  .okra-drawer-close:active {
    transform: translateY(0);
  }

  .okra-drawer-close:focus-visible {
    outline: 1px solid #551912;
    outline-offset: 4px;
  }

  @media (max-width: 767.98px){
    body.okra-vintage-pdp .okra-topbar{
      padding: 18px 20px 0;
    }

    body.okra-vintage-pdp .okra-menu-toggle{
      top: 18px;
      left: 16px;
      width: 32px;
      height: 26px;
      gap: 6px;
    }

    body.okra-vintage-pdp .okra-menu-toggle span{
      width: 30px;
    }

    body.okra-vintage-pdp .okra-cart-link{
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
    }

    body.okra-vintage-pdp .okra-cart-link img{
      width: 28px;
      height: 28px;
    }

    .okra-cart-drawer {
      width: 100vw;
    }

    .okra-cart-head,
    .okra-cart-free,
    .okra-cart-foot {
      padding-left: 16px;
      padding-right: 16px;
    }

    .okra-cart-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    .okra-framing-drawer {
      width: 100vw;
    }

    .okra-sizeguide-drawer {
      width: 100vw;
    }

    .okra-framing-head,
    .okra-framing-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    .okra-framing-tabs {
      margin-left: -16px;
      margin-right: -16px;
      padding-left: 16px;
      padding-right: 16px;
      gap: 20px;
    }

    .okra-sizeguide-head,
    .okra-sizeguide-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    .okra-floating-close {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }
  }

  @media (hover: none), (pointer: coarse) {
    /* On touch devices, use the header close button instead of a floating cursor-following close. */
    .okra-floating-close { display: none !important; }
  }

  .okra-pdp-gallery-arrow {
    display: none;
  }

  @media (min-width: 992px){
    body.okra-vintage-pdp .okra-pdp-sticky-scope {
      position: relative;
      overflow: visible !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack {
      position: sticky;
      top: clamp(10px, 1.2vw, 18px);
      z-index: 7;
      display: grid;
      gap: clamp(28px, 3.1vw, 48px);
      align-content: start;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack .tf-breadcrumb.okra-vintage-crumb {
      position: relative;
      top: auto;
      z-index: 2;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack .tf-breadcrumb.okra-vintage-crumb .container {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0,
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container,
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row,
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6{
      overflow: visible !important;
    }

    body.okra-vintage-pdp .container {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row{
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      column-gap: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6{
      width: 50% !important;
      max-width: 50% !important;
      flex: 0 0 50% !important;
      min-width: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child{
      display: block;
      position: relative;
    }

    body.okra-vintage-pdp .slider-scroll{
      display: flex !important;
      position: relative;
      top: auto;
      align-items: flex-start;
      justify-content: flex-start;
      min-width: 0;
      width: 100%;
      height: auto;
      min-height: 0;
      max-width: none !important;
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll{
      display: block !important;
      position: relative;
      width: 100%;
      max-width: 780px;
      height: auto !important;
      aspect-ratio: 1 / 1;
      overflow: visible !important;
      scroll-behavior: auto !important;
      min-width: 0;
      border-radius: 0;
      background: rgba(244, 237, 224, 0.55);
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item{
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      overflow: hidden;
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item.is-active{
      display: block;
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item img{
      display: block;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
    }

    body.okra-vintage-pdp .sticky-top{
      position: relative !important;
      top: 0 !important;
      width: 100%;
      height: auto;
      min-width: 0;
    }

    body.okra-vintage-pdp .tf-product-info-wrap{
      width: 100%;
      padding-top: clamp(122px, 8.2vw, 148px);
      padding-left: 0;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list{
      width: 100%;
      max-height: none !important;
      overflow: visible !important;
      margin-left: 0 !important;
      padding-left: clamp(14px, 1.2vw, 24px);
      padding-right: 0;
      scrollbar-gutter: auto;
      scroll-behavior: auto;
      overscroll-behavior: auto;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .okra-pdp-gallery-arrow {
      position: absolute;
      top: 50%;
      z-index: 4;
      width: clamp(54px, 3.8vw, 72px);
      height: clamp(54px, 3.8vw, 72px);
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #2b1209;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(42px, 3.6vw, 64px);
      line-height: 1;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%);
      transition: color 160ms ease, transform 160ms ease;
    }

    .okra-pdp-gallery-arrow--prev {
      left: clamp(-58px, -3.2vw, -38px);
    }

    .okra-pdp-gallery-arrow--next {
      right: clamp(-58px, -3.2vw, -38px);
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll:hover .okra-pdp-gallery-arrow,
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll:focus-within .okra-pdp-gallery-arrow {
      opacity: 1;
      pointer-events: auto;
    }

    .okra-pdp-gallery-arrow:hover,
    .okra-pdp-gallery-arrow:focus-visible {
      background: transparent;
      color: #551912;
      outline: 0;
      transform: translateY(-50%) scale(1.04);
    }
  }

  /* --- Large screen / 4K scaling -----------------------------------------
     Strategy:
       � Shift gallery/info column split from 50/50 ? gallery-dominant at large sizes
         so the product info panel never becomes uncomfortably wide
       � Cap info panel width and centre it in its column with left padding
       � Scale all UI primitives (text, icons, controls, gaps) with vw-clamped values
       � Scale header, breadcrumb, and footer proportionally
  ------------------------------------------------------------------------ */

  /* 1280 � 1399px: mid desktop */
  @media (min-width: 1280px) and (max-width: 1399px) {
    body.okra-vintage-pdp .container {
      max-width: min(96vw, 1380px) !important;
      width: min(96vw, 1380px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: 0 0 52% !important; max-width: 52% !important; width: 52% !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: 0 0 48% !important; max-width: 48% !important; width: 48% !important;
    }
    .okra-pdp-r {
      padding-left: clamp(18px, 2.2vw, 34px);
      padding-right: clamp(12px, 1.2vw, 22px);
      max-width: 660px;
    }
    .okra-pdp-r__title { font-size: clamp(26px, 2.8vw, 46px); margin-bottom: 12px; }
    .okra-pdp-r__price { font-size: clamp(26px, 2.4vw, 40px); margin-bottom: 14px; }
    .okra-pdp-r__badge { font-size: 11px; padding: 3px 16px; }
    .okra-pdp-r__thumb { width: 68px; height: 68px; }
    .okra-pdp-r__thumbs { gap: 10px; margin-bottom: 20px; }
    .okra-pdp-r__swatch { width: 52px; height: 52px; }
    .okra-pdp-r__swatches { gap: 9px; }
    .okra-pdp-r__desc { font-size: 13px; line-height: 1.75; margin-bottom: 16px; }
    .okra-pdp-r__row-label { font-size: 11px; margin-bottom: 9px; }
    .okra-pdp-r__sizebtn { padding: 8px 18px; font-size: 11px; }
    .okra-pdp-r__quant-stepper { height: 42px; }
    .okra-pdp-r__quant-btn { width: 42px; height: 42px; font-size: 18px; }
    .okra-pdp-r__btn { height: 50px; font-size: 11px; }
    .okra-pdp-r__ctas { gap: 12px; margin-bottom: 20px; }
    .okra-pdp-r__meta { gap: 18px; margin: 18px 0; }
    .okra-pdp-r__meta-item { font-size: 11px; gap: 8px; }
    .okra-pdp-r__subaction { font-size: 11px; }
    .okra-pdp-r__sizeguide-trigger { font-size: 11px; }
    body.okra-vintage-pdp .sticky-top .tf-product-info-list {
      padding-left: clamp(16px, 1.8vw, 28px);
    }
  }

  /* 1400 � 1919px: wide desktop baseline */
  @media (min-width: 1400px) {
    body.okra-vintage-pdp .container {
      max-width: min(93vw, 1640px) !important;
      width:     min(93vw, 1640px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* Shift to 52 / 48 so gallery gets priority */
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: 0 0 52% !important; max-width: 52% !important; width: 52% !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: 0 0 48% !important; max-width: 48% !important; width: 48% !important;
    }
    .okra-pdp-r { padding-left: clamp(20px, 1.6vw, 36px); padding-right: clamp(14px, 1.2vw, 24px); max-width: 740px; }
    .okra-pdp-r__head { padding-top: 16px; margin-bottom: 12px; }
    .okra-pdp-r__title { font-size: clamp(30px, 2.6vw, 54px); margin-bottom: 12px; }
    .okra-pdp-r__badge { font-size: 11px; padding: 3px 18px; }
    .okra-pdp-r__price { font-size: clamp(28px, 2.2vw, 44px); margin-bottom: 14px; }
    .okra-pdp-r__meta { gap: 20px; margin: 20px 0 20px; }
    .okra-pdp-r__meta-item { font-size: 12px; gap: 8px; }
    .okra-pdp-r__meta-item .icon,
    .okra-pdp-r__meta-item img { width: 20px; height: 20px; }
    .okra-pdp-r__desc { font-size: 15px; line-height: 1.78; margin-bottom: 18px; }
    .okra-pdp-r__row-label { font-size: 11px; margin-bottom: 10px; }
    .okra-pdp-r__thumb { width: 78px; height: 78px; }
    .okra-pdp-r__thumbs { gap: 10px; margin-bottom: 22px; }
    .okra-pdp-r__swatch { width: 60px; height: 60px; }
    .okra-pdp-r__swatches { gap: 9px; }
    .okra-pdp-r__materials-strip { gap: 20px; margin-bottom: 20px; }
    .okra-pdp-r__sizequant { gap: 20px; margin-bottom: 22px; }
    .okra-pdp-r__sizebtn { padding: 8px 18px; font-size: 11px; }
    .okra-pdp-r__quant-stepper { height: 40px; }
    .okra-pdp-r__quant-btn { width: 40px; height: 40px; font-size: 18px; }
    .okra-pdp-r__btn { height: 54px; font-size: 11px; }
    .okra-pdp-r__ctas { gap: 12px; margin-bottom: 22px; }
    .okra-pdp-r__subactions { margin-top: 36px; }
    .okra-pdp-r__subaction { font-size: 11px; }
    .okra-pdp-r__subaction img { width: 22px; height: 22px; }
  }

  /* Laptop widths: keep the PDP compact and avoid overlap on 15-16" screens. */
  @media (min-width: 1200px) and (max-width: 1920px) {
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container {
      max-width: min(92vw, 1640px) !important;
      width: min(92vw, 1640px) !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row {
      display: grid !important;
      grid-template-columns:
        minmax(0, clamp(500px, 40vw, 760px))
        minmax(460px, 660px);
      column-gap: clamp(72px, 5vw, 112px) !important;
      align-items: stretch !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: initial !important;
      max-width: none !important;
      width: auto !important;
      align-self: stretch !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: initial !important;
      max-width: none !important;
      width: auto !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 .tf-product-info-wrap {
      transform: none !important;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list {
      padding-left: clamp(12px, 1.1vw, 22px);
    }
  }

  /* 1921 � 2559px: QHD / large 4K */
  @media (min-width: 1921px) {
    body.okra-vintage-pdp .container {
      max-width: min(88vw, 2100px) !important;
      width:     min(88vw, 2100px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* 60 / 40 � gallery dominant */
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: 0 0 60% !important; max-width: 60% !important; width: 60% !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: 0 0 40% !important; max-width: 40% !important; width: 40% !important;
    }
    /* Header / topbar */
    body.okra-vintage-pdp .okra-topbar { padding: 16px 56px 0; }
    body.okra-vintage-pdp .okra-menu-toggle { top: 34px; left: 44px; width: 48px; height: 38px; gap: 9px; }
    body.okra-vintage-pdp .okra-menu-toggle span { width: 46px; height: 2.6px; }
    body.okra-vintage-pdp .okra-brand img { height: clamp(40px, 2.6vw, 60px); }
    body.okra-vintage-pdp .okra-cart-link { top: 22px; right: 44px; width: 48px; height: 48px; }
    body.okra-vintage-pdp .okra-cart-link img { width: 38px; height: 38px; }
    body.okra-vintage-pdp .okra-cart-count { min-width: 20px; height: 20px; font-size: 11px; }
    /* Breadcrumb */
    body.okra-vintage-pdp .okra-crumb-link,
    body.okra-vintage-pdp .okra-crumb-sep,
    body.okra-vintage-pdp .okra-crumb-current { font-size: 15px; letter-spacing: .14em; }
    /* Product info � max 760px so text stays readable */
    body.okra-vintage-pdp .tf-product-info-wrap { padding-top: 22px; }
    .okra-pdp-r { padding-left: clamp(24px, 1.4vw, 40px); padding-right: clamp(14px, 1vw, 24px); max-width: 760px; }
    .okra-pdp-r__head { padding-top: 20px; margin-bottom: 14px; }
    .okra-pdp-r__title { font-size: clamp(32px, 2.2vw, 56px); margin-bottom: 14px; }
    .okra-pdp-r__badge { font-size: 12px; padding: 4px 20px; }
    .okra-pdp-r__price { font-size: clamp(30px, 1.9vw, 46px); margin-bottom: 16px; }
    .okra-pdp-r__meta { gap: 22px; margin: 24px 0 24px; }
    .okra-pdp-r__meta-item { font-size: 13px; gap: 10px; }
    .okra-pdp-r__meta-item .icon,
    .okra-pdp-r__meta-item img { width: 22px; height: 22px; }
    .okra-pdp-r__desc { font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
    .okra-pdp-r__row-label { font-size: 12px; letter-spacing: .2em; margin-bottom: 12px; }
    .okra-pdp-r__thumb { width: 82px; height: 82px; }
    .okra-pdp-r__thumbs { gap: 12px; margin-bottom: 26px; }
    .okra-pdp-r__swatch { width: 62px; height: 62px; }
    .okra-pdp-r__swatches { gap: 10px; }
    .okra-pdp-r__materials-strip { gap: 24px; margin-bottom: 24px; }
    .okra-pdp-r__sizequant { gap: 24px; margin-bottom: 26px; }
    .okra-pdp-r__sizebtn { padding: 10px 22px; font-size: 12px; }
    .okra-pdp-r__sizebtn-group { gap: 8px; }
    .okra-pdp-r__quant-stepper { height: 46px; }
    .okra-pdp-r__quant-btn { width: 46px; height: 46px; font-size: 20px; }
    .okra-pdp-r__quant-input { font-size: 15px; }
    .okra-pdp-r__btn { height: 56px; font-size: 12px; letter-spacing: .2em; }
    .okra-pdp-r__ctas { gap: 14px; margin-bottom: 26px; }
    .okra-pdp-r__subactions { margin-top: 40px; gap: 22px; }
    .okra-pdp-r__subaction { font-size: 12px; gap: 10px; }
    .okra-pdp-r__subaction img { width: 26px; height: 26px; }
    .okra-pdp-r__sizeguide-trigger { font-size: 12px; }
    .okra-pdp-r__sizeguide-trigger img { width: 20px; height: 20px; }
  }

  /* 2560 � 3839px: true 4K */
  @media (min-width: 2560px) {
    body.okra-vintage-pdp .container {
      max-width: min(86vw, 2800px) !important;
      width:     min(86vw, 2800px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* 62 / 38 � gallery is the hero at 4K */
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: 0 0 62% !important; max-width: 62% !important; width: 62% !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: 0 0 38% !important; max-width: 38% !important; width: 38% !important;
    }
    /* Header */
    body.okra-vintage-pdp .okra-topbar { padding: 20px 72px 0; }
    body.okra-vintage-pdp .okra-menu-toggle { top: 44px; left: 58px; width: 58px; height: 46px; gap: 11px; }
    body.okra-vintage-pdp .okra-menu-toggle span { width: 56px; height: 3px; }
    body.okra-vintage-pdp .okra-brand img { height: clamp(48px, 2.4vw, 72px); }
    body.okra-vintage-pdp .okra-cart-link { top: 30px; right: 58px; width: 56px; height: 56px; }
    body.okra-vintage-pdp .okra-cart-link img { width: 46px; height: 46px; }
    body.okra-vintage-pdp .okra-cart-count { min-width: 22px; height: 22px; font-size: 12px; }
    /* Breadcrumb */
    body.okra-vintage-pdp .okra-crumb-link,
    body.okra-vintage-pdp .okra-crumb-sep,
    body.okra-vintage-pdp .okra-crumb-current { font-size: 17px; letter-spacing: .15em; }
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb { margin-top: 64px !important; }
    /* Product info � max 860px */
    body.okra-vintage-pdp .tf-product-info-wrap { padding-top: 28px; }
    .okra-pdp-r { padding-left: clamp(28px, 1.3vw, 48px); padding-right: clamp(16px, 0.9vw, 28px); max-width: 860px; }
    .okra-pdp-r__head { padding-top: 28px; margin-bottom: 18px; }
    .okra-pdp-r__title { font-size: clamp(38px, 2vw, 68px); letter-spacing: .14em; margin-bottom: 18px; }
    .okra-pdp-r__badge { font-size: 13px; padding: 7px 24px; }
    .okra-pdp-r__price { font-size: clamp(36px, 1.8vw, 58px); margin-bottom: 20px; }
    .okra-pdp-r__meta { gap: 28px; margin: 28px 0 28px; }
    .okra-pdp-r__meta-item { font-size: 14px; gap: 12px; }
    .okra-pdp-r__meta-item .icon,
    .okra-pdp-r__meta-item img { width: 26px; height: 26px; }
    .okra-pdp-r__desc { font-size: 17px; line-height: 1.82; margin-bottom: 28px; }
    .okra-pdp-r__row-label { font-size: 13px; letter-spacing: .22em; margin-bottom: 14px; }
    .okra-pdp-r__thumb { width: 96px; height: 96px; border-radius: 7px; }
    .okra-pdp-r__thumbs { gap: 14px; margin-bottom: 30px; }
    .okra-pdp-r__swatch { width: 72px; height: 72px; border-radius: 6px; }
    .okra-pdp-r__swatches { gap: 12px; }
    .okra-pdp-r__materials-strip { gap: 28px; margin-bottom: 28px; }
    .okra-pdp-r__sizequant { gap: 28px; margin-bottom: 30px; }
    .okra-pdp-r__sizebtn { padding: 12px 26px; font-size: 13px; }
    .okra-pdp-r__sizebtn-group { gap: 10px; }
    .okra-pdp-r__quant-stepper { height: 52px; }
    .okra-pdp-r__quant-btn { width: 52px; height: 52px; font-size: 24px; }
    .okra-pdp-r__quant-input { font-size: 17px; }
    .okra-pdp-r__btn { height: 64px; font-size: 13px; letter-spacing: .22em; }
    .okra-pdp-r__ctas { gap: 16px; margin-bottom: 30px; }
    .okra-pdp-r__subactions { margin-top: 48px; gap: 28px; }
    .okra-pdp-r__subaction { font-size: 13px; gap: 12px; }
    .okra-pdp-r__subaction img { width: 30px; height: 30px; }
    .okra-pdp-r__sizeguide-trigger { font-size: 13px; }
    .okra-pdp-r__sizeguide-trigger img { width: 22px; height: 22px; }
  }

  /* 3840px+: 5K / ultra-wide */
  @media (min-width: 3840px) {
    body.okra-vintage-pdp .container {
      max-width: min(84vw, 3600px) !important;
      width:     min(84vw, 3600px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
      flex: 0 0 64% !important; max-width: 64% !important; width: 64% !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:last-child {
      flex: 0 0 36% !important; max-width: 36% !important; width: 36% !important;
    }
    body.okra-vintage-pdp .okra-topbar { padding: 24px 96px 0; }
    body.okra-vintage-pdp .okra-menu-toggle { top: 60px; left: 76px; width: 72px; height: 58px; gap: 14px; }
    body.okra-vintage-pdp .okra-menu-toggle span { width: 70px; height: 3.6px; }
    body.okra-vintage-pdp .okra-brand img { height: clamp(60px, 2.2vw, 100px); }
    body.okra-vintage-pdp .okra-cart-link { top: 42px; right: 76px; width: 70px; height: 70px; }
    body.okra-vintage-pdp .okra-cart-link img { width: 58px; height: 58px; }
    body.okra-vintage-pdp .okra-cart-count { min-width: 28px; height: 28px; font-size: 14px; }
    body.okra-vintage-pdp .okra-crumb-link,
    body.okra-vintage-pdp .okra-crumb-sep,
    body.okra-vintage-pdp .okra-crumb-current { font-size: 20px; }
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb { margin-top: 82px !important; }
    body.okra-vintage-pdp .tf-product-info-wrap { padding-top: 36px; }
    .okra-pdp-r { padding-left: clamp(36px, 1.2vw, 64px); padding-right: clamp(18px, 0.8vw, 32px); max-width: 1080px; }
    .okra-pdp-r__head { padding-top: 36px; margin-bottom: 22px; }
    .okra-pdp-r__title { font-size: clamp(52px, 1.8vw, 88px); margin-bottom: 22px; }
    .okra-pdp-r__badge { font-size: 15px; padding: 6px 28px; }
    .okra-pdp-r__price { font-size: clamp(46px, 1.6vw, 76px); }
    .okra-pdp-r__meta { gap: 36px; margin: 36px 0 36px; }
    .okra-pdp-r__meta-item { font-size: 16px; gap: 14px; }
    .okra-pdp-r__meta-item .icon,
    .okra-pdp-r__meta-item img { width: 32px; height: 32px; }
    .okra-pdp-r__desc { font-size: 20px; line-height: 1.85; margin-bottom: 36px; }
    .okra-pdp-r__row-label { font-size: 15px; margin-bottom: 16px; }
    .okra-pdp-r__thumb { width: 120px; height: 120px; border-radius: 9px; }
    .okra-pdp-r__thumbs { gap: 18px; margin-bottom: 38px; }
    .okra-pdp-r__swatch { width: 90px; height: 90px; border-radius: 8px; }
    .okra-pdp-r__swatches { gap: 16px; }
    .okra-pdp-r__materials-strip { gap: 36px; margin-bottom: 36px; }
    .okra-pdp-r__sizequant { gap: 36px; margin-bottom: 38px; }
    .okra-pdp-r__sizebtn { padding: 15px 32px; font-size: 15px; }
    .okra-pdp-r__sizebtn-group { gap: 12px; }
    .okra-pdp-r__quant-stepper { height: 64px; }
    .okra-pdp-r__quant-btn { width: 64px; height: 64px; font-size: 30px; }
    .okra-pdp-r__quant-input { font-size: 20px; }
    .okra-pdp-r__btn { height: 78px; font-size: 15px; letter-spacing: .24em; }
    .okra-pdp-r__ctas { gap: 20px; margin-bottom: 38px; }
    .okra-pdp-r__subactions { margin-top: 60px; gap: 36px; }
    .okra-pdp-r__subaction { font-size: 15px; gap: 14px; }
    .okra-pdp-r__subaction img { width: 36px; height: 36px; }
    .okra-pdp-r__sizeguide-trigger { font-size: 15px; }
    .okra-pdp-r__sizeguide-trigger img { width: 28px; height: 28px; }
  }

  /* --- New Right-Side PDP Design ------------------------------- */
  .okra-pdp-r {
    padding-left: clamp(20px, 2vw, 40px); /* sole gap between gallery and info */
    padding-right: clamp(16px, 2vw, 36px);
  }
  .okra-pdp-r__head {
    margin-bottom: 14px;
    padding-top: 18px;
  }
  .okra-pdp-r__title {
    font-family: "OkraFont", Arial, sans-serif !important;
    font-size: clamp(22px, 3.6vw, 60px);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #361C19;
    line-height: 1.15;
    margin: 0 0 16px;
  }

  .okra-pdp-r__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 20px;
    background: #551912;
    border: none;
    border-radius: 10px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #ffffff;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    font-size: 0;
  }

  .okra-pdp-r__badge::before {
    content: attr(data-label);
    font-size: 10px;
    transform: translateY(1px);
  }
  /* Thumbnail strip */
  .okra-pdp-r__thumbs {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
  }
  .okra-pdp-r__thumb {
    width: 64px;
    height: 64px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    flex-shrink: 0;
    transition: border-color .2s;
  }
  .okra-pdp-r__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #f4ede0;
  }
  .okra-pdp-r__thumb.active,
  .okra-pdp-r__thumb:hover {
    border-color: #551912;
  }
  /* Price */
  .okra-pdp-r__price {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    letter-spacing: .04em;
    color: #1a1008;
    margin-bottom: 18px;
    line-height: 1;
  }
  .okra-pdp-r__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 30px 0 30px;
  }
  .okra-pdp-r__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #2b1209;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
  }
  .okra-pdp-r__meta-trigger {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }
  .okra-pdp-r__meta-trigger:focus-visible {
    outline: 1px solid #551912;
    outline-offset: 4px;
  }
  .okra-pdp-r__meta-item .icon,
  .okra-pdp-r__meta-item img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
    color: #2b1209;
  }
  .okra-pdp-r__meta-item span {
    position: relative;
    padding-bottom: 2px;
    white-space: nowrap;
  }
  .okra-pdp-r__meta-item span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: .35;
  }
  /* Description */
  .okra-pdp-r__desc {
    font-size: 14px;
    text-align: justify;
    line-height: 1.75;
    color: #3d2e22;
    text-align: justify;
    margin-bottom: 16px;
    font-family: "OkraFont", Arial, sans-serif;
  }
  /* Row label */
  .okra-pdp-r__row-label {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6b5c4e;
    margin-bottom: 10px;
  }
  .okra-pdp-r__row-label strong {
    color: #1a1008;
    font-weight: 600;
  }
  .okra-pdp-r__materials-strip {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 22px;
  }
  .okra-pdp-r__materials-side {
    flex: 0 0 min(42%, 360px);
    width: min(42%, 360px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  /* Swatches */
  .okra-pdp-r__swatches {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .okra-pdp-r__swatches input[type=radio] { display: none; }
  .okra-pdp-r__swatch {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    display: block;
    position: relative;
    transition: border-color .2s;
  }
  .okra-pdp-r__swatch span,
  .okra-pdp-r__swatch img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: cover;
  }
  .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch {
    border-color: #551912;
  }
  .okra-pdp-r__swatch:hover {
    border-color: #8a4030;
  }
  /* Size + Quantity row */
  .okra-pdp-r__sizequant {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    align-items: flex-start;
  }
  .okra-pdp-r__sizecol { flex: 1; min-width: 0; }
  .okra-pdp-r__quantcol {
    flex: 0 0 min(42%, 360px);
    width: min(42%, 360px);
  }
  .okra-pdp-r__sizebtn-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .okra-pdp-r__sizebtn-group input[type=radio] { display: none; }
  .okra-pdp-r__sizebtn {
    display: inline-block;
    padding: 7px 16px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    color: #3d2e22;
    border: 1px solid #c5b5a5;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
  }
  .okra-pdp-r__sizebtn-group input:checked + .okra-pdp-r__sizebtn {
    background: #2C2C2C;
    color: #f4ede0;
    border-color: #2C2C2C;
  }
  .okra-pdp-r__sizebtn:hover {
    border-color: #551912;
  }
  /* Quantity stepper */
  .okra-pdp-r__quant-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #c5b5a5;
    height: 43px;
    width: 100%;
  }
  .okra-pdp-r__quant-btn {
    width: 40px;
    height: 36px;
    background: none;
    border: none;
    font-size: 18px;
    color: #1a1008;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0;
    flex-shrink: 0;
  }
  .okra-pdp-r__quant-btn:hover { background: #f4ede0; }
  .okra-pdp-r__quant-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
    border: none;
    border-left: 1px solid #c5b5a5;
    border-right: 1px solid #c5b5a5;
    background: none;
    font-size: 14px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    color: #1a1008;
    height: 100%;
    outline: none;
    padding: 0;
  }
  /* CTA buttons */
  .okra-pdp-r__ctas {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  /* Under-CTA row: delivery + custom design link (matches reference). */
  .okra-pdp-r__subactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 54px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .okra-pdp-r__subaction {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    appearance: none;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2b1209;
    text-decoration: none;
    white-space: nowrap;
  }
  .okra-pdp-r__subaction img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
  }
  .okra-pdp-r__subaction--link {
    cursor: pointer;
  }
  .okra-pdp-r__subaction--link:hover,
  .okra-pdp-r__subaction--link:focus-visible {
    opacity: 0.75;
  }
  .okra-pdp-r__sizeguide-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #551912;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .okra-pdp-r__sizeguide-trigger img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
  }
  .okra-pdp-r__sizeguide-trigger:hover,
  .okra-pdp-r__sizeguide-trigger:focus-visible {
    opacity: 0.75;
  }
  .okra-pdp-r__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, color .18s;
    text-decoration: none;
    border: 1.5px solid #1a1008;
  }
  .okra-pdp-r__btn--outline {
    background: #2C2C2C;
    color: #ffffff;
  }
  .okra-pdp-r__btn--outline:hover {
    background: #1a1008;
    color: #f4ede0;
  }
  .okra-pdp-r__btn--fill {
    background: #551912;
    color: #f4ede0;
    border-color: #551912;
  }
  .okra-pdp-r__btn--fill:hover {
    background: #3d1009;
    border-color: #3d1009;
    color: #f4ede0;
  }
  /* Contact link */
  .okra-pdp-r__contact {
    display: block;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #551912;
    text-decoration: none;
    border-bottom: 1px solid #551912;
    padding-bottom: 2px;
    width: fit-content;
    margin: 60px auto 60px;
    transition: opacity .18s;
    text-align: center;
  }
  .okra-pdp-r__contact:hover { opacity: .65; }
  /* Bottom spacing so right side doesn't overlay content below */
  .okra-pdp-r {
    padding-bottom: 60px;
  }
  .okra-pdp-r__purchase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    padding: 18px 0 20px;
    margin: 0 0 22px;
    border-top: 1px solid rgba(43, 18, 9, 0.16);
    border-bottom: 1px solid rgba(43, 18, 9, 0.16);
  }

  .okra-pdp-r__price-panel {
    display: grid;
    gap: 8px;
  }

  .okra-pdp-r__price-panel[hidden] {
    display: none !important;
  }

  .okra-pdp-r__price-panel .okra-pdp-r__price {
    margin-bottom: 0;
  }

  .okra-pdp-r__price-label,
  .okra-pdp-r__price-note,
  .okra-pdp-r__quantity-copy span {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(43, 18, 9, 0.58);
  }

  .okra-pdp-r__price-note {
    color: #551912;
  }

  .okra-pdp-r__quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 18px;
  }

  .okra-pdp-r__utility {
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(43, 18, 9, 0.28);
    background: transparent;
    padding: 0 0 3px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #2b1209;
    cursor: pointer;
  }

  .okra-pdp-r__utility.is-active {
    color: #551912;
    border-bottom-color: #551912;
  }

  .okra-pdp-r__size-block {
    margin-bottom: 18px;
  }

  .okra-pdp-r__size-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(43, 18, 9, 0.18);
  }

  .okra-pdp-r__size-list input[type=radio] {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(120px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid rgba(43, 18, 9, 0.18);
    background: transparent;
    color: #2b1209;
    cursor: pointer;
  }

  .okra-pdp-r__size-name,
  .okra-pdp-r__size-price {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .okra-pdp-r__size-meta {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(43, 18, 9, 0.58);
  }

  .okra-pdp-r__size-list input[type=radio]:checked + .okra-pdp-r__sizebtn {
    box-shadow: inset 0 -2px 0 #2c2c2c;
  }

  .okra-pdp-r__size-list input[type=radio]:focus-visible + .okra-pdp-r__sizebtn {
    outline: 1px solid #551912;
    outline-offset: 3px;
  }

  .okra-pdp-r__quantity-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(43, 18, 9, 0.16);
  }

  .okra-pdp-r__quantity-panel[hidden] {
    display: none !important;
  }

  .okra-pdp-r__purchase .okra-pdp-r__quantity-panel {
    width: min(100%, 390px);
    padding: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .okra-pdp-r__quantity-copy {
    display: grid;
    gap: 6px;
  }

  .okra-pdp-r__quantity-copy strong {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2b1209;
  }

  .okra-pdp-r__gift {
    padding: 4px 0 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(43, 18, 9, 0.16);
  }

  .okra-pdp-r__gift-toggle {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0;
    cursor: pointer;
  }

  .okra-pdp-r__gift-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .okra-pdp-r__gift-switch {
    position: relative;
    width: 42px;
    height: 22px;
    border: 1px solid rgba(43, 18, 9, 0.38);
    background: transparent;
  }

  .okra-pdp-r__gift-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #2b1209;
    transition: transform .18s ease;
  }

  .okra-pdp-r__gift-toggle input:checked + .okra-pdp-r__gift-switch {
    background: #551912;
    border-color: #551912;
  }

  .okra-pdp-r__gift-toggle input:checked + .okra-pdp-r__gift-switch::after {
    background: #f4ede0;
    transform: translateX(20px);
  }

  .okra-pdp-r__gift-copy {
    display: grid;
    gap: 4px;
  }

  .okra-pdp-r__gift-copy strong {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #2b1209;
  }

  .okra-pdp-r__gift-copy small {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(43, 18, 9, 0.62);
  }

  .okra-pdp-r__gift-message {
    width: 100%;
    margin-top: 14px;
    min-height: 132px;
    padding: 14px 16px;
    border: 1px solid rgba(43, 18, 9, 0.26);
    border-radius: 0;
    background: rgba(246, 240, 232, 0.2);
    color: #2b1209;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    outline: none;
    box-shadow: none;
  }

  .okra-pdp-r__gift-message[hidden] {
    display: none !important;
  }

  .okra-pdp-r__btn.is-disabled {
    opacity: .42;
    cursor: not-allowed;
  }

  .tf-sticky-atc [data-requires-size].is-disabled {
    opacity: .42;
    cursor: not-allowed;
  }

  .okra-pdp-r__toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    padding: 11px 16px;
    background: #2b1209;
    color: #f4ede0;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .okra-pdp-r__toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (min-width: 1200px) and (max-width: 1920px) {
    body.okra-vintage-pdp .flat-spacing.pb-0 {
      padding-top: clamp(28px, 2.2vw, 40px) !important;
      padding-bottom: 112px !important;
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      width: 100%;
      max-width: 100%;
    }

    body.okra-vintage-pdp .tf-product-info-wrap {
      padding-top: clamp(58px, 4.25vw, 86px) !important;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list,
    body.okra-vintage-pdp .okra-pdp-r {
      max-width: 660px;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list {
      padding-left: clamp(12px, 0.9vw, 18px);
    }

    body.okra-vintage-pdp .okra-pdp-r {
      padding-left: clamp(12px, 0.9vw, 18px);
      padding-right: clamp(8px, 0.8vw, 14px);
      padding-bottom: 34px;
    }

    body.okra-vintage-pdp .okra-pdp-r__head {
      padding-top: 10px;
      margin-bottom: 12px;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(42px, 2.9vw, 54px);
      line-height: 1.12;
      margin-bottom: 12px;
    }

    body.okra-vintage-pdp .okra-pdp-r__badge {
      padding: 3px 16px;
      border: 1px solid #1a1008;
      border-radius: 7px;
      background: transparent;
      color: #551912;
      font-size: 10px;
      font-style: italic;
      letter-spacing: .18em;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 10px;
      margin-bottom: 18px;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 62px;
      height: 62px;
    }

    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(32px, 2.2vw, 38px);
      margin-bottom: 14px;
    }

    body.okra-vintage-pdp .okra-pdp-r__meta {
      gap: 18px;
      margin: 20px 0 18px;
    }

    body.okra-vintage-pdp .okra-pdp-r__meta-item {
      font-size: 10px;
      gap: 8px;
    }

    body.okra-vintage-pdp .okra-pdp-r__meta-item .icon,
    body.okra-vintage-pdp .okra-pdp-r__meta-item img {
      width: 17px;
      height: 17px;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: 13px;
      line-height: 1.62;
      margin-bottom: 14px;
    }

    body.okra-vintage-pdp .okra-pdp-r__row-label {
      font-size: 10px;
      margin-bottom: 8px;
    }

    body.okra-vintage-pdp .okra-pdp-r__materials-strip {
      gap: 20px;
      margin-bottom: 18px;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatches {
      gap: 8px;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: 48px;
      height: 48px;
    }

    body.okra-vintage-pdp .okra-pdp-r__sizequant {
      gap: 20px;
      margin-bottom: 18px;
    }

    body.okra-vintage-pdp .okra-pdp-r__sizebtn {
      font-size: 10px;
    }

    body.okra-vintage-pdp .okra-pdp-r__quant-stepper {
      height: 40px;
    }

    body.okra-vintage-pdp .okra-pdp-r__quant-btn {
      width: 40px;
      height: 38px;
      font-size: 17px;
    }

    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: 48px;
      font-size: 11px;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas {
      gap: 10px;
      margin-bottom: 18px;
    }

    body.okra-vintage-pdp .okra-pdp-r__subactions {
      gap: 16px;
      margin-top: 36px;
      margin-bottom: 8px;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: 10px;
      gap: 8px;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction img {
      width: 22px;
      height: 22px;
    }
  }

  /* Reference product details treatment */
  body.okra-vintage-pdp .okra-pdp-r__meta {
    display: none;
  }

  body.okra-vintage-pdp .okra-pdp-r__head {
    margin-bottom: clamp(24px, 2.4vw, 42px);
  }

  body.okra-vintage-pdp .okra-pdp-r__title {
    max-width: 100%;
    font-size: clamp(46px, 4vw, 74px);
    line-height: 1.05;
    letter-spacing: .16em;
    margin-bottom: clamp(28px, 3vw, 54px);
    white-space: nowrap;
  }

  body.okra-vintage-pdp .okra-pdp-r__badge {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #1a1008;
    border-radius: 5px;
    background: #64190f;
    color: #f6efe3;
    font-size: 14px;
    font-style: normal;
    letter-spacing: .04em;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumbs {
    gap: clamp(28px, 3vw, 46px);
    margin: clamp(28px, 3vw, 48px) 0 clamp(42px, 4vw, 70px);
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb {
    width: clamp(58px, 5.8vw, 108px);
    height: clamp(58px, 5.8vw, 82px);
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb.active {
    border: 0;
    outline: 1px solid rgba(43, 18, 9, .24);
    outline-offset: 6px;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb img {
    border-radius: 0;
    object-fit: contain;
  }

  body.okra-vintage-pdp .okra-pdp-r__purchase {
    display: block;
    padding: 0;
    margin: 0 0 clamp(34px, 3.8vw, 58px);
    border: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-panel {
    display: block;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-panel[hidden] {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-label,
  body.okra-vintage-pdp .okra-pdp-r__price-note {
    display: none;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-panel .okra-pdp-r__price,
  body.okra-vintage-pdp .okra-pdp-r__price {
    margin: 0;
    font-size: clamp(46px, 4.2vw, 72px);
    line-height: 1;
    letter-spacing: .06em;
    color: #292929;
  }

  body.okra-vintage-pdp .okra-pdp-r__purchase .okra-pdp-r__quantity-panel {
    width: min(100%, 540px);
    min-height: 72px;
    padding: 0;
    border: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__desc {
    max-width: 920px;
    margin: 0 0 clamp(46px, 4vw, 70px);
    font-size: clamp(18px, 1.55vw, 30px);
    line-height: 1.62;
    letter-spacing: .06em;
    text-transform: capitalize;
    color: #2a2a2a;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-label {
    margin-bottom: clamp(24px, 2vw, 36px);
    font-size: clamp(18px, 1.35vw, 28px);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #282828;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-label strong {
    font-weight: 700;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.okra-vintage-pdp .okra-pdp-r__materials-strip {
    display: block;
    margin-bottom: clamp(46px, 4vw, 68px);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatches {
    display: flex;
    gap: clamp(10px, 1vw, 18px);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatch {
    width: clamp(54px, 5vw, 92px);
    height: clamp(54px, 5vw, 92px);
    border: 6px solid rgba(220, 220, 220, .82);
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch {
    border-color: rgba(220, 220, 220, .95);
    outline: 1px solid #551912;
    outline-offset: 2px;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-block {
    margin-bottom: clamp(50px, 4.4vw, 78px);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list {
    display: grid;
    border-top: 0;
    border-bottom: 1px solid rgba(43, 18, 9, .72);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr .95fr;
    align-items: center;
    column-gap: clamp(16px, 2.4vw, 42px);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head {
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(43, 18, 9, .42);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head span,
  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(17px, 1.25vw, 25px);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #282828;
  }

  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger {
    justify-self: end;
    border: 0;
    border-bottom: 1px solid rgba(43, 18, 9, .35);
    background: transparent;
    padding: 0 0 2px;
    cursor: pointer;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list input[type=radio] {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
    min-height: clamp(58px, 5.2vw, 88px);
    padding: 0;
    border: 0;
    border-bottom: 0;
    background: transparent;
    transition: background .18s ease, color .18s ease;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-name,
  body.okra-vintage-pdp .okra-pdp-r__size-meta,
  body.okra-vintage-pdp .okra-pdp-r__size-depth,
  body.okra-vintage-pdp .okra-pdp-r__size-price {
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(17px, 1.25vw, 25px);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #282828;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-price {
    justify-self: end;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list input[type=radio]:checked + .okra-pdp-r__sizebtn {
    box-shadow: inset 0 0 0 1px rgba(43, 18, 9, .55);
    background: rgba(246, 240, 232, .48);
  }

  body.okra-vintage-pdp .okra-pdp-r__gift {
    padding: 0;
    margin: 0 0 clamp(42px, 4vw, 72px);
    border: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 86px;
    gap: clamp(18px, 2vw, 30px);
    align-items: center;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-icon svg {
    width: clamp(40px, 3.6vw, 58px);
    height: clamp(40px, 3.6vw, 58px);
    stroke-width: 1.8;
    color: #282828;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-copy strong {
    font-size: clamp(17px, 1.25vw, 26px);
    letter-spacing: 0;
    color: #282828;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-copy small {
    font-size: clamp(12px, .95vw, 18px);
    line-height: 1.35;
    letter-spacing: .03em;
    color: #2d2d2d;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-switch {
    justify-self: end;
    width: 72px;
    height: 38px;
    border: 2px solid #778796;
    border-radius: 999px;
    background: #d9e2ea;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-switch::after {
    top: 4px;
    left: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch {
    background: #64190f;
    border-color: #64190f;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch::after {
    background: #ffffff;
    transform: translateX(32px);
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-message {
    margin-top: 22px;
    min-height: 142px;
    font-size: 15px;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.08fr) auto;
    gap: clamp(14px, 1.5vw, 24px);
    align-items: stretch;
    margin-bottom: clamp(48px, 4.8vw, 82px);
  }

  body.okra-vintage-pdp .okra-pdp-r__btn {
    height: clamp(58px, 5vw, 86px);
    border-radius: 0;
    font-size: clamp(15px, 1.35vw, 28px);
    letter-spacing: .22em;
    border-width: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__btn--outline {
    background: #2b2b2b;
    color: #efe8dc;
  }

  body.okra-vintage-pdp .okra-pdp-r__btn--fill {
    background: #64190f;
    border-color: #64190f;
    color: #efe8dc;
  }

  body.okra-vintage-pdp .okra-pdp-r__btn.is-disabled {
    opacity: 1;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility-group {
    display: flex;
    align-items: stretch;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 5vw, 86px);
    height: clamp(58px, 5vw, 86px);
    border: 1px solid #1a1008;
    border-radius: 0;
    border-bottom-width: 1px;
    background: transparent;
    color: #4a291d;
    padding: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility + .okra-pdp-r__utility {
    margin-left: -1px;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility svg {
    width: clamp(27px, 2.5vw, 42px);
    height: clamp(27px, 2.5vw, 42px);
    stroke-width: 1.65;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility.is-active svg {
    fill: currentColor;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.okra-vintage-pdp .okra-pdp-r__subactions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 5vw, 92px);
    margin: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__subaction {
    display: block;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(43, 18, 9, .62);
    font-size: clamp(14px, 1.05vw, 22px);
    letter-spacing: .24em;
    color: #282828;
    white-space: normal;
  }

  body.okra-vintage-pdp .okra-pdp-r__subaction img {
    display: none;
  }

  @media (min-width: 1200px) and (max-width: 1920px) {
    body.okra-vintage-pdp .okra-pdp-r {
      max-width: min(680px, 100%);
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(48px, 3.55vw, 68px);
      margin-bottom: 34px;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 26px;
      margin: 30px 0 44px;
    }

    body.okra-vintage-pdp .okra-pdp-r__purchase {
      margin-bottom: 34px;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(16px, 1.25vw, 23px);
      margin-bottom: 38px;
    }

    body.okra-vintage-pdp .okra-pdp-r__materials-strip,
    body.okra-vintage-pdp .okra-pdp-r__size-block {
      margin-bottom: 42px;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas {
      margin-bottom: 48px;
    }
  }

  /* Compact reference scale and active-row quantity state */
  body.okra-vintage-pdp .okra-pdp-r {
    max-width: min(520px, 100%);
  }

  body.okra-vintage-pdp .okra-pdp-r__head {
    margin-bottom: 18px;
  }

  body.okra-vintage-pdp .okra-pdp-r__title {
    font-size: clamp(30px, 2.9vw, 52px);
    letter-spacing: .16em;
    margin-bottom: 18px;
  }

  body.okra-vintage-pdp .okra-pdp-r__badge {
    height: 18px;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 7px;
    letter-spacing: .04em;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumbs {
    gap: 18px;
    margin: 18px 0 28px;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb {
    width: clamp(34px, 3.4vw, 56px);
    height: clamp(28px, 3vw, 44px);
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb.active {
    outline-offset: 3px;
  }

  body.okra-vintage-pdp .okra-pdp-r__purchase {
    margin-bottom: 24px;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-panel[hidden] {
    display: block !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__price-panel .okra-pdp-r__price,
  body.okra-vintage-pdp .okra-pdp-r__price {
    font-size: clamp(28px, 2.8vw, 44px);
    letter-spacing: .06em;
  }

  body.okra-vintage-pdp .okra-pdp-r__purchase .okra-pdp-r__quantity-panel {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__desc {
    margin-bottom: 24px;
    font-size: clamp(11px, .88vw, 14px);
    line-height: 1.62;
    letter-spacing: .06em;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-label {
    margin-bottom: 16px;
    font-size: clamp(11px, .88vw, 14px);
    letter-spacing: .02em;
  }

  body.okra-vintage-pdp .okra-pdp-r__materials-strip {
    margin-bottom: 30px;
  }

  body.okra-vintage-pdp .okra-pdp-r__swatches {
    gap: 7px;
  }

  body.okra-vintage-pdp .okra-pdp-r__swatch {
    width: clamp(32px, 3vw, 44px);
    height: clamp(32px, 3vw, 44px);
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: translateY(0) scale(1);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .28s ease, filter .42s ease;
  }

  body.okra-vintage-pdp .okra-pdp-r__swatch::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -8px;
    height: 1px;
    background: #551912;
    opacity: 0;
    transform: scaleX(.35);
    transform-origin: center;
    transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatch img {
    border-radius: 0;
    box-shadow: none;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), filter .42s ease;
  }

  body.okra-vintage-pdp .okra-pdp-r__swatch:hover {
    border-color: transparent;
    transform: translateY(-2px);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch {
    border-color: transparent;
    outline: 0;
    transform: translateY(-2px) scale(1.045);
    filter: saturate(1.04) contrast(1.03);
  }

  body.okra-vintage-pdp .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch::after {
    opacity: 1;
    transform: scaleX(1);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-block {
    margin-bottom: 34px;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
    grid-template-columns: 1fr 1fr 1fr 1.1fr;
    column-gap: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head {
    padding-bottom: 7px;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head span,
  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-name,
  body.okra-vintage-pdp .okra-pdp-r__size-meta,
  body.okra-vintage-pdp .okra-pdp-r__size-depth,
  body.okra-vintage-pdp .okra-pdp-r__size-price {
    font-size: clamp(11px, .85vw, 14px);
    line-height: 1;
  }

  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger {
    justify-self: end;
    font-weight: 700;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
    min-height: clamp(34px, 3.2vw, 44px);
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list input[type=radio]:checked + .okra-pdp-r__sizebtn {
    background: #D7D7D7;
    box-shadow: none;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-list input[type=radio]:checked + .okra-pdp-r__sizebtn .okra-pdp-r__size-price {
    display: none;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-action {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 72px;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-qty {
    display: inline-flex;
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-qty[hidden] {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-qty .okra-pdp-r__quant-stepper {
    width: auto;
    height: 26px;
    border: 0;
    display: inline-flex;
    align-items: center;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-qty .okra-pdp-r__quant-btn {
    width: 24px;
    height: 26px;
    font-size: 16px;
    line-height: 1;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-qty .okra-pdp-r__quant-input {
    flex: 0 0 24px;
    width: 24px;
    height: 22px;
    border: 0;
    background: #050505;
    color: #ffffff;
    font-size: 12px;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift {
    margin-bottom: 34px;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
    grid-template-columns: 34px minmax(0, 1fr) 48px;
    gap: 10px;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-icon svg {
    width: 28px;
    height: 28px;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-copy strong {
    font-size: clamp(12px, .95vw, 15px);
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-copy small {
    font-size: clamp(8px, .65vw, 10px);
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-switch {
    width: 48px;
    height: 24px;
    border: 0;
    background: #5b331f;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-switch::after {
    top: 5px;
    left: 6px;
    width: 14px;
    height: 14px;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch {
    background: #5b331f;
  }

  body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch::after {
    transform: translateX(22px);
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas {
    grid-template-columns: minmax(118px, 1fr) minmax(132px, 1.06fr) auto;
    gap: 10px;
    margin-bottom: 32px;
  }

  body.okra-vintage-pdp .okra-pdp-r__btn,
  body.okra-vintage-pdp .okra-pdp-r__utility {
    height: clamp(38px, 3.8vw, 54px);
  }

  body.okra-vintage-pdp .okra-pdp-r__btn {
    font-size: clamp(11px, .95vw, 15px);
    letter-spacing: .22em;
  }

  body.okra-vintage-pdp .okra-pdp-r__utility {
    width: clamp(38px, 3.8vw, 54px);
  }

  body.okra-vintage-pdp .okra-pdp-r__utility svg {
    width: clamp(20px, 1.8vw, 28px);
    height: clamp(20px, 1.8vw, 28px);
  }

  body.okra-vintage-pdp .okra-pdp-r__subactions {
    gap: 44px;
  }

  body.okra-vintage-pdp .okra-pdp-r__subaction {
    padding-bottom: 8px;
    font-size: clamp(9px, .76vw, 12px);
    letter-spacing: .24em;
  }

  /* === Size table interaction === */

  /* Keep checked and JS-selected rows visually identical. */
  body.okra-vintage-pdp .okra-pdp-r__size-list input[type=radio]:checked + .okra-pdp-r__sizebtn {
    background: #D7D7D7 !important;
    box-shadow: none !important;
  }

  body.okra-vintage-pdp .okra-size-row {
    background: transparent;
    cursor: pointer;
    transition: background .15s ease;
  }

  body.okra-vintage-pdp .okra-size-row:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  body.okra-vintage-pdp .okra-size-row.is-selected {
    background: #D7D7D7 !important;
  }

  body.okra-vintage-pdp .okra-size-stepper {
    display: none;
    align-items: center;
    gap: 2px;
  }

  body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper {
    display: inline-flex;
  }

  body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-price {
    display: none;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: clamp(13px, 1vw, 17px);
    line-height: 1;
    padding: 0 3px;
    color: #2c2c2c;
  }

  body.okra-vintage-pdp .okra-size-stepper-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: #050505;
    color: #ffffff;
    font-size: 11px;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
  }

        /* === topbar sizing match index.html === */
        .okra-topbar {
            padding-top: clamp(1.4rem, 3.1vw, 2.8rem) !important;
            min-height: clamp(4.9rem, 10vw, 8.5rem) !important;
        }
        .okra-menu-toggle {
            top: clamp(1.45rem, 3.2vw, 2.85rem) !important;
            left: clamp(1rem, 3.2vw, 3rem) !important;
            width: clamp(2.15rem, 3vw, 3.35rem) !important;
            height: clamp(2.15rem, 3vw, 3.35rem) !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0 !important;
        }
        .okra-menu-toggle svg {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            color: #551912 !important;
        }
        .okra-brand img {
            height: clamp(3.5rem, 6.8vw, 8.6rem) !important;
        }
        .okra-brand {
            transform: translateY(-26px) !important;
        }
        .okra-cart-link {
            top: clamp(1.45rem, 3.2vw, 2.85rem) !important;
            right: clamp(1rem, 3.2vw, 3rem) !important;
            left: auto !important;
            width: clamp(2.15rem, 3vw, 3.35rem) !important;
            height: clamp(2.15rem, 3vw, 3.35rem) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0 !important;
        }
        .okra-cart-link img {
            width: 120% !important;
            height: 120% !important;
            object-fit: contain !important;
            display: block !important;
            filter: brightness(0) saturate(100%) invert(12%) sepia(65%) saturate(2508%) hue-rotate(351deg) brightness(83%) contrast(93%) !important;
        }
        @media (max-width: 767px) {
            .okra-menu-toggle {
                width: 2rem !important;
                height: 2rem !important;
            }
            .okra-cart-link {
                width: 2rem !important;
                height: 2rem !important;
            }
            .okra-brand img {
                height: clamp(3.1rem, 12vw, 4.4rem) !important;
            }
            .okra-brand {
                transform: translateY(-12px) !important;
            }
        }
        @media (min-width: 1200px) {
            .okra-menu-toggle {
                top: clamp(1.05rem, 1.7vw, 1.55rem) !important;
                width: clamp(1.85rem, 2.15vw, 2.35rem) !important;
                height: clamp(1.85rem, 2.15vw, 2.35rem) !important;
            }
            .okra-cart-link {
                top: clamp(1.05rem, 1.7vw, 1.55rem) !important;
                width: clamp(1.85rem, 2.15vw, 2.35rem) !important;
                height: clamp(1.85rem, 2.15vw, 2.35rem) !important;
            }
            .okra-brand img {
                height: clamp(3.5rem, 4.45vw, 5.25rem) !important;
            }
            .okra-brand {
                transform: translateY(-30px) !important;
            }
        }

        /* Pull the full PDP content block closer to the raised logo. */
        body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
            margin-top: clamp(-18px, -1.1vw, -10px) !important;
        }
        body.okra-vintage-pdp section.flat-spacing.pb-0 {
            padding-top: clamp(18px, 1.6vw, 28px) !important;
        }
        body.okra-vintage-pdp .okra-pdp-left-stack .tf-breadcrumb.okra-vintage-crumb {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        /* === cart dot indicator � same as index.html === */
        .okra-cart-count {
            position: absolute !important;
            top: 2px !important;
            right: 2px !important;
            width: 7px !important;
            height: 7px !important;
            min-width: 0 !important;
            padding: 0 !important;
            border-radius: 50% !important;
            background: currentColor !important;
            display: none !important;
            font-size: 0 !important;
            pointer-events: none !important;
            box-shadow: none !important;
            color: inherit !important;
        }
        .okra-cart-link.has-items .okra-cart-count {
            display: block !important;
        }

  /* ============================================================
     === OKRA PDP MOBILE + TABLET REFERENCE LAYOUT ===
     Source of truth: reference screenshot (mobile portrait).
     Breakpoints:
       ≤ 1199px  tablet/mobile shared (single-column)
       768–1199  iPad scaling layer
       ≤ 767px   mobile refinements
       ≤ 374px   small-phone compression
     These rules are placed last and override all scattered rules above.
     Desktop (≥ 1200px) is untouched.
  ============================================================ */

  /* Mobile dots strip — hidden everywhere except ≤ 1199px */
  .okra-mobile-dots {
    display: none;
  }
  .okra-mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(43, 18, 9, 0.22);
    border: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease;
  }
  .okra-mobile-dot.active {
    background: #2b1209;
  }

  /* ── SHARED: tablet + mobile (≤ 1199px) ── */
  @media (max-width: 1199px) {

    /* Prevent horizontal overflow */
    body.okra-vintage-pdp #wrapper { overflow-x: clip !important; }

    /* ── Single-column layout ── */
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row {
      display: block !important;
      grid-template-columns: none !important;
      column-gap: 0 !important;
    }
    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6 {
      width: 100% !important;
      max-width: 100% !important;
      flex: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Remove sticky positioning */
    body.okra-vintage-pdp .sticky-top {
      position: relative !important;
      top: auto !important;
      width: 100%;
      height: auto;
    }
    body.okra-vintage-pdp .okra-pdp-left-stack {
      position: relative !important;
      top: auto !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* ── Gallery: single centered image ── */
    body.okra-vintage-pdp .slider-scroll {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;
    }
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
      overflow: visible !important;
      background: rgba(244, 237, 224, 0.55);
      margin: 0 auto;
      min-height: 0 !important;
    }
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item {
      display: none !important;
      position: absolute !important;
      inset: 4% !important;
      width: auto !important;
      height: auto !important;
      border-radius: 0 !important;
      overflow: hidden;
    }
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item.is-active {
      display: block !important;
    }
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item img {
      display: block;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
    }
    /* Responsive gallery arrows */
    body.okra-vintage-pdp .okra-pdp-gallery-arrow {
      position: absolute !important;
      top: 50% !important;
      z-index: 4 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: clamp(38px, 8vw, 56px) !important;
      height: clamp(38px, 8vw, 56px) !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #2b1209 !important;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
      font-size: clamp(34px, 9vw, 50px) !important;
      line-height: 1 !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: translateY(-50%) !important;
      transition: color 160ms ease, transform 160ms ease !important;
    }

    body.okra-vintage-pdp .okra-pdp-gallery-arrow--prev {
      left: clamp(-42px, -6vw, -24px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-gallery-arrow--next {
      right: clamp(-42px, -6vw, -24px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-gallery-arrow:hover,
    body.okra-vintage-pdp .okra-pdp-gallery-arrow:focus-visible {
      background: transparent !important;
      color: #551912 !important;
      outline: 0 !important;
      transform: translateY(-50%) scale(1.04) !important;
    }

    /* ── Mobile dots ── */
    .okra-mobile-dots {
      display: flex !important;
      justify-content: center;
      gap: 7px;
      margin: 10px 0 6px;
      padding: 0;
    }

    /* ── Remove desktop product info spacing ── */
    body.okra-vintage-pdp .tf-product-info-wrap {
      padding-top: 0 !important;
      width: 100%;
    }
    body.okra-vintage-pdp .sticky-top .tf-product-info-list {
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      margin-left: 0 !important;
      scrollbar-gutter: auto;
    }

    /* ── Product info panel: centered, flex column for ordering ── */
    body.okra-vintage-pdp .okra-pdp-r {
      display: flex !important;
      flex-direction: column !important;
      max-width: clamp(320px, 90vw, 620px) !important;
      margin: 0 auto !important;
      padding-left: clamp(16px, 4vw, 32px) !important;
      padding-right: clamp(16px, 4vw, 32px) !important;
      padding-top: 0 !important;
      padding-bottom: 36px !important;
      text-align: left;
    }

    /* ── Flex order: match reference screenshot ── */
    body.okra-vintage-pdp .okra-pdp-r__thumbs      { order: 0; }
    body.okra-vintage-pdp .okra-pdp-r__head        { order: 1; }
    body.okra-vintage-pdp .okra-pdp-r__desc        { order: 2; }
    body.okra-vintage-pdp .okra-pdp-r__purchase    { order: 3; }
    body.okra-vintage-pdp .okra-pdp-r__meta        { order: 4; }
    body.okra-vintage-pdp .okra-pdp-r__row-label   { order: 5; }
    body.okra-vintage-pdp .okra-pdp-r__materials-strip { order: 6; }
    body.okra-vintage-pdp .okra-pdp-r__size-block  { order: 7; }
    body.okra-vintage-pdp .okra-pdp-r__gift        { order: 8; }
    body.okra-vintage-pdp .okra-pdp-r__ctas        { order: 9; }
    body.okra-vintage-pdp .okra-pdp-r__subactions  { order: 10; }

    /* ── Thumbnails: centered strip ── */
    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      display: flex !important;
      justify-content: center !important;
      gap: clamp(10px, 2.5vw, 20px) !important;
      margin: 0 0 clamp(10px, 2.5vw, 18px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(38px, 8vw, 58px) !important;
      height: clamp(32px, 7vw, 48px) !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent;
      outline: none;
    }
    body.okra-vintage-pdp .okra-pdp-r__thumb.active {
      outline: 1px solid rgba(43, 18, 9, 0.38) !important;
      outline-offset: 3px !important;
      border: 0 !important;
    }

    /* ── Head: badge above title ── */
    body.okra-vintage-pdp .okra-pdp-r__head {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin-bottom: clamp(8px, 2vw, 14px) !important;
      padding-top: clamp(12px, 2.5vw, 20px) !important;
    }
    /* badge shown first via flex order */
    body.okra-vintage-pdp .okra-pdp-r__title {
      order: 1;
      font-size: clamp(18px, 5.5vw, 32px) !important;
      letter-spacing: clamp(0.08em, 1.2vw, 0.16em) !important;
      white-space: nowrap !important;
      margin-bottom: 0 !important;
      margin-top: 6px !important;
      line-height: 1.1 !important;
      text-align: left !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__badge {
      order: 0;
      display: inline-flex !important;
      align-items: center !important;
      height: 18px !important;
      padding: 0 10px !important;
      border-radius: 3px !important;
      font-size: 7px !important;
      letter-spacing: 0.04em !important;
      background: #551912 !important;
      color: #fff !important;
      border: 0 !important;
      font-style: normal !important;
    }

    /* ── Description: justified ── */
    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(11px, 2.4vw, 14px) !important;
      line-height: 1.7 !important;
      letter-spacing: 0.03em !important;
      text-align: justify !important;
      margin: 0 0 clamp(10px, 2.5vw, 18px) !important;
      max-width: 100% !important;
      color: #3d2e22 !important;
      text-transform: capitalize !important;
    }

    /* ── Price: left-aligned ── */
    body.okra-vintage-pdp .okra-pdp-r__purchase {
      display: block !important;
      text-align: left !important;
      border: 0 !important;
      padding: 0 !important;
      margin-bottom: clamp(10px, 2.5vw, 18px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__price-panel {
      display: block !important;
      text-align: left;
    }
    body.okra-vintage-pdp .okra-pdp-r__price-panel[hidden] {
      display: block !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(20px, 5vw, 32px) !important;
      letter-spacing: 0.06em !important;
      color: #1a1008 !important;
      margin: 0 !important;
      text-align: left;
    }
    body.okra-vintage-pdp .okra-pdp-r__price-label,
    body.okra-vintage-pdp .okra-pdp-r__price-note {
      display: none !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__purchase .okra-pdp-r__quantity-panel {
      display: none !important;
    }

    /* ── Materials label ── */
    body.okra-vintage-pdp .okra-pdp-r__row-label {
      font-size: clamp(9px, 1.8vw, 11px) !important;
      letter-spacing: 0.12em !important;
      text-align: left !important;
      margin-bottom: clamp(8px, 2vw, 12px) !important;
    }

    /* ── Swatches: left-aligned row ── */
    body.okra-vintage-pdp .okra-pdp-r__materials-strip {
      display: block !important;
      margin-bottom: clamp(12px, 2.5vw, 20px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatches {
      display: flex !important;
      justify-content: flex-start !important;
      gap: clamp(6px, 1.5vw, 10px) !important;
      flex-wrap: nowrap !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: clamp(28px, 7vw, 40px) !important;
      height: clamp(28px, 7vw, 40px) !important;
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
      transform: none !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatch:hover {
      transform: translateY(-2px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch {
      transform: translateY(-2px) scale(1.04) !important;
      border-color: transparent !important;
      outline: 0 !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatch::after {
      bottom: -7px;
    }

    /* ── Size table: 4-column grid ── */
    body.okra-vintage-pdp .okra-pdp-r__size-block {
      margin-bottom: clamp(14px, 3vw, 22px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head,
    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      column-gap: clamp(4px, 1.5vw, 12px) !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: left !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: clamp(9px, 2.2vw, 13px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      min-height: clamp(30px, 6vw, 44px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head {
      padding-bottom: 7px !important;
    }

    /* ── Gift section: compact ── */
    body.okra-vintage-pdp .okra-pdp-r__gift {
      margin-bottom: clamp(12px, 2.5vw, 20px) !important;
      padding: 0 !important;
      border: 0 !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
      grid-template-columns: 28px minmax(0, 1fr) 40px !important;
      gap: 8px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__gift-icon svg {
      width: 24px !important;
      height: 24px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__gift-copy strong {
      font-size: clamp(10px, 2.2vw, 13px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__gift-copy small {
      font-size: clamp(8px, 1.8vw, 10px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__gift-switch {
      width: 40px !important;
      height: 20px !important;
    }

    /* ── CTA row: single horizontal row ── */
    body.okra-vintage-pdp .okra-pdp-r__ctas {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
      gap: clamp(6px, 1.5vw, 10px) !important;
      margin-bottom: clamp(14px, 3vw, 22px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__btn {
      flex: unset !important;
      height: clamp(36px, 8vw, 48px) !important;
      font-size: clamp(9px, 2vw, 12px) !important;
      letter-spacing: clamp(0.06em, 0.4vw, 0.12em) !important;
      border-radius: 0 !important;
      border-width: 0 !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility-group {
      display: inline-flex !important;
      align-items: stretch !important;
      width: auto !important;
      flex: none !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility {
      flex: none !important;
      width: clamp(36px, 8vw, 48px) !important;
      height: clamp(36px, 8vw, 48px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility svg {
      width: clamp(16px, 3.5vw, 22px) !important;
      height: clamp(16px, 3.5vw, 22px) !important;
    }

    /* ── Subactions: side by side ── */
    body.okra-vintage-pdp .okra-pdp-r__subactions {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: clamp(10px, 2.5vw, 24px) !important;
      margin: 0 !important;
      align-items: start !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subaction {
      display: block !important;
      font-size: clamp(7px, 1.8vw, 11px) !important;
      letter-spacing: clamp(0.06em, 0.4vw, 0.12em) !important;
      padding-bottom: clamp(6px, 1.5vw, 10px) !important;
      border-bottom: 1px solid rgba(43, 18, 9, 0.5) !important;
      white-space: normal !important;
      color: #282828 !important;
      text-align: left !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subaction img {
      display: none !important;
    }

    /* ── Section + meta adjustments ── */
    body.okra-vintage-pdp section.flat-spacing.pb-0 {
      padding-top: 0 !important;
      padding-bottom: 36px !important;
    }
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
      display: none !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__meta {
      display: none !important;
    }
  }

  /* ── iPad portrait + landscape (768–1199px) ── */
  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      width: 100% !important;
      max-width: 100% !important;
    }
    body.okra-vintage-pdp .okra-pdp-r {
      max-width: min(600px, 88vw) !important;
      padding-left: clamp(22px, 4vw, 40px) !important;
      padding-right: clamp(22px, 4vw, 40px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(24px, 4.5vw, 34px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(24px, 4vw, 34px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(44px, 7.5vw, 62px) !important;
      height: clamp(36px, 6.5vw, 52px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: clamp(34px, 5.5vw, 44px) !important;
      height: clamp(34px, 5.5vw, 44px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: clamp(40px, 7vw, 52px) !important;
      font-size: clamp(10px, 1.8vw, 13px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: clamp(40px, 7vw, 52px) !important;
      height: clamp(40px, 7vw, 52px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: clamp(11px, 2vw, 14px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: clamp(9px, 1.5vw, 12px) !important;
    }
  }

  /* ── Mobile refinements (≤ 767px) ── */
  @media (max-width: 767px) {
    body.okra-vintage-pdp section.flat-spacing.pb-0 {
      padding-top: 0 !important;
      padding-bottom: 28px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r {
      max-width: 100% !important;
      padding-left: clamp(14px, 4vw, 22px) !important;
      padding-right: clamp(14px, 4vw, 22px) !important;
    }
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      width: 100% !important;
      max-width: 100% !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(16px, 6vw, 26px) !important;
      letter-spacing: clamp(0.06em, 0.8vw, 0.12em) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(18px, 5.5vw, 26px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(10px, 3vw, 13px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(30px, 9vw, 46px) !important;
      height: clamp(24px, 7.5vw, 38px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: clamp(26px, 7.5vw, 36px) !important;
      height: clamp(26px, 7.5vw, 36px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: clamp(34px, 9.5vw, 44px) !important;
      font-size: clamp(8px, 2.2vw, 11px) !important;
      letter-spacing: clamp(0.05em, 0.3vw, 0.1em) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: clamp(34px, 9.5vw, 44px) !important;
      height: clamp(34px, 9.5vw, 44px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility svg {
      width: clamp(14px, 3.5vw, 20px) !important;
      height: clamp(14px, 3.5vw, 20px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: clamp(8px, 2.4vw, 12px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      min-height: clamp(28px, 7vw, 38px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: clamp(6px, 2.2vw, 10px) !important;
      letter-spacing: clamp(0.04em, 0.3vw, 0.09em) !important;
    }
  }

  /* ── Small phone compression (≤ 374px) ── */
  @media (max-width: 374px) {
    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      width: 100% !important;
      max-width: 100% !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(13px, 5.5vw, 18px) !important;
      letter-spacing: 0.05em !important;
      white-space: nowrap !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(16px, 5.5vw, 22px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__ctas {
      gap: 4px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: clamp(30px, 10vw, 36px) !important;
      font-size: 7px !important;
      letter-spacing: 0.05em !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: clamp(30px, 10vw, 36px) !important;
      height: clamp(30px, 10vw, 36px) !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head,
    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      column-gap: 2px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: 7px !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: 6px !important;
      letter-spacing: 0.04em !important;
    }
    body.okra-vintage-pdp .okra-pdp-r__subactions {
      gap: 8px !important;
    }
  }

  /* Final mobile/iPad PDP scale pass. Keep this last so older PDP/mobile
     gallery rules in css/styles.css cannot collapse the reference layout. */
  .okra-mobile-hero {
    display: none;
  }

  @media (max-width: 1199px) {
    html,
    body.okra-vintage-pdp,
    body.okra-vintage-pdp #wrapper {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: clip !important;
    }

    body.okra-vintage-pdp .tf-toolbar-bottom,
    body.okra-vintage-pdp .tf-sticky-btn-atc,
    body.okra-vintage-pdp .tf-sticky-atc,
    body.okra-vintage-pdp .okra-bottom-accent {
      display: none !important;
    }

    body.okra-vintage-pdp .okra-topbar {
      min-height: 76px !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-menu-toggle {
      top: 22px !important;
      left: clamp(28px, 9.2vw, 40px) !important;
      width: 28px !important;
      height: 28px !important;
      color: #551912 !important;
    }

    body.okra-vintage-pdp .okra-menu-toggle svg {
      width: 28px !important;
      height: 28px !important;
      stroke-width: 2 !important;
    }

    body.okra-vintage-pdp .okra-brand {
      transform: none !important;
    }

    body.okra-vintage-pdp .okra-brand img {
      height: 28px !important;
      width: auto !important;
      max-width: none !important;
    }

    body.okra-vintage-pdp .okra-cart-link {
      top: 21px !important;
      right: clamp(28px, 8.5vw, 38px) !important;
      width: auto !important;
      height: 30px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      color: #551912 !important;
      overflow: visible !important;
    }

    body.okra-vintage-pdp .okra-cart-link img {
      width: 21px !important;
      height: 21px !important;
      object-fit: contain !important;
      filter: brightness(0) saturate(100%) invert(12%) sepia(65%) saturate(2508%) hue-rotate(351deg) brightness(83%) contrast(93%) !important;
    }

    body.okra-vintage-pdp .okra-cart-count {
      position: absolute !important;
      top: 2px !important;
      right: 2px !important;
      left: auto !important;
      bottom: auto !important;
      width: 7px !important;
      height: 7px !important;
      min-width: 0 !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: currentColor !important;
      color: inherit !important;
      display: none !important;
      font-size: 0 !important;
      line-height: 0 !important;
      box-shadow: none !important;
    }

    body.okra-vintage-pdp .okra-cart-link.has-items .okra-cart-count { display: block !important; }
    body.okra-vintage-pdp .okra-cart-count::before,
    body.okra-vintage-pdp .okra-cart-count::after { content: none !important; }

    body.okra-vintage-pdp section.flat-spacing.pb-0 {
      padding-top: 0 !important;
      padding-bottom: 34px !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row {
      display: block !important;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6 {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body.okra-vintage-pdp .slider-scroll {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      margin-top: 18px !important;
      margin-bottom: 18px !important;
      width: 100% !important;
    }

    body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      display: block !important;
      width: clamp(204px, 48vw, 380px) !important;
      aspect-ratio: 206 / 136 !important;
      margin: 0 auto !important;
      overflow: hidden !important;
      background: rgba(244, 237, 224, 0.42) !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      display: flex !important;
      justify-content: center !important;
      gap: 7px !important;
      margin: 16px 0 0 !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-mobile-dot {
      width: 8px !important;
      height: 8px !important;
      background: rgba(43, 18, 9, 0.24) !important;
    }

    body.okra-vintage-pdp .okra-mobile-dot.active {
      background: #111111 !important;
    }

    body.okra-vintage-pdp .tf-product-info-wrap,
    body.okra-vintage-pdp .sticky-top .tf-product-info-list {
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    body.okra-vintage-pdp .okra-pdp-r {
      width: clamp(286px, 77vw, 330px) !important;
      max-width: 330px !important;
      margin: 0 auto !important;
      padding: 0 0 28px !important;
      box-sizing: border-box !important;
      text-align: left !important;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: clamp(286px, 77vw, 330px) !important;
      max-width: 330px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 0 0 28px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      order: 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 14px !important;
      margin: 0 0 28px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 32px !important;
      height: 32px !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      overflow: visible !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb.active {
      outline: 1px solid rgba(43, 18, 9, 0.58) !important;
      outline-offset: 3px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__head {
      order: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin: 0 0 15px !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__badge {
      order: 0 !important;
      height: 10px !important;
      padding: 0 8px !important;
      border: 0 !important;
      border-radius: 2px !important;
      background: #551912 !important;
      color: #ffffff !important;
      font-size: 5px !important;
      line-height: 10px !important;
      letter-spacing: .04em !important;
      font-style: normal !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      order: 1 !important;
      margin: 12px 0 0 !important;
      font-size: 24px !important;
      line-height: 1.05 !important;
      letter-spacing: .18em !important;
      white-space: nowrap !important;
      color: #2c2c2c !important;
      text-align: left !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      order: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto 18px !important;
      font-size: 9.5px !important;
      line-height: 1.78 !important;
      letter-spacing: .045em !important;
      text-align: justify !important;
      text-align-last: center !important;
      color: #2f2f2f !important;
      text-transform: capitalize !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__purchase {
      order: 3 !important;
      display: block !important;
      margin: 0 0 25px !important;
      padding: 0 !important;
      border: 0 !important;
      text-align: left !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__price {
      margin: 0 !important;
      font-size: 20px !important;
      line-height: 1 !important;
      letter-spacing: .08em !important;
      color: #2d2d2d !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__price-label,
    body.okra-vintage-pdp .okra-pdp-r__price-note,
    body.okra-vintage-pdp .okra-pdp-r__purchase .okra-pdp-r__quantity-panel,
    body.okra-vintage-pdp .okra-pdp-r__meta,
    body.okra-vintage-pdp .okra-pdp-r__gift {
      display: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__row-label {
      order: 5 !important;
      margin: 0 0 11px !important;
      font-size: 8px !important;
      line-height: 1.2 !important;
      letter-spacing: .08em !important;
      color: #282828 !important;
      text-align: left !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__materials-strip {
      order: 6 !important;
      display: block !important;
      margin: 0 0 25px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatches {
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 14px !important;
      flex-wrap: nowrap !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: 31px !important;
      height: 31px !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      transform: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatch img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatches input:checked + .okra-pdp-r__swatch {
      outline: 0 !important;
      transform: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-block {
      order: 7 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 0 30px !important;
      box-sizing: border-box !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-list {
      width: 100% !important;
      border-top: 0 !important;
      border-bottom: 1px solid rgba(43, 18, 9, .72) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head,
    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      column-gap: 0 !important;
      align-items: center !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: left !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head {
      padding-bottom: 8px !important;
      border-bottom: 1px solid rgba(43, 18, 9, .55) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      min-height: 39px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: 7px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      color: #282828 !important;
      text-transform: uppercase !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger {
      font-weight: 700 !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      justify-self: end !important;
      text-align: right !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-action {
      justify-self: end !important;
      min-width: 0 !important;
    }

    body.okra-vintage-pdp .okra-size-stepper {
      display: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas {
      order: 9 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto !important;
      gap: 6px !important;
      margin: 0 0 27px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: 28px !important;
      min-height: 28px !important;
      border: 0 !important;
      border-radius: 0 !important;
      font-size: 7px !important;
      line-height: 1 !important;
      letter-spacing: .16em !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility-group {
      display: inline-flex !important;
      align-items: stretch !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: 28px !important;
      height: 28px !important;
      border: 1px solid #1a1008 !important;
      border-radius: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility svg {
      width: 14px !important;
      height: 14px !important;
      stroke-width: 1.8 !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subactions {
      order: 10 !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 26px !important;
      margin: 0 !important;
      width: 100% !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction {
      display: block !important;
      padding-bottom: 7px !important;
      border-bottom: 1px solid rgba(43, 18, 9, .55) !important;
      font-size: 6.5px !important;
      line-height: 1.2 !important;
      letter-spacing: .16em !important;
      color: #282828 !important;
      text-align: left !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction img {
      display: none !important;
    }
  }

  @media (max-width: 767px) {
    body.okra-vintage-pdp .okra-menu-toggle,
    body.okra-vintage-pdp .okra-cart-link {
      transform: translateY(-22px) !important;
    }

    body.okra-vintage-pdp .okra-brand {
      transform: translateY(-24px) !important;
    }

    body.okra-vintage-pdp .slider-scroll {
      margin-top: -18px !important;
      margin-bottom: 18px !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      width: 206px !important;
      aspect-ratio: 206 / 136 !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      margin-top: 6px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      margin-bottom: 38px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__head {
      margin-bottom: 14px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      margin-bottom: 24px !important;
      font-size: 8.5px !important;
      line-height: 1.6 !important;
      letter-spacing: .04em !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__purchase {
      margin-bottom: 27px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__row-label {
      margin-bottom: 12px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__materials-strip {
      margin-bottom: 25px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-block {
      margin-bottom: 26px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head {
      padding-bottom: 7px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      min-height: 35px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas {
      margin-bottom: 24px !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-topbar {
      min-height: 94px !important;
    }

    body.okra-vintage-pdp .okra-brand img {
      height: 34px !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      width: clamp(320px, 42vw, 420px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r {
      width: clamp(390px, 58vw, 520px) !important;
      max-width: 520px !important;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: clamp(390px, 58vw, 520px) !important;
      max-width: 520px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(28px, 4vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(11px, 1.6vw, 14px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(24px, 3.2vw, 34px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 42px !important;
      height: 42px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: 38px !important;
      height: 38px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: 10px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__btn {
      height: 38px !important;
      min-height: 38px !important;
      font-size: 10px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: 38px !important;
      height: 38px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: 9px !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-pdp-r {
      width: calc(100vw - 52px) !important;
      max-width: none !important;
    }

    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: calc(100vw - 52px) !important;
      max-width: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: 20px !important;
      letter-spacing: .15em !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__btn {
      font-size: 6.2px !important;
      letter-spacing: .12em !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subactions {
      gap: 14px !important;
    }
  }


  /* === OKRA MOBILE/TABLET SELECTED SIZE QUANTITY FIX ===
     Only fixes the selected size row quantity controls on mobile/iPad.
     It does not change the PDP layout, spacing, hero image, buttons, or desktop. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-price,
    body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-price {
      display: none !important;
    }

    body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
    body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
      display: inline-grid !important;
      grid-template-columns: 14px 18px 14px !important;
      align-items: center !important;
      justify-content: end !important;
      column-gap: 4px !important;
      width: auto !important;
      max-width: 100% !important;
      min-width: 54px !important;
      overflow: visible !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-action {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      justify-self: end !important;
      min-width: 54px !important;
      width: auto !important;
      max-width: 100% !important;
      overflow: visible !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 14px !important;
      height: 18px !important;
      min-width: 14px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: #2c2c2c !important;
      font-size: 10px !important;
      line-height: 1 !important;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-num {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 18px !important;
      min-width: 18px !important;
      height: 18px !important;
      padding: 0 !important;
      margin: 0 !important;
      background: #050505 !important;
      color: #ffffff !important;
      font-size: 8px !important;
      line-height: 1 !important;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
      letter-spacing: 0 !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
    body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
      grid-template-columns: 18px 24px 18px !important;
      column-gap: 5px !important;
      min-width: 70px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-action {
      min-width: 70px !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-btn {
      width: 18px !important;
      height: 22px !important;
      min-width: 18px !important;
      font-size: 13px !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-num {
      width: 24px !important;
      min-width: 24px !important;
      height: 22px !important;
      font-size: 10px !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
    body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
      grid-template-columns: 12px 16px 12px !important;
      column-gap: 3px !important;
      min-width: 46px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-action {
      min-width: 46px !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-btn {
      width: 12px !important;
      height: 16px !important;
      min-width: 12px !important;
      font-size: 9px !important;
    }

    body.okra-vintage-pdp .okra-size-stepper-num {
      width: 16px !important;
      min-width: 16px !important;
      height: 16px !important;
      font-size: 7px !important;
    }
  }

        

  /* === OKRA MOBILE/TABLET HERO + BREADCRUMB SCALE FIX ===
     Senior FE override: only affects mobile/iPad PDP hero area, thumbnails,
     gallery spacing, and the restored breadcrumb. Desktop >=1200px unchanged. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-left-stack {
      align-items: stretch !important;
      width: 100% !important;
    }

    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
      display: block !important;
      width: clamp(300px, 72vw, 520px) !important;
      max-width: calc(100vw - 52px) !important;
      margin: clamp(42px, 7.4vw, 70px) auto clamp(46px, 7.8vw, 72px) !important;
      padding: 0 !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb .container {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-crumb-line {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 4px !important;
      margin: 0 !important;
      padding: 0 !important;
      color: #2b1209 !important;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
      font-size: clamp(8px, 1.9vw, 13px) !important;
      line-height: 1.2 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-crumb-link,
    body.okra-vintage-pdp .okra-crumb-current,
    body.okra-vintage-pdp .okra-crumb-sep {
      color: #2b1209 !important;
      font-size: inherit !important;
      line-height: inherit !important;
      letter-spacing: inherit !important;
      text-transform: none !important;
    }

    body.okra-vintage-pdp .okra-crumb-link {
      text-decoration: underline !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 2px !important;
    }

    body.okra-vintage-pdp .slider-scroll {
      margin-top: 0 !important;
      margin-bottom: clamp(24px, 4vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      width: clamp(300px, 72vw, 440px) !important;
      max-width: calc(100vw - 52px) !important;
      aspect-ratio: 206 / 136 !important;
      margin: 0 auto !important;
      overflow: hidden !important;
      background: rgba(244, 237, 224, 0.42) !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero img,
    body.okra-vintage-pdp .okra-mobile-hero [data-mobile-hero-img] {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      margin: clamp(20px, 4.8vw, 30px) 0 clamp(26px, 5.6vw, 38px) !important;
      gap: 10px !important;
    }

    body.okra-vintage-pdp .okra-mobile-dot {
      width: 8px !important;
      height: 8px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: clamp(14px, 3.4vw, 24px) !important;
      margin: 0 0 clamp(50px, 10vw, 70px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(42px, 10.8vw, 60px) !important;
      height: clamp(42px, 10.8vw, 60px) !important;
      overflow: visible !important;
      background: transparent !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb.active {
      outline: 1px solid rgba(43, 18, 9, 0.74) !important;
      outline-offset: 4px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
      background: transparent !important;
    }
  }

  @media (max-width: 767px) {
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
      width: min(310px, calc(100vw - 104px)) !important;
      max-width: calc(100vw - 104px) !important;
      margin-top: 52px !important;
      margin-bottom: 56px !important;
    }

    body.okra-vintage-pdp .okra-crumb-line {
      font-size: 8px !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      width: min(310px, calc(100vw - 104px)) !important;
      max-width: calc(100vw - 104px) !important;
      aspect-ratio: 206 / 136 !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      margin-top: 24px !important;
      margin-bottom: 30px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 17px !important;
      margin-bottom: 56px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 44px !important;
      height: 44px !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
      width: clamp(420px, 54vw, 560px) !important;
      max-width: calc(100vw - 96px) !important;
      margin-top: clamp(54px, 7vw, 78px) !important;
      margin-bottom: clamp(54px, 7vw, 78px) !important;
    }

    body.okra-vintage-pdp .okra-mobile-hero {
      width: clamp(420px, 54vw, 560px) !important;
      max-width: calc(100vw - 96px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 58px !important;
      height: 58px !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb,
    body.okra-vintage-pdp .okra-mobile-hero {
      width: calc(100vw - 72px) !important;
      max-width: calc(100vw - 72px) !important;
    }

    body.okra-vintage-pdp .tf-breadcrumb.okra-vintage-crumb {
      margin-top: 42px !important;
      margin-bottom: 44px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 12px !important;
      margin-bottom: 46px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 38px !important;
      height: 38px !important;
    }
  }


  /* === OKRA MOBILE/TABLET DESKTOP BREADCRUMB MATCH PATCH ===
     Final override only for the restored desktop breadcrumb on mobile/iPad.
     Fixes the previous high-specificity margin reset inside .okra-pdp-left-stack,
     so the breadcrumb has the same left-aligned structure and breathing room
     shown in the mobile reference. Desktop >=1200px remains unchanged. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
      display: block !important;
      position: relative !important;
      z-index: 2 !important;
      width: min(340px, calc(100vw - 96px)) !important;
      max-width: min(340px, calc(100vw - 96px)) !important;
      margin: 18px auto 56px !important;
      padding: 0 !important;
      background: transparent !important;
      transform: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .container {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line {
      display: flex !important;
      align-items: baseline !important;
      justify-content: flex-start !important;
      gap: 4px !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      color: #2b1209 !important;
      font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
      font-size: clamp(8.5px, 1.95vw, 11px) !important;
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      white-space: nowrap !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-link,
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-current,
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-sep {
      color: #2b1209 !important;
      font-size: inherit !important;
      line-height: inherit !important;
      letter-spacing: inherit !important;
      text-transform: none !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-link {
      text-decoration: underline !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 2px !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .slider-scroll {
      margin-top: 0 !important;
    }
  }

  @media (max-width: 767px) {
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
      width: min(330px, calc(100vw - 96px)) !important;
      max-width: min(330px, calc(100vw - 96px)) !important;
      margin-top: 18px !important;
      margin-bottom: 56px !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line {
      font-size: 8.5px !important;
      line-height: 1.25 !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
      width: clamp(420px, 54vw, 560px) !important;
      max-width: calc(100vw - 96px) !important;
      margin-top: clamp(24px, 3.2vw, 36px) !important;
      margin-bottom: clamp(58px, 6.4vw, 76px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line {
      font-size: clamp(10px, 1.2vw, 12px) !important;
      line-height: 1.25 !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
      width: calc(100vw - 72px) !important;
      max-width: calc(100vw - 72px) !important;
      margin-top: 14px !important;
      margin-bottom: 48px !important;
    }

    body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line {
      font-size: 7.8px !important;
    }
  }



  /* === OKRA MOBILE/TABLET HERO SLIGHTLY LARGER PATCH ===
     Final override: only increases the mobile/iPad product hero image
     and its immediate gallery spacing a little. No desktop/cart/content changes. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-mobile-hero {
      width: clamp(326px, 76vw, 468px) !important;
      max-width: calc(100vw - 56px) !important;
      aspect-ratio: 206 / 136 !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      margin-top: clamp(22px, 5vw, 32px) !important;
      margin-bottom: clamp(28px, 5.8vw, 40px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: clamp(16px, 3.8vw, 26px) !important;
      margin-bottom: clamp(56px, 10.8vw, 76px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(46px, 11.4vw, 64px) !important;
      height: clamp(46px, 11.4vw, 64px) !important;
    }
  }

  @media (max-width: 767px) {
    body.okra-vintage-pdp .okra-mobile-hero {
      width: min(334px, calc(100vw - 72px)) !important;
      max-width: calc(100vw - 72px) !important;
    }

    body.okra-vintage-pdp .okra-mobile-dots {
      margin-top: 26px !important;
      margin-bottom: 34px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 19px !important;
      margin-bottom: 62px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 48px !important;
      height: 48px !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-mobile-hero {
      width: clamp(450px, 57vw, 590px) !important;
      max-width: calc(100vw - 80px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 62px !important;
      height: 62px !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-mobile-hero {
      width: min(286px, calc(100vw - 62px)) !important;
      max-width: calc(100vw - 62px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 14px !important;
      margin-bottom: 52px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 42px !important;
      height: 42px !important;
    }
  }



  /* === OKRA MOBILE/TABLET CTA FONT + DESCRIPTION JUSTIFY PATCH ===
     Final override: only increases Add To Cart / Pre-Order button text
     and forces the product description paragraph to justify on mobile/iPad.
     No layout, hero, breadcrumb, table, badge, cart, JS, or desktop changes. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-r__desc {
      text-align: justify !important;
      text-align-last: auto !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      font-size: 8.8px !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      font-size: 11.8px !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      font-size: 7.6px !important;
    }
  }


  /* === OKRA MOBILE/TABLET MARKED CONTENT WIDEN + SCALE PATCH ===
     Final override: only widens and slightly scales the marked PDP content
     block on mobile/iPad. Hero image, breadcrumb, desktop, cart drawer,
     sticky behavior, and JS are untouched. */
  @media (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-r,
    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: min(600px, calc(100vw - 48px)) !important;
      max-width: min(600px, calc(100vw - 48px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: clamp(18px, 4vw, 28px) !important;
      margin-bottom: clamp(60px, 11.2vw, 80px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: clamp(50px, 11.8vw, 68px) !important;
      height: clamp(50px, 11.8vw, 68px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__head {
      margin-bottom: clamp(16px, 3vw, 22px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__badge {
      height: 12px !important;
      padding: 0 10px !important;
      font-size: 5.8px !important;
      line-height: 12px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(26px, 6.2vw, 40px) !important;
      line-height: 1.05 !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(9.5px, 2.35vw, 15px) !important;
      line-height: 1.64 !important;
      margin-bottom: clamp(24px, 5.4vw, 34px) !important;
      text-align: justify !important;
      text-align-last: auto !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__purchase {
      margin-bottom: clamp(28px, 5.8vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(22px, 5.2vw, 36px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__row-label {
      font-size: clamp(8.6px, 2vw, 12px) !important;
      margin-bottom: clamp(12px, 2.8vw, 16px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__materials-strip {
      margin-bottom: clamp(27px, 5.8vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatches {
      gap: clamp(14px, 3.5vw, 20px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__swatch {
      width: clamp(33px, 7.8vw, 46px) !important;
      height: clamp(33px, 7.8vw, 46px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-block {
      margin-bottom: clamp(28px, 6vw, 40px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-head span,
    body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
    body.okra-vintage-pdp .okra-pdp-r__size-name,
    body.okra-vintage-pdp .okra-pdp-r__size-meta,
    body.okra-vintage-pdp .okra-pdp-r__size-depth,
    body.okra-vintage-pdp .okra-pdp-r__size-price {
      font-size: clamp(7.6px, 1.9vw, 11px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__sizebtn {
      min-height: clamp(37px, 8vw, 46px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas {
      gap: clamp(7px, 1.8vw, 12px) !important;
      margin-bottom: clamp(26px, 5.8vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      height: clamp(31px, 7.4vw, 44px) !important;
      min-height: clamp(31px, 7.4vw, 44px) !important;
      font-size: clamp(9.2px, 2.18vw, 13px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: clamp(31px, 7.4vw, 44px) !important;
      height: clamp(31px, 7.4vw, 44px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility svg {
      width: clamp(15px, 3.6vw, 22px) !important;
      height: clamp(15px, 3.6vw, 22px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subactions {
      gap: clamp(30px, 7vw, 52px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: clamp(7.1px, 1.7vw, 11px) !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    body.okra-vintage-pdp .okra-pdp-r,
    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: min(590px, calc(100vw - 80px)) !important;
      max-width: min(590px, calc(100vw - 80px)) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__badge {
      height: 15px !important;
      padding: 0 12px !important;
      font-size: 7px !important;
      line-height: 15px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: clamp(34px, 4.6vw, 44px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: clamp(12.5px, 1.8vw, 15.5px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__price {
      font-size: clamp(30px, 3.6vw, 38px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      height: 44px !important;
      min-height: 44px !important;
      font-size: 13px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__utility {
      width: 44px !important;
      height: 44px !important;
    }
  }

  @media (max-width: 767px) {
    body.okra-vintage-pdp .okra-pdp-r,
    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: min(376px, calc(100vw - 48px)) !important;
      max-width: min(376px, calc(100vw - 48px)) !important;
    }
  }

  @media (max-width: 374px) {
    body.okra-vintage-pdp .okra-pdp-r,
    body.okra-vintage-pdp .sticky-top .tf-product-info-list.okra-pdp-r {
      width: calc(100vw - 44px) !important;
      max-width: calc(100vw - 44px) !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumbs {
      gap: 14px !important;
      margin-bottom: 54px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__thumb {
      width: 42px !important;
      height: 42px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__badge {
      height: 11px !important;
      font-size: 5.3px !important;
      line-height: 11px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__title {
      font-size: 21px !important;
      letter-spacing: .15em !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__desc {
      font-size: 8.8px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
      font-size: 8px !important;
    }

    body.okra-vintage-pdp .okra-pdp-r__subaction {
      font-size: 6.4px !important;
    }
  }


/* === OKRA MOBILE/TABLET DESCRIPTION SPEC PANEL ===
   Final override for the marked tab section only. Desktop >=1200px keeps the
   existing product/details treatment. */
.okra-mobile-spec {
  display: none;
}

.okra-desktop-spec-table {
  display: none;
}

.okra-desktop-spec-title {
  display: none;
}

@media (min-width: 1200px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) {
    padding-top: 58px !important;
    padding-bottom: 84px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    width: min(calc(100% - clamp(48px, 9vw, 180px)), 1480px) !important;
    margin: 0 auto !important;
    padding: clamp(32px, 3vw, 54px) clamp(30px, 4vw, 72px) !important;
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background:
      linear-gradient(rgba(210, 189, 136, 0.985), rgba(210, 189, 136, 0.985)),
      url("../images/texture/des-back.png") center center / 980px auto no-repeat !important;
    box-shadow: 0 24px 54px rgba(20, 12, 8, 0.16) !important;
    isolation: isolate !important;
    contain: layout paint !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    transform: none !important;
    transition:
      opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 180ms linear !important;
    transition-delay: 0ms !important;
    will-change: opacity !important;
    backface-visibility: hidden !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) !important;
    gap: clamp(24px, 3.4vw, 70px) !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #1f100a !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left {
    width: 100% !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6 {
    margin: 0 0 20px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #1f100a !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    margin: 0 0 24px !important;
    font-size: clamp(34px, 2.25vw, 44px) !important;
    line-height: 0.98 !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #172935 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    display: none !important;
    max-width: 650px !important;
    margin: 0 !important;
    font-size: clamp(15px, 0.95vw, 18px) !important;
    line-height: 1.68 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    color: #1f100a !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left > h6,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left > .okra-spec-list {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec {
    display: block !important;
    margin: 0 !important;
    --okra-spec-outer: clamp(184px, 13.45vw, 258px);
    --okra-spec-inner: clamp(74px, 5.45vw, 104px);
    --okra-spec-depth-h: var(--okra-spec-outer);
    --okra-spec-front-w: calc(var(--okra-spec-outer) + clamp(72px, 4.8vw, 92px));
    --okra-spec-front-h: calc(var(--okra-spec-outer) + 42px);
    --okra-spec-depth-w: clamp(64px, 5.4vw, 104px);
    --okra-spec-gap: clamp(28px, 3.8vw, 70px);
    --okra-spec-left: clamp(52px, 3.75vw, 72px);
    --okra-spec-guide-x: clamp(24px, 1.8vw, 34px);
  }

  body.okra-vintage-pdp .okra-mobile-spec__title {
    display: none !important;
    margin: 0 0 28px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #1f100a !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__drawing {
    display: grid !important;
    grid-template-columns: var(--okra-spec-front-w) var(--okra-spec-depth-w) !important;
    column-gap: var(--okra-spec-gap) !important;
    align-items: end !important;
    justify-content: end !important;
    width: min(100%, calc(var(--okra-spec-front-w) + var(--okra-spec-depth-w) + var(--okra-spec-gap))) !important;
    margin: 24px 0 0 auto !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec .okra-mobile-spec__table {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front {
    position: relative !important;
    width: var(--okra-spec-front-w) !important;
    height: var(--okra-spec-front-h) !important;
    margin-left: 0 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__outer {
    position: absolute !important;
    left: var(--okra-spec-left) !important;
    top: 0 !important;
    width: var(--okra-spec-outer) !important;
    height: var(--okra-spec-outer) !important;
    border: 2px solid rgba(31, 16, 10, 0.96) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__inner {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--okra-spec-inner) !important;
    height: var(--okra-spec-inner) !important;
    border: 2px solid rgba(31, 16, 10, 0.86) !important;
    transform: translate(-50%, -50%) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::before,
  body.okra-vintage-pdp .okra-mobile-spec__front::after {
    content: "" !important;
    position: absolute !important;
    background: rgba(31, 16, 10, 0.92) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::before {
    left: var(--okra-spec-guide-x) !important;
    top: 0 !important;
    width: 2px !important;
    height: var(--okra-spec-outer) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::after {
    left: var(--okra-spec-left) !important;
    top: calc(var(--okra-spec-outer) + 28px) !important;
    width: var(--okra-spec-outer) !important;
    height: 2px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__depth {
    position: relative !important;
    width: var(--okra-spec-depth-w) !important;
    height: var(--okra-spec-front-h) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__depth-line {
    position: absolute !important;
    left: clamp(20px, 1.6vw, 30px) !important;
    top: 0 !important;
    width: clamp(9px, 0.75vw, 14px) !important;
    height: var(--okra-spec-depth-h) !important;
    border: 2px solid rgba(31, 16, 10, 0.96) !important;
    background: transparent !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure {
    position: absolute !important;
    display: block !important;
    color: #1f100a !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--height {
    left: clamp(-28px, -1.45vw, -18px) !important;
    top: calc((var(--okra-spec-outer) / 2) - 5px) !important;
    transform: rotate(-90deg) !important;
    transform-origin: center !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--width {
    left: calc(var(--okra-spec-left) + (var(--okra-spec-outer) / 2) - 8px) !important;
    top: calc(var(--okra-spec-outer) + 41px) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--depth {
    left: clamp(12px, 1.1vw, 20px) !important;
    top: calc(var(--okra-spec-outer) + 41px) !important;
  }

  body.okra-vintage-pdp .okra-desktop-spec-title {
    display: block !important;
    margin: clamp(28px, 3vw, 44px) 0 22px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #1f100a !important;
  }

  body.okra-vintage-pdp .okra-desktop-spec-table,
  body.okra-vintage-pdp .okra-mobile-spec__table {
    display: grid !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.okra-vintage-pdp .okra-desktop-spec-table div,
  body.okra-vintage-pdp .okra-mobile-spec__table div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    min-height: 43px !important;
    border-bottom: 1px solid rgba(31, 16, 10, 0.5) !important;
  }

  body.okra-vintage-pdp .okra-desktop-spec-table dt,
  body.okra-vintage-pdp .okra-desktop-spec-table dd,
  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    margin: 0 !important;
    color: #1f100a !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  body.okra-vintage-pdp .okra-desktop-spec-table dd,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    text-align: right !important;
  }
}

@media (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) {
    margin: 0 !important;
    padding: 0 !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) > .container,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) > .container > .row,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) > .container > .row > .col-12 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-tabs.style-1 {
    width: 100% !important;
    position: relative !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 15px 18px 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 5.2vw, 30px) !important;
    overflow: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title {
    min-width: 0 !important;
    color: #2b1209 !important;
    font-size: clamp(10px, 2.55vw, 12px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title .inner {
    color: #2b1209 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title::after {
    bottom: -5px !important;
    height: 1px !important;
    background: #2b1209 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 25px 0 48px !important;
    overflow: visible !important;
    background: url("../images/texture/des-back.png") center top / cover no-repeat !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: 340px !important;
    max-width: calc(100vw - 44px) !important;
    margin: 0 auto !important;
    padding: 28px 27px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background:
      linear-gradient(rgba(210, 189, 136, 0.94), rgba(210, 189, 136, 0.94)),
      url("../images/texture/des-back.png") center center / 620px auto no-repeat !important;
    box-shadow: none !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2b1209 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left {
    width: 100% !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6 {
    margin: 0 0 12px !important;
    font-size: 7.6px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #2b1209 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    margin: 0 0 14px !important;
    font-size: 19px !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
    letter-spacing: 0.19em !important;
    text-transform: uppercase !important;
    color: #21303a !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    margin: 0 !important;
    font-size: clamp(9.5px, 2.35vw, 15px) !important;
    line-height: 1.64 !important;
    letter-spacing: .045em !important;
    text-align: justify !important;
    text-align-last: auto !important;
    text-transform: capitalize !important;
    color: #2b1209 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left > h6,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .left > .okra-spec-list {
    display: none !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec {
    display: block !important;
    margin-top: 22px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__title {
    margin: 0 0 18px !important;
    font-size: 7.6px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #2b1209 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__drawing {
    display: grid !important;
    grid-template-columns: 1fr 46px !important;
    column-gap: 21px !important;
    align-items: end !important;
    width: 214px !important;
    margin: 0 auto 24px !important;
    transform: scale(1.08) !important;
    transform-origin: top center !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front {
    position: relative !important;
    width: 116px !important;
    height: 110px !important;
    margin-left: 2px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__outer {
    position: absolute !important;
    left: 26px !important;
    top: 0 !important;
    width: 82px !important;
    height: 82px !important;
    border: 1px solid rgba(43, 18, 9, 0.86) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__inner {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(43, 18, 9, 0.7) !important;
    transform: translate(-50%, -50%) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::before,
  body.okra-vintage-pdp .okra-mobile-spec__front::after {
    content: "" !important;
    position: absolute !important;
    background: rgba(43, 18, 9, 0.78) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::before {
    left: 15px !important;
    top: 0 !important;
    width: 1px !important;
    height: 82px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::after {
    left: 26px !important;
    top: 94px !important;
    width: 82px !important;
    height: 1px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__depth {
    position: relative !important;
    width: 31px !important;
    height: 110px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__depth-line {
    position: absolute !important;
    left: 11px !important;
    top: 0 !important;
    width: 5px !important;
    height: 82px !important;
    border: 1px solid rgba(43, 18, 9, 0.86) !important;
    background: transparent !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure {
    position: absolute !important;
    display: block !important;
    color: #2b1209 !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 6px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--height {
    left: -4px !important;
    top: 37px !important;
    transform: rotate(-90deg) !important;
    transform-origin: center !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--width {
    left: 54px !important;
    top: 101px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure--depth {
    left: 3px !important;
    top: 101px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    min-height: 27px !important;
    border-bottom: 1px solid rgba(43, 18, 9, 0.34) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    margin: 0 !important;
    color: #2b1209 !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    text-align: right !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    padding-top: 18px !important;
    padding-bottom: 16px !important;
    gap: clamp(36px, 5.8vw, 68px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title {
    font-size: clamp(12px, 1.55vw, 15px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    padding-top: 42px !important;
    padding-bottom: 54px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: 620px !important;
    max-width: calc(100vw - 140px) !important;
    padding: 50px 52px 52px !important;
    background-size: 900px auto !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6,
  body.okra-vintage-pdp .okra-mobile-spec__title {
    font-size: 10px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: 28px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: clamp(12.5px, 1.8vw, 15.5px) !important;
    line-height: 1.64 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec {
    margin-top: 30px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__drawing {
    transform: scale(1.58) !important;
    transform-origin: top center !important;
    margin-top: 8px !important;
    margin-bottom: 72px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table div {
    min-height: 34px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    font-size: 9px !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    gap: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title {
    font-size: 9px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    padding: 23px 20px 24px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: 14px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: 8.8px !important;
    line-height: 1.64 !important;
  }
}

@media (max-width: 767px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: calc(100% - 28px) !important;
    max-width: 384px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 30px 32px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6,
  body.okra-vintage-pdp .okra-mobile-spec__title {
    font-size: 8.2px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: clamp(20px, 5.2vw, 23px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: clamp(9.5px, 2.35vw, 15px) !important;
    line-height: 1.64 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec {
    margin-top: 24px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__drawing {
    transform: scale(1.18) !important;
    margin-top: 6px !important;
    margin-bottom: 42px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table div {
    min-height: 29px !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    font-size: 7.4px !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* === OKRA MOBILE/TABLET TYPOGRAPHY PASS ===
   Font-size-only refinement for readability. Keeps existing layout, spacing,
   widths, backgrounds, and component structure intact. */
@media (max-width: 1199px) {
  body.okra-vintage-pdp {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.okra-vintage-pdp .okra-crumb-line {
    font-size: clamp(11px, 2.65vw, 14px) !important;
    line-height: 1.3 !important;
  }

  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-link,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-current,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-sep {
    font-size: clamp(10.5px, 2.55vw, 15.5px) !important;
    line-height: 1.66 !important;
  }

  body.okra-vintage-pdp .okra-cart-count {
    font-size: 13px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__badge {
    font-size: clamp(6px, 1.45vw, 7.5px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__title {
    font-size: clamp(28px, 6.65vw, 42px) !important;
    line-height: 1.06 !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__desc {
    font-size: clamp(10.5px, 2.55vw, 15.5px) !important;
    line-height: 1.66 !important;
    letter-spacing: .04em !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__price {
    font-size: clamp(24px, 5.7vw, 38px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-label {
    font-size: clamp(9.5px, 2.2vw, 12.5px) !important;
    line-height: 1.2 !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__size-head span,
  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-name,
  body.okra-vintage-pdp .okra-pdp-r__size-meta,
  body.okra-vintage-pdp .okra-pdp-r__size-depth,
  body.okra-vintage-pdp .okra-pdp-r__size-price {
    font-size: clamp(8.5px, 2.05vw, 11.5px) !important;
    line-height: 1.1 !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
    font-size: clamp(9px, 2.15vw, 12px) !important;
    line-height: 1.1 !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__subaction {
    font-size: clamp(7.6px, 1.8vw, 10.5px) !important;
    line-height: 1.25 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title {
    font-size: clamp(11px, 2.55vw, 13px) !important;
    line-height: 1.16 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6,
  body.okra-vintage-pdp .okra-mobile-spec__title {
    font-size: clamp(8.5px, 2vw, 10.5px) !important;
    line-height: 1.15 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: clamp(22px, 5.2vw, 28px) !important;
    line-height: 1.08 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: clamp(10.5px, 2.55vw, 15.5px) !important;
    line-height: 1.66 !important;
    letter-spacing: .04em !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__measure {
    font-size: clamp(6.8px, 1.6vw, 8px) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    font-size: clamp(7.8px, 1.9vw, 10px) !important;
    line-height: 1.05 !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .tab-product a,
  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .title,
  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .price {
    font-size: clamp(10px, 2.4vw, 13px) !important;
    line-height: 1.25 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp .okra-crumb-line {
    font-size: clamp(13px, 1.45vw, 16px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-link,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-current,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-sep {
    font-size: clamp(14px, 1.7vw, 17px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__title {
    font-size: clamp(38px, 4.8vw, 48px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__desc,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: clamp(14px, 1.7vw, 17px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__row-label,
  body.okra-vintage-pdp .okra-pdp-r__size-head span,
  body.okra-vintage-pdp .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-name,
  body.okra-vintage-pdp .okra-pdp-r__size-meta,
  body.okra-vintage-pdp .okra-pdp-r__size-depth,
  body.okra-vintage-pdp .okra-pdp-r__size-price {
    font-size: clamp(11px, 1.35vw, 13.5px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab .item-title {
    font-size: clamp(13px, 1.45vw, 16px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6,
  body.okra-vintage-pdp .okra-mobile-spec__title {
    font-size: clamp(10.5px, 1.25vw, 12.5px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: clamp(30px, 3.8vw, 38px) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    font-size: clamp(10px, 1.2vw, 12px) !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__title {
    font-size: 22px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__desc,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-line,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-link,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-current,
  body.okra-vintage-pdp .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb .okra-crumb-sep,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary {
    font-size: 9.4px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    font-size: 19px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
    font-size: 8.4px !important;
  }
}

/* === OKRA MOBILE/TABLET GALLERY SWIPE === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-mobile-hero {
    position: relative !important;
    overflow: hidden !important;
    contain: paint;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: grab;
  }

  body.okra-vintage-pdp .okra-mobile-hero:active {
    cursor: grabbing;
  }

  body.okra-vintage-pdp .okra-mobile-hero.is-swipe-locked,
  body.okra-vintage-pdp .okra-mobile-dots.is-swipe-locked {
    touch-action: none !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero img,
  body.okra-vintage-pdp .okra-mobile-hero [data-mobile-hero-img] {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    transition: opacity 120ms ease;
  }

  body.okra-vintage-pdp .okra-mobile-hero__slide {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    will-change: transform;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  body.okra-vintage-pdp .okra-mobile-hero img,
  body.okra-vintage-pdp .okra-mobile-hero__slide {
    transition: none !important;
  }
}

/* === OKRA MOBILE/TABLET GALLERY DOT PILL === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-mobile-dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: pan-y !important;
    width: auto !important;
    min-width: 62px !important;
    height: 23px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 13px !important;
    gap: 7px !important;
    border-radius: 999px !important;
    background: rgba(248, 244, 236, 0.96) !important;
    box-shadow:
      0 9px 22px rgba(43, 18, 9, 0.08),
      inset 0 0 0 1px rgba(85, 25, 18, 0.035) !important;
  }

  body.okra-vintage-pdp .okra-mobile-dot {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    flex: 0 0 8px !important;
  }

  body.okra-vintage-pdp .okra-mobile-dot::before {
    content: "" !important;
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(43, 18, 9, 0.18) !important;
    transform: scale(1) !important;
    transition:
      width 180ms ease,
      height 180ms ease,
      background-color 180ms ease,
      transform 180ms ease !important;
  }

  body.okra-vintage-pdp .okra-mobile-dot.active::before,
  body.okra-vintage-pdp .okra-mobile-dot[aria-current="true"]::before {
    width: 7px !important;
    height: 7px !important;
    background: #b75b41 !important;
    transform: scale(1.02) !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-mobile-dots {
    min-width: 58px !important;
    height: 22px !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }
}

/* === OKRA MOBILE/TABLET SPEC CARD CONTRAST === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    background:
      linear-gradient(rgba(210, 189, 136, 0.985), rgba(210, 189, 136, 0.985)),
      url("../images/texture/des-back.png") center center / 620px auto no-repeat !important;
    box-shadow: 0 18px 36px rgba(20, 12, 8, 0.12) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right h6,
  body.okra-vintage-pdp .okra-mobile-spec__title {
    color: #1d0e08 !important;
    font-weight: 700 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .okra-tab-title {
    color: #172935 !important;
    font-weight: 500 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .tab-description .right p.text_secondary,
  body.okra-vintage-pdp .okra-mobile-spec__measure,
  body.okra-vintage-pdp .okra-mobile-spec__table dt,
  body.okra-vintage-pdp .okra-mobile-spec__table dd {
    color: #1f100a !important;
    font-weight: 500 !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__outer,
  body.okra-vintage-pdp .okra-mobile-spec__depth-line {
    border-color: rgba(31, 16, 10, 0.96) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__inner {
    border-color: rgba(31, 16, 10, 0.86) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__front::before,
  body.okra-vintage-pdp .okra-mobile-spec__front::after {
    background: rgba(31, 16, 10, 0.9) !important;
  }

  body.okra-vintage-pdp .okra-mobile-spec__table div {
    border-bottom-color: rgba(31, 16, 10, 0.5) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    background:
      linear-gradient(rgba(210, 189, 136, 0.985), rgba(210, 189, 136, 0.985)),
      url("../images/texture/des-back.png") center center / 900px auto no-repeat !important;
  }
}

/* === OKRA MOBILE/TABLET MODERN GALLERY CAROUSEL === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-mobile-hero.is-carousel-ready > [data-mobile-hero-img] {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero__track {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important;
    transform: translate3d(0, 0, 0);
  }

  body.okra-vintage-pdp .okra-mobile-hero__pane {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: rgba(244, 237, 224, 0.42) !important;
    transform: translateZ(0);
    backface-visibility: hidden !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero__pane img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    transform: translateZ(0);
    backface-visibility: hidden !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero.is-swiping .okra-mobile-hero__track {
    transition: none !important;
  }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  body.okra-vintage-pdp .okra-mobile-hero__track {
    transition: none !important;
  }
}

/* === OKRA MOBILE/TABLET SIZE ROW STEPPER TOUCH TARGET === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-action {
    min-width: 78px !important;
    overflow: visible !important;
  }

  body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
  body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
    display: inline-grid !important;
    grid-template-columns: 24px 22px 24px !important;
    align-items: center !important;
    justify-content: end !important;
    column-gap: 4px !important;
    min-width: 78px !important;
    height: 32px !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #1f100a !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    touch-action: manipulation !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn:active {
    background: rgba(43, 18, 9, 0.08) !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn:focus-visible {
    outline: 1px solid #551912 !important;
    outline-offset: 2px !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: #050505 !important;
    color: #ffffff !important;
    font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-action {
    min-width: 96px !important;
  }

  body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
  body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
    grid-template-columns: 30px 28px 30px !important;
    column-gap: 5px !important;
    min-width: 96px !important;
    height: 36px !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 36px !important;
    font-size: 21px !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-num {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__size-action {
    min-width: 70px !important;
  }

  body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
  body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
    grid-template-columns: 22px 20px 22px !important;
    column-gap: 3px !important;
    min-width: 70px !important;
    height: 30px !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-btn {
    width: 22px !important;
    min-width: 22px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  body.okra-vintage-pdp .okra-size-stepper-num {
    width: 20px !important;
    min-width: 20px !important;
    height: 22px !important;
    font-size: 9.5px !important;
  }
}

/* === OKRA MOBILE/TABLET SIZE GUIDE COLUMN INSET === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-action,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-price {
    transform: translateX(-13px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-action,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-price {
    transform: translateX(-18px) !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head .okra-pdp-r__sizeguide-trigger,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-action,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-price {
    transform: translateX(-8px) !important;
  }
}

/* === OKRA MOBILE/TABLET HEIGHT COLUMN INSET === */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head > span:first-child,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-name {
    transform: translateX(13px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head > span:first-child,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-name {
    transform: translateX(18px) !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__size-head > span:first-child,
  body.okra-vintage-pdp .okra-pdp-r__size-list .okra-pdp-r__size-name {
    transform: translateX(8px) !important;
  }
}

/* === OKRA PDP TAB STABILITY ===
   Keeps the patterned background and yellow card stable while only tab content fades. */
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("../images/texture/des-back.png") center center / cover no-repeat !important;
  transform: none !important;
  will-change: auto !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) > .container {
  position: relative !important;
  z-index: 1 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner:not(.active) {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
  position: relative !important;
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  transform: none !important;
  height: auto !important;
  overflow: visible !important;
  animation: okraPdpTabFadeIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active > * {
  animation: okraPdpTabContentIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform, clip-path;
}

@keyframes okraPdpTabFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes okraPdpTabContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    clip-path: inset(0 0 10px 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active > * {
    animation: none !important;
  }
}

@media (min-width: 1200px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    height: auto !important;
    min-height: clamp(430px, 29vw, 560px) !important;
    background:
      linear-gradient(rgba(210, 189, 136, 0.985), rgba(210, 189, 136, 0.985)),
      url("../images/texture/des-back.png") center center / 980px auto no-repeat !important;
    background-attachment: scroll !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner.active {
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    top: -44px !important;
    margin: 0 auto -34px !important;
    padding: 12px 18px 10px !important;
    overflow: visible !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    width: 340px !important;
    max-width: calc(100vw - 44px) !important;
    margin: 0 auto !important;
    padding: 28px 27px 28px !important;
    box-sizing: border-box !important;
    background:
      linear-gradient(rgba(210, 189, 136, 0.985), rgba(210, 189, 136, 0.985)),
      url("../images/texture/des-back.png") center center / 620px auto no-repeat !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    top: -50px !important;
    margin-bottom: -38px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    height: auto !important;
    min-height: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    width: 620px !important;
    max-width: calc(100vw - 140px) !important;
    padding: 50px 52px 52px !important;
    background-size: 900px auto !important;
  }
}

@media (max-width: 767px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    height: auto !important;
    min-height: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    width: calc(100% - 28px) !important;
    max-width: 384px !important;
    padding: 30px 30px 32px !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab {
    height: auto !important;
    min-height: 0 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab .widget-content-inner {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    padding: 23px 20px 24px !important;
  }
}

/* Final optical centering for the PDP pre-order badge. */
body.okra-vintage-pdp .okra-pdp-r__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__badge::before {
  content: attr(data-label);
  display: block;
  font-size: clamp(7px, 1.45vw, 14px) !important;
  line-height: 1 !important;
  transform: translateY(1.5px);
}

/* Final responsive PNG artwork background. Mobile/iPad only. */
@media (max-width: 1199px) {
  body.okra-vintage-pdp .slider-scroll {
    width: min(376px, calc(100vw - 54px)) !important;
    max-width: calc(100vw - 54px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding: 100px 0 0 !important;
    background-color: rgba(233, 227, 208, 0.79) !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero,
  body.okra-vintage-pdp .okra-mobile-hero__pane {
    background-color: rgba(233, 227, 208, 0.79) !important;
  }

  body.okra-vintage-pdp .okra-mobile-hero {
    background-color: transparent !important;
  }

  body.okra-vintage-pdp .okra-mobile-dots {
    margin-bottom: 30px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumbs {
    width: min(376px, calc(100vw - 54px)) !important;
    max-width: calc(100vw - 54px) !important;
    margin: 0 auto 28px !important;
    padding: 10px 0 30px !important;
    background-color: rgba(233, 227, 208, 0.79) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp .slider-scroll,
  body.okra-vintage-pdp .okra-pdp-r__thumbs {
    width: min(620px, calc(100vw - 140px)) !important;
    max-width: calc(100vw - 140px) !important;
  }
}

/* Final purchase layout: quantity belongs below the size table, not inside rows. */
body.okra-vintage-pdp .okra-size-stepper,
body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-stepper,
body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-stepper {
  display: none !important;
}

body.okra-vintage-pdp .okra-size-row.is-selected .okra-size-price,
body.okra-vintage-pdp .okra-pdp-r__size-list input[type="radio"]:checked + .okra-size-row .okra-size-price {
  display: inline-flex !important;
}

body.okra-vintage-pdp .okra-pdp-r__size-block {
  margin-bottom: clamp(22px, 2.3vw, 34px) !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas {
  display: grid !important;
  grid-template-columns: clamp(84px, 7vw, 112px) minmax(0, 1fr) auto !important;
  grid-template-areas:
    "qty add utility"
    "pre pre pre" !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 clamp(18px, 2vw, 30px) !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__row-qty {
  grid-area: qty !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__quant-stepper {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  width: 100% !important;
  height: clamp(38px, 3.2vw, 46px) !important;
  border: 1px solid #1a1008 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.okra-vintage-pdp .okra-pdp-r__quant-btn,
body.okra-vintage-pdp .okra-pdp-r__quant-input {
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #1a1008 !important;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1 !important;
}

body.okra-vintage-pdp .okra-pdp-r__quant-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  padding: 0 !important;
  font-size: clamp(14px, 1.25vw, 18px) !important;
  cursor: pointer !important;
}

body.okra-vintage-pdp .okra-pdp-r__quant-input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  border-left: 0 !important;
  border-right: 0 !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  letter-spacing: .08em !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--outline {
  grid-area: add !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility-group {
  grid-area: utility !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--fill {
  grid-area: pre !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn,
body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility {
  height: clamp(38px, 3.2vw, 46px) !important;
  min-height: 0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
  border-radius: 5px !important;
  font-size: clamp(12px, 1vw, 16px) !important;
  letter-spacing: .2em !important;
  white-space: nowrap !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--outline {
  background: #2C2C2C !important;
  border-color: #2C2C2C !important;
  color: #ffffff !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--fill {
  background: #551912 !important;
  border-color: #551912 !important;
  color: #f4ede0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(38px, 3.2vw, 46px) !important;
  padding: 0 !important;
  border: 1px solid #1a1008 !important;
  border-radius: 5px !important;
  background: transparent !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility + .okra-pdp-r__utility {
  margin-left: 7px !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility span {
  display: none !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility svg {
  width: clamp(18px, 1.55vw, 24px) !important;
  height: clamp(18px, 1.55vw, 24px) !important;
  stroke-width: 1.7 !important;
}

body.okra-vintage-pdp .okra-pdp-gallery-arrow:focus,
body.okra-vintage-pdp .okra-pdp-gallery-arrow:focus-visible,
body.okra-vintage-pdp .okra-pdp-gallery-arrow:active {
  outline: 0 !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__action-message {
  grid-column: 1 / -1 !important;
  margin: -2px 0 0 !important;
  color: #551912 !important;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  line-height: 1.45 !important;
}

body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__action-message[hidden] {
  display: none !important;
}

@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__size-block {
    margin-bottom: 24px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas {
    grid-template-columns: 84px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__quant-stepper,
  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn,
  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility {
    height: 36px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__quant-stepper {
    grid-template-columns: 26px minmax(0, 1fr) 26px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__quant-btn {
    width: 26px !important;
    font-size: 14px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__quant-input {
    font-size: 11px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
    font-size: clamp(12px, 2.15vw, 12px) !important;
    letter-spacing: .16em !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility {
    width: 32px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility svg {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__ctas {
    grid-template-columns: 78px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility {
    width: 30px !important;
  }
}

body.okra-vintage-pdp .pswp__img {
  object-fit: contain !important;
  object-position: center !important;
}

/* OKRA cart badge: dot only, color follows the PDP cart icon/link. */
html body.okra-vintage-pdp .okra-cart-link {
  color: #551912 !important;
}

html body.okra-vintage-pdp .okra-cart-link .okra-cart-count[data-cart-count],
html body.okra-vintage-pdp .okra-cart-link .okra-cart-count.count-box {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
  bottom: auto !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: currentColor !important;
  color: inherit !important;
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

html body.okra-vintage-pdp .okra-cart-link.has-items .okra-cart-count[data-cart-count],
html body.okra-vintage-pdp .okra-cart-link.has-items .okra-cart-count.count-box {
  display: block !important;
}

html body.okra-vintage-pdp .okra-cart-link .okra-cart-count::before,
html body.okra-vintage-pdp .okra-cart-link .okra-cart-count::after {
  content: none !important;
}

/* Wishlist microinteraction: restrained OKRA pulse, ring, and save burst. */
html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle] {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]:hover,
html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]:focus-visible {
  border-color: #551912 !important;
  color: #551912 !important;
  transform: translateY(-1px) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-share-product] {
  transform: translateZ(0) !important;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-share-product]:hover,
html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-share-product]:focus-visible {
  border-color: #551912 !important;
  color: #551912 !important;
  transform: translateY(-1px) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]:active {
  transform: translateY(0) scale(0.94) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle] svg {
  position: relative !important;
  z-index: 2 !important;
  transform-origin: center !important;
  transition:
    fill 180ms ease,
    color 180ms ease,
    stroke-width 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-active {
  border-color: rgba(85, 25, 18, 0.74) !important;
  color: #551912 !important;
  background: rgba(85, 25, 18, 0.035) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-active svg {
  fill: currentColor !important;
  stroke-width: 1.35 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::before,
html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::before {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(85, 25, 18, 0.52);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::after {
  width: 5px;
  height: 5px;
  background: #551912;
  box-shadow:
    0 -18px 0 #551912,
    16px -9px 0 rgba(85, 25, 18, 0.82),
    16px 10px 0 rgba(85, 25, 18, 0.72),
    0 19px 0 rgba(85, 25, 18, 0.82),
    -16px 9px 0 rgba(85, 25, 18, 0.72),
    -16px -10px 0 rgba(85, 25, 18, 0.82);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-burst {
  animation: okraWishlistButtonSave 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-burst svg {
  animation: okraWishlistHeartSave 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-burst::before {
  animation: okraWishlistRing 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-burst::after {
  animation: okraWishlistParticles 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-soft {
  animation: okraWishlistButtonRemove 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle].is-wishlist-soft svg {
  animation: okraWishlistHeartRemove 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes okraWishlistButtonSave {
  0% { transform: scale(1); }
  34% { transform: scale(0.9); }
  68% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes okraWishlistHeartSave {
  0% { transform: scale(1); fill: transparent; }
  40% { transform: scale(0.72); fill: currentColor; }
  72% { transform: scale(1.24); fill: currentColor; }
  100% { transform: scale(1); fill: currentColor; }
}

@keyframes okraWishlistRing {
  0% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.72);
  }
}

@keyframes okraWishlistParticles {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  24% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes okraWishlistButtonRemove {
  0% { transform: scale(1); }
  45% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes okraWishlistHeartRemove {
  0% { transform: scale(1); }
  55% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle],
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle] svg,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::before,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__utility[data-wishlist-toggle]::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Add-to-cart confirmation sheet. */
html body.okra-vintage-pdp .okra-add-confirm {
  position: fixed;
  top: clamp(74px, 7.8vw, 118px);
  right: clamp(16px, 3.8vw, 58px);
  z-index: 980;
  width: min(520px, calc(100vw - 32px));
  border: 1px solid #e8e8e8;
  background: #ffffff;
  color: #161616;
  box-shadow: 0 26px 70px rgba(20, 14, 10, 0.16);
  padding: clamp(18px, 2.2vw, 24px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body.okra-vintage-pdp .okra-add-confirm.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

html body.okra-vintage-pdp .okra-add-confirm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

html body.okra-vintage-pdp .okra-add-confirm__head p {
  margin: 0;
  color: #161616;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 300;
  line-height: 1;
}

html body.okra-vintage-pdp .okra-add-confirm__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #161616;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms ease;
}

html body.okra-vintage-pdp .okra-add-confirm__close:hover,
html body.okra-vintage-pdp .okra-add-confirm__close:focus-visible {
  color: #551912;
  transform: rotate(90deg);
}

html body.okra-vintage-pdp .okra-add-confirm__product {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

html body.okra-vintage-pdp .okra-add-confirm__product img {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 7px;
  background: #f6f6f4;
  box-sizing: border-box;
}

html body.okra-vintage-pdp .okra-add-confirm__product h2 {
  margin: 0;
  color: #161616;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.01em;
}

html body.okra-vintage-pdp .okra-add-confirm__product p {
  margin: 8px 0 0;
  color: #161616;
  font-size: 15px;
  line-height: 1.2;
}

html body.okra-vintage-pdp .okra-add-confirm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #6f6a64;
  font-size: 15px;
  line-height: 1.25;
}

html body.okra-vintage-pdp .okra-add-confirm__row + .okra-add-confirm__row {
  margin-top: 12px;
}

html body.okra-vintage-pdp .okra-add-confirm__row strong {
  color: inherit;
  font-weight: 400;
}

html body.okra-vintage-pdp .okra-add-confirm__row--total {
  color: #161616;
}

html body.okra-vintage-pdp .okra-add-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

html body.okra-vintage-pdp .okra-add-confirm__actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #161616;
  color: #161616;
  background: #ffffff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-add-confirm__actions a:last-child {
  background: #000000;
  color: #ffffff;
}

html body.okra-vintage-pdp .okra-add-confirm__actions a:hover,
html body.okra-vintage-pdp .okra-add-confirm__actions a:focus-visible {
  transform: translateY(-1px);
}

/* Add-to-cart microinteraction: button confirms, cart icon receives, sheet appears. */
html body.okra-vintage-pdp [data-okra-add-cart] {
  position: relative !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp [data-okra-add-cart]::after {
  content: "";
  position: absolute;
  inset: -1px auto -1px -68%;
  width: 58%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-18deg);
  z-index: 1;
}

html body.okra-vintage-pdp [data-okra-add-cart] > * {
  position: relative;
  z-index: 2;
}

html body.okra-vintage-pdp [data-okra-add-cart].is-cart-adding {
  pointer-events: none !important;
  animation: okraCartButtonPress 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp [data-okra-add-cart].is-cart-adding::after {
  animation: okraCartButtonSheen 660ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body.okra-vintage-pdp [data-okra-add-cart].is-cart-added {
  border-color: #551912 !important;
  box-shadow: 0 0 0 3px rgba(85, 25, 18, 0.1) !important;
}

html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving {
  animation: okraCartLinkReceive 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving img {
  animation: okraCartIconReceive 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving .okra-cart-count {
  animation: okraCartBadgePop 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes okraCartButtonPress {
  0% { transform: scale(1); }
  34% { transform: scale(0.975); }
  70% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes okraCartButtonSheen {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(310%) skewX(-18deg);
  }
}

@keyframes okraCartLinkReceive {
  0% { transform: scale(1); }
  38% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes okraCartIconReceive {
  0% { transform: scale(1); }
  42% { transform: scale(0.86); }
  78% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes okraCartBadgePop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  48% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.okra-vintage-pdp .okra-add-confirm,
  html body.okra-vintage-pdp .okra-add-confirm__close,
  html body.okra-vintage-pdp .okra-add-confirm__actions a,
  html body.okra-vintage-pdp [data-okra-add-cart],
  html body.okra-vintage-pdp [data-okra-add-cart]::after,
  html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving,
  html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving img,
  html body.okra-vintage-pdp .okra-cart-link.is-cart-receiving .okra-cart-count {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp .okra-add-confirm {
    top: 66px;
    right: 0;
    left: 0;
    width: auto;
    border-right: 0;
    border-left: 0;
    padding: 20px 22px 22px;
    transform-origin: top center;
    box-shadow: 0 18px 50px rgba(20, 14, 10, 0.13);
  }

  html body.okra-vintage-pdp .okra-add-confirm__actions {
    gap: 10px;
  }

  html body.okra-vintage-pdp .okra-add-confirm__actions a {
    min-height: 44px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  html body.okra-vintage-pdp .okra-add-confirm__actions {
    grid-template-columns: 1fr;
  }
}

/* Six-image PDP gallery support */
body.okra-vintage-pdp .okra-pdp-r__thumbs {
  flex-wrap: wrap !important;
}

body.okra-vintage-pdp .okra-pdp-r__thumb img {
  background: transparent !important;
}

body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumbs {
  display: grid !important;
  grid-template-columns: repeat(6, clamp(44px, 3.1vw, 58px)) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: clamp(8px, 0.8vw, 14px) !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 clamp(26px, 2.4vw, 38px) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumb {
  display: block !important;
  width: clamp(44px, 3.1vw, 58px) !important;
  height: clamp(44px, 3.1vw, 58px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumb.active,
body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumb[aria-current="true"] {
  border: 1px solid rgba(38, 33, 28, 0.48) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(255, 250, 243, 0.56) !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  body.okra-vintage-pdp .okra-pdp-r__thumbs {
    justify-content: center !important;
    gap: clamp(8px, 2.6vw, 12px) !important;
  }

  body.okra-vintage-pdp .okra-pdp-r__thumb {
    width: clamp(38px, 10vw, 48px) !important;
    height: clamp(38px, 10vw, 48px) !important;
  }

  body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumbs {
    grid-template-columns: repeat(6, clamp(34px, 10vw, 44px)) !important;
    justify-content: center !important;
    gap: clamp(6px, 1.8vw, 9px) !important;
    width: 100% !important;
  }

  body.okra-vintage-pdp.okra-dom-frame-pdp .okra-pdp-r__thumb {
    width: clamp(34px, 10vw, 44px) !important;
    height: clamp(34px, 10vw, 44px) !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-pdp-r__thumb {
    width: 36px !important;
    height: 36px !important;
  }
}

/* DOM PDP price scale */
body.okra-vintage-pdp .okra-pdp-r__price-panel .okra-pdp-r__price,
body.okra-vintage-pdp .okra-pdp-r__price {
  font-size: clamp(28px, 2.15vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: .055em !important;
}

@media (max-width: 767px) {
  body.okra-vintage-pdp .okra-pdp-r__price-panel .okra-pdp-r__price,
  body.okra-vintage-pdp .okra-pdp-r__price {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
}

/* Main PDP CTA hover polish */
html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
  transform: translate3d(0, 0, 0) !important;
  transform-origin: center !important;
  will-change: transform, box-shadow, background-color, color !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:not(.is-disabled):hover,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:not(.is-disabled):focus-visible {
    transform: translate3d(0, -2px, 0) !important;
    box-shadow: 0 12px 24px rgba(43, 18, 9, 0.16) !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--outline:not(.is-disabled):hover,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--outline:not(.is-disabled):focus-visible {
    background: #161616 !important;
    border-color: #161616 !important;
    color: #fff8ee !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--fill:not(.is-disabled):hover,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn--fill:not(.is-disabled):focus-visible {
    background: #3f0f09 !important;
    border-color: #3f0f09 !important;
    color: #fff8ee !important;
  }
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:not(.is-disabled):active {
  transform: translate3d(0, 0, 0) scale(0.99) !important;
  box-shadow: 0 5px 12px rgba(43, 18, 9, 0.12) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:hover,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:focus-visible,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .okra-pdp-r__btn:active {
    transform: none !important;
  }
}

/* Reusable luxury horizontal wipe for primary PDP CTAs. */
html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn {
  --luxury-wipe-fill: rgba(31, 20, 14, 0.42);
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--luxury-wipe-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  pointer-events: none;
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn.okra-pdp-r__btn--outline {
  --luxury-wipe-fill: rgba(35, 23, 16, 0.48);
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn.okra-pdp-r__btn--fill {
  --luxury-wipe-fill: rgba(20, 5, 4, 0.46);
}

@media (hover: hover) and (pointer: fine) {
  html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover::before,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):focus-visible::before {
    transform: scaleX(1);
  }

  html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover,
  html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):focus-visible {
    transform: translate3d(0, 0, 0) !important;
  }
}

html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn.is-disabled::before,
html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn:disabled::before,
html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn[aria-disabled="true"]::before {
  transform: scaleX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.okra-vintage-pdp .okra-pdp-r__ctas .luxury-wipe-btn::before {
    transition: none;
  }
}

/* PDP quantity button microinteraction */
html body.okra-vintage-pdp .okra-pdp-r__quant-stepper {
  transition:
    border-color 180ms ease,
    box-shadow 220ms ease,
    background-color 180ms ease !important;
}

html body.okra-vintage-pdp .okra-pdp-r__quant-stepper:focus-within,
html body.okra-vintage-pdp .okra-pdp-r__quant-stepper:hover {
  border-color: rgba(85, 25, 18, 0.45) !important;
  box-shadow: 0 8px 18px rgba(43, 18, 9, 0.08) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__quant-btn,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity,
html body.okra-vintage-pdp .okra-size-stepper-btn {
  position: relative !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__quant-btn::after,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity::after,
html body.okra-vintage-pdp .okra-size-stepper-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(85, 25, 18, 0.12), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  html body.okra-vintage-pdp .okra-pdp-r__quant-btn:hover,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:hover,
  html body.okra-vintage-pdp .okra-size-stepper-btn:hover {
    background-color: rgba(85, 25, 18, 0.08) !important;
    color: #1a1008 !important;
    transform: translate3d(0, -1px, 0) !important;
  }
}

html body.okra-vintage-pdp .okra-pdp-r__quant-btn:active,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:active,
html body.okra-vintage-pdp .okra-size-stepper-btn:active {
  background-color: rgba(85, 25, 18, 0.12) !important;
  box-shadow: inset 0 1px 3px rgba(43, 18, 9, 0.14) !important;
  transform: translate3d(0, 0, 0) scale(0.94) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__quant-btn:active::after,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:active::after,
html body.okra-vintage-pdp .okra-size-stepper-btn:active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

html body.okra-vintage-pdp .okra-pdp-r__quant-btn:focus-visible,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:focus-visible,
html body.okra-vintage-pdp .okra-size-stepper-btn:focus-visible {
  outline: 1px solid rgba(85, 25, 18, 0.8) !important;
  outline-offset: 2px !important;
}

html body.okra-vintage-pdp .okra-pdp-r__quant-input,
html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity input,
html body.okra-vintage-pdp .okra-size-stepper-num {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.okra-vintage-pdp .okra-pdp-r__quant-stepper,
  html body.okra-vintage-pdp .okra-pdp-r__quant-btn,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity,
  html body.okra-vintage-pdp .okra-size-stepper-btn,
  html body.okra-vintage-pdp .okra-pdp-r__quant-input,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity input,
  html body.okra-vintage-pdp .okra-size-stepper-num {
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__quant-btn,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity,
  html body.okra-vintage-pdp .okra-size-stepper-btn,
  html body.okra-vintage-pdp .okra-pdp-r__quant-btn:hover,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:hover,
  html body.okra-vintage-pdp .okra-size-stepper-btn:hover,
  html body.okra-vintage-pdp .okra-pdp-r__quant-btn:active,
  html body.okra-vintage-pdp .tf-sticky-btn-atc .wg-quantity .btn-quantity:active,
  html body.okra-vintage-pdp .okra-size-stepper-btn:active {
    transform: none !important;
  }
}

/* Custom print upload add-on */
html body.okra-vintage-pdp .okra-pdp-r__custom-print {
  margin: 0 0 18px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-message {
  border: 1px solid rgba(43, 18, 9, 0.24) !important;
  border-radius: 0 !important;
  background: rgba(246, 240, 232, 0.16) !important;
  box-shadow: none !important;
  resize: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 50px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 72px !important;
  padding: 14px 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle:hover,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle:focus-within {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-copy strong {
  color: #1a1008 !important;
  font-size: clamp(12px, 0.96vw, 15px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-copy small,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-choice,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-help,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-status,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-error,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-preview span {
  color: rgba(43, 18, 9, 0.7) !important;
  font-size: clamp(10px, 0.82vw, 12px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-choice {
  color: #551912 !important;
  font-size: clamp(9px, 0.72vw, 11px) !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 4px 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-panel:not([hidden]) {
  margin-top: 8px !important;
  padding: 12px 0 16px !important;
  border-top: 1px solid rgba(43, 18, 9, 0.26) !important;
  border-bottom: 1px solid rgba(43, 18, 9, 0.26) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-panel[hidden],
html body.okra-vintage-pdp .okra-pdp-r__custom-print-preview[hidden],
html body.okra-vintage-pdp .okra-pdp-r__custom-print-remove[hidden],
html body.okra-vintage-pdp .okra-pdp-r__custom-print-error[hidden] {
  display: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-upload,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-remove {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #1a1008 !important;
  background: #1a1008 !important;
  color: #ffffff !important;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-remove {
  background: transparent !important;
  color: #551912 !important;
  border-color: rgba(85, 25, 18, 0.42) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-upload:hover,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-remove:hover {
  transform: translateY(-1px) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-preview {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-panel,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-preview {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-preview img {
  width: 58px !important;
  height: 58px !important;
  object-fit: cover !important;
  display: block !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-help,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-status,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-error {
  margin: 0 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-error {
  color: #8b1d12 !important;
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    min-height: 62px !important;
    padding: 12px !important;
  }
}

@media (max-width: 1199px) {
  html body.okra-vintage-pdp .okra-pdp-r__custom-print {
    order: 8 !important;
    margin-bottom: clamp(18px, 4vw, 28px) !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__gift {
    order: 9 !important;
    display: block !important;
    margin-bottom: clamp(24px, 5vw, 36px) !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__ctas {
    order: 10 !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__subactions {
    order: 11 !important;
  }
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
    grid-template-columns: 28px minmax(0, 1fr) 42px !important;
    gap: 9px !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__gift-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__gift-copy strong {
    font-size: clamp(10px, 2.6vw, 13px) !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__gift-copy small {
    font-size: clamp(8px, 2.1vw, 10px) !important;
  }

  html body.okra-vintage-pdp .okra-pdp-r__gift-message {
    min-height: 104px !important;
    margin-top: 14px !important;
    padding: 12px !important;
    font-size: 12px !important;
  }
}

html body.okra-vintage-pdp {
  --okra-pdp-toggle-column: 58px;
  --okra-pdp-toggle-width: 48px;
  --okra-pdp-toggle-height: 24px;
  --okra-pdp-toggle-knob: 14px;
  --okra-pdp-toggle-knob-top: 5px;
  --okra-pdp-toggle-knob-left: 6px;
  --okra-pdp-toggle-travel: 22px;
}

html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle {
  grid-template-columns: minmax(0, 1fr) var(--okra-pdp-toggle-column) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-switch,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-switch {
  position: relative !important;
  justify-self: end !important;
  width: var(--okra-pdp-toggle-width) !important;
  height: var(--okra-pdp-toggle-height) !important;
  border: 1px solid rgba(85, 25, 18, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(85, 25, 18, 0.14) !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-switch::after,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-switch::after {
  content: "" !important;
  position: absolute !important;
  top: var(--okra-pdp-toggle-knob-top) !important;
  left: var(--okra-pdp-toggle-knob-left) !important;
  width: var(--okra-pdp-toggle-knob) !important;
  height: var(--okra-pdp-toggle-knob) !important;
  border-radius: 999px !important;
  background: #f3eee8 !important;
  box-shadow: 0 1px 4px rgba(43, 18, 9, 0.22) !important;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle input:checked ~ .okra-pdp-r__custom-print-switch {
  border-color: #551912 !important;
  background: #551912 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-toggle input:checked ~ .okra-pdp-r__gift-switch::after,
html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle input:checked ~ .okra-pdp-r__custom-print-switch::after {
  transform: translateX(var(--okra-pdp-toggle-travel)) !important;
}

@media (max-width: 1199px) {
  html body.okra-vintage-pdp {
    --okra-pdp-toggle-column: 42px;
    --okra-pdp-toggle-width: 40px;
    --okra-pdp-toggle-height: 20px;
    --okra-pdp-toggle-knob: 12px;
    --okra-pdp-toggle-knob-top: 4px;
    --okra-pdp-toggle-knob-left: 5px;
    --okra-pdp-toggle-travel: 18px;
  }
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp .okra-pdp-r__custom-print-toggle {
    grid-template-columns: minmax(0, 1fr) var(--okra-pdp-toggle-column) !important;
  }
}

html body.okra-vintage-pdp .okra-pdp-r__gift-copy {
  gap: 5px !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-icon {
  display: none !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
  grid-template-columns: minmax(0, 1fr) var(--okra-pdp-toggle-column) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 14px 0 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-copy strong {
  color: #1a1008 !important;
  font-size: clamp(12px, 0.96vw, 15px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

html body.okra-vintage-pdp .okra-pdp-r__gift-copy small {
  color: rgba(43, 18, 9, 0.7) !important;
  font-size: clamp(10px, 0.82vw, 12px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp .okra-pdp-r__gift-toggle {
    grid-template-columns: minmax(0, 1fr) var(--okra-pdp-toggle-column) !important;
    min-height: 62px !important;
    padding: 12px !important;
  }
}

@media (min-width: 1200px) {
  html body.okra-dom-frame-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    top: -88px !important;
    margin: -42px auto -6px !important;
  }

  html body.okra-dynamic-product-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-menu-tab {
    top: -88px !important;
    margin: -42px auto -6px !important;
  }
}

/* PDP related products: match the editorial shop grid treatment */
body.okra-vintage-pdp .okra-related-grid-style {
  position: relative !important;
  padding: clamp(62px, 6vw, 92px) 18px clamp(72px, 7vw, 108px) !important;
  background:
    linear-gradient(180deg, rgba(245, 234, 214, 0.18), rgba(238, 224, 203, 0.14)),
    url("../images/wood-3.png") center top / cover no-repeat !important;
  overflow: hidden !important;
}

body.okra-vintage-pdp .okra-related-grid-style > .container {
  max-width: 1320px !important;
  width: min(100%, 1320px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.okra-vintage-pdp .okra-related-grid-style .tab-product {
  margin: 0 auto clamp(42px, 4.5vw, 68px) !important;
  padding: 0 !important;
  gap: clamp(44px, 5vw, 84px) !important;
  border: 0 !important;
}

body.okra-vintage-pdp .okra-related-grid-style .tab-product .nav-tab-item a {
  color: rgba(85, 25, 18, 0.58) !important;
  font-size: clamp(12px, 0.92vw, 15px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  padding: 0 0 8px !important;
}

body.okra-vintage-pdp .okra-related-grid-style .tab-product .nav-tab-item a.active {
  color: #551912 !important;
  border-bottom: 1px solid #551912 !important;
}

body.okra-vintage-pdp .okra-related-grid-style .swiper {
  overflow: visible !important;
}

body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(24px, 2.6vw, 42px) !important;
  row-gap: clamp(54px, 5vw, 82px) !important;
  max-width: 1730px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  transition-duration: 0ms !important;
}

@media (min-width: 1200px) {
  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: min(100%, 430px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: min(100%, 880px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1320px !important;
  }

  @supports selector(:has(*)) {
    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(1):last-child) {
      grid-template-columns: minmax(0, 1fr) !important;
      max-width: min(100%, 430px) !important;
    }

    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(2):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      max-width: min(100%, 880px) !important;
    }

    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(3):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      max-width: 1320px !important;
    }
  }
}

body.okra-vintage-pdp .okra-related-grid-style .swiper-slide {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2vw, 30px) !important;
  margin: 0 !important;
  background: transparent !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: clamp(190px, 18vw, 320px) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: transform 220ms ease !important;
}

body.okra-vintage-pdp .okra-related-grid-style .image-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  transform: translateZ(0) !important;
  transition: transform 220ms ease !important;
}

body.okra-vintage-pdp .okra-related-grid-style .image-wrap::after,
body.okra-vintage-pdp .okra-related-grid-style .okra-hover-overlay {
  display: none !important;
}

body.okra-vintage-pdp .okra-related-grid-style .img-hover {
  display: none !important;
}

body.okra-vintage-pdp .okra-related-grid-style .img-product {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(190px, 18vw, 320px) !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transition: transform 220ms ease, opacity 220ms ease !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product:hover .image-wrap,
body.okra-vintage-pdp .okra-related-grid-style .card-product:focus-within .image-wrap {
  transform: translateY(-6px) !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product:hover .img-product,
body.okra-vintage-pdp .okra-related-grid-style .card-product:focus-within .img-product {
  opacity: 0.98 !important;
  transform: scale(1.015) !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info {
  --okra-related-info-size: clamp(12px, 0.74vw, 14px);
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 16px) !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(85, 25, 18, 0.28) !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info::after {
  content: none !important;
  display: none !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .title,
body.okra-vintage-pdp .okra-related-grid-style .card-product-info .price,
body.okra-vintage-pdp .okra-related-grid-style .card-product-info .current-price {
  color: #49301c !important;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  font-size: var(--okra-related-info-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: calc(var(--okra-related-info-size) * 1.35) !important;
  height: calc(var(--okra-related-info-size) * 1.35) !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #49301c !important;
  cursor: pointer !important;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  font-size: calc(var(--okra-related-info-size) * 1.15) !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  opacity: 0.92 !important;
  text-transform: none !important;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button span {
  display: inline-block !important;
  pointer-events: none !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button:hover,
body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button:focus-visible {
  color: #551912 !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button:focus-visible {
  outline: 1px solid rgba(85, 25, 18, 0.55) !important;
  outline-offset: 3px !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button.is-cart-adding,
body.okra-vintage-pdp .okra-related-grid-style .card-product-info .okra-card-cart-button.is-cart-added {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .title {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .price {
  display: block !important;
  min-width: max-content !important;
  max-width: max-content !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

body.okra-vintage-pdp .okra-related-grid-style .card-product-info .current-price {
  display: block !important;
}

body.okra-vintage-pdp .okra-related-grid-style .sw-dots,
body.okra-vintage-pdp .okra-related-grid-style .swiper-pagination {
  display: none !important;
}

@media (max-width: 991px) {
  body.okra-vintage-pdp .okra-related-grid-style {
    padding: clamp(58px, 9vw, 86px) 18px clamp(72px, 10vw, 104px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(24px, 5vw, 56px) !important;
    row-gap: clamp(54px, 8vw, 82px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: min(100%, 430px) !important;
  }

  @supports selector(:has(*)) {
    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(1):last-child) {
      grid-template-columns: minmax(0, 1fr) !important;
      max-width: min(100%, 430px) !important;
    }
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: min(100%, 430px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper[data-okra-card-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: min(100%, 860px) !important;
  }

  @supports selector(:has(*)) {
    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(1):last-child) {
      grid-template-columns: minmax(0, 1fr) !important;
      max-width: min(100%, 430px) !important;
    }

    body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper:has(> .swiper-slide:nth-child(2):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      max-width: min(100%, 860px) !important;
    }
  }
}

@media (max-width: 575px) {
  body.okra-vintage-pdp .okra-related-grid-style {
    padding: 52px 18px 76px !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .tab-product {
    gap: 24px !important;
    margin-bottom: 42px !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: clamp(40px, 9vw, 62px) !important;
    max-width: min(100%, 390px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product {
    gap: clamp(12px, 2.6vw, 20px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-wrapper {
    min-height: clamp(150px, 44vw, 230px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .img-product {
    max-height: clamp(128px, 38vw, 210px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-info {
    --okra-related-info-size: clamp(10.5px, 2.75vw, 12px);
    gap: clamp(7px, 2vw, 11px) !important;
    padding-top: clamp(8px, 1.8vw, 12px) !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .title,
  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .price,
  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .current-price {
    font-size: var(--okra-related-info-size) !important;
    letter-spacing: clamp(0.015em, 0.12vw, 0.035em) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-info .price {
    line-height: 1.05 !important;
  }
}

@media (max-width: 374px) {
  body.okra-vintage-pdp .okra-related-grid-style .swiper-wrapper {
    column-gap: 18px !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-wrapper {
    min-height: 96px !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .img-product {
    max-height: 82px !important;
  }

  body.okra-vintage-pdp .okra-related-grid-style .card-product-info {
    --okra-related-info-size: 10px;
  }
}

body.okra-vintage-pdp .okra-brand img,
body.okra-vintage-pdp #header.okra-header-shell .okra-brand img {
  display: block !important;
  width: auto !important;
  height: clamp(2.25rem, 3.4vw, 4.5rem) !important;
  max-width: none !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  body.okra-vintage-pdp .okra-brand img,
  body.okra-vintage-pdp #header.okra-header-shell .okra-brand img {
    height: clamp(2rem, 8vw, 3rem) !important;
  }
}

@media (max-width: 430px) {
  body.okra-vintage-pdp .okra-brand img,
  body.okra-vintage-pdp #header.okra-header-shell .okra-brand img {
    height: clamp(1.8rem, 7.5vw, 2.5rem) !important;
  }
}

@media (min-width: 1200px) and (max-width: 2200px) {
  body.okra-vintage-pdp .okra-brand img,
  body.okra-vintage-pdp #header.okra-header-shell .okra-brand img {
    height: clamp(2.4rem, 2.4vw, 4rem) !important;
  }
}

/* Materials swatches: intentional texture row + solid color row. */
body.okra-vintage-pdp .okra-pdp-r__materials-strip {
  --okra-material-swatch-size: clamp(34px, 2.7vw, 46px);
  --okra-material-swatch-gap-x: clamp(9px, 1vw, 14px);
  --okra-material-swatch-gap-y: clamp(12px, 1.4vw, 18px);
  display: block !important;
  max-width: 100%;
  margin-bottom: clamp(32px, 3vw, 44px) !important;
}

body.okra-vintage-pdp .okra-pdp-r__swatches {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--okra-material-swatch-gap-y) !important;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 0 !important;
}

body.okra-vintage-pdp .okra-pdp-r__materials-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--okra-material-swatch-gap-x);
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
}

body.okra-vintage-pdp .okra-pdp-r__swatches input[type=radio] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

body.okra-vintage-pdp .okra-pdp-r__swatch {
  flex: 0 0 var(--okra-material-swatch-size) !important;
  width: var(--okra-material-swatch-size) !important;
  height: var(--okra-material-swatch-size) !important;
  overflow: visible !important;
}

body.okra-vintage-pdp .okra-pdp-r__swatches input:focus-visible + .okra-pdp-r__swatch {
  outline: 1px solid rgba(85, 25, 18, .58) !important;
  outline-offset: 5px !important;
}

@media (max-width: 1199px) {
  body.okra-vintage-pdp .okra-pdp-r__materials-strip {
    --okra-material-swatch-size: clamp(32px, 5.3vw, 44px);
    --okra-material-swatch-gap-x: clamp(10px, 2.3vw, 16px);
    --okra-material-swatch-gap-y: clamp(13px, 2.7vw, 20px);
  }
}

@media (max-width: 480px) {
  body.okra-vintage-pdp .okra-pdp-r__materials-strip {
    --okra-material-swatch-size: clamp(31px, 9vw, 36px);
    --okra-material-swatch-gap-x: clamp(7px, 2.2vw, 11px);
    --okra-material-swatch-gap-y: 13px;
  }
}

@media (max-width: 340px) {
  body.okra-vintage-pdp .okra-pdp-r__materials-strip {
    --okra-material-swatch-size: clamp(29px, 8.8vw, 31px);
    --okra-material-swatch-gap-x: clamp(6px, 2vw, 8px);
  }
}

/* Compact OKRA returns summary for the PDP policy tab. */
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(24px, 3vw, 52px) !important;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__item {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__item *,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__item::before,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__item::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary h6 {
  margin-bottom: 13px !important;
  color: rgba(45, 34, 27, 0.96) !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary p,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary li,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__meta {
  max-width: none !important;
  color: rgba(53, 43, 34, 0.82) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.48 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary p {
  margin: 0 0 10px !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary p:last-child {
  margin-bottom: 0 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__list li {
  position: relative;
  padding-left: 14px;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(106, 47, 35, 0.54);
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__link {
  display: inline-block;
  margin-top: 3px;
  color: rgba(99, 38, 30, 0.94) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__meta {
  display: block;
  margin-top: 10px;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab:has(.okra-return-panel.active) {
    min-height: clamp(330px, 21vw, 405px) !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-panel.active {
    padding-top: clamp(48px, 4.2vw, 68px) !important;
    padding-bottom: clamp(46px, 4vw, 64px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 36px !important;
  }
}

@media (max-width: 767px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary {
    grid-template-columns: 1fr !important;
    gap: 23px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary h6 {
    margin-bottom: 9px !important;
    font-size: 13px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary p,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary li {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-return-summary__list {
    gap: 7px;
  }
}

/* Compact care guide for the PDP policy tab. */
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(24px, 2.8vw, 44px) clamp(26px, 3.2vw, 56px) !important;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__intro {
  grid-column: 1 / -1;
  margin-bottom: clamp(2px, 0.5vw, 8px);
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(99, 38, 30, 0.84);
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__item {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__item *,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__item::before,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__item::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary h6 {
  margin-bottom: 12px !important;
  color: rgba(45, 34, 27, 0.96) !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__intro h6 {
  margin-bottom: 0 !important;
  color: rgba(85, 25, 18, 0.96) !important;
  font-size: clamp(18px, 1.55vw, 25px) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary p,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary li,
body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__meta {
  max-width: none !important;
  color: rgba(53, 43, 34, 0.82) !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.45 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary p {
  margin: 0 !important;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__list li {
  position: relative;
  padding-left: 14px;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(106, 47, 35, 0.54);
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__link {
  display: inline-block;
  margin-top: 8px;
  color: rgba(99, 38, 30, 0.94) !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__meta {
  display: block;
  font-size: clamp(12px, 0.85vw, 14px) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .widget-content-tab:has(.widget-content-inner.active .okra-care-summary) {
    min-height: clamp(410px, 26vw, 520px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 36px !important;
  }
}

@media (max-width: 767px) {
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__intro {
    margin-bottom: 0;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__intro h6 {
    font-size: 18px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary h6 {
    margin-bottom: 9px !important;
    font-size: 13px !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary p,
  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary li {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body.okra-vintage-pdp section.flat-spacing-7:not(.okra-related-grid-style) .okra-care-summary__list {
    gap: 7px;
  }
}

/* Keep the desktop product image pinned while modals open over the PDP. */
@media (min-width: 1200px) {
  body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row {
    align-items: stretch !important;
  }

  body.okra-vintage-pdp .flat-spacing.pb-0 > .container > .row > .col-md-6:first-child {
    display: flex !important;
    align-self: stretch !important;
  }

  body.okra-vintage-pdp .okra-pdp-left-stack {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    align-content: start !important;
  }

  body.okra-vintage-pdp .okra-pdp-left-stack > .slider-scroll {
    position: sticky !important;
    top: clamp(70px, 7vh, 96px) !important;
    z-index: 7 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    will-change: auto !important;
  }

  body.okra-vintage-pdp.modal-open .okra-pdp-left-stack > .slider-scroll,
  body.okra-vintage-pdp.okra-custom-design-modal-open .okra-pdp-left-stack > .slider-scroll {
    position: sticky !important;
    top: clamp(70px, 7vh, 96px) !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

html.lenis.lenis-stopped:has(body.okra-vintage-pdp #ask_question.modal.show) {
  overflow: hidden !important;
}

/* Keep PDP support-row underlines locked to the text width, not the grid column. */
html body.okra-vintage-pdp .okra-pdp-r__subaction {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body.okra-vintage-pdp .okra-pdp-r__subaction span {
  display: inline-block !important;
  width: fit-content;
  max-width: 100%;
  padding-bottom: clamp(6px, 0.65vw, 10px);
  border-bottom: 1px solid rgba(43, 18, 9, 0.62);
  line-height: inherit;
}

/* Shared PDP thumbnail strip and footer cleanup.
   Keeps the six gallery thumbnails from becoming a tinted overlay panel and
   restores the footer links on product pages at mobile/tablet widths. */
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
  --okra-pdp-thumb-size: clamp(44px, 3.1vw, 58px);
  --okra-pdp-thumb-gap: clamp(8px, 0.8vw, 14px);
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--okra-pdp-thumb-gap) !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 clamp(26px, 2.4vw, 38px) !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb {
  display: block !important;
  flex: 0 0 var(--okra-pdp-thumb-size) !important;
  width: var(--okra-pdp-thumb-size) !important;
  height: var(--okra-pdp-thumb-size) !important;
  min-width: var(--okra-pdp-thumb-size) !important;
  min-height: var(--okra-pdp-thumb-size) !important;
  max-width: var(--okra-pdp-thumb-size) !important;
  max-height: var(--okra-pdp-thumb-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb.active,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb:hover {
  border-color: transparent !important;
  outline: 1px solid rgba(43, 18, 9, 0.48) !important;
  outline-offset: clamp(2px, 0.38vw, 5px) !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-bottom-accent {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  width: 100% !important;
  max-width: none !important;
  gap: clamp(1rem, 3vw, 3.25rem) !important;
  min-height: clamp(2.2rem, 3.5vw, 3rem) !important;
  margin: 0 !important;
  padding: 0 clamp(1rem, 3.2vw, 3rem) !important;
  background: #361C19 !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-bottom-accent a {
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(0.65rem, 0.85vw, 0.85rem) !important;
  line-height: normal !important;
  letter-spacing: clamp(0.12em, 0.22vw, 0.2em) !important;
  white-space: nowrap !important;
}

@media (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100vw - 72px) !important;
    margin: 0 auto clamp(26px, 7vw, 38px) !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-bottom-accent {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: clamp(1rem, 3vw, 3.25rem) !important;
    min-height: clamp(2.2rem, 3.5vw, 3rem) !important;
    padding: 0 clamp(1rem, 3.2vw, 3rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
    --okra-pdp-thumb-size: clamp(50px, 6.2vw, 58px);
    --okra-pdp-thumb-gap: clamp(9px, 1.35vw, 12px);
  }
}

@media (max-width: 767px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
    --okra-pdp-thumb-size: clamp(34px, 9.4vw, 44px);
    --okra-pdp-thumb-gap: clamp(6px, 1.8vw, 9px);
  }
}

@media (max-width: 374px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
    --okra-pdp-thumb-size: clamp(32px, 9vw, 36px);
    --okra-pdp-thumb-gap: 7px;
    max-width: calc(100vw - 48px) !important;
  }
}

/* Mobile PDP gallery composition: thumbnails belong inside the beige gallery
   block, directly below the dots. The markup keeps thumbnails in the info
   panel, so this reserves beige space in the gallery and pulls the row into it. */
@media (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-width: min(376px, calc(100vw - 54px));
    --okra-pdp-mobile-hero-width: min(326px, calc(100vw - 72px));
    --okra-pdp-gallery-thumb-size: clamp(34px, 9.4vw, 44px);
    --okra-pdp-gallery-thumb-gap: clamp(6px, 1.8vw, 9px);
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 18px);
    --okra-pdp-gallery-thumb-bottom: clamp(32px, 7vw, 42px);
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-pdp-left-stack > .slider-scroll {
    width: var(--okra-pdp-gallery-width) !important;
    max-width: var(--okra-pdp-gallery-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: calc(var(--okra-pdp-gallery-thumb-size) + 32px) !important;
    background-color: rgba(233, 227, 208, 0.79) !important;
    overflow: visible !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-mobile-dots {
    margin-top: clamp(12px, 3.6vw, 22px) !important;
    margin-bottom: 0 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-mobile-hero {
    width: var(--okra-pdp-mobile-hero-width) !important;
    max-width: var(--okra-pdp-mobile-hero-width) !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
    --okra-pdp-thumb-size: var(--okra-pdp-gallery-thumb-size);
    --okra-pdp-thumb-gap: var(--okra-pdp-gallery-thumb-gap);
    position: relative !important;
    z-index: 3 !important;
    width: var(--okra-pdp-gallery-width) !important;
    max-width: var(--okra-pdp-gallery-width) !important;
    margin: calc(-1 * var(--okra-pdp-gallery-thumb-lift)) auto var(--okra-pdp-gallery-thumb-bottom) !important;
    padding: 0 !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__head {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-width: min(620px, calc(100vw - 140px));
    --okra-pdp-mobile-hero-width: min(460px, calc(100vw - 180px));
    --okra-pdp-gallery-thumb-size: clamp(50px, 6.2vw, 58px);
    --okra-pdp-gallery-thumb-gap: clamp(9px, 1.35vw, 12px);
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 22px);
    --okra-pdp-gallery-thumb-bottom: clamp(38px, 5vw, 54px);
  }
}

@media (max-width: 374px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-width: calc(100vw - 54px);
    --okra-pdp-mobile-hero-width: calc(100vw - 86px);
    --okra-pdp-gallery-thumb-size: clamp(32px, 9vw, 36px);
    --okra-pdp-gallery-thumb-gap: 7px;
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 16px);
  }
}

/* Compact mobile PDP gallery spacing. Keep this after the artwork-background
   rules so the beige gallery block no longer carries a large empty top pad. */
@media (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-top-pad: clamp(18px, 4.8vw, 28px);
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 12px);
    --okra-pdp-gallery-thumb-bottom: clamp(18px, 5vw, 30px);
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-pdp-left-stack {
    gap: 0 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
    width: var(--okra-pdp-gallery-width) !important;
    max-width: var(--okra-pdp-gallery-width) !important;
    margin-top: clamp(10px, 2.8vw, 16px) !important;
    margin-bottom: clamp(14px, 3.8vw, 22px) !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-pdp-left-stack > .slider-scroll {
    padding-top: var(--okra-pdp-gallery-top-pad) !important;
    padding-bottom: calc(var(--okra-pdp-gallery-thumb-size) + 24px) !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-mobile-dots {
    margin-top: clamp(8px, 2.6vw, 14px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-top-pad: clamp(22px, 3.2vw, 34px);
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 14px);
    --okra-pdp-gallery-thumb-bottom: clamp(24px, 4vw, 36px);
  }
}

@media (max-width: 374px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) {
    --okra-pdp-gallery-top-pad: 16px;
    --okra-pdp-gallery-thumb-lift: calc(var(--okra-pdp-gallery-thumb-size) + 10px);
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .okra-pdp-left-stack > .tf-breadcrumb.okra-vintage-crumb {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }
}

/* Modern PDP gallery viewer. Replaces the white PhotoSwipe presentation with
   a focused product viewer that keeps thumbnails and page state in sync. */
html.okra-modern-viewer-open,
html.okra-modern-viewer-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.okra-modern-viewer[hidden] {
  display: none !important;
}

.okra-modern-viewer {
  position: fixed;
  inset: 0;
  z-index: 99998;
  color: #f7efe5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.okra-modern-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.okra-modern-viewer,
.okra-modern-viewer * {
  box-sizing: border-box;
}

.okra-modern-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 13, 10, 0.94);
  backdrop-filter: blur(16px);
}

.okra-modern-viewer__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 2.2vw, 30px);
  background: transparent !important;
  background-color: transparent !important;
  outline: 0;
}

.okra-modern-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  background: transparent !important;
  background-color: transparent !important;
}

.okra-modern-viewer__meta {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 22px);
  min-width: 0;
}

.okra-modern-viewer__title {
  max-width: min(54vw, 720px);
  overflow: hidden;
  color: #fff7ec;
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(13px, 1.02vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.okra-modern-viewer__counter {
  color: rgba(247, 239, 229, 0.66);
  font-family: "OkraFont", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.okra-modern-viewer__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.okra-modern-viewer__button,
.okra-modern-viewer__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(247, 239, 229, 0.18);
  border-radius: 50%;
  background: rgba(247, 239, 229, 0.08);
  color: #fff7ec;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.okra-modern-viewer__button:hover,
.okra-modern-viewer__button:focus-visible,
.okra-modern-viewer__nav:hover,
.okra-modern-viewer__nav:focus-visible {
  border-color: rgba(247, 239, 229, 0.42);
  background: rgba(247, 239, 229, 0.16);
  color: #ffffff;
  outline: 0;
}

.okra-modern-viewer__button:active,
.okra-modern-viewer__nav:active {
  transform: scale(0.96);
}

.okra-modern-viewer__button:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
}

.okra-modern-viewer__button svg,
.okra-modern-viewer__nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.okra-modern-viewer__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 2.2vw, 26px) clamp(66px, 6vw, 104px);
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}

.okra-modern-viewer__stage.is-zoomed {
  cursor: grab;
}

.okra-modern-viewer__stage.is-dragging {
  cursor: grabbing;
}

.okra-modern-viewer__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 190px);
  object-fit: contain;
  object-position: center;
  opacity: 1;
  user-select: none;
  will-change: transform;
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.okra-modern-viewer__stage.is-dragging .okra-modern-viewer__image {
  transition: opacity 140ms ease;
}

.okra-modern-viewer__image.is-loading {
  opacity: 0.34;
}

.okra-modern-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}

.okra-modern-viewer__nav:active {
  transform: translateY(-50%) scale(0.96);
}

.okra-modern-viewer__nav--prev {
  left: clamp(16px, 2.4vw, 34px);
}

.okra-modern-viewer__nav--next {
  right: clamp(16px, 2.4vw, 34px);
}

.okra-modern-viewer__thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: min(760px, 100%);
  margin: 0 auto;
  padding: 8px 2px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 239, 229, 0.38) transparent;
}

.okra-modern-viewer__thumbs::-webkit-scrollbar {
  height: 5px;
}

.okra-modern-viewer__thumbs::-webkit-scrollbar-track {
  background: transparent;
}

.okra-modern-viewer__thumbs::-webkit-scrollbar-thumb {
  background: rgba(247, 239, 229, 0.34);
}

.okra-modern-viewer__thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  padding: 4px;
  border: 1px solid rgba(247, 239, 229, 0.16);
  border-radius: 6px;
  background: rgba(247, 239, 229, 0.08);
  cursor: pointer;
  opacity: 0.72;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.okra-modern-viewer__thumb:hover,
.okra-modern-viewer__thumb:focus-visible {
  border-color: rgba(247, 239, 229, 0.42);
  opacity: 1;
  outline: 0;
}

.okra-modern-viewer__thumb.is-active {
  border-color: #e7c887;
  background: rgba(231, 200, 135, 0.14);
  opacity: 1;
}

.okra-modern-viewer__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
  background: rgba(247, 239, 229, 0.92);
}

@media (max-width: 767px) {
  .okra-modern-viewer__dialog {
    padding: 13px;
  }

  .okra-modern-viewer__bar {
    align-items: flex-start;
    min-height: 42px;
  }

  .okra-modern-viewer__meta {
    display: grid;
    gap: 6px;
  }

  .okra-modern-viewer__title {
    max-width: calc(100vw - 172px);
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .okra-modern-viewer__counter {
    font-size: 12px;
  }

  .okra-modern-viewer__actions {
    gap: 6px;
  }

  .okra-modern-viewer__button {
    width: 38px;
    height: 38px;
  }

  .okra-modern-viewer__button svg,
  .okra-modern-viewer__nav svg {
    width: 19px;
    height: 19px;
  }

  .okra-modern-viewer__stage {
    padding: 12px 0 18px;
  }

  .okra-modern-viewer__image {
    max-height: calc(100svh - 190px);
  }

  .okra-modern-viewer__nav {
    top: auto;
    bottom: 88px;
    width: 42px;
    height: 42px;
    transform: none;
  }

  .okra-modern-viewer__nav:active {
    transform: scale(0.96);
  }

  .okra-modern-viewer__nav--prev {
    left: 14px;
  }

  .okra-modern-viewer__nav--next {
    right: 14px;
  }

  .okra-modern-viewer__thumbs {
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
    padding: 8px 1px 0;
  }

  .okra-modern-viewer__thumb {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    padding: 3px;
  }
}

/* Product page performance polish: reserve the area, then fade decoded images in. */
body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item img[data-okra-fade],
body.okra-vintage-pdp .okra-mobile-hero img[data-okra-fade],
body.okra-vintage-pdp .okra-pdp-r__thumb img[data-okra-fade] {
  opacity: 0;
  transition: opacity 260ms ease;
}

body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item picture {
  display: block;
  width: 100%;
  height: 100%;
}

body.okra-vintage-pdp #gallery-started.wrapper-gallery-scroll > .item img[data-okra-fade].is-loaded,
body.okra-vintage-pdp .okra-mobile-hero img[data-okra-fade].is-loaded,
body.okra-vintage-pdp .okra-pdp-r__thumb img[data-okra-fade].is-loaded {
  opacity: 1;
}

/* PDP thumbnails must be visible without relying on hover/load-fade state. */
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumbs {
  pointer-events: none !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb {
  pointer-events: auto !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.36) !important;
  box-shadow: inset 0 0 0 1px rgba(43, 18, 9, 0.16) !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb.active,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb:hover {
  box-shadow: inset 0 0 0 1px rgba(43, 18, 9, 0.42) !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb img,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb img[data-okra-fade] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* PDP thumbnail active state: quiet matte selection, no decorative marker. */
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb {
  position: relative !important;
  box-sizing: border-box !important;
  opacity: 0.68 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    opacity 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb.active,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb[aria-current="true"] {
  opacity: 1 !important;
  border: 1px solid rgba(38, 33, 28, 0.48) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(255, 250, 243, 0.56) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb.active::after,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb[aria-current="true"]::after {
  content: none !important;
  display: none !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb.active img,
html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb[aria-current="true"] img {
  filter: none !important;
}

html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r .okra-pdp-r__thumb:hover:not(.active):not([aria-current="true"]) {
  opacity: 0.9 !important;
  border-color: rgba(38, 33, 28, 0.18) !important;
  box-shadow: none !important;
}

/* Mobile PDP order: image, thumbnails, title, copy, price, options. */
@media (max-width: 1199px) {
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r {
    display: flex !important;
    flex-direction: column !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__thumbs {
    order: 0 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__head {
    order: 1 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > [data-product-summary],
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__desc {
    order: 2 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__purchase {
    order: 3 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__meta {
    order: 4 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > [data-option-block="material"],
  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__row-label {
    order: 5 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__materials-strip {
    order: 6 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__size-block {
    order: 7 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__custom-print {
    order: 8 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__gift {
    order: 9 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__action-message {
    order: 10 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__ctas {
    order: 11 !important;
  }

  html body.okra-vintage-pdp:not(.okra-auth):not(.okra-contact-page) .tf-product-info-list.okra-pdp-r > .okra-pdp-r__subactions {
    order: 12 !important;
  }
}