/* ===========================================================================
   OhMyKajo - single product page
   ===========================================================================
   Loaded only on product pages, by ohmykajo-single-product.php. One file, no
   JavaScript, nothing on the critical path beyond this stylesheet itself.

   Two columns: gallery on the left, everything you decide with on the right,
   in the order title, short description, rating, price, who else is looking,
   options, stock, quantity and add to cart, then the secondary actions and
   the identifiers. Tabs below run down a rail on the left rather than across
   the top, then related products.
   =========================================================================== */

body.single-product {
    --kajo-sp-ink: #101821;
    --kajo-sp-muted: #6b7280;
    --kajo-sp-line: rgba(16, 24, 33, .1);
    --kajo-sp-sage: #9caf88;
    --kajo-sp-sage-dark: #526948;
    --kajo-sp-orange: #d88647;
    --kajo-sp-radius: 14px;
}

/* ---------- two column shell ---------------------------------------------- */

@media (min-width: 993px) {
    /* The grid goes on .product-image-summary-inner, not on
       .product-image-summary. The gallery and the summary are children of the
       inner wrapper; putting the columns on the outer one makes that wrapper
       the single grid item and squeezes the whole page into one column. */
    body.single-product .product-image-summary .product-image-summary-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
        gap: 0 56px !important;
        align-items: start;}

    /* wd-grid-g is a span based system: the gallery and the summary carry a
       grid-column span sized for the theme's own column count, which does not
       mean anything against a two column template. Placed explicitly so the
       span is irrelevant. */
    body.single-product .product-image-summary .product-image-summary-inner > .product-images {
        grid-column: 1 !important;}

    body.single-product .product-image-summary .product-image-summary-inner > .summary {
        grid-column: 2 !important;}

    body.single-product .product-image-summary-inner > .product-images,
    body.single-product .product-image-summary-inner > .summary,
    body.single-product .product-image-summary-inner .summary-inner {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;}

    /* The gallery is the tallest thing here and the summary is short, so the
       buying column is pinned while the images scroll past it. */
    body.single-product .product-image-summary-inner > .summary {
        position: sticky;
        top: 110px;}
}

/* Everything in the summary reads from the left, including on phones, where
   the theme centres it. Centred body copy in a column this narrow gives every
   line a different starting point and is markedly harder to scan. */
body.single-product .summary,
body.single-product .summary .price,
body.single-product .summary .woocommerce-product-details__short-description,
body.single-product .summary .product_title,
body.single-product .summary .wd-swatches-single,
body.single-product .summary form.cart {
    text-align: start !important;}

/* ---------- brand ---------------------------------------------------------- */

body.single-product .summary .wd-product-brands {
    margin: 0 0 12px;
    text-align: start;}

body.single-product .summary .wd-product-brands img {
    width: auto;
    max-height: 26px;
    opacity: .85;}

/* ---------- title, short description -------------------------------------- */

body.single-product .summary .product_title {
    margin: 0 0 10px;
    color: var(--kajo-sp-ink);
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;}

body.single-product .summary .woocommerce-product-details__short-description {
    margin: 0 0 14px;
    color: var(--kajo-sp-muted);
    font-size: 15px;
    line-height: 1.6;}

body.single-product .summary .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;}

/* ---------- gallery -------------------------------------------------------- */

/* Layout is the theme's - gallery set to thumbnails-bottom in
   ohmykajo-single-product.php - so only the finish is set here. */
body.single-product .product-images .woocommerce-product-gallery__wrapper img {
    border-radius: var(--kajo-sp-radius);}

/* The thumbnail strip is one of the theme's own carousels, already
   initialised by its JavaScript. Laying it out by hand collapsed it to zero
   height and left only its arrows showing as two grey bars, so only the
   images inside are styled and the carousel is left to position them. */
body.single-product .product-images .wd-gallery-thumb {
    margin-top: 12px;}

body.single-product .product-images .wd-gallery-thumb img {
    border: 1px solid var(--kajo-sp-line);
    border-radius: 10px;
    opacity: .7;
    cursor: pointer;
    transition: opacity .18s ease, border-color .18s ease;}

body.single-product .product-images .wd-gallery-thumb img:hover,
body.single-product .product-images .wd-gallery-thumb .wd-active img {
    border-color: var(--kajo-sp-sage-dark);
    opacity: 1;}

/* ---------- rating --------------------------------------------------------- */

body.single-product .summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;}

body.single-product .summary .woocommerce-product-rating .star-rating {
    color: var(--kajo-sp-orange);}

body.single-product .summary .woocommerce-review-link {
    color: var(--kajo-sp-muted);
    font-size: 13px;}

/* ---------- price ---------------------------------------------------------- */

body.single-product .summary .price {
    margin: 0 0 14px;
    color: var(--kajo-sp-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;}

/* WooCommerce prints the old price first, so on a sale the two are swapped
   visually and the number being charged leads.
   
   Only where there is a del. A variable product with no variation chosen
   shows a range - "JOD 0.50 - JOD 0.70" - whose separator is a bare text
   node between two amounts. Laying that out as a flex row made the dash an
   anonymous item at order 0, and it jumped to the front: "- JOD 0.50 JOD
   0.70". Ranges are left as ordinary inline text. */
body.single-product .summary .price:has(del) {
    display: flex;
    align-items: baseline;
    gap: 12px;}

body.single-product .summary .price:has(del) ins {
    order: 1;}

body.single-product .summary .price del {
    order: 2;
    color: var(--kajo-sp-muted);
    font-size: 18px;
    font-weight: 500;
    opacity: 1;}

body.single-product .summary .price ins {
    text-decoration: none;
    background: none;}

/* ---------- visitor counter ------------------------------------------------ */

body.single-product .summary .wd-visits-count {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--kajo-sp-line);
    color: var(--kajo-sp-muted);
    font-size: 13.5px;}

body.single-product .summary .wd-visits-count.wd-hide {
    display: none;}

body.single-product .summary .wd-visits-count .wd-info-number {
    color: var(--kajo-sp-ink);
    font-weight: 700;}

/* ---------- swatches and variation selects --------------------------------- */

body.single-product .summary .variations {
    margin: 0 0 6px;
    border: 0;}

body.single-product .summary .variations label,
body.single-product .summary .wd-swatches-single .wd-swatch-label {
    margin: 0 0 8px;
    color: var(--kajo-sp-ink);
    font-size: 13px;
    font-weight: 600;}

body.single-product .summary .wd-swatches-single {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;}

body.single-product .summary .wd-swatch {
    border-radius: 999px;
    transition: box-shadow .18s ease, transform .18s ease;}

body.single-product .summary .wd-swatch:hover {
    transform: translateY(-1px);}

body.single-product .summary .wd-swatch.wd-active {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--kajo-sp-sage-dark);}

/* Text swatches - sizes - read as pills rather than circles. */
body.single-product .summary .wd-swatch.wd-text {
    min-width: 46px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--kajo-sp-line);
    border-radius: 10px;
    background: #fff;
    color: var(--kajo-sp-ink);
    font-size: 14px;
    font-weight: 600;}

body.single-product .summary .wd-swatch.wd-text.wd-active {
    border-color: var(--kajo-sp-sage-dark);
    box-shadow: none;}

/* The variation form is a <table>, and its cells are centred by the theme -
   the attribute label and the swatch row both sat in the middle of a
   left-aligned column. Laid out as blocks, reading from the start edge. */
body.single-product .summary table.variations,
body.single-product .summary table.variations tbody,
body.single-product .summary table.variations tr {
    display: block;
    width: 100%;
    border: 0;}

body.single-product .summary table.variations th.label,
body.single-product .summary table.variations td.value {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: start !important;}

body.single-product .summary table.variations th.label {
    margin-bottom: 8px;}

body.single-product .summary .wd-swatches-product,
body.single-product .summary .wd-swatches-single {
    justify-content: flex-start !important;}

/* "Clear" is gone. Clicking another swatch already changes the choice, and
   with one attribute there is nothing to clear back to. */
body.single-product .summary .wd-reset-var,
body.single-product .summary .reset_variations {
    display: none !important;}

/* The tick on the chosen colour, matching the selector modal exactly - see
   .kajo-loop-options-pill.kajo-variation-color.is-selected in
   ohmykajo-loop-cards.css. Woodmart marks the chosen swatch .wd-active. */
body.single-product .summary .wd-swatch.wd-active {
    position: relative;
    isolation: isolate;
    box-shadow: 0 0 0 2px #6f875f, 0 0 0 4px rgba(111, 135, 95, .26) !important;}

body.single-product .summary .wd-swatch.wd-active::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    border-radius: inherit;
    background: rgba(6, 21, 37, .22);
    color: #fff;
    content: "✓";
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    place-items: center;
    text-shadow: 0 1px 2px rgba(6, 21, 37, .5);}

/* Woodmart draws its own marker under the active swatch; the tick is the
   indicator now. */
body.single-product .summary .wd-swatch.wd-active::before {
    display: none !important;
    content: none !important;}

/* The price and description are shown in .kajo-sp-variation-info, directly
   under the short description - these are the originals inside the form. */
body.single-product .summary .single_variation_wrap .woocommerce-variation-price,
body.single-product .summary .single_variation_wrap .woocommerce-variation-description {
    display: none !important;}

body.single-product .summary .kajo-sp-variation-info:empty {
    display: none;}

body.single-product .summary .kajo-sp-variation-info .price {
    margin: 0;}

body.single-product .summary .kajo-sp-variation-info p {
    margin: 0 0 12px;
    color: var(--kajo-sp-muted);
    font-size: 14.5px;
    line-height: 1.6;}

body.single-product .summary .kajo-sp-variation-info p:last-child {
    margin-bottom: 0;}

/* Once a variation is chosen its exact price is shown above, so the range at
   the top of the page would be a second, different price for the same thing.
   The class is toggled on found_variation / reset_data. */
body.single-product .summary.kajo-variation-chosen > .summary-inner > p.price {
    display: none;}

body.single-product .summary .reset_variations {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0;
    color: var(--kajo-sp-muted);
    font-size: 12.5px;}

body.single-product .summary .reset_variations:hover {
    color: var(--kajo-sp-orange);}

/* ---------- stock ---------------------------------------------------------- */

body.single-product .summary .kajo-sp-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(156, 175, 136, .16);
    color: var(--kajo-sp-sage-dark);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;}

body.single-product .summary .kajo-sp-stock__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;}

body.single-product .summary .kajo-sp-stock--out {
    background: rgba(216, 134, 71, .14);
    color: #a4521f;}

body.single-product .summary .kajo-sp-stock--backorder {
    background: rgba(216, 134, 71, .14);
    color: #8a5a2b;}

/* Woodmart prints its own stock line too; one is enough. */
body.single-product .summary .stock,
body.single-product .summary .woocommerce-variation-availability {
    display: none !important;}

body.single-product .summary .kajo-sp-stock {
    display: inline-flex !important;}

/* ---------- quantity and add to cart --------------------------------------- */

body.single-product .summary form.cart {
    margin: 0 0 18px;}

body.single-product .summary .quantity {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: none;
    height: 52px;
    margin: 0 0 12px !important;
    border: 1px solid var(--kajo-sp-line);
    border-radius: var(--kajo-sp-radius);
    background: #fff;
    overflow: hidden;}

body.single-product .summary .quantity input.qty {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    border: 0;
    background: none;
    color: var(--kajo-sp-ink);
    font-size: 15px;
    font-weight: 600;
    text-align: center;}

body.single-product .summary .quantity .minus,
body.single-product .summary .quantity .plus {
    flex: 0 0 52px;
    width: 52px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--kajo-sp-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;}

body.single-product .summary .quantity .minus:hover,
body.single-product .summary .quantity .plus:hover,
body.single-product .summary .quantity .minus:focus-visible,
body.single-product .summary .quantity .plus:focus-visible {
    background: rgba(216, 134, 71, .14);
    color: var(--kajo-sp-orange);}

body.single-product .summary .single_add_to_cart_button:not(.kajo-loop-options-add) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--kajo-sp-radius);
    background: var(--kajo-sp-sage-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background .2s ease, transform .18s ease, box-shadow .2s ease;}

body.single-product .summary .single_add_to_cart_button:not(.kajo-loop-options-add):hover {
    background: #41563a;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(82, 105, 72, .26);}

body.single-product .summary .single_add_to_cart_button:not(.kajo-loop-options-add).disabled,
body.single-product .summary .single_add_to_cart_button:not(.kajo-loop-options-add):disabled {
    background: rgba(16, 24, 33, .18);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;}

/* ---------- wishlist / ask question / share -------------------------------- */

body.single-product .summary .kajo-sp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--kajo-sp-line);}

body.single-product .summary .kajo-sp-actions > * {
    margin: 0 !important;}

/* The wishlist control is one of the theme's icon buttons, sized to a 42px
   square on the assumption its label is a tooltip. Shown inline here, the
   label needed 84px and simply ran out of the box and across "Ask question".
   Each item in the row sizes to its own content and none of them shrink. */
body.single-product .summary .kajo-sp-actions,
body.single-product .summary .kajo-sp-actions a,
body.single-product .summary .kajo-sp-actions .wd-wishlist-btn,
body.single-product .summary .kajo-sp-actions .wd-social-icons-title {
    white-space: nowrap;}

body.single-product .summary .kajo-sp-actions > * {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    max-width: none !important;}

body.single-product .summary .kajo-sp-actions .wd-wishlist-btn,
body.single-product .summary .kajo-sp-actions .wd-wishlist-btn a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    /* min-width wins over width, which is what makes this hold: on phones the
       theme sizes this control as a 34px icon button, the label is a 96px
       block inside it, and with overflow visible it spilled across "Ask
       question". Sizing to max-content cannot be undercut. */
    min-width: max-content !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;

    /* The circular icon button's own finish - a 50% radius and a drop shadow
       - left a faint oval floating behind the label once it was laid out as
       a text link. */
    border-radius: 0 !important;
    box-shadow: none !important;}

body.single-product .summary .kajo-sp-actions a,
body.single-product .summary .kajo-sp-actions .wd-wishlist-btn a,
body.single-product .summary .kajo-sp-actions .wd-compare-btn a {
    color: var(--kajo-sp-muted);
    font-size: 13.5px;
    font-weight: 600;
    transition: color .18s ease;}

body.single-product .summary .kajo-sp-actions a:hover {
    color: var(--kajo-sp-orange);}

body.single-product .summary .kajo-sp-actions .wd-social-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;}

/* Each network's glyph comes from its own icon set and they do not share a
   metric - WhatsApp rendered at two thirds the size of Facebook. Both the
   box and the glyph are pinned so every icon matches. */
body.single-product .summary .kajo-sp-actions .wd-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background .18s ease, color .18s ease;}

body.single-product .summary .kajo-sp-actions .wd-social-icons a:hover {
    background: rgba(216, 134, 71, .14);
    color: var(--kajo-sp-orange);}

body.single-product .summary .kajo-sp-actions .wd-social-icons a > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: 15px;
    line-height: 1;}

body.single-product .summary .kajo-sp-actions .wd-social-icons a > span::before {
    font-size: 15px;
    line-height: 1;}

/* ---------- SKU / category / tags ------------------------------------------ */

body.single-product .summary .product_meta {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--kajo-sp-ink);
    font-size: 13.5px;
    line-height: 1.6;}

/* Each of SKU, category and tags is one span holding a label, links and the
   commas between them as separate nodes. A grid would pull every one of those
   nodes into its own cell - the tags came out stacked, one per line, with the
   commas stranded in the label column - so these stay as plain rows. */
/* A hanging indent, not flex or grid: either of those would make every tag
   link and every comma its own box, which is exactly how the tags ended up
   stacked one per line last time. This keeps the values as ordinary inline
   text while wrapped lines still line up under the first. */
body.single-product .summary .product_meta > span {
    display: block;
    margin: 0 0 7px;
    padding-inline-start: 102px;
    text-indent: -102px;}

body.single-product .summary .product_meta > span:last-child {
    margin-bottom: 0;}

body.single-product .summary .product_meta .meta-label,
body.single-product .summary .product_meta .wd-label {
    display: inline-block;
    width: 102px;
    text-indent: 0;
    color: var(--kajo-sp-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;}

body.single-product .summary .product_meta .meta-sep {
    margin-inline-end: 3px;}

body.single-product .summary .product_meta a {
    color: var(--kajo-sp-ink);}

body.single-product .summary .product_meta a:hover {
    color: var(--kajo-sp-orange);}

/* ---------- tabs: a rail down the left -------------------------------------

   Above 1024px only. The rail places every tab wrapper in the SAME grid
   cell (grid-column 2 / grid-row 1), which is right when one panel shows at
   a time, and wrong the moment the theme switches to an accordion - and the
   theme switches at 1024px, not 768px. Between 769px and 1024px all three
   accordion items were landing in that one cell and drawing on top of one
   another. Found by measuring the item positions across the band: three
   items, three identical top offsets. The breakpoint now matches the
   theme's own, so that band gets the ordinary stacked accordion.           */

@media (min-width: 1025px) {
    body.single-product .woocommerce-tabs {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 0 48px;
        align-items: start;}

    body.single-product .woocommerce-tabs > .wd-nav-tabs-wrapper,
    body.single-product .woocommerce-tabs > ul.tabs {
        grid-column: 1;
        position: sticky;
        top: 110px;}

    body.single-product .woocommerce-tabs .wd-nav-tabs,
    body.single-product .woocommerce-tabs > ul.tabs {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;}

    body.single-product .woocommerce-tabs .wd-nav-tabs > li,
    body.single-product .woocommerce-tabs > ul.tabs > li {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;}

    body.single-product .woocommerce-tabs .wd-nav-wrapper {
        text-align: start;}

    body.single-product .woocommerce-tabs .wd-nav-tabs > li > a,
    body.single-product .woocommerce-tabs > ul.tabs > li > a {
        display: inline-block;
        position: relative;
        padding: 9px 0;
        border: 0;
        background: none;
        color: var(--kajo-sp-muted);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        transition: color .18s ease;}

    /* A rule under the active label rather than a filled block - the block
       read as a button and competed with the add to cart. */
    body.single-product .woocommerce-tabs .wd-nav-tabs > li > a::after,
    body.single-product .woocommerce-tabs > ul.tabs > li > a::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: var(--kajo-sp-ink);
        opacity: 0;
        transform: scaleX(.4);
        transform-origin: inline-start;
        transition: opacity .18s ease, transform .18s ease;}

    body.single-product .woocommerce-tabs .wd-nav-tabs > li > a:hover,
    body.single-product .woocommerce-tabs > ul.tabs > li > a:hover {
        color: var(--kajo-sp-ink);}

    body.single-product .woocommerce-tabs .wd-nav-tabs > li.active > a,
    body.single-product .woocommerce-tabs > ul.tabs > li.active > a {
        background: none;
        color: var(--kajo-sp-ink);
        font-weight: 700;}

    body.single-product .woocommerce-tabs .wd-nav-tabs > li.active > a::after,
    body.single-product .woocommerce-tabs > ul.tabs > li.active > a::after {
        opacity: 1;
        transform: scaleX(1);}

    /* The rail carries the theme's wd-style-underline-reverse, whose marker
       is a 3px olive bar drawn ABOVE the label - that was the stray green
       line over "Description". The rule under the active item replaces it. */
    body.single-product .woocommerce-tabs .wd-nav-tabs .nav-link-text::after,
    body.single-product .woocommerce-tabs .wd-nav-tabs .nav-link-text::before {
        display: none !important;}

    /* The grid children are the accordion wrappers, not the panels inside
       them. Placing the panels left the second wrapper to auto-place into
       the rail column, 220px wide and collapsed. */
    body.single-product .woocommerce-tabs > .wd-accordion-item,
    body.single-product .woocommerce-tabs > .wd-tab-content,
    body.single-product .woocommerce-tabs > .woocommerce-Tabs-panel {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0;}
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    color: #37424f;
    font-size: 15px;
    line-height: 1.7;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;}

/* ---------- related products ----------------------------------------------- */

body.single-product .related.products > h2,
body.single-product .up-sells > h2,
body.single-product .related.products .title-wrapper .wd-title-text,
body.single-product .up-sells .title-wrapper .wd-title-text {
    margin: 0 0 22px;
    color: var(--kajo-sp-ink);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: start;}

/* ---------- phones ---------------------------------------------------------- */

@media (max-width: 992px) {
    body.single-product .product-image-summary-inner > .summary {
        margin-top: 26px !important;}

    body.single-product .summary .product_title {
        font-size: 24px;}

    body.single-product .summary .price {
        font-size: 24px;}

    body.single-product .summary .product_meta {
        grid-template-columns: 84px minmax(0, 1fr);}
}

@media (prefers-reduced-motion: reduce) {
    body.single-product .summary .single_add_to_cart_button,
    body.single-product .summary .wd-swatch {
        transition: none;}

    body.single-product .summary .single_add_to_cart_button:hover,
    body.single-product .summary .wd-swatch:hover {
        transform: none;}
}

/* ===========================================================================
   Description typography
   ===========================================================================
   Presentation only. No product copy, markup or database value is touched by
   anything below - this is the first step of the content audit's plan, which
   is to make the products that already carry structure look right before any
   rewriting begins, and to have the finished shape waiting for the ones that
   do not.

   Headings are normalised across all six levels on purpose. Counted over the
   published catalogue, authors used h5 sixty-six times, h2 forty-seven, h6
   thirty-five, h4 twelve, h1 eleven and h3 only five - the level carries no
   meaning here, so styling h3 alone would have missed almost everything and
   left the rest at browser defaults. They are all drawn as one section
   heading.
   =========================================================================== */

body.single-product .woocommerce-tabs {
    margin-top: 48px;}

/* A measure, not the full column. At 1127px a line of 15px text runs to well
   over 120 characters, which is the main reason the longer descriptions read
   as a wall. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    max-width: 920px;
    color: #37424f;
    font-size: 15.5px;
    line-height: 1.75;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p {
    margin: 0 0 18px;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > *:last-child {
    margin-bottom: 0;}

/* One heading style for every level the catalogue happens to use. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h1,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h4,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h5,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h6 {
    margin: 32px 0 12px;
    color: var(--kajo-sp-ink);
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-transform: none;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;}

/* Lists: a little air between items, and the marker in brand olive rather
   than default black. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel ul,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel ol {
    margin: 10px 0 22px;
    padding-inline-start: 22px;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel li {
    margin: 0 0 9px;
    line-height: 1.65;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel li:last-child {
    margin-bottom: 0;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel li::marker {
    color: var(--kajo-sp-sage-dark);}

/* Supplier copy leans on bold heavily - 1,489 uses across the published
   catalogue - so it is darkened rather than made heavier. At 800 the page
   turns into a patchwork. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel strong,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel b {
    color: var(--kajo-sp-ink);
    font-weight: 600;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel a {
    color: var(--kajo-sp-sage-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .18s ease;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel a:hover {
    color: var(--kajo-sp-orange);}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel blockquote {
    margin: 0 0 20px;
    padding: 2px 0 2px 18px;
    border-inline-start: 3px solid rgba(156, 175, 136, .55);
    color: var(--kajo-sp-muted);
    font-style: normal;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--kajo-sp-line);
    text-align: start;}

/* Where a description is one unbroken block - 220 of 360 published products
   have neither a heading nor a list - the measure above and this slightly
   looser leading are all that can help until the copy itself is rewritten. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p + p {
    margin-top: 0;}

/* ---------- the summary column, spacing only ------------------------------ */

body.single-product .summary .woocommerce-product-details__short-description {
    max-width: 640px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;}

body.single-product .summary .woocommerce-product-details__short-description p {
    margin: 0 0 10px;}

body.single-product .summary .woocommerce-product-details__short-description br + br {
    display: none;}

@media (max-width: 767px) {
    body.single-product .woocommerce-tabs {
        margin-top: 32px;}

    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
        font-size: 14.5px;
        line-height: 1.72;}

    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h1,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h4,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h5,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h6 {
        margin-top: 26px;
        font-size: 17px;}

    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel ul,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel ol {
        padding-inline-start: 20px;}

    body.single-product .summary .woocommerce-product-details__short-description {
        font-size: 14.5px;
        line-height: 1.65;}
}

/* ---------- overriding pasted inline styles ------------------------------- */
/* An inline style attribute beats any stylesheet rule that is not marked
   important, however specific. A large part of the catalogue was pasted in
   from a markdown converter and carries its formatting on the elements
   themselves - counted over the 360 published products:
   
       data-sourcepos markers        1037 uses across 61 products
       Apple-converted-space spans   1468 uses across 63 products
       <strong style="font-weight">   693 uses across 30 products
       <li style="margin...">         279 uses across 28 products
       style="font-size"               23 uses across 11 products
       inline colours                   0

   So spacing here was being ignored on exactly the products that have the
   most structure to show off. These four declarations are marked important
   to win that fight, and no others. They become redundant - and can simply
   be dropped - once the HTML clean-up in the audit's step 2 has run. No
   inline colours exist, so nothing here touches colour. */

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel li {
    margin-bottom: 9px !important;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel li:last-child {
    margin-bottom: 0 !important;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p {
    margin-bottom: 18px !important;}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel strong,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel b {
    font-weight: 600 !important;}

/* Pasted font sizes fight the measure; the panel sets the scale. */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel [style*="font-size"] {
    font-size: inherit !important;}

/* The theme sets h2 { font-size: 25px !important } on phones, which outranks
   the heading scale above. */
@media (max-width: 767px) {
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h1,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h4,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h5,
    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h6 {
        font-size: 17px !important;}
}

/* ---------------------------------------------------------------------------
   Holding the card component out of the summary
   ---------------------------------------------------------------------------
   The catalogue card CSS keys on bare component classes - .wd-entities-title
   for the card title, .price for the card price - and the single product
   summary uses the same two classes for the page's own H1 and price. When
   product pages joined ohmykajo_is_product_card_context() so the related grid
   would use the card component, those card sizes started landing here:

       body.kajo-catalogue .wd-entities-title { font-size: 11.7px !important }
       body.kajo-catalogue .price            { font-size: 11.5px !important }

   at which point the H1 rendered at 11.7px inside a 112px box - which reads
   as a missing heading with a large gap above the short description - and the
   price shrank to 12px. The summary states its own sizes back at the same
   weight. Scoped to .summary, so cards inside the related grid keep theirs.
   --------------------------------------------------------------------------- */

body.single-product .summary .product_title {
    font-size: clamp(25px, 6.4vw, 36px) !important;
    line-height: 1.18 !important;
    min-height: 0 !important;

    /* The H1 carries `wd-entities-title`, which is also the product CARD's
       title class - so the card's clamp applied to it. On a narrow screen that
       meant max-height:112px with overflow:hidden, and a four-line product
       name was cut off mid-letter at 118px. A product's own name is never
       truncated on its own page. */
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
    display: block !important;

    /* The card rules zero the title's margin as well, which left the heading
       and the short description touching. */
    margin-bottom: 12px !important;}

body.single-product .summary .summary-inner > p.price,
body.single-product .summary .kajo-sp-variation-info .price,
body.single-product .summary .woocommerce-variation-price .price {
    font-size: 26px !important;
    line-height: 1.15 !important;
    min-height: 0 !important;}

body.single-product .summary .summary-inner > p.price del,
body.single-product .summary .kajo-sp-variation-info .price del {
    font-size: 17px !important;}

/* The attribute value the theme prints beside the label - "Color: Blue" - came
   out a size larger than the label and on a different baseline. */
body.single-product .summary table.variations th.label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;}

body.single-product .summary table.variations th.label label {
    margin: 0;}

body.single-product .summary .wd-attr-selected {
    color: var(--kajo-sp-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: baseline;}

/* ===========================================================================
   Attribute table (Additional Info)
   ===========================================================================
   The generic table styling earlier in this file put a bottom border on each
   cell, and because a <th> shrinks to its text that drew a stub of a line
   under "Weight", another under the value, and a third across the row. The
   divider belongs to the row; the cells carry none. Labels are set like the
   SKU block in the summary so the two read as the same kind of information.
   =========================================================================== */

body.single-product .woocommerce-Tabs-panel .shop_attributes {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;}

/* The theme lays each row out as a flex pair with space-between, which pushes
   the value hard against the right edge - so "5 g" sat at the far right while
   the long colour list filled the row and read from the left, and no two rows
   lined up. A fixed label column with the value beside it instead. */
body.single-product .woocommerce-Tabs-panel .shop_attributes tr {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 18px;
    border-bottom: 1px solid var(--kajo-sp-line);}

body.single-product .woocommerce-Tabs-panel .shop_attributes tr:last-child {
    border-bottom: 0;}

body.single-product .woocommerce-Tabs-panel .shop_attributes th,
body.single-product .woocommerce-Tabs-panel .shop_attributes td {
    padding: 13px 0;
    border: 0;
    background: none;
    text-align: start;
    vertical-align: top;}

body.single-product .woocommerce-Tabs-panel .shop_attributes th {
    flex: 0 0 34%;
    width: 34%;
    color: var(--kajo-sp-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;}

body.single-product .woocommerce-Tabs-panel .shop_attributes td {
    flex: 1 1 auto;
    color: var(--kajo-sp-ink);
    font-size: 14.5px;
    line-height: 1.6;
    text-align: start !important;}

body.single-product .woocommerce-Tabs-panel .shop_attributes td p {
    margin: 0;}

/* Attribute values are taxonomy terms, so they come through as links. In a
   specification table they should read as values, not navigation. */
body.single-product .woocommerce-Tabs-panel .shop_attributes td a {
    color: inherit;
    text-decoration: none;}

body.single-product .woocommerce-Tabs-panel .shop_attributes td a:hover {
    color: var(--kajo-sp-orange);}

/* ===========================================================================
   Tabs as an accordion, below the rail breakpoint
   ===========================================================================
   Under 769px the theme swaps the rail for an accordion and the panels were
   left with the stock treatment: the open heading in pale sage against black
   closed ones, a grey chevron, and no separation between sections.
   =========================================================================== */

@media (max-width: 768px) {
    body.single-product .woocommerce-tabs {
        display: block;
        margin-top: 28px;}

    body.single-product .woocommerce-tabs .wd-accordion-item {
        border-top: 1px solid var(--kajo-sp-line);}

    body.single-product .woocommerce-tabs .wd-accordion-item:first-of-type {
        border-top: 0;}

    body.single-product .woocommerce-tabs .wd-accordion-title {
        gap: 14px;
        padding: 18px 0;
        cursor: pointer;}

    body.single-product .woocommerce-tabs .wd-accordion-title-text {
        color: var(--kajo-sp-ink);
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: -.005em;
        text-transform: none;
        transition: color .18s ease;}

    /* The open section was the palest thing on screen - sage on white - while
       the closed ones were solid black, so the accordion read upside down. */
    body.single-product .woocommerce-tabs .wd-accordion-title.wd-active .wd-accordion-title-text {
        color: var(--kajo-sp-ink);}

    body.single-product .woocommerce-tabs .wd-accordion-opener {
        color: var(--kajo-sp-muted);
        transition: transform .25s ease, color .18s ease;}

    body.single-product .woocommerce-tabs .wd-accordion-title.wd-active .wd-accordion-opener {
        color: var(--kajo-sp-sage-dark);}

    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
        padding: 0 0 24px;}

    /* The theme opens a panel by switching display, which no transition can
       follow. The height still slides from its script; this gives the content
       a short settle on top of it so the section does not simply appear. */
    body.single-product .woocommerce-tabs .wd-accordion-title.wd-active + .woocommerce-Tabs-panel {
        animation: kajo-accordion-reveal .3s ease both;}

    body.single-product .woocommerce-tabs .shop_attributes th {
        flex: 0 0 34%;
        width: 34%;
        font-size: 11px;}

    body.single-product .woocommerce-tabs .shop_attributes td {
        font-size: 14px;}
}

@keyframes kajo-accordion-reveal {
    from { opacity: 0; transform: translateY(-5px);}
    to   { opacity: 1; transform: none;}
}

@media (prefers-reduced-motion: reduce) {
    body.single-product .woocommerce-tabs .wd-accordion-title.wd-active + .woocommerce-Tabs-panel {
        animation: none;}
}

/* ---------- the "people watching" line -------------------------------------
   The theme's wd-style-with-bg paints a tinted panel behind this through a
   ::before and rules it off with a border, which made one line of text read
   as a disabled input between two crisp pills. Both go.

   It lives here rather than with the saving pills because it has to apply to
   every product, not only the discounted ones.
   --------------------------------------------------------------------------- */

body.single-product .summary .wd-visits-count {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    /* The top margin is stated rather than left to the price row's bottom
       margin, which collapsed to nothing on mobile and left the line sitting
       on the price. */
    margin: 10px 0 14px !important;}

body.single-product .summary .wd-visits-count::before,
body.single-product .summary .wd-visits-count::after {
    display: none !important;
    content: none !important;}

body.single-product .summary .wd-visits-count .wd-info-number {
    font-weight: 800;}

/* The price row already carries a bottom margin of its own; with the line
   below stating a top margin, the two would add up to a gap half again as
   large as intended. */
body.single-product .summary .price:has(+ .wd-visits-count) {
    margin-bottom: 0 !important;}


/* ---------- trust badges ---------------------------------------------------
   Between the "people watching" line and the stock pill. Three short
   reassurances in the shop's own sage, not the blue of the reference design,
   so they sit with the stock pill rather than against it.
   --------------------------------------------------------------------------- */

body.single-product .summary .kajo-sp-trust {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 2px 0 14px !important;
    padding: 0 !important;
    list-style: none !important;}

body.single-product .summary .kajo-sp-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--kajo-sp-ink);
    font-size: 13.5px;
    line-height: 1.35;
    list-style: none !important;}

body.single-product .summary .kajo-sp-trust__item::before,
body.single-product .summary .kajo-sp-trust__item::marker {
    display: none !important;
    content: none !important;}

body.single-product .summary .kajo-sp-trust__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--kajo-sp-sage-dark);}

body.single-product .summary .kajo-sp-trust__text {
    min-width: 0;
    text-wrap: pretty;}

@media (max-width: 767px) {
    body.single-product .summary .kajo-sp-trust {
        gap: 8px;
        margin-bottom: 12px !important;}

    body.single-product .summary .kajo-sp-trust__item {
        font-size: 12.5px;}

    body.single-product .summary .kajo-sp-trust__icon {
        width: 20px;
        height: 20px;}
}

/* ===========================================================================
   The tab accordion on mobile.

   Below 1024px Woodmart turns the Description / Additional Info / FAQs tabs
   into an accordion. Two faults were visible in it:

   1. Every .wd-accordion-item carried BOTH a top and a bottom border - two
      different hairlines from two different rules, rgba(16,24,33,.1) above
      and rgba(0,0,0,.106) below. Adjacent items therefore stacked two 1px
      lines between them, and the last item's bottom border sat 26px above
      the store disclaimer's own top border: a second double. Measured, not
      guessed.

   2. The panel opened and closed by jQuery slideDown/slideUp animating an
      inline height, while the stylesheet also ran `transition: opacity`.
      The two fought and the movement snapped.

   The borders are reduced to the pattern the shared FAQ accordion already
   uses - a rule above each item, one below the last, one hairline token -
   and the geometry is moved to a grid-template-rows transition, which
   animates to the panel's natural height without anyone having to measure
   it. The theme keeps ownership of the open/closed STATE via .wd-active;
   only the drawing changes.

   Everything that changes behaviour is scoped to [data-kajo-acc], set by
   ohmykajo-product-tabs.js. Without that script the theme behaves as before.
   =========================================================================== */

@media (max-width: 1024px) {

    /* ---- one hairline, never two ---------------------------------------- */

    body.single-product .woocommerce-tabs > .wd-accordion-item {
        border-top: 1px solid var(--kajo-ba-line, rgba(0, 0, 0, .10)) !important;
        border-bottom: 0 !important;}

    body.single-product .woocommerce-tabs > .wd-accordion-item:last-child {
        border-bottom: 1px solid var(--kajo-ba-line, rgba(0, 0, 0, .10)) !important;}

    /* The accordion now closes itself off with that last rule, so the
       disclaimer's own top border immediately below is the second half of
       the double the brief pointed at. It goes; the spacing still separates
       the two sections. Desktop is untouched - there the tabs are tabs and
       that border is the only divider. */
    body.single-product .kajo-store-disclaimer {
        border-top: 0;
        padding-top: 4px;
        margin-top: 30px;}

    /* ---- the title row --------------------------------------------------- */

    body.single-product .woocommerce-tabs > .wd-accordion-item > .wd-accordion-title {
        padding: 17px 2px 17px 0;
        column-gap: 12px;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: .01em;
        transition: color .2s ease;}

    body.single-product .woocommerce-tabs > .wd-accordion-item > .wd-accordion-title.wd-active {
        color: var(--kajo-sp-orange, #f58634);}

    /* The opener is the theme's arrow. It only needs to turn on the same
       curve as the panel so the two read as one movement. */
    body.single-product .woocommerce-tabs .wd-accordion-opener {
        color: var(--kajo-sp-orange, #f58634);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);}

    /* ---- the panel ------------------------------------------------------- */

    /* A one-row grid collapsed to 0fr. Opening interpolates the row to 1fr,
       which resolves to the content's natural height, so nothing has to be
       measured in JavaScript and the panel stays correct if its contents
       change height later - which they do, because the FAQs panel holds
       another accordion.

       !important throughout: jQuery's slide writes display, height, overflow,
       padding and margin as inline styles on this element, and every one of
       them has to lose to the rules below or the two animations fight. That
       is the whole of the snap in fault 2. */
    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel {
        display: grid !important;
        grid-template-rows: 0fr;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);}

    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel.wd-active {
        grid-template-rows: 1fr;}

    /* The grid item. It must carry the padding - on the panel it would show
       while the panel was collapsed - and it must be allowed to be shorter
       than its content, which min-height:0 permits and overflow:hidden then
       clips during the transition. */
    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel > .wc-tab-inner {
        min-height: 0;
        overflow: hidden;}

    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel.wd-active > .wc-tab-inner {
        padding-bottom: 26px;}

    /* The content fades in just behind the height so a long panel does not
       appear to arrive all at once. */
    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel > .wc-tab-inner > * {
        opacity: 0;
        transition: opacity .25s ease .05s;}

    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel.wd-active > .wc-tab-inner > * {
        opacity: 1;}
}

/* Interpolating grid-template-rows is an animation, and someone who has asked
   for less motion should get the same panel without it. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel,
    body.single-product .woocommerce-tabs[data-kajo-acc] .woocommerce-Tabs-panel > .wc-tab-inner > *,
    body.single-product .woocommerce-tabs .wd-accordion-opener {
        transition: none;}
}