/*--------- Instrument Sans font ---------*/
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --navy: #0f2a4a;
    --navy-dark: #0a1f38;
    --navy-search: #102d52;
    --red: #d42027;
    --red-hover: #b81c22;
    --blue-btn: #1a3d6b;
    --white: #ffffff;
    --text-muted: #98afc6;
    --nav-bg: rgba(15, 25, 40, 0.72);
    --hero-radius: 48px;
    --curve-radius: 56px;
    --curve-inner: 36px;
    --header-height: 76px;
    --price-bar-height: 42px;
    --search-bar-height: 102px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Instrument Sans", sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.overall h1,
.overall h2,
.overall h3,
.overall h4,
.overall h5,
.overall h6,
.overall p {
    margin: 0;
    font-family: "Instrument Sans", sans-serif;
}

.overall {
    font-family: "Instrument Sans", sans-serif;
    background-color:#F5F5F5;
    padding: 15px;
    overflow-x: clip;
    max-width: 1920px;
    margin: auto;
}

/* ========== Hero Section ========== */
.hero {
    position: relative;
    width: 100%;
    height: 840px;
    max-height: 840px;
    min-height: 840px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: visible;
    margin: auto auto 0;
    z-index: 5;
}

a.logo-link img.logo-img {
    max-width: 233px;
    height:100px;
}

/* Banner top-left curve — white scoop interlocks with logo tab */
.banner-curve {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: var(--curve-radius);
    height: var(--curve-radius);
    z-index: 9;
    pointer-events: none;
    background: radial-gradient(circle at 100% 100%,
            transparent calc(var(--curve-radius) - 1px),
            var(--white) var(--curve-radius));
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 20, 35, 0.45) 0%,
            rgba(10, 20, 35, 0.35) 40%,
            rgba(10, 20, 35, 0.65) 100%);
    border-radius: 20px;
    z-index: 1;
}

/* ========== Header ========== */
.header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: var(--header-height);
    min-height: var(--header-height);
}

/* Concave scoop — logo tab curves into nav bar */
.logo-curve-nav {
    position: absolute;
    bottom: 0;
    right: calc(var(--curve-radius) * -1);
    width: var(--curve-radius);
    height: var(--curve-radius);
    background: radial-gradient(circle at 100% 0%,
            transparent calc(var(--curve-radius) - 1px),
            var(--white) var(--curve-radius));
    pointer-events: none;
    z-index: 12;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 16px;
}

.nav {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-left: -1px;
    position: relative;
    align-self: stretch;
}

.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 828px;
    margin: auto;
    position: relative;
    justify-content: space-between;
    z-index: 2;
}

.nav-list a {
    color: #E9EEF3;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}

.nav-list a:hover {
    opacity: 0.8;
}

.nav-chevron {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.header-sponsor {
    flex-shrink: 0;
    align-self: center;
    margin-right: 28px;
    margin-left: 16px;
    position: relative;
    z-index: 12;
}

.menu-toggle {
    display: none;
}

.mobile-nav-header,
.menu-close,
.mobile-nav-sponsor,
.mobile-menu-overlay {
    display: none;
}

.search-btn-text {
    display: none;
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 24px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.15s;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #205183;
    color: var(--white);
}

.btn-primary:hover {
    background: #205183;
}

.btn-sponsor {
    background:#A8151A;
    color: #E9EEF3;
    border: 1px solid #640C0F
}

.btn-sponsor:hover {
    background: var(--red-hover);
}

/* ========== Hero Content ========== */
.hero-content {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px 110px clamp(25px,7vw,96px);
    max-width: 1100px;
    min-height: 0;
}

.countdown-section {
    margin-bottom: 20px;
}

.countdown-label {
    color: #EAEAEA;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 14px;
   border: 1.33px solid #FFFFFF4D;
    border-radius: 50px;
    padding: 10px 22px;
   background: #FFFFFF0D;

}

.countdown-unit {
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.countdown-unit strong {
    font-weight: 700;
    font-size: 16px;
}

.countdown-divider {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 300;
}

.hero-title {
    color: #FFFFFF;
    font-size: clamp(22px, 6vw, 80px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 40px;
}

.hero-buttons .btn {
    padding: 14px 28px;
    font-size: 16px;
    max-width: 256px;
    width: 100%;
}

/* ========== Search Bar ========== */
.search-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    width: calc(100% - 144px);
    padding-inline: 20px 40px;
    z-index: 20;
    display: flex;
    align-items: center;
  background: #173A5D;
    border: 6px solid #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    height: var(--search-bar-height);
    min-height: var(--search-bar-height);
    max-height: var(--search-bar-height);
    overflow: visible;
}

.search-bar.is-category-open,
.search-bar.is-subcategory-open,
.search-bar.is-location-open {
    z-index: 50;
}

body.is-category-open .hero,
body.is-subcategory-open .hero,
body.is-location-open .hero {
    z-index: 20;
}

body.is-category-open .price-section,
body.is-category-open .price-section-placeholder,
body.is-subcategory-open .price-section,
body.is-subcategory-open .price-section-placeholder,
body.is-location-open .price-section,
body.is-location-open .price-section-placeholder {
    z-index: 1;
}

.search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    min-width: 0;
}

.search-field-icon img {
    width: 18px;
    height: 18px;
}

.search-flex {
    display: flex;
    align-items:start;
    gap: 10px;
}

.search-field-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-field-content label {
    color: #98AFC6;
    font-size: 16px;
    font-weight: 400;
}

.search-field-content input,
.search-field-content select {
    background: transparent;
    border: none;
    outline: none;
    color:#E9EEF3;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.search-field-content input::placeholder {
    color: var(--text-muted);
}

.select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.select-wrapper select {
    padding-right: 24px;
}

.select-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.search-field--category,
.search-field--subcategory,
.search-field--location {
    position: relative;
}

.custom-select {
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0 24px 0 0;
    cursor: pointer;
    position: relative;
    text-align: left;
    font-family: inherit;
}

.custom-select-value {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    min-width: 0;
}

.custom-select-value:not(.is-placeholder) {
    color: #E9EEF3;
}

.custom-select.is-open .select-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.search-field--category .custom-select-menu,
.search-field--subcategory .custom-select-menu,
.search-field--location .custom-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: -20px;
    width: calc(100% + 40px);
    list-style: none;
    margin: 0;
    padding: 10px 8px 14px;
    background: #173A5D;
    border-top: none;
    border-radius: 0 0 22px 22px;
    z-index: 100;
    isolation: isolate;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #98AFC6;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.custom-select-option span:first-child {
    flex: 1;
    min-width: 0;
}

.custom-select-option:hover,
.custom-select-option.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #E9EEF3;
}

.custom-select-option-arrow {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    color: #98AFC6;
    opacity: 0.85;
}

.custom-select-option:hover .custom-select-option-arrow,
.custom-select-option.is-active .custom-select-option-arrow {
    color: #E9EEF3;
}

.search-field--category.is-open,
.search-field--subcategory.is-open,
.search-field--location.is-open {
    z-index: 60;
}

.search-btn {
    flex-shrink: 0;
    width: 54px;
    background: #A8151A;
    border: none;
    border-radius: 10px;
    display: flex;
    padding: 18px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    /* margin: -3px -3px 0 0; */
}

.search-btn:hover {
    background: var(--red-hover);
}

/* ========== Price Marquee Section ========== */
.price-section-placeholder {
    height: 0;
    width: 100%;
    pointer-events: none;
}

.price-section {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 80px auto 0;
    background: #f4f4f5;
    border-top: 1px solid #e4e4e7;
    overflow: hidden;
    border-radius: 0;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.price-section.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    background: #205183;
    border-top: none;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 1000;
}

.price-section.is-stuck .price-marquee-item {
    color: var(--white);
}

.price-section.is-stuck .price-marquee-separator {
    color: rgba(255, 255, 255, 0.85);
}

.price-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--price-bar-height);
    display: flex;
    align-items: center;
}

.price-marquee-track {
    display: flex;
    width: max-content;
    animation: price-marquee-scroll 120s linear infinite;
}

.price-marquee:hover .price-marquee-track {
    animation-play-state: paused;
}

.price-marquee-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 28px;
    padding-right: 28px;
    white-space: nowrap;
}

.price-marquee-item {
    font-size: 14px;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.price-marquee-separator {
    flex-shrink: 0;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 1;
    transition: color 0.25s ease;
}

@keyframes price-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .price-marquee-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    .price-marquee-content {
        white-space: normal;
        justify-content: center;
        text-align: center;
        padding-right: 0;
    }

    .price-marquee-content[aria-hidden="true"] {
        display: none;
    }
}

/* ========== Popular Category Section ========== */
.category-section {
    position: relative;
    z-index: 1;
    padding: 48px 10px 64px;
}

.category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.category-title {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color:#A8151A;
    margin-bottom: 12px !important;
    line-height: 1.2;
}


.category-subtitle {
    max-width: 634px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #545454;
}


.btn-view-all:hover {
    background: var(--red-hover);
}

.category-cards {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    background: var(--white);
    border-radius: 16px;
    padding: 24px 18px 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.category-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.category-card-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.category-card-title {
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 700;
    color: #292929;
    margin-bottom: 8px;
    line-height: 1.3;
}

.category-card-stats {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1.4;
}

/* ========== Flea Market Section ========== */
.flea-market-section {

    padding: 0 0px 56px;
}

.flea-market-container {
max-width: 1840px;
margin: auto;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 14px 26px 18px clamp(20px,4vw,58px);
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(420px, 893px);
    gap: 28px;
    align-items: center;
}

.flea-market-content {
    padding: 8px 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flea-market-title {
    font-size: clamp(16px, 2vw, 40px);
    line-height: 1.18;
    font-weight: 700;
    color: #A8151A;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: 0.2px;
    max-width: 665px;
}


.flea-market-points {
    list-style: none;
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 620px;
}

.flea-market-points li {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 40px;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.55;
    color: #707070;
    font-weight: 400;
}

.flea-market-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #E3E3E3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.4 6.1L4.9 8.6L9.6 3.4' stroke='%237D7D7D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex-shrink: 0;
}

.flea-market-btn {

    background: #A8151A;
    color: #ffffff;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 600;
    border: 1px solid #640C0F;
    width: fit-content;
}

.flea-market-btn:hover {
    background: #981219;
}

.flea-market-media {
    position: relative;
}

.flea-market-image {
    width: 100%;
    display: block;
    border-radius: 16px;
    object-fit: cover;
}

.flea-market-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 37%;
    height: 41%;
    border-radius: 16px;
    background: #173A5D;
    color: #dce8f3;
    padding: 20px 14px 14px;
    text-align: center;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
}

.flea-market-badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.flea-market-badge-count {
    font-size: clamp(20px, 3vw, 42px);
    line-height: 1;
    font-weight: 700;
    margin-bottom: 10px !important;
    color: #dfe8f2;
}

.flea-market-badge-text {
    font-size: 11px;
    line-height: 1.35;
    color: #bfd0df;
    max-width: 130px;
    margin: 0 auto !important;
}

/* ========== Upcoming Events Section ========== */
.upcoming-section {
    padding: 0 10px 56px;
}

.upcoming-container {
 
    background: #0D2237 ;
    border-radius: 24px;
    padding: 40px clamp(15px, 2vw, 34px) 40px;
    overflow: hidden;
}

.upcoming-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.upcoming-title {
    color: #f3f7fb;
    font-size: clamp(16px, 2vw, 30px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding-bottom: 14px;
}



.upcoming-subtitle {
    color: #c8d4e2;
    font-size: 14px;
    line-height: 1.5;
    max-width: 470px;
}

.upcoming-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
}

.upcoming-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(229, 237, 247, 0.32);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upcoming-nav img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(348%) hue-rotate(173deg) brightness(100%) contrast(95%);
}

.upcoming-next img {
    transform: rotate(180deg);
}

.upcoming-slider {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

.upcoming-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.55s ease;
    will-change: transform;
}

.upcoming-card {
    flex-shrink: 0;
    background: #2a5a8b;
    border-radius: 24px;

    display: flex;
    flex-direction: column;
}

.upcoming-card-top {
    flex: 1;
    margin-bottom: 12px;
    padding: 24px clamp(20px, 1.2vw, 30px);
}

.upcoming-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.upcoming-tag {
    background-color: #4D749C;
    color: #e0ebf7;
    border: 1px solid rgba(227, 236, 247, 0.28);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upcoming-tag i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5a5f;
    display: block;
}

.upcoming-card-title {
    color: #f3f7fb;
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.25;
    font-weight: 700;
    min-height: 50px;
}

.upcoming-card-media {
    position: relative;
    width: 100%;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
height: 389px;
    flex-shrink: 0;
}
article.upcoming-card {
    max-width: 453px;
    margin: auto;
}
.upcoming-media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upcoming-card-date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    background: rgba(30, 28, 26, 0.62);
    color: #f5f5f5;
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    white-space: nowrap;
}

.upcoming-card-date img {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(335deg) brightness(102%) contrast(104%);
}



.artical-section-inner {
    /* Figma frame: 796 + 20 + 796 = 1612 content (+ 20 horizontal pad) */
    max-width: 1632px;
    margin-inline: auto;
    padding: clamp(30px, 7vw, 80px) 10px;
    box-sizing: border-box;
}

.artical-header {
    margin-bottom: 28px;
}

.artical-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
}

.artical-title {
    font-size: clamp(16px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #A8151A;
    line-height: 1.2;
}


.artical-subtitle {
    max-width: 520px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #545454;
}

.btn-artical-view-all {
    flex-shrink: 0;
    background: #A8151A;
    color: #ffffff;
    border-radius: 10px;
    max-width: 123px;
    width: 100%;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.btn-artical-view-all:hover {
    background: var(--red-hover);
}

.artical-view-all-mobile {
    display: none;
}

.artical-grid {
    display: grid;
    /* Featured column flexes; right stack locked to Figma 388+20+388 */
    grid-template-columns: minmax(0, 1fr) 796px;
    gap: 20px;
    align-items: stretch;
    max-width: 1612px;
    margin-inline: auto;
}

.artical-grid-right {
    display: grid;
    grid-template-columns: 388px 388px;
    gap: 20px;
    width: 796px;
    align-content: start;
}

.artical-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}

.artical-card-large {
    /* Matches two small cards + gap: 260 + 20 + 260 */
    height: 540px;
    min-height: 540px;
}

.artical-card-small {
    width: 388px;
    height: 260px;
    min-height: 260px;
}

.artical-card-wide {
    grid-column: 1 / -1;
    width: 100%;
    height: 260px;
    min-height: 260px;
}

.artical-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.artical-card-overlay {
    position: absolute;
    inset: 0;
    min-height: 100%;
}

.artical-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px;
}

.artical-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
 background: #00000066;
    color: #f5f5f5;
    font-size: 12px;
    line-height: 1;
    padding: 10px;
    margin-bottom: 10px;
}

.artical-card-date img {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(335deg) brightness(102%) contrast(104%);
}

.artical-card-text {
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px !important;
    line-height: 1.45;
    font-weight: 400;
    max-width: 100%;
    letter-spacing: 1.2px;
}

.artical-card-text-long {
    max-width: 92%;
}

.section_whether.show_mobile {
    display: none;
}

.canton-iframe-section {
    padding: 20px 10px;
}

/* ========== Canton Trade Section ========== */
.canton-trade-section {
    padding: 0px 10px clamp(40px, 6vw, 80px);
}

.canton-trade-inner {

    padding-top: 24px;
}

.canton-trade-header {
    text-align: center;
    margin: 0 auto 36px;
}

.canton-trade-title {
    font-size: clamp(16px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #A8151A;
    margin-bottom: 18px;
}

.canton-trade-title span {
    color: #A8151A;
}

.canton-trade-description {
    font-size: 14px;
    line-height: 1.65;
    max-width: 1184px;
    color: #545454;
    padding-top: 20px;
    margin: auto !important;
}

.canton-trade-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.canton-trade-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.canton-trade-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canton-trade-card-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.canton-trade-card-title {
    font-size: clamp(14px,1.5vw,18px);
    font-weight: 700;
    color: #292929;
    margin-bottom: 10px;
    line-height: 1.3;
}

.canton-trade-card-text {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #707070;
}

/* ========== Vendor Guide Section ========== */
.vendor-guide-section {
    padding: 0 10px clamp(30px, 7vw, 56px);
}

.vendor-guide-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(380px, 1fr);
    overflow: hidden;
    min-height: 520px;
}

.vendor-guide-content {
    padding: 44px;
    display: flex;
    flex-direction: column;
}

.vendor-guide-title {
    font-size: clamp(16px, 2.2vw, 30px);
    line-height: 1.333;
    font-weight: 700;
    text-transform: uppercase;
    color: #A8151A;
    max-width: 525px;
}
.vendor-guide-description {
    font-size: 16px;
    line-height: 1.9;
    color: #545454;
    margin-block: 12px 30px !important;
    max-width: 670px;
}
.vendor-guide-stats {
    display: grid;
    /* 2 equal cards per row; last card spans full width */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 525px;
    margin-bottom: 40px;
}

.vendor-stat-card {
    background: #f6f6f6;
    border-radius: 12px;
    padding: 16px 12px;
    min-height: 76px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vendor-stat-card.vendor-stat-card-wide {
    grid-column: 1 / -1;
}

.vendor-stat-value {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 600;
    color: #292929;
    margin-bottom: 6px !important;
}

.vendor-stat-label {
    font-size: 13px;
    line-height: 1.35;
    color: #707070;
}

.vendor-guide-actions {
    display: flex;
    gap: 12px;
}

.vendor-btn-online {
    background: #A8151A;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    max-width: 150px;
    width: 100%;
}

.vendor-btn-online:hover {
    background: var(--red-hover);
}

.vendor-btn-print {
    background: #205183;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 24px;
    max-width: 163px;
    font-size: 14px;
    width: 100%;
    font-weight: 600;
}

.vendor-btn-print:hover {
    background:#205183;
}

.vendor-guide-map {
    position: relative;
    min-height: 100%;
    background: #e8edf2;
    border-radius: 0 16px 16px 0;
    overflow: hidden;
}

.vendor-guide-map-viewport {
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    position: relative;
}

.vendor-guide-map-viewport iframe {
    width: calc(100% + 54px);
    height: 100%;
    min-height: 520px;
    margin: 0 -54px 0 0;
    border: 0;
    display: block;
}

.vendor-map-controls {
    position: absolute;
    right: 12px;
    bottom: 15px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.vendor-map-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    color: #666666;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
    transition: background 0.2s ease;
}

.vendor-map-control:hover {
    background: #f8f8f8;
}

.vendor-map-control-group {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    pointer-events: auto;
}

.vendor-map-control-group .vendor-map-control {
    width: 40px;
    height: 40px;
    box-shadow: none;
    border-radius: 0;
}

.vendor-map-control-group .vendor-map-control--zoom-in {
    border-bottom: 1px solid #e6e6e6;
}

.vendor-map-control--zoom-in,
.vendor-map-control--zoom-out {
    font-family: Arial, sans-serif;
}

.vendor-map-control--streetview {
    padding: 0;
}

.vendor-map-streetview-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: block;
}

/* ========== Visitor Section ========== */
.visiter-section {
    background: #0D2237;
    padding: 56px 18px 64px;
    border-radius: 30px;
    margin-inline: 10px;
}

.visiter-inner {
    max-width: 1700px;
    margin: 0 auto;
}
button.gm-control-active {
    display: none;
    visibility: hidden !important;
}

.planning-visit {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(380px, 1fr);
    gap: 36px;
    align-items: stretch;
    margin-bottom: 56px;
}

.planning-visit-title {
    font-size: clamp(20px, 2.3vw, 35px);
    line-height: 1.15;
    font-weight: 600;
    text-transform: uppercase;
    color: #f3f7fb;
padding-bottom: 32px;
}

.planning-visit-title span {
    color: #E9EEF3;
}

.planning-visit-subtitle {
    display: none;
}

.planning-visit-list {
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 476px;
}

.planning-visit-list::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 20px;
    border-left: 2px dashed rgba(201, 216, 232, 0.35);
}

.planning-visit-item {
    display: flex;
    gap: 16px;
    padding-bottom: 0;
    position: relative;
    align-items: flex-start;
}

.planning-visit-item:last-child {
    padding-bottom: 0;
}

.planning-visit-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(201, 216, 232, 0.35);
    background: #173A5D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.planning-visit-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(348%) hue-rotate(173deg) brightness(100%) contrast(95%);
}

.planning-visit-copy h3 {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    color: #f3f7fb;
    margin-bottom: 6px;
    line-height: 1.3;
}

.planning-visit-copy p {
    font-size: 14px;
    line-height: 1.5;
    color: #BAC9D9;
    max-width: 534px;
}

.planning-visit-media {
    height: 553px;
    border-radius: 16px;
    overflow: hidden;
}

.planning-visit-media img {
    width: 100%;
    height: 553px;
    display: block;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
}

.tips-shoppers {
    text-align: center;
    padding-top: clamp(30px, 6vw, 70px);
}

.tips-shoppers-title {
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    color: #E9EEF3;
    letter-spacing: 3%;
}


.tips-shoppers-subtitle {
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    color: #c8d4e2;
    max-width: 570px;
    margin: 15px auto 28px !important;

}

.tips-shoppers-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: left;
}

.tips-card {
    background: #2a5a8b;
    border-radius: 16px;
    padding: clamp(16px, 2vw, 30px);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tips-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(201, 216, 232, 0.28);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.tips-card-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(348%) hue-rotate(173deg) brightness(100%) contrast(95%);
}

.tips-card-title {
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 600;
    color: #E9EEF3;
    margin-bottom: 8px;
    line-height: 1.3;
}

.tips-card-text {
    font-size: 14px;
    line-height: 1.45;
    color: #BAC9D9;
}

/* ========== Canton History Section ========== */
.canton-history-section {

    padding: clamp(30px, 6vw, 80px) 10px clamp(40px, 6vw, 80px);
}
.canton-history-title {
    font-size: clamp(16px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-align: center;
    color: #A8151A;
    padding-bottom: 38px;

}

.canton-history-title span {
    color: #a52a2a;
}
.canton-history-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1504px;
    margin: auto;
}
.canton-history-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px clamp(16px, 2vw, 30px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.canton-history-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.canton-history-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fde8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.canton-history-card-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.canton-history-card-title {
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 600;
    color: #292929;
    line-height: 1.35;
}

.canton-history-card-text {
    font-size: 14px;
    line-height: 1.65;
    color: #707070;
}

/* CMS content helpers (TinyMCE / rich text) */
.category-subtitle p,
.upcoming-subtitle p,
.artical-subtitle p,
.vendor-guide-description p {
    margin: 0;
    color: inherit;
    font: inherit;
}

.canton-history-card-text ul,
.canton-history-card-text ol {
    margin: 2px 0 10px;
    padding-left: 1.15em;
    list-style-position: outside;
}

.canton-history-card-text ul {
    list-style-type: disc;
}

.canton-history-card-text ol {
    list-style-type: decimal;
}

.canton-history-card-text li {
    margin: 0 0 8px;
    padding-left: 0.35em;
    line-height: 1.55;
    color: #707070;
}

.canton-history-card-text li:last-child {
    margin-bottom: 0;
}

.canton-history-card-text li > p {
    margin: 0;
    display: inline;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.canton-history-card-text > p {
    margin: 0 0 8px;
}

.canton-history-card-text > p:last-child {
    margin-bottom: 0;
}

.canton-history-card-text a {
    color: #A8151A;
    font-weight: 600;
    text-decoration: none;
}

.canton-history-card-text a:hover {
    text-decoration: underline;
}

/* ========== Canton Footer Section ========== */
.canton-footer-section {
    background: #ffffff;
}

.canton-footer-main {
    padding: clamp(40px, 5vw, 64px) 18px clamp(36px, 4vw, 56px);
}

.canton-footer-inner {
  
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(140px, 0.85fr) minmax(180px, 0.95fr) minmax(180px, 0.95fr);
    gap: clamp(24px, 3vw, 48px);
}

.canton-footer-logo {
    display: inline-block;
    margin-bottom: 20px;
}

.canton-footer-logo img {
    height: 34px;
    width: auto;
    max-width: 134px;
    display: block;
}

anton-footer-about {
    font-size: 14px;
    line-height: 1.65;
    color: #707070;
    max-width: 360px;
}

p.canton-footer-about {
    color: #707070;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}

.canton-footer-heading {
    font-size: clamp(18px, 1.2vw, 20px);
    font-weight: 700;
    color: #1a4a7c;
    margin-bottom: 20px !important;
    line-height: 1.3;
}

.canton-footer-links {
    list-style: none;
}

.canton-footer-links li {
    margin-bottom: 10px;
}

.canton-footer-links li:last-child {
    margin-bottom: 0;
}

.canton-footer-links a {
    font-size: 14px;
    line-height: 1.5;
    color: #707070;
    text-decoration: none;
    transition: color 0.2s ease;
}

.canton-footer-links a:hover {
    color: #1a4a7c;
}

.canton-footer-contact {
    font-size: 14px;
    line-height: 1.5;
    color: #707070;
    padding-bottom: 10px;
}

.canton-footer-contact:last-of-type {
    margin-bottom: 10px;
}

.canton-footer-social {
    display: flex;
    gap: 20px;
}

.canton-footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.canton-footer-social-link:hover {
    background: #e2e8ef;
}

.canton-footer-social-link img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.canton-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.canton-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    max-width: 182px;
    width: 100%;
    text-align: center;
    transition: opacity 0.2s ease;
}

.canton-footer-btn:hover {
    opacity: 0.92;
}

.canton-footer-btn-red {
    background: #A8151A;
    border: 1px solid #640C0F;
}

.canton-footer-btn-blue {
    background: #1e4d7b;
}

.canton-footer-bottom {
    background: #0D2237;
    padding: 32px 18px;
}

.max-content {
    max-width: 182px;
    width: 100%;
}

.canton-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.canton-footer-col {
    margin-left: auto;
}

.canton-footer-copy {
    font-size: 13px;
    line-height: 1.5;
    color: #8899aa;
}

.canton-footer-legal {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.canton-footer-legal a {
    font-size: 13px;
    line-height: 1.5;
    color: #8899aa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.canton-footer-legal a:hover {
    color: #ffffff;
}
.custom-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
.max-content {
    max-width: 182px;
    width: 100%;
    align-items: self-start;
    margin-left: auto;
    text-align: left;
    justify-content: flex-start;
}