/* ============================================================
 * IntimatePlace — single product retrofit (design-kit product-*.html)
 * Scope: body.ip-product.woocommerce (added via functions.php on is_product()).
 * All values mirrored from design-kit/IntimatePlace-Design/assets/styles.css:
 *   .product-layout / .product-gallery / .product-copy / .accordions /
 *   .spec-table / .quantity-control / .btn / .breadcrumb / related grid-4.
 * Machine-imported description content carries inline styles; they are
 * normalized with !important overrides (stylesheet !important > inline).
 * ============================================================ */

/* ---------- page container (Prime leftover element 353 sets #content 900px) ----------
 * design .container: max-width 1360px; padding-inline 48px -> 1264px content. */
body.ip-product.woocommerce #page {
    max-width: 1360px;
}
body.ip-product.woocommerce #content {
    max-width: none;
}
body.ip-product.woocommerce .inside-article {
    padding-left: 48px;
    padding-right: 48px;
}

/* ---------- breadcrumb ---------- */
body.ip-product.woocommerce #content .woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    font-size: 11px;
    line-height: 1.65;
    color: var(--ip-muted);
    padding-block: 25px;
    margin: 0;
}
body.ip-product.woocommerce #content .woocommerce-breadcrumb a {
    color: var(--ip-muted);
}

/* ---------- layout: design .product-layout ----------
 * Grid children in DOM order: gallery, ip-detail-images, summary, related.
 * Explicit placement: gallery+details stack in column 1 (design "主图下面显示详情图"),
 * summary occupies column 2, related spans full width. */
body.ip-product.woocommerce #content div.product {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 74px;
    align-items: start;
    padding-bottom: 78px;
}
body.ip-product.woocommerce #content div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    float: none;
}
body.ip-product.woocommerce #content div.product > .ip-detail-images {
    grid-column: 1;
    grid-row: 2;
}
body.ip-product.woocommerce #content div.product > .summary {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-top: 14px;
    float: none;
    /* design base typography on .product-copy: 13px / 1.9 — sets the strut
     * that sizes the inline eyebrow line-box (h1 yRel 38.8 design). */
    font-size: 13px;
    line-height: 1.9;
}
/* design .product-copy .eyebrow (inline span above the title) */
body.ip-product.woocommerce #content .summary .ip-eyebrow {
    font-size: 11px;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.7;
    color: var(--ip-muted);
}
body.ip-product.woocommerce #content div.product > .related.products {
    grid-column: 1 / -1;
}
body.ip-product.woocommerce #content div.product > .woocommerce-message,
body.ip-product.woocommerce #content div.product > .woocommerce-error,
body.ip-product.woocommerce #content div.product > .woocommerce-info {
    grid-column: 1 / -1;
}

/* ---------- gallery: design .product-main-image ---------- */
body.ip-product.woocommerce #content .woocommerce-product-gallery {
    background: #ebe2df;
    position: relative;
}
/* NOTE: do NOT constrain .woocommerce-product-gallery__wrapper — flexslider
 * sets its inline width to 1000% (the sliding strip); a max-width clamp here
 * collapses the strip so slides stack vertically and every thumb/variant
 * change (transform) moves all images out of the viewport = gray box. */
body.ip-product.woocommerce #content .woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1.035;
    overflow: hidden;
    background-color: #ebe2df; /* design .product-main-image bg */
}
body.ip-product.woocommerce #content .woocommerce-product-gallery__image img,
body.ip-product.woocommerce #content .woocommerce-product-gallery__image img.wp-post-image {
    width: 100%;
    /* img sits inside an <a>; height:100% resolves against the inline anchor,
     * so pin the aspect box on the img itself (onload attrs reset height). */
    aspect-ratio: 1 / 1.035 !important;
    height: auto !important;
    object-fit: cover;
    margin: 0;
}
body.ip-product.woocommerce #content .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
    z-index: 9;
    background: rgba(255, 253, 250, 0.75);
    border-radius: 50%;
    text-indent: -9999px;
}
body.ip-product.woocommerce #content .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
    content: '+';
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--ip-plum);
}

/* thumbnails: design .gallery-thumbnails / .gallery-thumb (below main image) */
body.ip-product.woocommerce #content .flex-control-thumbs {
    display: flex;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    background: var(--ip-paper);
}
body.ip-product.woocommerce #content .flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;      /* Woo default li padding-top 5px pushed strip to 90px */
    line-height: 0;  /* kills inline leading so strip stays 85px */
}
body.ip-product.woocommerce #content .flex-control-thumbs img {
    width: 78px;
    height: 85px;
    min-width: 78px;
    object-fit: cover;
    border: 1px solid var(--ip-line);
    background: var(--ip-white);
    opacity: 1;
    margin: 0;
    cursor: pointer;
    display: block;
}
body.ip-product.woocommerce #content .flex-control-thumbs img.flex-active,
body.ip-product.woocommerce #content .flex-control-thumbs img:hover {
    border: 2px solid var(--ip-plum);
}

/* ---------- detail images strip (design: detail images below main) ---------- */
body.ip-product.woocommerce #content .ip-detail-images {
    margin-top: 22px;
    display: grid;
    gap: 12px;
}
body.ip-product.woocommerce #content .ip-detail-images .ip-detail-label {
    margin-top: 0;
    margin-bottom: 0;
}
body.ip-product.woocommerce #content .ip-detail-images img {
    display: block;
    width: 100%;
    height: auto;
    background: #ebe2df;
}

/* ---------- summary: design .product-copy ---------- */
body.ip-product.woocommerce #content .summary .product_title {
    font-size: clamp(43px, 4.2vw, 65px);
    letter-spacing: -0.062em;
    line-height: 1.01;
    font-weight: 400;
    color: var(--ip-ink);
    margin: 0 0 12px;
}
body.ip-product.woocommerce #content .summary .price {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ip-plum);
    margin: 18px 0 6px;
    line-height: 1.65; /* design .detail-price renders 26px x 1.65 = 42.9px */
}
body.ip-product.woocommerce #content .summary .price del {
    color: var(--ip-muted);
    opacity: 1;
}
body.ip-product.woocommerce #content .summary .price del span {
    font-size: 16px;
    text-decoration: line-through;
}
body.ip-product.woocommerce #content .summary .price ins {
    text-decoration: none;
}
body.ip-product.woocommerce #content .summary .woocommerce-product-details__short-description {
    font-size: 13px;
    line-height: 1.9;
    margin: 23px 0;
    color: var(--ip-muted);
    max-width: 480px;
}
body.ip-product.woocommerce #content .summary .product_meta {
    display: none; /* design keeps provenance out of the copy column */
}

/* ---------- variations: design .variant-label / .variant-options ---------- */
body.ip-product.woocommerce #content .summary table.variations {
    border: 0;
    margin: 0 0 25px;
    font-size: 11px;
    display: block;
}
body.ip-product.woocommerce #content .summary table.variations tr {
    display: block;
}
body.ip-product.woocommerce #content .summary table.variations tbody {
    display: block; /* default table-row-group keeps cell auto-layout widths */
}
body.ip-product.woocommerce #content .summary table.variations th,
body.ip-product.woocommerce #content .summary table.variations td {
    border: 0;
    background: none;
    padding: 0 0 11px;
    text-align: left;
    vertical-align: middle;
    display: block;
    width: 100%;
}
/* design .variant-label: full-width flex row, min-height 32px, margin-bottom 11px */
body.ip-product.woocommerce #content .summary table.variations label {
    font-size: 11px;
    color: var(--ip-ink);
    margin: 0 0 11px;
    display: flex;
    align-items: center;
    min-height: 32px;
    width: 100%;
}
body.ip-product.woocommerce #content .summary table.variations select {
    min-height: 44px;
    padding: 9px 13px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ip-ink);
    background: var(--ip-white);
    border: 1px solid var(--ip-line);
    border-radius: 0;
    width: 100%;
    max-width: 100%;
}
body.ip-product.woocommerce #content .summary table.variations .reset_variations {
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ip-muted);
}

/* ---------- purchase row: design .quantity-control + .btn ----------
 * design .purchase-row = qty + add-to-cart in one 52px row. Variable products
 * wrap those in .woocommerce-variation-add-to-cart (inside form.cart); simple
 * products put them directly in form.cart — both shapes handled. */
body.ip-product.woocommerce #content .summary form.cart {
    display: block;
    margin: 0 0 18px;
}
body.ip-product.woocommerce #content .summary form.cart:not(:has(.woocommerce-variation-add-to-cart)) {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
body.ip-product.woocommerce #content .summary .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}
body.ip-product.woocommerce #content .summary .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--ip-line);
    height: 52px;
    flex: none;
    background: var(--ip-white);
    margin: 0;
}
/* theme ships <a class="minus/plus"> anchors (buttons-added); design
 * .quantity-control button: 37x50, font 19 */
body.ip-product.woocommerce #content .summary .quantity .minus,
body.ip-product.woocommerce #content .summary .quantity .plus,
body.ip-product.woocommerce #content .summary .quantity button {
    width: 37px;
    height: 50px;
    font-size: 19px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--ip-ink);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
body.ip-product.woocommerce #content .summary .quantity .qty {
    width: 30px;
    padding: 0;
    text-align: center;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--ip-ink);
    height: auto !important;    /* design input is text-height (21.4px) */
    min-height: 0 !important;    /* GP form css sets min-height:50px */
    line-height: 1.65 !important; /* 13px x 1.65 = 21.4px like design base */
    margin: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
body.ip-product.woocommerce #content .summary .quantity .qty::-webkit-inner-spin-button,
body.ip-product.woocommerce #content .summary .quantity .qty::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
body.ip-product.woocommerce #content .summary .quantity button {
    width: 37px;
    height: 50px;
    font-size: 19px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--ip-ink);
    cursor: pointer;
    padding: 0;
}
body.ip-product.woocommerce #content .summary .single_add_to_cart_button {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 52px;
    padding: 13px 26px;
    background: var(--ip-plum);
    border: 1px solid var(--ip-plum);
    border-radius: 0;
    color: var(--ip-paper);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.015em;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
body.ip-product.woocommerce #content .summary .single_add_to_cart_button:hover:not(.disabled) {
    background: var(--ip-plum-dark);
    transform: translateY(-1px);
    color: var(--ip-paper);
}
body.ip-product.woocommerce #content .summary .single_add_to_cart_button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- accordions: design .accordions / .accordion / .spec-table ---------- */
body.ip-product.woocommerce #content .ip-accordions {
    border-top: 1px solid var(--ip-line);
    margin-top: 4px;
}
body.ip-product.woocommerce #content .ip-accordion {
    border-bottom: 1px solid var(--ip-line);
}
body.ip-product.woocommerce #content .ip-accordion summary {
    min-height: 55px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    font-size: 12px;
    color: var(--ip-ink);
    padding: 0;
}
body.ip-product.woocommerce #content .ip-accordion summary::-webkit-details-marker {
    display: none;
}
body.ip-product.woocommerce #content .ip-accordion summary::after {
    content: '+';
    font-size: 18px;
    color: var(--ip-ink);
}
body.ip-product.woocommerce #content .ip-accordion[open] summary::after {
    content: '−';
}
body.ip-product.woocommerce #content .ip-accordion-body {
    padding: 0 0 20px;
    color: var(--ip-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* normalize machine-imported inline styles inside accordion bodies */
body.ip-product.woocommerce #content .ip-accordion-body ul {
    padding-left: 22px !important; /* design base ul,ol { padding-left:22px } */
    margin: 0 0 12px !important;
    list-style: disc outside !important;
}
body.ip-product.woocommerce #content .ip-accordion-body ul li {
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}
body.ip-product.woocommerce #content .ip-accordion-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 12px !important;
    margin: 0 !important;
}
body.ip-product.woocommerce #content .ip-accordion-body table th,
body.ip-product.woocommerce #content .ip-accordion-body table td {
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ip-line) !important;
    text-align: left !important;
    vertical-align: top !important;
    background: none !important;
    font-weight: 400 !important;
    color: var(--ip-ink) !important;
    line-height: 1.8;
}
body.ip-product.woocommerce #content .ip-accordion-body table th {
    color: var(--ip-muted) !important;
    width: 45%;
    padding-right: 20px !important;
}
body.ip-product.woocommerce #content .ip-accordion-body p {
    margin: 0 0 4px !important;
    padding: 0 !important;
    line-height: 1.8;
}
body.ip-product.woocommerce #content .ip-accordion-body div {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
body.ip-product.woocommerce #content .ip-accordion-body strong {
    font-weight: 600 !important;
    color: var(--ip-ink) !important;
}
body.ip-product.woocommerce #content .ip-accordion-body img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ---------- related products: design .section + .section-heading + .grid-4 ----------
 * design .section { padding-block: 96px } — live sits inside 1264px entry-content
 * which equals the design section's inner content box, so no inline padding. */
body.ip-product.woocommerce #content .related.products {
    padding-block: 96px;
}
body.ip-product.woocommerce #content .related.products > h2 {
    font-size: clamp(38px, 3.45vw, 55px);
    letter-spacing: -0.043em;
    line-height: 1.1;
    font-weight: 400;
    color: var(--ip-ink);
    margin: 33px 0 34px; /* design h2 yRel 128.7 = 96 section pad + 32.7 heading gap */
}
body.ip-product.woocommerce #content .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.ip-product.woocommerce #content .related.products ul.products::before,
body.ip-product.woocommerce #content .related.products ul.products::after {
    display: none;
}
body.ip-product.woocommerce #content .related.products ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    min-width: 0;
    text-align: left;
}
body.ip-product.woocommerce #content .related.products li.product a.woocommerce-LoopProduct-link {
    display: block;
}
body.ip-product.woocommerce #content .related.products li.product img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 800 / 920;
    object-fit: cover;
    background: var(--ip-sand);
    margin: 0 !important;
    display: block !important; /* inline baseline gap added 7.3px to the image row */
    transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* plugin wrapper is inline-block -> baseline descender adds 7.3px row height */
body.ip-product.woocommerce #content .related.products li.product .wc-product-image > div,
body.ip-product.woocommerce #content .related.products li.product .wc-product-image .inside-wc-product-image {
    display: block !important;
}
body.ip-product.woocommerce #content .related.products li.product:hover img {
    transform: scale(1.045);
}
/* design .product-name-line { display:flex; justify-content:space-between;
 * align-items:start; gap:10px } — name left, price right on the SAME line.
 * Live card children live inside one <a>, emulated with a 2-column grid. */
body.ip-product.woocommerce #content .related.products li.product a.woocommerce-LoopProduct-link {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 14px; /* design .product-info { padding-top:14px } — container-level offset */
}
body.ip-product.woocommerce #content .related.products li.product a.woocommerce-LoopProduct-link > .wc-product-image {
    grid-column: 1 / -1;
}
body.ip-product.woocommerce #content .related.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ip-ink);
    padding: 0 !important; /* offset handled by row-gap (grid item padding is internal) */
    margin: 0 !important;
    grid-column: 1;
}
body.ip-product.woocommerce #content .related.products li.product .price {
    font-size: 13px;
    font-weight: 400;
    color: var(--ip-plum);
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    white-space: nowrap;
}
body.ip-product.woocommerce #content .related.products li.product .onsale,
body.ip-product.woocommerce #content .summary .onsale {
    display: none;
}

/* ---------- sale flash overlay (GP Woo module class) ---------- */
body.ip-product.woocommerce #content .ip-sale-flash {
    display: none;
}

/* ---------- mobile: mirror design media queries ----------
 * Design breakpoints (assets/styles.css):
 *   1199 → .product-layout{gap:44px}  .product-copy h1{52px}
 *   980  → .product-layout{gap:30px}  .product-copy{padding-top:0}  h1{45px}
 *          .grid-4{gap:16px}  cards stack: name-line block, price block mt:5, h3 13px
 *   720  → single column: .product-layout{1fr;gap:28;padding-bottom:45}
 *          .product-gallery{margin-inline:-21px}  thumbs{padding-inline:21;gap:9}
 *          .gallery-thumb{h:65;min-width:63}  h1{49;margin-bottom:9}
 *          .detail-price{23;margin-top:13}  .product-info{padding-top:10}
 *          .grid-4{repeat(2,1fr);gap:26px 13px}  price 12px
 *   374  → gallery -18px / thumbs padding 18
 */

@media (max-width: 1199px) {
    body.ip-product.woocommerce #content div.product {
        gap: 44px;
    }
    /* design .section { padding-block:75px } at ≤1199 */
    body.ip-product.woocommerce #content .related.products {
        padding-block: 75px;
    }
    /* design .container { padding-inline:32px } at ≤1199 — GP keeps
     * .inside-article at 48px unless mirrored here */
    body.ip-product.woocommerce #content .inside-article {
        padding-inline: 32px;
    }
    body.ip-product.woocommerce #content .summary .product_title {
        font-size: 52px;
    }
    body.ip-product.woocommerce #content .related.products ul.products {
        gap: 22px;
    }
}

@media (max-width: 980px) {
    body.ip-product.woocommerce #content div.product {
        gap: 30px;
    }
    body.ip-product.woocommerce #content div.product > .summary {
        padding-top: 0;
    }
    body.ip-product.woocommerce #content .summary .product_title {
        font-size: 45px;
    }
    /* design .grid-4{gap:16px} */
    body.ip-product.woocommerce #content .related.products ul.products {
        gap: 16px;
    }
    /* design .product-name-line{display:block} + .product-price{margin-top:5px;
     * display:block} + h3{13px} — cards stack name over price (block flow). */
    body.ip-product.woocommerce #content .related.products li.product a.woocommerce-LoopProduct-link {
        display: block;
    }
    body.ip-product.woocommerce #content .related.products li.product a.woocommerce-LoopProduct-link > .wc-product-image {
        display: block;
    }
    body.ip-product.woocommerce #content .related.products li.product .woocommerce-loop-product__title {
        display: block;
        font-size: 13px;
        /* design .product-info { padding-top:14px } above the name line */
        margin: 14px 0 0 !important;
    }
    body.ip-product.woocommerce #content .related.products li.product .price {
        display: block;
        /* GP woocommerce.min.css gives .woocommerce-text-align-center items
         * margin-left:auto which shrinks the box right — force full-width
         * block like the design .product-price */
        width: 100%;
        margin-left: 0 !important;
        margin-top: 5px;
        text-align: left;
    }
}

@media (max-width: 720px) {
    body.ip-product.woocommerce #content div.product {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 45px;
    }
    /* single column: drop the desktop 2-track placement (summary was pinned
     * to column 2, which would otherwise create an IMPLICIT second track and
     * squeeze the gallery). Natural DOM order: gallery → summary → details. */
    body.ip-product.woocommerce #content div.product > .woocommerce-product-gallery {
        grid-column: auto;
        grid-row: auto;
    }
    body.ip-product.woocommerce #content div.product > .ip-detail-images {
        grid-column: auto;
        grid-row: auto;
    }
    body.ip-product.woocommerce #content div.product > .summary {
        grid-column: auto;
        grid-row: auto;
    }
    body.ip-product.woocommerce #content div.product > .woocommerce-product-gallery {
        margin-inline: -21px;
        /* the base placement rule (line ~51) pins width:100% with a child
         * selector (1,4,2) — the override needs the same selector to win;
         * auto + stretch makes negative margins produce the 360px bleed */
        width: auto;
    }
    body.ip-product.woocommerce #content .flex-control-thumbs {
        padding-inline: 21px;
        gap: 9px;
    }
    /* design .gallery-thumb{height:65px;min-width:63px} — base img rule is
     * hard-coded 78×85 (desktop), so it must shrink with the li */
    body.ip-product.woocommerce #content .flex-control-thumbs li {
        height: 65px;
        min-width: 63px;
    }
    body.ip-product.woocommerce #content .flex-control-thumbs img {
        width: 63px;
        height: 65px;
        min-width: 63px;
    }
    body.ip-product.woocommerce #content .ip-detail-images {
        margin-inline: -21px;
    }
    body.ip-product.woocommerce #content .ip-detail-images .ip-detail-label {
        padding-inline: 21px;
    }
    body.ip-product.woocommerce #content .ip-detail-images img {
        width: calc(100% - 42px);
        margin-inline: 21px;
    }
    /* design .product-main-image{aspect-ratio:1.08} — horizontal frame on
     * mobile. Desktop fix uses !important, so the override needs it too. */
    body.ip-product.woocommerce #content .woocommerce-product-gallery__image,
    body.ip-product.woocommerce #content .woocommerce-product-gallery__image img,
    body.ip-product.woocommerce #content .woocommerce-product-gallery__image img.wp-post-image {
        aspect-ratio: 1.08 / 1 !important;
    }
    body.ip-product.woocommerce #content .summary .product_title {
        font-size: 49px;
        margin-bottom: 9px;
    }
    body.ip-product.woocommerce #content .summary .price {
        font-size: 23px;
        margin-top: 13px;
    }
    /* design .variant-label{font-size:10px} + .variant-btn{font-size:10px;
     * min-height:44px;padding:9px 12px} */
    body.ip-product.woocommerce #content .summary table.variations label {
        font-size: 10px;
    }
    body.ip-product.woocommerce #content .summary table.variations select {
        font-size: 10px;
        padding: 9px 12px;
    }
    /* design .purchase-row .btn{font-size:12px;padding:13px 16px;gap:15px} */
    body.ip-product.woocommerce #content .summary .single_add_to_cart_button {
        font-size: 12px;
        padding: 13px 16px;
        gap: 15px;
    }
    /* design .grid-4{grid-template-columns:repeat(2,1fr);gap:26px 13px} */
    body.ip-product.woocommerce #content .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 13px;
    }
    /* design .section{padding-block:52px} + .section-heading h2{font-size:34px}
     * + .section-heading{margin-bottom:25px} + eyebrow (9px×1.7 lh + 11mb = 26.3)
     * above h2 at ≤720 */
    body.ip-product.woocommerce #content .related.products {
        padding-block: 52px;
    }
    body.ip-product.woocommerce #content .related.products > h2 {
        font-size: 34px;
        margin: 26.3px 0 25px;
    }
    /* design .product-info{padding-top:10px} */
    body.ip-product.woocommerce #content .related.products li.product .woocommerce-loop-product__title {
        margin-top: 10px !important;
    }
    /* design .product-price{font-size:12px} */
    body.ip-product.woocommerce #content .related.products li.product .price {
        font-size: 12px;
    }
    /* design .container { padding-inline:21px } at ≤720 */
    body.ip-product.woocommerce #content .inside-article {
        padding-inline: 21px;
    }
    /* design .breadcrumb{padding-block:18px;font-size:9px;gap:7px} at ≤720 */
    body.ip-product.woocommerce #content .woocommerce-breadcrumb {
        padding-block: 18px;
        font-size: 9px;
        gap: 7px;
    }
}

@media (max-width: 374px) {
    body.ip-product.woocommerce #content .woocommerce-product-gallery {
        margin-inline: -18px;
    }
    body.ip-product.woocommerce #content .flex-control-thumbs,
    body.ip-product.woocommerce #content .ip-detail-images .ip-detail-label {
        padding-inline: 18px;
    }
    /* design .container { padding-inline:18px } at ≤374 */
    body.ip-product.woocommerce #content .inside-article {
        padding-inline: 18px;
    }
}