/* Product Details accordion — inline headings and the clamp/MORE toggle.

   The description field now carries its own headings ("Description:",
   "Materials & Care:") authored as bold + underline in Shopline's editor, so
   they are styled by tag rather than by class — a class would not survive the
   content team writing the next one by hand in the rich text editor.
   ========================================================================== */

.product__details-container .accordion__content p strong u,
.product__details-container .accordion__content p u strong {
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #15140F;
}

/* The heading sits in its own paragraph; give it air above, but not before the
   first one. */
.product__details-container .accordion__content p:has(> strong > u),
.product__details-container .accordion__content p:has(> u > strong) {
    margin-top: 14px;
    margin-bottom: 4px;
}

.product__details-container .accordion__content > .pd-clamp > .pd-clamp__text > p:first-child:has(> strong > u),
.product__details-container .accordion__content > p:first-child:has(> strong > u) {
    margin-top: 0;
}

/* ── Clamp ────────────────────────────────────────────────────────────────
   A checkbox/label pair rather than a script, so the control works before (and
   without) JavaScript. component-product-details.js only removes the toggle
   when the copy is short enough not to need it. */
.pd-clamp {
    display: block;
}

.pd-clamp__state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pd-clamp__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pd-clamp-lines, 3);
    line-clamp: var(--pd-clamp-lines, 3);
    overflow: hidden;
}

/* Checked = expanded. Unsetting the line clamp is not enough on its own; the
   element has to leave -webkit-box layout or the paragraphs stay collapsed
   into a single block. */
.pd-clamp__state:checked ~ .pd-clamp__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.pd-clamp__toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 5px 0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #15140F;
    cursor: pointer;
    border-bottom: 1px solid rgba(21, 20, 15, 0.35);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.pd-clamp__toggle:hover {
    border-bottom-color: #15140F;
}

/* Only one of the two words shows at a time. */
.pd-clamp__less,
.pd-clamp__state:checked ~ .pd-clamp__toggle .pd-clamp__more {
    display: none;
}

.pd-clamp__state:checked ~ .pd-clamp__toggle .pd-clamp__less {
    display: inline;
}

/* Keyboard focus lands on the hidden checkbox, so the ring has to be drawn on
   the label it controls. */
.pd-clamp__state:focus-visible ~ .pd-clamp__toggle {
    outline: 2px solid #15140F;
    outline-offset: 3px;
}

/* Set by the script when the content already fits: nothing to expand. */
.pd-clamp.pd-clamp--fits .pd-clamp__toggle {
    display: none;
}

.pd-clamp.pd-clamp--fits .pd-clamp__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}