/* ==========================================================
   DULSON GROUP – ZAHARA PARFÜM
   Полный CSS для Jimdo Creator
   Полностью заменяет предыдущий CSS
   ========================================================== */

:root {
    --page-bg: #000000;
    --header-bg: #070708;
    --panel-bg: #ffffff;
    --panel-text: #111111;
    --panel-muted: #666666;
    --panel-border: #d8d8dc;
    --active-bg: #3a3a40;
    --active-text: #ffffff;
    --hover-bg: #eeeeef;
    --ticker-1: #050505;
    --ticker-2: #111111;
    --dark-border: #2a2a2e;
    --radius: 14px;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    --max-width: 1440px;
}

/* ==========================================================
   1. БАЗОВЫЕ ПРАВИЛА
   ========================================================== */

html {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--page-bg) !important;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--page-bg) !important;
    color: var(--panel-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
iframe,
video,
object,
embed,
table {
    max-width: 100%;
}

img {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

html,
body,
#container,
#header,
#navigation,
#content,
#footer {
    background-image: none !important;
}

/* ==========================================================
   2. ОСНОВНОЙ МАКЕТ
   ========================================================== */

#container {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    grid-template-areas:
        "ticker1 ticker1"
        "ticker2 ticker2"
        "header header"
        "navigation content"
        "footer footer";
    width: 100%;
    max-width: var(--max-width);
    min-width: 0;
    margin: 0 auto;
    background: var(--page-bg) !important;
}

/* ==========================================================
   3. ПЕРВАЯ БЕГУЩАЯ СТРОКА
   ========================================================== */

.dulson-parfum-ticker {
    grid-area: ticker1;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    overflow: hidden;
    background: var(--ticker-1);
    border-bottom: 1px solid var(--dark-border);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
}

.dulson-parfum-ticker-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: max-content;
    height: 40px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    will-change: transform;
    animation: dulsonTicker 22s linear infinite;
    -webkit-animation: dulsonTicker 22s linear infinite;
}

.dulson-parfum-ticker-track a,
.dulson-parfum-ticker-track a:link,
.dulson-parfum-ticker-track a:visited {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
    color: #ffffff !important;
    font-size: inherit;
    font-weight: 700;
    line-height: 40px;
    text-decoration: none !important;
}

.dulson-parfum-ticker-track span {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 6px;
    color: #ffffff;
    line-height: 40px;
}

.dulson-parfum-ticker-track a:hover,
.dulson-parfum-ticker-track a:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.dulson-parfum-ticker:hover .dulson-parfum-ticker-track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes dulsonTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes dulsonTicker {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
    }
}

/* ==========================================================
   4. ВТОРАЯ БЕГУЩАЯ СТРОКА
   ========================================================== */

.dulson-service-ticker {
    grid-area: ticker2;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    overflow: hidden;
    background: var(--ticker-2);
    border-bottom: 1px solid var(--dark-border);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 38px;
}

.dulson-service-ticker-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: max-content;
    height: 38px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    will-change: transform;
    animation: dulsonServiceTicker 28s linear infinite;
    -webkit-animation: dulsonServiceTicker 28s linear infinite;
}

.dulson-service-ticker-track span {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
    color: #ffffff;
    line-height: 38px;
}

.dulson-service-ticker-track span[aria-hidden="true"] {
    padding-left: 6px;
    padding-right: 6px;
}

.dulson-service-ticker:hover .dulson-service-ticker-track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes dulsonServiceTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes dulsonServiceTicker {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
    }
}

/* ==========================================================
   5. ШАПКА DULSON GROUP
   ========================================================== */

#header {
    grid-area: header;
    position: relative;
    width: auto;
    min-width: 0;
    margin: 14px 18px 0;
    padding: 0;
    overflow: visible;
    background: var(--header-bg) !important;
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dulson-group-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 16px 90px;
    background: var(--header-bg);
    border-radius: var(--radius);
    text-align: center;
}

.dulson-group-name {
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: center;
    text-transform: none;
}

/* ==========================================================
   6. КОРЗИНА JIMDO – ВСЕГДА ВИДИМА
   ========================================================== */

/* Часто используемые классы/ID старого Jimdo Creator */
#header .j-cart,
#header .j-shop-cart,
#header .cc-shop-cart,
#header .cc-shop-basket,
#header #shop-cart,
#header #shopping-cart,
#header [class*="cart"],
#header [class*="basket"],
.j-cart,
.j-shop-cart,
.cc-shop-cart,
.cc-shop-basket,
#shop-cart,
#shopping-cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    z-index: 9999 !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 170px !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
}

/* Вид иконки/кнопки корзины */
#header .j-cart a,
#header .j-shop-cart a,
#header .cc-shop-cart a,
#header .cc-shop-basket a,
#header #shop-cart a,
#header #shopping-cart a,
.j-cart a,
.j-shop-cart a,
.cc-shop-cart a,
.cc-shop-basket a,
#shop-cart a,
#shopping-cart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    background: #2d2d32 !important;
    border: 1px solid #4b4b52 !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

/* ==========================================================
   7. НАВИГАЦИЯ – БЕЛЫЙ БЛОК
   ========================================================== */

#navigation {
    grid-area: navigation;
    min-width: 0;
    margin: 14px 8px 18px 18px;
    padding: 16px;
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--panel-text) !important;
}

#sidebar {
    min-width: 0;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-border);
}

ul.mainNav1,
ul.mainNav2,
ul.mainNav3,
#navigation ul {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li,
#navigation li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

ul.mainNav1 li a,
ul.mainNav2 li a,
ul.mainNav3 li a,
#navigation li a,
#navigation a,
#navigation a:link,
#navigation a:visited {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 13px;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--panel-text) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none !important;
    overflow-wrap: anywhere;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

ul.mainNav2 li a {
    padding-left: 22px;
    font-size: 15px;
}

ul.mainNav3 li a {
    padding-left: 30px;
    font-size: 14px;
}

ul.mainNav1 li a:hover,
ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover,
#navigation li a:hover,
#navigation a:hover {
    background: var(--hover-bg) !important;
    border-color: #d2d2d6 !important;
    color: #000000 !important;
}

/* Активная страница: не слишком тёмная */
#navigation a.current,
#navigation li.current > a,
ul.mainNav1 a.current,
ul.mainNav2 a.current,
ul.mainNav3 a.current {
    background: var(--active-bg) !important;
    border-color: var(--active-bg) !important;
    color: var(--active-text) !important;
    font-weight: 700 !important;
}

/* Jimdo иногда красит вложенный span отдельно */
#navigation a.current span,
#navigation li.current > a span,
ul.mainNav1 a.current span,
ul.mainNav2 a.current span,
ul.mainNav3 a.current span {
    color: #ffffff !important;
}

/* Весь прочий текст навигации */
#navigation,
#navigation div,
#navigation span,
#navigation p,
#navigation li,
#navigation strong,
#navigation b {
    color: var(--panel-text);
}

/* ==========================================================
   8. ОСНОВНОЙ КОНТЕНТ – БЕЛЫЙ БЛОК
   ========================================================== */

#content {
    grid-area: content;
    min-width: 0;
    margin: 14px 18px 18px 8px;
    padding: clamp(20px, 3vw, 36px);
    overflow: hidden;
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--panel-text) !important;
}

#content > *:first-child {
    margin-top: 0;
}

#content > *:last-child {
    margin-bottom: 0;
}

#content,
#content div,
#content span,
#content p,
#content li,
#content ul,
#content ol,
#content strong,
#content b,
#content em,
#content small,
#content label,
#content blockquote,
#content dt,
#content dd,
#content table,
#content th,
#content td,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color: var(--panel-text) !important;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

#content h1 {
    font-size: clamp(28px, 4vw, 46px);
}

#content h2 {
    font-size: clamp(24px, 3vw, 36px);
}

#content h3 {
    font-size: clamp(20px, 2.4vw, 28px);
}

#content p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
}

#content a,
#content a:link,
#content a:visited,
#content h1 a,
#content h2 a,
#content h3 a,
#content h4 a,
#content h5 a,
#content h6 a {
    color: var(--panel-text) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--panel-text) !important;
    text-underline-offset: 4px;
}

#content a:hover,
#content a:focus {
    color: #000000 !important;
    text-decoration: none !important;
}

#content hr {
    height: 1px;
    margin: 26px 0;
    border: 0;
    background: var(--panel-border);
}

/* ==========================================================
   9. ФОРМЫ
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #ffffff !important;
    border: 1px solid #cfd1d6 !important;
    border-radius: 10px;
    color: #111111 !important;
    font-size: 16px;
    line-height: 1.4;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #74747c;
    opacity: 1;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.j-calltoaction-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    background: #2f2f34 !important;
    border: 1px solid #2f2f34 !important;
    border-radius: 10px;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.j-calltoaction-link:hover {
    background: #48484f !important;
    border-color: #48484f !important;
    color: #ffffff !important;
}

/* ==========================================================
   10. CHECKOUT
   ========================================================== */

#content .cc-checkout,
#content .j-checkout,
#content [class*="checkout"] {
    background: #ffffff !important;
    color: #222222 !important;
}

#content .cc-checkout *,
#content .j-checkout *,
#content [class*="checkout"] * {
    color: #222222 !important;
}

#content .cc-checkout input,
#content .cc-checkout select,
#content .cc-checkout textarea,
#content .j-checkout input,
#content .j-checkout select,
#content .j-checkout textarea,
#content [class*="checkout"] input,
#content [class*="checkout"] select,
#content [class*="checkout"] textarea {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #cfd3da !important;
}

#content .cc-checkout a,
#content .j-checkout a,
#content [class*="checkout"] a {
    color: #222222 !important;
}

/* ==========================================================
   11. FOOTER
   ========================================================== */

#footer {
    grid-area: footer;
    min-width: 0;
    height: auto;
    margin: 0 18px 18px;
    padding: 0;
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--panel-text) !important;
}

#footer .gutter {
    height: auto;
    min-height: 64px;
    padding: 20px;
    background: var(--panel-bg) !important;
    color: var(--panel-text) !important;
    text-align: center;
}

#footer,
#footer div,
#footer span,
#footer p,
#footer li,
#footer a,
#footer a:link,
#footer a:visited {
    color: var(--panel-text) !important;
}

/* ==========================================================
   12. TABLET
   ========================================================== */

@media screen and (max-width: 960px) {
    #container {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    #header {
        margin: 12px 12px 0;
    }

    #navigation {
        margin: 12px 6px 14px 12px;
    }

    #content {
        margin: 12px 12px 14px 6px;
    }

    #footer {
        margin: 0 12px 12px;
    }
}

/* ==========================================================
   13. MOBILE
   ========================================================== */

@media screen and (max-width: 700px) {
    #container {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .dulson-parfum-ticker {
        height: 36px;
        font-size: 12px;
        line-height: 36px;
    }

    .dulson-parfum-ticker-track {
        height: 36px;
        animation-duration: 25s;
        -webkit-animation-duration: 25s;
    }

    .dulson-parfum-ticker-track a,
    .dulson-parfum-ticker-track a:link,
    .dulson-parfum-ticker-track a:visited,
    .dulson-parfum-ticker-track span {
        line-height: 36px;
    }

    .dulson-service-ticker {
        height: 34px;
        font-size: 12px;
        line-height: 34px;
    }

    .dulson-service-ticker-track {
        height: 34px;
        animation-duration: 32s;
        -webkit-animation-duration: 32s;
    }

    .dulson-service-ticker-track span {
        line-height: 34px;
    }

    #header {
        margin: 8px 8px 0;
        border-radius: 11px;
    }

    .dulson-group-hero {
        min-height: 70px;
        padding: 15px 74px 15px 12px;
    }

    .dulson-group-name {
        font-size: 15px !important;
        letter-spacing: 1.2px;
    }

    #header .j-cart,
    #header .j-shop-cart,
    #header .cc-shop-cart,
    #header .cc-shop-basket,
    #header #shop-cart,
    #header #shopping-cart,
    #header [class*="cart"],
    #header [class*="basket"],
    .j-cart,
    .j-shop-cart,
    .cc-shop-cart,
    .cc-shop-basket,
    #shop-cart,
    #shopping-cart {
        right: 8px !important;
        max-width: 66px !important;
    }

    #navigation {
        width: auto;
        margin: 8px;
        padding: 11px;
        border-radius: 11px;
    }

    #content {
        width: auto;
        margin: 8px;
        padding: 18px 14px;
        border-radius: 11px;
    }

    #footer {
        width: auto;
        margin: 8px;
        border-radius: 11px;
    }

    #footer .gutter {
        padding: 17px 13px;
    }

    ul.mainNav1 li a,
    ul.mainNav2 li a,
    ul.mainNav3 li a,
    #navigation li a {
        padding-top: 11px;
        padding-bottom: 11px;
        font-size: 15px;
    }
}

/* ==========================================================
   14. МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ========================================================== */

@media screen and (max-width: 420px) {
    .dulson-group-name {
        font-size: 13px !important;
        letter-spacing: 0.8px;
    }

    #navigation,
    #content,
    #footer {
        margin-left: 7px;
        margin-right: 7px;
    }
}

/* ==========================================================
   15. УМЕНЬШЕНИЕ АНИМАЦИИ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .dulson-parfum-ticker,
    .dulson-service-ticker {
        overflow-x: auto;
    }

    .dulson-parfum-ticker-track,
    .dulson-service-ticker-track {
        position: static;
        animation: none !important;
        -webkit-animation: none !important;
    }
}