.oura-page { --oura-ink:#303020; --oura-olive:#57583a; --oura-gold:#b88e53; --oura-muted:#817965; --oura-line:rgba(184,142,83,.20); padding:clamp(34px,5vw,70px) 0 80px; color:var(--oura-ink); background:radial-gradient(circle at 92% 0%,rgba(194,157,98,.10),transparent 26rem); }
.oura-page-hero { max-width:900px; margin:0 auto 36px; text-align:center; }
.oura-page-hero > span,.oura-profile-main > span,.oura-info-panel > span,.oura-products-heading span,.oura-routine-form-panel > span { color:var(--oura-gold); font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.oura-page-hero h1 { margin:10px 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.2rem,5vw,4.4rem); font-weight:500; letter-spacing:-.04em; }
.oura-page-hero p { max-width:760px; margin:0 auto; color:var(--oura-muted); font-size:.88rem; line-height:1.8; }
.oura-search-form { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; max-width:650px; margin:23px auto 0; padding:7px 7px 7px 15px; border:1px solid var(--oura-line); border-radius:999px; background:#fffdf9; box-shadow:0 12px 34px rgba(55,52,30,.06); }
.oura-search-form i { color:var(--oura-gold); }.oura-search-form input { min-width:0; border:0; outline:0; background:transparent; font-size:.75rem; }.oura-search-form button { padding:9px 17px; border:0; border-radius:999px; color:#fff; background:var(--oura-olive); font-size:.68rem; font-weight:800; }
.oura-ingredient-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.oura-ingredient-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:13px; min-height:150px; align-items:start; padding:18px; border:1px solid var(--oura-line); border-radius:20px; color:var(--oura-ink)!important; background:linear-gradient(145deg,#fffefb,#f8f0e6); text-decoration:none!important; box-shadow:0 11px 30px rgba(63,59,35,.045); transition:transform .18s ease,box-shadow .18s ease; }
.oura-ingredient-card:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(63,59,35,.08); }.oura-ingredient-letter,.oura-profile-monogram { display:grid; place-items:center; border:1px solid rgba(184,142,83,.17); border-radius:14px; color:#765f3d; background:rgba(184,142,83,.12); font-family:Georgia,"Times New Roman",serif; font-size:1.3rem; }.oura-ingredient-letter{width:48px;height:48px}.oura-ingredient-card small{color:#9b8056;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em}.oura-ingredient-card h2{margin:3px 0 5px;font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}.oura-ingredient-card p{margin:0;color:var(--oura-muted);font-size:.65rem;line-height:1.55}.oura-ingredient-card>.bi{color:var(--oura-gold)}
.oura-tag-row,.oura-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }.oura-tag-row span,.oura-chip-row span { padding:5px 8px; border-radius:999px; color:#665737; background:rgba(184,142,83,.11); font-size:.55rem; font-weight:750; }
.oura-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:22px; color:#90866d; font-size:.65rem; }.oura-breadcrumb a{color:#6f644d!important;text-decoration:none!important}.oura-breadcrumb i{font-size:.55rem}
.oura-ingredient-profile { display:grid; grid-template-columns:110px minmax(0,1fr) 220px; gap:24px; align-items:center; padding:30px; border:1px solid var(--oura-line); border-radius:28px; background:radial-gradient(circle at 90% 5%,rgba(189,151,90,.18),transparent 17rem),linear-gradient(135deg,#fffdf8,#f4eadc); box-shadow:0 22px 60px rgba(57,54,32,.07); }.oura-profile-monogram{width:110px;height:110px;border-radius:28px;font-size:3rem}.oura-profile-main h1{margin:5px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:500}.oura-profile-main p{max-width:720px;margin:0;color:var(--oura-muted);font-size:.78rem;line-height:1.7}.oura-irritation-meter{padding:18px;border:1px solid rgba(184,142,83,.17);border-radius:18px;background:rgba(255,255,255,.62)}.oura-irritation-meter small,.oura-irritation-meter span{display:block;color:#8d846d;font-size:.56rem}.oura-irritation-meter strong{display:block;margin:4px 0;color:#66704f;font-family:Georgia,"Times New Roman",serif;font-size:1.4rem}.oura-irritation-meter.is-high strong{color:#9b5f4d}.oura-irritation-meter.is-moderate strong{color:#9d7643}
.oura-intelligence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }.oura-info-panel { padding:20px; border:1px solid var(--oura-line); border-radius:20px; background:#fffdf9; }.oura-info-panel h2{margin:5px 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}.oura-info-panel p{color:var(--oura-muted);font-size:.68rem;line-height:1.65}.oura-info-panel ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.oura-info-panel li{display:flex;gap:7px;color:#635e49;font-size:.68rem}.oura-info-panel li i{color:#7b8059}
.oura-products-heading { display:flex; align-items:end; justify-content:space-between; margin:42px 0 17px; }.oura-products-heading h2{margin:5px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:500}.oura-medical-disclaimer{margin:28px 0 0;padding:13px 15px;border-left:3px solid rgba(184,142,83,.6);color:#8c846e;background:rgba(184,142,83,.07);font-size:.61rem;line-height:1.6}.oura-empty{padding:28px;border:1px dashed var(--oura-line);border-radius:18px;color:var(--oura-muted);background:rgba(255,253,249,.6);text-align:center;font-size:.72rem}
.oura-routine-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start}.oura-routine-form-panel{position:sticky;top:100px;padding:21px;border:1px solid var(--oura-line);border-radius:22px;background:#fffdf9;box-shadow:0 14px 38px rgba(57,54,32,.05)}.oura-routine-form-panel h2{margin:5px 0 16px;font-family:Georgia,"Times New Roman",serif;font-size:1.35rem}.oura-routine-form p{display:grid;gap:5px;margin:0 0 11px}.oura-routine-form label{color:#746c57;font-size:.62rem;font-weight:750}.oura-routine-form select,.oura-routine-form input{width:100%;padding:10px 11px;border:1px solid rgba(110,104,72,.18);border-radius:11px;background:#fff;font-size:.68rem}.oura-routine-form .helptext{color:#9b927a;font-size:.53rem}.oura-routine-form button{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;padding:11px;border:0;border-radius:12px;color:#fff;background:var(--oura-olive);font-size:.68rem;font-weight:850}.oura-compatibility-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid rgba(99,124,79,.22);border-radius:22px;background:linear-gradient(135deg,#f4f7ec,#fffdf8)}.oura-compatibility-summary.is-caution,.oura-compatibility-summary.is-separate,.oura-compatibility-summary.is-avoid{border-color:rgba(165,102,75,.22);background:linear-gradient(135deg,#fbf0e9,#fffdf9)}.oura-compatibility-summary small{color:#8b825e;font-size:.56rem;font-weight:850;letter-spacing:.08em}.oura-compatibility-summary h2{margin:4px 0;font-family:Georgia,"Times New Roman",serif;font-size:1.6rem}.oura-compatibility-summary p{margin:0;color:var(--oura-muted);font-size:.64rem}.oura-compatibility-summary>i{font-size:2.2rem;color:#77805b}.oura-compatibility-summary.is-caution>i,.oura-compatibility-summary.is-separate>i,.oura-compatibility-summary.is-avoid>i{color:#a46c52}
.oura-cabinet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.oura-cabinet-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--oura-line);border-radius:17px;background:#fffdf9}.oura-cabinet-card>div{display:grid;width:58px;height:58px;overflow:hidden;place-items:center;border-radius:13px;color:#74603e;background:#eee5d7;font-family:Georgia,"Times New Roman",serif}.oura-cabinet-card img{width:100%;height:100%;object-fit:cover}.oura-cabinet-card section small{color:#9a8055;font-size:.53rem}.oura-cabinet-card h3{margin:2px 0;font-family:Georgia,"Times New Roman",serif;font-size:.9rem}.oura-cabinet-card p{margin:0;color:#8a826d;font-size:.57rem}.oura-cabinet-card button{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:50%;color:#8a6a58;background:#f5ece5}
.oura-pair-list{margin-top:10px}.oura-pair-card{margin-bottom:10px;padding:16px;border:1px solid rgba(99,124,79,.18);border-radius:18px;background:#fffdf9}.oura-pair-card.is-caution,.oura-pair-card.is-separate,.oura-pair-card.is-avoid{border-color:rgba(166,105,79,.25);background:#fff9f5}.oura-pair-products{display:flex;align-items:center;gap:9px;color:#5d5844;font-size:.65rem}.oura-pair-products span{color:var(--oura-gold);font-size:1rem}.oura-pair-card h3{margin:8px 0;font-family:Georgia,"Times New Roman",serif;font-size:1.1rem}.oura-pair-card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.oura-pair-card li{display:grid;grid-template-columns:minmax(150px,.4fr) 1fr;gap:10px;color:#756e5b;font-size:.62rem}.oura-pair-card p{margin:0;color:#7e7662;font-size:.64rem;line-height:1.6}
@media(max-width:1000px){.oura-ingredient-grid,.oura-intelligence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oura-ingredient-profile{grid-template-columns:90px 1fr}.oura-profile-monogram{width:90px;height:90px}.oura-irritation-meter{grid-column:1/-1}.oura-routine-layout{grid-template-columns:1fr}.oura-routine-form-panel{position:static}.oura-cabinet-grid{grid-template-columns:1fr}}
@media(max-width:650px){.oura-ingredient-grid,.oura-intelligence-grid{grid-template-columns:1fr}.oura-ingredient-profile{grid-template-columns:1fr;padding:22px}.oura-profile-monogram{width:70px;height:70px;border-radius:20px}.oura-cabinet-card{grid-template-columns:48px minmax(0,1fr) auto}.oura-cabinet-card>div{width:48px;height:48px}.oura-pair-products{align-items:flex-start;flex-direction:column}.oura-pair-card li{grid-template-columns:1fr}.oura-search-form{border-radius:16px}.oura-search-form button{border-radius:10px}}

/* ============================================================
   OURA STOREFRONT INTELLIGENCE
   Match score, explanations, alternatives, dynamic home and
   replenishment surfaces. These selectors are intentionally
   namespaced so they can be loaded from base.html safely.
============================================================ */
.oura-card-match-badge {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 999px;
    color: #3f4228;
    background: rgba(255,253,248,.90);
    box-shadow: 0 8px 22px rgba(49,47,27,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .62rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .015em;
}
.oura-card-match-badge i { color: #b88e53; font-size: .72rem; }

.oura-match-card {
    --oura-match-accent: #777b55;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    padding: clamp(18px, 2.6vw, 26px);
    border: 1px solid rgba(184,142,83,.20);
    border-radius: 24px;
    background:
        radial-gradient(circle at 96% 0%, rgba(184,142,83,.13), transparent 18rem),
        linear-gradient(145deg, #fffefb, #f8f0e5);
    box-shadow: 0 18px 46px rgba(54,52,31,.065);
}
.oura-match-card.oura-match-excellent { --oura-match-accent: #637449; }
.oura-match-card.oura-match-good { --oura-match-accent: #73764b; }
.oura-match-card.oura-match-neutral { --oura-match-accent: #a07b46; }
.oura-match-card.oura-match-caution { --oura-match-accent: #a45f50; }
.oura-match-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--oura-match-accent), transparent);
    opacity: .75;
}
.oura-match-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.oura-match-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a17b46;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.oura-match-topline h3 {
    margin: 7px 0 3px;
    color: #34331f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 500;
    letter-spacing: -.025em;
}
.oura-match-topline p { margin: 0; color: #7f775f; font-size: .68rem; }
.oura-match-ring {
    --oura-score: 0;
    display: grid;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    place-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fffdf8 58%, transparent 60%),
        conic-gradient(var(--oura-match-accent) calc(var(--oura-score) * 1%), rgba(111,108,75,.12) 0);
    box-shadow: inset 0 0 0 1px rgba(184,142,83,.12);
    text-align: center;
}
.oura-match-ring strong {
    display: block;
    color: #34331f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    line-height: 1;
}
.oura-match-ring small { margin-top: 3px; color: #a17b46; font-size: .48rem; font-weight: 900; letter-spacing: .10em; }

.oura-factor-table { display: grid; gap: 10px; margin-top: 20px; }
.oura-factor-row { display: grid; gap: 5px; }
.oura-factor-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #68624e; font-size: .64rem; }
.oura-factor-label strong { color: #3f4029; font-size: .64rem; }
.oura-factor-track { overflow: hidden; height: 6px; border-radius: 999px; background: rgba(93,91,59,.10); }
.oura-factor-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b88e53, var(--oura-match-accent)); }

.oura-why { margin-top: 18px; border-top: 1px solid rgba(184,142,83,.16); }
.oura-why > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0 5px;
    color: #4c4b31;
    cursor: pointer;
    list-style: none;
    font-size: .7rem;
    font-weight: 800;
}
.oura-why > summary::-webkit-details-marker { display: none; }
.oura-why > summary span { display: inline-flex; align-items: center; gap: 7px; }
.oura-why > summary .bi-chevron-down { transition: transform .18s ease; }
.oura-why[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.oura-why-body { display: grid; gap: 10px; padding-top: 10px; }
.oura-match-explanation { padding: 14px; border: 1px solid rgba(96,119,73,.16); border-radius: 15px; background: rgba(244,248,237,.68); }
.oura-match-explanation.is-caution { border-color: rgba(164,95,80,.18); background: rgba(251,239,234,.72); }
.oura-match-explanation > strong { display: block; margin-bottom: 8px; color: #4d4b31; font-size: .66rem; }
.oura-match-explanation ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.oura-match-explanation li { display: flex; align-items: flex-start; gap: 8px; color: #716a56; font-size: .63rem; line-height: 1.55; }
.oura-match-explanation li i { margin-top: 2px; color: #718055; }
.oura-match-explanation.is-caution li i { color: #a45f50; }

.oura-better-matches { margin-top: 15px; padding: 14px; border: 1px solid rgba(184,142,83,.17); border-radius: 16px; background: rgba(255,253,248,.68); }
.oura-better-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.oura-better-heading span { color: #514d32; font-size: .67rem; font-weight: 850; }
.oura-better-heading small { color: #95896f; font-size: .53rem; }
.oura-better-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.oura-better-grid a { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(184,142,83,.13); border-radius: 11px; color: #56513a !important; background: #fffefb; text-decoration: none !important; }
.oura-better-grid a:hover { border-color: rgba(184,142,83,.35); }
.oura-better-grid a span { min-width: 38px; color: #7a6543; font-size: .63rem; font-weight: 900; }
.oura-better-grid a strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .61rem; }

.oura-routine-add-form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.oura-routine-add-form button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #57583a;
    font-size: .63rem;
    font-weight: 800;
}
.oura-routine-add-form a { color: #756039 !important; font-size: .61rem; font-weight: 750; text-decoration: none !important; }
.oura-match-disclaimer { display: block; margin-top: 14px; color: #98907b; font-size: .53rem; line-height: 1.55; }

.oura-dynamic-section { position: relative; }
.oura-dynamic-section::before,
.oura-replenishment-section::before {
    display: block;
    width: min(1180px, calc(100% - 32px));
    height: 1px;
    margin: 0 auto;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(184,142,83,.24), transparent);
}
.oura-replenishment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.oura-replenishment-card {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid rgba(184,142,83,.18);
    border-radius: 20px;
    background: linear-gradient(145deg,#fffefb,#f8f0e5);
    box-shadow: 0 12px 32px rgba(55,52,30,.045);
}
.oura-replenishment-media { display: grid; width: 82px; height: 82px; overflow: hidden; place-items: center; border-radius: 16px; color: #735e3e; background: #eee4d6; font-family: Georgia,"Times New Roman",serif; font-size: 1.5rem; }
.oura-replenishment-media img { width: 100%; height: 100%; object-fit: cover; }
.oura-replenishment-card small { color: #a18152; font-size: .54rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.oura-replenishment-card h3 { margin: 3px 0 4px; color: #3d3b25; font-family: Georgia,"Times New Roman",serif; font-size: 1rem; font-weight: 500; }
.oura-replenishment-card p { margin: 0; color: #817a66; font-size: .61rem; line-height: 1.5; }
.oura-replenishment-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 8px; color: #8b826d; font-size: .54rem; }
.oura-replenishment-meta strong { color: #695a3e; }
.oura-reorder-button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-radius: 11px; color: #fff; background: #57583a; font-size: .62rem; font-weight: 850; white-space: nowrap; }

@media (max-width: 850px) {
    .oura-replenishment-grid { grid-template-columns: 1fr; }
    .oura-better-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .oura-match-topline { align-items: flex-start; }
    .oura-match-ring { width: 74px; height: 74px; flex-basis: 74px; }
    .oura-replenishment-card { grid-template-columns: 64px minmax(0,1fr); }
    .oura-replenishment-media { width: 64px; height: 64px; }
    .oura-replenishment-card form { grid-column: 1 / -1; }
    .oura-reorder-button { width: 100%; justify-content: center; }
    .oura-better-heading { align-items: flex-start; flex-direction: column; }
}

/* Product-card placement: the score sits inside the card body so it never
   competes with sale/best-seller badges or the wishlist control on media. */
.product-card-body > .oura-card-match-badge {
    position: static;
    top: auto;
    left: auto;
    align-self: flex-start;
    margin-bottom: 10px;
    max-width: 100%;
}