/*
Theme Name: Cosmetic Note
Theme URI: https://cosmeticnote.com/
Description: Cosmetic Note – Your Leading Partner. EU cosmetic regulatory compliance theme (EN / RU).
Version: 1.1
Text Domain: cosmeticnote
*/

/* Inner pages (Services, Service Details, SDS & Chemicals, Essential Oils) and language switcher.
   Loaded after assets/css/style.css; uses the theme colour variables. */

/* breadcrumb: show the photo through the slate overlay */
.breadcrumb__area { background-size: cover; background-position: center; }
.breadcrumb__overlay::after { background-color: rgba(75, 90, 111, 0.86); }
.cn-trail { justify-content: flex-end; gap: 6px; }
.cn-trail span { font-size: 15px; letter-spacing: 1px; }
.cn-trail span a { margin-left: 0; text-decoration: none; color: var(--tp-common-white); opacity: .85; }
.cn-trail span a:hover { opacity: 1; color: var(--tp-common-white); }
.cn-trail span + span::before { content: "/"; margin-right: 6px; opacity: .6; }
@media (max-width: 991px) { .cn-trail { justify-content: flex-start; margin-top: 15px; } }

/* language switcher */
.cn-lang { display: inline-flex; gap: 4px; font-weight: 700; font-size: 13px; letter-spacing: 1px; }
.cn-lang a, .cn-lang span { padding: 2px 8px; border-radius: 3px; color: var(--tp-text-2); border: 1px solid var(--tp-border-primary); line-height: 20px; }
.header-top-mob { white-space: nowrap; }
.header-time .cn-lang { margin-right: 30px; }
.header-time .cn-lang span { margin: 0; font-size: 13px; }
.cn-lang .active { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); color: var(--tp-common-white); }

/* blog cards: any image (featured or fallback) fills the card at the same ratio */
.blog-item__thumb img { display: block; width: 100%; aspect-ratio: 410 / 232; object-fit: cover; }
.cn-lang a:hover { border-color: var(--tp-theme-primary); color: var(--tp-theme-primary); }
.tpsideinfo .cn-lang a { color: #fff; border-color: rgba(255, 255, 255, .35); }
.tpsideinfo .cn-lang .active { background: #fff; border-color: #fff; color: var(--tp-theme-primary); }

/* Bulgarian / Russian: quasimoda (Typekit) has no Cyrillic, Jost is the closest geometric match */
html[lang="bg"], html[lang="ru"] { --tp-ff-body: 'Jost', sans-serif; --tp-ff-heading: 'Jost', sans-serif; --tp-ff-p: 'Jost', sans-serif; }

/* photos are saved at 2x: show them at the theme's original slot sizes */
.about-thumb > img { width: 506px; max-width: 100%; height: auto; }
.about-thumb-shape img { width: 262px; height: auto; }
.tp-ab-img .tp-ab-main-img > img { width: 350px; max-width: 100%; height: auto; }
.tp-ab-shape .ab-shape-one, .tp-ab-shape .ab-shape-two { width: 297px; max-width: 100%; height: auto; }
.cn-rounded { border-radius: 6px; max-width: 100%; }
.cn-intro-img img { width: 100%; border-radius: 6px; }

/* initials instead of grey placeholders (testimonials, team) until real photos are added */
.cn-initials {
    display: block; width: 82px; height: 82px; line-height: 74px; border-radius: 50%; text-align: center;
    background: var(--tp-theme-blue); border: 4px solid #fff; box-shadow: 0 9px 11px rgba(162, 170, 191, .25);
    color: #fff; font-weight: 700; font-size: 24px; letter-spacing: 1px;
}
.cn-initials--team {
    width: 100%; height: 240px; line-height: 240px; border: 0; border-radius: 5px 5px 0 0; box-shadow: none;
    background: linear-gradient(135deg, var(--tp-theme-primary), var(--tp-theme-sky)); font-size: 64px; letter-spacing: 4px;
}

/* About: team cards + "ask our expert" card */
.cn-team { height: calc(100% - 50px); border-radius: 5px; overflow: hidden; }
.cn-team .tp-team__content { padding: 30px 35px; }
.cn-team--cta { position: relative; padding: 45px 40px; color: rgba(255, 255, 255, .8); }
.cn-team--cta h4 { color: #fff; font-size: 26px; }
.cn-team--cta p { color: rgba(255, 255, 255, .8); }

/* rich page content */
.cn-content { color: var(--tp-text-body); font-size: 16px; line-height: 1.8; }
.cn-content p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; }
.cn-content .cn-lead { font-size: 19px; line-height: 1.7; color: var(--tp-heading-primary); font-weight: 500; }
.cn-content h3 { font-size: 30px; color: var(--tp-heading-primary); margin: 45px 0 20px; }
.cn-content h4 { font-size: 21px; color: var(--tp-heading-primary); margin: 30px 0 14px; }
.cn-content h3:first-child, .cn-content h4:first-child { margin-top: 0; }
.cn-content a { color: var(--tp-theme-blue); text-decoration: underline; }
.cn-content a:hover { color: var(--tp-theme-primary); }
.cn-content ul, .cn-content ol { margin: 0 0 25px; padding: 0; list-style: none; }
.cn-content ul li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.cn-content ul li::before {
    content: "\f00c"; font-family: var(--tp-ff-fontawesome); font-weight: 900; font-size: 11px;
    position: absolute; left: 0; top: 4px; width: 20px; height: 20px; line-height: 20px; text-align: center;
    border-radius: 50%; background: var(--tp-icon-blue-light); color: var(--tp-theme-blue);
}
.cn-content ol { counter-reset: cn; }
.cn-content ol li { position: relative; padding-left: 50px; margin-bottom: 16px; counter-increment: cn; }
.cn-content ol li::before {
    content: counter(cn); position: absolute; left: 0; top: 0; width: 34px; height: 34px; line-height: 34px;
    text-align: center; border-radius: 50%; background: var(--tp-theme-primary); color: var(--tp-common-white);
    font-weight: 700; font-size: 14px;
}
.cn-content ol.cn-cols { columns: 2; column-gap: 40px; }
.cn-content ol.cn-cols li { break-inside: avoid; padding-top: 5px; }
@media (max-width: 767px) { .cn-content ol.cn-cols { columns: 1; } }
.cn-content blockquote {
    margin: 0 0 25px; padding: 28px 30px; background: var(--tp-grey-1); border-left: 4px solid var(--tp-theme-blue);
    border-radius: 0 6px 6px 0; font-style: italic;
}
.cn-content blockquote strong { display: block; font-style: normal; color: var(--tp-heading-primary); margin-bottom: 8px; }
.cn-note {
    margin: 10px 0 25px; padding: 22px 26px 22px 64px; position: relative; border-radius: 6px;
    background: var(--tp-icon-pink-light); color: var(--tp-text-2); line-height: 1.7;
}
.cn-note::before {
    content: "\f06a"; font-family: var(--tp-ff-fontawesome); font-weight: 900; font-size: 22px;
    position: absolute; left: 24px; top: 22px; color: var(--tp-theme-pink);
}
.cn-note strong { color: var(--tp-heading-primary); }

/* GHS hazard pictograms */
.cn-ghs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 30px 16px; margin: 30px 0 35px; }
.cn-ghs__item { position: relative; padding-top: 108px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--tp-heading-primary); }
.cn-ghs__item span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--tp-text-1); margin-bottom: 2px; }
.cn-ghs__item::before {
    content: ""; position: absolute; top: 18px; left: 50%; width: 62px; height: 62px; margin-left: -31px;
    border: 4px solid #d6001c; background: #fff; transform: rotate(45deg); border-radius: 4px;
}
.cn-ghs__item::after {
    content: var(--icon); position: absolute; top: 18px; left: 0; right: 0; line-height: 62px;
    font-family: var(--tp-ff-fontawesome); font-weight: 900; font-size: 26px; color: #111;
}
.cn-ghs--explosive  { --icon: "\f1e2"; }
.cn-ghs--flammable  { --icon: "\f46a"; }
.cn-ghs--oxidising  { --icon: "\f06d"; }
.cn-ghs--gas        { --icon: "\e452"; }
.cn-ghs--corrosive  { --icon: "\f461"; }
.cn-ghs--toxic      { --icon: "\f714"; }
.cn-ghs--harmful    { --icon: "\21"; }
.cn-ghs--health     { --icon: "\f604"; }
.cn-ghs--environment { --icon: "\f578"; }

/* service cards */
/* equal-height cards: title, text, then "Read more" pinned to the bottom */
.cn-card { height: calc(100% - 50px); display: flex; flex-direction: column; padding: 45px 40px 40px; }
.cn-card .services-item__content { flex: 1; display: flex; flex-direction: column; }
.cn-card .services-item__tp-title { margin-bottom: 15px !important; }
.cn-card .services-item__content p { margin-bottom: 25px; }
.cn-card .services-item__content .cn-more { margin-top: auto; align-self: flex-start; }
@media (max-width: 767px) { .cn-card { padding: 35px 25px 30px; } }
.cn-more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-theme-blue); }
.cn-more i { margin-left: 6px; transition: transform .3s; }
.cn-more:hover { color: var(--tp-theme-primary); }
.cn-more:hover i { transform: translateX(4px); }
.cn-area .services-thumb-box__thumb img { width: 100%; height: 300px; object-fit: cover; }
.cn-area { box-shadow: 0 12px 30px rgba(37, 46, 60, 0.07); border-radius: 6px; overflow: hidden; }
.cn-area .services-thumb-box__content p { margin-bottom: 10px; }
.cn-area .services-thumb-box__content > a { color: var(--tp-theme-blue); }

/* numbered "must have" list */
.cn-steps { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: st; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cn-steps li { counter-increment: st; background: #fff; border-radius: 6px; padding: 30px 28px 24px 90px; position: relative; }
.cn-steps li:first-child { grid-column: 1 / -1; }
.cn-steps li::before {
    content: counter(st, decimal-leading-zero); position: absolute; left: 26px; top: 26px; font-size: 34px; font-weight: 700;
    color: var(--tp-theme-sky); line-height: 1;
}
.cn-steps h5 { font-size: 19px; margin-bottom: 8px; color: var(--tp-heading-primary); }
.cn-steps p { margin: 0; }
@media (max-width: 767px) { .cn-steps { grid-template-columns: 1fr; } }

/* price / info boxes */
.cn-box { height: calc(100% - 30px); padding: 45px 40px; border-radius: 6px; background: var(--tp-grey-1); }
.cn-box h5 { font-size: 18px; color: var(--tp-heading-primary); }
.cn-box h5 i { color: var(--tp-theme-blue); margin-right: 6px; }
.cn-box--dark { background: var(--tp-theme-primary); color: rgba(255, 255, 255, .85); }
.cn-box--dark p { color: rgba(255, 255, 255, .82); }
.cn-box--dark h4, .cn-box--dark strong { color: #fff; }
.cn-box--dark .cn-more { color: #fff; }

/* service details */
.cn-service__img img { width: 100%; max-height: 430px; object-fit: cover; border-radius: 6px; }
.cn-sidebar { position: sticky; top: 120px; }
.cn-sidebar .sidebar__widget-content ul { list-style: none; padding: 0; }
.cn-sidebar .sidebar__widget-content ul li a { font-size: 13px; padding: 13px 18px; gap: 12px; line-height: 1.4; }
.cn-sidebar .sidebar__widget-content ul li a:hover,
.cn-sidebar .sidebar__widget-content ul li a.active { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); color: #fff; }
.cn-help { padding: 45px 35px; border-radius: 6px; color: rgba(255, 255, 255, .8); position: relative; overflow: hidden; }
.cn-help h4 { color: #fff; font-size: 24px; }
.cn-help p { color: rgba(255, 255, 255, .75); }
.cn-help__icon { position: absolute; right: -10px; bottom: -25px; font-size: 140px; opacity: .07; color: #fff; }
.cn-help__line { display: block; color: #fff; font-weight: 600; margin-top: 8px; }
.cn-help__line i { width: 22px; color: var(--tp-theme-sky); }
.cn-help__line:hover { color: var(--tp-theme-sky); }
@media (max-width: 991px) { .cn-sidebar { position: static; } }