/* OLIVE PEOPLE – My Skin Concern. Scoped to the CTA and concern page only. */
.op-home-responsive .op-home-actions > .op-skin-hero-row,
.op-home-actions > .op-skin-hero-row {
    display:flex;
    flex:0 0 100%;
    align-items:flex-start;
    min-width:0;
}
.op-home-actions .op-skin-hero-link {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:auto;
    max-width:100%;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:1.3;
    color:var(--op-ink,#263516);
    background:rgba(251,250,245,.87);
    border:1px solid var(--op-green,#4e6137);
    border-radius:99px;
    text-decoration:none;
}
.op-home-actions .op-skin-hero-link:hover,
.op-home-actions .op-skin-hero-link:focus-visible {
    background:#f0f3e9;
    color:var(--op-ink,#263516);
    outline-offset:3px;
}
.op-home-actions .op-skin-hero-link > .op-copy,
.op-home-actions .op-skin-hero-link > .op-i18n-label {
    font-size:inherit!important;
    font-weight:inherit!important;
    line-height:inherit!important;
    color:inherit!important;
}
.op-home-actions .op-skin-hero-link > [aria-hidden="true"] {
    font-size:21px;
    line-height:1;
    flex-shrink:0;
}
@media (max-width:760px) {
    .op-home-responsive .op-home-actions {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .op-home-responsive .op-home-actions > [data-op-panel-open="explore"] { order:1; }
    .op-home-responsive .op-home-actions > .op-skin-hero-row { order:2; flex:0 0 auto; width:auto; }
    .op-home-responsive .op-home-actions > a.op-home-action:not(.op-skin-hero-link) { order:3; }
    .op-home-responsive .op-home-actions .op-skin-hero-link {
        min-height:44px;
        max-width:100%;
        padding:10px 14px;
        gap:12px;
        font-size:14px;
        line-height:1.5;
    }
    .op-home-responsive .op-home-actions .op-skin-hero-link > [aria-hidden="true"] {font-size:18px;}
}
html[dir="rtl"] .op-home-responsive .op-home-actions .op-skin-hero-link {
    font-family:Tahoma,Arial,sans-serif;
}
html[dir="rtl"] .op-home-actions .op-skin-hero-link > [aria-hidden="true"] {
    transform:scaleX(-1);
}

/* Concern catalogue mirrors the Shop's cream palette, typography and card geometry. */
body.op-skin-concern-page .site-content {padding-top:26px;}
body.op-skin-concern-page .op-skin-intro {
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    margin:0 0 28px;
    padding:22px 0 26px;
    border-bottom:1px solid var(--op-line,#dce3d2);
}
body.op-skin-concern-page .op-skin-intro .op-eyebrow {
    color:var(--op-green,#4e6137);
    margin-bottom:16px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
}
body.op-skin-concern-page .op-skin-intro h1 {
    font:var(--op-type-page,400 36px/1.15 Georgia,serif);
    font-size:clamp(30px,3vw,40px);
    margin:0 0 14px;
    color:var(--op-ink,#263516);
}
body.op-skin-concern-page .op-skin-intro > p:not(.op-eyebrow) {
    max-width:620px;
    font-size:16px;
    line-height:1.65;
}
body.op-skin-concern-page .op-skin-back-shop {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    padding:8px 0;
    font-size:14px;
    font-weight:600;
    color:var(--op-green,#4e6137);
    text-decoration:none;
}
body.op-skin-concern-page .op-skin-back-shop:hover {text-decoration:underline;text-underline-offset:4px;}
body.op-skin-concern-page .op-catalogue-heading {margin-bottom:22px;}
body.op-skin-concern-page .op-catalogue-heading h2 {font-size:24px;}
body.op-skin-concern-page .op-skin-concern-tabs {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    gap:0;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    margin-bottom:24px;
    border-block:1px solid var(--op-line,#dce3d2);
}
body.op-skin-concern-page .op-skin-concern-tabs a {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:12px 20px;
    border:0;
    border-inline-end:1px solid var(--op-line,#dce3d2);
    background:transparent;
    color:#5e6853;
    font:var(--op-type-label,700 12px/1.5 Arial,Helvetica,sans-serif);
    font-size:12px;
    line-height:1.5;
    font-weight:700;
    letter-spacing:.015em;
    white-space:nowrap;
    text-decoration:none;
    scroll-snap-align:start;
}
body.op-skin-concern-page .op-skin-concern-tabs a.is-active,
body.op-skin-concern-page .op-skin-concern-tabs a[aria-current="page"] {
    background:var(--op-green,#4e6137);
    color:white;
}
body.op-skin-concern-page .op-skin-concern-tabs a:hover:not(.is-active) {background:#edf1e6;}
body.op-skin-concern-page .op-skin-concern-tabs a:focus-visible {outline:2px solid #4e6137;outline-offset:-3px;}
body.op-skin-concern-page .op-skin-product-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
body.op-skin-concern-page .op-skin-product-card {min-width:0;display:flex;flex-direction:column;background:transparent;}
body.op-skin-concern-page .op-skin-product-card .op-skin-product-detail {display:flex;flex:1;flex-direction:column;text-decoration:none;color:inherit;}
body.op-skin-concern-page .op-skin-product-card .op-shop-brand-product__image {
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    aspect-ratio:1/1;
    background:#fff;
}
body.op-skin-concern-page .op-skin-product-card .op-shop-brand-product__image img {
    width:100%;height:100%;max-width:100%;max-height:100%;
    object-fit:contain!important;
    object-position:center;
    background:#fff;
}
body.op-skin-concern-page .op-skin-product-card .op-skin-no-image {font-size:12px;color:#738066;}
body.op-skin-concern-page .op-skin-product-card .op-skin-brand {font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.06em;color:#667257;}
body.op-skin-concern-page .op-skin-product-card h3 {
    font-family:Georgia,'Times New Roman',serif;
    font-size:18px;
    line-height:1.35;
    font-weight:400;
    letter-spacing:0;
    font-variant-numeric:lining-nums;
    font-feature-settings:"lnum" 1,"onum" 0;
    min-height:2.7em;
}
body.op-skin-concern-page .op-skin-product-card small {font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.015em;}
body.op-skin-concern-page .op-skin-product-card .op-preview-add {
    align-self:start;
    margin:0 12px 13px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:650;
}
body.op-skin-concern-page .op-skin-product-card .op-preview-add svg {width:17px;height:17px;}
body.op-skin-concern-page .op-skin-pagination {display:flex;align-items:center;justify-content:center;gap:24px;margin:26px 0;}
body.op-skin-concern-page .op-skin-pagination a {padding:10px;color:var(--op-green,#4e6137);font-weight:600;}
body.op-skin-concern-page .op-skin-empty {padding:26px 20px;border:1px solid var(--op-line,#dce3d2);background:#fafaf5;line-height:1.6;}
body.op-skin-concern-page .op-skin-empty a {color:var(--op-green,#4e6137);}
body.op-skin-concern-page .op-skin-note {font-size:12px;color:#6d7467;line-height:1.65;margin:25px 0 35px;}
body.op-skin-concern-page #skin-concern-products {scroll-margin-top:90px;}
@media(min-width:1100px) {
    body.op-skin-concern-page .op-skin-product-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(min-width:1440px) {
    body.op-skin-concern-page .op-skin-product-grid {grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media(max-width:767px) {
    body.op-skin-concern-page .site-content {padding:22px 16px;}
    body.op-skin-concern-page .op-skin-intro {padding:18px 0 23px;margin-bottom:22px;}
    body.op-skin-concern-page .op-skin-intro h1 {line-height:1.15;}
    body.op-skin-concern-page .op-skin-intro > p:not(.op-eyebrow) {font-size:15px;}
    body.op-skin-concern-page .op-skin-concern-tabs {margin-inline-end:-16px;padding-inline-end:16px;}
    body.op-skin-concern-page .op-skin-concern-tabs a {padding:11px 15px;min-height:44px;font-size:12px;}
    body.op-skin-concern-page .op-skin-product-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    body.op-skin-concern-page .op-skin-product-card .op-skin-product-detail {padding:9px 9px 16px;}
    body.op-skin-concern-page .op-skin-product-card h3 {font-size:16px;}
    body.op-skin-concern-page .op-skin-product-card .op-preview-add {margin-inline:9px;}
}


/* 1.0.2 — Three matching homepage CTAs.
   Shop Now is the size reference: equal width / height for all three buttons.
   Keep each button's existing color, outline, hover effect and arrow.
   This is intentionally scoped to the home hero, not the concern catalogue. */
body.home .op-home-responsive .op-home-hero .op-home-actions {
    --op-three-cta-width: 156px;
}
body.home .op-home-responsive .op-home-hero .op-home-actions > .op-home-action,
body.home .op-home-responsive .op-home-hero .op-home-actions > .op-skin-hero-row > .op-skin-hero-link {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: start !important;
    width: var(--op-three-cta-width) !important;
    min-width: var(--op-three-cta-width) !important;
    max-width: var(--op-three-cta-width) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 10px 16px !important;
    gap: 8px !important;
    white-space: nowrap;
}
body.home .op-home-responsive .op-home-hero .op-home-actions > .op-home-action > [aria-hidden="true"],
body.home .op-home-responsive .op-home-hero .op-home-actions > .op-skin-hero-row > .op-skin-hero-link > [aria-hidden="true"] {
    flex: 0 0 20px !important;
    width: 20px !important;
    text-align: center !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}
@media (max-width: 760px) {
    body.home .op-home-responsive .op-home-hero .op-home-actions > .op-home-action,
    body.home .op-home-responsive .op-home-hero .op-home-actions > .op-skin-hero-row > .op-skin-hero-link {
        height: 44px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        gap: 8px !important;
    }
}
/* Arabic translations are longer: keep the three buttons equally sized,
   with slightly more room for labels instead of clipping the text. */
html[dir="rtl"] body.home .op-home-responsive .op-home-hero .op-home-actions {
    --op-three-cta-width: 206px;
}


/* 1.0.5: matching cross-page navigation chips. Only the Shop heading and concern-page section heading are affected. */
body.woocommerce-shop .op-sc-shop-nav,
body.post-type-archive-product .op-sc-shop-nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    min-width:0;
}
body.woocommerce-shop .op-sc-shop-nav > h2,
body.post-type-archive-product .op-sc-shop-nav > h2 {
    margin:0!important;
}
body .op-skin-crosslink {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    border:1px solid var(--op-green,#4e6137);
    border-radius:999px;
    background:rgba(251,250,245,.88);
    color:var(--op-green,#4e6137);
    padding:7px 12px;
    line-height:1.35;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:none;
    transition:background-color .15s ease;
}
body .op-skin-crosslink:hover,
body .op-skin-crosslink:focus-visible {
    background:#eef2e8;
    color:var(--op-green,#4e6137);
    text-decoration:none;
}
body .op-skin-crosslink:focus-visible {outline:2px solid var(--op-green,#4e6137);outline-offset:3px;}
body .op-skin-crosslink-arrow {font-size:15px;font-weight:400;line-height:1;display:inline-block;}
html[dir="rtl"] body .op-skin-crosslink-arrow {transform:scaleX(-1);}
body.op-skin-concern-page .op-sc-concern-shop-nav {
    display:flex;
    align-items:center;
}
body.op-skin-concern-page .op-sc-concern-shop-nav .screen-reader-text {position:absolute!important;}
body.op-skin-concern-page .op-catalogue-heading {align-items:center;}
@media(max-width:760px) {
    body.woocommerce-shop .op-sc-shop-nav,
    body.post-type-archive-product .op-sc-shop-nav {gap:8px;}
    body .op-skin-crosslink {padding:7px 10px;font-size:12px;gap:7px;min-height:34px;}
    body.woocommerce-shop .op-catalogue-heading,
    body.post-type-archive-product .op-catalogue-heading {gap:10px;align-items:center;}
}


/* 1.0.7 — shared internal navigation button, visually identical to the
   product detail `‹ Back` control. Only cross-page navigation is affected;
   product filter tabs, hero CTAs and Add to cart buttons are unchanged. */
body .op-internal-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 9px 4px 6px;
    border: 1px solid #d7ddce;
    border-radius: 6px;
    background: #f8f8f2;
    background-image: none;
    box-shadow: none;
    color: #25291e;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
body .op-internal-nav-button:hover,
body .op-internal-nav-button:focus-visible {
    background: #edf0e6;
    border-color: #aab69a;
    color: #25291e;
    text-decoration: none;
}
body .op-internal-nav-button:focus-visible {
    outline: 2px solid #4e6137;
    outline-offset: 2px;
}
body .op-internal-nav-button__icon {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[dir="rtl"] body .op-internal-nav-button__icon {
    transform: scaleX(-1);
}
@media (max-width: 600px) {
    body .op-internal-nav-button {
        min-height: 28px;
        padding: 4px 9px 4px 6px;
        gap: 5px;
        font-size: 12px;
    }
}


/* 1.0.8 — Match All Products intro and grid without modifying the shop theme. */
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro {
    padding:24px 0 22px !important;
    margin:0 0 22px !important;
    border:0 !important;
    border-bottom:0 !important;
    background:transparent !important;
    background-image:none !important;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro .op-eyebrow {
    margin:0 0 8px !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.5 !important;
    letter-spacing:.18em !important;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro h1 {
    /* Same font shorthand as the All Products page, not the former 40px cap. */
    font:var(--op-type-page,400 clamp(30px,4vw,46px)/1.15 Georgia,"Times New Roman",serif) !important;
    font-weight:400 !important;
    letter-spacing:-.02em !important;
    margin:0 0 8px !important;
    max-width:100%;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro > p:not(.op-eyebrow) {
    margin:0 !important;
    max-width:650px;
    color:#636b5e;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.65 !important;
}
/* Same compact text-link menu used by All Products and category archives. */
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links {
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    column-gap:0;
    row-gap:2px;
    margin-top:14px !important;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links > * {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    white-space:nowrap;
    padding:5px 0 !important;
    font:600 13px/1.5 Arial,Helvetica,sans-serif;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links > * + *::before {
    content:"|";
    color:#a6ae9b;
    margin-inline:12px;
    font-weight:400;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links a {
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    color:var(--op-ink,#263516) !important;
    text-decoration:none;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links a:is(:hover,:focus-visible) {
    color:var(--op-green,#4e6137) !important;
    text-decoration:underline;
    text-underline-offset:4px;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links .op-store-intro__upcoming {
    color:#687060;
    opacity:1;
}
body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links .op-store-intro__upcoming small {
    margin-inline-start:4px;
    font-size:10px;
    font-weight:400;
}
/* Exact heading-row geometry: small category name on left, standard Back chip, count on right. */
body.op-skin-concern-page .op-skin-shop > .op-catalogue-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin:0 0 20px;
}
body.op-skin-concern-page .op-skin-shop > .op-catalogue-heading .op-sc-concern-shop-nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    min-width:0;
}
body.op-skin-concern-page .op-sc-concern-shop-nav > h2.op-skin-section-label {
    position:static !important;
    clip:auto !important;
    clip-path:none !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    white-space:normal !important;
    margin:0 !important;
    padding:0;
    border:0;
    font:400 14px/1.45 Arial,Helvetica,sans-serif !important;
    color:var(--op-ink,#263516);
    letter-spacing:normal;
}
body.op-skin-concern-page .op-skin-shop > .op-catalogue-heading .op-shop-brand-count {
    white-space:nowrap;
    margin:0;
}
/* Enforce the same responsive 5-column layout as the working All Products grid.
   Selector intentionally wins over theme's legacy 3/4-column catalogue rules. */
@media (min-width:1280px) {
    html body.op-skin-concern-page main.op-skin-concern-content .op-shop-brand-grid.op-skin-product-grid {
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }
}
@media (min-width:1000px) and (max-width:1279px) {
    html body.op-skin-concern-page main.op-skin-concern-content .op-shop-brand-grid.op-skin-product-grid {
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}
@media (min-width:768px) and (max-width:999px) {
    html body.op-skin-concern-page main.op-skin-concern-content .op-shop-brand-grid.op-skin-product-grid {
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media (max-width:767px) {
    body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro {
        padding:20px 0 18px !important;
        margin:0 0 16px !important;
    }
    body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links > * + *::before {
        margin-inline:8px;
    }
    body.op-skin-concern-page .op-skin-shop > .op-catalogue-heading {
        gap:10px;
        align-items:center;
    }
    body.op-skin-concern-page .op-sc-concern-shop-nav > h2.op-skin-section-label {
        font-size:14px !important;
    }
    html body.op-skin-concern-page main.op-skin-concern-content .op-shop-brand-grid.op-skin-product-grid {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* 1.0.13 — Shared vertical rhythm, measured against All Products.
   The Shop theme's actual computed desktop line boxes (with active Site
   Enhancements) are: eyebrow 12px/normal (14px high), title 46px/1.15,
   description 16px/normal (18px high). Do not compensate mismatched
   line boxes by subtracting arbitrary margins: match the boxes themselves.
   This affects only My Skin Concern; the Shop remains untouched. */
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro .op-eyebrow {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: normal !important;
    letter-spacing: .18em !important;
    margin: 0 0 8px !important;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro h1 {
    font: var(--op-type-page, 400 clamp(30px,4vw,46px)/1.15 Georgia,serif) !important;
    letter-spacing: -.02em !important;
    margin: 0 0 8px !important;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro > p:not(.op-eyebrow) {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: var(--op-type-body, 16px) !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 !important;
}
body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro .op-skin-shop-category-links {
    margin-top: 14px !important;
}
/* The Shop heading has a normal 16px line box plus 16px bottom margin,
   total 34px. Mirror that *structurally* instead of shifting the tab bar. */
body.op-skin-concern-page .op-skin-concern-content .op-skin-shop > .op-catalogue-heading {
    display: flex;
    align-items: baseline !important;
    margin: 0 0 20px !important;
}
body.op-skin-concern-page .op-skin-concern-content .op-sc-concern-shop-nav {
    align-items: flex-start !important;
}
html body.op-skin-concern-page main.op-skin-concern-content .op-skin-shop .op-sc-concern-shop-nav > h2.op-skin-section-label {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: var(--op-type-body, 16px) !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 0 16px !important;
}
/* Exact same gap after intro as the Shop's .op-store-intro on desktop. */
@media (min-width: 768px) {
    body.op-skin-concern-page .op-skin-concern-content > .op-skin-intro {
        margin: 0 0 22px !important;
        padding: 24px 0 22px !important;
    }
}

/* Mobile: All Products uses 16px top content padding and 44px category links.
   Skin Concern previously kept 22px and 29.5px links, making the entire
   page shorter despite identical text. Mirror the Shop's actual geometry. */
@media (max-width: 767px) {
    body.op-skin-concern-page .site-content {
        padding-top: 16px !important;
    }
    body.op-skin-concern-page .op-skin-intro .op-skin-shop-category-links > a {
        min-height: 44px !important;
    }
}