/* ==========================================================================
   PRODUCT PAGE, DESKTOP: THE SPECIFICATIONS (Product/_PdpSpecDesktop.cshtml)

   Digikala's layout - a group title in a column of its own, the rows beside it, a
   hairline under each name and each value, the first eight rows and «مشاهده بیشتر» -
   kept plain: the rows are held to a short width (420px) so their lines only mark each row,
   they lift on hover, and the more-link is the store's accent with a count of
   what it opens. Sizes and weights are the type ladder's (base.less).
   Plain CSS, linked by ProductTemplate.Simple on desktop only.
   ========================================================================== */

.pdp-spec {
    --pdp-spec-title: 232px;
    --pdp-spec-name: 170px;
    --pdp-spec-line: #F0F0F1;
    --pdp-spec-muted: #81858B;
    --pdp-spec-ink: #0C0C0C;
    --pdp-spec-accent: var(--ryan-primary, #EF4056);

    /* the page's sticky header and tab bar sit over the top when «بستن» scrolls back */
    scroll-margin-top: 140px;
    font-family: 'yekanbakh';
}

.pdp-spec__group {
    display: grid;
    grid-template-columns: var(--pdp-spec-title) minmax(0, 1fr);
    column-gap: 24px;
    padding: 4px 0 28px;
}

.pdp-spec__group + .pdp-spec__group {
    padding-top: 12px;
}

/* the group's name, level with its first row */
.pdp-spec__group-title {
    align-self: start;
    margin: 0;
    padding: 14px 0 0;
    font-size: var(--tc-fs-h3);
    font-weight: var(--tc-fw-label);
    line-height: 1.6;
    color: var(--pdp-spec-ink);
}

.pdp-spec__rows {
    /* short rows: a hairline only has to tell one row from the next - at the page's width,
       and still at 640px, it ran on far past a one-word value. A long value wraps instead. */
    max-width: 420px;
    margin: 0;
}

.pdp-spec__row {
    display: grid;
    grid-template-columns: var(--pdp-spec-name) minmax(0, 1fr);
    column-gap: 16px;
    border-radius: 8px;
    transition: background-color .15s ease;
}

.pdp-spec__row:hover {
    background: #FAFAFB;
}

/* name and value each draw their own hairline, so a gap stays between the two - the name
   column never runs into the value's */
.pdp-spec__name,
.pdp-spec__value {
    margin: 0;
    padding: 14px 8px 13px;
    border-bottom: 1px solid var(--pdp-spec-line);
    font-size: var(--tc-fs-small);
    line-height: 1.75;
}

.pdp-spec__name {
    font-weight: var(--tc-fw-text);
    color: var(--pdp-spec-muted);
}

.pdp-spec__value {
    font-weight: var(--tc-fw-text);
    color: var(--pdp-spec-ink);
    overflow-wrap: anywhere;
}

/* an attribute with several values: one per line */
.pdp-spec__v {
    display: block;
}

.pdp-spec__v + .pdp-spec__v {
    margin-top: 4px;
}

/* the ninth row on, and a group made only of them, wait for «مشاهده بیشتر» */
.pdp-spec:not(.is-open) .pdp-spec__more {
    display: none;
}

.pdp-spec__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px calc(var(--pdp-spec-title) + 24px) 0 0;
    padding: 8px 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--tc-fs-small);
    font-weight: var(--tc-fw-label);
    color: var(--pdp-spec-accent);
    cursor: pointer;
}

.pdp-spec__toggle:hover .pdp-spec__toggle-text {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pdp-spec__toggle:focus-visible {
    outline: 2px solid var(--pdp-spec-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* a drawn chevron: the theme loads one icon face only, so no icon class is relied on */
.pdp-spec__chevron {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border: solid currentColor;
    border-width: 0 0 1.75px 1.75px;
    transform: rotate(-45deg);
    transition: transform .2s ease, margin .2s ease;
}

.pdp-spec.is-open .pdp-spec__chevron {
    margin-top: 4px;
    transform: rotate(135deg);
}

/* a narrow desktop window: the group title goes over its rows */
@media only screen and (max-width: 1100px) {
    .pdp-spec__group {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-spec__group-title {
        padding-bottom: 6px;
    }

    .pdp-spec__toggle {
        margin-right: 0;
    }
}