/* ==========================================================================
   RoyalHyper — product content stylesheet (rh-content.css)
   Contract v5 (v4 pages still styled) · stylesheet release 5.6 · 2026-10-20

   Lives as its own file in the child theme folder, loaded by the
   rh-content-enqueue.php snippet, which versions it by file date: replacing
   this file updates every page built since v4 at once (then clear the
   WP Rocket cache). Styles only the classes in references/html-contract.md;
   never declares a font (the theme's default font is used).

   Sections:
   A. Tokens
   B. Add-to-cart button (site-wide, all add-to-cart buttons)
   C. Content base (.rh-content)
   D. Components (incl. operator images)
   D1. v5 layout: wide panel, section cards, title, collapsible boxes
   D2. Short description
   D3. Rhythm: section tones, key item, two-column grid (5.4-5.5)
   D4. Row headers, this product's row, stacked tables, fit pairs (5.6)
   E. Legacy FAQ fix (old .rh-faq-item pages)
   F. Mobile + reduced motion
   ========================================================================== */

/* A. Tokens -------------------------------------------------------------- */
:root {
    --rh-ink: #131921;          /* header navy */
    --rh-ink-2: #232F3D;        /* menu bar navy */
    --rh-text: #3B424D;         /* body text (10:1 on white) */
    --rh-muted: #5E6672;        /* secondary text (5.8:1) */
    --rh-gold: #C5A66A;         /* brand gold: headings, rules, icons */
    --rh-gold-text: #7D5E27;    /* gold for small text and links (6:1) */
    --rh-gold-soft: rgba(197, 166, 106, 0.35);
    --rh-cream: #F8F3EA;
    --rh-cream-2: #FBF8F2;
    --rh-line: #E9E4DA;
    --rh-line-gold: #E6D8BA;
    --rh-cta: #1B7A43;          /* add to cart: white text 5.4:1 */
    --rh-cta-hover: #145C32;    /* 8.1:1 */
    --rh-radius: 10px;
    --rh-radius-lg: 16px;
    --rh-measure: none;         /* 5.0: the description fills the theme's tab panel; sections are cards */
}

/* B. Add-to-cart button -------------------------------------------------- */
.woocommerce div.product form.cart .single_add_to_cart_button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.product-summary .single_add_to_cart_button.button.alt,
.sticky-add-to-cart .single_add_to_cart_button,
.rh-add-to-cart-btn {
    background-color: var(--rh-cta) !important;
    color: #fff !important;
    border-radius: var(--rh-radius) !important;
    box-shadow: 0 4px 14px -4px rgba(19, 25, 33, 0.28) !important;
    letter-spacing: 0 !important;
    transform: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 48px;
}
.woocommerce div.product form.cart .single_add_to_cart_button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.product-summary .single_add_to_cart_button.button.alt:hover,
.sticky-add-to-cart .single_add_to_cart_button:hover,
.rh-add-to-cart-btn:hover {
    background-color: var(--rh-cta-hover) !important;
    box-shadow: 0 6px 18px -6px rgba(19, 25, 33, 0.35) !important;
    transform: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.button:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.product-summary .single_add_to_cart_button.button.alt:active,
.rh-add-to-cart-btn:active {
    background-color: var(--rh-cta-hover) !important;
    box-shadow: 0 2px 6px -2px rgba(19, 25, 33, 0.3) !important;
    transform: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.button:focus-visible,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:focus-visible,
.sticky-add-to-cart .single_add_to_cart_button:focus-visible,
.rh-add-to-cart-btn:focus-visible {
    outline: 3px solid var(--rh-ink) !important;
    outline-offset: 2px !important;
}
/* The review submit button was green too and competed with add to cart. */
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
    background-color: transparent !important;
    color: var(--rh-ink) !important;
    border: 1.5px solid var(--rh-ink) !important;
    box-shadow: none !important;
    border-radius: var(--rh-radius) !important;
    letter-spacing: 0 !important;
    transform: none !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover {
    background-color: var(--rh-ink) !important;
    color: #fff !important;
}

/* C. Content base -------------------------------------------------------- */
.rh-content {
    direction: rtl;
    text-align: right;
    max-width: var(--rh-measure);
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: 1.95;
    color: var(--rh-text);
}
.rh-content *,
.rh-content *::before,
.rh-content *::after { box-sizing: border-box; }

.rh-content p {
    font-size: 1em;
    line-height: 1.95;
    color: var(--rh-text);
    margin: 0 0 1.1em;
}
.rh-content p:last-child { margin-bottom: 0; }

.rh-content h2,
.rh-content h3 {
    font-weight: 700;
    line-height: 1.5;
    color: var(--rh-ink);   /* navy headings; the gold lives in the rule above each H2 */
    text-align: right;
    text-wrap: balance;     /* 4.2: no single word left alone on a heading's last line; ignored by older browsers */
}
.rh-content h2 {
    font-size: 1.65rem;
    margin: 0 0 0.7em;
}
.rh-content h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: var(--rh-gold);
    margin-bottom: 0.85rem;
}
.rh-content h3 {
    font-size: 1.22rem;
    margin: 1.9em 0 0.55em;
}
.rh-content h2 + h3 { margin-top: 0.4em; }

.rh-content strong { color: var(--rh-ink); font-weight: 700; }
.rh-content .rh-mark {
    color: var(--rh-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(197, 166, 106, 0.32) 62%);
    padding: 0 2px;
}
.rh-content a {
    color: var(--rh-gold-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--rh-gold-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}
.rh-content a:hover {
    color: var(--rh-ink);
    text-decoration-color: var(--rh-gold);
}
.rh-content a:focus-visible,
.rh-content summary:focus-visible {
    outline: 2px solid var(--rh-ink);
    outline-offset: 3px;
    border-radius: 4px;
}
.rh-content bdi { unicode-bidi: isolate; }
.rh-content bdi.rh-nw { white-space: nowrap; }   /* short names/measurements never split across lines */
.rh-content ul,
.rh-content ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.rh-content li { margin: 0; list-style: none; }

/* Sections */
.rh-content .rh-sec {
    margin: 3.4rem 0;
    scroll-margin-top: 110px;
}
/* 5.3: the theme's sticky phone/tablet header (logo row + search bar) is 120px, taller than the
   desktop one, so a jump link would park the section under it */
@media only screen and (max-width: 849px) {
    .rh-content .rh-sec { scroll-margin-top: 132px; }
}
/* 5.2: logged-in staff see the 32px WordPress toolbar above the theme's sticky header */
@media only screen and (min-width: 783px) {
    .admin-bar .rh-content .rh-sec { scroll-margin-top: 142px; }
}
.rh-content .rh-sec--card,
.rh-content .rh-sec--purchase {
    background: #fff;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-lg);
    padding: 2rem 2.25rem;
    box-shadow: 0 18px 40px -28px rgba(19, 25, 33, 0.22);
}
.rh-content .rh-sec--note {
    background: var(--rh-cream-2);
    border: 1px solid var(--rh-line-gold);
    border-radius: var(--rh-radius-lg);
    padding: 2rem 2.25rem;
}
.rh-content .rh-sec--purchase {
    background: linear-gradient(180deg, var(--rh-cream) 0%, #fff 70%);
    border-color: var(--rh-line-gold);
}

/* D. Components ---------------------------------------------------------- */

/* Hook */
.rh-content .rh-hook {
    margin: 0.5rem 0 1.6rem;
    padding: 0.2rem 1.25rem 0.2rem 0;
    padding-inline: 1.25rem 0;
    border-inline-start: 2px solid var(--rh-gold);
}
.rh-content .rh-hook p {
    font-size: 1.2em;
    line-height: 1.9;
    font-weight: 500;
    color: var(--rh-ink);
}

/* Lead: the answer-first opening paragraph of each section */
.rh-content p.rh-lead {
    font-size: 1.1em;
    color: var(--rh-ink-2);
    line-height: 1.9;
}

/* Small design labels (fixed wording only) */
.rh-content .rh-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--rh-gold-text);
    background: var(--rh-cream);
    border: 1px solid var(--rh-line-gold);
    border-radius: 999px;
    padding: 0.15rem 0.8rem;
    margin-bottom: 0.8rem;
}

/* Product jump links (shop-style navigation, fixed labels) */
.rh-content .rh-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.6rem 0 0.4rem;
}
.rh-content .rh-jump a {
    flex: none;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--rh-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--rh-line-gold);
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.rh-content .rh-jump a:hover {
    border-color: var(--rh-gold);
    color: var(--rh-gold-text);
}
.rh-content .rh-qa > summary .rh-toggle { order: -1; }   /* in Persian the toggle sits on the right */

/* Plus/minus toggle icon (direction-neutral, used by the FAQ) */
.rh-content .rh-toggle {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rh-gold-soft);
    border-radius: 50%;
}
.rh-content .rh-toggle::before,
.rh-content .rh-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: var(--rh-gold-text);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}
.rh-content .rh-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.rh-content details[open] > summary .rh-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

/* At a glance */
.rh-content .rh-glance {
    background: var(--rh-cream);
    border-radius: var(--rh-radius-lg);
    padding: 1.4rem 1.6rem 1.2rem;
    margin: 1.6rem 0;
}
.rh-content .rh-glance ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 2rem;
    margin: 0;
}
.rh-content .rh-glance li {
    position: relative;
    padding-inline-start: 1.1rem;
    line-height: 1.8;
    font-size: 0.97rem;
}
.rh-content .rh-glance li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.75em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rh-gold);
}

/* Lists */
.rh-content .rh-list li {
    position: relative;
    padding-inline-start: 1.9rem;
    margin-bottom: 0.85rem;
    line-height: 1.9;
}
.rh-content .rh-list li:last-child { margin-bottom: 0; }
.rh-content .rh-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.2rem;
}
.rh-content .rh-list--dot li { padding-inline-start: 1.3rem; }
.rh-content .rh-list--dot li::before {
    top: 0.8em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rh-gold);
}
.rh-content .rh-list--check li::before {   /* CSS-drawn tick: never mirrored in RTL */
    top: 0.42em;
    width: 7px;
    height: 13px;
    border: solid var(--rh-gold);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    inset-inline-start: 0.45rem;
}
.rh-content .rh-list--alt li::before {     /* arrow pointing in reading direction (left) */
    top: 0.62em;
    width: 9px;
    height: 9px;
    border: solid var(--rh-gold-text);
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
    inset-inline-start: 0.35rem;
}

/* Steps */
.rh-content .rh-steps { counter-reset: rhstep; }
.rh-content .rh-steps li {
    counter-increment: rhstep;
    position: relative;
    padding-inline-start: 3rem;
    padding-bottom: 1.25rem;
    line-height: 1.9;
}
.rh-content .rh-steps li::before {
    content: counter(rhstep, persian);
    position: absolute;
    inset-inline-start: 0;
    top: 0.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--rh-ink);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rh-content .rh-steps li::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(1rem - 1px);
    top: 2.35rem;
    bottom: 0.2rem;
    width: 2px;
    background: var(--rh-line-gold);
}
.rh-content .rh-steps li:last-child { padding-bottom: 0; }
.rh-content .rh-steps li:last-child::after { display: none; }

/* Feature grid (key features) */
.rh-content .rh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.9rem;
    margin: 1.2rem 0 1.4rem;
}
.rh-content .rh-grid li {
    background: #fff;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius);
    padding: 0.95rem 1.1rem;
    line-height: 1.85;
    font-size: 0.96rem;
}
.rh-content .rh-grid li strong { display: block; margin-bottom: 0.15rem; font-size: 1rem; }
.rh-content .rh-grid .rh-colon { display: none; }   /* the label sits on its own line in the grid */

/* Operator images */
.rh-content .rh-figure {
    margin: 2.2rem 0;
    padding: 0;
}
.rh-content .rh-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 85vh;           /* tall infographics never fill more than a screen */
    margin: 0 auto;
    border-radius: var(--rh-radius-lg);
    box-shadow: none;           /* overrides the theme's global img shadow/margin on mobile */
}

/* Callouts */
.rh-content .rh-dyk,
.rh-content .rh-hero,
.rh-content .rh-note {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    border-radius: var(--rh-radius-lg);
}
.rh-content .rh-dyk {
    background: #fff;
    border: 1px solid var(--rh-line-gold);
}
.rh-content .rh-dyk h3,
.rh-content .rh-note h3 {
    color: var(--rh-ink);
    font-size: 1.08rem;
    margin: 0 0 0.45rem;
}
.rh-content .rh-hero {
    background: linear-gradient(160deg, var(--rh-cream) 0%, #fff 75%);
    border: 1px solid var(--rh-line-gold);
}
.rh-content .rh-hero h3 { margin-top: 0; }
.rh-content .rh-note {
    background: var(--rh-cream-2);
    border: 1px solid var(--rh-line);
    border-inline-start: 3px solid var(--rh-gold);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* A box inside a card/note section is flattened: no box-in-box, full line length */
.rh-content .rh-sec--card aside.rh-dyk,
.rh-content .rh-sec--card .rh-hero,
.rh-content .rh-sec--card .rh-note,
.rh-content .rh-sec--note aside.rh-dyk,
.rh-content .rh-sec--note .rh-hero,
.rh-content .rh-sec--purchase aside.rh-dyk {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rh-line-gold);
    border-radius: 0;
    padding: 1.2rem 0 0;
    margin: 1.6rem 0;
}

/* Fit: who it suits / better alternatives */
.rh-content .rh-fit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}
.rh-content .rh-fit__col {
    position: relative;
    border-radius: var(--rh-radius-lg);
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--rh-line);
    background: #fff;
}
.rh-content .rh-fit__col--yes::before {   /* accent inside the card: no curved border at the corners */
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 1.4rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--rh-gold);
}
.rh-content .rh-fit__col--alt { background: var(--rh-cream-2); }
.rh-content .rh-fit__col h3 {
    color: var(--rh-ink);
    font-size: 1.05rem;
    margin: 0 0 0.8rem;
}
.rh-content .rh-fit__col .rh-list li { font-size: 0.97rem; }

/* Tables */
.rh-content .rh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.4rem 0 1.6rem;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius);
    /* scroll shadows: show a soft edge when the table can scroll */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(19,25,33,.14), rgba(19,25,33,0)) left center / 12px 100% no-repeat scroll;
}
.rh-content .rh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0;
    background: transparent;
}
.rh-content .rh-table th,
.rh-content .rh-table td {
    padding: 0.8rem 1rem;
    text-align: right;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--rh-line);
}
.rh-content .rh-table thead th {
    background: var(--rh-cream);
    color: var(--rh-ink);
    font-weight: 700;
    border-bottom: 2px solid var(--rh-gold);
}
.rh-content .rh-table tbody tr:last-child td { border-bottom: 0; }
.rh-content .rh-table tbody td:first-child { color: var(--rh-ink); font-weight: 700; }
.rh-content .rh-table .is-hl { background: rgba(197, 166, 106, 0.09); }
.rh-content .rh-table thead th.is-hl { background: #F1E7D2; }
.rh-content .rh-table--wide { min-width: 34rem; }
@media only screen and (min-width: 48.01em) {
    /* 5.0: long column headers of 4+ column tables may wrap, so the table fits the card instead of scrolling */
    .rh-content .rh-table:not(.rh-table--wide) thead th { white-space: nowrap; }
}

/* Meters (scored attributes from Infographic_Data) */
.rh-content .rh-meters {
    background: #fff;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-lg);
    padding: 1.4rem 1.6rem;
    margin: 1.6rem 0;
}
.rh-content .rh-meters__title {
    font-weight: 700;
    color: var(--rh-ink);
    margin: 0 0 1rem !important;
}
.rh-content .rh-meters__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 2rem;
}
.rh-content .rh-meter__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.95rem;
}
.rh-content .rh-meter__name { font-weight: 700; color: var(--rh-ink); }
.rh-content .rh-meter__val { color: var(--rh-gold-text); font-weight: 700; white-space: nowrap; }
.rh-content .rh-meter__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 0.45rem 0 0.35rem;
}
.rh-content .rh-meter__track span {
    font-size: 0;               /* v5: the span holds a dot so the editor keeps it; only the bar shows */
    color: transparent;
    height: 8px;
    border-radius: 4px;
    background: #EEE7DA;
}
.rh-content .rh-meter__track span.on { background: var(--rh-gold); }
.rh-content .rh-meter__bar {
    height: 8px;
    border-radius: 4px;
    background: #EEE7DA;
    overflow: hidden;
    margin: 0.45rem 0 0.35rem;
}
.rh-content .rh-meter__fill { display: block; height: 100%; background: var(--rh-gold); border-radius: 4px; font-size: 0; color: transparent; }
.rh-content .rh-meter__desc { font-size: 0.88rem; color: var(--rh-muted); margin: 0; line-height: 1.7; }

/* Specs (non-scored attributes from Infographic_Data) */
.rh-content .rh-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.7rem;
    margin: 1.2rem 0 0;
    padding: 0;
}
.rh-content .rh-specs > div,
.rh-content .rh-specs > li {
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius);
    padding: 0.7rem 0.95rem;
    background: var(--rh-cream-2);
}
.rh-content .rh-specs dt,
.rh-content .rh-specs__k { display: block; font-size: 0.85rem; color: var(--rh-muted); margin: 0; }
.rh-content .rh-specs dd,
.rh-content .rh-specs__v { display: block; margin: 0; font-weight: 700; color: var(--rh-ink); line-height: 1.7; }
.rh-content ul.rh-specs { list-style: none; }
.rh-content .rh-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(19, 25, 33, 0.18);
    vertical-align: -2px;
    margin-inline-end: 0.4rem;
    font-size: 0;
    color: transparent;
}

/* FAQ */
.rh-content .rh-qa-list {
    border-top: 1px solid var(--rh-line);
    margin-top: 1rem;
}
.rh-content .rh-qa {
    border-bottom: 1px solid var(--rh-line);
}
.rh-content .rh-qa > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 1.05rem 0;
    min-height: 48px;
}
.rh-content .rh-qa > summary::-webkit-details-marker { display: none; }
.rh-content .rh-qa__q {
    flex: 1;
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.7;
    font-weight: 700;
    color: var(--rh-ink);
    text-wrap: balance;
    transition: color 0.2s ease;
}
.rh-content .rh-qa__q::before { content: none; }
.rh-content .rh-qa > summary:hover .rh-qa__q { color: var(--rh-gold-text); }
/* answer aligned under the question text, not under the toggle */
.rh-content .rh-qa__a { padding: 0 0 1.2rem; padding-inline-start: calc(28px + 0.85rem); }
.rh-content .rh-qa__a p { color: var(--rh-text); }

/* D1. v5 layout (release 5.0) ------------------------------------------- */
/* Desktop: every section is a white card (the grouping operators liked on the older pages) and the
   description uses the whole tab panel; phones: sections stay flat for the widest reading line. */
@media only screen and (min-width: 48.01em) {
    .rh-content .rh-sec {
        background: #fff;
        border: 1px solid var(--rh-line);
        border-radius: var(--rh-radius-lg);
        padding: 2rem 2.4rem;
        margin: 1.4rem 0;
        box-shadow: 0 18px 40px -30px rgba(19, 25, 33, 0.22);
    }
    .rh-content .rh-sec--note { background: var(--rh-cream-2); border-color: var(--rh-line-gold); }
    .rh-content .rh-sec--purchase { background: linear-gradient(180deg, var(--rh-cream) 0%, #fff 70%); border-color: var(--rh-line-gold); }
    .rh-content .rh-glance ul { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* Title: the product name opening the description (H2) */
.rh-content h2.rh-title {
    font-size: 1.75rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

/* Hook as a centred card (5.0) */
.rh-content .rh-hook {
    background: #fff;
    border: 1px solid var(--rh-line);
    border-inline-start: 0;
    border-radius: var(--rh-radius-lg);
    box-shadow: 0 18px 40px -30px rgba(19, 25, 33, 0.22);
    padding: 1.6rem 2.2rem;
    margin: 0 0 1.6rem;
    text-align: right;          /* 5.1: a paragraph of 4-5 lines reads better aligned than centred */
}
.rh-content .rh-hook p { font-weight: 600; }

/* Jump links as a labelled navigation bar */
.rh-content .rh-jump {
    align-items: center;
    background: var(--rh-cream-2);
    border: 1px solid var(--rh-line-gold);
    border-radius: var(--rh-radius-lg);
    padding: 0.75rem 1rem;
}
.rh-content .rh-jump__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rh-gold-text);
    margin-inline-end: 0.35rem;
}

/* 5.1 wide screens: comfortable text column + sticky "در این صفحه" navigation in the side space.
   Full-width text in the ~990px tab panel gives lines of ~120 Persian characters, too long to read
   comfortably; a ~46rem column alone left the panel half empty. The side column uses that space for
   the jump links, which stay in view while reading. Below 1200px the links stay inline under the
   summary card. If a theme container ever blocks position:sticky, the list simply stays at the top. */
@media only screen and (min-width: 75em) {
    .rh-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 13rem;
        column-gap: 2rem;
        align-items: start;
    }
    .rh-content > * { grid-column: 1; min-width: 0; }
    .rh-content > .rh-sec { margin: 0 0 1.4rem; }
    .rh-content > .rh-jump {
        grid-column: 2;
        grid-row: 1 / span 150;
        align-self: start;
        position: sticky;
        top: 7.5rem;
        display: block;
        margin: 0;
        padding: 1rem 0.9rem;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
    }
    .rh-content > .rh-jump .rh-jump__label { display: block; margin: 0 0 0.6rem; padding-inline: 0.55rem; }
    .rh-content > .rh-jump a {
        display: block;
        white-space: normal;
        border: 0;
        border-radius: 8px;
        background: transparent;
        padding: 0.45rem 0.55rem;
        margin: 0 0 0.15rem;
    }
    .rh-content > .rh-jump a:hover { background: #fff; color: var(--rh-gold-text); }
    .admin-bar .rh-content > .rh-jump { top: calc(7.5rem + 32px); max-height: calc(100vh - 11rem); }
}

/* Plus/minus toggle drawn on <summary> itself (no empty span: the editor would delete it) */
.rh-content .rh-qa > summary,
.rh-content details.rh-dyk > summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding-inline-start: calc(28px + 0.85rem);
}
.rh-content .rh-qa > summary::-webkit-details-marker,
.rh-content details.rh-dyk > summary::-webkit-details-marker { display: none; }
.rh-content .rh-qa > summary::before,
.rh-content details.rh-dyk > summary::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 1px solid var(--rh-gold-soft);
    border-radius: 50%;
    background:
        linear-gradient(var(--rh-gold-text), var(--rh-gold-text)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--rh-gold-text), var(--rh-gold-text)) center / 1.5px 11px no-repeat;
}
.rh-content .rh-qa[open] > summary::before,
.rh-content details.rh-dyk[open] > summary::before {
    background: linear-gradient(var(--rh-gold-text), var(--rh-gold-text)) center / 11px 1.5px no-repeat;
}

/* FAQ items as separate rounded rows */
.rh-content .rh-qa-list { border-top: 0; }
.rh-content .rh-qa {
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius);
    background: #fff;
    padding: 0 1.1rem;
    margin: 0 0 0.7rem;
    transition: border-color 0.2s ease;
}
.rh-content .rh-qa[open] { border-color: var(--rh-line-gold); }
.rh-content .rh-qa > summary { display: block; padding-top: 1rem; padding-bottom: 1rem; }
.rh-content .rh-qa > summary::before { inset-inline-start: 0; }
.rh-content span.rh-qa__q { display: block; }

/* Did-you-know: a closed box with its question; opens on tap */
.rh-content details.rh-dyk {
    background: var(--rh-cream-2);
    border: 1px solid var(--rh-line-gold);
    border-radius: var(--rh-radius-lg);
    padding: 0;
    margin: 1.6rem 0;
}
.rh-content details.rh-dyk > summary {
    display: block;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    padding-inline-end: 1.2rem;
    padding-inline-start: calc(1.2rem + 28px + 0.75rem);
}
.rh-content details.rh-dyk > summary::before { inset-inline-start: 1.2rem; }
.rh-content details.rh-dyk .rh-label { margin: 0 0 0.35rem; }
.rh-content .rh-dyk__q {
    display: block;
    font-weight: 700;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--rh-ink);
    text-wrap: balance;
}
.rh-content details.rh-dyk > summary:hover .rh-dyk__q { color: var(--rh-gold-text); }
.rh-content .rh-dyk__a { padding: 0 1.2rem 1.15rem; padding-inline-start: calc(1.2rem + 28px + 0.75rem); }

/* Images: at most ~36rem wide, centred */
.rh-content .rh-figure { max-width: 36rem; margin-inline: auto; }
.rh-content .rh-figure img { width: 100%; }

/* 5.2 image sizes: same role, same size. wide = the full text column (landscape scenes),
   default = ~36rem (square/portrait), small = ~22rem (a detail: a label, a symbol, a nozzle).
   Images that share one place stand side by side in .rh-figrow (2 on every screen; 3 from 36em). */
.rh-content .rh-figure--wide { max-width: none; }
.rh-content .rh-figure--small { max-width: 22rem; }
.rh-content .rh-figrow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 46rem;
    margin: 2.2rem auto;
}
.rh-content .rh-figrow > .rh-figure { margin: 0; max-width: none; }
.rh-content .rh-figrow > .rh-figure img { max-height: none; }

/* External citations open in a new tab; the hidden text tells screen-reader users */
.rh-content .rh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.rh-content a[target="_blank"]::after {
    content: "↗";
    display: inline-block;
    font-size: 0.8em;
    margin-inline-start: 0.2em;
    text-decoration: none;
}

/* D2. Short description (beside the product photo) --------------------- */
.rh-short {
    direction: rtl;
    text-align: right;
    color: var(--rh-text);
    margin: 0.4rem 0 1.2rem;
}
.rh-short p.rh-short__hook {
    font-size: 1.04rem;
    line-height: 1.85;
    font-weight: 500;
    color: var(--rh-ink);
    margin: 0 0 0.95rem;
    padding-inline-start: 0.9rem;                 /* 5.2: gold rule marks the summary's opening line */
    border-inline-start: 3px solid var(--rh-gold);
}
.rh-short ul.rh-short__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rh-short .rh-short__list li {
    position: relative;
    list-style: none;
    margin: 0 0 0.45rem;
    padding: 0;
    padding-inline-start: 1.55rem;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--rh-text);
}
.rh-short .rh-short__list li:last-child { margin-bottom: 0; }
.rh-short .rh-short__list li::before {   /* CSS-drawn gold tick, never mirrored in RTL */
    content: "";
    position: absolute;
    inset-inline-start: 0.35rem;
    top: 0.42em;
    width: 6px;
    height: 11px;
    border: solid var(--rh-gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rh-short .rh-short__list strong { color: var(--rh-ink); font-weight: 700; }
/* 5.2 one before-you-buy line (a label exclusion): an info mark, never a tick */
.rh-short p.rh-short__note {
    position: relative;
    margin: 0.9rem 0 0;
    padding: 0.55rem 0.9rem;
    padding-inline-start: 2.35rem;
    background: var(--rh-cream-2);
    border: 1px solid var(--rh-line-gold);
    border-radius: var(--rh-radius);
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--rh-text);
}
.rh-short p.rh-short__note::before {
    content: "i";
    position: absolute;
    inset-inline-start: 0.8rem;
    top: 0.82em;
    width: 1.1rem;
    height: 1.1rem;
    box-sizing: border-box;
    border: 1.5px solid var(--rh-gold-text);
    border-radius: 50%;
    color: var(--rh-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    font-style: normal;
    line-height: calc(1.1rem - 3px);
    text-align: center;
}
.rh-short p.rh-short__note strong { color: var(--rh-ink); font-weight: 700; }
.rh-short p.rh-short__info {
    margin: 0.8rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rh-line);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--rh-muted);
}
.rh-short bdi { unicode-bidi: isolate; }
.rh-short bdi.rh-nw { white-space: nowrap; }

/* D3. Rhythm (release 5.4, palette rule 5.5) ---------------------------- */
/* One palette, many forms. A long page of identical white cards tires the eye, but colour is not the
   cure: the page keeps the brand palette only (navy, gold, ivory, white; the product photos bring the
   colour) and varies its form instead. A few sections change surface (at most three per page, never
   two in a row: `tint` = warm ivory, `ink` = one navy band, `note` = cream with gold line), and a grid
   may lift one key item with the gold accent. Never one hue per item (5.4's item tones were withdrawn
   in 5.5: a row of different colours reads as a child's crayon box, not as luxury). */
.rh-content .rh-sec--tint,
.rh-content .rh-sec--ink {
    border-radius: var(--rh-radius-lg);
    padding: 2rem 2.25rem;
}
.rh-content .rh-sec--tint {
    background: var(--rh-cream);
    border: 1px solid var(--rh-line-gold);
    box-shadow: none;
}
.rh-content .rh-sec--ink {
    background: var(--rh-ink);
    border: 1px solid var(--rh-ink);
    box-shadow: 0 22px 48px -30px rgba(19, 25, 33, 0.55);
    color: #E4DFD5;
}
.rh-content .rh-sec--ink h2,
.rh-content .rh-sec--ink h3,
.rh-content .rh-sec--ink strong { color: #fff; }
.rh-content .rh-sec--ink p,
.rh-content .rh-sec--ink p.rh-lead,
.rh-content .rh-sec--ink li { color: #E4DFD5; }      /* 13:1 on the navy */
.rh-content .rh-sec--ink p.rh-lead { color: #F4EFE6; }
.rh-content .rh-sec--ink a { color: #E2C98F; text-decoration-color: rgba(226, 201, 143, 0.5); }
.rh-content .rh-sec--ink a:hover { color: #fff; text-decoration-color: #E2C98F; }
.rh-content .rh-sec--ink a:focus-visible { outline-color: #E2C98F; }
.rh-content .rh-sec--ink .rh-mark { color: #fff; background: linear-gradient(transparent 62%, rgba(197, 166, 106, 0.45) 62%); }
.rh-content .rh-sec--ink .rh-list li::before { background: var(--rh-gold); border-color: var(--rh-gold); }

/* 5.5 purchase section: a white card with a gold top edge (gold edge = the one accent for "act on this"),
   so the cautions section styled `note`, which always comes right before it, stays distinct */
.rh-content .rh-sec--purchase {
    background: #fff;
    border-color: var(--rh-line-gold);
    border-top: 3px solid var(--rh-gold);
}

/* One key item in a grid (the instruction a mistake would ruin): ivory wash, gold edge and dot */
.rh-content .rh-grid li.is-key {
    background: var(--rh-cream-2);
    border-color: var(--rh-line-gold);
    border-top: 3px solid var(--rh-gold);
}
.rh-content .rh-grid li.is-key > strong:first-child::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--rh-gold);
    margin-inline-end: 0.45em;
    vertical-align: 0.08em;
}

/* Grid with longer items (a sentence or two each): two per row, so lines stay readable */
@media only screen and (min-width: 36em) {
    .rh-content .rh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D4. Comparison tables and fit pairs (release 5.6) ---------------------- */
/* Row headers: the first cell of a body row is a <th scope="row"> (5.6 pages); it reads like the
   bold first column of earlier pages. */
.rh-content .rh-table tbody th {
    color: var(--rh-ink);
    font-weight: 700;
    background: transparent;
    border-bottom: 1px solid var(--rh-line);
}
.rh-content .rh-table tbody tr:last-child th { border-bottom: 0; }
/* This product's row (layout highlight_row): ivory wash, gold edge on the start side, small label */
.rh-content .rh-table tbody tr.is-hl { background: transparent; }
.rh-content .rh-table tbody tr.is-hl > th,
.rh-content .rh-table tbody tr.is-hl > td { background: var(--rh-cream); }
.rh-content .rh-table tbody tr.is-hl > th { box-shadow: inset -3px 0 0 var(--rh-gold); }   /* RTL: start = right */
.rh-content .rh-table tbody tr.is-hl .rh-label {
    display: block;
    width: fit-content;
    margin: 0.35rem 0 0;
    padding: 0.05rem 0.6rem;
    font-size: 0.72rem;
    white-space: nowrap;
    background: #fff;
}
/* Wide comparison tables on tablets and desktop: a little denser, so 6-8 columns fit the card */
@media only screen and (min-width: 48.01em) {
    .rh-content .rh-table--stack { font-size: 0.88rem; line-height: 1.7; }
    .rh-content .rh-table--stack th,
    .rh-content .rh-table--stack td { padding: 0.7rem 0.75rem; }
}
/* Phones: one card per row, each value under its column name (from data-label), instead of a
   table that has to be scrolled sideways. Two values per line; an odd last value takes the full line. */
@media only screen and (max-width: 48em) {
    .rh-content .rh-table-wrap--stack {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        margin: 1.2rem 0 1.4rem;
    }
    .rh-content .rh-table--stack,
    .rh-content .rh-table--stack tbody { display: block; min-width: 0; }
    .rh-content .rh-table--stack thead {     /* kept for screen readers, hidden on screen */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .rh-content .rh-table--stack tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem 1rem;
        padding: 0.95rem 1.05rem 1.05rem;
        margin: 0 0 0.7rem;
        background: #fff;
        border: 1px solid var(--rh-line);
        border-radius: var(--rh-radius);
    }
    .rh-content .rh-table--stack tbody tr:last-child { margin-bottom: 0; }
    .rh-content .rh-table--stack tbody th,
    .rh-content .rh-table--stack tbody tr:last-child th {
        grid-column: 1 / -1;
        display: block;
        padding: 0 0 0.6rem;
        border: 0;
        border-bottom: 1px solid var(--rh-line);
        font-size: 1rem;
        line-height: 1.6;
        background: transparent;
        box-shadow: none;
    }
    .rh-content .rh-table--stack tbody td {
        display: block;
        padding: 0;
        border: 0;
        line-height: 1.65;
        background: transparent;
    }
    .rh-content .rh-table--stack tbody td:last-child:nth-child(even) { grid-column: 1 / -1; }
    .rh-content .rh-table--stack tbody td::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 0.1rem;
        font-size: 0.76rem;
        font-weight: 400;
        color: var(--rh-muted);
    }
    .rh-content .rh-table--stack tbody tr.is-hl {
        background: var(--rh-cream);
        border-color: var(--rh-line-gold);
        box-shadow: inset -3px 0 0 var(--rh-gold);
    }
    .rh-content .rh-table--stack tbody tr.is-hl > th,
    .rh-content .rh-table--stack tbody tr.is-hl > td { background: transparent; box-shadow: none; }
    .rh-content .rh-table--stack tbody tr.is-hl .rh-label { display: inline-block; margin: 0 0.5rem 0 0; vertical-align: 0.1em; }
}

/* Fit pair written as two H2 sections ("for you if" / "if your taste differs"): two columns,
   the H2s styled as column titles (they stay H2s for the outline and search). */
.rh-content .rh-fit--sec { margin: 2.6rem 0; }
.rh-content .rh-fit--sec > .rh-fit__col { margin: 0; scroll-margin-top: 110px; }
.rh-content .rh-fit--sec > .rh-fit__col > h2 { font-size: 1.15rem; line-height: 1.6; margin: 0 0 0.85rem; }
.rh-content .rh-fit--sec > .rh-fit__col > h2::before { display: none; }
.rh-content .rh-fit--sec > .rh-fit__col > .rh-list:last-child { margin-bottom: 0; }
@media only screen and (max-width: 849px) {
    .rh-content .rh-fit--sec > .rh-fit__col { scroll-margin-top: 132px; }
}
@media only screen and (min-width: 783px) {
    .admin-bar .rh-content .rh-fit--sec > .rh-fit__col { scroll-margin-top: 142px; }
}
@media only screen and (min-width: 48.01em) {
    .rh-content .rh-fit--sec { margin: 1.4rem 0; }
    .rh-content .rh-fit--sec > .rh-fit__col { padding: 1.6rem 1.8rem; box-shadow: 0 18px 40px -30px rgba(19, 25, 33, 0.22); }
}
@media only screen and (min-width: 75em) {
    .rh-content > .rh-fit--sec { margin: 0 0 1.4rem; }
}

/* E. Legacy FAQ fix (pages built with the v3.9 classes) ------------------ */
.rh-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    list-style: none;
    cursor: pointer;
}
.rh-faq-item > summary::after {
    content: "" !important;
    order: -1;              /* chevron on the right, before the question */
    flex: none;
    width: 10px;
    height: 10px;
    border: solid var(--rh-gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) !important;
    margin: 0 0 4px 4px !important;
    font-size: 0 !important;
}
.rh-faq-item[open] > summary::after {
    transform: rotate(-135deg) !important;
    margin: 4px 0 0 4px !important;
}

/* F. Mobile + reduced motion --------------------------------------------- */
@media only screen and (max-width: 48em) {
    .rh-content { font-size: 1rem; line-height: 1.9; }
    .rh-content h2 { font-size: 1.35rem; }
    .rh-content h3 { font-size: 1.12rem; }
    .rh-content .rh-hook p { font-size: 1.1em; }
    .rh-content p.rh-lead { font-size: 1.05em; }
    .rh-content .rh-sec { margin: 2.6rem 0; }
    .rh-content .rh-sec--card,
    .rh-content .rh-sec--purchase,
    .rh-content .rh-sec--note,
    .rh-content .rh-sec--tint,
    .rh-content .rh-sec--ink { padding: 1.4rem 1.15rem; }
    .rh-content .rh-glance { padding: 1.2rem 1.15rem 1rem; }
    .rh-content .rh-glance ul,
    .rh-content .rh-fit,
    .rh-content .rh-meters__grid { grid-template-columns: 1fr; }
    /* phones: chips wrap onto a second line instead of scrolling, so every link is visible */
    .rh-content .rh-jump { gap: 0.45rem; }
    .rh-content .rh-jump a { font-size: 0.85rem; padding: 0.36rem 0.8rem; }
    .rh-content .rh-dyk, .rh-content .rh-hero, .rh-content .rh-note, .rh-content .rh-meters { padding: 1.15rem 1.1rem; }
    .rh-content .rh-fit__col { padding: 1.1rem 1.1rem; }
    .rh-content h2.rh-title { font-size: 1.4rem; }
    .rh-content .rh-hook { padding: 1.2rem 1.15rem; text-align: right; }
    .rh-content .rh-jump { padding: 0.65rem 0.75rem; }
    .rh-content details.rh-dyk > summary { padding-inline-end: 1rem; padding-inline-start: calc(1rem + 28px + 0.65rem); }
    .rh-content details.rh-dyk > summary::before { inset-inline-start: 1rem; }
    .rh-content .rh-dyk__a { padding: 0 1rem 1rem; }
    .rh-content .rh-qa { padding: 0 0.9rem; }
    .rh-content .rh-table th, .rh-content .rh-table td { padding: 0.65rem 0.75rem; }
}
@media only screen and (max-width: 36em) {
    .rh-content .rh-figrow { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rh-content *,
    .rh-content *::before,
    .rh-content *::after { transition: none !important; }
}