/* =====================================================================
   SKIN DR  -  SITE THEME LAYER  ("Warm Editorial")

   Loaded LAST on every public page (Views/Shared/_Header.cshtml), after
   style.css and responsive.css. It gives the whole public site ONE type
   scale, ONE colour set and ONE alignment grid, and defines the standard
   that every piece of CMS-authored rich text is rendered to.

   Sections
     1. Fonts & design tokens
     2. Base typography (body, forms, stray-font fixes)
     3. Title system (display face for page + section titles)
     4. Alignment grid (hero banners, legal / FAQ reading column)
     5. RICH-TEXT STANDARD  (.cms-content and every CMS-fed container)
     6. Small component clean-ups

   To switch the whole layer off, remove its <link> from _Header.cshtml.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. FONTS & DESIGN TOKENS
   Work Sans is served through the legacy "AppleSDGothicNeo*" family
   names (see fonts.css), so existing selectors keep working. Fraunces is
   the display face and is used only where this file names it.
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* One font for everything: every legacy family name that any layout declares
   (some of them pointing at font folders that no longer exist, which is what
   made whole pages fall back to Times New Roman) is re-declared here, later in
   the cascade, as the site body font. Button font "Univecon" is included so
   buttons, labels and content all share one typeface. */
@font-face {
    font-family: 'Univecon';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apple-Light';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apple-Regular';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apple-Medium';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apple-Bold';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apple-EBold';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Regular';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Medium';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Bold';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Light Regular';
    src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --skd-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --skd-body: 'AppleSDGothicNeo', 'Work Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --skd-ink: #2f2823; /* titles, strong text            */
    --skd-text: #5b5349; /* running copy                   */
    --skd-muted: #8c8072; /* meta, captions                 */
    --skd-accent: #bf7256; /* terracotta - highlights        */
    --skd-accent-deep: #8a3534; /* links, primary buttons         */
    --skd-line: #ece3d5; /* hairlines                      */

    --skd-measure: 780px; /* comfortable reading column     */
    --skd-rt-size: 18px; /* rich-text body size            */
}


/* ---------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   --------------------------------------------------------------------- */
body {
    font-family: var(--skd-body);
    color: var(--skd-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* paragraph colour/weight: public layout only (:where keeps specificity at a
   single element so any component rule still wins; the auth/sign-in layout
   has its own palette and is excluded via .fxd_bdy) */
:where(body:not(.fxd_bdy)) p {
    font-weight: 400;
    color: var(--skd-text);
}

/* form controls never fall back to the browser's serif/system font */
input,
select,
textarea,
button,
optgroup {
    font-family: inherit;
}

::placeholder {
    font-family: inherit;
}

/* inline font-family:none (an invalid value) made these render in Times */
a[style*="font-family:none"],
a[style*="font-family: none"] {
    font-family: inherit !important;
}

/* Lato / Arial Regular were referenced but never loaded */
.new_num_list li {
    font-family: var(--skd-body);
}


/* ---------------------------------------------------------------------
   3. TITLE SYSTEM
   Page and section titles use the display face; everything else stays in
   the body face. Weight 400 + zero tracking is what makes a serif read
   as "editorial" rather than heavy.
   --------------------------------------------------------------------- */
.sec-title h1,
.sec-title h2,
.banner-text h1,
.banner-text h2,
.banner-text h3,
.right-common-sidebar.summary h3,
.st-inner h2,
.list_check h1,
.tittle_wrap h2,
.container.text-center > h1,
.progress_list_title,
.figure-out-left-side h2,
.virtual-right h2,
.exp_dtl h3,
.productname h1,
.intersteed-slider,
h4.intersteed-slider {
    font-family: var(--skd-display);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.14;
    color: var(--skd-ink);
}

/* two-tone hero title (accent + brown): new face, original colours */
.st-inner h1 {
    font-family: var(--skd-display);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.14;
}

/* small eyebrow label that sits above a section title */
.sec-title h6 {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--skd-accent);
}

/* card / step titles: bold, not "black" weight */
body h5 {
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* ---------------------------------------------------------------------
   4. ALIGNMENT GRID
   Everything on a page lines up with the container edge (breadcrumb,
   page title, cards). Long-form pages use one centred reading column.
   --------------------------------------------------------------------- */

/* hero banners: title starts on the container edge, not 130px in */
.inner-banner .banner-inner.concern-banner-1,
.inner-banner .banner-inner.row {
    padding-left: 0;
}

/* "Why Skin Doctor" hero: same edge as the rest of the site (was 157px in).
   Same selector as the original rule so source order decides. */
@media (min-width: 992px) {
    .main-banner.why_bnr .slid-main > div.slid-text {
        padding-left: 0;
        margin-left: -15px;
    }
}

/* legal + FAQ: one centred reading column for title and body */
body .privacy-policy-pagewrapper .padd-130px .banner-inner,
body .paq-pagewrapper .padd-130px .banner-inner {
    padding-left: 0;
    max-width: var(--skd-measure);
    margin-left: auto;
    margin-right: auto;
}

body .privacy-policy-content {
    width: auto;
    max-width: var(--skd-measure);
    margin-left: auto;
    margin-right: auto;
}

body #accordion {
    width: auto;
    max-width: var(--skd-measure);
    margin: 0 auto;
    padding: 0 0 50px;
}

/* sections of a legal document: hairline-separated, even rhythm */
.privacy-com-cont {
    padding: 34px 0;
    border-top: 1px solid var(--skd-line);
}

    .privacy-com-cont:first-child {
        border-top: 0;
    }

    .privacy-com-cont > .privacy-content > p:last-child {
        margin-bottom: 0;
    }

/* legal section headings: uniform small caps label however it was typed */
.privacy-content h4 {
    font-family: var(--skd-body);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--skd-ink);
    margin: 0 0 14px;
}


/* ---------------------------------------------------------------------
   5. RICH-TEXT STANDARD
   Applied to every container that renders CMS-authored HTML. Whatever
   fonts, sizes, colours or spacing were pasted into the editor, text is
   rendered to this standard. (!important is deliberate: it must beat
   inline style="" attributes that come from pasted content.)

   Containers: .cms-content (use it on any new CMS block wrapper),
               .privacy-content (legal pages), .post-content (blog posts)
   --------------------------------------------------------------------- */
:is(.cms-content, .privacy-content, .post-content) {
    font-family: var(--skd-body);
    color: var(--skd-text);
}

    /* body copy */
    :is(.cms-content, .privacy-content, .post-content) :is(p, li, blockquote, td, th, dd, dt, address) {
        font-family: var(--skd-body) !important;
        font-size: var(--skd-rt-size) !important;
        line-height: 1.75 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        color: var(--skd-text) !important;
        text-transform: none !important;
    }

    :is(.cms-content, .privacy-content, .post-content) p {
        margin: 0 0 1.15em !important;
    }

        :is(.cms-content, .privacy-content, .post-content) p:last-child {
            margin-bottom: 0 !important;
        }

/* headings: H2 = section, H3 = sub-section, H4 = minor, H5/H6 = label */
:is(.cms-content, .post-content) :is(h1, h2) {
    font-family: var(--skd-display) !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--skd-ink) !important;
    text-transform: none !important;
    margin: 1.9em 0 0.55em !important;
}

:is(.cms-content, .post-content) h3 {
    font-family: var(--skd-body) !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--skd-ink) !important;
    text-transform: none !important;
    margin: 1.7em 0 0.5em !important;
}

:is(.cms-content, .post-content) h4 {
    font-family: var(--skd-body) !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--skd-ink) !important;
    text-transform: none !important;
    margin: 1.6em 0 0.45em !important;
}

:is(.cms-content, .post-content) :is(h5, h6) {
    font-family: var(--skd-body) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--skd-accent) !important;
    text-transform: uppercase !important;
    margin: 1.6em 0 0.5em !important;
}

/* the first element never needs a top gap */
:is(.cms-content, .post-content) > :first-child,
:is(.cms-content, .post-content) > .blog-block > :first-child {
    margin-top: 0 !important;
}

/* legal headings keep their own (label) treatment but lose pasted overrides */
.privacy-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--skd-body) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--skd-ink) !important;
    margin: 0 0 14px !important;
}

/* style.css makes EVERY span/a/label inline-block, and an inline-block cannot wrap
   across lines, so long bullet/sentence spans dropped wholesale onto the next line */
:is(.cms-content, .privacy-content, .post-content) :is(span, font, label, em, i, u, small, sub, sup, strong, b, a:not(.round-btn)) {
    display: inline !important;
    vertical-align: baseline !important;
}

/* inline decoration inherits - no pasted fonts, sizes or colours */
:is(.cms-content, .privacy-content, .post-content) :is(span, font, u, small, sub, sup, em, i, b) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}

:is(.cms-content, .privacy-content, .post-content) :is(strong, b) {
    font-weight: 700 !important;
    color: var(--skd-ink) !important;
}

:is(.cms-content, .privacy-content, .post-content) a {
    color: var(--skd-accent-deep) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

    :is(.cms-content, .privacy-content, .post-content) a:hover {
        color: var(--skd-accent) !important;
    }

/* legacy classes such as "bold_first_letter" style the first letter as a big
   black drop-cap; the standard has no drop-caps */
:is(.cms-content, .privacy-content, .post-content) :is(p, li, h2, h3, h4, h5, h6, td, th)::first-letter {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* lists (privacy ul.list-item keeps its own bullet design) */
:is(.cms-content, .post-content) :is(ul, ol),
.privacy-content :is(ul:not(.list-item), ol) {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

:is(.cms-content, .post-content) li,
.privacy-content ul:not(.list-item) li,
.privacy-content ol li {
    margin-bottom: 0.45em;
}

/* style.css resets "ul li, ol li { list-style: none }" on the items themselves, so
   the marker has to be restored on the <li> (setting it on the list is not enough) */
/* bullets are drawn (a small accent dot) so they look identical in any font */
:is(.cms-content, .post-content) ul > li,
.privacy-content ul:not(.list-item) > li {
    list-style: none !important;
    position: relative;
}

    :is(.cms-content, .post-content) ul > li::before,
    .privacy-content ul:not(.list-item) > li::before {
        content: "";
        position: absolute;
        left: -1.05em;
        top: 0.7em;
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background: var(--skd-accent);
    }

:is(.cms-content, .post-content) ol > li,
.privacy-content ol > li {
    list-style: decimal outside !important;
}

:is(.cms-content, .post-content) li,
.privacy-content ul:not(.list-item) li,
.privacy-content ol li {
    display: list-item !important;
}

    :is(.cms-content, .post-content) li::marker,
    .privacy-content ul:not(.list-item) li::marker {
        color: var(--skd-accent);
    }

/* media */
:is(.cms-content, .privacy-content, .post-content) img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

:is(.cms-content, .privacy-content, .post-content) [style*="float"] {
    float: none !important;
}

:is(.cms-content, .post-content) blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.2em;
    border-left: 3px solid var(--skd-accent);
}

:is(.cms-content, .post-content) hr {
    border: 0;
    border-top: 1px solid var(--skd-line);
    margin: 2em 0;
}

:is(.cms-content, .post-content) table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4em;
}

:is(.cms-content, .post-content) :is(th, td) {
    padding: 0.7em 0.9em !important;
    border-bottom: 1px solid var(--skd-line) !important;
    text-align: left;
}

:is(.cms-content, .post-content) th {
    font-weight: 700 !important;
    color: var(--skd-ink) !important;
}


/* ---------------------------------------------------------------------
   6. SMALL COMPONENT CLEAN-UPS
   --------------------------------------------------------------------- */
/* helper classes used by the sign-in / portal screens: they referenced font
   names that were never loaded and so rendered in Times New Roman */
.Apple-Light {
    font-family: var(--skd-body);
    font-weight: 300;
}

.Apple-Regular {
    font-family: var(--skd-body);
    font-weight: 400;
}

.Apple-Medium {
    font-family: var(--skd-body);
    font-weight: 500;
}

.Apple-Bold {
    font-family: var(--skd-body);
    font-weight: 700;
}

/* blog filter labels referenced "Arial Regular" (never loaded) */
.blog-banner .banner-rightside label {
    font-family: var(--skd-body);
    color: var(--skd-text);
    letter-spacing: 0.02em;
}

/* product page: brand label above the product title */
.product-brand {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--skd-accent);
    margin-bottom: 8px;
}

/* product page: summary text sits in a proper container, not a <p> */
.product-summary {
    margin-bottom: 18px;
}

/* "Recommended Articles" row at the bottom of a blog post: every card is as tall as the tallest
   one in its row, and the READ MORE row sits on the same line in all of them, however many lines
   the title takes (before, one two-line title made only its own card taller) */
#recomendedblog > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

#recomendedblog .blog-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#recomendedblog .blog-post-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#recomendedblog .blog-title {
    flex: 1 1 auto;
}

#recomendedblog .blog-action-btn {
    margin-top: auto;
}

/* shop sort filters (Featured / Kits-Collection / Best Sellers): one option per line, tick box and
   label level with each other, and the box is only as tall as its options */
.list_check .form-check {
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 14px;
    padding: 18px 22px;
}

    .list_check .form-check > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .list_check .form-check input {
        margin: 0;
        flex: 0 0 20px;
        cursor: pointer;
    }

    .list_check .form-check label {
        margin: 0;
        vertical-align: baseline;
        line-height: 1.3;
        white-space: nowrap;
        cursor: pointer;
    }

/* all-caps captions that sat exactly on one line in the old (narrower) font: one notch smaller
   keeps them on the same line count so neighbouring items stay level
   - shop benefit strip ("COMPLIMENTARY VIRTUAL CONSULTATION")
   - "How it works" step captions on home / patch-test */
.shipping-oinner .shipinner h5 {
    font-size: 14px;
}

.step-box .step-inner h5,
.step-box .step-inner h5 strong {
    font-size: 14px;
}

/* lists filled in by Ajax after the page paints (blog cards, shop products): reserve about a
   screen of height so the footer and the sections below do not pop into view and jump when
   the cards arrive (this was most of the page's layout-shift score) */
#blog_details,
.item_bind {
    min-height: 80vh;
}

/* header account dropdown: a fixed 400px box with non-shrinking items overflowed past the
   right edge of the screen once the text became wider. Size it to its content and let it
   grow leftwards from the icon (it is anchored with right:0). */
.account_drpdown {
    width: max-content;
    max-width: calc(100vw - 32px);
}

/* footer column headings: one small, tracked label style */
footer .footer-inner-content h4,
footer h4,
footer h5,
footer h6 {
    font-family: var(--skd-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

/* blog: cards sit on the same left edge as the page title */
.main-blog .inner-container {
    margin-left: 0;
}

/* blog: one author-avatar size on every card, whatever the inline style says */
.blog-box .author img,
.blog-author-avatar {
    width: 28px;
    height: 28px;
    max-width: none !important;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
}

.blog-box .author {
    align-items: center;
}

/* blog cards: the listing partial ships its own "h5 { line-height:18px !important }" */
.blog-box .blog-title h5 {
    line-height: 1.32 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* auth screens (sign in / sign up / get in touch): title in the display face */
.login_section h1.reset_psw_heading,
.login_section h2.reset_psw_heading {
    font-family: var(--skd-display);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--skd-ink);
}

/* blog detail title joins the display-title family */
.left-aside > .blog-title h1 {
    font-family: var(--skd-display);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--skd-ink);
}

/* "Our Experts" style centred page titles */
.container > h1.text-center,
.container > h2.text-center {
    font-family: var(--skd-display);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--skd-ink);
}

/* FAQ: Q and A markers share one column so every line of text aligns */
span.que,
span.ans {
    flex: 0 0 64px;
    width: 64px;
    padding-right: 0;
    font-family: var(--skd-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

span.que {
    color: var(--skd-accent);
}

span.ans {
    color: var(--skd-muted);
}

body #accordion .que-ans p {
    font-size: 21px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--skd-ink);
    margin: 0;
}

body #accordion .card-body {
    padding: 18px 0 0;
    max-width: 92%;
}

    body #accordion .card-body p {
        font-size: 17px;
        line-height: 1.75;
        font-weight: 400;
        color: var(--skd-text);
        margin: 0;
    }

body .paq-pagewrapper #accordion .card {
    margin-bottom: 0;
    padding: 28px 0;
    border-bottom: 1px solid var(--skd-line);
}

.acc-plus-minus:before,
.acc-plus-minus:after {
    border-color: var(--skd-ink);
}

@media (max-width: 767px) {
    :root {
        --skd-rt-size: 17px;
    }

    /* featured and grid blog cards share one text inset */
    .blog-right-side-content,
    .blog-post-inner {
        padding: 24px 22px 28px;
    }

    :is(.cms-content, .post-content) :is(h1, h2) {
        font-size: 26px !important;
    }

    :is(.cms-content, .post-content) h3 {
        font-size: 21px !important;
    }
}