@import url('bootstrap.min.css');
@import url('phosphor-light.css');
@import url('polar.css');

:root {
    /* Cigar Rings brand palette (CTI Specialist) */
    --brand-dark: #0A4A2E;
    --brand-mid: #006F46;
    --brand-primary: #006F46;
    --brand-light: #8DAE84;
    --brand-orange: #FF5317;
    --brand-yellow: #F8E72B;
    --brand-light-grey: #E7EEE2;
    --link-color: var(--brand-primary);
    --font-light: "FT Polar Light", Arial, sans-serif;
    /* One shared size for all primary titles (page hero/header h1, section h2s,
       specialists strip). Change here to move them all together — matches CTI. */
    --title-size: clamp(1.6rem, 3vw, 2.15rem);
    /* One shared vertical rhythm for every content section (top & bottom).
       Change here to move all section spacing together. */
    --section-pad: clamp(32px, 4vw, 56px);
    --btn-radius: 999px;
    --btn-border-width: 1px;
    /* One shared height for all affiliate/partner logos site-wide
       (cigar-rings crests are the exception and set their own size). */
    --logo-height: 48px;
    --cti-gradient-opacity: 0.4;
    /* Dark blue tone sits behind the gradient; gradient rides on top at 0.8 opacity */
    --cti-gradient-base: var(--brand-dark);
    /* Stretch to the section box so every band fills completely */
    --cti-gradient-size: 100% 100%;
    --cti-gradient-position: center;
    --cti-gradient-image: image-set(
        url('/img/cti-gradient.webp') type('image/webp'),
        url('/img/cti-gradient.jpg') type('image/jpeg')
    );
    /* Icons: glyph size + tap/click hit area (uniform site-wide) */
    --icon-size: 1.25rem;
    --icon-hit: 2.75rem;
    /* Only two layout modes: desktop ≥1200px, small ≤1199px */
    --bp-desktop: 1200px;
    /* Space between hero/header band and body content */
    --hero-band-height: 445px;
    --hero-band-margin: clamp(48px, 7vw, 80px);
}

/* ===  Global icons  ===  */
.icon,
i.ph-light,
.ph-light {
    font-size: var(--icon-size);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.icon-btn,
.mobile-menu-close,
.cookie-banner-close,
.cookie-settings-close,
.modal-header .close,
button.close {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-hit);
    height: var(--icon-hit);
    min-width: var(--icon-hit);
    min-height: var(--icon-hit);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    line-height: 1;
    font-size: var(--icon-size);
    font-weight: 300;
    color: inherit;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.icon-btn .ph-light,
.icon-btn .icon,
.mobile-menu-close .ph-light,
.cookie-banner-close .ph-light,
.cookie-settings-close .ph-light,
.modal-header .close .ph-light,
button.close .ph-light {
    font-size: var(--icon-size);
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Hamburger / X glyph in navbar toggle */
#menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
    padding: 0;
    line-height: 1;
}

#menu-button::before {
    display: block;
    font-family: "Phosphor-Light";
    font-style: normal;
    font-weight: normal;
    font-size: var(--icon-size) !important;
    width: var(--icon-size) !important;
    height: var(--icon-size);
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#menu-toggle-button,
.navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    float: right;
}

#menu-toggle-button:hover,
#menu-toggle-button:focus,
.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: transparent;
    outline: none;
}

#menu-toggle-button .hamburger-title,
.navbar-toggle .hamburger-title {
    display: none !important;
}

html {
    font-size: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-light);
    font-weight: 300;
    color: #000;
    font-size: 1.125rem;
    background-color: #fff;
    overflow-x: hidden;
}

/* No 700 anywhere — bold elements (incl. Bootstrap's b/strong: bold) render at 500 */
b, strong {
    font-weight: 500;
}

body.modal-open {
    padding-right: 0 !important;
}

.container-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background-color: #fff;
    overflow: hidden;
}

.header-image-start {
    height: var(--hero-band-height);
    margin-bottom: var(--hero-band-margin);
}

.header-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; /* keep .container centered — don't stretch full-bleed */
    height: var(--hero-band-height);
    min-height: var(--hero-band-height);
    max-height: var(--hero-band-height);
    margin-bottom: var(--hero-band-margin);
    box-sizing: border-box;
    overflow: hidden;
}

/* Title block: use Bootstrap .container width so it lines up with page content */
.header-image > .container.header-image-content,
.header-image-content.container {
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
    padding-bottom: clamp(20px, 3.5vh, 40px);
    box-sizing: border-box;
    align-self: center;
    flex: 0 0 auto;
}

.header-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    max-width: 36rem;
    padding: 0;
    margin: 0;
    z-index: 2;
}

.header-text h1 {
    margin: 0 0 0.35em;
    font-family: var(--font-light);
    font-weight: 300;
    font-size: var(--title-size);
    line-height: 1.15;
    color: #fff;
}

.header-text h3,
.header-text .header-subtext {
    margin: 0;
    max-width: 28rem;
    font-family: var(--font-light);
    font-weight: 300;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}

.header-text--inline {
    padding-top: 0;
}

.header-text--inline h1,
.header-text--inline h3,
.header-text--inline .header-subtext {
    color: #000;
}

/* Legacy product switcher removed from markup — keep dead CSS inert */
.header-objekte,
a[class*="btn-produkt-"] {
    display: none !important;
}

/* Carousel arrows hidden (Colombia style - no arrows) */
.carousel-control {
    display: none;
}

.btn-available {
    padding: 4px;
    border-radius: 0;
    border: none;
    background: transparent;
}

.btn-available:hover,
.btn-available:focus {
    padding: 4px;
    background: transparent;
}

/* Company page: affiliate logos (Viappiani-style spacing) */
.company-logos {
    margin: 0 40px 5px 40px;
}
.company-logos .btn-available {
    margin-right: 10px;
    margin-bottom: 10px;
}
.company-logos p {
    margin-bottom: 10px;
}

/* Affiliate logos from brand pack (SVG) */
img.btn-available,
a.btn-blank.btn-available img,
img.affiliate-logo {
    display: inline-block;
    /* Uniform height for all affiliate logos (viappiani, omnipack, …).
       No max-width cap, otherwise wide logos scale down and lose height.
       Cigar-rings crests override this below with their own dimensions. */
    height: var(--logo-height);
    width: auto;
    max-width: 100%;
    max-height: none;
}

img.btn-available[src*="cigar-rings"],
a.btn-blank.btn-available img[src*="cigar-rings"],
img.affiliate-logo[src*="cigar-rings"] {
    height: 72px;
    max-width: 90px;
}

/* Cigar bands page: single no-location crest, larger */
img.affiliate-logo.affiliate-logo--cigar-large,
a.btn-blank.btn-available img.affiliate-logo--cigar-large {
    height: 140px;
    max-width: 160px;
    max-height: none;
}

/* Product cards: Brainds small-size mark, same height as before */
img.affiliate-logo.affiliate-logo--cigar-small,
a.btn-blank.btn-available img.affiliate-logo--cigar-small {
    height: 72px;
    max-width: 90px;
}

/* Company page: keep Colombia the same height as the other affiliate logos */
.company-logos .affiliate-logo--colombia {
    height: var(--logo-height);
    width: auto;
    max-width: 100%;
    max-height: none;
}

.company-logos-cigar-pair {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 220px;
    max-width: 100%;
}

.company-logos-cigar-pair a {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    line-height: 0;
}

.company-logos-cigar-pair .affiliate-logo--cigar-crest,
.company-logos-cigar-pair img.btn-available.affiliate-logo.affiliate-logo--cigar-crest {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
}

.col-maxwidth {
    margin-bottom: 40px;
    max-width: min(740px, 100%);
}

/* Nested Bootstrap rows inside the measure: don't bleed past the text column */
.col-maxwidth > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Text links: thin animated underline in foreground color */
a {
    outline: 0;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    -webkit-transition: background-size 0.25s ease;
    transition: background-size 0.25s ease;
}

a:focus,
a:active {
    outline: 0;
}

a:hover,
a:focus {
    color: #000;
    text-decoration: none;
    background-size: 100% 1px;
}

/* In-copy text links use brand cyan so they stand out from the dark-blue body
   text. Scoped to main content paragraphs/lists; excludes buttons and the
   chrome (nav/footer) which keep their own colors. */
main p a:not(.btn),
main li a:not(.btn) {
    color: #000;
}

main p a:not(.btn):hover,
main p a:not(.btn):focus,
main li a:not(.btn):hover,
main li a:not(.btn):focus {
    color: #000;
}

/* Non-text links: no underline animation */
.btn,
.btn:hover,
.btn:focus,
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus,
.dropdown-menu > li > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.site-footer-brand,
.site-footer-brand:hover,
.site-footer-brand:focus,
.site-footer-social-link,
.site-footer-social-link:hover,
.site-footer-social-link:focus,
.popover-button,
.popover-button:hover,
.icon-btn,
.icon-btn:hover,
.mobile-menu-nav > a,
.mobile-menu-nav > a:hover,
.mobile-menu-lang a,
.mobile-menu-lang a:hover,
.index-specialists-logos a,
.index-specialists-logos a:hover,
a.btn-blank,
a.btn-blank:hover,
a.btn-available,
a.fancybox,
a.fancybox:hover,
.carousel-control,
.map-caption > a {
    background-image: none;
    background-size: auto;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

h1 {
    margin-bottom: 15px;
    font-family: var(--font-light);
    font-size: var(--title-size);
}

h2 {
    margin: 0 0 20px 0;
    font-family: var(--font-light);
    font-size: var(--title-size);
    line-height: 1.3;
}

h3 {
    margin: 0 0 20px 0;
    font-size: 1.3rem;
    font-weight: 500;
}

h4 {
    margin: 20px 0 5px 0;
    font-size: 1rem;
    font-weight: 500;
}

.h4 {
    margin: 5px 0;
    padding: 6px 5px 10px 20px;
    font-size: 1rem;
    font-weight: 500;
}

p.featured {
    margin-bottom: 30px;
}

.img-border {
    border: 1px #ddd solid;
}

.bottom30 {
    margin-bottom: 30px;
}

.bottom40 {
    margin-bottom: 40px;
}

.bottom60 {
    margin-bottom: 60px;
}

.padding-left-owl {
    display: inline-block;
    padding-left: 20px;
}

.height140 {
    height: 140px;
    padding: 15px 20px 0 0;
}

hr {
    margin: 4.6rem 0;
    border: 0;
    border-top: #e5e5e5 1px solid;
}

hr.space {
    margin: 30px 0;
    border: 1px transparent solid;
}

hr.car {
    margin: 0 0 clamp(24px, 5vw, 40px) 0;
    border: 0;
    border-top: #e5e5e5 1px solid;
}

hr.accord {
    margin: 20px 0;
    border: 0;
    border-top: #e5e5e5 1px solid;
}

hr.no-lines {
    border: transparent 0 solid;
}

/* ===  Bullet List (en-dash markers)  ===  */
ul.circle li {
    list-style-type: none;
    line-height: 2.1;
}

li.circle {
    position: relative;
    margin-bottom: 0;
    padding-left: 1.1em;
}

li.circle:before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-light);
    content: "–";
    color: #000;
    font-size: inherit;
    font-weight: 300;
    line-height: inherit;
}

/* ===  /Bullet List  ===  */

/* ===  Top-Head  ===  */
.head {
    margin: 20px 0 0 0;
    padding: 0;
    z-index: 20;
}

.list-inline a {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

.list-inline a:hover {
    color: #000;
}

.list-inline > li {
    padding-right: 0;
    padding-left: 10px;
}

/* ===  /Top-Head  ===  */

/* ===  Head-Image  ===  */
.header-subtext {
    max-width: 28rem;
}

.rahmenbox-available {
    max-width: 360px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: bottom right;
    border: none;
    margin-bottom: 40px;
    padding: 0;
}

.available-inhalt {
    padding: 20px;
}

/* ===  /Head-Image  ===  */

/* Buttons für Produkt-Übersicht */
/* Self-adhesive */
.btn-produkt-self-adhesive-pos {
    position: absolute;
    bottom: 3px;
    right: 0;
    z-index: 11;
}

.btn-produkt-self-adhesive {
    height: 345px;
    width: 110px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-self-adhesive:focus,
.btn-produkt-self-adhesive.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-self-adhesive:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-self-adhesive:active,
.btn-produkt-self-adhesive.active,
.open > .dropdown-toggle.btn-produkt-self-adhesive {
    background-color: transparent;
    border-color: transparent;
}

/* Flex-Pack */
.btn-produkt-flex-pos {
    position: absolute;
    bottom: 3px;
    right: 237px;
    z-index: 11;
}

.btn-produkt-flex {
    height: 206px;
    width: 149px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-flex:focus,
.btn-produkt-flex.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-flex:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-flex:active,
.btn-produkt-flex.active,
.open > .dropdown-toggle.btn-produkt-flex {
    background-color: transparent;
    border-color: transparent;
}

/* IML */
.btn-produkt-iml-pos {
    position: absolute;
    bottom: 3px;
    right: 716px;
    z-index: 11;
}

.btn-produkt-iml {
    height: 79px;
    width: 202px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-iml:focus,
.btn-produkt-iml.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-iml:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-iml:active,
.btn-produkt-iml.active,
.open > .dropdown-toggle.btn-produkt-sac {
    background-color: transparent;
    border-color: transparent;
}

/* Folding cartons */
.btn-produkt-folding-cartons-pos {
    position: absolute;
    bottom: 3px;
    right: 480px;
    z-index: 11;
}

.btn-produkt-folding-cartons {
    height: 163px;
    width: 217px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-folding-cartons:focus,
.btn-produkt-folding-cartons.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-folding-cartons:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-folding-cartons:active,
.btn-produkt-folding-cartons.active,
.open > .dropdown-toggle.btn-produkt-folding-cartons {
    background-color: transparent;
    border-color: transparent;
}

/* Shoulder Boxes */
.btn-produkt-shoulder-boxes-pos {
    position: absolute;
    bottom: 3px;
    right: 941px;
    z-index: 11;
}

.btn-produkt-shoulder-boxes {
    height: 102px;
    width: 258px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-shoulder-boxes:focus,
.btn-produkt-shoulder-boxes.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-shoulder-boxes:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-shoulder-boxes:active,
.btn-produkt-shoulder-boxes.active,
.open > .dropdown-toggle.btn-produkt-shoulder-boxes {
    background-color: transparent;
    border-color: transparent;
}

/* Sleeves */
.btn-produkt-sleeves-pos {
    position: absolute;
    bottom: 3px;
    right: 116px;
    z-index: 11;
}

.btn-produkt-sleeves {
    height: 223px;
    width: 96px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-sleeves:focus,
.btn-produkt-sleeves.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-sleeves:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-sleeves:active,
.btn-produkt-sleeves.active,
.open > .dropdown-toggle.btn-produkt-sleeves {
    background-color: transparent;
    border-color: transparent;
}

/* Cigar bands */
.btn-produkt-cigar-bands-pos {
    position: absolute;
    bottom: 3px;
    right: 408px;
    z-index: 11;
}

.btn-produkt-cigar-bands {
    height: 184px;
    width: 46px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.btn-produkt-cigar-bands:focus,
.btn-produkt-cigar-bands.focus {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-cigar-bands:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-produkt-cigar-bands:active,
.btn-produkt-cigar-bands.active,
.open > .dropdown-toggle.btn-produkt-cigar-bands {
    background-color: transparent;
    border-color: transparent;
}

/* ===  MAIN-NAVIGATION  ===  */
.navbar-default {
    background-color: transparent;
    border-color: transparent;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/* Scrolled / fixed navbar: solid white, no shadow */
#topNav.navbar-fixed-top {
    box-shadow: none;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

#topNav.navbar-fixed-top.navbar-transparent {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#topNav.navbar-fixed-top.navbar-transparent::before {
    display: none;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) {
    background-color: #fff !important;
    background-image: none !important;
}

#topNav.navbar-fixed-top:not(.navbar-transparent)::before {
    display: none;
}

#topNav.navbar-fixed-top > .container {
    position: relative;
    z-index: 1;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) .nav > li > a,
#topNav.navbar-fixed-top:not(.navbar-transparent) #menu-toggle-button,
#topNav.navbar-fixed-top:not(.navbar-transparent) .navbar-toggle,
#topNav.navbar-fixed-top:not(.navbar-transparent) .navbar-phone-btn,
#topNav.navbar-fixed-top:not(.navbar-transparent) .navbar-lang-btn,
#topNav.navbar-fixed-top:not(.navbar-transparent) #menu-button::before {
    color: var(--brand-dark) !important;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) .cti-navbar-logo--dark {
    display: block !important;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) .cti-navbar-logo--light {
    display: none !important;
}

/* ===  /MAIN-NAVIGATION  ===  */

/* ===  Collapse bar  ===  */
.top-header {
    background-color: transparent;
    border-color: transparent;
}

/* ===  /Collapse bar  ===  */

/* ===  CUSTOMIZE THE NAVBAR  ===  */
.navbar-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}




/* ===  /CUSTOMIZE THE NAVBAR  ===  */

/* ===  NAVIGATION-NAVBAR  ===  */
/* Full-bleed bar; inner .container matches body content width */
.navbar,
#topNav {
    height: 90px;
    border: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

#topNav > .container {
    position: relative;
    height: 100%;
}

/* Desktop: logo left | links + CTA right */
@media screen and (min-width: 1200px) {
    /* Taller bar on the widest screens (governs the solid-white scrolled background) */
    #topNav {
        height: 120px;
    }

    #topNav > .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #topNav .navbar-header {
        float: none;
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }

    #topNav .navbar-collapse.navbar-responsive-collapse {
        float: none;
        display: flex !important;
        align-items: center;
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        z-index: 1;
        padding: 0;
        margin: 0 0 0 auto;
        height: 100%;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border: 0;
        background: transparent;
    }

    #topNav .navbar-nav {
        float: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        margin: 0;
    }

    #topNav .navbar-nav > li {
        float: none;
    }

    #topNav .navbar-nav > li > a {
        margin: 0 0 0 28px;
        padding: 0;
        line-height: 1;
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    #topNav .navbar-nav > li:first-child > a {
        margin-left: 0;
    }
}

/* Navbar layout: Bootstrap float – desktop: logo left, nav right; mobile: logo left, toggle right */
.navbar-header {
    float: left;
}
.navbar-header::after {
    content: "";
    display: table;
    clear: both;
}
.navbar-brand {
    min-height: 90px;
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: currentColor;
}

.navbar-nav > li > .dropdown-menu {
    margin: 10px 0 0 15px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    color: #000;
    background-color: transparent;
}

.nav > li > a {
    position: relative;
    display: inline-block;
    margin: 25px 0 15px 30px;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 500;
    border-bottom: none;
    /* keep global thin animated underline on hover */
    -webkit-transition: color 0.2s ease, background-size 0.25s ease;
    transition: color 0.2s ease, background-size 0.25s ease;
}

.nav > li > a::after {
    content: none;
    display: none;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 35px;
    margin: 10px 0 6px 0;
    height: 5px;
    border-radius: 20px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}


.navbar-right .dropdown-menu {
    left: 15px;
    right: auto;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #000;
    background-color: transparent;
    background-size: 100% 1px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--brand-primary);
}

.navbar .dropdown-menu {
    padding: 0;
    border-radius: 0;
    border: 1px #edf1f1 solid;
    color: #000;
    font-weight: 500;
}

.dropdown-menu > li > a {
    margin-top: 0;
    min-width: 240px;
    padding: 10px 12px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #fff;
    background-color: var(--brand-primary);
}

/* ===  /NAVIGATION-NAVBAR  ===  */

/* ===  TRIANGLE  ===  */
.triangle-border:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 17px 17px 0;
    border-style: solid;
    border-color: #edf1f1 transparent;
    display: block;
    width: 0;
}

.triangle-border:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 47px;
    border-width: 16px 16px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}

.triangle-border.top::before {
    top: -17px;
    bottom: auto;
    left: -1px;
    border-width: 0 17px 17px 0;
}

.triangle-border.top::after {
    top: -15px;
    bottom: auto;
    left: 0px;
    border-width: 0 15px 15px 0;
}

/* ===  /TRIANGLE  ===  */

/* ===  CUSTOMIZE THE CAROUSEL  ===  */
/* Omnipack exact: Colombia golden standard (CTI brand color var(--brand-primary)) */

/* Static homepage hero — 50vh band */
.hero-static {
    position: relative;
    display: block;
    overflow: hidden;
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
    margin-bottom: var(--hero-band-margin);
    background-color: var(--cti-gradient-base);
    color: #fff;
    box-sizing: border-box;
}

.hero-static-media {
    /* Gradient comes from .hero-static::before — same height-aware crop as headers */
    display: none;
}

.hero-static-img {
    display: block;
    width: auto;
    height: 150%;
    min-width: 100%;
    object-fit: cover;
    object-position: left bottom;
    transform: none;
    opacity: var(--cti-gradient-opacity);
}

/* CR Logo graphic — bottom-right on all heroes/headers */
.hero-graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(34vw, 360px);
    max-width: 100%;
    pointer-events: none;
    line-height: 0;
    transform: translate(-7%, 25%);
}

.hero-static .hero-graphic {
    z-index: 2;
    width: min(40vw, 420px);
}

.hero-graphic picture,
.hero-graphic img {
    display: block;
    width: 100%;
    height: auto;
    /* Combination mark SVG is already white; no filter needed */
}

.hero-static-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
    padding-bottom: clamp(24px, 4.5vh, 44px);
    box-sizing: border-box;
    color: #fff;
}

.hero-static-title {
    margin: 0 0 clamp(10px, 1.8vh, 18px);
    max-width: 36rem;
    font-family: var(--font-light);
    font-size: var(--title-size);
    font-weight: 300;
    line-height: 1.05;
    color: #fff;
}

.hero-static-text {
    max-width: 28rem;
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    font-family: var(--font-light);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: 300;
    line-height: 1.45;
    color: #fff;
}

.hero-static-content > p {
    margin: 0;
}

.carousel-hero-wrapper {
    overflow: hidden;
}
/* Carousel slide transition - match sister sites (Omnipak, Viappiani).
   Transition left and transform only (Bootstrap uses left or translate3d by browser).
   Explicit properties prevent "animates out but not in" from transitioning wrong props. */
.carousel.slide .carousel-inner > .item {
    -webkit-transition: left 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    -moz-transition: left 0.6s ease-in-out, transform 0.6s ease-in-out;
    -o-transition: left 0.6s ease-in-out, transform 0.6s ease-in-out;
    transition: left 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.carousel {
    margin-bottom: 80px;
}

/* Keep Bootstrap slide states intact so incoming slides animate correctly */
.carousel-hero-wrapper .carousel-inner > .item.next,
.carousel-hero-wrapper .carousel-inner > .item.prev {
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel h3 {
    max-width: 400px;
    font-size: 1rem;
    font-weight: 500;
}
.carousel-caption {
    left: auto;
    right: auto;
    padding-bottom: 60px;
    padding-left: 65px;
    bottom: 20px;
    text-align: left;
    color: #000;
    text-shadow: none;
}
.carousel .item {
    height: 576px;
    background-color: #e8ecf0;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    max-width: none;
    width: auto;
    height: 576px;
    object-fit: cover;
    object-position: center;
}
@media (min-width: 768px) {
    .carousel-inner > .item > img {
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
.carousel-indicators li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 11px;
    text-indent: -999px;
    border: 1px solid #656564;
    border-radius: 10px;
    cursor: pointer;
    background-color: transparent;
}

.carousel-indicators .active {
    margin: 10px;
    width: 19px;
    height: 19px;
    background-color: var(--brand-primary);
    border: 0;
}

.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 19px;
    height: 19px;
    margin: 10px 8px;
    opacity: 1;
    border-radius: 20px;
    background: transparent;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background-color: var(--brand-primary);
    width: 19px;
    height: 19px;
    border: 1px transparent solid;
}

/* ===  /CUSTOMIZE THE CAROUSEL  ===  */

.rahmenbox {
    background-repeat: no-repeat;
    background-position: bottom right;
    border: 1px #edf1f1 solid;
    border-right: none;
    border-bottom: none;
    padding: 0;
}

.padding-left-rahmen {
    padding: 0 0 15px 20px;
    display: table;
}

.padding-right-rahmen {
    padding: 10px 20px 0 40px;
}

/* ===  Link-Buttons (ghost pills per brand reference)  ===  */
.btn-colored,
.btn-lg.btn-colored,
.btn-group-lg > .btn.btn-colored {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--font-light);
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    border: var(--btn-border-width) solid #000;
    border-radius: var(--btn-radius);
    background-color: transparent;
    background-image: none;
    line-height: 1.2;
    -webkit-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-colored:hover,
.btn-colored:focus,
.btn-colored:active {
    color: #fff;
    border-color: #000;
    background-color: #000;
    background-image: none;
}

/* Ghost on dark surfaces (hero, specialists band) */
.btn-colored.btn-light,
.hero-static .btn-colored {
    color: #fff;
    border-color: #fff;
    background-color: transparent;
}

.btn-colored.btn-light:hover,
.btn-colored.btn-light:focus,
.hero-static .btn-colored:hover,
.hero-static .btn-colored:focus {
    color: #000;
    border-color: #fff;
    background-color: #fff;
}

.btn-lg,
.btn-group-lg > .btn {
    padding-right: 28px;
    padding-left: 28px;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.2;
}

.cti-gradient-band,
.header-image,
.hero-static,
.site-footer {
    width: 100%;
}

/* Shared CTI brand gradient — sized by section height, pinned left-bottom */
.cti-gradient-band,
.header-image,
.hero-static {
    position: relative;
    overflow: hidden;
    background-color: var(--cti-gradient-base);
    background-image: none;
    isolation: isolate;
}

.cti-gradient-band::before,
.header-image::before,
.hero-static::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--cti-gradient-base);
    background-image: url('/img/cti-gradient.jpg');
    background-image: var(--cti-gradient-image);
    /* Always fill the section box (width + height), no crop/cover math */
    background-size: var(--cti-gradient-size);
    background-position: var(--cti-gradient-position);
    background-repeat: no-repeat;
    opacity: var(--cti-gradient-opacity);
    transform: none;
}

.cti-gradient-band > *,
.header-image > .hero-graphic,
.hero-static > *:not(.hero-graphic) {
    position: relative;
    z-index: 1;
}

.header-image > .hero-graphic,
.hero-static > .hero-graphic {
    position: absolute;
    z-index: 2;
}

.index-specialists {
    color: #fff;
    padding: clamp(40px, 6vw, 64px) 0;
    margin: clamp(48px, 8vw, 80px) 0;
}

.index-specialists-title {
    margin: 0 0 clamp(32px, 5vw, 48px);
    font-family: var(--font-light);
    font-size: var(--title-size);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

.index-specialists-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 0;
    row-gap: clamp(20px, 4vw, 32px);
    width: 100%;
}

.index-specialists-logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.index-specialists-logos img {
    display: block;
    height: var(--logo-height);
    width: auto;
    max-width: 100%;
}

.index-specialists-logos img.affiliate-logo--cigar {
    height: 72px;
    max-width: 90px;
}

@media screen and (max-width: 1199px) {
    .index-specialists-logos img {
        height: clamp(28px, 7vw, 36px);
        max-width: 100%;
    }

    .index-specialists-logos img.affiliate-logo--cigar {
        height: clamp(48px, 12vw, 64px);
        max-width: clamp(64px, 18vw, 84px);
    }

    .hero-graphic {
        width: min(70vw, 360px);
        transform: translate(-1%, 25%);
    }
}

.rahmenpadding {
    margin-left: 20px;
    margin-bottom: 20px;
}

/* === Colored Box  ===  */
.featured-box-container {
    margin: 80px 0;
    padding: 0 0 15px 0;
    background-color: var(--brand-primary);
}

.featured-box h4 {
    color: #fff;
    margin-top: 15px;
    font-size: 1.125rem;
    font-weight: 500;
}

.featured-box {
    padding: 40px 0 35px 0;
}

.featured-box img {
    height: 55px;
}

/* === /Colored Box  ===  */

/* ===  NEWS BOX (Aktuelle Meldungen)  ===  */
.newsbox {
    margin: 15px 15px 15px 15px;
}

.newsbox-text {
    height: 200px;
}

.newsbox h3 {
    margin-top: 0;
    margin-bottom: 100px;
}

/* ===  /NEWS BOX  ===  */

/* ===  Produkt Box  ===  */
.produktbox {
    border: 1px solid var(--brand-primary);
    background-color: #fff;
}

.produktbox:hover {
    border: 1px solid var(--brand-primary);
    background-color: #fff;
}

/* Product overview grid: borderless cards */
.product-overview-grid .produktbox,
.product-overview-grid .produktbox:hover {
    border: 0;
}

.produktbox > a {
    display: block;
    background-color: #fff;
}

.produktbox > a > img {
    display: block;
    width: 100%;
    height: auto;
    background-color: #fff;
}

.produktbox-inhalt {
    padding: 20px;
}

.produktbox-text {
    min-height: 460px;
    padding: 0 20px 20px;
}

.produktbox-desc {
    min-height: 130px;
}

.reqestbox {
    border-left: 1px #ddd solid;
    border-right: 1px #ddd solid;
    border-top: 1px #ddd solid;
    padding-top: 20px;
}

section.produktbox {
    color: #000;
}

.produktbox h3 {
    margin: 20px 0 20px 0;
    font-size: 1.3rem;
    font-weight: 500;
}

.boxlink:hover, a:focus, a:active {
    text-decoration: none;
}

.reqest-call {
    min-height: 150px;
    padding: 20px;
}

/* ===  Item Box  ===  */
.item-container {
    margin-bottom: 60px;
    background-color: #fff;
}

.item-box {
    padding-top: 25px;
    padding-bottom: 25px;
    border: 1px #e5eaea solid;
    border-bottom: none;
}

.item-floatbox {
    padding: 5px;
}

.item-linkbox {
    width: 260px;
    border: none;
    width: auto;
}

/* ===  /Item Box  ===  */

/* ===  SVG   ===  */
.svg {
    width: 7rem;
    height: 7rem;
}

/* ===  Bildergalerie  ===  */
.fancybox {
    display: block;
    position: relative;
}

.fancybox:hover:before {
    content: none;
    display: none;
}

.img-thumbnail {
    margin: 30px 0 0 0;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* Linked images: subtle opacity only (no overlays / grey boxes) */
a:not(.navbar-brand):not(.site-footer-brand) img,
a.btn-blank img,
a.fancybox img,
a.btn-available img,
.index-specialists-logos a img,
.company-logos a img {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

a:not(.navbar-brand):not(.site-footer-brand):not(:has(.hero-graphic)):hover img,
a:not(.navbar-brand):not(.site-footer-brand):focus img,
a.btn-blank:hover img,
a.fancybox:hover img,
a.btn-available:hover img,
.index-specialists-logos a:hover img,
.company-logos a:hover img {
    opacity: 0.72;
}

.hero-graphic img {
    opacity: 1 !important;
}

/* Gallery examples: fluid grid (no tiny fixed thumbnails) */
.wm-gallery > .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Bootstrap adds clearfix ::before/::after to .container; on a grid they
   become empty grid items (an empty leading/trailing cell). Remove them. */
.wm-gallery > .container::before,
.wm-gallery > .container::after {
    content: none;
    display: none;
}

.wm-gallery .pull-left {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.wm-gallery .pull-left > a {
    display: block;
}

.wm-gallery .img-thumbnail {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

@media screen and (max-width: 1199px) {
    .wm-gallery > .container {
        grid-template-columns: 1fr;
        gap: clamp(16px, 4vw, 24px);
    }

    .wm-gallery .img-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* === / Bildergalerie  ===  */

/* ===  Modal  ===  */
body.modal-open {
    padding-right: 0 !important;
}

.modal-header .close {
    margin: 0;
}

.modal-header {
    padding: 5px;
    border-bottom: 0 solid transparent;
}

.modal-title {
    margin: 10px 0 0 20px;
}

.modal-content {
    background-color: #FFF;
    border: 0 solid rgba(0, 0, 0, 0);
    border-radius: 0;
}

.modal-body {
    padding: 0;
}

.pull-left:nth-child(1n) {
    margin-right: 30px;
}

.pull-left:nth-child(3n) {
    margin-right: 0;
}

.ekko-lightbox-nav-overlay a span {
    color: #000;
}

.ekko-lightbox-nav-overlay a {
    opacity: 0.5 !important;
}

/* ===  /Modal  ===  */

/* ===  Contact page  ===  */
.contact-page-form {
    margin-top: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(40px, 6vw, 64px);
    max-width: none;
}

.contact-page-form .form-group {
    margin-bottom: 1.1rem;
}

.contact-page-form .form-control,
.contact-page-form textarea.form-control,
.contact-page-form select.form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 8px 20px;
    border: 1px solid #000;
    border-radius: 999px;
    box-shadow: none;
}

/* Message box: rounded, not a full pill (multi-line) */
.contact-page-form textarea.form-control {
    height: auto;
    padding: 12px 20px;
    border-radius: 20px;
}

.contact-page-form .form-control:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.contact-page-form .checkbox label {
    display: block;
    white-space: normal;
    font-weight: 300;
    line-height: 1.45;
}

.contact-page-intro {
    margin-top: 0;
    padding-bottom: clamp(40px, 6vw, 64px);
}

.contact-address-block {
    margin-bottom: 0;
    max-width: 720px;
}

.contact-address-block h3 {
    margin-top: 0;
}

.form-required-hint {
    margin-bottom: 20px;
    color: #000;
}

.contact-map-embed {
    width: 100%;
    margin-top: 0;
    margin-bottom: clamp(40px, 6vw, 64px);
}

.contact-map-embed iframe,
.contact-map-embed .contact-map-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(240px, 50vw, 440px);
    border: 0;
}

/* ===  Map  ===  */
.map {
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.map-image img {
    width: 100%;
}

.popover-content {
    padding: 20px;
    line-height: 1.7;
}

.popover-content .popover-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 40px;
    margin: 0 0 16px;
    object-fit: contain;
}

/* Portrait cigar-ring marks */
.popover-content .popover-logo--tall {
    max-width: 52px;
    max-height: 64px;
}

.tooltip,
.popover {
    font-family: inherit;
    border-radius: 0;
    box-shadow: none;
    max-width: 280px;
}

.popover.right {
    margin-left: 20px;
}

.popover.bottom {
    margin-top: 20px;
}

/* viappiani */
.btn-viappiani-pos {
    position: absolute;
    top: 62%;
    left: 26.5%;
    z-index: 1;
}

.btn-viappiani {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #E41E0F;
    border-color: #E41E0F;
}

.btn-viappiani:focus,
.btn-viappiani.focus {
    background-color: #E41E0F;
    border-color: #E41E0F;
}

.btn-viappiani:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-viappiani:active,
.btn-viappiani.active,
.open > .dropdown-toggle.btn-viappiani {
    background-color: #E41E0F;
    border-color: #E41E0F;
}

/* ulikett */
.btn-ulikett-pos {
    position: absolute;
    top: 29.9%;
    left: 50.3%;
    z-index: 1;
}

.btn-ulikett {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #0098DC;
    border-color: #0098DC;
}

.btn-ulikett:focus,
.btn-ulikett.focus {
    background-color: #0098DC;
    border-color: #0098DC;
}

.btn-ulikett:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-ulikett:active,
.btn-ulikett.active,
.open > .dropdown-toggle.btn-ulikett {
    background-color: #0098DC;
    border-color: #0098DC;
}

/* viappiani-it */
.btn-viappiani-it-pos {
    position: absolute;
    top: 32%;
    left: 48%;
    z-index: 1;
}

.btn-viappiani-it {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #E41E0F;
    border-color: #E41E0F;
}

.btn-viappiani-it:focus,
.btn-viappiani-it.focus {
    background-color: #E41E0F;
    border-color: #E41E0F;
}

.btn-viappiani-it:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-viappiani-it:active,
.btn-viappiani-it.active,
.open > .dropdown-toggle.btn-viappiani-it {
    background-color: #E41E0F;
    border-color: #E41E0F;
}

/* omnipack */
.btn-omnipack-pos {
    position: absolute;
    top: 35%;
    left: 46%;
    z-index: 1;
}

.btn-omnipack {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #F18700;
    border-color: #F18700;
}

.btn-omnipack:focus,
.btn-omnipack.focus {
    background-color: #F18700;
    border-color: #F18700;
}

.btn-omnipack:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-omnipack:active,
.btn-omnipack.active,
.open > .dropdown-toggle.btn-omnipack {
    background-color: #F18700;
    border-color: #F18700;
}

/* cti-traun */
.btn-cti-traun-pos {
    position: absolute;
    top: 28.6%;
    left: 48.5%;
    z-index: 1;
}

.btn-cti-traun {
    border-radius: 50px;
    padding: 5px;
    height: 14px;
    width: 14px;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-cti-traun:focus,
.btn-cti-traun.focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-cti-traun:hover {
    background-color: #8c3595;
    border-color: #8c3595;
}

.btn-cti-traun:active,
.btn-cti-traun.active,
.open > .dropdown-toggle.btn-cti-traun {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* cigar rings nicaragua */
.btn-cigar-rings-nicaragua-pos {
    position: absolute;
    top: 55.5%;
    left: 23.8%;
    z-index: 1;
}

.btn-cigar-rings-nicaragua {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #00642e;
    border-color: #00642e;
}

.btn-cigar-rings-nicaragua:focus,
.btn-cigar-rings-nicaragua.focus {
    background-color: #00642e;
    border-color: #00642e;
}

.btn-cigar-rings-nicaragua:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-cigar-rings-nicaragua:active,
.btn-cigar-rings-nicaragua.active,
.open > .dropdown-toggle.btn-cigar-rings-nicaragua {
    background-color: #00642e;
    border-color: #00642e;
}

/* cigar rings dominican republic */
.btn-cigar-rings-dom-pos {
    position: absolute;
    top: 52.2%;
    left: 28.7%;
    z-index: 1;
}

.btn-cigar-rings-dom {
    border-radius: 50px;
    padding: 4px;
    height: 10px;
    width: 10px;
    background-color: #00642e;
    border-color: #00642e;
}

.btn-cigar-rings-dom:focus,
.btn-cigar-rings-dom.focus {
    background-color: #00642e;
    border-color: #00642e;
}

.btn-cigar-rings-dom:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-cigar-rings-dom:active,
.btn-cigar-rings-dom.active,
.open > .dropdown-toggle.btn-cigar-rings-dom {
    background-color: #00642e;
    border-color: #00642e;
}

/* ===  /Map  ===  */

/* ===  FOOTER  ===  */
footer.site-footer,
.site-footer {
    color: #fff;
    font-family: var(--font-light);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.55;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin-top: 0;
    /* Dark base so stacked mobile content never sits on white */
    background-color: var(--cti-gradient-base);
}

footer.site-footer.cti-gradient-band,
.site-footer.cti-gradient-band {
    height: auto;
    min-height: 0;
    overflow: visible;
    background-color: var(--cti-gradient-base);
}

footer.site-footer.cti-gradient-band::before,
.site-footer.cti-gradient-band::before {
    background-size: 100% 100%;
    background-position: center;
    transform: none;
}

.site-footer-main {
    padding: clamp(48px, 7vw, 72px) 0 clamp(36px, 5vw, 52px);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 40px);
    align-items: start;
}

.site-footer-col {
    margin-bottom: 0;
    min-width: 0;
}

.site-footer-brand {
    display: inline-block;
    margin-bottom: 18px;
}

.site-footer-brand img {
    display: block;
    width: auto;
    height: 84px;
    max-width: none;
}

.site-footer-tagline {
    margin: 0 0 20px;
    max-width: 32em;
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.site-footer-address {
    margin: 0;
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.site-footer-address a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.site-footer-address a:hover,
.site-footer-address a:focus {
    color: #fff;
}

/* Scoped to .site-footer so this fixed size beats the mobile
   `.container-wrapper h3` rule and matches on desktop + mobile. */
.site-footer .site-footer-heading {
    margin: 0 0 18px;
    padding: 60px 0 0;
    border: 0;
    font-family: var(--font-light);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

/* Footer region headings ("Dominican Republic", "Estelí Nicaragua") break into
   two rows on every breakpoint via a plain <br> in the markup. */

.site-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer-links li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.site-footer-links a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-weight: 300;
}

.site-footer-links a:hover,
.site-footer-links a:focus {
    color: #fff;
}

.site-footer-loc {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.site-footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Match .site-footer-links li spacing (10px) above Contact → LinkedIn */
    margin-top: 0;
}

.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-decoration: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.site-footer-social-link:hover,
.site-footer-social-link:focus {
    background: transparent;
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
}

.site-footer-social-link .ph-light {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.site-footer-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 18px 0 22px;
}

.site-footer-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.site-footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.site-footer-legal a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.site-footer-legal a:hover,
.site-footer-legal a:focus {
    color: #fff;
}

@media screen and (max-width: 1199px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px);
    }

    .site-footer-bar-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer-brand img {
        height: clamp(64px, 17vw, 84px);
    }
}

address {
    color: #a7a9a8;
}

address a {
    color: #a7a9a8;
}

address a:hover {
    color: #a7a9a8;
}

.site-footer-address,
.site-footer-address a {
    color: rgba(255, 255, 255, 0.88);
}

.site-footer-address a:hover,
.site-footer-address a:focus {
    color: #fff;
}

.floatbox {
    float: left;
}

.wm-news-col-date {
    font-size: 14px;
}

.wm-news-col-desc {
    font-size: 1.3rem;
    padding: 0;
}

.wm-news-desc {
    max-width: 400px;
    padding: 15px 0 40px 0;
    font-size: 1rem;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 15px 0;
    border-top: none;
    display: table;
}

/* ===  /FOOTER  ===  */

/* ===  FORMULARE === */
.wm-form .radio,
.wm-form .checkbox {
    display: inline-block;
    width: 250px;
}

.wm-form input[type=button] {
    margin-left: 0;
}

.form-control {
    border-radius: 2px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075);
}

.form-horizontal .control-label {
    text-align: left;
    margin-bottom: 0;
    padding-top: 7px;
}

.form-control:focus {
    border-color: #292726;
    outline: 0 none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(220, 220, 233, 0.9);
}

.table {
    margin-left: -15px;
}

.wm-news-col-date {
    font-size: 14px;
}

.wm-news-col-desc {
    font-size: 1.3rem;
    padding: 0;
}

.wm-news-desc {
    max-width: 400px;
    margin-bottom: 0;
    padding: 5px 0 0;
    font-size: 1rem;
}

.wm-news-morelink {
    display: block;
    margin-bottom: 25px;
    font-size: 1rem;
}

.pager {
    display: inline-block;
    padding: 5px 30px;
    background-color: #ccc;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 15px 0;
    border-top: none;
    display: table;
}

.alert-info {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
}

.alert {
    padding: 0;
    margin-bottom: 0;
    border: 0 solid transparent;
    border-radius: 0;
}

.glyphicon-flash::before {
    content: "";
}

.btn:hover, .btn:focus, .btn.focus {
    color: #ccc;
}

/* ===  FORMULARE === */

/* ===============  min-width 992  ===============  */
@media screen and (min-width: 992px) {
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        background-color: transparent;
        color: #000;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #000;
        background-color: transparent;
        padding-bottom: 0;
        border-bottom: none;
    }

    .navbar-nav {
        padding-right: 0;
    }

    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-left: 0;
        padding-right: 15px;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-left: 0;
        margin-right: -15px;
    }

    .leftright {
        text-align: right;
    }
}

/* ===============  max-width 991 (TABLET+SMARTPHONE)  ===============  */
@media screen and (max-width: 991px) {
    /* Hide Bootstrap collapse on mobile; we use full-screen overlay instead (Omnipack/Viappiani style) */
    .navbar-responsive-collapse {
        display: none !important;
    }
    /* Show overlay wrapper on mobile so #mobile-menu-overlay can be toggled */
    .mobile-menu-overlay-wrapper {
        display: block !important;
    }

    /* Navbar is outside container-wrapper – full viewport width for bg; content via .container */
    .navbar-wrapper {
        width: 100%;
        left: 0;
        right: 0;
    }
    .navbar-wrapper .navbar,
    #topNav {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Keep Bootstrap .container gutters so logo/menu align with body content */
    .top-header > .container,
    #topNav > .container {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }
    /* Navbar header: full width, flex, edge padding – logo flush left, burger flush right */
    .navbar-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        float: none;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
    /* Disable Bootstrap clearfix pseudo-elements that cause visible stripes */
    .navbar-header::before,
    .navbar-header::after {
        content: "" !important;
        display: none !important;
    }
    .navbar .container::before,
    .navbar .container::after,
    .navbar .container-fluid::before,
    .navbar .container-fluid::after {
        content: "" !important;
        display: none !important;
    }
    .navbar::before,
    .navbar::after {
        content: "" !important;
        display: none !important;
    }
    /* Keep Bootstrap clearfix working – do not hide row/container ::before/::after */
    .navbar .container > .navbar-header,
    .navbar .container-fluid > .navbar-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar-toggle {
        float: none;
        margin-top: 0;
        padding: 0;
    }

    /* Index only: main padding so content isn't hidden under fixed navbar when scrolling past carousel */
    body.page-index main {
        padding-top: 56px;
    }
    /* Carousel touches top – navbar overlays it (Omnipack pattern) */

    /* Colombia-style: container full width, navbar-toggle margin-right 0 */
    .container {
        width: 100% !important;
    }
    .navbar-toggle {
        margin-right: 0;
    }
    .navbar-brand {
        min-height: 56px;
        padding: 0;
    }
    .navbar-brand img:not(.cti-navbar-logo),
    .navbar-brand .img-responsive:not(.cti-navbar-logo) {
        max-height: 36px;
        height: auto;
        width: auto;
        object-fit: contain;
        display: block;
    }

    .pull-left:nth-child(2n) {
        margin-right: 0;
    }

    .pull-left:nth-child(n) {
        margin-right: 20px;
    }

    /* Header-Objekte */
    .header-objekte {
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
        height: 298px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .col-maxwidth {
        max-width: none;
        width: 100%;
    }

    hr.company {
        border: 0;
        margin: 30px 0 50px 0;
        border-top: #e5e5e5 1px solid;
    }


    #drop .btn-default {
        margin-bottom: 40px;
    }

    #drop .dropdown-menu {
        margin-top: -50px;
    }

    hr.accord {
        clear: both;
    }

    .margin-minus {
        margin-left: -80px;
        margin-right: -80px;
    }

    .padding-right-rahmen {
        padding-bottom: 20px;
    }

    .triangle-border.top::before {
        top: 0;
        bottom: auto;
        left: 0;
        border-width: 0;
    }

    .triangle-border.top::after {
        top: 0;
        bottom: auto;
        left: 0px;
        border-width: 0;
    }

    .item-box {
        padding: 20px;
        border: 1px solid #e5eaea;
    }

    .item-floatbox {
        display: inline-block;
        vertical-align: middle;
    }

    .item-floatbox h4 {
        margin-top: 0;
    }

    .item-linkbox {
        width: 260px;
    }

    .item-floatbox-padding-left {
        padding-left: 25px;
        text-align: left;
    }

    .item-floatbox-pull-right {
        float: right;
        margin-top: 40px;
    }

    .item-floatbox-pull-right-tel {
        float: right;
        margin-top: 32px;
    }

    .navbar-toggle {
        margin-right: 0;
    }

    .galerie {
        padding-right: 0;
    }

    .header-image-start {
        height: var(--hero-band-height);
        margin-bottom: var(--hero-band-margin);
    }

    .header-image {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        height: var(--hero-band-height);
        min-height: var(--hero-band-height);
        max-height: var(--hero-band-height);
        margin-bottom: var(--hero-band-margin);
    }

    h1 {
        font-size: 2.3rem;
        margin-bottom: 15px;
    }

    h3 {
        margin-bottom: 20px;
        font-size: 1.1rem;
        font-weight: 500;
    }

    h4 {
        margin: 20px 0 5px 0;
        font-size: 1rem;
        font-weight: 500;
    }

    /* ===  Carousel-caption  ===  */
    .carousel {
        height: 730px;
        margin-bottom: 0;
    }

    .carousel .item {
        background-color: #fff;
        height: 728px;
    }

    .carousel .carousel-indicators {
        bottom: 300px;
    }

    .carousel-inner .item .carousel-caption {
        top: 420px;
    }

    .carousel-inner > .item > img {
        height: 420px;
    }

    .carousel h3 {
        max-width: 500px;
    }

    /* ===  /Carousel-caption  ===  */

    /* ===  LANGUAGE MAXWITH992  ===  */
    ul.bullet-list li {
        float: left;
        list-style: none;
        padding-left: 5px;
        padding-right: 15px;
    }

    ul.bullet-list {
        padding-left: 10px;
    }

    .list-inline > li {
        padding-right: 0;
    }

    .language-content {
        margin-left: -15px;
        margin-right: -15px;
        padding: 30px 15px 10px;
        border-bottom: 1px solid #e5eaea;
    }

    .language {
        margin-top: 12px;
        display: block;
    }

    .language a:link {
        color: #000;
    }

    .language a:hover {
        color: #000;
    }

    .kurztext {
        margin-top: 8px;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 500;
    }

    /* ===  /LANGUAGE  ===  */

    /* ===  MENU Symbole  ===  */
    a.dropdown-toggle::after {
        float: right;
        font-family: "Phosphor-Light";
        font-style: normal;
        font-weight: normal;
        line-height: 0.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding-top: 5px;
        padding-right: 0;
        font-size: 24px;
        color: #000;
        content: "\e136";
    }

    li.dropdown > a.dropdown-toggle::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    li.dropdown.open > a.dropdown-toggle::after {
        padding-left: 0;
        padding-right: 0;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    #menu-button {
        margin: 0;
    }
    #menu-button::before {
        color: inherit;
    }

    .navbar-toggle #menu-button::before {
        content: "\e4f6";
    }

    .navbar-toggle.collapsed #menu-button::before {
        content: "\e2f0";
    }

    /* When overlay is open, hamburger shows X (same as .navbar-toggle without .collapsed) */
    .navbar-toggle.active #menu-button::before {
        content: "\e4f6";
    }

    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus {
        padding-bottom: 14px;
    }
}

/* Full-screen mobile menu overlay (Viappiani project standard) - above fixed navbar (Bootstrap navbar-fixed-top = 1030) */
.mobile-menu-overlay-wrapper {
    display: none;
}

#mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: #fff;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
#mobile-menu-overlay.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mobile-menu-close {
    display: none !important;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus {
    color: #000;
    outline: none;
}
#mobile-menu-overlay .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 320px;
    padding: 0 16px;
    box-sizing: border-box;
}
#mobile-menu-overlay .mobile-menu-nav > a {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    border-bottom: none;
    text-decoration: none;
}
#mobile-menu-overlay .mobile-menu-nav > a:hover,
#mobile-menu-overlay .mobile-menu-nav > a:focus {
    color: var(--brand-primary);
    text-decoration: none;
}
#mobile-menu-overlay .mobile-menu-nav > a.active {
    color: var(--brand-primary);
}
#mobile-menu-overlay .mobile-menu-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    font-size: 1rem;
    font-weight: 500;
}
#mobile-menu-overlay .mobile-menu-lang a,
#mobile-menu-overlay .mobile-menu-lang span {
    color: #000;
    text-decoration: none;
}
#mobile-menu-overlay .mobile-menu-lang a:hover {
    color: #000;
}
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}

/* Extend overlay menu behavior to tablet/laptop widths up to 1199px */
@media screen and (max-width: 1199px) {
    /* Keep logo visible and aligned with menu toggle on tablet/mobile */
    .navbar-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .navbar-brand {
        min-height: 64px;
        display: flex;
        align-items: center;
        padding: 0;
        flex: 0 0 auto;
        max-width: calc(100% - 130px);
    }
    .navbar-brand > img:not(.cti-navbar-logo),
    .navbar-brand .img-responsive:not(.cti-navbar-logo) {
        max-height: 48px;
        width: auto;
        height: auto;
        display: block;
        max-width: 100%;
    }
    .navbar-toggle,
    #menu-toggle-button {
        display: block !important;
        flex: 0 0 auto;
    }
    .mobile-menu-overlay-wrapper {
        display: block !important;
    }
    .navbar-responsive-collapse,
    .navbar-responsive-collapse.in {
        display: none !important;
        visibility: hidden !important;
    }
    #topNav.navbar-fixed-top {
        transition: background-color 0.3s ease;
    }
    #topNav.navbar-fixed-top.navbar-transparent {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    #topNav.navbar-fixed-top:not(.navbar-transparent) {
        background-color: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
    }
}

/* Hide intermediate tablet-only navbar sizing — small screens use the final ≤1199 block */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* no-op: deferred to unified small-screen block at file end */
}

@media screen and (max-width: 991px) {
    /* Transparent at top, solid white when scrolled — kept for scroll polish */
    #topNav.navbar-transparent {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none;
    }
    #topNav.navbar-fixed-top:not(.navbar-transparent) {
        background-color: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    .navbar-fixed-top {
        height: auto;
        min-height: 56px;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    .navbar-fixed-top .navbar-header {
        min-height: 56px;
    }

    .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
        border-bottom: 1px #edf1f1 solid;
        background-color: #fff;
    }


    .nav > li > a {
        position: relative;
        margin: 0;
        padding: 14px;
        font-size: 18px;
        font-weight: 500;
        color: #000;
        border-bottom: 1px #edf1f1 solid;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #000;
        background-color: transparent;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #000;
        background-color: transparent;
        border-bottom: 1px #edf1f1 solid;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        background-color: transparent;
        color: #000;
        border-bottom: 0 transparent solid;
        border-top: 0 transparent solid;
        background-image: none;
        background-repeat: no-repeat;
        background-position: bottom left;
    }

    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        margin-left: 15px;
        padding: 10px 0;
        border-bottom: none;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: transparent;
    }

    /* ===  WIDTH-NAVBAR TABLET  ===  */
    .container {
        width: 100% !important;
    }
    /* ===  /WIDTH-NAVBAR TABLET  ===  */
}

/* ===============  /max-width 991 (TABLET+SMARTPHONE) ===============  */

/* ===============  max-width 768 (SMARTPHONE) ===============  */
@media screen and (max-width: 767px) {
    .item-floatbox-padding-left {
        padding-left: 0;
        text-align: center;
    }

    /* Colombia-style: navbar height 76px */
    .navbar {
        height: 76px;
    }

    .item-box {
        padding: 20px 45px;
        border: 1px solid #E5EAEA;
        width: 260px;
    }

    .item-floatbox-padding-left {
        padding-left: 0;
    }

    .item-floatbox {
        display: block;
    }

    .produktbox-text {
        min-height: auto;
    }

    .newsbox-text {
        height: 50px;
    }

    .featured-box-container {
        margin: 40px 0 50px 0;
    }

    .navbar-brand > img:not(.cti-navbar-logo),
    .navbar-brand .img-responsive:not(.cti-navbar-logo) {
        height: 46px;
    }

    .navbar-brand {
        min-height: 60px;
    }

    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
    }

    .header-image {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        height: var(--hero-band-height);
        min-height: var(--hero-band-height);
        max-height: var(--hero-band-height);
        margin-bottom: var(--hero-band-margin);
    }

    .btn-group, .btn-group-vertical {
        margin-bottom: 30px;
    }

    .bottom60 {
        margin-bottom: 50px;
    }

    .floatbox {
        float: none;
    }

    h1 {
        font-size: 1.625rem;
        margin-bottom: 15px;
    }

    h2 {
        margin: 20px 0 10px 0;
        font-size: 1.375rem;
    }

    h3 {
        margin: 20px 0;
        font-size: 1.1rem;
        font-weight: 500;
    }

    footer.site-footer h3.site-footer-heading {
        padding: 60px 0 0;
        margin: 0 0 18px;
        border: 0;
    }

    hr {
        border: 0;
        margin: 40px 0 25px 0;
        border-top: #e5e5e5 1px solid;
    }

    hr.padding50 {
        margin: 3rem -15px 3rem -15px;
        border: 0;
        border-top: #e5e5e5 1px solid;
    }

    /* === Colored box === */
    .featured-box {
        padding: 25px 0;
    }

    .featured-box img {
        width: 60px;
        float: left;
        padding-right: 20px;
    }

    .featured-box h4 {
        display: table;
        text-align: left;
    }

    #drop .btn-default {
        margin-bottom: 30px;
        max-width: 100%;
    }

    #drop .dropdown-menu {
        width: 100%;
    }
}

/* Omnipak exact: phone carousel – indicators below image (≤767px) */
@media screen and (max-width: 767px) {
    .carousel-hero-wrapper {
        padding-bottom: 50px;
        margin-bottom: 30px;
    }
    .carousel {
        height: 630px;
        margin-bottom: 0;
        overflow: visible;
    }
    .carousel .item {
        height: 630px;
        background-color: #fff;
        position: relative;
    }
    .carousel-inner {
        height: 630px;
    }
    .carousel .carousel-indicators {
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    .carousel-inner .item .carousel-caption {
        top: 360px;
    }
    .carousel-inner > .item > img {
        height: 350px;
        min-width: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .carousel-caption {
        text-align: left;
        padding: 0 15px 0 0;
    }
    .carousel-caption h1 {
        margin-bottom: 18px;
    }
    .carousel-caption h3 {
        margin-top: 0;
        margin-bottom: 22px;
        line-height: 1.25;
    }
    .carousel-caption p {
        margin-top: 8px;
    }
    .carousel-caption .btn {
        margin-top: 4px;
    }
    .owl-carousel .owl-item {
        margin: 0;
    }
}

@media screen and (max-width: 414px) {
    .header-image-start {
        height: 200px;
        margin-bottom: 80px;
    }

    .pull-left:nth-child(n) {
        margin-right: 0;
    }

    .carousel {
        height: 510px;
        margin-bottom: 0;
    }
    .carousel .item {
        height: 510px;
        background-color: #fff;
    }
    .carousel-inner {
        height: 510px;
    }
    .carousel-inner .item .carousel-caption {
        top: 230px;
    }
    .carousel-caption h1 {
        margin-bottom: 14px;
    }
    .carousel-caption h3 {
        margin-bottom: 18px;
    }
    .carousel-inner > .item > img {
        height: 220px;
        min-width: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .map {
        width: 90%;
        left: 5%;
        z-index: 1;
        overflow: hidden;
    }

    .header-objekte {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
        height: 210px;
        top: 0;
        right: 0;
        left: 0;
    }

    .panel-heading a {
        padding: 20px 0;
        font-size: 1rem;
    }

    .site-footer-main {
        padding-top: 40px;
    }
}

@media screen and (max-width: 320px) {
    #drop .dropdown-menu {
        width: 100%;
    }

    /* Smaller logo on very small screens */
    .navbar-brand > img:not(.cti-navbar-logo),
    .navbar-brand .img-responsive:not(.cti-navbar-logo) {
        height: 40px;
    }
}

/* ===  TOBACCO PAGE STYLES - ADDED STYLES ONLY  === */

/* Hero Section */
.hero-tobacco {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.hero-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 16:9 cover: width based on viewport width, with minimums to cover tall screens */
    width: 100vw;
    height: 56.25vw;           /* 9/16 of width */
    min-width: 177.78vh;       /* 16/9 of height */
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;      /* so clicks go to your content */
    z-index: 2;
}

.hero-fallback-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 4;
    text-align: left;
    color: white;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px 0;
}

.hero-spacer {
    flex: 1;
    min-height: 60px;
}

.hero-ideas-row {
    position: relative;
    z-index: 5;
}

.hero-title {
    font-family: var(--font-light);
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 0.9;
    margin-bottom: 40px;
    text-shadow: none;
}

.hero-btn {
    margin-top: 20px;
    padding: 15px 30px;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    background-image: none;
}

.hero-btn:hover {
    background-color: white;
    color: #000;
}

.hero-arrow {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2rem;
    animation: bounce 2s infinite;
    width: 100%;
    text-align: center;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Content Sections */
.labels-packaging-section {
    padding: 120px 0 0 0;
    background: white;
    overflow: hidden;
}

.ideas-visible-section {
    padding: 40px 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.ideas-visible-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.6) 0%, rgba(120, 33, 129, 0.6) 100%);
    z-index: 1;
}

.ideas-visible-section .container {
    position: relative;
    z-index: 2;
}

.innovation-section {
    padding: 100px 0 20px 0;
    background: transparent;
    position: relative;
    z-index: 3;
}

.world-map-section {
    padding: 0 0 20px 0;
    margin-top: -350px;
    background: white;
    position: relative;
    z-index: 1;
}

.world-map-section .map {
    position: relative;
}

.world-map-section .map::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.world-map-section .map::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.section-title {
    font-family: var(--font-light);
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 500;
}

.highlight-text {
    color: #000;
}

.white-text {
    color: white;
}

.white-text .highlight-text {
    color: #ffffff;
    text-shadow: none;
}

.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 500;
}

.section-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.packaging-image {
    text-align: center;
    padding: 60px 0 0 0;
    position: relative;
}

/* FIXED: Packaging image positioning */
.packaging-image img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    bottom: 0px;
}

.tobacco-industry-text {
    color: #000;
}

.purple-text {
    color: #000;
}

.labels-packaging-section .section-description:last-child {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.labels-packaging-section .section-description:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: var(--brand-primary);
}

.innovation-section .section-description:last-child {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.innovation-section .section-description:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: var(--brand-primary);
}

/* Member Cards */
.member-buttons {
    margin-top: 0;
}

.member-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    padding: 4% 3%;
    text-align: center;
    margin-bottom: 20px;
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.ideas-title {
    margin-bottom: 20px;
    font-size: 2rem;
    line-height: 1.1;
}

.ideas-subtitle {
    font-size: 1.1rem;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
    padding-bottom: 15px;
}

.ideas-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: white;
}

.ideas-subtitle strong {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

.logo-placeholder {
    width: 160px;
    height: 80px;
    object-fit: contain;
}

.omnipack-card {
    background-color: #f8f9fa;
}

.cigar-rings-card {
    background-color: #f8f9fa;
}

.member-logo {
    margin-bottom: 3%;
    text-align: center;
    padding: 2% 5%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-logo img {
    max-width: 80%;
    height: auto;
    max-height: 50px;
    object-fit: contain;
}

.omnipack-logo {
    font-family: var(--font-light);
    font-size: 1.2rem;
    color: #F18700;
    font-weight: 500;
}

.cigar-rings-logo {
    font-family: var(--font-light);
    font-size: 1.2rem;
    color: #000;
    font-weight: 500;
}

.btn-member {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.btn-member:hover {
    background-color: #5d1a66;
    color: white;
}

/* FIXED: Family Photos styling */
.family-photos {
    text-align: center;
    padding: 20px 0;
    position: relative;
    z-index: 4;
}

.family-photos img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    position: relative;
    z-index: 4;
    box-shadow: none;
}

/* Tablet Responsive */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .hero-video {
        width: 100vw;
        height: 56.25vw;
        min-width: 177.78vh;
        min-height: 100vh;
        transform: translate(-50%, -50%);
    }
    
    /* Ensure proper tablet layout for hero section */
    .hero-tobacco .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        text-align: center;
    }
    
    .hero-ideas-row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .hero-ideas-row .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 0 10px;
    }
    
    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .ideas-title {
        font-size: 1.8rem;
    }
    
    .ideas-subtitle {
        font-size: 1rem;
    }
}

/* Circular burger toggle */
.navbar-toggle,
#menu-toggle-button {
    padding: 0;
    margin-top: 0;
    margin-right: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* SVG icon styling */
.navbar-toggle .icon {
    color: #fff;
    transition: opacity 0.2s ease;
}

/* Toggle icons via aria-expanded - target the actual button ID */
#menu-toggle-button .icon {
    display: none;
}

#menu-toggle-button[aria-expanded="false"] .icon-burger {
    display: inline;
}

#menu-toggle-button[aria-expanded="true"] .icon-close {
    display: inline;
    color: #000 !important;
}

/* Set button color when open for SVG currentColor */
#menu-toggle-button[aria-expanded="true"] {
    color: #000;
}

/* Ensure button stays above mobile menu */
#menu-toggle-button {
    position: relative;
    z-index: 10002 !important;
}

/* Hide hamburger button only on large desktop */
@media screen and (min-width: 1200px) {
    .navbar-toggle,
    #menu-toggle-button {
        display: none !important;
    }
}

/* Mobile: circular burger only */
@media screen and (max-width: 991px) {
    .navbar .navbar-toggle,
    #menu-toggle-button {
        padding: 0 !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        border: 1px solid currentColor !important;
        border-radius: 50% !important;
    }
}

/* Desktop layout from 768px and up */
@media screen and (min-width: 768px) {
    /* Desktop-only row styling for specific sections */
    .clients-section .row,
    .ideas-visible-section-orange .row,
    .contact-section-orange .row {
        margin-left: -15px;
        margin-right: -15px;
        align-items: flex-end;
        display: flex;
    }
    
    /* Desktop-only styling for hero ideas row */
    .hero-ideas-row {
        position: relative;
        z-index: 5;
        display: flex;
        justify-content: center;
    }
    
}

/* Contact Button - New sleek design */
.btn-contact {
    display: inline-block;
    padding: 12px 28px;
    background: transparent;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-contact:hover {
    background: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.btn-contact:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(241, 135, 0, 0.2);
    text-decoration: none;
}

/* Mobile Responsive */
@media screen and (max-width: 767px) {
    /* Center decorative lines on mobile */
    .innovative-packaging-section .section-description:last-of-type::after,
    .partner-offers::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Center green section title on mobile */
    .ideas-visible-section-green .section-title {
        text-align: center !important;
    }
    
    .hero-tobacco {
        min-height: 130vh;
        height: auto;
    }
    
    .hero-tobacco .hero-video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vw !important;
        height: 56.25vw !important;
        min-width: 231.11vh !important;      /* 16/9 of 130vh */
        min-height: 130vh !important;
        transform: translate(-50%, -50%) !important;
        border: 0 !important;
        pointer-events: none !important;
    }
    
    .hero-tobacco .hero-video-wrapper {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    
    .hero-title {
        font-size: 2.2rem;
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
        line-height: 1.1;
    }
    
    .hero-tobacco .hero-content {
        text-align: center;
        height: 130vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        position: relative;
        z-index: 3;
    }
    
    .hero-spacer {
        flex: 1;
        min-height: 20%;
    }
    
    .navbar-nav {
        flex-direction: column;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    
    .navbar-nav > li {
        margin: 20px 0;
    }
    
    .navbar-nav > li > a {
        color: white !important;
        font-size: 2rem !important;
        font-weight: 300 !important;
        text-decoration: none;
        padding: 10px 0;
        border: none !important;
    }
    
    .navbar-nav > li > a:hover {
        color: #000 !important;
        background: transparent !important;
    }
    
    /* Dropdown menu in fullscreen */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 20px;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    
    .navbar-nav .dropdown-menu > li > a {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 1.5rem !important;
        padding: 10px 0;
    }
    
    .navbar-nav .dropdown-menu > li > a:hover {
        color: white !important;
        background: transparent !important;
    }
    
    .hero-ideas-row {
        position: relative;
        bottom: auto;
        padding-bottom: 20px;
    }
    
    .hero-tobacco .member-card {
        margin-bottom: 10px;
        min-height: 70px;
        padding: 2% 2%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 1%;
        margin-right: 1%;
    }
    
    .hero-tobacco .member-card .member-logo {
        margin-bottom: 2%;
        padding: 3% 8%;
    }
    
    .hero-tobacco .member-card .member-logo img {
        max-width: 90%;
        max-height: 35px;
        height: auto;
        margin-bottom: 2%;
        object-fit: contain;
    }
    
    .hero-tobacco .btn-member {
        padding: 6px 12px;
        font-size: 0.8rem;
        margin-top: 5px;
    }
    
    .hero-tobacco .ideas-title {
        font-size: 1.5rem;
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.2;
    }
    
    .hero-tobacco .ideas-subtitle {
        font-size: 0.9rem;
        margin-top: 0;
        line-height: 1.3;
    }
    
    /* Make member cards side by side on mobile */
    .hero-ideas-row .col-md-3:nth-child(1),
    .hero-ideas-row .col-md-3:nth-child(2) {
        width: 50% !important;
        float: left !important;
        margin-bottom: 15px;
    }
    
    /* Text columns stack below cards */
    .hero-ideas-row .col-md-3:nth-child(3),
    .hero-ideas-row .col-md-3:nth-child(4) {
        width: 100% !important;
        margin-bottom: 15px;
        clear: both;
    }
    
    /* Clearfix for the row */
    .hero-ideas-row::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .section-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .labels-packaging-section,
    .ideas-visible-section,
    .innovation-section {
        padding: 40px 0;
        text-align: center;
    }
    
    .member-card {
        margin-bottom: 15px;
    }
    
    /* Family photos mobile - adjusted size */
    .family-photos {
        padding: 20px 15px;
        text-align: center;
    }
    
    .family-photos img {
        max-width: 80%;
        margin: 0 auto;
    }
    
    /* Allow more overlap between family and world map sections on mobile */
    .innovation-section {
        padding: 40px 0 20px 0;
        margin-bottom: -40px;
    }
    
    .world-map-section {
        margin-top: 0;
        padding-top: 20px;
    }
    
    /* Fix world map image bounds on mobile Safari */
    .world-map-section img {
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    /* Reduce gradient strength on mobile */
    .world-map-section .map::before {
        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        height: 80px;
    }
    
    .world-map-section .map::after {
        background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        height: 80px;
    }
    
    /* Vimeo iframe responsive fixes */
    iframe.hero-video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vw !important;
        height: 56.25vw !important;
        min-width: 231.11vh !important;      /* 16/9 of 130vh */
        min-height: 130vh !important;
        transform: translate(-50%, -50%) !important;
        border: 0 !important;
        pointer-events: none !important;
    }
    
    /* Fix packaging image positioning on mobile and tablet */
    .packaging-image {
        padding: 20px 15px 0 15px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .packaging-image img {
        max-width: 90%;
        margin-top: auto;
        margin-bottom: 0;
        align-self: center;
    }
    
    /* Fix logo and burger menu alignment on mobile */
    .white-navbar .navbar-brand {
        padding: 15px 0 0 15px;
    }
    
    .white-navbar:not(.cigar-rings-navbar) .navbar-brand {
        padding: 15px 0 0 15px;
    }
    
    .navbar-toggle {
        margin-right: 15px;
    }
    
    /* Fix navbar height when scrolled on mobile */
    .white-navbar.scrolled,
    .white-navbar.omnipack-navbar.scrolled,
    .white-navbar.cigar-rings-navbar.scrolled {
        min-height: 70px;
    }
    
    /* Make dropdown menu purple for tobacco page */
    .white-navbar .dropdown-menu > li > a:hover,
    .white-navbar .dropdown-menu > li > a:focus {
        background-color: var(--brand-primary);
    }
    
    .white-navbar .dropdown-menu > .active > a,
    .white-navbar .dropdown-menu > .active > a:hover,
    .white-navbar .dropdown-menu > .active > a:focus {
        background-color: var(--brand-primary);
    }
    
    /* Center section description lines on mobile */
    .section-description {
        text-align: center;
    }
    
    /* Improve mobile spacing for all sections */
    .labels-packaging-section,
    .innovative-packaging-section,
    .friends-section,
    .products-section-green {
        padding: 40px 0;
    }
    
    /* Better mobile text alignment */
    .section-title,
    .section-subtitle {
        text-align: center;
    }
    
    /* Mobile hero adjustments */
    .hero-content {
        padding: 0 20px;
    }
    
    .innovation-section .section-description:last-child::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .labels-packaging-section .section-description:last-child::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Center omnipack page lines on mobile */
    .innovative-packaging-section .section-description:last-of-type::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Center cigar-rings page lines on mobile */
    .friends-section .section-description:last-of-type::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Center "making ideas visible" sections on mobile */
    .ideas-visible-section .ideas-title,
    .ideas-visible-section-orange .ideas-title,
    .ideas-visible-section-green .ideas-title,
    .ideas-visible-section-green .section-title {
        text-align: center;
    }
    
    .ideas-visible-section .ideas-subtitle,
    .ideas-visible-section-orange .ideas-subtitle,
    .ideas-visible-section-green .ideas-subtitle {
        text-align: center;
    }
    
    /* Center the line after ideas-subtitle on mobile */
    .ideas-subtitle::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Center ALL paragraph lines on mobile */
    .partner-offers::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .clients-description::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Center contact divider lines on mobile */
    .contact-divider,
    .contact-divider-green {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Center addresses on cigar rings mobile */
    .contact-locations,
    .location {
        text-align: center;
    }
    
    .location h4,
    .location p {
        text-align: center;
    }
}

@media screen and (max-width: 414px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
}

/* Transparent Navbar Override for tobacco/cigar pages */
.white-navbar {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
    min-height: 70px;
}

.white-navbar .navbar-default {
    background-color: transparent;
    border: none;
}

.white-navbar .navbar-brand {
    padding: 15px 0 0 15px;
    text-decoration: none;
}

.white-navbar .navbar-brand img {
    max-height: 70px;
    width: auto;
}

/* FIXED: Smaller logos for tobacco and omnipack pages */
.white-navbar:not(.cigar-rings-navbar) .navbar-brand {
    padding: 15px 0 0 15px;
}

.white-navbar:not(.cigar-rings-navbar) .navbar-brand img {
    max-height: 52px;
}

.white-navbar.cigar-rings-navbar .navbar-brand img {
    max-height: 45px;
}

.white-navbar .nav > li > a {
    color: white;
    font-weight: 500;
    font-size: 1.125rem;
}

.white-navbar .nav > li > a:hover,
.white-navbar .nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}

.white-navbar .navbar-default .navbar-nav > .active > a,
.white-navbar .navbar-default .navbar-nav > .active > a:hover,
.white-navbar .navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: transparent;
    padding-bottom: 0;
    border-bottom: none;
}

.white-navbar .navbar-toggle {
    border-color: transparent;
}

.white-navbar .navbar-toggle .icon-bar {
    background-color: white;
}

.white-navbar .hamburger-title {
    color: white;
}

.white-navbar #menu-button::before,
.white-navbar .navbar-toggle .menu-icon {
    color: white;
}

.white-navbar .navbar-toggle .menu-icon-bar {
    background-color: white;
}


/* Scrolled Navbar State */
.white-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}


.white-navbar.scrolled .navbar-default {
    background-color: transparent !important;
}

.white-navbar.scrolled .nav > li > a {
    color: #000 !important;
}

.white-navbar.scrolled .navbar-default .navbar-nav > .active > a,
.white-navbar.scrolled .navbar-default .navbar-nav > .active > a:hover,
.white-navbar.scrolled .navbar-default .navbar-nav > .active > a:focus {
    color: #000 !important;
    border-bottom: none;
}

/* Logo switching for tobacco navbar */
.white-navbar .logo-white {
    display: block;
}

.white-navbar .logo-black {
    display: none;
}

.white-navbar.scrolled .logo-white {
    display: none;
}

.white-navbar.scrolled .logo-black {
    display: block;
}

/* Hamburger menu styling for tobacco scrolled navbar */
.white-navbar.scrolled .hamburger-title {
    color: #000 !important;
}

.white-navbar.scrolled #menu-button,
.white-navbar.scrolled .navbar-toggle .menu-icon {
    color: #000 !important;
    background-color: transparent !important;
}

.white-navbar.scrolled #menu-button::before,
.white-navbar.scrolled .navbar-toggle .menu-icon-bar {
    color: #000 !important;
    background-color: #333 !important;
}


/* ===  /TOBACCO PAGE STYLES  === */

/* ===  OMNIPACK PAGE STYLES - ORANGE THEME  === */

/* Hero Section - Omnipack */
.hero-omnipack {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-omnipack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(241, 135, 0, 0) 0%, rgba(241, 135, 0, 0.6) 30%, rgba(241, 135, 0, 0.9) 70%);
    z-index: 1;
}

.hero-omnipack .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
}

/* Orange Theme Text */
.orange-text {
    color: #F18700;
}

/* Innovative Packaging Section */
.innovative-packaging-section {
    padding: 80px 0;
    background: white;
}

.innovative-packaging-section .section-title {
    font-size: 2rem;
}

.innovative-packaging-section .section-description:last-of-type {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.innovative-packaging-section .section-description:last-of-type::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: #333;
}

.ideas-visible-section-orange .section-title {
    font-size: 3rem;
}

.partner-offers {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.partner-offers::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: white;
}

.packaging-showcase {
    text-align: center;
    padding: 20px;
}

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

/* Ideas Visible Section - Orange Theme */
.ideas-visible-section-orange {
    padding: 60px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    position: relative;
    color: white;
}

.ideas-visible-section-orange .container {
    transform: scaleX(-1);
    position: relative;
    z-index: 2;
}

.ideas-visible-section-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(241, 135, 0, 1) 0%, rgba(241, 135, 0, 0.7) 100%);
    z-index: 1;
}

.black-text {
    color: #000 !important;
}

.ideas-title.black-text {
    color: #000 !important;
}

.ideas-title.black-text .highlight-text {
    color: #000 !important;
}

.partner-offers li {
    margin-bottom: 8px;
    font-size: 1rem;
}

.white-card {
    background: white;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    color: #000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.equal-height {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.orange-icon {
    color: #F18700;
    font-size: 2rem;
    margin-bottom: 15px;
}

.white-card h4 {
    color: #000;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.white-card p {
    color: #000;
    font-size: 0.8rem;
    line-height: 1.4;
}

.idea-card {
    background: white;
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    margin-bottom: 30px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.idea-card .card-icon {
    margin-bottom: 15px;
}

.idea-card .card-icon i {
    font-size: 2.5rem;
    color: #F18700;
}

.idea-card h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    margin: 0 0 15px 0;
    text-transform: lowercase;
}

.ideas-content h3,
.sustainability-content h3,
.quality-content h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
}

.ideas-content p,
.sustainability-content p,
.quality-content p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Products Section */
.products-section {
    padding: 80px 0;
    background: white;
}

.products-showcase {
    position: relative;
    text-align: center;
    margin-top: 60px;
    min-height: 400px;
}

.central-product {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.central-product img {
    max-width: 300px;
    height: auto;
}

.central-product h3 {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
}

.product-category {
    position: absolute;
    background: #F18700;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.product-category.folding-cartons {
    top: 20%;
    left: 10%;
}

.product-category.sleeves {
    top: 20%;
    right: 10%;
}

.product-category.labels {
    bottom: 30%;
    left: 15%;
}

.product-category.innovative-packaging {
    bottom: 30%;
    right: 15%;
}

/* Contact Section - Orange Theme */
.contact-section-orange {
    padding: 80px 0;
    background: linear-gradient(135deg, #F18700 0%, #FF6B00 100%);
    color: white;
}

.contact-divider {
    width: 26%;
    height: 1px;
    background-color: white;
    margin: 15px 0 30px 0;
}

.contact-address {
    text-align: left;
}

/* Ensure contact address is left-aligned on desktop */
@media screen and (min-width: 768px) {
    .contact-section-orange .col-md-3 .contact-address,
    .contact-section-orange p.contact-address,
    #contactomnipack .contact-address {
        text-align: left !important;
    }
}

.team-member {
    text-align: center;
    margin-bottom: 40px;
}

.member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 3px solid white;
}

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

.team-member h4 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: white;
}

.team-member p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
    color: white;
}

/* Mobile Responsive - Omnipack */
@media screen and (max-width: 767px) {
    .hero-omnipack {
        height: 100vh;
        min-height: 100vh;
    }
    
    .hero-omnipack::before {
        width: 100%;
        clip-path: none;
    }
    
    .idea-card {
        margin-bottom: 12px;
        min-height: 60px;
        padding: 12px 10px;
    }
    
    .idea-card .card-icon {
        margin-bottom: 8px;
    }
    
    .idea-card .card-icon i {
        font-size: 2rem;
    }
    
    .idea-card h4 {
        margin: 0 0 8px 0;
        font-size: 0.85rem;
    }
    
    .idea-card p {
        font-size: 0.8rem;
        line-height: 1.3;
        margin: 0;
    }
    
    .products-showcase {
        min-height: 300px;
    }
    
    .product-category {
        position: relative;
        display: inline-block;
        margin: 10px 5px;
    }
    
    .product-category.folding-cartons,
    .product-category.sleeves,
    .product-category.labels,
    .product-category.innovative-packaging {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }
    
    .member-photo {
        width: 100px;
        height: 100px;
    }
}

/* Omnipack Navbar Scrolled State */
.white-navbar.omnipack-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

.white-navbar.omnipack-navbar.scrolled .navbar-default {
    background-color: transparent !important;
}

.white-navbar.omnipack-navbar.scrolled .navbar-brand img {
    filter: none !important;
}

.white-navbar.omnipack-navbar.scrolled .navbar-nav > li > a {
    color: #000 !important;
}

.white-navbar.omnipack-navbar.scrolled .hamburger-title {
    color: #000 !important;
}

.white-navbar.omnipack-navbar.scrolled #menu-button,
.white-navbar.omnipack-navbar.scrolled .navbar-toggle .menu-icon,
.white-navbar.omnipack-navbar.scrolled .navbar-toggle .menu-icon-bar {
    color: #000 !important;
    background-color: #333 !important;
}

/* Logo switching for omnipack navbar */
.white-navbar.omnipack-navbar .logo-white {
    display: block;
}

.white-navbar.omnipack-navbar .logo-black {
    display: none;
}

.white-navbar.omnipack-navbar.scrolled .logo-white {
    display: none;
}

.white-navbar.omnipack-navbar.scrolled .logo-black {
    display: block;
}

/* Center slideshow titles under images for omnipack */
.clean-slideshow .slide h3 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    color: #000;
    font-size: 1.2rem;
    font-weight: 500;
}


/* ===  /OMNIPACK PAGE STYLES  === */

/* ===  CIGAR RINGS PAGE STYLES - GREEN THEME  === */

/* Hero Section - Cigar Rings */
.hero-cigar-rings {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}

.hero-cigar-rings .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
}

/* Green Theme Text */
.green-text {
    color: #000;
}

/* Friends Section */
.friends-section {
    padding: 80px 0;
    background: white;
}

.friends-section .section-title {
    font-size: 2rem;
}

.friends-section .section-description:last-of-type {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.friends-section .section-description:last-of-type::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: #006D40;
}

.cigar-showcase {
    text-align: center;
    padding: 20px;
}

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

/* Ideas Visible Section - Green Theme */
.ideas-visible-section-green {
    padding: 60px 0;
    background: linear-gradient(135deg, #006D40 0%, #004D2E 100%);
    color: white;
}

.ideas-visible-section-green .container {
    position: relative;
    z-index: 2;
}

.ideas-visible-section-green .section-title {
    font-size: 3rem;
}

.equal-height-green {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.ideas-visible-section-green .row {
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ideas-visible-section-green .col-md-3 {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 20px;
    flex: 0 0 25%;
    max-width: 25%;
}

/* Responsive breakpoints */
@media screen and (max-width: 1200px) {
    .ideas-visible-section-green .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 768px) {
    .ideas-visible-section-green .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 30px;
    }
}

.green-icon {
    color: #000 !important;
    font-size: 2rem;
    margin-bottom: 15px;
}

.green-icon i {
    color: #000 !important;
    font-size: 2rem !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
}

/* Clients Section - Golden Occa Background */
.clients-section {
    padding: 40px 0 15px 0;
    background: white;
}

.clients-section .section-title {
    color: #000 !important;
}

.clients-section .section-description {
    color: #000 !important;
}

.clients-section .highlight-text {
    color: #000 !important;
}

.clients-description {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.clients-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    height: 1px;
    background-color: #333;
}

/* FIXED: Logo carousel styling */
.logo-carousel-container {
    background: white;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 20px;
    padding: 20px 0;
    overflow: hidden;
}

.logo-carousel {
    display: flex;
    animation: scroll 30s linear infinite;
    width: max-content;
}

.logo-slide {
    padding: 5px 15px;
    color: #000;
    font-weight: 500;
    font-size: 1.1rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Products Section - White Background */
.products-section-green {
    padding: 80px 0;
    background: white;
    color: #000;
}

.products-showcase-green {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.central-product-green {
    text-align: center;
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    max-width: 400px;
}

.central-product-green img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.central-product-green h3 {
    color: #000;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.products-section-green .section-title {
    color: #000;
}

.products-section-green .section-description {
    color: #000;
}

/* Contact Section - Golden Occa Background */
.contact-section-green {
    padding: 80px 0;
    background: linear-gradient(135deg, #C18C0D 0%, #A67A0B 100%);
    color: white;
}

.contact-divider-green {
    width: 26%;
    height: 1px;
    background-color: white;
    margin: 15px 0 30px 0;
}

.contact-locations .location {
    margin-bottom: 30px;
}

.contact-locations .location h4 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.contact-locations .location p {
    font-size: 0.9rem;
    line-height: 1.4;
}

.team-member-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.member-photo-vertical {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid white;
    flex-shrink: 0;
}

.member-photo-vertical img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-vertical h4 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: white;
}

.team-member-vertical .member-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
}

.team-member-vertical .member-contact {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    color: white;
}

.starky-contact {
    text-align: center;
}

.member-photo-simple {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 3px solid white;
}

.member-photo-simple img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.starky-contact h4 {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: white;
}

.starky-contact .member-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
}

.starky-contact .member-contact {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    color: white;
}

/* Mobile Responsive - Cigar Rings */
@media screen and (max-width: 767px) {
    .hero-cigar-rings {
        height: 100vh;
        min-height: 100vh;
    }
    
    .equal-height-green {
        height: 180px;
        margin-bottom: 20px;
    }
    
    .team-member-large {
        flex-direction: column;
        text-align: center;
    }
    
    .member-photo-large {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* Cigar Rings Navbar Scrolled State */
.white-navbar.cigar-rings-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

.white-navbar.cigar-rings-navbar.scrolled .navbar-default {
    background-color: transparent !important;
}

.white-navbar.cigar-rings-navbar.scrolled .navbar-brand img {
    filter: none !important;
}

.white-navbar.cigar-rings-navbar.scrolled .navbar-nav > li > a {
    color: #000 !important;
}

.white-navbar.cigar-rings-navbar.scrolled .hamburger-title {
    color: #000 !important;
}

.white-navbar.cigar-rings-navbar.scrolled #menu-button,
.white-navbar.cigar-rings-navbar.scrolled .navbar-toggle .menu-icon,
.white-navbar.cigar-rings-navbar.scrolled .navbar-toggle .menu-icon-bar {
    color: #000 !important;
    background-color: #333 !important;
}

/* Fix cigar rings scrolled navbar dropdown visibility and gap */
.white-navbar.cigar-rings-navbar.scrolled .navbar-nav .open .dropdown-menu {
    margin-top: 0;
    border-top: none;
}

.white-navbar.cigar-rings-navbar.scrolled .navbar-nav .open .dropdown-menu > li > a {
    color: #000 !important;
    background-color: white !important;
}

.white-navbar.cigar-rings-navbar.scrolled .navbar-nav .open .dropdown-menu > li > a:hover,
.white-navbar.cigar-rings-navbar.scrolled .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000 !important;
    background-color: #f5f5f5 !important;
}


/* Video Play Overlay Enhancements */
.video-play-overlay .play-text {
    color: white;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.video-play-overlay:hover .play-button {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.3);
}

.video-play-overlay:hover .play-text {
    color: #C18C0D;
}

/* Vimeo iframe styling */
iframe.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}

/* FIXED: Logo carousel styling fixes */
.clients-section .logo-slide {
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
}

.clients-section .logo-carousel-container .logo-carousel .logo-slide img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 120px !important;
    min-width: auto !important;
    min-height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
    display: block !important;
}

.clients-section .logo-carousel-container .logo-carousel .logo-slide img.img-responsive {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 120px !important;
}

.clients-section .logo-slide:hover img {
    opacity: 0.72 !important;
}

/* ===  /CIGAR RINGS PAGE STYLES  === */


/* ADDED: Simple gallery component with mobile swipe support */
.simple-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

.simple-gallery img {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 8px;
    max-height: 300px;
    width: auto;
}

@media screen and (max-width: 768px) {
    .simple-gallery {
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .simple-gallery::-webkit-scrollbar {
        display: none;
    }
}

/* Clean Slideshow Component */
.clean-slideshow {
    position: relative;
    width: 100vw;
    margin: 20px 0;
    padding: 0 60px;
}

.slideshow-container {
    position: relative;
    width: 100vw;
    height: 350px;
    overflow: visible;
}

.clean-slideshow .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
  }


.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    color: #000;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 16px;
    backdrop-filter: blur(10px);
}

.slide-btn:hover {
    background: rgba(255,255,255,1);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.prev-btn {
    left: -25px;
}

.next-btn {
    right: -25px;
}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
    .clean-slideshow {
        width: 95vw;
        max-width: 95vw;
        margin: 20px auto;
        padding: 0 30px;
    }
    
    .slideshow-container {
        height: 60vh;
        max-height: 60vh;
        width: 100%;
    }
    
    .slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-align: center;
    }
    
    .slide img {
        max-width: 90%;
        max-height: 80%;
        object-fit: contain;
        margin-bottom: 15px;
    }
    
    .slide h3 {
        margin: 0;
        padding: 0;
        font-size: 1.1rem;
        color: #000;
    }
    
    .slide-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .prev-btn {
        left: 5px;
    }
    
    .next-btn {
        right: 5px;
    }
    
    /* Center address in make contact section on omnipack mobile */
    .contact-section-orange .contact-address {
        text-align: center !important;
    }
    
    /* Add spacing between address and first person on mobile */
    .contact-section-orange .col-md-3:first-child {
        margin-bottom: 40px !important;
    }
}

/* Final navbar breakpoint hardening (logo visibility + menu icon consistency) */
.cti-navbar-brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none;
    flex-shrink: 0;
    /* Override Bootstrap's fixed 50px .navbar-brand height so the brand box
       wraps the logo — otherwise the logo overflows a 50px box and clips
       instead of the navbar growing with it. */
    height: auto !important;
}

.cti-navbar-brand picture {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

.cti-navbar-logo {
    display: block !important;
    flex-shrink: 0;
    width: 220px;
    max-width: min(220px, calc(100vw - 160px));
    height: auto;
    aspect-ratio: 863.156 / 163.275;
    object-fit: contain;
}

/* White logo + nav over dark CTI gradient headers (all pages) */
.cti-navbar-logo--dark {
    display: none !important;
}

.cti-navbar-logo--light {
    display: block !important;
}

#topNav .nav > li > a,
#topNav #menu-toggle-button,
#topNav .navbar-toggle,
#topNav .navbar-phone-btn,
#topNav .navbar-lang-btn,
#topNav #menu-button::before {
    color: #fff;
}

.header-text h1,
.header-text h3,
.header-text .header-subtext {
    color: #fff;
}

/* Index kept for specificity with hero */
body.page-index .cti-navbar-logo--dark {
    display: none !important;
}

body.page-index .cti-navbar-logo--light {
    display: block !important;
}

body.page-index #topNav .nav > li > a,
body.page-index #topNav #menu-toggle-button,
body.page-index #topNav .navbar-toggle,
body.page-index #topNav #menu-button::before {
    color: #fff;
}

/* Open mobile menu: logo + circular toggle above overlay; black logo on white menu */
body.mobile-menu-open #topNav,
body.mobile-menu-open #topNav.navbar-fixed-top {
    z-index: 1060 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

body.mobile-menu-open #topNav .cti-navbar-logo--dark,
body.page-index.mobile-menu-open #topNav .cti-navbar-logo--dark {
    display: block !important;
}

body.mobile-menu-open #topNav .cti-navbar-logo--light,
body.page-index.mobile-menu-open #topNav .cti-navbar-logo--light {
    display: none !important;
}

body.mobile-menu-open #topNav #menu-toggle-button,
body.mobile-menu-open #topNav .navbar-toggle,
body.mobile-menu-open #topNav .navbar-phone-btn,
body.mobile-menu-open #topNav .navbar-lang-btn,
body.mobile-menu-open #topNav #menu-button::before {
    color: var(--brand-dark) !important;
}

body.mobile-menu-open #mobile-menu-overlay,
#mobile-menu-overlay.open {
    z-index: 1040 !important;
}

/* Wrapper creates stacking context — lift it with the open menu */
body.mobile-menu-open .navbar-wrapper {
    z-index: 1060 !important;
    position: relative;
}

body.mobile-menu-open .navbar-wrapper .navbar-fixed-top,
body.mobile-menu-open #topNav.navbar-fixed-top {
    z-index: 1061 !important;
}

body.mobile-menu-open .cti-navbar-brand {
    position: relative;
    z-index: 1062;
}

body.mobile-menu-open #menu-toggle-button {
    z-index: 1063 !important;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) .cti-navbar-logo--light,
body.page-index #topNav.navbar-fixed-top:not(.navbar-transparent) .cti-navbar-logo--light {
    display: none !important;
}

#topNav.navbar-fixed-top:not(.navbar-transparent) .nav > li > a,
#topNav.navbar-fixed-top:not(.navbar-transparent) #menu-toggle-button,
#topNav.navbar-fixed-top:not(.navbar-transparent) .navbar-toggle,
#topNav.navbar-fixed-top:not(.navbar-transparent) #menu-button::before,
body.page-index #topNav.navbar-fixed-top:not(.navbar-transparent) .nav > li > a,
body.page-index #topNav.navbar-fixed-top:not(.navbar-transparent) #menu-toggle-button,
body.page-index #topNav.navbar-fixed-top:not(.navbar-transparent) .navbar-toggle,
body.page-index #topNav.navbar-fixed-top:not(.navbar-transparent) #menu-button::before {
    color: var(--brand-dark);
}

/* ==========================================================================
   ONE breakpoint: desktop ≥1200px | small ≤1199px
   All small-screen layout is clamped here (overrides older 991/767/414/320 piles).
   ========================================================================== */

/* Desktop content alignment */
@media screen and (min-width: 1200px) {
    .index-products > .row,
    .index-worldwide > .row {
        display: flex;
        align-items: center;
    }

    .index-products > .row::before,
    .index-products > .row::after,
    .index-worldwide > .row::before,
    .index-worldwide > .row::after {
        display: none;
    }

    .index-products > .row > [class*="col-"],
    .index-worldwide > .row > [class*="col-"] {
        float: none;
    }
}

/* Small screens only */
@media screen and (max-width: 1199px) {
    /* --- Navbar: logo left, circular burger right --- */
    #topNav {
        height: auto;
        min-height: clamp(76px, 16vw, 88px);
    }

    #topNav > .container {
        height: auto;
        min-height: clamp(76px, 16vw, 88px);
    }

    #topNav .navbar-header {
        width: 100%;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        float: none;
        min-height: clamp(76px, 16vw, 88px);
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #topNav .navbar-brand.cti-navbar-brand {
        min-height: 0;
        padding: 0 !important;
        margin: 0;
        flex: 1 1 auto;
        max-width: calc(100% - 3.5rem);
    }

    #topNav .navbar-brand.cti-navbar-brand .cti-navbar-logo {
        width: auto !important;
        height: clamp(56px, 13.5vw, 66px) !important;
        max-height: clamp(56px, 13.5vw, 66px) !important;
        min-width: 0 !important;
        max-width: min(220px, 62vw) !important;
        aspect-ratio: auto;
    }

    #topNav .navbar-toggle,
    #topNav #menu-toggle-button {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        border: 1px solid currentColor !important;
        border-radius: 50% !important;
        background-color: transparent !important;
        line-height: 1;
        float: none !important;
    }

    #topNav .hamburger-title {
        display: none !important;
    }

    #topNav #menu-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: var(--icon-size);
        height: var(--icon-size);
    }

    #topNav #menu-button::before {
        content: "\e2f0";
        color: inherit;
    }

    #topNav #menu-toggle-button.active #menu-button::before,
    #topNav .navbar-toggle:not(.collapsed) #menu-button::before {
        content: "\e4f6";
    }

    .navbar-responsive-collapse,
    .navbar-responsive-collapse.in {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-menu-overlay-wrapper {
        display: block !important;
    }

    /* --- Page headers / heroes (Omnipack band pattern) --- */
    .hero-static {
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
        margin-bottom: var(--hero-band-margin) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
    }

    .header-image,
    .header-image-start {
        --hero-band-height: clamp(300px, 55vw, 420px);
        --hero-band-margin: clamp(40px, 8vw, 64px);
        height: auto !important;
        min-height: var(--hero-band-height) !important;
        max-height: none !important;
        margin-bottom: var(--hero-band-margin) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
    }

    .hero-static-content {
        height: auto !important;
        min-height: 0;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: clamp(72px, 12vw, 96px) !important;
        padding-bottom: clamp(20px, 4vw, 32px) !important;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    .header-image-content,
    .header-image > .container.header-image-content {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: clamp(72px, 12vw, 96px) !important;
        padding-bottom: clamp(16px, 3vw, 28px) !important;
        box-sizing: border-box;
        align-self: center;
        flex: 0 0 auto;
    }

    .header-text {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 !important;
        max-width: 36rem;
    }

    .hero-graphic,
    .hero-static .hero-graphic {
        width: min(70vw, 360px);
        transform: translate(-1%, 25%);
    }

    .hero-static-title {
        font-size: var(--title-size) !important;
    }

    .hero-static-text {
        font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    }

    /* Contact page: no overlap with hero; full-width form fields */
    .contact-page-form,
    .contact-page-intro {
        margin-top: clamp(20px, 4vw, 32px) !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-page-form .form-control,
    .contact-page-form textarea.form-control,
    .contact-page-form select.form-control,
    .contact-page-form .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .contact-map-embed {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-map-embed iframe,
    .contact-map-embed .contact-map-frame {
        height: clamp(220px, 55vw, 320px) !important;
    }

    /* --- Content columns stack --- */
    .index-products > .row > [class*="col-"],
    .index-worldwide > .row > [class*="col-"],
    .container-wrapper .row > [class*="col-md-"],
    .container-wrapper .row > [class*="col-sm-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        /* Zero Bootstrap offset margins (e.g. col-md-offset-2 stays active
           from 992px up); without this, stacked full-width columns keep the
           offset and overflow the right edge between 992–1199px. */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Match stacked columns: drop the 740px reading measure below desktop */
    .col-maxwidth {
        max-width: none !important;
        width: 100%;
    }

    .index-products,
    .index-worldwide {
        padding-left: 15px;
        padding-right: 15px;
    }

    .index-products h2,
    .index-worldwide h2,
    .container-wrapper h1,
    .container-wrapper h2 {
        font-size: clamp(1.35rem, 5vw, 1.85rem);
        line-height: 1.25;
    }

    .container-wrapper h3 {
        font-size: clamp(1.05rem, 3.8vw, 1.25rem);
    }

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

    .wm-gallery > .container {
        grid-template-columns: 1fr !important;
        gap: clamp(16px, 4vw, 24px) !important;
    }

    .wm-gallery .pull-left,
    .wm-gallery .img-thumbnail {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: auto !important;
    }

    .floatbox,
    .item-floatbox-pull-right,
    .item-floatbox-pull-right-tel,
    .pull-left,
    .pull-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- Footer: auto height, full dark/gradient behind all columns --- */
    .site-footer,
    footer.site-footer,
    footer.site-footer.cti-gradient-band {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background-color: var(--cti-gradient-base) !important;
    }

    footer.site-footer.cti-gradient-band::before {
        background-size: 100% 100% !important;
        background-position: center !important;
        transform: none !important;
    }

    .site-footer-main {
        height: auto;
        overflow: visible;
    }

    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px) !important;
    }

    .site-footer-col {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .site-footer-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .site-footer-legal {
        flex-direction: column;
        gap: 10px;
    }

    body.page-index main {
        padding-top: 0;
    }
}

/* Index content sections */
.index-products {
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(24px, 4vw, 40px);
}

.index-products h2,
.index-worldwide h2 {
    font-family: var(--font-light);
    font-weight: 300;
    color: #000;
    line-height: 1.2;
}

.index-worldwide {
    padding-bottom: clamp(48px, 8vw, 80px);
}

/* ===========================================================================
   Burger-only navigation at ALL breakpoints (desktop included).
   The full-screen overlay holds the navigation everywhere, so the horizontal
   desktop menu is hidden and the Phosphor hamburger is always shown.
   Placed last so it overrides the earlier ≥1200px horizontal-nav rules.
   =========================================================================== */
/* Inner .container keeps its Bootstrap max-width + centering, so navbar content
   lines up with the body content width. */
#topNav > .container {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

/* Header row spans the full container: logo hard-left, hamburger hard-right. */
#topNav .navbar-header {
    float: none !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#topNav .navbar-brand.cti-navbar-brand {
    flex: 0 1 auto !important;
    margin: 0 !important;
}

/* Always show the round hamburger toggle, pinned to the right edge */
.navbar-toggle,
#menu-toggle-button {
    display: inline-flex !important;
    flex: 0 0 auto;
    margin-left: auto !important;
    float: none !important;
}

#topNav #menu-button {
    display: inline-flex !important;
}

/* Phosphor glyphs on the toggle at every width: list by default, X when open */
#topNav #menu-button::before {
    font-family: "Phosphor-Light";
    content: "\e2f0";
}

#topNav #menu-toggle-button.active #menu-button::before,
#topNav .navbar-toggle:not(.collapsed) #menu-button::before {
    content: "\e4f6";
}

/* Never show the inline horizontal menu — navigation lives in the overlay */
#topNav .navbar-collapse.navbar-responsive-collapse,
.navbar-responsive-collapse,
.navbar-responsive-collapse.in {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Make the overlay available on desktop too */
.mobile-menu-overlay-wrapper {
    display: block !important;
}

/* ===========================================================================
   Cigar Rings components
   =========================================================================== */
/* Vertical-only padding: these classes sit directly on a Bootstrap `.container`,
   so zeroing horizontal padding (the old `... 0` shorthand) killed the 15px side
   gutters and let the inner `.row` negative margins bleed to the viewport edges.
   Setting only top/bottom keeps the container's default horizontal gutters. */
.cr-categories,
.cr-features,
.cr-techniques,
.cr-collections,
.cr-crosslinks {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
}
.cr-clients {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
    background: #fff;
}

.cr-section-head { margin-bottom: 36px; }
.cr-section-title { text-align: center; margin: 0 0 12px; }
.cr-section-sub,
.cr-clients-intro { max-width: 760px; margin: 0 auto 36px; }

/* Two-column feature ("We are Cigar Rings") — vertical rhythm comes from the
   .cr-weare section padding (unified section spacing). */

/* Two-column feature ("We are Cigar Rings") — vertically center text with image */
@media (min-width: 768px) {
    .cr-feature-row { display: flex; align-items: center; }
    .cr-feature-row::before,
    .cr-feature-row::after { display: none; }
    .cr-feature-row > [class*="col-"] { float: none; }
}

/* On mobile the columns stack. Give the image and the text block ONE clean,
   deliberate gap controlled by the text column's top margin — not by the
   heading's fragile line-height leading. */
@media (max-width: 767px) {
    .cr-weare .cr-feature-row img.img-responsive {
        display: block;
        margin: 0;
    }
    /* text column sits below the image with a consistent gap */
    .cr-weare .cr-feature-row > [class*="col-"] + [class*="col-"] {
        margin-top: 22px;
    }
    /* heading hugs the top of the text block (no extra top leading/margin) */
    .cr-weare .cr-feature-row h2 {
        margin-top: 0;
        line-height: 1.2;
    }
}

/* Category cards (Bands / Labels / Packaging) */
.cr-category { padding: 16px; }
.cr-category-icon { height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cr-category-icon img { max-height: 96px; width: auto; }
.cr-category h3 { text-transform: uppercase; letter-spacing: 0.04em; }

/* Feature icon row (market leaders) */
.cr-feature { padding: 16px 12px; }
.cr-feature-icon { height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cr-feature-icon img { max-height: 84px; width: auto; }
.cr-feature-icon .ph-light { font-size: 52px; color: #000; }
.cr-feature p { max-width: 260px; margin: 0 auto; }

/* Technique / finish cards */
.cr-technique { height: 100%; padding: 28px 24px; border: 1px solid var(--brand-light-grey); border-radius: 16px; background: var(--brand-light-grey); transition: box-shadow .25s ease, transform .25s ease; }
.cr-technique:hover { box-shadow: 0 14px 34px rgba(10,74,46,.10); transform: translateY(-3px); }
.cr-technique-icon { height: 72px; display: flex; align-items: center; margin-bottom: 16px; }
.cr-technique-icon img { max-height: 72px; width: auto; }
.cr-technique-icon .ph-light { font-size: 46px; color: #000; }
.cr-technique-label { display: block; margin: 0 0 12px; font-size: 1.3rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: #000; }
.cr-technique h3 { margin-top: 0; }

/* Card grids: equal-height flex rows that wrap cleanly at every width.
   Fixes the Bootstrap 3 float-catch that staggered cards (esp. the 6
   technique cards) while resizing across the sm/md breakpoints. */
@media (min-width: 768px) {
    .cr-techniques > .row,
    .cr-categories > .row,
    .cr-features > .row {
        display: flex;
        flex-wrap: wrap;
    }
    .cr-techniques > .row::before,
    .cr-techniques > .row::after,
    .cr-categories > .row::before,
    .cr-categories > .row::after,
    .cr-features > .row::before,
    .cr-features > .row::after { content: none; }
    .cr-techniques > .row > [class*="col-"],
    .cr-categories > .row > [class*="col-"],
    .cr-features > .row > [class*="col-"] {
        display: flex;
        float: none;
    }
    .cr-techniques > .row > [class*="col-"] > .cr-technique,
    .cr-categories > .row > [class*="col-"] > .cr-category,
    .cr-features > .row > [class*="col-"] > .cr-feature { width: 100%; }
}

/* Collection cards */
.cr-collection-card { display: block; color: inherit; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--brand-light-grey); height: 100%; transition: box-shadow .25s ease, transform .25s ease; }
.cr-collection-card:hover { box-shadow: 0 16px 38px rgba(10,74,46,.12); transform: translateY(-3px); text-decoration: none; }
.cr-collection-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-light-grey); }
.cr-collection-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cr-collection-card:hover .cr-collection-media img { transform: scale(1.04); }
.cr-collection-body { padding: 22px 24px 8px; }
.cr-collection-body h3, .cr-collection-body h4 { margin-top: 0; }
.cr-collection-more { display: inline-block; padding: 0 24px 22px; color: #000; font-weight: 400; letter-spacing: .03em; }
.cr-collection-more::after { content: " \2192"; }
.cr-collection-card--compact .cr-collection-body { padding: 16px 18px; text-align: center; }

/* Client logo strip — infinite marquee */
.cr-marquee {
    overflow: hidden;
    width: 100%;
    /* fade the left/right edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cr-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    animation: cr-marquee-scroll 70s linear infinite;
    /* NOTE: no `will-change: transform` here. The track is ~12,000px wide,
       which at DPR 2 exceeds Chrome's ~16,384px max GPU texture size. Forcing
       a permanent composited layer on it made the strip intermittently render
       blank. Transform animations stay GPU-composited without will-change, and
       Chrome tiles the layer on demand, so it renders reliably. */
}
.cr-marquee:hover .cr-marquee-track { animation-play-state: paused; }
.cr-clients-item {
    flex: 0 0 auto;
    width: clamp(110px, 12vw, 150px);
    margin-right: clamp(24px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cr-clients-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .25s ease, opacity .25s ease;
}
.cr-clients-item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes cr-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .cr-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* Brand CTA band */
.cr-cta { padding: clamp(32px, 4vw, 52px) 0; text-align: center; }
.cr-cta-inner { max-width: 760px; }
.cr-cta-title { color: #fff; margin-top: 0; margin-bottom: 12px; font-size: var(--title-size); }
.cr-cta-text { color: #fff; opacity: .92; margin: 0 auto 22px; max-width: 620px; font-size: 1.125rem; }

/* Member-of-CTI badge */
.cr-member { display: inline-flex; }
.cr-member img { height: 56px; width: auto; }

/* Offices */
.cr-offices { margin-top: 8px; }
.cr-office { padding: 24px 0; }
.cr-office h3 { margin-top: 0; }
.cr-office address { font-style: normal; margin-bottom: 12px; }
.cr-office-line { margin: 4px 0; }

/* Nav phone chip */
.navbar-phone { display: inline-flex; align-items: center; gap: 8px; color: #000; font-size: .85rem; letter-spacing: .03em; text-decoration: none; padding: 6px 0; }
.navbar-phone .ph-light { font-size: 1rem; color: #000; }
.navbar-phone:hover { color: #000; text-decoration: none; }

/* Home finishes gallery */
.cr-finishes { padding: clamp(40px, 6vw, 72px) 0; }
.cr-finishes-grid { margin-top: 28px; }
.cr-finish-tile { border-radius: 14px; overflow: hidden; margin-bottom: 24px; background: var(--brand-light-grey); aspect-ratio: 1 / 1; }
.cr-finish-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* About: commitment / team */
.cr-commitment { padding: clamp(40px, 6vw, 72px) 0; }
.cr-team { padding: clamp(40px, 6vw, 72px) 0; background: var(--brand-light-grey); }
.cr-team-photo { border-radius: 16px; margin-bottom: 24px; }
.cr-team-list { list-style: none; padding: 0; margin: 12px 0 0; column-count: 2; column-gap: 28px; }
.cr-team-list li { padding: 10px 0; border-bottom: 1px solid rgba(10,74,46,.14); break-inside: avoid; font-size: 1.05rem; }

/* Services product list */
.cr-productlist { padding: clamp(32px, 5vw, 56px) 0; }

/* Collection intro / contact offices */
.cr-collection-intro { padding: clamp(36px, 5vw, 60px) 0; }
.contact-page-offices { padding-bottom: clamp(24px, 4vw, 48px); }

/* Footer member badge */
.site-footer-member { display: block; margin-top: 20px; }
.site-footer-member img { display: block; width: 190px; max-width: 70%; height: auto; }

/* ===========================================================================
   Top navbar actions: circular phone + Omnipack-style language picker
   =========================================================================== */
/* Actions live inside the header row; framework sets header = 100% width with
   space-between, so this group sits hard-right and the logo stays hard-left. */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
/* Even gaps between phone / language / burger
   (framework pushes .navbar-toggle with margin-left:auto — reset it here). */
.navbar-actions .navbar-toggle,
.navbar-actions #menu-toggle-button {
    margin-left: 0 !important;
}

/* Circular controls (phone + language) — border/text inherit navbar color state */
.navbar-phone-btn,
.navbar-lang-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-hit);
    height: var(--icon-hit);
    min-width: var(--icon-hit);
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: var(--btn-border-width) solid currentColor;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    font-family: var(--font-light);
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-phone-btn .ph-light { font-size: 1.05rem; }

/* Hover/focus fill — brand green in every navbar colour state */
#topNav .navbar-phone-btn:hover,
#topNav .navbar-phone-btn:focus,
#topNav .navbar-lang-btn:hover,
#topNav .navbar-lang-btn:focus,
#topNav .navbar-lang.is-open .navbar-lang-toggle {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    text-decoration: none;
}

.navbar-lang { position: relative; flex: 0 0 auto; }
.navbar-lang-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
    margin: 0;
    list-style: none;
    background: transparent;
    z-index: 30;
}
.navbar-lang-menu[hidden] { display: none !important; }
.navbar-lang.is-open .navbar-lang-menu { display: flex !important; }


/* Navbar logo: match box to the Cigar Rings wordmark ratio so it sits flush-left
   (the base rule hardcodes the CTI ratio, which letterboxed + centred the CR logo). */
.cti-navbar-logo {
    aspect-ratio: 516.88 / 572.64;
    height: 84px;
    width: auto;
    max-width: none;
}

/* ===========================================================================
   Navbar layout — replicated from Omnipack (full-width row: logo far-left,
   phone / language / burger far-right). LAST WORD; beats all earlier rules.
   =========================================================================== */
.top-header > .container,
#topNav > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}
/* Kill Bootstrap clearfix pseudo-elements — in a flex row they act as empty
   flex items and space-between shoves them to the edges, centring the logo. */
#topNav > .container::before,
#topNav > .container::after,
#topNav .navbar-header::before,
#topNav .navbar-header::after {
    content: none !important;
    display: none !important;
}
#topNav .navbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
#topNav .navbar-brand.cti-navbar-brand {
    flex: 0 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
}
#topNav .navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
#topNav .navbar-actions .navbar-toggle,
#topNav .navbar-actions #menu-toggle-button {
    margin-left: 0 !important;
    float: none !important;
}

/* Navbar column = body/footer .container width (Bootstrap: 100% <992 · 970px ≥992 · 1170px ≥1200) */
@media screen and (min-width: 992px) {
    .top-header > .container,
    #topNav > .container { width: 970px !important; max-width: 970px !important; }
    /* Taller navbar on desktop / wide screens. align-items:center keeps the
       logo + actions centred; governs both transparent and solid states. */
    #topNav > .container { min-height: 118px; }
}
@media screen and (min-width: 1200px) {
    .top-header > .container,
    #topNav > .container { width: 1170px !important; max-width: 1170px !important; }
}

/* Contact office location logos (DOM / NIC — same lockup as the specialists strip, dark) */
.cr-office-logo {
    display: block;
    height: 104px;
    width: auto;
    max-width: 100%;
    margin: 0 0 18px;
}

/* About: 'Our commitment to quality' — image left, text vertically centred.
   Guarded at >=768px so the columns stack normally on mobile instead of
   squishing side-by-side (they have no Bootstrap width below sm). */
@media (min-width: 768px) {
    .cr-commitment .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}
.cr-commitment-img {
    width: 100%;
    height: auto;
    display: block;
}

/* On mobile the columns stack — give the text block a clean, deliberate gap
   below the image/caption (matches the homepage two-column pattern). */
@media (max-width: 767px) {
    .cr-commitment .row > [class*="col-"] + [class*="col-"] {
        margin-top: 22px;
    }
    .cr-commitment .row > [class*="col-"] + [class*="col-"] h2 {
        margin-top: 0;
    }
}

/* About: captioned facility figure */
.cr-figure { margin: 0; }
.cr-figure img { display: block; width: 100%; height: auto; }
.cr-figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #000;
    font-weight: 400;
}

/* Language dropdown option circles: solid white bg with dark text (green fill on hover) */
#topNav .navbar-lang-menu .navbar-lang-btn {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
    box-shadow: 0 4px 14px rgba(10, 74, 46, 0.18);
}
#topNav .navbar-lang-menu .navbar-lang-btn:hover,
#topNav .navbar-lang-menu .navbar-lang-btn:focus {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}

/* Lang picker open: the current-language toggle keeps a black outline */
#topNav .navbar-lang.is-open .navbar-lang-toggle {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}

/* 'We are Cigar Rings' — two stacked, captioned facility figures */
.cr-weare { padding: clamp(24px, 4vw, 48px) 15px; }
.cr-figure--stack { margin-bottom: 24px; }
.cr-figure--stack:last-child { margin-bottom: 0; }

/* Nudge the navbar logo down so it optically centres with the right-hand icons
   (higher specificity + !important to beat the mobile `padding: 0 !important` rule) */
#topNav .navbar-brand.cti-navbar-brand { padding-top: 0 !important; }

/* On phones the dot graphic is large and sits behind the text — fade it back so text stays legible */
@media screen and (max-width: 767px) {
    .hero-graphic { opacity: 0.3; }
}

/* CTI specialists strip: height-authoritative logo sizing (mirrors cti-group-web).
   Every wordmark renders at the SAME height with width left free. A width cap
   scales wide marks down and loses height, so two copies of the same "viappiani"
   wordmark end up at different sizes — which is what made Italy read oversized. */
.index-specialists-logos {
  --logo-height: 38px;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(24px, 3.2vw, 56px) !important;
  column-gap: clamp(24px, 3.2vw, 56px) !important;
}
.index-specialists-logos a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.index-specialists-logos img,
.index-specialists-logos img.affiliate-logo {
  width: auto !important;
  height: var(--logo-height) !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
}
/* Omnipack's glyphs fill less of their box — nudge up to match the viappiani x-height */
.index-specialists-logos img[src*="omnipack"] {
  height: calc(var(--logo-height) * 1.25) !important;
}
/* Cigar-rings crests are portrait — sized on their own (matches omnipack) */
.index-specialists-logos img.affiliate-logo--cigar {
  width: auto !important;
  height: 84px !important;
  max-width: 112px !important;
  max-height: none !important;
}

/* Desktop: keep all five specialists on a single row */
@media screen and (min-width: 1200px) {
  .index-specialists-logos {
    flex-wrap: nowrap !important;
    gap: clamp(20px, 2.4vw, 48px) !important;
    column-gap: clamp(20px, 2.4vw, 48px) !important;
  }
}

/* Smaller screens: shrink wordmarks + crests together, responsively (matches
   omnipack — a fluid clamp, not a fixed height, so the logos actually resize). */
@media screen and (max-width: 1199px) {
  .index-specialists-logos { --logo-height: clamp(26px, 5.7vw, 33px); }
  .index-specialists-logos img.affiliate-logo--cigar {
    height: clamp(56px, 14vw, 76px) !important;
    max-width: clamp(76px, 21vw, 104px) !important;
  }
}

/* Keep Bands / Labels / Packaging in ONE row at every width (incl. mobile) */
.cr-categories > .row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
}
.cr-categories > .row::before,
.cr-categories > .row::after { content: none; display: none; }
.cr-categories > .row > [class*="col-"] {
	float: none;
	width: 33.333%;
	max-width: 33.333%;
	flex: 0 0 33.333%;
	display: flex;
}
.cr-categories > .row > [class*="col-"] > .cr-category { width: 100%; }
@media (max-width: 767px) {
	.cr-categories .cr-category { padding: 8px 6px; }
	.cr-categories .cr-category-icon { height: 56px; margin-bottom: 10px; }
	.cr-categories .cr-category-icon img { max-height: 56px; }
	.cr-categories .cr-category h3 { font-size: 0.8rem; letter-spacing: 0.02em; margin-top: 6px; }
}

/* ============================================================================
   GLOBAL SPACING NORMALIZATION
   One consistent title→paragraph gap and one section rhythm across the whole
   site. Placed last so it norms the scattered per-section rules above.
   ============================================================================ */
/* Titles: consistent breathing room beneath every heading, and no stray top
   margin that inflated section tops. Hero (.header-text h*) and footer
   (.site-footer-heading) keep their own higher-specificity rules. */
h1 { margin: 0 0 20px; }
h2, h3 { margin: 0 0 20px; }

/* One unified gap between a section's heading block and its body content. */
.cr-section-title { margin: 0 0 clamp(32px, 5vw, 48px); }
.cr-section-sub,
.cr-clients-intro { margin: 0 auto clamp(32px, 5vw, 48px); }
.cr-section-head { margin-bottom: clamp(32px, 5vw, 48px); }

/* When a subtitle follows the title, keep the two tight; the unified gap then
   lives after the subtitle (so the whole heading block clears the body). */
.cr-section-title:has(+ .cr-section-sub),
.cr-section-title:has(+ .cr-clients-intro) { margin-bottom: 12px; }

/* Sections: ONE vertical rhythm everywhere via --section-pad. Every content
   section (white or full-bleed band) shares the same top & bottom padding, so
   the gap between any two sections is identical on desktop and mobile. */
.cr-categories,
.cr-features,
.cr-techniques,
.cr-collections,
.cr-crosslinks,
.cr-clients,
.cr-commitment,
.cr-finishes,
.cr-team,
.cr-productlist,
.cr-collection-intro,
.cr-weare,
.cr-cta,
.index-specialists {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}
.index-specialists { margin-top: 0; margin-bottom: 0; }

/* Company video (About page, under the Your Packaging Partner strip) */
.cr-video { padding: var(--section-pad) 0; }
.cr-video-frame {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    box-shadow: 0 14px 34px rgba(10, 74, 46, .12);
}
.cr-video-player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Imprint / legal page — clear separation between segments (the global heading
   rule has no top margin, so headings otherwise hug the content above). */
.imprint-page h2 { margin-top: clamp(40px, 5vw, 60px); }
.imprint-page h2:first-of-type { margin-top: 0; }
.imprint-page .imprint-offices { margin-top: clamp(28px, 4vw, 44px); }
.imprint-page .imprint-offices h3 { margin-top: 0; }
.imprint-page p { margin-bottom: 14px; }