/* ===========================================================
   AURELIELLE — Shared page-section styles
   Used by every page template (home, shop, contact, about,
   shipping, refund, privacy). Matches the product-page brand
   language: cream backgrounds, gold accent, DM Sans, gentle
   float-up entrance animations on scroll.
   =========================================================== */

body {
    font-family: var(--global-body-font-family, 'DM Sans', sans-serif);
    color: #1a1a1a;
    background: #faf8f4;
}

.aur-page {
    background: #faf8f4;
}

/* ────────────────────── ENTRANCE ANIMATIONS ────────────────────── */
.aur-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.aur-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.aur-fade-up[data-delay="1"] { transition-delay: 0.1s; }
.aur-fade-up[data-delay="2"] { transition-delay: 0.2s; }
.aur-fade-up[data-delay="3"] { transition-delay: 0.3s; }
.aur-fade-up[data-delay="4"] { transition-delay: 0.4s; }
.aur-fade-up[data-delay="5"] { transition-delay: 0.5s; }

/* ────────────────────── SECTION HERO ────────────────────── */
.aur-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 100%),
        radial-gradient(ellipse at 30% 30%, rgba(201, 169, 110, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(201, 169, 110, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
    color: #fff;
    padding: 110px 24px 80px;
    text-align: center;
}
.aur-hero--video {
    background: #0e0e0e;
}
.aur-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Let the footage read clearly. The previous opacity 0.35 + brightness
       0.55 multiplied out to roughly 19% luminance, and the overlay below then
       took another chunk on top of that - the product video was effectively
       invisible. Readability is now handled by the overlay's bottom-weighted
       gradient rather than by flattening the video itself. */
    opacity: 0.92;
    filter: brightness(0.95) saturate(1.05);
}
.aur-hero__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Scrim for white-text readability, weighted towards the TOP, because that
       is where the eyebrow and headline sit and where this clip is brightest.
       A bottom-weighted version measured 2.64 contrast on the headline (needs
       3.0) and 1.29 on the gold eyebrow (needs 4.5) - the bright sky in the
       footage was washing the text out. The middle band stays light so the
       subject of the video still reads. */
    background:
        linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.48) 100%),
        radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.26) 100%);
    pointer-events: none;
}
.aur-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}
.aur-hero__eyebrow {
    color: #c9a96e;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 20px;
}
.aur-hero__title {
    font-family: var(--global-heading-font-family, inherit);
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px;
    color: #fff;
    letter-spacing: -0.02em;
}
.aur-hero__sub {
    color: #d8d4cf;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 600px;
}
.aur-hero__cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ────────────────────── BUTTONS ────────────────────── */
.aur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.aur-btn--primary {
    background: #c9a96e;
    color: #fff;
    box-shadow: 0 4px 14px rgba(201, 169, 110, 0.35);
}
.aur-btn--primary:hover {
    background: #d8b582;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 169, 110, 0.5);
}
.aur-btn--ghost {
    background: transparent;
    color: inherit;
    border-color: rgba(127, 127, 127, 0.4);
}
.aur-btn--ghost:hover {
    background: rgba(127, 127, 127, 0.1);
    border-color: currentColor;
}
.aur-btn--lg { padding: 18px 40px; font-size: 16px; }
.aur-btn--block { display: flex; width: 100%; }

/* ────────────────────── SECTION EYEBROW + TITLE ────────────────────── */
.aur-section { padding: 56px 24px; }
.aur-section--lg { padding: 80px 24px; }
.aur-section--cream { background: #faf8f4; }
.aur-section--white { background: #ffffff; }
.aur-section--dark  { background: #1a1a1a; color: #fff; }
.aur-section__inner { max-width: 1290px; margin: 0 auto; }

.aur-section-eyebrow {
    color: #c9a96e;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 14px;
    text-align: center;
}
.aur-section-eyebrow--left { text-align: left; }

.aur-section-title {
    font-family: var(--global-heading-font-family, inherit);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 16px;
    color: inherit;
    text-align: center;
    letter-spacing: -0.01em;
}
.aur-section-title--left { text-align: left; }

.aur-section-sub {
    color: #6b6b6b;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 720px;
    text-align: center;
}

/* ────────────────────── GENERIC PROSE (legal/about pages) ────────────────────── */
.aur-prose {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.85;
    color: #2a2a2a;
}
.aur-prose h2 {
    font-family: var(--global-heading-font-family, inherit);
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 40px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c9a96e;
    display: inline-block;
}
.aur-prose h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 28px 0 10px;
}
.aur-prose p { margin: 0 0 18px; }
.aur-prose ul, .aur-prose ol {
    padding-left: 22px;
    margin: 0 0 20px;
}
.aur-prose li { margin-bottom: 8px; line-height: 1.7; }
.aur-prose a { color: #c9a96e; text-decoration: underline; }
.aur-prose a:hover { color: #1a1a1a; }
.aur-prose strong { color: #1a1a1a; font-weight: 600; }
.aur-prose blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    background: #faf8f4;
    border-left: 3px solid #c9a96e;
    color: #555;
    font-style: italic;
}

/* ────────────────────── FORM ────────────────────── */
.aur-form { max-width: 640px; margin: 0 auto; }
.aur-field { margin-bottom: 18px; }
.aur-field__label {
    display: block;
    margin-bottom: 6px;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
}
.aur-field__label .required { color: #c9a96e; margin-left: 2px; }
.aur-field__input,
.aur-field__textarea,
.aur-field__select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8d4cf;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #1a1a1a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aur-field__textarea { min-height: 140px; resize: vertical; }
.aur-field__input:focus,
.aur-field__textarea:focus,
.aur-field__select:focus {
    outline: none;
    border-color: #c9a96e;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18);
}
.aur-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .aur-field__row { grid-template-columns: 1fr; } }

.aur-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: #c9a96e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(201, 169, 110, 0.35);
}
.aur-submit:hover {
    background: #d8b582;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 169, 110, 0.5);
}
.aur-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.aur-form__status {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}
.aur-form__status.is-visible { display: block; }
.aur-form__status--success { background: rgba(40, 167, 69, 0.12); color: #1b6e2f; border: 1px solid rgba(40, 167, 69, 0.3); }
.aur-form__status--error   { background: rgba(220, 53, 69, 0.12); color: #9b2530; border: 1px solid rgba(220, 53, 69, 0.3); }

/* ────────────────────── CONTACT METHOD CARDS ────────────────────── */
.aur-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) { .aur-contact-grid { grid-template-columns: 1fr; } }
.aur-contact-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.aur-contact-card:hover {
    border-color: #c9a96e;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(201, 169, 110, 0.16);
}
.aur-contact-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #c9a96e, #a67c52);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.aur-contact-card__title {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 16px;
    margin-bottom: 6px;
}
.aur-contact-card__line {
    color: #555;
    font-size: 14px;
    margin: 4px 0;
    word-break: break-word;
}
.aur-contact-card__line a { color: #c9a96e; text-decoration: none; }
.aur-contact-card__line a:hover { color: #1a1a1a; text-decoration: underline; }

/* ────────────────────── TESTIMONIAL / SOCIAL-PROOF CARDS ────────────────────── */
.aur-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .aur-testimonials { grid-template-columns: 1fr; } }

.aur-testimonial {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 32px 28px;
    position: relative;
    /* Flex column so the author row can be pinned to the bottom. The grid
       already stretches all three cards to equal height, but the author
       block used to sit straight after the quote - so the shortest review
       left its avatar floating mid-card while the other two lined up near
       the bottom. See margin-top:auto on .aur-testimonial__person below. */
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.aur-testimonial:hover {
    border-color: #c9a96e;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(201, 169, 110, 0.16);
}
.aur-testimonial__stars {
    color: #c9a96e;
    font-size: 18px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}
.aur-testimonial__quote {
    color: #2a2a2a;
    line-height: 1.7;
    font-size: 15px;
    margin: 0 0 20px;
    font-style: italic;
    position: relative;
}
.aur-testimonial__quote::before {
    content: '"';
    position: absolute;
    top: -16px;
    left: -8px;
    font-size: 56px;
    color: rgba(201, 169, 110, 0.25);
    line-height: 1;
    font-family: Georgia, serif;
}
.aur-testimonial__person {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Absorb the slack left by a shorter quote so every card's author row
       sits on the same baseline. */
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #ececec;
}
.aur-testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #faf8f4, #ece6db);
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-image: linear-gradient(135deg, #f5e6d3 0%, #c9a96e 100%);
}
.aur-testimonial__photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 25%;
    image-rendering: -webkit-optimize-contrast;
    animation: aur-avatar-in 0.4s ease-out both;
}
@keyframes aur-avatar-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.aur-testimonial__name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aur-testimonial__name .verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.aur-testimonial__name .verified-badge::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}
.aur-testimonial__role {
    color: #888;
    font-size: 12px;
}

/* ────────────────────── TIMELINE (Shipping page) ────────────────────── */
.aur-timeline {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    padding-left: 28px;
}
.aur-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, #c9a96e, #c9a96e20);
}
.aur-timeline__item {
    position: relative;
    padding: 0 0 32px;
}
.aur-timeline__item:last-child { padding-bottom: 0; }
.aur-timeline__dot {
    position: absolute;
    left: -28px;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #faf8f4;
    border: 3px solid #c9a96e;
}
.aur-timeline__step {
    font-weight: 700;
    color: #c9a96e;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.aur-timeline__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}
.aur-timeline__desc {
    color: #555;
    margin: 0;
    line-height: 1.65;
    font-size: 15px;
}

/* ────────────────────── FAQ (legal pages + shared) ────────────────────── */
.aur-faq {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aur-faq__item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.aur-faq__item[open] {
    border-color: #c9a96e;
    box-shadow: 0 8px 24px rgba(201, 169, 110, 0.10);
}
.aur-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 16px;
    padding: 18px 22px;
    list-style: none;
    position: relative;
    padding-right: 56px;
    transition: background 0.2s ease;
}
.aur-faq__item summary:hover { background: #faf8f4; }
.aur-faq__item summary::-webkit-details-marker { display: none; }
.aur-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #c9a96e;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}
.aur-faq__item[open] summary::after { content: '−'; }
.aur-faq__item__body {
    padding: 0 22px 22px;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}
.aur-faq__item__body p { margin: 0 0 12px; }
.aur-faq__item__body p:last-child { margin-bottom: 0; }

/* ────────────────────── VALUE/PILLAR CARDS ────────────────────── */
.aur-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .aur-pillars { grid-template-columns: 1fr; } }
.aur-pillar {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 36px 28px;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.aur-pillar:hover {
    border-color: #c9a96e;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(201, 169, 110, 0.16);
}
.aur-pillar__num {
    color: #c9a96e;
    font-family: var(--global-heading-font-family, inherit);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1;
}
.aur-pillar__title {
    font-family: var(--global-heading-font-family, inherit);
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.aur-pillar__desc {
    color: #555;
    line-height: 1.65;
    font-size: 14px;
    margin: 0;
}

/* ────────────────────── TRUST/LOGOS STRIP ────────────────────── */
.aur-strip {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.aur-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}
.aur-strip__chip svg { color: #c9a96e; }

/* ────────────────────── CTA BANNER (full-width) ────────────────────── */
.aur-cta-banner {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    text-align: center;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}
.aur-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(201, 169, 110, 0.18) 0%, transparent 60%);
    pointer-events: none;
}
.aur-cta-banner__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.aur-cta-banner h2 {
    font-family: var(--global-heading-font-family, inherit);
    font-size: clamp(28px, 4vw, 44px);
    margin: 0 0 14px;
    color: #fff;
}
.aur-cta-banner p { color: #b6b0a7; margin: 0 0 32px; font-size: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SHOP ARCHIVE — brand the "Sale!" flag
   ═══════════════════════════════════════════════════════════════════════════
   Kadence renders .onsale in its own default blue, which is the one element on
   the shop grid that ignores the Aurelielle palette. The product page hides the
   flag entirely (the sale banner says it better there); on the archive it is
   useful, so it stays — just in brand gold, matching the "Most Popular" and
   "Best Value" tier badges on the product page. */
.woocommerce ul.products li.product .onsale,
ul.products li.product span.onsale,
.wp-block-woocommerce-product-collection .onsale,
span.onsale {
    background: linear-gradient(135deg, #C9A96E, #A67C52) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    padding: 7px 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: 0 4px 12px rgba(166, 124, 82, 0.28) !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
}