/*
 * brand-pages.css — Session 17
 * About, Contact, Gifting, Blog, Support, Silver Care, Size Guide, FAQ.
 * All colours via --silure-* tokens. border-radius: 0 throughout.
 *
 * "was -0.03em" / "was Italiana, see file header" markers (Session 30
 * close-out, letter-spacing + Italiana removal sweeps): these pages
 * have since been rebuilt as Elementor pages, so none of this file's
 * own .silure-page-hero__*/.silure-*__heading/.silure-post-*/
 * .silure-manifesto__*/.silure-grievance__*/.silure-size-guide__*/
 * .silure-care-guide__*/.silure-gifting-card__*/.silure-blog-card__*
 * classes are actually present in current markup on any of the pages
 * this file covers -- fully orphaned selectors, not live bugs, live-
 * confirmed by name against every relevant page fetched this round
 * (About, Contact, Gifting, Silver Care, Size Guide, and a real blog
 * post). Corrected the stale -0.03em / Italiana values on them anyway
 * (the site's real standard is Mulish 700, -0.01em, and CLAUDE.md
 * permanently bans Italiana) rather than leave dead code sitting at
 * the wrong, banned values, in case any of these classes are ever
 * reused -- most notably .silure-post-hero__title/.silure-post-content,
 * a fully-built, ready-to-use single-post hero design that nothing
 * currently outputs the matching markup for.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — Elementor Button widgets (Session 30 sitewide 13px
   standardization)
   .elementor-button has no custom theme CSS anywhere -- its current
   typography comes entirely from each button's own Elementor-editor
   widget settings (per-element generated CSS), which is why the two
   buttons on this page were computing DIFFERENT sizes/weights from each
   other (10px/700/2px and 11px/700/2.2px) despite looking like a single
   component from the outside. Scoped to body.page-id-69 (About's real
   post ID, confirmed live) rather than a sitewide .elementor-button
   rule, since that class is used by Button widgets on other pages too
   and this pass is specifically the two About-page buttons. !important
   needed to reliably beat Elementor's own generated per-widget CSS.
═══════════════════════════════════════════════════════════════════════════ */

body.page-id-69 .elementor-button {
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — Grievance Officer section, text block off-center
   (Session 30)
   Not a text-align problem -- confirmed live every text-align in the chain
   (section, column, widget, and the paragraph's own inline style) already
   computes "center". First attempt at this fix (align-self:center) also
   confirmed NOT the cause and had zero effect, live -- the column
   (.elementor-column) IS flex, but flex-direction:row with a single flex
   item (.elementor-widget-wrap, display:block); the actual 600px-wide
   widget (Elementor's Custom Width setting) sits ANOTHER level down,
   inside that block-level wrap, as a normal block child -- not a flex
   item itself, so align-self on it does nothing. A block element with an
   explicit width only centers via auto margins, which is what actually
   moves it (confirmed live via getBoundingClientRect: widget center now
   matches container center). Scoped to this one widget inside this one
   section (by its own Elementor element ID, cntgrv01) -- not a general
   .elementor-widget-text-editor rule, so no other Custom-Width text
   widget elsewhere is touched. */
.elementor-element-cntgrv01 .elementor-widget-text-editor {
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFTING, SILVER CARE, SIZE GUIDE, FAQ — Elementor Button widgets
   (Session 30 sitewide 13px standardization, second pass -- these were
   missed entirely in the first pass, which only covered About's two
   buttons; confirmed live still 10-11px Mulish weight 700 on all of
   these before this rule). Same reasoning as the About block above:
   targeted by each widget's own data-id (= CSS class
   elementor-element-{id}) rather than a sitewide .elementor-button rule
   or page-id scoping, since Gifting alone has 8 separate button widgets
   and per-page scoping would still catch unrelated ones if any page
   gains more Button widgets later.
═══════════════════════════════════════════════════════════════════════════ */

.elementor-element-gfthbt01 .elementor-button,
.elementor-element-gftc01btn .elementor-button,
.elementor-element-gftc02btn .elementor-button,
.elementor-element-gftc03btn .elementor-button,
.elementor-element-gftc04btn .elementor-button,
.elementor-element-gftc05btn .elementor-button,
.elementor-element-gftc06btn .elementor-button,
.elementor-element-gfthlbt1 .elementor-button,
.elementor-element-scclbt01 .elementor-button,
.elementor-element-sgctbt01 .elementor-button,
.elementor-element-faqctbt1 .elementor-button {
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — PAGE HERO (dark)
═══════════════════════════════════════════════════════════════════════════ */

.silure-page-hero {
    background: var(--silure-bg-dark, #050505);
    color: var(--silure-on-dark, #FBF9F6);
    padding: 96px 32px;
    text-align: center;
}

.silure-page-hero__eyebrow {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 24px;
}

.silure-page-hero__heading {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(56px, 9vw, 110px);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    text-transform: uppercase;
    color: var(--silure-on-dark, #FBF9F6);
    margin: 0 0 32px;
}

.silure-page-hero__subheading {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.3px;
    color: var(--silure-muted, #7A7672);
    max-width: 560px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — MANIFESTO BLOCK (centred, editorial)
═══════════════════════════════════════════════════════════════════════════ */

.silure-manifesto {
    padding: 80px 32px;
    text-align: center;
    background: var(--silure-bg, #FBF9F6);
}

.silure-manifesto--dark {
    background: var(--silure-bg-dark, #050505);
    color: var(--silure-on-dark, #FBF9F6);
}

.silure-manifesto__text {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: inherit;
    max-width: 860px;
    margin: 0 auto;
}

.silure-manifesto__text em {
    font-style: normal;
    color: var(--silure-muted, #7A7672);
}

.silure-manifesto__attribution {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 32px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — EDITORIAL IMAGE (full-width)
═══════════════════════════════════════════════════════════════════════════ */

.silure-editorial-image {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.silure-editorial-image img,
.silure-editorial-image .elementor-image img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    display: block;
}

.silure-editorial-image--tall img,
.silure-editorial-image--tall .elementor-image img {
    height: 90vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — ALTERNATING SPLIT SECTIONS
═══════════════════════════════════════════════════════════════════════════ */

.silure-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    overflow: hidden;
}

.silure-split--reverse { direction: rtl; }
.silure-split--reverse > * { direction: ltr; }

.silure-split__image { overflow: hidden; }

.silure-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.silure-split__content {
    background: var(--silure-surface, #F3F0EB);
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.silure-split__content--dark {
    background: var(--silure-bg-dark, #050505);
    color: var(--silure-on-dark, #FBF9F6);
}

.silure-split__eyebrow {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 20px;
}

.silure-split__heading {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 24px;
}

.silure-split__body {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.3px;
    color: var(--silure-text, #444444);
    max-width: 480px;
}

.silure-split__content--dark .silure-split__body { color: var(--silure-muted, #7A7672); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — SECTION WRAPPER
═══════════════════════════════════════════════════════════════════════════ */

.silure-section {
    padding: 80px 32px;
    background: var(--silure-bg, #FBF9F6);
}

.silure-section--dark {
    background: var(--silure-bg-dark, #050505);
    color: var(--silure-on-dark, #FBF9F6);
}

.silure-section--surface { background: var(--silure-surface, #F3F0EB); }
.silure-section--wide    { padding: 96px 32px; }
.silure-section--slim    { padding: 48px 32px; }

.silure-container       { max-width: 1200px; margin: 0 auto; }
.silure-container--narrow { max-width: 760px; margin: 0 auto; }

.silure-section__label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 20px;
}

.silure-section__heading {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 32px;
}

.silure-section__heading--centre { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════════════════════════════════════ */

.silure-contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.silure-contact-info {
    padding: 80px 64px 80px 0;
    border-right: 1px solid var(--silure-border, #E8E4DF);
}

.silure-contact-info__heading {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0 0 32px;
}

.silure-contact-info__list {
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
}

.silure-contact-info__list li {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    padding: 16px 0;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

.silure-contact-info__list li:first-child { border-top: 1px solid var(--silure-border, #E8E4DF); }

.silure-contact-info__list a {
    color: var(--silure-primary, #050505);
    text-decoration: none;
}

.silure-contact-info__list a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.silure-contact-form-wrap { padding: 80px 0 80px 64px; }

.silure-contact-form { display: flex; flex-direction: column; gap: 24px; }

.silure-form-group { display: flex; flex-direction: column; gap: 8px; }

.silure-form-group label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
}

/* #silure-contact-form prefix: on an exact-specificity tie against Hello
   Elementor's reset.css (input[type=text] etc. / [type=submit] — both
   (0,0,1,1)/(0,0,1,0), same as the bare classes here), reset.css was
   winning purely because it happens to load after brand-pages.css. The ID
   makes these decisively win regardless of load order. */
#silure-contact-form .silure-form-group input,
#silure-contact-form .silure-form-group textarea {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--silure-primary, #050505);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--silure-border-mid, #C8C4BF);
    border-radius: 0;
    padding: 12px 0;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
}

#silure-contact-form .silure-form-group input:focus,
#silure-contact-form .silure-form-group textarea:focus { border-bottom-color: var(--silure-primary, #050505); }

#silure-contact-form .silure-form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

#silure-contact-form .silure-form-group input::placeholder,
#silure-contact-form .silure-form-group textarea::placeholder {
    color: var(--silure-muted, #7A7672);
    font-weight: 300;
}

#silure-contact-form .silure-form-submit {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 40px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}

/* color/background/border/radius (base + hover) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

#silure-contact-form .silure-form-submit:disabled {
    opacity: 0.5;
    cursor: wait;
}

.silure-form-status {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    padding: 14px 0;
    display: none;
}

.silure-form-status.success { color: #2E7D32; display: block; }
.silure-form-status.error   { color: #C62828; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRIEVANCE OFFICER
═══════════════════════════════════════════════════════════════════════════ */

.silure-grievance {
    border: 1px solid var(--silure-border, #E8E4DF);
    padding: 40px 48px;
    margin-top: 48px;
}

.silure-grievance__label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 16px;
}

.silure-grievance__name {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--silure-primary, #050505);
    margin: 0 0 12px;
}

.silure-grievance__detail {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    margin: 0 0 4px;
}

.silure-grievance__detail a {
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.silure-grievance__note {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--silure-border, #E8E4DF);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIZE GUIDE
═══════════════════════════════════════════════════════════════════════════ */

.silure-size-guide { max-width: 880px; margin: 0 auto; }

.silure-size-guide__tabs {
    display: flex;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    margin-bottom: 48px;
}

/* !important on the font properties -- real <button> element, same
   reset.css [type="button"]/button tie as .silure-sticky-bar__btn. */
.silure-size-guide__tab {
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 32px 16px 0;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

/* Selected-tab indicator — FLAG: this is now visually neutralized. The
   sitewide standard gives every tab a solid #050505 fill with
   !important, and this rule's color/border-bottom-color were never
   !important, so they always lose regardless of the .active class extra
   specificity. Practical effect: all Size Guide tabs (selected or not)
   now render identically at rest — there is no visible way to tell
   which tab is active anymore. Left in place rather than deleted, in
   case this needs to be revisited. */
.silure-size-guide__tab.active {
    color: var(--silure-primary, #050505);
    border-bottom-color: var(--silure-primary, #050505);
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late() —
   solid #050505/white like every other button, no exception for this
   being a tab control rather than a CTA. */

.silure-size-guide__panel { display: none; }
.silure-size-guide__panel.active { display: block; }

.silure-size-guide__input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
    align-items: end;
}

.silure-size-guide__input-group { display: flex; flex-direction: column; gap: 8px; }

.silure-size-guide__input-group label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
}

.silure-size-guide__input-group input {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--silure-primary, #050505);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--silure-border-mid, #C8C4BF);
    padding: 12px 0;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.silure-size-guide__input-group input:focus { border-bottom-color: var(--silure-primary, #050505); }

.silure-size-guide__result {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--silure-primary, #050505);
    margin: 0 0 4px;
    min-height: 44px;
}

.silure-size-guide__result-label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
}

.silure-size-guide__table-heading {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 16px;
}

.silure-size-guide table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Mulish', sans-serif;
}

.silure-size-guide table th {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

.silure-size-guide table td {
    font-size: 14px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    padding: 14px 16px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    transition: background 0.15s;
}

.silure-size-guide table tr.silure-size-guide__highlight td {
    background: var(--silure-surface, #F3F0EB);
    font-weight: 400;
    color: var(--silure-primary, #050505);
}

.silure-size-guide table tr:last-child td { border-bottom: none; }

.silure-size-guide__note {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-muted, #7A7672);
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--silure-border, #E8E4DF);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SILVER CARE GUIDE
═══════════════════════════════════════════════════════════════════════════ */

.silure-care-guide { max-width: 880px; margin: 0 auto; }

.silure-care-guide__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--silure-border, #E8E4DF);
    border: 1px solid var(--silure-border, #E8E4DF);
    margin-bottom: 64px;
}

.silure-care-guide__card {
    background: var(--silure-bg, #FBF9F6);
    padding: 40px 32px;
}

.silure-care-guide__icon {
    font-size: 20px;
    margin-bottom: 20px;
    display: block;
    line-height: 1;
    color: var(--silure-muted, #7A7672);
}

.silure-care-guide__card-title {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--silure-primary, #050505);
    margin: 0 0 12px;
}

.silure-care-guide__card-body {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    margin: 0;
}

.silure-care-guide__steps {
    counter-reset: care-steps;
    list-style: none;
    padding: 0;
    margin: 0;
}

.silure-care-guide__steps li {
    counter-increment: care-steps;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

.silure-care-guide__steps li::before {
    content: counter(care-steps, decimal-leading-zero);
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 20px;
    color: var(--silure-muted, #7A7672);
    min-width: 32px;
    padding-top: 2px;
    flex-shrink: 0;
}

.silure-care-guide__steps li p {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    margin: 0;
}

.silure-care-guide__steps li strong {
    font-weight: 400;
    color: var(--silure-primary, #050505);
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════════════════════════════════════ */

.silure-faq { max-width: 760px; margin: 0 auto; }

.silure-faq__item { border-bottom: 1px solid var(--silure-border, #E8E4DF); }
.silure-faq__item:first-child { border-top: 1px solid var(--silure-border, #E8E4DF); }

.silure-faq__question {
    width: 100%;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    text-align: left;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late() —
   including its own explicit .silure-faq__question-text child-span
   override, since the visible text lives there, not on this button
   itself, and a direct match on the child always beats inheritance from
   the parent regardless of !important. */

.silure-faq__question-text {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.silure-faq__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    border: 1px solid var(--silure-border-mid, #C8C4BF);
    border-radius: 50%;
}

.silure-faq__icon::before,
.silure-faq__icon::after {
    content: '';
    position: absolute;
    background: var(--silure-primary, #050505);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.silure-faq__icon::before {
    width: 8px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.silure-faq__icon::after {
    width: 1px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.silure-faq__item.open .silure-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.silure-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.silure-faq__item.open .silure-faq__answer { max-height: 400px; }

.silure-faq__answer p {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    margin: 0;
    padding: 0 0 24px;
}

.silure-faq__answer p a {
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFTING GRID
═══════════════════════════════════════════════════════════════════════════ */

.silure-gifting-intro {
    text-align: center;
    padding: 80px 32px 48px;
    background: var(--silure-bg, #FBF9F6);
}

.silure-gifting-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--silure-border, #E8E4DF);
}

.silure-gifting-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--silure-surface, #F3F0EB);
    text-decoration: none;
    display: block;
}

.silure-gifting-card:hover .silure-gifting-card__image img { transform: scale(1.04); }

.silure-gifting-card__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.silure-gifting-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.silure-gifting-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.08) 55%, transparent 100%);
}

.silure-gifting-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 28px;
}

.silure-gifting-card__occasion {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 28px;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--silure-on-dark, #FBF9F6);
    text-transform: uppercase;
    margin: 0 0 8px;
    display: block;
}

.silure-gifting-card__cta {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(251,249,246,0.65);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.silure-gifting-card:hover .silure-gifting-card__cta { color: var(--silure-on-dark, #FBF9F6); }

.silure-gifting-card__cta::after {
    content: '→';
    transition: transform 0.2s;
}

.silure-gifting-card:hover .silure-gifting-card__cta::after { transform: translateX(4px); }

.silure-gifting-cta-bar {
    text-align: center;
    padding: 64px 32px;
    background: var(--silure-bg-dark, #050505);
}

.silure-gifting-cta-bar p {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 32px;
    letter-spacing: 0.3px;
}

.silure-gifting-cta-bar .silure-btn {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--silure-on-dark, #FBF9F6);
    color: var(--silure-on-dark, #FBF9F6);
    padding: 16px 40px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}

.silure-gifting-cta-bar .silure-btn:hover {
    background: var(--silure-on-dark, #FBF9F6);
    color: var(--silure-bg-dark, #050505);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE
═══════════════════════════════════════════════════════════════════════════ */

.silure-blog-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 80px;
}

.silure-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px 48px;
}

.silure-blog-card { text-decoration: none; display: block; }

.silure-blog-card__image {
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 24px;
    background: var(--silure-surface, #F3F0EB);
}

.silure-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.silure-blog-card:hover .silure-blog-card__image img { transform: scale(1.03); }

.silure-blog-card__meta {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin-bottom: 12px;
}

.silure-blog-card__title {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--silure-primary, #050505);
    margin: 0 0 16px;
    transition: opacity 0.2s;
}

.silure-blog-card:hover .silure-blog-card__title { opacity: 0.6; }

.silure-blog-card__excerpt {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    margin: 0 0 20px;
}

.silure-blog-card__read-more {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.silure-blog-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 64px 0 0;
    border-top: 1px solid var(--silure-border, #E8E4DF);
    margin-top: 80px;
}

.silure-blog-pagination a,
.silure-blog-pagination span {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    padding: 8px 14px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.silure-blog-pagination a:hover { border-color: var(--silure-border-mid, #C8C4BF); }

.silure-blog-pagination .current {
    font-weight: 400;
    color: var(--silure-primary, #050505);
    border-color: var(--silure-primary, #050505);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG SINGLE POST — restored title (Session 30 close-out, missing-H1 fix)
   Hello Elementor's own template-parts/single.php outputs a plain
   <div class="page-header"><h1 class="entry-title">...</h1></div> --
   real, live markup once silure_restore_blog_post_title() (silure-
   core.php) un-suppresses it, but it never had any SILURE styling of
   its own (the section below, .silure-post-hero and friends, is a
   different, unrelated, fully dead/orphaned design -- confirmed no
   current template outputs that markup at all). Scoped to
   body.single-post (WordPress's own class specifically for the "post"
   post type, not the generic "single" class every singular view
   including product pages also carries) so this never reaches the
   Journal archive's own <h2 class="entry-title"> archive-card links,
   which already have their own separate, correct styling, nor any
   other singular template.
   Mulish 700 uppercase, matching the sitewide heading standard --
   letter-spacing already forced to -0.01em everywhere by the h1, h2,
   .elementor-heading-title rule in silure_kill_pink_late(); repeated
   here explicitly (with !important, same defensive pattern used
   throughout this page category all session) rather than relying on
   that rule alone, since generic h1 elements on this exact page have
   already been found silently losing plain declarations more than
   once this project. */
body.single-post .page-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 32px 0;
    text-align: center;
}

body.single-post .entry-title {
    font-family: 'Mulish', sans-serif !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    color: var(--silure-primary, #050505) !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG SINGLE POST — dead/orphaned hero design (pre-dates the current
   template; no live template outputs .silure-post-hero markup at all)
═══════════════════════════════════════════════════════════════════════════ */

.silure-post-hero {
    background: var(--silure-bg-dark, #050505);
    padding: 80px 32px;
    text-align: center;
}

.silure-post-hero__category {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin-bottom: 24px;
}

.silure-post-hero__title {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    text-transform: uppercase;
    color: var(--silure-on-dark, #FBF9F6);
    margin: 0 auto 32px;
    max-width: 900px;
}

.silure-post-hero__meta {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: var(--silure-muted, #7A7672);
}

.silure-post-featured-image { width: 100%; overflow: hidden; line-height: 0; }

.silure-post-featured-image img {
    width: 100%;
    height: 65vh;
    object-fit: cover;
    display: block;
}

.silure-post-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px 80px;
}

.silure-post-content p {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--silure-text, #444444);
    margin: 0 0 28px;
}

.silure-post-content h2 {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--silure-primary, #050505);
    margin: 56px 0 20px;
    line-height: 1.05;
}

.silure-post-content h3 {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-primary, #050505);
    margin: 40px 0 16px;
}

.silure-post-content blockquote {
    margin: 48px 0;
    padding: 0 0 0 32px;
    border-left: 2px solid var(--silure-border-mid, #C8C4BF);
}

.silure-post-content blockquote p {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.3px;
    color: var(--silure-primary, #050505);
    margin: 0;
}

.silure-post-content ul,
.silure-post-content ol {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    padding-left: 24px;
    margin: 0 0 28px;
}

.silure-post-content li { margin-bottom: 8px; }

.silure-post-content a {
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.silure-post-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 48px 0;
}

.silure-post-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 32px 80px;
    border-top: 1px solid var(--silure-border, #E8E4DF);
}

.silure-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.silure-post-tags a {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    border: 1px solid var(--silure-border-mid, #C8C4BF);
    padding: 6px 14px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.silure-post-tags a:hover {
    border-color: var(--silure-primary, #050505);
    color: var(--silure-primary, #050505);
}

.silure-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.silure-post-nav__link { text-decoration: none; }
.silure-post-nav__link--next { text-align: right; }

.silure-post-nav__dir {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--silure-muted, #7A7672);
    margin-bottom: 8px;
    display: block;
}

.silure-post-nav__title {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--silure-primary, #050505);
    line-height: 1.1;
    transition: opacity 0.2s;
}

.silure-post-nav__link:hover .silure-post-nav__title { opacity: 0.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .silure-gifting-grid { grid-template-columns: repeat(2, 1fr); }
    .silure-split { grid-template-columns: 1fr; }
    .silure-split--reverse { direction: ltr; }
    .silure-split__image { aspect-ratio: 16/9; }
    .silure-split__content { padding: 48px 32px; }
    .silure-split__body { max-width: 100%; }
}

@media (max-width: 768px) {
    .silure-contact-wrap { grid-template-columns: 1fr; }
    .silure-contact-info {
        padding: 64px 0 48px;
        border-right: none;
        border-bottom: 1px solid var(--silure-border, #E8E4DF);
    }
    .silure-contact-form-wrap { padding: 48px 0 64px; }
    .silure-blog-grid { grid-template-columns: 1fr; }
    .silure-care-guide__grid { grid-template-columns: 1fr; }
    .silure-size-guide__input-row { grid-template-columns: 1fr; }
    .silure-gifting-grid { grid-template-columns: 1fr 1fr; }
    .silure-section { padding: 64px 24px; }
    .silure-section--wide { padding: 80px 24px; }
    .silure-post-nav { grid-template-columns: 1fr; }
    .silure-post-nav__link--next { text-align: left; }
    .silure-grievance { padding: 32px 24px; }
    .silure-blog-wrap { padding: 0 24px 64px; }
}

@media (max-width: 480px) {
    .silure-gifting-grid { grid-template-columns: 1fr; }
    .silure-page-hero { padding: 64px 24px; }
    .silure-manifesto { padding: 64px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — CUSTOM FORM (Session 30)
   Note: an older, unrelated "CONTACT FORM" block exists earlier in this
   file (.silure-contact-wrap/.silure-contact-info/.silure-contact-form) —
   that's dead CSS from a superseded two-column design (references the
   Italiana font, removed sitewide in Session 22) and isn't used by the
   current page. Deliberately different class names below to avoid any
   collision with it.
═══════════════════════════════════════════════════════════════════════════ */

.silure-cf-wrap {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.silure-form-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

/* #silure-contact-form prefix + !important throughout: unscoped, this was
   losing its border-radius to Hello Elementor's reset.css on a load-order
   tie (same mechanism as the submit button earlier), and — more
   seriously — losing its hover color AND .is-active's selected-tab
   underline outright to kill_pink_late's unconditional
   border-color:transparent!important, since neither state here used
   !important of its own. The ID makes this decisively win regardless.
   font-size/padding/letter-spacing/weight now reference the shared
   --silure-tab-* tokens (style.css :root) instead of this component's own
   previously-drifted 10px/24px-padding/2px-tracking/normal-weight values —
   My Account's tab nav is the confirmed sitewide standard those tokens
   come from; this makes both components read from the one source instead
   of two sets of literals that can drift apart again. */
/* Same root-cause fix as My Account's tab nav (myaccount.css): the
   active-tab underline used to be border-bottom on this <button> itself,
   spanning its full padded box (text + 20px each side) rather than the
   label text. Less obvious here since "Individual"/"Business" are close
   in length, but the same bug. Fixed the same way: --silure-tab-padding's
   two halves are split across the <button> (horizontal only, for
   click-target width) and the inner .silure-form-tab__label span
   (vertical padding + the underline itself), which naturally hugs its
   own text width. The button carries no vertical padding of its own now,
   so the label's border still lands at the same vertical position as
   before -- only the width changed. */
#silure-contact-form .silure-form-tab {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'DM Mono', monospace;
    font-size: var(--silure-tab-font-size, 11px);
    font-weight: var(--silure-tab-weight-base, 400);
    letter-spacing: var(--silure-tab-letter-spacing, 1.5px);
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672) !important;
    padding: 0 20px;
    cursor: pointer;
    transition: color 0.2s ease;
}

#silure-contact-form .silure-form-tab .silure-form-tab__label {
    display: inline-block;
    padding: 12px 0;
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s ease;
}

#silure-contact-form .silure-form-tab:hover {
    color: var(--silure-primary, #050505) !important;
}

#silure-contact-form .silure-form-tab.is-active {
    color: var(--silure-primary, #050505) !important;
    font-weight: var(--silure-tab-weight-active, 600) !important;
}

#silure-contact-form .silure-form-tab.is-active .silure-form-tab__label {
    border-bottom-color: var(--silure-primary, #050505) !important;
}

.silure-form-row { margin-bottom: 16px; }

.silure-form-row label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    display: block;
    margin-bottom: 6px;
}

/* #silure-contact-form prefix: this block was mistakenly treated as dead
   code from a superseded redesign earlier this session (the live Contact
   form actually lives in an Elementor HTML widget, not the PHP shortcode
   that was fixed instead) — it is real and live, and was unscoped,
   exposed to the same reset.css load-order tie as everything else fixed
   today (border-radius:0 losing to reset.css's border-radius:3px).

   Sitewide form redesign (Session 30): underline replacing the box —
   border-bottom only, #050505 (editable; this form has no locked-field
   case). */
#silure-contact-form .silure-form-row input,
#silure-contact-form .silure-form-row textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #050505;
    border-radius: 0;
    padding: 10px 0;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#silure-contact-form .silure-form-row input:focus,
#silure-contact-form .silure-form-row textarea:focus { border-color: #050505; outline: none; }

#silure-contact-form .silure-form-row textarea { resize: vertical; min-height: 100px; }

/* 2-column pairing (Session 30 form redesign) — existing top-to-bottom
   sequence preserved: Company+Name paired (row 1), Email+Phone paired
   (row 2), Message stays full-width (textarea — awkward to pair, per
   spec's own carve-out). Company is hidden in Individual mode (existing
   JS toggle) — .is-solo (added by the same toggle) lets Name take the
   full row when Company isn't there to pair with, rather than sitting
   oddly half-width alone. */
#silure-contact-form .silure-form-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
#silure-contact-form .silure-form-pair.is-solo {
    grid-template-columns: 1fr;
}
#silure-contact-form .silure-form-pair .silure-form-row {
    margin-bottom: 0;
}

/* Duplicate of the .silure-form-submit rule above (bare selector, both
   compete for the same real button — this file has two definitions of
   this class from two form redesigns). color/background/border/radius
   (base + hover/focus) now come from the single sitewide button hover
   standard in silure_kill_pink_late(), so both duplicates agree. */
#silure-contact-form .silure-form-submit {
    width: 100%;
    padding: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.silure-form-status {
    font-size: 12px;
    text-align: center;
    padding: 8px 0;
    min-height: 1em;
}

.silure-form-status.error   { color: #C0392B; }
.silure-form-status.success { color: #3B6D11; }