:root {
  /* 1. Базові кольори (м'які та глибокі) */
  --bg-main: #0a0a0a;          /* Глибокий чорний фон (оксамит) */
  --text-main: #f5f5f5;        /* М'який білий текст (не сліпить) */
  --text-dark: #121212;        /* Темний текст для світлих панелей (шапка) */
  --text-muted: #a3a3a3;       /* Приглушений другорядний текст */

  /* 2. Ефект матового скла (Glassmorphism) */
  --glass-bg-light: rgba(245, 245, 245, 0.3);  /* Легка напівпрозорість */
  --glass-bg-strong: rgba(245, 245, 245, 0.35); /* Більш щільна напівпрозорість */
  
  /* 3. Затемнення (для відео та тіней) */
  --overlay-dark: rgba(10, 10, 10, 0.5);
  --overlay-dark-heavy: rgba(10, 10, 10, 0.85);

  /* 4. Рамки та розділювачі */
  --border-subtle: rgba(245, 245, 245, 0.15);

  /* 5. Акценти */
  --accent-main: #8C3B3B;       /* Ваш фірмовий приглушений червоний */
  --accent-dark: #5B1A1A;       /* Глибокий бордовий (замість блакитного) */
	
}

@font-face {
  font-family: 'CocoGothicSmallCaps';
  src: url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Light.woff2') format('woff2'),
       url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

  @font-face {
    font-family: 'CocoGothicSmallCaps';
    src: url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Regular.woff2') format('woff2'),
         url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'CocoGothicSmallCaps';
    src: url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Bold.woff2') format('woff2'),
         url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'CocoGothicSmallCaps';
    src: url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Bold.woff2') format('woff2'),
         url('../fonts/CocoGothicSmallCaps/CocoGothicSmallCaps-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  vertical-align: baseline; }

html, footer, header {
  font-family: "CocoGothicSmallCaps";
  font-size: 18px;
  color: var(--text-dark);
  font-weight: 300; }

body {
    background-color: var(--bg-main); 
    color: var(--text-main);
}
a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:hover {
    text-decoration: none;
    color: inherit; }
.woocommerce-product-gallery__image img {
  cursor: pointer !important; }

img {
  max-width: 100%;
  height: auto; }

.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
  margin-bottom: 15px; }

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
  margin-bottom: 15px; }

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px; }

@media only screen and (max-width: 550px) {
  .alignleft, .alignright, .aligncenter {
    float: none;
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 1200px) {
  .container {
    max-width: 100%; } }

@media screen and (max-width: 1200px) {
  .container {
    max-width: 100%; } }

#page {
  padding-top: 0px; }

.woocommerce-breadcrumb {
    display: none;
}
/* HEADER  */
/* === Основний хедер === */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	padding: 10px 0;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
}

.site-header:hover {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-color: var(--glass-bg-light) !important;
    border-bottom: 1px solid var(--border-subtle);
}

/* === Контейнер сітки === */
.site-header-row {
        display: grid !important;
        grid-template-columns: 1fr 150px 1fr !important; 
        align-items: center;
        width: 100%;
        max-width: 1640px;
        padding: 0 50px;
        margin: 0 auto;
        column-gap: 60px !important; 
    }

/* === Ліве та праве меню === */
.site-header-left-menu {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    .site-header-right-menu {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
.site-header-left-menu ul,
.site-header-right-menu ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header-left-menu a,
.site-header-right-menu a {
	text-decoration: none;
	color: var(--bg-main);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

/* === Логотип по центру === */
.site-header-logo {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

.site-header-logo img {
	height: 70px;
	width: auto;
	flex-shrink: 0;
    object-fit: contain;
}

/* --- Меню --- */
.site-header-right-menu ul,
.site-header-left-menu ul{
	display: flex;
	gap: 10px;
}

/* === Пошук + мови === */
.header-right-items {
	white-space: nowrap;
	font-size: 10px;
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	font-weight: 500;
}

/* === Пошук === */
.header-search-container {
	display: flex;
	align-items: center;
	position: relative;
}

.search-form {
	display: flex;
	align-items: center;
	position: relative;
}

.search-field {
	width: 0;
	opacity: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	color: var(--text-dark);
	transition: all 0.3s ease;
}

/* 🔹 ОБ'ЄДНАНІ СТАНИ */
.search-form:hover .search-field,
.search-form.is-active .search-field {
	font-family: 'CocoGothicSmallCaps';
	font-size: 14px;
	width: 130px;
	opacity: 1;
	padding: 5px 10px;
	background-color: var(--glass-bg-strong);
	border: 1px solid var(--border-subtle);
	border-radius: 4px;
	margin-left: 8px;
}

.search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg stroke='black' fill='black' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
    background-size: 12px 12px;
    cursor: pointer;
}

.search-toggle {
	background: none !important;
	border: none;
	box-shadow: none;
}

/* 🔹 СТИЛІ ПІДКАЗОК */
.search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--glass-bg-strong);
	border: 1px solid var(--border-subtle);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	backdrop-filter: blur(8px);
	transition: all 0.3s ease;
}

.suggestion-item {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-dark);
	font-weight: 500;
	cursor: pointer;
}

.suggestion-item:hover {
	background: rgba(0, 0, 0, 0.05);
}

.suggestion-item a {
    color: inherit;
    text-decoration: none;
    display: block; 
}

.header-wishlist-icon {
    margin: 0 10px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-dark);
}

.header-wishlist-icon svg {
    display: block;
}

/* === Мовний перемикач === */
.language-switcher {
	display: flex;
	gap: 5px;
	font-size: 12px;
	white-space: nowrap;
}

.language-switcher a {
	text-decoration: none;
	color: var(--text-dark);
}

.language-switcher a:hover {
	text-decoration: underline;
}

/* --- Основний стиль меню --- */
#left-menu, #right-menu {
        display: flex !important;
        gap: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #left-menu > li, #right-menu > li {
        margin: 0 !important;
        white-space: nowrap;
    }
#left-menu > li > a,
#right-menu > li > a {
	position: relative;
	display: inline-block;
	padding-bottom: 5px;
	text-decoration: none;
}

#left-menu > li > a::after,
#right-menu > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: var(--text-dark);
	transition: width 0.3s ease;
}

#left-menu > li > a:hover::after,
#right-menu > li > a:hover::after {
	width: 100%;
}

/* --- Підменю --- */
#left-menu ul.sub-menu,
#right-menu ul.sub-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 10px;
	background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 4px;
	width: max-content;
	min-width: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease;
	padding: 5px 0;
	z-index: 99;
}

#left-menu ul.sub-menu li,
#right-menu ul.sub-menu li {
	margin: 0;
	padding: 0;
}

#left-menu li.menu-item-has-children:hover > ul.sub-menu,
#right-menu li.menu-item-has-children:hover > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#left-menu li.menu-item-has-children,
#right-menu li.menu-item-has-children {
	position: relative;
}

#left-menu ul.sub-menu li a,
#right-menu ul.sub-menu li a {
	display: block;
	padding: 10px 20px;
	color: var(--text-dark);
	transition: background-color 0.3s ease;
}

#left-menu li.menu-item-has-children > a::after,
#right-menu li.menu-item-has-children > a::after {
	display: none;
}

/* За замовчуванням: десктопне видно, мобільне сховане */
.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

.mobile-lang-switcher {
    display: none; 
}
/* === ПЛАНШЕТНА ВЕРСІЯ === */
@media (max-width: 1640px) and (min-width: 1100px) {
    .site-header-row {
        grid-template-columns: 1fr 100px 1fr !important;
        padding: 0 30px !important;
        column-gap: 20px !important; 
    }
    .site-header-logo img {
        height: 50px !important; 
    }
    #left-menu, #right-menu {
        gap: 30px !important; 
    }
    .site-header-left-menu a,
    .site-header-right-menu a {
        font-size: 10px !important; 
        letter-spacing: 0.5px;
    }
    #left-menu ul.sub-menu li a,
    #right-menu ul.sub-menu li a {
        padding: 8px 15px !important;
        font-size: 9px !important; 
    }
    .header-right-items {
        right: 30px !important;
        gap: 8px !important;
    }
    .language-switcher {
        font-size: 10px !important;
    }
    .search-form:hover .search-field {
        width: 100px !important; 
        font-size: 12px !important;
    }
}
@media (max-width: 1099px) {

    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: flex;
        width: 100%;
    }

    .site-header {
       position: fixed;
        height: 60px;
        width: 100%;
        z-index: 1000;
        
        background: var(--glass-bg-light);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
.site-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--glass-bg-light);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: -1; 
    }
.mobile-lang-switcher {
  		right: 50px;
        font-size: 10px; 
}

    .mobile-left-lang {
        position: absolute;
        left: 20px; 
        top: 50%;
        transform: translateY(-50%); 
        z-index: 1100;
        font-size: 15px;
        color: var(--text-dark); 
        letter-spacing: 1px; 
        font-weight: 300; 
    }

    .mobile-left-lang a {
        text-decoration: none;
        color: var(--text-dark); 
        text-transform: uppercase;
        transition: opacity 0.3s;
    }
    
.mobile-menu-grid {
    display: flex !important;
    justify-content: center !important; 
    gap: 80px !important; 
    padding: 40px 20px !important;
    align-items: flex-start !important;
}

.mobile-col-left, 
.mobile-col-right {
   width: auto !important;
    display: flex !important;
    flex-direction: column !important; 
    min-width: 100px;
}

.mobile-col-right {
    text-align: left; 
}

.mobile-ul {
    display: block !important; 
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-ul li {
	display: block !important;
    margin-bottom: 15px; 
}

.mobile-ul li a {
    text-decoration: none;
    color: var(--text-dark); 
    font-size: 16px; 
    display: block;
    font-weight: 300; 
}
.mobile-ul li ul.sub-menu {
    margin-top: 5px !important; 
    padding-left: 15px !important;
margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.mobile-ul li ul.sub-menu li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background-color: var(--text-dark) !important;
    border-radius: 50% !important;
}
	/* --- Підменю з цяточкою --- */
.mobile-menu ul li ul.sub-menu {
    padding-left: 15px !important; 
    padding-top: 10px !important;
    gap: 10px !important;
}

.mobile-menu ul li ul.sub-menu li {
    position: relative;
    padding-left: 15px !important; 
    margin-bottom: 5px !important;
}

/* Сама цяточка */
.mobile-menu ul li ul.sub-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--text-dark); 
    border-radius: 50%;
    opacity: 0.6;
}

.mobile-menu ul li ul.sub-menu li a {
    font-size: 14px !important; 
    font-weight: 300;
}
    .mobile-logo {
        position: absolute;
        top: 10px; 
        left: 50%;
        transform: translateX(-50%);
    }

    .mobile-logo img {
        height: 40px;
        width: auto;
    }

    .burger-menu {
        position: absolute;
        top: 15px; 
        right: 15px;
        width: 25px;
        height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 1100;
    }

    .burger-menu span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--text-dark);
        border-radius: 2px;
    }
/* Коли меню відкрите */
.burger-toggle-active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.burger-toggle-active span:nth-child(2) {
    opacity: 0; 
}

.burger-toggle-active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}
    .language-switcher {
       display:none;
		font-weight: 500;
    }

    .mobile-menu {
       position: absolute; 
        top: 60px; 
        left: 0;
        width: 100%;
        background-color: var(--glass-bg-light) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

.mobile-menu.menu-show {
   max-height: 100vh;
        transform: translateZ(0);
}

    .mobile-menu ul {
        list-style: none;
        padding: 20px;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .mobile-menu a {
        text-decoration: none;
        color: var(--text-dark);
        font-size: 16px;
    }
	.header-search-container.desktop-only {
        display: none;
    }
    .mobile-menu .header-search-container {
        display: block; 
        margin: 15px 0; 
        padding: 0 20px; 
    }
    .mobile-menu .header-search-container .search-form {
        display: flex; 
        width: 100%;
    }
    .mobile-menu .header-search-container .search-toggle {
        font-size: 20px; 
        margin-right: 10px; 
    }
    .mobile-menu .header-search-container .search-toggle svg {
        width: 20px;
        height: 20px;
    }

    .mobile-menu .header-search-container .search-field {
        width: 100%; 
        opacity: 1;
        visibility: visible;
        margin-left: 0;
    }
    .mobile-menu .header-search-container .search-submit {
        display: none; 
    }
   /* --- 1. ЗАТЕМНЕННЯ ФОНУ ХЕДЕРА --- */
    .site-header:has(.search-field:focus) {
        background-color: var(--overlay-dark) !important;
        backdrop-filter: blur(5px); 
        transition: background-color 0.3s ease;
    }
}

/* END HEADER  */
/* --- Футер --- */
.site-footer {
    background-color: var(--bg-main);
    color: var(--text-main);
    padding: 30px 5%;
    font-family: inherit;
}

.footer-widgets-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 180px; 
    margin-bottom: 40px;
    align-items: flex-start;
}

.footer-widget-area {
    display: flex;
    flex-direction: column;
}

.footer-widget-area.first-column {
    align-items: flex-end;
    text-align: right;
}

.footer-widget-area.second-column {
    align-items: center;
    text-align: center;
}

.footer-widget-area.third-column {
    align-items: flex-start;
    text-align: left;
}

.footer-widget-area h4.widget-title {
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.footer-logo {
    max-width: 120px;
    height: auto;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li {
    list-style-type: none !important;
    margin-bottom: 8px;
}
.footer-menu a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s;
}
.footer-menu a:hover {
    color: var(--text-muted);
}

.work-time-text {
    line-height: 1.4;
    color: var(--text-muted);
    font-size: 0.95em;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: var(--text-main);
    text-decoration: none;
    transition: opacity 0.3s;
}
.social-icons a:hover {
    opacity: 0.7;
}
.social-svg-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.site-footer-bottom {
    border-top: 1px solid var(--border-subtle);
    padding-top: 30px;
}
.copyright {
    text-align: center;
    opacity: 0.6;
    font-size: 0.9em;
    margin: 0;
}
@media (max-width: 768px) {
    .footer-widgets-container {
        display: grid;
        grid-template-columns: auto 1fr; 
        grid-template-rows: auto auto; 
        column-gap: 20px; 
        row-gap: 15px; 
        padding-bottom: 20px;
        align-items: center; 
    }

    .footer-widget-area.first-column {
        grid-column: 1;
        grid-row: 1 / span 2; 
        align-self: center;   
        justify-self: start;
    }

    .footer-logo {
        max-width: 100px; 
        width: 100%;
        height: auto;
        display: block;
    }

    .footer-widget-area.second-column {
        grid-column: 2;
        grid-row: 1; 
        align-self: end; 
        text-align: right;
        align-items: flex-end;
        margin-bottom: 0; 
    }

    .footer-widget-area.third-column {
        grid-column: 2;
        grid-row: 2; 
        align-self: start; 
        text-align: right;
        align-items: flex-end;
        margin-top: 0; 
    }

    .footer-widget-area h4.widget-title {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .footer-menu a, 
    .work-time-text {
        font-size: 12px;
        line-height: 1.4;
        color: var(--text-main);
    }
    
    .footer-menu li {
        margin-bottom: 2px; 
    }

    .social-icons {
        justify-content: flex-end;
        margin-top: 8px;
    }
    .social-svg-icon {
        width: 18px;
        height: 18px;
    }

    .site-footer {
        padding: 20px 15px;
    }
}
/* HOMEPAGE */

section {
    margin-bottom: 20px;
}

.hero-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-video .video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-video .video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

.new-collection {
    padding: 0;
    margin: 0 0 20px 0; 
    width: 100%;
}

.collection-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; 
    padding: 0px; 
}

.collection-header-wrapper h2 {
    margin: 0px;
	margin-left: 20px;
    font-size: 28px; 
    font-weight: 300;
}

.collection-header-wrapper .view-all {
    display: inline-block;
	margin-right:20px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-main); 
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.collection-header-wrapper .view-all:hover {
    background-color: var(--glass-bg-strong);
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
	 width: 100%;
}

.gallery-slider {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
	line-height: 0; 
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}

.product {
    flex: 0 0 33.3333%;
    box-sizing: border-box;
    padding-right: 0px;
}

.product:last-child {
     padding-right: 0;
}

.product img {
    width: 100%;
    height: auto; 
    display: block;
    object-fit: cover; 
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5); /* Білий з напівпрозорістю для темного фону */
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    transition: color 0.3s ease;
}

.slider-btn:hover {
    color: var(--text-main);
}

.slider-btn.prev {
    left: 0px;
    margin-right: 10px;
}

.slider-btn.next {
    right: 0px;
    margin-left: 10px;
}

/* --- УНІВЕРСАЛЬНІ СТИЛІ ДЛЯ ВІДЕО --- */
.product-hover-video-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    pointer-events: none; 
	-webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.product-hover-video-wrapper video,
.product-hover-video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* --- ГОЛОВНА СТОРІНКА (Карусель) --- */
.gallery-slider .product {
    position: relative; 
}
.gallery-slider .product:has(.product-hover-video-wrapper):hover img {
    opacity: 0;
}
.gallery-slider .product:has(.product-hover-video-wrapper):hover .product-hover-video-wrapper {
    opacity: 1;
}

/* --- АРХІВ (Колекції) --- */
.dress-item:has(.product-hover-video-wrapper):hover .product-hover-video-wrapper {
    opacity: 1;
}

.dress-item:not(:has(.product-hover-video-wrapper)):hover .dress-img {
    transform: scale(1.02); 
}

.hover-shadow { z-index: 6; }

/* Адаптивність */
@media (max-width: 1024px) {
    .product {
        flex: 0 0 calc(50% - 20px); 
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
.hero-video,
    .prodaction-video {
        height: auto; 
        margin-bottom: 20; 
        padding: 0; 
    }
    .hero-video .video-wrapper,
    .prodaction-video .video-wrapper {
        position: static; 
        transform: none; 
        width: 100%; 
        height: auto; 
        min-width: 0; 
        min-height: 0; 
    }

    .hero-video .video-wrapper video,
    .prodaction-video .video-wrapper video {
        position: static; 
        transform: none; 
        width: 100%; 
        height: auto; 
        min-width: 0; 
        min-height: 0; 
        object-fit: contain; 
    }


    .product {
        flex: 0 0 100%; 
        margin-right: 0;
    }

    .collection-header-wrapper {
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center; 
        padding: 0 15px; 
        margin-bottom: 20px;
    }

    .collection-header-wrapper .view-all {
       margin-top: 0; 
        margin-right: 0;
        font-size: 14px;
        white-space: nowrap; 
    }

    .slider-btn {
        font-size: 1rem;
    }

    .collection-header-wrapper h2 {
        font-size: 20px; 
    }

    .collection-header-wrapper .view-all {
        font-size: 14px; 
        padding: 8px 15px; 
    }
}

.product {
    text-align: center; 
}

.product img {
    max-height: none; 
    object-fit: cover; 
    margin: 0; 
}

.slider-wrapper {
    display: flex; 
    align-items: center; 
}

.slider-btn {
    font-size: 2rem;
    color: var(--text-main); 
    z-index: 2;
    padding: 10px;
}

.slider-btn.prev {
    margin-right: -40px; 
}

.slider-btn.next {
    margin-left: -40px; 
}

.prodaction-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.prodaction-video .video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prodaction-video .video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* end HOMEPAGE */


/* Collections */

.dress-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.dress-item {
  flex: 0 0 calc((100% - 6px) / 3); 
  max-width: calc((100% - 6px) / 3);
  box-sizing: border-box;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}

.dress-item .product-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5; 
}

@media (max-width: 1024px) {
  .dress-item {
    flex: 0 0 calc((100% - 3px) / 2);
    max-width: calc((100% - 3px) / 2);
  }
}

@media (max-width: 600px) {
  .dress-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


.dress-img {
  background-size: cover;
  background-position: center;
  aspect-ratio: 2/3;
  transition: transform 0.3s ease;
  position: relative;
}
.product-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5; 
}

.dress-item:hover .dress-img {
  transform: scale(1.02);
}

.hover-shadow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, var(--overlay-dark-heavy), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 15px;
	z-index: 6;
}

.dress-item:hover .hover-shadow {
  opacity: 1;
}

.dress-title {
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.dress-item:not(:has(.product-hover-video)):hover .dress-img {
    transform: scale(1.02); 
}

.dress-item:has(.product-hover-video):hover .dress-img {
    opacity: 0; 
}
.dress-item:has(.product-hover-video):hover .product-hover-video {
    opacity: 1; 
}
@media (max-width: 768px) {
    .hover-shadow {
        opacity: 1 !important; 
        transition: none !important; 
    }

    .dress-img {
        transition: none !important; 
    }
}


/* END Collections */

/* product*/
.product-flex-container {
    display: flex; 
    align-items: flex-start;
    margin: 0 auto !important;
	position: relative;
}

.product-gallery-left {
    width: 47% !important;
    flex-shrink: 0;
    margin: 0 auto !important; 
}

.product-header {
    display: inline-flex; 
    align-items: center;   
    gap: 15px;             
    margin-bottom: 20px;   
}

.wishlist-icon {
    cursor: pointer;
}

.wishlist-icon .heart-icon {
    width: 30px; 
    height: 30px;
    color: var(--text-main); 
    transition: all 0.3s ease;
}

.wishlist-icon.active .heart-icon {
    fill: red; 
    color: red; 
}

.custom-gallery {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.video-js.vjs-has-started .vjs-poster {
    display: none !important;
}

.single-product .wp-post-image {
	display: none !important;
}

.custom-gallery .gallery-item {
	margin: 0; 
}

.custom-gallery .gallery-item img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display:block;
}
.gallery-item.video-item iframe {
	 width: 100% ;
    height: auto ;
    aspect-ratio: 16 / 9;
}
.video-js, .video-js iframe, .video-js .vjs-tech {
    max-width: 100% !important;

}
.product-info-right {
	width: 53%;
    padding: 2rem 4rem; 
    
    position: sticky;
    top: 60px;
    min-height: calc(100vh - 100px);
    
    display: flex;
    flex-direction: column;
    justify-content: center; 
    
    align-items: normal; 
    
    overflow: visible !important;
    z-index: 20;
    box-sizing: border-box;
}
.product-info-right p,
.product-info-right > div:not(.product-header):not(.post-navigation) {
    max-width: 650px; 
    width: 100%;
    
    margin-left: auto;
    margin-right: auto;
    
    text-align: center; 
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 15px;
}

.product_title {
	font-size: 1.3rem !important;
	color: var(--text-main);
  font-weight: 300;
}

.post-navigation {
  position: absolute; 
    top: 45vh;
    left: 0;
    right: 0;
    transform: translateY(-50%); 
    
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0 !important; 
    padding: 0 10px; 
    
    z-index: 10; 
    pointer-events: none; 
    box-sizing: border-box;
}

.nav-button {
 text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px; 
    transition: all 0.3s ease;
    
    pointer-events: auto;
}

.nav-button:first-child {
    margin-left: 30px; 
}

.nav-button:last-child {
    margin-right: 30px; 
}
.nav-button:hover {
    transform: scale(1.2);
}

.arrow-left, .arrow-right {
    display: block;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--text-main);
    border-left: 2px solid var(--text-main);
    transition: border-color 0.3s ease;
}

.arrow-left {
    transform: rotate(-45deg);
}

.arrow-right {
    transform: rotate(135deg);
}

.nav-button:hover .arrow-left,
.nav-button:hover .arrow-right {
    border-color: var(--text-muted);
}

@media (max-width: 768px) {
 .product-flex-container { flex-direction: column; }
    .product-gallery-left, .product-info-right { width: 100% !important; }
    .product-info-right {
        width: 100%;
        margin-left: 0;
        padding: 1rem;
        overflow: hidden; 
    }

    .post-navigation {
        position: relative; 
        top: auto;
        transform: none;
        padding: 0;
        margin-top: 20px !important;
        pointer-events: auto;
    }
}

/* ==========================================================================
   Stores Archive - Custom Layout
   ========================================================================== */

.page-header {
    text-align: center; 
    margin-bottom: 50px; 
}

.page-title {
    font-size: 3em; 
    color: var(--text-main); 
    text-transform: uppercase;
	font-weight: normal;
}
/* ==========================================================================
   Стилі для фільтра (прозорий, білий текст)
   ========================================================================== */
body.post-type-archive-stores #primary {
    padding: 80px;
    box-sizing: border-box;
    background-color: var(--bg-main);
    color: var(--text-main);
}
.filter-section {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 50px;
    text-align: center;
}

#store-filter-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

#country-filter-select {
    background-color: transparent;
    color: var(--text-main);
    border: none; 
    border-bottom: 1px solid var(--text-main); 
    padding: 10px 30px 10px 15px; 
    width: auto; 
    min-width: 200px; 
    font-size: 1.2em;
    font-weight: normal;
    font-family: inherit; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

#country-filter-select:focus {
    outline: none;
    border-color: var(--accent-dark); !important 
}

#country-filter-select option {
    background-color: var(--bg-main);
    color: var(--text-main);
}

.country-heading {
    font-size: 2em;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: none; 
    font-weight: normal;
}

.store-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr 1fr;
    gap: 1px;
    border: none;
    margin: 0 20px; 
}

.store-row {
    display: contents;
}

.store-cell {
    padding: 15px 10px;
    border-bottom: none; 
    border-right: none; 
    background-color: transparent; 
    color: var(--text-main); 
}
.store-cell:last-child {
    text-align: center; 
}

.button-link {
    font-weight: bold;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.button-link:hover {
    color: var(--accent-dark); !important 
}

.store-cell {
    text-align: left; 
}

.store-cell:last-child {
    text-align: center; 
}

@media (max-width: 1024px) {
	body.post-type-archive-stores #primary {
        padding: 90px 10px; 
    }
	.page-header h1, h1 {
    font-size: 1.5em; 
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}

.country-heading {
    font-size: 1.2em; 
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--text-main);
    font-weight: normal;
}
    .store-grid {
        display: block; 
    }

    .store-row {
        display: block;
        border-bottom: 1px solid var(--text-main);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .store-cell {
        display: block;
        padding: 5px 0;
        text-align: left;
    }

    .store-row .store-cell:first-child {
        text-align: center;
        font-weight: bold;
        font-size: 1em;
        margin-bottom: 10px;
    }

    .store-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .store-cell {
        width: 48%; 
    }

    .store-row .store-cell:first-child {
        width: 100%; 
        text-align: center;
        font-weight: bold;
        font-size: 1em;
        margin-bottom: 10px;
    }

    .store-row .store-cell:last-child {
        width: 100%; 
        text-align: center;
        margin-top: 15px;
    }
}
/* Стилі для сторінки вішліста */
.wishlist-page .entry-header {
    text-align: center;
	padding-top: 85px;
    margin-bottom: 30px; 
}

.wishlist-page .entry-title {
    font-size: 3em; 
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-main); 
}

.wishlist-page .entry-content.full-width-content {
    max-width: 100%; 
    padding: 0;
}

.wishlist-products-grid {
    display: grid;
   grid-template-columns: repeat(4, 1fr);
    gap: 1px; 
    background-color: var(--bg-main); 
}

.product-card {
    position: relative;
    text-align: left;
    overflow: hidden;
    background-color: var(--bg-main); 
}

.product-card-image {
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}

.product-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
}
.product-card-info {
    padding: 10px;
    background-color: var(--bg-main);
    text-align: center;
}

.product-card-title {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    color: var(--text-main); 
}

.remove-from-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 10;
}

@media (max-width: 1200px) {
    .wishlist-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .wishlist-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .wishlist-products-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Стилізація двоколонкової контактної форми --- */
.contact-page-wrapper {
    margin-top: 60px;
}

.page-template-template-contact .entry-title {
    color: var(--text-main);
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.8em;
	font-weight: 400;
}

.contact-intro {
    font-family: inherit;
    text-align: center;
    color: var(--text-muted);
    max-width: 850px;
    margin: 0 auto 40px auto;
}

.custom-contact-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.custom-contact-form label {
    display: block;
    font-weight: 400;
    margin-bottom: 2px; !important;
    color: var(--text-main:);
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    background-color: #1a1a1a; /* Трохи світліший за чорний фон для інпутів */
    color: var(--text-main);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.custom-contact-form input:focus,
.custom-contact-form textarea:focus {
    border-color: var(--accent-dark); !important 
    outline: none;
}

.form-row {
    margin-bottom: 0;
}

.form-field {
    width: 100%;
    margin-bottom: 15px;
}

.form-row.two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.form-col {
    flex: 1;
    min-width: 250px;
}

.custom-contact-form .wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}

.custom-contact-form .wpcf7-list-item-label {
    color: var(--text-muted);
}

.centered-button {
    text-align: center;
    margin-top: 10px;
}

.custom-contact-form input[type="submit"] {
	display: block; 
    margin-left: auto;  
    margin-right: auto; 

    font-family: inherit;
    padding: 15px 40px;
    font-size: 1.1em;
    font-weight: 400;
    background-color: var(--accent-main);
    color: var(--text-main);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-contact-form input[type="submit"]:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
}
@media (max-width: 768px) {
    .custom-contact-form {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box; 
    }

    .contact-intro,
    .page-template-template-contact .entry-title {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .page-template-template-contact .entry-title {
        font-size: 2em; 
    }

    .form-row.two-columns {
        gap: 15px; 
    }
    
    .form-col {
        min-width: 100%; 
    }
}

.hover-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    pointer-events: none; 
}

.hover-video-container video,
.hover-video-container iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
    display: block;
}

.hover-video-visible .hover-video-container {
    opacity: 1;
}

/*_____________________*/
/* === Контейнери === */
.events-list {
    width: 100%;
    display: block;
}

.events-container {
    max-width: 1000px;
    margin: 100px auto;
    padding: 0 20px;
}

/* === Заголовок сторінки === */
.events-header {
    text-align: center;
    margin-bottom: 80px;
}

.events-header h1 {
    color: var(--text-main) !important;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.events-subtitle {
    color: var(--text-main) !important;
    opacity: 0.8;
}

/* === Картка події (Рядок) === */
.event-row {
    display: -webkit-box;      
    display: -webkit-flex;     
    display: flex;
    
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center; 
    
    padding: 40px 30px;
    border-bottom: 1px solid var(--border-subtle);
    background-color: transparent !important; 
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.event-row:hover {
    padding-left: 45px; 
    background-color: var(--glass-bg-light) !important; 
}

.event-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0; 
}

.event-date {
    font-size: 0.9rem;
    color: var(--text-muted) !important; 
    text-transform: uppercase;
    display: block;
}

.event-title {
    color: var(--text-main) !important; 
    font-size: 2rem;
    margin: 10px 0;
}

.event-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted) !important;
    margin: 20px 0;
    max-width: 700px;
}
.event-action {
    margin-left: 30px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0; 
}
.event-city {
    color: var(--text-muted) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-event {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--text-main);
    color: var(--text-main);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.event-row:hover .btn-event {
    color: var(--bg-main) !important;
    background-color: var(--text-main) !important;
    border-color: var(--text-main) !important;
}

.btn-event:hover {
    background-color: var(--text-dark) !important;
    color: var(--text-main) !important;
    border-color: var(--text-dark) !important;}

.btn-event:visited {
    color: var(--text-muted); /* Ставимо м'який сірий колір, взятий з нашої палітри */
}


/* === Мобільна версія === */
@media (max-width: 768px) {
    .event-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
		-webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }

    .events-header h1 {
        font-size: 1.8rem !important;
    }

    .event-info {
        margin-bottom: 25px !important;
        width: 100% !important;
    }

    .event-action {
		margin-left: 0;
        width: 100% !important;
    }

    .btn-event {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-weight: bold !important;
    }
}

/* Контейнер сторінки пошуку */
.search-page-container {
    padding: 60px 20px;
    max-width: 1400px; 
    margin: 0 auto;
}

.search-page-header {
    margin-bottom: 40px;
    text-align: left;
	 color: var(--text-main);
}

.search-title {
	font-family: 'CocoGothicSmallCaps';
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.search-title span {
	font-family: 'CocoGothicSmallCaps';
    font-weight: 600;
    color: var(--text-main);
}

/* Сітка по 4 в ряд */
.product-grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}

/* Картка товару */
.product-card-item {
    position: relative;
    overflow: hidden;
}

.product-link {
    display: block;
    text-decoration: none;
}

.product-image-wrapper {
    position: relative;
    line-height: 0; 
    overflow: hidden;
}

.product-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; 
}

/* Затінення при наведенні */
.product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0; 
    background: linear-gradient(to top, var(--overlay-dark-heavy) 0%, rgba(10, 10, 10, 0) 100%);
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    padding: 0 15px;
    transition: height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.product-name {
	font-family: 'CocoGothicSmallCaps';
    color: var(--text-main);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ефекти ховера */
.product-card-item:hover .product-overlay {
    height: 40%; 
    opacity: 1;
}

.product-card-item:hover img {
    transform: scale(1.05); 
}
/* Контейнер пагінації */
.search-pagination {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
}

/* Центрування та вирівнювання елементів */
.search-pagination .nav-links {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 15px; 
}

/* Стилі для цифр та стрілочок */
.search-pagination .page-numbers {
	font-family: 'CocoGothicSmallCaps';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px; 
    color: var(--text-main); 
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Прибираємо підкреслення і додаємо ефект при наведенні */
.search-pagination .page-numbers:hover {
    color: var(--text-muted); 
}

/* Виділення поточної сторінки */
.search-pagination .page-numbers.current {
	font-family: 'CocoGothicSmallCaps';
    font-weight: 700;
    color: var(--text-main);
    pointer-events: none; 
}

/* Приховуємо стандартний заголовок WordPress "Навігація записами" */
.search-pagination .screen-reader-text {
    display: none;
}
/* Адаптивність */
@media (max-width: 1024px) {
    .product-grid-four { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width: 600px) {
    .product-grid-four { grid-template-columns: 1fr; } 
}

/*____________*/
/* Перевизначаємо колір відвіданих посилань, щоб прибрати синій */
a:visited {
    color: var(--text-muted); /* Ставимо м'який сірий колір, взятий з нашої палітри */
}
.product-info-right a:visited,
.entry-content a:visited {
    color: var(--text-muted);
}
.site-footer a:visited {
    color: var(--text-muted);
}
.product-link:visited .product-name {
    color: var(--text-muted);
}
/* Вбиваємо синій пунктир (outline) при кліку та поверненні на вкладку */
a, 
a:focus, 
a:active, 
button:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important; /* Прибирає синє підсвічування на мобільних */
}

/* Робимо так, щоб відвідані посилання не міняли колір на синій, 
   а брали той самий колір, що й у звичайному стані */
a:visited,
a[target="_blank"]:visited {
    color: inherit !important; 
}
/* ==========================================================================
   СТИЛІ ДЛЯ СТАНДАРТНИХ ТЕКСТОВИХ СТОРІНОК (Політика, Умови тощо)
   ========================================================================== */
.page-template-default .entry-content,
.page-template-default #primary {
    max-width: 850px; /* Оптимальна журнальна ширина */
    margin: 0 auto; /* Центруємо весь блок на екрані */
    padding: 120px 20px 80px; /* 120px зверху (щоб опустити під хедер), 20px з боків для мобільних */
    box-sizing: border-box;
}

.page-template-default .entry-header {
    text-align: center;
}

.page-template-default .entry-title {
    font-size: 2.5em;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: 1px;
    margin-top: 0;
}


.page-template-default .entry-content p {
    font-size: 18px;
    line-height: 1.8; 
    color: var(--text-muted);
    margin-bottom: 25px; 
    text-align: justify; 
}

.page-template-default .entry-content strong,
.page-template-default .entry-content b {
    color: var(--text-main); 
    font-weight: 500;
}


.page-template-default .entry-content h2,
.page-template-default .entry-content h3 {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--text-main);
    margin-top: 40px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.page-template-default .entry-content ul,
.page-template-default .entry-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
    color: var(--text-muted);
    line-height: 1.8;
}

.page-template-default .entry-content li {
    margin-bottom: 10px;
}



/*Про нас*/
.about-hero-section {
    width: 100%;
    height: 60.36vw; 
    position: relative;
    overflow: visible;
    /* Safari Fix: створюємо новий контекст нашарування */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Загальний стиль для всіх елементів */
.grid-item {
   position: absolute;
    /* Safari Fix: прибираємо можливі артефакти рендерингу */
    -webkit-backface-visibility: hidden;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- ВЕРХНІЙ РЯД --- */

.photo-top-1 {
    width: 12.96vw;  /* 249px */
    height: 28.59vw; /* 549px */
    top: 0;
    left: 0;
}

.photo-top-2 {
    width: 29.89vw;  /* 574px */
    height: 28.59vw;
    top: 0;
    left: 12.96vw;   /* Одразу після фото 1 */
}

.photo-top-3 {
    width: 24.21vw;  /* 465px */
    height: 28.59vw;
    top: 0;
    left: 42.86vw;   /* 12.96 + 29.89 */
}

.photo-top-4-big {
    width: 32.96vw;  /* 633px */
    height: 35.41vw; /* 680px */
    top: 0;
    right: 0;        /* Притиснуте до правого краю */
}

/* --- НИЖНІЙ РЯД --- */

/* Фото 5 (Зліва) */
.photo-main-overlap {
    width: 25.46vw;  /* 489px */
    height: 31.77vw; /* 610px */
    /* Накладання: висота фото 4 (35.41) - різниця накладання */
    /* Щоб воно було впритул до верху як у фігмі: */
    top: 28.59vw; 
    left: 0;
    z-index: 10;
}

/* SVG (Belik's about us) */
.vertical-text-svg {
  width: 2.55vw;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    top: calc(28.59vw + 4.11vw);
    left: calc(25.46vw + 5.83vw);
}
.vertical-text-svg svg {
    width: 100%;
    height: auto;
    display: block;
    /* Safari Fix: запобігаємо неправильному масштабуванню */
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

/* Фото 6 (Корсет) */
.photo-bottom-center {
    width: 27.08vw;  /* 520px */
    height: 28.28vw; /* 543px */
    /* Відступ 34 від верхніх фото */
    top: calc(28.59vw + 1.77vw); /* 549px + 34px */
    left: 33.59vw; /* Відрегулюйте, щоб було під фото 3 */
}
/* Текстовий блок - точне позиціонування */
.text-block {
   width: 22.6vw;
    height: auto;
    position: absolute;
    top: 39.05vw;      
    right: 10.36vw;
    color: #fff;
    text-align: left;
    z-index: 5;
    /* Safari Fix: покращення читабельності шрифтів */
    -webkit-font-smoothing: antialiased;
}

.text-block h3 {
    font-size: 1.25vw; /* Приблизно 24px на 1920 */
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* Лінія-розділювач */
.divider-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 1.5vw 0; /* Пропорційний відступ */
}

.text-block p {
    font-size: 0.83vw; /* Приблизно 16px */
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* Корекція Фото 6 (Корсет), щоб воно не заважало тексту */
.photo-bottom-center {
    width: 27.08vw;  /* 520px */
    height: 28.28vw; /* 543px */
    top: 30.36vw;    /* 549px + 34px відступ */
    /* Розрахунок позиції left: відступ від тексту 112px */
    /* 100vw - 10.36vw (правий край) - 22.6vw (текст) - 5.83vw (112px відступ) - 27.08vw (ширина фото) */
    left: 34.13vw; 
    position: absolute;
}
@media (max-width: 1024px) {
    .about-hero-section {
        /* Висота всієї секції за макетом (наприклад, до початку паперу) */
        height: 132vw; /* Підберіть під загальну висоту мобільного фрейму */
        position: relative;
        min-height: 132vw;
    }

    /* ФОТО 2 (Зліва зверху) */
    .photo-top-2 {
        width: 52.5vw;  /* (189 / 360) * 100 */
        height: 52.2vw; /* (188 / 360) * 100 */
        top: 0;
        left: 0;
        position: absolute;
    }

    /* SVG на ФОТО 2 */
    .vertical-text-svg {
        width: auto;  /* (56 / 360) * 100 */
        height: 15.5vw; 
        top: 2.2vw;     /* (8 / 360) * 100 */
        left: 1.4vw;    /* (5 / 360) * 100 */
        position: absolute;
        z-index: 5;
    }
	.vertical-text-svg svg {
        width: 100%;
        height: auto;
    }

    /* ФОТО 4 (Справа зверху) */
    .photo-top-4-big {
        width: 47.5vw;  /* (171 / 360) * 100 */
        height: 52.2vw; /* (188 / 360) * 100 */
        top: 0;
        right: 0;
        position: absolute;
    }

    /* ФОТО 6 (Корсет - прижата вправо) */
    .photo-bottom-center {
        width: 38vw;    /* (137 / 360) * 100 */
        height: 77vw;   /* (277 / 360) * 100 */
        top: 55.8vw;    /* (201 / 360) * 100 */
        right: 0;
        left: auto;
        position: absolute;
    }

    /* ТЕКСТОВИЙ БЛОК */
    .text-block {
        width: 50vw;    /* (180 / 360) * 100 */
        height: auto;
        top: 59.2vw;    /* (213 / 360) * 100 */
        left: 7.7vw;    /* (28 / 360) * 100 */
        position: absolute;
        padding: 0;     /* Скидаємо десктопні падінги */
    }

    .text-block h3 {
        font-size: 4.5vw; /* Адаптивний розмір шрифту */
        line-height: 1.2;
    }

    .text-block p {
        font-size: 3.5vw;
        line-height: 1.4;
    }

    /* ПРИХОВУЄМО ФОТО, ЯКИХ НЕМАЄ В МОБІЛЬНОМУ МАКЕТІ */
    .photo-top-1, .photo-top-3, .photo-main-overlap {
        display: none;
    }
}
/* --- ОСНОВНА СЕКЦІЯ --- */
.paper-section {
    position: relative;
    width: 100vw;
    margin-top: -6.5vw; 
    z-index: 100;
    background: transparent;
    overflow: visible !important;
    /* Safari Fix: заставляємо браузер поважати z-index */
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}

/* --- ФОН ПАПЕРУ (Цілісний файл) --- */
.paper-overlay {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    /* Safari Fix: плавний рендеринг фону */
    -webkit-transform: translateZ(0);
}

.paper-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* Відступ контенту від верху паперу 188px = 9.79vw */
    padding: 9.79vw calc(130 / 1920 * 100vw) 5vw;
}

.paper-flex-wrapper {
   display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: calc(130 / 1920 * 100vw);
}

.paper-col {
    -webkit-flex: 0 0 calc(468 / 1920 * 100vw);
    flex: 0 0 calc(468 / 1920 * 100vw);
    width: calc(468 / 1920 * 100vw);
}

.paper-img-wrap {
    width: 100%;
    aspect-ratio: 468 / 449;
    margin-bottom: calc(20 / 1920 * 100vw);
}

.paper-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.paper-text p {
    color: #000 !important;
    font-size: clamp(14px, 0.85vw, 18px);
    line-height: 1.6;
    margin: 0;
}

.paper-text b { font-weight: 700; color: #000 !important; }

/* ЗАГОЛОВКИ */
.paper-title-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(125 / 1920 * 100vw);
    margin: 0 0 calc(20 / 1920 * 100vw) 0;
    color: #000 !important;
    font-size: calc(64 / 1920 * 100vw);
    text-align: center;
    font-weight: 400;
}

.paper-title-mobile { display: none; }

/* --- МОБІЛЬНА ВЕРСІЯ --- */
@media (max-width: 1024px) {
    
    .paper-section {
        position: relative !important;
        /* ПРИБИРАЄМО transform та translateY, вони рухають ВСЮ секцію */
        transform: none !important; 
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        
        z-index: 50;
        overflow: visible !important; /* Дозволяємо фону вилізти за межі */
        height: auto !important;
    }

    .paper-overlay {
        position: absolute !important;
        /* Висуваємо ТІЛЬКИ фон вгору на 48px (13.33vw) */
        top: -17vw !important; 
        left: 0 !important;
        width: 100% !important;
        /* Збільшуємо висоту фону на розмір напливу, щоб він не "підскочив" знизу */
        height: calc(100% + 17vw) !important;
        background-image: url('images/about/paper-mob.png') !important;
        background-size: 100% 100% !important;
        z-index: -1 !important;
		background-attachment: scroll;
        -webkit-background-size: 100% 100%;
    }

    .paper-container {
        /* Додаємо відступ зверху контенту, щоб текст "ПРО НАС" 
           не наїхав на рваний край, який ми підняли */
        padding-top: calc(44 / 360 * 100vw) !important;
        padding-bottom: 100px !important;
    }

    /* Компенсуємо зсув секції для наступного блоку */
    .paper-section + section,
    .paper-section + div {
        margin-top: -13.33vw !important;
    }

    .paper-flex-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Оновлені стилі для колонок (картинка + текст) */
    .paper-col {
        width: 100% !important;
        max-width: 100% !important; /* Дозволяємо контенту керувати шириною */
        margin: 0 auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
		display: -webkit-box;
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
    }

    /* Стиль для обгортки картинки: 
       відступи по 27px (7.5vw), зверху 30px (8.33vw), знизу 20px (5.55vw) */
    .paper-img-wrap {
        width: calc(100% - 15vw) !important; /* Відступи 27px + 27px = 54px (15vw) */
        margin: 8.33vw auto 5.55vw auto !important; 
        aspect-ratio: 306 / 294 !important; /* Пропорція картинки (360 - 54 = 306) */
		min-height: calc((100vw - 15vw) * (294 / 306));
    }

    /* Стиль для текстового блоку: 
       ширина 248px (68.88vw), відступи по боках 56px (15.55vw) */
    .paper-text {
        width: 68.88vw !important;
        margin: 0 auto !important;
        text-align: center;
    }

    .paper-text p {
        font-size: 14px !important; /* Фіксований для читабельності або 3.8vw */
        line-height: 1.4 !important;
    }

    .paper-title-mobile {
        display: flex !important;
        font-weight: 300;
        margin: 0 auto 30px auto !important;
        color: #000 !important;
        font-size: calc(40 / 360 * 100vw) !important;
        justify-content: center;
        align-items: center;
    }

    .paper-title-desktop { display: none !important; }
}

.history-section {
    position: relative;
    width: 100vw;
    /* Жорстка пропорція висоти відносно ширини 1920: (2007/1920 * 100) */
    height: 104.53vw; 
    /* Наплив всього блоку (якщо потрібно змістити всю секцію) */
    margin-top: -7.55vw; /* 145/19.2 */
    z-index: 10;
    overflow: visible; /* Щоб наплив паперу не обрізався */
}

.history-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ЗАГОЛОВОК 1 */
.history-main-title {
    position: absolute;
    left: 6.82vw;   /* 131/19.2 */
    top: 16.4vw;    /* 315/19.2 */
    font-size: 4.94vw; /* 95/19.2 */
    color: #fff;
    line-height: 1;
    margin: 0;
    z-index: 5;
}

.history-divider-top {
    position: absolute;
    left: 6.82vw;
    top: calc(16.4vw + 6.51vw); /* top + 125px висоти тексту */
    width: 36.97vw; /* 710/19.2 */
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.history-text-top {
    position: absolute;
    left: 6.82vw;
    top: calc(16.4vw + 8.07vw); /* top + 155px */
    display: flex;
    gap: 6.92vw; /* 133/19.2 */
}

.hist-col p {
    font-size: 0.83vw; /* Приблизно 16px на 1920, масштабується всюди */
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.hist-col:nth-child(1) { width: 15.1vw; } /* 290/19.2 */
.hist-col:nth-child(2) { width: 14.37vw; } /* 276/19.2 */

/* ФОТО ВЕРХ */
.hist-img { position: absolute; overflow: hidden; }
.hist-img img { width: 100%; height: 100%; object-fit: cover; }

.img-green-dresses {
    width: 16.56vw; height: 16.56vw;
    top: 17.18vw; left: 52.44vw;
}

.img-back-dress {
    width: 23.59vw; height: 30.1vw;
    top: 12.96vw; right: 6.61vw;
}

.img-team {
    width: 28.38vw; height: 14.06vw;
    top: 34.63vw; left: 45.67vw;
}

/* БЛОК СТАСА */
.img-stas-wife {
    width: 29.53vw; height: 42.44vw;
    top: 48.48vw; left: 6.82vw;
}

.img-stas-bw {
    width: 14.94vw; height: 16.04vw;
    top: 73.75vw; left: 31.77vw; /* 610/19.2 */
    z-index: 15;
}

.stas-text-block {
    position: absolute;
    top: 56.51vw; /* 1085/19.2 */
    right: 6.3vw;  /* 121/19.2 */
    width: 40.41vw; /* 776/19.2 */
}

.stas-title {
    font-size: 1.25vw; /* 24/19.2 */
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1.45vw; /* 28/19.2 */
}

.stas-divider {
    width: 100%; height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: 1.56vw; /* ~30px */
}

.stas-columns { display: flex; gap: 4.11vw; } /* 79/19.2 */
.stas-col-1 { width: 19.11vw; } /* 367/19.2 */
.stas-col-2 { width: 17.08vw; } /* 328/19.2 */

.stas-columns p { 
    font-size: 0.83vw; 
    margin-bottom: 1.56vw; 
    line-height: 1.5; 
}

/* ПРИХОВУВАННЯ БЛОКІВ */
.history-mobile-content { display: none; }

@media (max-width: 1024px) {
    .history-desktop-content { display: none; }
    
    .history-section {
        height: auto !important;
        margin-top: -55px; 
        padding-top: calc(48 / 360 * 100vw);
        padding-bottom: calc(50 / 360 * 100vw);
        display: block !important;
    }

    .history-mobile-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        color: #fff;
    }

    /* ЗАГОЛОВКИ ТА ЛІНІЇ */
    .mob-hist-title {
		font-weight: 300;
        font-size: calc(36 / 360 * 100vw);
        padding: 0 calc(51 / 360 * 100vw);
        text-align: center;
        margin: 0;
    }

    .mob-divider {
        height: 1px;
        background: rgba(255,255,255,0.3);
        margin: calc(10 / 360 * 100vw) calc(30 / 360 * 100vw) 0;
    }

    /* ТЕКСТОВІ БЛОКИ */
    .mob-text-block {
        padding: calc(15 / 360 * 100vw) calc(20 / 360 * 100vw) 0;
        text-align: center;
    }

    .mob-text-block p, .text-on-photo p {
        font-size: 14px; /* за вашим запитом */
        line-height: 1.5;
        margin: 0;
    }

    .mob-text-block.wide-gap {
        padding: calc(30 / 360 * 100vw) calc(56 / 360 * 100vw) 0;
    }

    /* ЗОБРАЖЕННЯ */
    .mob-img-full {
        width: 100%;
        margin-top: calc(25 / 360 * 100vw);
        line-height: 0;
    }

    .mob-img-full img { width: 100%; height: auto; }

    /* БЛОК СТАСА */
    .mob-stas-name {
		font-weight: 300;
        font-size: 14px;
        text-align: center;
        padding: calc(30 / 360 * 100vw) calc(96 / 360 * 100vw) 0;
        text-transform: uppercase;
    }

    .mob-stas-main {
        position: relative;
        margin-top: calc(25 / 360 * 100vw);
    }

    .text-on-photo {
        position: absolute;
        top: calc(230 / 360 * 100vw);
        left: calc(38 / 360 * 100vw);
        right: calc(38 / 360 * 100vw);
        bottom: calc(30 / 360 * 100vw);
        /* 284x189 пропорція за вашими даними */
        background: rgba(13, 13, 13, 0.7); /* легка підкладка для читабельності */
        padding: 10px;
        display: flex;
        align-items: center;
    }

    .alt-padding { padding: calc(25 / 360 * 100vw) calc(42 / 360 * 100vw) 0; }
    
    .mob-img-padded {
        padding: calc(30 / 360 * 100vw) calc(28 / 360 * 100vw) 0;
    }
    .mob-img-padded img { width: 100%; height: auto; }

    .alt-padding-2 { padding: calc(25 / 360 * 100vw) calc(43 / 360 * 100vw) 0; }
    
    .alt-padding-3 { padding: calc(25 / 360 * 100vw) calc(40 / 360 * 100vw) 0; }
}


/* Базові налаштування секції (на всю ширину) */
.special-video-section {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    
    line-height: 0;
    overflow: hidden;
    z-index: 1;
}

.video-outer-container {
    width: 100%;
}

.video-inner-wrap {
    position: relative;
    width: 100%;
    overflow: hidden; /* Щоб poster не виходив за межі */
}

/* Налаштування самого плеєра (ігноруємо стандартні контроли) */
.custom-video-player {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border: none;
    outline: none;
    background-color: #000;
    object-fit: cover; /* Poster заповнить весь простір, якщо пропорції трохи відрізняються */
}

/* На всяк випадок примусово ховаємо будь-які стандартні контроли, 
   якщо PHP-атрибут "controls" чомусь не спрацював. */
.custom-video-player::-webkit-media-controls-enclosure {
    display:none !important;
}

/* Оверлей з картинкою та кнопкою (за замовчуванням видимий) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
    opacity: 1;
}

.video-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Щоб не заважало скролу */
}

/* Велика красива кнопка по центру */
.main-play-btn {
    padding: 18px 40px;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
    z-index: 6;
}

.main-play-btn:hover {
    background-color: #fff;
    color: #000;
}

/* Кастомна кнопка звуку в кутку (вона з'явиться після запуску) */
.custom-mute-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.custom-mute-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

.custom-mute-btn.hidden {
    display: none;
}

.custom-mute-btn span.hidden {
    display: none;
}

/* Адаптація для мобільних пристроїв (екрани менше 1024px) */
@media screen and (max-width: 1023px) {
    .special-video-section {
        width: 100%;
        margin-left: 0;
        transform: none;
        /* На мобільних зазвичай не використовують 100vw, 
           щоб уникнути багів зі скролом, стандартної ширини достатньо */
    }

    /* Велика кнопка стає трохи компактнішою */
    .main-play-btn {
        padding: 14px 24px;
        font-size: 14px; /* Зменшуємо шрифт для мобільних */
        width: 80%;      /* Кнопка не має виходити за межі екрана */
        max-width: 300px;
        text-align: center;
    }

    /* Кнопка звуку в кутку стає трохи меншою, щоб не заважати */
    .custom-mute-btn {
        bottom: 15px;
        right: 15px;
        width: 38px;
        height: 38px;
    }

    .custom-mute-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Специфічне налаштування для вертикальних екранів (мобільні телефони) */
@media screen and (max-width: 480px) {
    .custom-video-player {
        min-height: 250px; /* Гарантуємо мінімальну висоту, щоб блок не "схлопнувся" */
        object-fit: cover;  /* Відео заповнить екран, навіть якщо воно горизонтальне */
    }
    
    .video-overlay {
        background-color: rgba(0, 0, 0, 0.5); /* Трохи темніший фон для кращого читання тексту */
    }
}

.brand-origin-section {
    width: 100vw;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-origin-container {
    width: 100%;
    padding-top: 9.375vw; /* 180px */
    padding-bottom: 6.25vw; /* 120px */
}

/* ЗАГОЛОВОК */
.brand-origin-title {
    font-size: 4.16vw; /* 80px */
    line-height: 1.1;
    text-transform: uppercase;
    padding: 0 13.95vw; /* 268px */
    margin-bottom: 3.125vw; /* 60px */
    font-weight: 400;
}

/* PNG КАРТИНКА */
.brand-origin-png-wrap {
    width: 40.83vw; /* 784px */
    /* Використовуємо aspect-ratio, щоб PNG не "стрибав" при завантаженні */
    aspect-ratio: 784 / 513; 
    margin: 0 auto 1.4vw auto; /* 27px до тексту */
}

.brand-origin-png-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Покращуємо чіткість тексту на картинці */
    image-rendering: -webkit-optimize-contrast;
}

/* НИЖНІЙ ТЕКСТ */
.brand-origin-text {
    padding: 0 19.79vw; /* 380px */
}

.brand-origin-text p {
    font-size: 1.04vw; /* 20px */
    line-height: 1.5;
    font-weight: 300;
}

.brand-origin-text b {
    font-weight: 700;
}

/* --- МОБІЛЬНА ВЕРСІЯ --- */
@media (max-width: 1024px) {
    .brand-origin-container {
        padding-top: calc(50 / 360 * 100vw);
        padding-bottom: calc(50 / 360 * 100vw);
    }

    .brand-origin-title {
        font-size: calc(30 / 360 * 100vw);
        padding: 0 calc(41 / 360 * 100vw);
        margin-bottom: calc(25 / 360 * 100vw);
    }

    .brand-origin-png-wrap {
        width: calc(310 / 360 * 100vw);
        aspect-ratio: 310 / 198;
        margin: 0 auto calc(25 / 360 * 100vw) auto;
    }

    .brand-origin-text {
        padding: 0 calc(43 / 360 * 100vw);
    }

    .brand-origin-text p {
        font-size: 14px;
        text-align: center;
    }
}

.chess-section {
    width: 100vw;
    background-color: #f5f5f5;
    overflow: hidden;
}

.chess-grid {
    display: grid;
    /* 4 колонки по 480px на екрані 1920px = 25vw кожна */
    grid-template-columns: repeat(4, 25vw);
    width: 100%;
}

.chess-item {
    position: relative;
    /* Висота 508px на екрані 1920px = 26.46vw */
    height: 26.46vw;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* ФОТО БЛОКИ */
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ТЕКСТОВІ БЛОКИ */
.text-item {
    background-color: #f5f5f5;
    /* Відступи: зверху 50px (2.6vw), зліва 50px (2.6vw), знизу 50px (2.6vw), справа 130px (6.77vw) */
    padding: 2.6vw 6.77vw 2.6vw 2.6vw;
    text-align: left;
}

.text-item h3 {
    margin: 0;
    color: #0a0a0a;
    /* Розмір 20px */
    font-size: 1.04vw;
    font-weight: 700;
    text-transform: uppercase;
}

.text-item p {
    margin: 0;
    color: #0a0a0a;
    /* Розмір 19px */
    font-size: 0.99vw;
    line-height: 1.4;
}

/* --- МОБІЛЬНА ВЕРСІЯ (360px) --- */
@media (max-width: 1024px) {
    .chess-grid {
        grid-template-columns: 100%; /* Одна колонка */
    }

    /* Блок фото на мобілці 360х381 */
    .photo-item {
        height: calc(381 / 360 * 100vw) !important;
    }

    /* Блок тексту на мобілці 360х351 */
   .text-item {
    height: auto !important; /* Як ми з’ясували раніше, краще використовувати auto для гнучкості */
    min-height: calc(351 / 360 * 100vw) !important;
    
    /* Відступи: зверху 50, справа 50, знизу 50, зліва 28 */
    padding: calc(50 / 360 * 100vw)  calc(50 / 360 * 100vw) calc(50 / 360 * 100vw) calc(28 / 360 * 100vw) !important;
  
}

    .text-item h3 {
        /* Розмір 16px */
        font-size: 24px !important;
        margin-bottom: 15px;
    }

    .text-item p {
        /* Розмір 14px */
        font-size: 20px !important;
    }

    /* На мобілці нам потрібно змінити порядок деяких елементів, 
       щоб фото і текст завжди йшли по черзі (Фото-Текст-Фото-Текст) */
    
    /* У другому ряду спочатку йде текст, ми його посунемо */
    .chess-grid .chess-item:nth-child(5) { order: 6; } /* Текст 3 */
    .chess-grid .chess-item:nth-child(6) { order: 5; } /* Фото 3 */
    .chess-grid .chess-item:nth-child(7) { order: 8; } /* Текст 4 */
    .chess-grid .chess-item:nth-child(8) { order: 7; } /* Фото 4 */
}
.values-section {
    width: 100vw;
   
    /* Відступ від минулої секції 180px */
    padding-top: calc(180 / 1920 * 100vw);
    padding-bottom: 100px;
}

.values-grid {
    display: grid;
    /* Дві колонки: Текст (766px) та Фото (747px) з проміжком 150px */
    /* Відступи по боках 128px */
    grid-template-columns: calc(766 / 1920 * 100vw) calc(747 / 1920 * 100vw);
    column-gap: calc(150 / 1920 * 100vw);
    row-gap: calc(75 / 1920 * 100vw);
    justify-content: center;
}

/* ФОТО ЕЛЕМЕНТИ */
.values-photo-item {
    width: calc(747 / 1920 * 100vw);
    height: calc(792 / 1920 * 100vw);
    overflow: hidden;
}

.values-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ТЕКСТОВІ ЕЛЕМЕНТИ */
.values-text-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
}

.values-text-item h2 {
    font-size: calc(80 / 1920 * 100vw);
    line-height: 1.1;
    margin-bottom: 40px;
    font-weight: 400;
    text-transform: uppercase;
}

.values-content p {
    font-size: calc(20 / 1920 * 100vw);
    line-height: 1.5;
    margin-bottom: 25px;
    font-weight: 300;
}

.values-content b {
    font-weight: 700;
}

/* --- МОБІЛЬНА ВЕРСІЯ --- */
@media (max-width: 1024px) {
    .values-section {
        padding-top: 50px;
    }

    .values-grid {
        grid-template-columns: 100%;
        row-gap: 0;
    }

    .values-text-item {
        /* Текстовий блок 300px шириною, по 30px боки */
        padding: 50px 30px 30px 30px;
        order: initial !important; /* Скидаємо шахівку для лінійної черговості */
    }

    .values-text-item h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .values-content p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .values-photo-item {
        width: 100%;
        height: 383px;
        order: initial !important;
    }

    /* Примусове чергування Текст-Фото на мобільці (якщо в коді вони інакше) */
    /* Оскільки в PHP ми написали Текст-Фото, Фото-Текст, на мобільці треба поправити: */
    .values-grid div:nth-child(1) { order: 1; } /* Текст 1 */
    .values-grid div:nth-child(2) { order: 2; } /* Фото 1 */
    .values-grid div:nth-child(3) { order: 4; } /* Фото 2 (йде після тексту) */
    .values-grid div:nth-child(4) { order: 3; } /* Текст 2 (йде перед фото) */
    .values-grid div:nth-child(5) { order: 5; } /* Текст 3 */
    .values-grid div:nth-child(6) { order: 6; } /* Фото 3 */
    .values-grid div:nth-child(7) { order: 8; } /* Фото 4 */
    .values-grid div:nth-child(8) { order: 7; } /* Текст 4 */
}

.values-section {
    width: 100vw;
    
    padding-top: calc(180 / 1920 * 100vw);
    overflow: hidden;
    color: #fff;
}

.values-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Відступ 75px між фото-блоками */
    gap: calc(75 / 1920 * 100vw); 
}

.values-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Шахматка: кожен парний ряд міняється місцями */
.values-row.reverse {
    flex-direction: row-reverse;
}

/* КАРТИНКА */
.values-image {
    /* Розмір 747px на 1920px = 38.9vw */
    width: 38.9vw;
    aspect-ratio: 747 / 792;
    /* Відступ від краю 128px = 6.66vw */
}

.values-row:not(.reverse) .values-image { margin-left: 6.66vw; }
.values-row.reverse .values-image { margin-right: 6.66vw; }

.values-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ТЕКСТОВИЙ БЛОК */
.values-text {
    /* Ширина 766px = 39.9vw */
    width: 39.9vw;
    /* Відступ від краю 128px */
}

.values-row:not(.reverse) .values-text { margin-right: 6.66vw; }
.values-row.reverse .values-text { margin-left: 6.66vw; }

.values-text h2 {
    font-size: calc(80 / 1920 * 100vw);
    margin: 0 0 50px 0;
    font-weight: 300;
}

.values-text p {
    font-size: calc(20 / 1920 * 100vw);
    line-height: 1.4;
    margin: 0;
}

/* Лінії */
.value-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    /* 50px до і після абзаців */
    margin: 50px 0;
}

@media (max-width: 1024px) {
    .values-section {
        padding-top: 50px;
    }

    .values-container {
        gap: 0;
    }

    .values-row, .values-row.reverse {
        flex-direction: column !important; /* Текст завжди над фото або навпаки */
        width: 100%;
    }

    .values-image {
        width: 100% !important;
        margin: 0 !important;
        aspect-ratio: auto;
        height: auto;
        order: 2; /* Фото йде другим */
    }

    .values-text {
        width: 100% !important;
        margin: 0 !important;
        /* Ширина контенту 300px, по 30px боки */
        padding: 50px 30px 30px 30px !important;
        box-sizing: border-box;
        order: 1; /* Текст іде першим */
    }

    .values-text h2 {
        font-size: 40px !important;
        margin-bottom: 30px;
        text-align: center;
    }

    .values-text p {
        font-size: 14px !important;
        text-align: center;
    }

    .value-divider {
        margin: 30px 0;
    }
}

.target-section {
    position: relative;
    width: 100%;
    /* Пропорційна висота для ПК: (685 / 1920 * 100) */
    height: calc(685 / 1920 * 100vw); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Починаємо відступ зверху */
    align-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.target-container {
    width: 100%;
    /* Відступ заголовка від верху картинки: 235px */
    padding-top: calc(235 / 1920 * 100vw);
}

.target-title {
    font-size: calc(95 / 1920 * 100vw);
    line-height: 1.1;
    margin: 0 auto calc(20 / 1920 * 100vw) auto; /* 20px відступ до малого тексту */
    text-transform: uppercase;
    font-weight: 400;
}

.target-description {
    font-size: calc(20 / 1920 * 100vw);
    max-width: calc(800 / 1920 * 100vw); /* Обмежуємо ширину для читабельності */
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 300;
}

.target-description b {
    font-weight: 700;
}

/* --- МОБІЛЬНА ВЕРСІЯ (360px) --- */
@media (max-width: 1024px) {
    .target-section {
        /* Пропорційна висота для моб: (256 / 360 * 100) */
        height: calc(256 / 360 * 100vw);
        /* Центруємо контент вертикально на мобільці, бо картинка вузька */
        justify-content: center; 
    }

    .target-container {
        padding-top: 0;
        padding: 0 20px;
    }

    .target-title {
        font-size: 40px; /* За вашим запитом */
        margin-bottom: 15px;
    }

    .target-description {
        font-size: 14px; /* За вашим запитом */
        max-width: 100%;
    }
}

/* ==========================================================================
   ФІНАЛЬНИЙ CSS СТОРІНКИ РОЗСИЛКИ З ФІРМОВИМИ КОЛЬОРАМИ ТА ШРИФТАМИ
   ========================================================================== */

/* Загальний оксамитовий фон сторінки */
.newsletter-page-bg {
    background-color: var(--bg-main) !important;
    padding: 120px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh !important;
    box-sizing: border-box !important;
}

/* Контейнер форми */
.newsletter-dark-card {
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: var(--bg-main) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Головний преміальний заголовок */
.newsletter-dark-card h2 {
    font-family: 'CocoGothicSmallCaps', 'Cinzel', serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--text-main) !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

/* Витончений підзаголовок */
.newsletter-dark-card .newsletter-subtitle {
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 50px !important;
}

/* Обгортки для полів */
.newsletter-field-group {
    margin-bottom: 25px !important;
    width: 100% !important;
    position: relative !important;
    text-align: left !important;
}

/* Фірмові рамки інпутів */
.newsletter-dark-card input[type="text"],
.newsletter-dark-card input[type="email"],
.newsletter-dark-card input[type="tel"] {
    width: 100% !important;
    padding: 15px 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-main) !important; /* М'який білий текст при вводі */
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    border: 1px solid var(--border-subtle) !important; /* Тонка ледве помітна рамка */
    border-radius: 0 !important; /* Строгі кути */
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    box-sizing: border-box !important;
    transition: border-color 0.4s ease !important;
}

/* Ефект фокусу — при кліку рамка підсвічується фірмовим червоним акцентом */
.newsletter-dark-card input:focus {
    border-color: var(--accent-main) !important;
}

/* Колір стандартних підказок (плейсхолдерів) */
.newsletter-dark-card input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5 !important;
}

/* --- СТИЛІЗАЦІЯ ЕЛЕМЕНТІВ ПЛАГІНА ТЕЛЕФОНІВ --- */
.iti { 
    width: 100% !important; 
    display: block !important;
}

/* Сірий колір для маски-прикладу номера телефона */
.iti input[type="tel"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.4 !important;
}

/* Текст коду країни (+380, +48) */
.iti__selected-dial-code { 
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--text-main) !important; 
    margin-left: 6px !important;
}

/* Стрілочка вибору списку країн */
.iti__arrow {
    border-top-color: var(--text-muted) !important;
}
.iti__arrow--up {
    border-bottom-color: var(--text-muted) !important;
}

/* Випадаюче вікно вибору країн (Матовий глибокий стиль) */
.iti__country-list {
    background-color: #121212 !important; /* Щільний темний фон */
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
    text-align: left !important;
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-size: 14px !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px var(--overlay-dark-heavy) !important;
}

.iti__country {
    padding: 10px 15px !important;
}

/* Ховер на країну у списку — підсвічуємо глибоким бордовим */
.iti__country:hover, 
.iti__country.iti__highlight {
    background-color: var(--accent-dark) !important; 
}

.iti__dial-code {
    color: var(--text-muted) !important;
}

/* Фірмова кнопка-рамка (з виправленим ховером через ваші змінні) */
.newsletter-dark-card #send-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 200px !important;
    padding: 15px 40px !important;
    background: transparent !important; 
    color: var(--text-main) !important;
    border: 1px solid var(--text-main) !important; 
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin-top: 25px !important;
    transition: all 0.4s ease !important;
    border-radius: 0 !important;
}

/* Ефект заливки при наведенні на кнопку */
.newsletter-dark-card #send-btn:hover {
    background: var(--text-main) !important; /* Насичений білий фон */
    color: var(--text-dark) !important;    /* Глибокий темний колір тексту */
    border-color: var(--text-main) !important;
}

/* Коли кнопка заблокована при відправці */
.newsletter-dark-card #send-btn:disabled {
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
}

/* Повідомлення про відправку */
#result-box {
    margin-top: 25px;
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Фікс накладання коду країни та тексту-прикладу */
.newsletter-dark-card .newsletter-field-group input[type="tel"] {
    padding-left: 95px !important; /* Зсуває маску вправо від +380 */
}

.newsletter-dark-card input[type="tel"]::placeholder {
    padding-left: 5px !important;
}

/* Центрування прапорця */
.iti__flag-container {
    padding-left: 12px !important; 
}

/* --- ЗНЕШКОДЖЕННЯ БІЛОГО ФОНУ ПРИ АВТОЗАПОВНЕННІ (CHROME, SAFARI, EDGE) --- */

/* Перекриваємо фоновий колір браузера внутрішньою тінню під колір вашого фону */
.newsletter-dark-card input:-webkit-autofill,
.newsletter-dark-card input:-webkit-autofill:hover, 
.newsletter-dark-card input:-webkit-autofill:focus, 
.newsletter-dark-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-main) inset !important; /* Заливає інпут кольором #0a0a0a */
    box-shadow: 0 0 0 1000px var(--bg-main) inset !important;
    
    /* Фіксуємо колір тексту, щоб він залишався м'яким білим, а не ставав чорним */
    -webkit-text-fill-color: var(--text-main) !important;
    color: var(--text-main) !important;
    
    /* Зберігаємо шрифт бренду під час автозаповнення */
    font-family: 'CocoGothicSmallCaps', sans-serif !important;
}

/* Додатково прибираємо анімацію появи жовтого/білого фону в деяких версіях браузерів */
.newsletter-dark-card input {
    transition: background-color 5000s ease-in-out 0s !important;
}