/*	------------------------ General -------------------------- */

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1170px;
    }

    .container-fluid {
        max-width: calc(100% - 120px);
    }
}




@media(min-width: 992px) {
    .container-fluid {
        max-width: calc(100% - 60px);
    }
}

@media(min-width: 1000px) {
    .container-fluid {
        max-width: calc(100% - 120px);
    }
}

@media (min-width: 1600px) {
    .container-fluid {
        max-width: min(1600px, calc(100% - 360px));
    }
}

/* Self-hosted fonts for the "Personalise Your Leather" engraving preview (same local
   @font-face approach as Cormorant/Jost in css/theme/new2023.css — no Google Fonts CDN).
   The other preview options (Rage Italic, Arial, Times New Roman, Brush Script MT) are
   system fonts and need no @font-face. */
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/engraving/BebasNeue-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Satisfy';
    src: url('../fonts/engraving/Satisfy-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Courgette';
    src: url('../fonts/engraving/Courgette-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sacramento';
    src: url('../fonts/engraving/Sacramento-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Parisienne';
    src: url('../fonts/engraving/Parisienne-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Vesper Libre';
    src: url('../fonts/engraving/VesperLibre-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Castoro Titling';
    src: url('../fonts/engraving/CastoroTitling-Regular.ttf') format('truetype');
    font-display: swap;
}

/* Open stand-ins for the proprietary Monotype faces in the engraving list, which cannot be
   self-hosted here for licensing reasons. Each dropdown option asks for the real font first
   and only falls back to these, so a visitor who has Arial/Times/Brush Script installed still
   sees the genuine face. Arimo is metric-compatible with Arial, Tinos with Times New Roman;
   Yellowtail is the closest open brush script to Brush Script MT / Rage Italic. */
@font-face {
    font-family: 'Arimo';
    src: url('../fonts/engraving/Arimo-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Tinos';
    src: url('../fonts/engraving/Tinos-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Yellowtail';
    src: url('../fonts/engraving/Yellowtail-Regular.ttf') format('truetype');
    font-display: swap;
}


:root {

    /* -- Brand Colours (Design System) -- */
    --color-primary: #FAC217;
    --color-primary-light: #FFD248;
    --color-primary-lightest: #FFFCEB;
    --color-primary-dark: #E1AF15;
    /* computed ~10% darker than --color-primary; no explicit dark shade was given in the palette */

    --color-secondary: #206C50;
    --color-secondary-mid: #33966F;
    --color-secondary-light: #B7E3CC;
    --color-secondary-dark: #184F3B;
    /* computed ~15% darker than --color-secondary; no explicit dark shade was given in the palette */

    --color-tertiary: #E9E8E6;
    --color-tertiary-mid: #F6F6F6;
    --color-tertiary-light: #F9F9F9;

    /* Neutral */
    --text: #000;
    --bg: #ffffff;

    /* Fonts (Design System) */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Jost', sans-serif;

    /* Radius / Shadow */
    --radius-sm: 8px;
    --radius-md: 10px;
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);

    /* Headlines */
    --fs-display: clamp(32px, 4.5vw, 50px);
    /* 50px Bold - Highlight */
    --fs-h1: clamp(28px, 3.2vw, 48px);
    /* 48px Bold - Section title */
    --fs-h2: clamp(24px, 3vw, 45px);
    /* 45px Medium - Banner Title */
    --fs-h3: clamp(22px, 2.8vw, 40px);
    /* 30px - Contact Us "Connect With Us" (not covered by the new type scale, left as-is) */
    --fs-h4: clamp(18px, 2vw, 22px);
    /* 22px Regular - Small Title */
    --fs-h5: clamp(16px, 1.8vw, 20px);
    /* 20px Medium - Footer / Small Title / Card Title */
    --fs-f30: clamp(17px, 1.9vw, 30px);
    /* 28px - */
    /* Titles */
    --fs-f35: clamp(24px, 3.15vw, 35px);

    --fs-f20: clamp(16px, 1.8vw, 20px);
    /* 20px - Homepage "What Makes Us Different" */
    --fs-f18: clamp(15px, 1.6vw, 18px);
    /* 18px - Footer "Follow Us" */
    --fs-f16: clamp(14px, 1.5vw, 16px);
    /* 16px - Points / Product Category */
    --fs-t14: clamp(12px, 1.3vw, 14px);
    /* 14px - Testimonial Name / Footer Title */

    /* Body Text */
    --fs-p16: clamp(14px, 1.5vw, 16px);
    /* 16px - Button text */
    --fs-p14: clamp(12px, 1.3vw, 14px);
    /* 14px - Paragraph / Date */
    --fs-t12: clamp(10px, 1vw, 12px);
    /* 12px - Description */

    /* Line-height */
    --lh-normal: 1.5;
    --lh-title: 1.2;

    /* Button */
    --btn-h: 44px;
    --btn-px: 24px;
    --btn-radius: 50rem;
    --btn-border: 1px;
}


body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fs-f16);
    font-weight: 400;
}

/* ============================================
   Typography Classes (Design System)
   ============================================ */

/* Display - 50px Bold (Highlight) */
.display {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: var(--lh-title);
}

/* H1 Headline - 48px Bold (Section title) */
.h1,
h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: var(--lh-title);
}

/* H2 Headline - 45px Medium (Banner Title) */
.h2,
h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-title);
}

/* H3 / Text - 30px Bold (Contact Us "Connect With Us") - not covered by the new type scale, size/weight left as-is */
.h3,
h3 {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    line-height: var(--lh-title);
    font-weight: 700;
}


/* H4 Headline - 22px Regular (Small Title) */
.h4,
h4 {
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    line-height: var(--lh-normal);
    font-weight: 400;
}


.title-xl {
    font-family: var(--font-body);
    font-size: var(--fs-f35);
    line-height: var(--lh-normal);
    font-weight: 700;
}

/* H5 Headline - 20px Medium (Footer / Small Title / Card Title) */
.h5,
h5 {
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    line-height: var(--lh-normal);
    font-weight: 500;
}

h6,
.h6 {
    font-family: var(--font-body);
}

/* Title-20 - 20px Bold (Homepage & About Us - What Makes Us Different) */
.title {
    font-size: var(--fs-f20);
    line-height: var(--lh-normal);
    font-weight: 700;
}

/* Title-16 Bold variant (Product Category) */
.title-sm,
.title-16 {
    font-size: var(--fs-f16);
    line-height: var(--lh-normal);
    font-weight: 500;
}

/* Paragraph - 16px (Content, Tag text) */
.p,
p {
    font-family: var(--font-body);
    font-size: var(--fs-p16);
    font-weight: 400;
    /* Regular */
}


/* Title-14 SemiBold (Testimonial Name) */
.title-14 {
    font-size: var(--fs-t14);
    line-height: var(--lh-title);
    font-weight: 600;
    /* SemiBold */
}

/* Footer "Follow Us" - 18px Bold */
/* Footer Title - 14px Bold */


/* Date - 14px SemiBold (Pink color for dates) */
.date {
    font-size: var(--fs-p14);
    font-weight: 600;
    /* SemiBold */
    color: var(--color-accent);
}

/* Description - 12px Regular */
.description {
    font-size: var(--fs-t12);
    font-weight: 400;
    /* Regular */
}

/* Small Text - 14px (note or tag text) */


.muted {
    color: var(--muted);
}

.tag {
    font-weight: 400;
    font-size: 14px;
    color: var(--text);
}


section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 575.9px) {
    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}


h2:has(+ p) {
    margin-bottom: 12px;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    cursor: default;
}

a:hover {
    color: var(--color-primary);
}

.datepicker.datepicker-dropdown.dropdown-menu {
    z-index: 9999 !important;
}


/* ============================================
   Button Styles (SCCL Design System)
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    font-size: var(--fs-p16);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: var(--btn-border) solid transparent;
    transition: all 160ms ease;
    user-select: none;
}

/* .btn:active {
    transform: translateY(1px);
} */

/* Primary Button - gold filled, dark text (e.g. "Join Now", "Enquire Now") */
.btn-primary {
    background: var(--color-primary);
    color: #000000;
    border-color: var(--color-primary);
}

/* Primary Hover / Active / Focus: dark green fill, white text */
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:focus-visible {
    background: var(--color-secondary);
    color: #ffffff;
    border-color: var(--color-secondary);
}

/* Primary Outlined variant - gold border, gold text, fills gold on hover */
.btn-primary-outlined {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-primary-outlined:hover,
.btn-primary-outlined:active,
.btn-primary-outlined.active,
.btn-primary-outlined:focus,
.btn-primary-outlined.focus,
.btn-primary-outlined:focus-visible {
    background: var(--color-primary);
    color: #000000;
}

/* Secondary Button - dark green filled, white text (e.g. "Sign Up Now") */
.btn-secondary {
    background: var(--color-secondary);
    color: #ffffff;
    border-color: var(--color-secondary);
}

/* Secondary Hover / Active / Focus: mid green fill */
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:focus,
.btn-secondary.focus {
    background: var(--color-secondary-mid);
    color: #ffffff;
    border-color: var(--color-secondary-mid);
}

/* Tertiary Button - text-only, serif, for compact areas (cards, forms) */
.btn-tertiary {
    display: inline-block;
    background: transparent;
    color: var(--text);
    padding: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-p16);
    gap: 4px;
    transition: transform 0.1s ease-in-out;
    transform: skewX(0deg);
}

.btn-tertiary.btn-lg {
    font-size: var(--fs-h2);

}

.btn-tertiary:hover,
.btn-tertiary:focus {
    color: var(--color-primary);
    transform: skewX(-15deg);
}

/* Icon Button - circular quick action */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 160ms ease;
}


/* Disabled State */
.btn[disabled],
.btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}


/* 

.button{
	background-color: #734F0D;
	color: white;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	text-shadow: none;
	padding: 0 25px;
	letter-spacing: 0;
	text-transform: uppercase;
	line-height: 1;
	height: 36px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.button:hover{background-color: var(--color-primary);}
.button2{
	background-color: #5B5B5B;
	color: white;
}
.button2:hover{
	background-color: var(--color-primary);
}
.button3{
	background-color: var(--color-primary);
	color: #fff;
	border-radius: 100px;
	border: none;
	font-size: 16px;
	text-shadow: none;
	padding: 0 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: 50px;
	line-height: 50px;
}
.button3:hover{
	background-color: #734F0D;
}
.button4{
	background-color: #fff;
	color: #000;
	border-radius: 100px;
	border: none;
	font-size: 16px;
	text-shadow: none;
	padding: 0 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: 50px;
	line-height: 50px;
}
.button4:hover{
	background-color: #734F0D;
}
.button-outlined{
	background-color: transparent;
	color: #000;
	border-radius: 100px;
	border: 1px solid var(--color-primary);
	font-size: 16px;
	text-shadow: none;
	padding: 20px 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: auto;
	line-height: 1.3;
	text-decoration: none;
}
.button-outlined:hover{
	background-color: var(--color-primary);
	color: #fff;
}

.button3 + .button-outlined{
	padding-top: 0;
	padding-bottom: 0;
	height: 50px;
	line-height: 50px;
} */

.link {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}


.loadingDiv {
    display: none;
}


#noticeDiv,
#noticeDiv2,
#noticeDivApplication {
    display: none;
    margin-right: 0;
    margin-left: auto;
    padding: 0.5rem 1rem;
    margin-top: 10px;
}

.text-right {
    text-align: right;
}

.style-msg {
    margin: 10px auto;
    padding: 5px;
}


.font-weight-600 {
    font-weight: 600;
}

.font-weight-500 {
    font-weight: 500;
}


.mb-0 {
    margin-bottom: 0;
}

/* Pagination */


/*	------------------------ General END -------------------------- */

/*	------------------------ Header -------------------------- */

#top-bar .homenotice {
    width: 100%;
}

#top-bar .notice-slide {
    text-align: center;
}


.top-message {
    background-color: var(--color-primary);
}

.top-message .flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.top-message .content p,
.top-message .notice-slide {
    color: #000;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0;
    font-size: var(--fs-p14);
}

.top-message .notice-slide {
    text-align: center;
}

.top-message .content p a {
    color: #555;
    font-weight: 700;
}

.countdownbox {
    display: flex;
}

.countdownbox .box {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
}

.countdownbox .box:last-child {
    margin-right: 0;
}

.countdownbox .countdown {
    background-color: #ffffff;
    padding: 1px;
    border-radius: 5px;
    color: #242422;
    width: 45px;
    text-align: center;
}

.countdownbox .countdown+span {
    font-size: 12px;
    color: white;
    font-weight: 300;
    line-height: 1;
    margin-top: 3px;
}

#logo img {
    width: auto;
    height: 25px;
}

.header-outter-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.header-inner-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    /*width: calc(100% - 550px);*/
    /*width: calc(100% - 300px);*/
}

#primary-menu-container {}


#primary-menu>div>ul {
    justify-content: flex-end;
    padding: 0;
    gap: 30px;
}

#primary-menu>div>ul>li {}

#top-search svg path,
.loginaccount svg path,
#top-cart svg path {
    stroke: #fff;
}

#header.transparent-header.scrolled #top-search svg path,
#header.transparent-header.scrolled .loginaccount svg path,
#header.transparent-header.scrolled #top-cart svg path,
#header.transparent-header.scrolled .side-panel-trigger.side-nav-bar svg path,
#header.transparent-header:hover #top-search svg path,
#header.transparent-header:hover .loginaccount svg path,
#header.transparent-header:hover #top-cart svg path,
#header.transparent-header:hover .side-panel-trigger.side-nav-bar svg path {
    stroke: #000;
}

#header.transparent-header.scrolled .logout svg path,
#header.transparent-header:hover .logout svg path {
    fill: #000;
}


.top-search-open .header-inner-flexbox {
    /*width: calc(100% - 475px);*/
    flex-wrap: nowrap;
    /* overflow: hidden; */
    /*   -webkit-transition: width .3s ease;*/
    /*-o-transition: width .3s ease;*/
    /*transition: width .3s ease;*/
}

#primary-menu>div>ul>li>a {
    color: var(--text);
    font-size: var(--fs-p14) !important;
    text-transform: uppercase;
    letter-spacing: 1.12px;
    ;
}

/* ================================================================
   Mega-menu — Products (category sidebar + featured products) and
   Services (featured cards only)
   ================================================================ */

/* Nav items with a mega panel anchor the dropdown to the header, not the li.
   Both the li and the menu wrapper div (position:relative further down) must be
   static so the absolute panel climbs up to #header and spans the full width. */
#primary-menu>div>ul>li.mega-li {
    position: static !important;
}

/* Override theme's default dropdown sizing/positioning for mega panels */


/* Blur + dim the page behind the header while a mega menu is open */
body:has(#primary-menu li.mega-li.sfHover)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99;
    /* below the sticky header (z-index 199), above page content */
    background: rgba(17, 14, 25, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
    animation: megaFadeIn .3s ease;
}

@keyframes megaFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes megaSlideDown {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-12px);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

/* Single list item that holds the panel layout.
   The panel fills ~60% of the viewport height (Xiaomi-style). */
/* ── LEFT column: categories ── */
/* Child categories (accordion) */
/* ── RIGHT column: featured cards (also full panel for services) ── */
/* Stack all category groups in the same grid cell so the wrap keeps the
   height of the tallest group — empty categories don't shrink the panel */
/* Products panel: cards align left; per-category groups toggled by sidebar hover */


#primary-menu ul.mega-dropdown-product .mega-category-link {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

#primary-menu ul.mega-dropdown-product .mega-category-link:hover {
    background: var(--color-primary);
    color: #000000;
}

/* Services panel: center the cards block inside the 60vh panel */
/* Service cards: photos look better cropped edge-to-edge */


/* ================================================================
   Side Panel (Canvas theme's #side-panel / .side-panel-trigger),
   used as the primary nav drawer on both mobile and desktop.
   Overrides the theme's default 300px sidebar to be a full overlay.
   ================================================================ */

/* .stretched normally makes the push-panel variant shift #wrapper aside;
   this panel is meant to overlap the page instead, so cancel that shift. */
body.side-push-panel.stretched #wrapper,
body.side-push-panel.side-panel-open.stretched #wrapper {
    right: 0;
}

body.side-push-panel #side-panel {
    width: 100%;
    right: -100%;
    background-color: var(--bg);
}

/* The open position for phones is set in the max-width media query further down. It must stay
   scoped there: from 991px up the panel is positioned with left/transform instead, and forcing
   `right` at every width pushes the desktop panel out of place. */

body.side-push-panel #side-panel .side-panel-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header logo/hamburger hide while the panel is open - the panel's own
   close (X) button takes over as the toggle affordance in that state. */
body.side-panel-open #logo,
body.side-panel-open #primary-menu-trigger {
    visibility: hidden;
}

.side-panel-close {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

.side-nav {
    flex: 1;
    display: flex;
    /* If enough columns are open to exceed the panel's available width,
       scroll horizontally instead of clipping - a clipped column becomes an
       unhoverable dead zone that falsely triggers the panel's mouseleave. */
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 90px;
}

.side-nav-level {
    display: none;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: 0 30px 30px;
    overflow-y: auto;
}

.side-nav-level.is-current {
    display: flex;
}

/* Plays only when a level is genuinely appearing for the first time -
   not on every render (e.g. a level regaining .is-current just because a
   deeper column closed shouldn't replay the entrance and flicker). */
.side-nav-level.is-entering {
    animation: sideNavLevelIn .3s ease;
}

@keyframes sideNavLevelIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.side-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0 0 20px;
    font-family: var(--font-body);
    font-size: var(--fs-p14);
    font-weight: 500;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.side-nav-back i {
    font-size: 12px;
}

.side-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-nav-list li {
    border-bottom: 1px solid var(--color-tertiary);
}

.side-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 0;
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
}

/* Account / logout inside the side panel — phones only, because the header keeps just search
   and cart there. From 992px up these stay in the header, so this block is hidden. */
.side-panel-account {
    display: none;
}

.side-panel-account a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
    border-top: 1px solid var(--color-tertiary);
}

.side-panel-account a svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.side-panel-account a svg path {
    stroke: var(--text);
}

@media (max-width: 991.98px) {
    .side-panel-account {
        display: block;
        margin-top: auto;
    }
}

.side-nav-list li.is-sale a {
    color: #E63946;
}

.side-nav-list li.current>a {
    color: var(--color-primary);
}

/* Toggle whose column is currently open, on desktop where the parent
   column stays visible alongside its child column */
.side-nav-list a:hover {
    color: #D9D9D9;
}

@media (min-width: 991px) {

    /* Desktop: full-height panel anchored left, width hugs its open columns
       (not the full viewport) so the rest of the page stays visible beside it. */
    body.side-push-panel #side-panel {
        top: 0;
        left: 0;
        right: auto;
        width: auto;
        max-width: 100vw;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .4s ease;
        box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.18);
    }

    body.side-push-panel.side-panel-open #side-panel {
        transform: translateX(0);
    }

    .side-nav {
        /* No vertical padding here - each column runs the full panel height
           so its right-side divider line spans top-to-bottom like the design.
           Horizontal padding-left keeps the first column's content off the
           panel's left edge without putting a leading divider before it. */
        padding: 0 0 0 40px;
    }

    .side-nav-level {
        width: 420px;
        flex-shrink: 0;
        height: 100%;
        /* Top padding clears the absolute-positioned X button (see .side-panel-close). */
        padding: 60px 40px 40px;
        border-right: 1px solid var(--color-tertiary);
    }

    .side-nav-level.is-chain {
        display: flex;
    }

    .side-nav-back {
        display: none;
    }

    .side-nav-list a {
        font-size: var(--fs-h4);
        padding: 15px 0;
    }
}

/* Hamburger trigger: visible at every breakpoint now (opens #side-panel) */
#primary-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--text);
    font-size: 20px;
}

/* ================================================================
   Home page (application/views/home_view2.php)
   ================================================================ */

.hp-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.hp-section-header h2 {
    margin-bottom: 10px;
}

.hp-section-header p {
    color: var(--text);
    max-width: 1100px;
    margin-inline: auto;
}

/* -- Category Strip -- */
.hp-cat-strip {
    background-color: var(--color-tertiary-light);
}

.hp-cat-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 3.5vw, 70px);
    padding-bottom: 5px;
    justify-content: center;
    overflow: visible;
}

.hp-cat-strip__row .hp-cat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    width: 160px;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
}

.hp-cat-strip__avatar {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-tertiary-mid);

}

.hp-cat-strip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.hp-cat-strip__avatar:hover img {
    transform: scale(1.05);
}

.hp-cat-strip__label {
    max-width: 100%;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text);
    text-align: center;
    overflow-wrap: anywhere;
}

/* The strip label's colour now comes from the category's "Label Color" field as an inline
   style (admin/product/category), so there is no name-based .is-sale rule here any more. */

.hp-cat-strip__more {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-top: 27px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid var(--color-tertiary-mid);
    color: var(--text);
    background: var(--color-primary);
    transition: background .2s ease, color .2s ease;
}

.hp-cat-strip__more:hover {
    background: var(--color-secondary);
    color: #fff;
}

.hp-new-arrivals__row {
    padding-bottom: 10px;
    align-items: stretch;
}

.hp-new-arrivals__card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: clamp(160px, 22vw, 300px);
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--color-tertiary);
}

#pd-related-carousel .hp-new-arrivals__card {
    width: 100%;
}

.hp-new-arrivals__row>.hp-new-arrivals__card {
    height: auto;
}

.hp-new-arrivals__card:hover {
    color: #868686
}


.hp-new-arrivals__img {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}

.hp-new-arrivals__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.hp-new-arrivals__card:hover img {
    transform: scale(1.05);
}


.hp-new-arrivals__content {
    padding: 15px;
    background-color: var(--color-tertiary-mid);
    gap: 10px;
    /* fills the rest of the card. Was height:100% - a percentage against a card whose own
       height comes from being stretched, so it fell back to the content's natural height and
       the grey panel ended at a different point on each card. flex:1 1 auto has no such
       circularity, and it is what lets the price's margin-top:auto actually reach the bottom. */
    flex: 1 1 auto;
}


.hp-new-arrivals__name {
    margin-bottom: 0;
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-new-arrivals__price {
    margin-bottom: 0;
    margin-top: auto;
    min-height: 24px;
}

.hp-new-arrivals__price del {
    color: rgba(26, 26, 26, 0.4);
    margin-right: 6px;
}

.hp-new-arrivals__price ins {
    text-decoration: none;
}

/* -- Trending Now (featured categories) -- */
.hp-trending__row {
    display: flex;
    gap: 30px;
}

.hp-trending__card {
    position: relative;
    display: block;
    flex: 1 1 50%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    max-height: 700px;
    text-decoration: none;
}

.hp-trending__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hp-trending__card:hover img {
    transform: scale(1.04);
}

.hp-trending__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 40px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.hp-trending__tag {
    margin-bottom: 25px;
    font-weight: 300;
    text-transform: uppercase;
}

.hp-trending__title {
    font-style: italic;
    margin: 0;
    color: #fff;
    text-transform: capitalize;
}

.hp-trending__title::first-letter {
    text-transform: uppercase;
}

/* -- Our Services -- */
.hp-our-services {
    position: relative;
    /* Placeholder tone until the real leather-crafting photo replaces this background-image */
    background: url('../images/layout/hp-services-bg.webp') center / cover no-repeat;
}

.hp-our-services::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 75%);
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.hp-our-services__inner {
    position: relative;
    max-width: 640px;
}

.hp-our-services__eyebrow {
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hp-our-services__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hp-our-services__item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
}


.hp-our-services__num {
    flex-shrink: 0;
    color: #fff;
    font-weight: 300;
    line-height: 2.6;
}

.hp-our-services__title {
    font-family: var(--font-heading);
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 15px;
    line-height: normal;
}

.hp-our-services__title:hover {
    color: var(--color-primary);
}

.hp-our-services__desc {
    color: #fff;
    margin: 0;
}


.hp-exclusive__grid {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    gap: 50px;
    margin: 0 auto;
    justify-content: center;
}

.hp-exclusive__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hp-exclusive__item svg,
.hp-exclusive__icon {
    width: 80px;
    height: auto;
    color: var(--text);
    margin-bottom: 15px;
    object-fit: contain;
}

.hp-exclusive__title {
    font-weight: 500;
}

.hp-exclusive__sub {}

/* -- Join Our Membership -- */
.hp-membership {
    /* background: var(--color-primary-lightest); */
}

.hp-membership__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
}

.hp-membership__image {
    height: 100%;
}

.hp-membership__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 550px;
}

.hp-membership__right-card {
    /* flex: 1 1 420px; */
    position: relative;
    padding: 80px;
    height: 100%;
    background: var(--color-primary-lightest);

}

.hp-membership-logo {
    position: absolute;
    bottom: -30%;
    right: -60%;
    z-index: 1;
}

.hp-membership__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
}



.hp-membership__content h2 {
    margin-bottom: 80px;
    font-weight: 600;
}

.hp-membership__content h2 em {
    font-style: italic;
}

.hp-membership__content p {
    margin-bottom: 30px;
}

.hp-membership__content .btn.btn-secondary {
    max-width: 150px;
}


@media (max-width: 767.9px) {
    .hp-exclusive__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .hp-trending__row {
        gap: 15px;
    }

    .hp-trending__tag {
        margin-bottom: 10px;
    }

    .hp-membership__content {
        padding: 40px 24px;
    }

    .hp-cat-strip__row {
        gap: 20px;
    }

    .hp-membership__right-card {
        padding: 10px;
    }

    .hp-membership__content h2 {
        margin-bottom: 20px;
    }
}

@media (max-width: 576.9px) {
    .hp-cat-strip__row {
        gap: 10px;
    }

    .hp-trending__row {
        flex-direction: column;
    }

}

.header-outter-flexbox .topinfo {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

#wrapper {
    display: contents;
}

#header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--bg);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

#header.transparent-header {
    background-color: transparent;
    box-shadow: none;
    /* Pulls the photo hero up so it shows through the transparent header. This must match the
       header's own height exactly - it used to be -100px against a 75px header, which dragged
       the hero 25px too high and covered the bottom of the notice bar above it. */
    margin-bottom: -75px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Pages without a photo hero: the header is solid and sits in normal flow, so it must not
   pull the following content up underneath itself (that -100px is only for hero pages). */
#header.transparent-header.solid-header {
    margin-bottom: 0;
}

#header.transparent-header #logo img {
    filter: invert(1);
}

#top-search svg path,
.loginaccount svg path,
#top-cart svg path,
.side-panel-trigger.side-nav-bar svg path {
    stroke: #fff;
}

#header.transparent-header.scrolled #logo img,
#header.transparent-header:hover #logo img {
    filter: invert(0);
}


@media (max-width: 992px) {
    #header.transparent-header {
        margin-bottom: unset;
        background-color: var(--bg);

    }
}

/* Home page: fill the transparent header with white once the user scrolls down,
   or while a mega menu is open (superfish tags the li with .sfHover) */
#header.transparent-header.scrolled,
#header.transparent-header:hover,
#header.transparent-header:has(li.mega-li.sfHover) {
    background-color: var(--bg);
    color: #000;

}

/* Nav text and header icons default to dark (inherited from body's --text)
   now that #header is white by default. Only the home page's transparent
   hero state (not yet scrolled, no mega menu open) needs them flipped to
   white so they stay legible over a photo hero. Desktop only: below 993px
   .transparent-header is always filled solid (see media query above), so
   there is no transparent-over-hero state to flip on mobile. */
@media (min-width: 993px) {
    #header.transparent-header:not(.scrolled):not(:has(li.mega-li.sfHover)) #primary-menu>div>ul>li>a {
        color: #fff;
    }

}



#primary-menu>div>ul>li:first-child>a {
    padding-left: 0;
}

#primary-menu>div>ul>li>a>img {
    height: 14px;
}

#primary-menu ul li a+ul.category-nav:before {
    content: '';
    position: absolute;
    top: -7px;
    left: 60px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    z-index: 1;
}

#primary-menu ul li span {
    display: block;
}

#primary-menu ul li span svg {
    height: 10px;
    width: auto;
}


#primary-menu ul li span svg path {
    stroke: #000;
}

#primary-menu ul ul.category-nav {
    /*display: flex;*/
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    width: max-content;
    max-width: 660px;
    top: 55px;
    z-index: 2;
    border-top: none;
    border-radius: 8px;
    padding: 5px 10px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}

#primary-menu ul ul.category-nav li {
    flex: 0 0 33.3333%;
}

#primary-menu ul ul.category-nav li a {
    padding: 10px;
    margin: 0;
}

#primary-menu ul ul a {
    display: flex;
    justify-content: space-between;
    color: #000;
    font-weight: 400;
}

.mobile-drawer .navigation>ul>li.current>a,
.mobile-drawer .navigation>ul>li>ul>li.current>a,
.mobile-drawer .navigation>ul>li>ul>li>ul>li.current>a,
.mobile-drawer .navigation>ul>li>a:hover {
    color: var(--color-primary);
}

.mobile-drawer .navigation>ul>li>a:hover,
.mobile-drawer .navigation>ul>li>ul>li>a:hover,
.mobile-drawer .navigation>ul>li>ul>li>ul>li>a:hover {
    color: var(--color-primary);
}

/* drawer is light-themed (see css/mobile-drawer.css) */
.mobile-drawer .navigation>ul>li>a {
    color: #000;
}

.mobile-drawer .navigation>ul>li>a,
.mobile-drawer .navigation>ul>li>ul>li>a,
.mobile-drawer .navigation>ul>li>ul>li>ul>li>a {
    color: #000;
}



/* ============================================
   Submenu Dropdown Styling (SCCL Pill Style)
   ============================================ */

#primary-menu>div>ul>li>ul,
.corporate-units-dropdown ul {
    display: none;
    position: absolute;
    top: 100%;
    /* left: 100%; */
    /* transform: translateX(-50%); */
    background-color: #fff;
    border: 0;
    padding: 0;
    min-width: 150px;
    width: auto;
    z-index: 200;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

/* Triangle pointer */
/* #primary-menu>div>ul>li>ul::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-secondary);
} */

#primary-menu>div>ul>li:hover>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#primary-menu>div>ul>li>ul>li,
.corporate-units-dropdown ul li {
    float: none;
    margin: 0;
    border: none;
    background-color: #fff;
    ;
}

#primary-menu>div>ul>li>ul>li>a,
.corporate-units-dropdown ul li a {
    display: block;
    color: #000;
    font-weight: 400;
    font-size: var(--fs-p16);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#primary-menu>div>ul>li>ul>li>a:hover,
.corporate-units-dropdown ul li a:hover {
    background-color: var(--color-primary);
    color: #fff;
}

#primary-menu>div>ul>li>ul>li.current>a,
.corporate-units-dropdown ul li.current a {
    background-color: var(--color-primary);
    color: #fff;
}

/* Nested submenu (third level) */
#primary-menu>div>ul>li>ul>li>ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-primary);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#primary-menu>div>ul>li>ul>li:hover>ul {
    display: block;
}

#primary-menu>div>ul>li>ul>li>ul>li>a,
.corporate-units-dropdown ul li ul li a {
    padding: 10px 20px !important;
}

.searchbutton {
    border: none;
    /*border-radius: 0 8px 8px 0;*/
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 0;
}

.searchbutton span {
    color: var(--text);
}


#top-cart {
    position: relative;
}


#top-cart #cartQty {
    top: 5px;
    right: -10px;
    background-color: var(--color-primary);
    color: #000;
}

@media (max-width: 575.98px) {
    #top-cart #cartQty {
        top: -5px;
    }
}

/* --- Desktop: Search open state --- */

/* Global Search Overlay Styles */
/* Fullscreen overlay */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;
    display: none;
    overflow-y: auto;
}

.global-search-overlay.is-open {
    display: block;
}

/* Inner layout */
.global-search-inner {
    padding-top: 80px;
    padding-bottom: 40px;
}

/* Top bar (X | input | Clear) */
.global-search-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.btn-search-close,
.btn-search-clear {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #000;
}

.btn-search-close {
    font-size: 24px;
    line-height: 1;
}

.global-search-input-wrap {
    flex: 1 1 auto;
}

.global-search-input {
    width: 100%;
    border: 1px solid #CECECE;
    border-radius: 8px;
}

/* Tabs row */
.global-search-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #CECECE;
}

.global-search-tabs .search-tab {
    border: 0;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
    color: #555;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.global-search-tabs .search-tab .tab-count {
    margin-left: 4px;
}

.global-search-tabs .search-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Sections */

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.search-section-header h4 {
    margin: 0;
}

.search-see-all {
    color: var(--color-primary);
}

/* Card list */
.search-section-body {
    display: flex;
    flex-direction: column;
}

/* Individual result card */
.search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #CECECE;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.search-card-main {
    flex: 1 1 auto;
}

.search-card-title:hover {
    color: var(--color-primary);
}

.search-card-meta {
    color: #555;
}

/* Placeholder image area */
.search-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: #f2f2f2;
    margin-left: 16px;
    flex-shrink: 0;
}

/* Tab visibility logic */
.search-section.hidden {
    display: none;
}

/* When overlay open, prevent body scrolling */
body.search-open {
    overflow: hidden;
}

/* Mobile search bar */


.search-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #555;
    font-size: 14px;
}

.search-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #CECECE;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: searchSpinnerRotate 0.8s linear infinite;
}

@keyframes searchSpinnerRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Global Search Overlay Styles End */


/* Smooth transitions for menu and search column */
#primary-menu>div>ul>li>a {
    transition: padding .3s ease;
}

.topinfo>.col-2 {
    transition: flex-basis .3s ease, max-width .3s ease;
}

#primary-menu.col-8 {
    transition: flex-basis .3s ease, max-width .3s ease;
}

/* Keep menu visible but compress link padding */
.top-search-open #primary-menu>div>ul>li>a {
    padding-left: 3px;
    padding-right: 3px;
}

/* Expand the search column */
.top-search-open .topinfo>.col-2 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
}

/* Compress menu column */
.top-search-open #primary-menu.col-8 {
    flex-basis: 50%;
    max-width: 50%;
}

/* Hide the Get A Quote button to make room */


.top-search-open .searchbutton {
    border-radius: 0 8px 8px 0;
}

/* Search icon: hide when open */
.top-search-open .searchbutton svg {
    display: none;
}

/* Close icon: show when open */
.searchbutton .search-close-icon {
    display: none !important;
}

.top-search-open .searchbutton .search-close-icon {
    display: block !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.top-search-open #top-search form {
    width: 100%;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    animation-delay: 2s;
}

.top-search-open #top-search form input {
    width: calc(100% - 30px);
    padding: 12px 16px;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    animation-delay: 2s;
}

/* .highlight-buttons ul {
    width: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    margin: 0;
}

.highlight-buttons>ul li {
    width: calc(50% - 10px);
    text-align: center;
    position: relative;
}

.highlight-buttons>ul li>a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
}

.highlight-buttons>ul li>a:has(i) {
    padding-right: 20px;
}

.highlight-buttons ul li i {
    position: relative;
    font-size: 14px !important;
    top: 1px;
    width: 14px;
    text-align: center;
    margin-left: 5px;
    margin-right: 0;
    -webkit-transition: line-height .4s ease;
    -o-transition: line-height .4s ease;
    transition: line-height .4s ease;
}

.highlight-buttons ul {
    list-style: none;
    height: 50px;
}

.highlight-buttons ul ul {
    display: none;
    position: absolute;
    width: 220px;
    background-color: #FFF;
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEE;
    border-top: 2px solid #ac8c5e;
    height: auto;
    z-index: 199;
    top: auto;
    top: 48px;
    right: 0;
    margin: 0;
    padding: 0;
}

.highlight-buttons ul ul a {
    font-size: 14px;
    font-weight: 500;
    height: auto;
    color: #666;
    padding: 10px 15px;
    border: 0;
    letter-spacing: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.highlight-buttons ul ul li:hover>a {
    color: #734F0D;
    padding-left: 18px;
} */

/*mega menu styling*/
#primary-menu-container .container-fluid {
    position: relative;
}

body.stretched #header.full-header #primary-menu ul li.mega-menu .mega-menu-content {
    width: 100% !important;
    margin: 0;
}

#primary-menu ul li .mega-menu-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    border: none;
    height: auto;
    z-index: 199;
    top: 0px;
    margin: 0;
    left: 0;
    max-height: 550px;
    width: 765px;
    overflow: hidden;
    box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.30);
}

.mega-menu-content>.row {
    margin-left: 0;
    margin-right: 0;
}

.mega-menu-content>.row>.megamenu-listcol {
    background-color: #fff;
    padding: 30px 0 10px;
    /*width: 28%;*/
    overflow-y: auto;
}


.mega-menu-content>.row>.megamenu-listcol .sticky {
    position: sticky;
    top: 0;
    left: 0;
}


#primary-menu ul li>.mega-menu-content .megamenu-listcol ul {
    top: 0;
    width: 100%;
    box-shadow: none;
    padding: 0 30px;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    overflow: hidden;
}

#primary-menu ul li>.mega-menu-content ul>li {
    border-radius: 0;
    max-width: 50%;
    flex: 0 0 48%;
}

#primary-menu ul li>.mega-menu-content ul>li>a {
    color: black;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    font-size: 14px;
}

#primary-menu ul li>.mega-menu-content ul>li>a span {
    display: block;
    transition: all .2s ease-in-out;
}

#primary-menu ul li>.mega-menu-content ul>li>a span img {
    filter: none;
    max-height: 10px;
    width: 100%;
}

#primary-menu ul li .mega-menu-content ul>li.current>a,
#primary-menu ul li .mega-menu-content ul>li:hover>a {
    color: #B68009;
    background-color: transparent;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-thumb {
    background: #B68009;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.mega-menu-content>.row>.megamenu-listcol .row>.col-md-12 {
    padding: 0;
}

/*#primary-menu ul li.specialtiesmegamenu .mega-menu-content{display: block !important; opacity: 0; z-index: 0;}*/


.contentstart {
    position: relative;
    background: var(--bg);
}

.contentstart:has(.modal.show) {
    z-index: auto;
}

#primary-menu>div:has(ul) {
    position: relative;
    /* width: calc(100% + 100px); */
}

/* #primary-menu > div > ul{width: calc(100% - 100px);} */
/*	------------------------ Header END -------------------------- */
/*	------------------------ Footer -------------------------- */



#footer {
    color: var(--text);
    background-color: var(--bg);
}

#copyright {
    color: #fff;
}

#footer h4 {
    color: var(--color-primary);
    text-transform: uppercase;
}


.address p {
    font-size: 16px;
    color: #fff;
}

#footer .footer-widgets-wrap {
    padding: 60px 0;
    color: #686868;
}

#footer .footer-widgets-wrap>.row {
    justify-content: space-between;
    position: relative;
}

.standard-logo img {
    height: 45px;
}

/* Vertical divider between the brand column and the link columns (tablet/desktop).
   Absolutely positioned so it overlays the column gap instead of taking a grid slot
   (an in-flow element in a col-4 + col-8 row overflows 12 cols and wraps to its own line). */
@media (min-width: 768px) {
    #footer .vertical-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 33.333%;
        width: 1px;
        padding: 0;
        background: rgba(217, 217, 217, 0.20);
    }
}

@media (max-width: 767.98px) {
    #footer .vertical-line {
        display: none;
    }
}

/*#footer .socialmedia{margin-top: 18px;}*/


#footer .widget.contact svg {
    margin-right: 10px;
}


#footer .widget_links a {
    color: inherit;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

#footer .widget_links a:hover {
    color: var(--color-primary);
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}


#subscription {
    background-color: #f5f5f5;
    padding-top: 23px;
    padding-bottom: 23px;
}

#subscription .row {
    align-items: center;
}

#subscription h4,
#subscription form {
    margin-bottom: 0;
}

#subscription form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

#subscription form input {
    width: calc(100% - 95px);
    max-width: 325px;
    border-radius: 8px 0 0 8px;
    height: 55px;
    padding-left: 25px;
    border-right: none;
}

#subscription form button {
    height: 55px;
}


#footerCart svg {
    fill: #ac8c5e;
    max-width: 29px;
}

#copyrights {
    border-top: 1px solid rgba(217, 217, 217, 0.20);
    background-color: #110E19;
    color: #fff;
}

#copyrights .col-12 {
    padding: 20px 0;
}

#copyrights a:hover {
    color: var(--color-primary);
}

.vertical-line {
    border-right: 1px solid rgba(217, 217, 217, 0.20);
    margin: 0 30px;
}

.site-footer {
    border-top: 1px solid #e5e5e5;
}

.site-footer .site-footer__main {
    padding: 55px 0 45px;
}

.site-footer .site-footer__main>.row {
    row-gap: 40px;
}

.site-footer .site-footer__logo {
    display: inline-block;
    margin-bottom: 20px;
}

.site-footer .site-footer__logo img {
    display: block;
    width: auto;
    height: 25px;
}

.site-footer .site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    color: #6d6d6d;
}

.site-footer .site-footer__contact-item p {
    margin: 0;
    color: inherit;
}

.site-footer .site-footer__contact-item .site-footer__hours {
    margin-top: 10px;
}

.site-footer .site-footer__contact-link {
    /*width: fit-content;*/
}

.site-footer .site-footer__contact-link:hover,
.site-footer .site-footer__column a:hover {
    color: var(--color-primary);
}

.site-footer .site-footer__contact-icon {
    display: inline-flex;
    flex: 0 0 20px;
    justify-content: center;
    margin-top: 2px;
}

.site-footer .site-footer__contact-icon svg {
    width: 18px;
    height: 18px;
}

.site-footer .site-footer__contact-icon svg path {
    stroke: #777;
}

.site-footer .site-footer__contact-link[href^="mailto:"] svg path {
    fill: #777;
    stroke: none;
}

#footer.site-footer h4 {
    margin: 0 0 20px;
    color: #BEBEBE;
    text-transform: none;
    font-weight: 500;
}

.site-footer .site-footer__column ul {
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.site-footer .site-footer__column li {
    margin-bottom: 15px;
}

.site-footer .site-footer__column li:last-child {
    margin-bottom: 0;
}

.site-footer .site-footer__column a {
    color: #111;
}

.site-footer .site-footer__social {
    margin-top: 40px;
}

.site-footer .site-footer__social h4 {
    margin-bottom: 15px;
}

.site-footer .site-footer__social-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-footer .site-footer__social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #686868;
}

.site-footer .site-footer__social-links svg {
    width: 20px;
    height: 20px;
}

.site-footer .site-footer__social-links svg path {
    fill: #686868;
}

/* .site-footer .site-footer__social-links a:hover,
.site-footer .site-footer__social-links a:hover i {
    color: var(--color-primary);
}

.site-footer .site-footer__social-links a:hover svg path {
    fill: var(--color-primary);
} */

.copyright {
    border-top: 1px solid #DCDCDC;

}

.site-footer .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 55px;
    padding: 10px 0;
}

.site-footer .site-footer__bottom p {
    margin: 0;
}

.site-footer .site-footer__bottom img {
    display: block;
    max-width: min(100%, 310px);
    height: auto;
}

@media (max-width: 991.98px) {
    .site-footer .site-footer__main {
        padding: 45px 0;
    }
}

@media (max-width: 767.98px) {
    .site-footer .site-footer__main {
        padding: 40px 0;
    }

    .site-footer .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 0;
    }
}

@media (max-width: 575.98px) {
    .site-footer .site-footer__column {
        margin-top: 10px;
    }
}

/*	------------------------ Footer END -------------------------- */


/*	------------------------ Home -------------------------- */


#slider {
    position: relative;
    aspect-ratio: 2600 / 1100;
}



#slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.8;
    background: linear-gradient(0deg, rgba(22, 16, 9, 0.00) 73.17%, #161009 96.91%);
    pointer-events: none;
    z-index: 3;
    /* above bg image, below swiper-pagination & caption */
}

/* Mobile: put the dark gradient INSIDE each slide — above the image but below
   the caption (.container-fluid is z-index:2) — so the caption text sits on top
   of the gradient instead of appearing tinted by a slider-level overlay. */
#sliderm .swiper-slide.dark::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.8;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

#sliderm .slider-caption-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
}

#sliderm .slider-caption-container>.btn {
    align-self: flex-start;
}

#slider .swiper-pagination,
#sliderm .swiper-pagination {
    width: unset;
    bottom: 80px !important;
    text-align: center;
    left: unset;
    right: 80px;
}

#slider .swiper-pagination span,
#sliderm .swiper-pagination span {
    border: 2px solid var(--color-primary-dark);
    background-color: transparent;
}

#slider .swiper-pagination span.swiper-pagination-bullet-active,
#sliderm .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

#slider .swiper-slide-bg {
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
}

/* Gradient overlay on all banner slides */
#slider .swiper-slide.dark::before,
#sliderm .swiper-slide.dark::before {
    /* content: '';
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background: linear-gradient(0, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    z-index: 1;
    pointer-events: none; */
}

/* Ensure caption sits above the overlay */
#slider .swiper-slide .container-fluid,
#sliderm .swiper-slide .container-fluid {
    position: relative;
    z-index: 2;
}

.swiper-slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

#slider a:has(> .slider-caption),
#sliderm a:has(> .slider-caption) {
    display: block;
    width: 100%;
    height: 100%;
}

#slider a .slider-caption,
#sliderm a .slider-caption,
.slider-caption-container {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.slider-caption h2 {
    text-align: unset;
}

.slider-caption.slider-caption-full h2:last-child,
.slider-caption.slider-caption-full p:last-child {
    margin-bottom: 0;
}

.slider-caption p {
    font-size: var(--fs-f16);
    margin-bottom: 30px;
    max-width: unset;
}

/* Hero caption entrance — fadeInUp on the active slide, re-triggered per slide by Swiper JS */
#slider .slider-caption-container,
#sliderm .slider-caption-container {
    opacity: 0;
}

.slider-caption-container {
    z-index: 4;
}

#slider .swiper-slide-active .slider-caption-container.slide-animate,
#sliderm .swiper-slide-active .slider-caption-container.slide-animate {
    animation: heroFadeInUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#slider~#content,
#sliderm~#content {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f9f9f9;
}

#sliderm {
    position: relative;
    aspect-ratio: 1550 / 600;
}

#sliderm .swiper-slide-bg {
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
}

#sliderm .slider-caption {
    max-width: 100%;
    padding-top: 60px;
    position: relative;
    left: auto;
    top: auto;
}

#slider .swiper-navs {
    position: absolute;
    bottom: 50%;
    /* transform: translateY(-50%); */
    /* left: calc(50% + 56px + 12px); */
    /* transform: translateX(-50%); */
    z-index: 10;
    display: flex;
    gap: 10px;
    left: 0;
    right: 0;
}


#slider .slider-arrow-left,
#slider .slider-arrow-right {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    font-weight: 400;

}

#slider .slider-arrow-left:hover,
#slider .slider-arrow-right:hover {
    color: #fff;
}

#slider .slider-arrow-left {
    right: unset;
}

#slider .slider-arrow-left svg,
#slider .slider-arrow-right svg {
    width: 12px;
    height: 24px;
}

#slider .slider-arrow-left svg path,
#slider .slider-arrow-right svg path {
    stroke: #fff;
}



#slider .slider-arrow-left i,
#slider .slider-arrow-right i {
    font-size: 30px;
}


#sliderm .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

.owl-nav.disabled {
    display: none;
}

@media(max-width:575.9px) {


    .owl-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }

    .owl-dots .owl-dot,
    .blogs-hero-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #cecece;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .owl-dots .owl-dot:hover {
        background-color: var(--color-secondary);
    }

    .owl-dots .owl-dot.active {
        background-color: var(--color-primary);
    }
}

/* ── PRODUCT THUMBNAIL STRIP (below hero slider) ── */


/* ============================================
   Homepage: Accent Colors
   ============================================ */
.text-yellow {
    color: var(--color-primary);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #slider.slider-element {
        display: block !important;
    }
}

/* ============================================
   Homepage: Section 7 - CTA Elevate
   ============================================ */


/*	------------------------ Home END -------------------------- */
/* ============================================
   Product Page: Top Hero
   ============================================ */
/* product image confined to the right side of the card (content sits on the left) */
/* fade the image's left edge into the dark card */


@media (max-width: 767.98px) {
    /* image sits in the bottom half of the card */
    /* black gradient over the top of the image so the photo shows in the lower half */

}

/* ============================================
   Product Page: Product Listing
   ============================================ */
.product-listing {
    position: relative;
}

.bread_contact_banner.has-image {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

.bread_contact_banner.has-image .bread_image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.bread_contact_banner.has-image .bread_image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%);
}

.bread_contact_banner.has-image .container-fluid {
    position: relative;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 40px;
}

.bread_contact_banner.has-image h1 {
    color: #fff;
    margin-bottom: 15px;
}

.bread_contact_banner.has-image .topcrumb {
    display: flex;
    justify-content: center;
}

.bread_contact_banner.has-image .topcrumb ul {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.bread_contact_banner.has-image .topcrumb a,
.bread_contact_banner.has-image .topcrumb li {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
}

.bread_contact_banner.has-image .topcrumb li.active {
    color: #fff;
    font-weight: 400;
}

.product-listing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.product-listing-count {
    font-family: var(--font-body);
    font-size: var(--fs-p16);
    color: var(--text);
}

.product-listing-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-listing-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Opens the filter offcanvas; only rendered below lg (d-lg-none). Matches the sort
   select's pill so the two read as a pair. */
.product-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 6px 18px;
    font-family: var(--font-body);
    font-size: var(--fs-p14);
    line-height: 1.5;
    color: #868686;
    background-color: var(--bg);
    border: 1px solid #868686;
    border-radius: 100px;
}

.product-listing-sort label {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-p14);
    color: var(--text);
}

.product-listing-sort .form-select {
    width: auto;
    min-width: 145px;
    padding: 6px 32px 6px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-p14);
    cursor: pointer;
    border-radius: 100px;
    border: 1px solid #868686;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868686' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 9px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #868686;
}

.product-listing-sort .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}


/* .product-listing-sort .product-sort-toggle {
    min-width: 220px;
    padding: 5px 20px;
    font-family: var(--font-body);
    text-align: left;
    color: #404040;
    background-color: var(--bg);
    border: 1px solid #D8D8D8;
    border-radius: 100px;
} */

.product-listing-sort .product-sort-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 200px;
    padding: 5px 20px;
    text-align: left;
    color: #868686;
    background-color: var(--bg);
    border: 1px solid #868686;
    border-radius: 100px;
}

.product-sort-toggle i {
    font-size: 12px;
    transition: transform .2s ease;
}

.product-sort-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* .product-listing-sort .product-sort-toggle::after {
    float: right;
    margin-top: 10px;
} */

.product-sort-menu {
    min-width: 200px;
    padding: 0;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.product-sort-menu .dropdown-item {
    padding: 15px 20px;
    font-family: var(--font-body);
    white-space: normal;
    font-weight: 400;
}

.product-sort-menu li:not(:last-child) .dropdown-item {
    border-bottom: 1px solid var(--color-tertiary);
}

.product-sort-menu .dropdown-item:hover,
.product-sort-menu .dropdown-item:focus,
.product-sort-menu .dropdown-item.active {
    color: var(--text);
    background-color: var(--color-tertiary-light);
}

.product-listing-item {
    display: flex;
}

.product-listing-item .hp-new-arrivals__card {
    width: 100%;
    height: 100%;
}

.product-listing-item .hp-new-arrivals__img {
    position: relative;
}

/* -- Wallets page: TikTok video carousel (page_product_view.php) --
   The video in the middle is full size and plays; the ones either side wait
   smaller and dimmed until they are brought to the middle. */
.pl-videos__wrap {
    position: relative;
}

.pl-videos__swiper {
    padding: 10px 0 20px;
}

/* qualified so it outranks swiper.css, which the page loads after this file */
.pl-videos__swiper .pl-videos__item {
    position: relative;
    width: clamp(220px, 62vw, 300px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #000;
    opacity: .5;
    transform: scale(.86);
    transition: transform .4s ease, opacity .4s ease, box-shadow .4s ease;
}

.pl-videos__item.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.pl-videos__item iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Lies over the side videos so a tap or a swipe on one moves the carousel
   instead of starting that player; the video in the middle stays playable. */
.pl-videos__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.pl-videos__item.swiper-slide-active .pl-videos__cover {
    display: none;
}

.pl-videos__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 1px solid var(--color-tertiary-mid);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    transition: background .2s ease;
}

.pl-videos__nav:hover {
    background: var(--color-primary);
}

.pl-videos__nav--prev {
    left: max(12px, calc(50% - 210px));
}

.pl-videos__nav--next {
    right: max(12px, calc(50% - 210px));
}

.pl-videos__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.pl-videos__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.pl-videos__dots .swiper-pagination-bullet {
    margin: 0;
    transition: width .3s ease;
}

.pl-videos__dots .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: var(--color-primary);
}

.product-listing-dots {
    display: flex;
    gap: 6px;
    min-height: 10px;
}

.product-listing-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Badge on the product image - "New" (gold) or a sale/custom tag (red) */
.product-badge {
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 5;
    padding: 5px 15px;
    font-family: var(--font-body);
    font-size: var(--fs-p14);
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.product-badge--new {
    background: var(--color-primary);
    color: #000;
}

.product-badge--sale {
    background: #D9291C;
    color: #fff;
}

/* ── Filter sidebar ── */
.product-listing-layout {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.product-filters {
    width: 280px;
    flex-shrink: 0;
    scrollbar-gutter: stable;
}

@media (min-width: 992px) {
    :root {
        --header-h: 80px;
    }

    .product-filters {
        position: sticky;
        top: calc(var(--header-h) + 20px);
        max-height: calc(100vh - var(--header-h) - 40px);
        overflow-y: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    }

    .product-filters::-webkit-scrollbar {
        display: none;
    }
}

.product-listing-main {
    flex: 1;
    min-width: 0;
}

.product-filter-group {
    border-bottom: 1px solid var(--color-tertiary);
    padding: 20px 1px;
}

.product-filter-group.is-collapsed{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.product-filter-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    line-height: normal;
}

.product-filter-group-toggle .toggle-open {
    display: block;
}

.product-filter-group-toggle .toggle-closed {
    display: none;
}

.product-filter-group.is-collapsed .product-filter-group-toggle .toggle-open {
    display: none;
}

.product-filter-group.is-collapsed .product-filter-group-toggle .toggle-closed {
    display: block;
}

.product-filter-group-body {
    margin-top: 20px;
    max-height: 600px;
    opacity: 1;
    overflow: visible;
    transition: max-height 280ms ease, opacity 200ms ease, margin 280ms ease;
}

.product-filter-group.is-collapsed .product-filter-group-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.product-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-filter-list li {
    margin-bottom: 16px;
}

.product-filter-list li:last-child {
    margin-bottom: 0;
}

.product-filter-list--choice label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    line-height: 1;
}

/* Round, checkbox-styled-as-radio look to match the design - functionally still
   multi-select checkboxes (values within a group OR together, see getProducts2()). */
.product-filter-list--choice input[type="checkbox"],
.product-filter-list--choice input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid #BEBEBE;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .15s ease;
}

.product-filter-list--choice input[type="checkbox"]:checked,
.product-filter-list--choice input[type="radio"]:checked {
    border-color: var(--color-secondary);
    border-width: 5px;
}

.product-filter-list--choice input:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Wallet Size's per-type nested sub-lists — shown directly (no toggle, no
   divider), each labeled by a short rounded gold bar instead of a border. */
.product-filter-nested-group {
    padding: 14px 0;
}

.product-filter-nested-group:first-child {
    padding-top: 0;
}

.product-filter-nested-label {
    position: relative;
    display: block;
    padding-left: 15px;
    font-weight: 500;
    line-height: 1;
}

.product-filter-nested-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    bottom: -2px;
    width: 5px;
    border-radius: 10px;
    background: var(--color-primary, #FAC217);
}

.product-filter-nested-list {
    margin-top: 14px;
}

/* Color swatches */
.product-filter-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-filter-swatch {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--swatch-color);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--color-tertiary-mid);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.product-filter-swatch.is-checked,
.product-filter-swatch:has(input:checked) {
    box-shadow: 0 0 0 2px var(--color-secondary);
}

.product-filter-swatch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.product-listing-empty {
    width: 100%;
    padding: 64px 24px;
    border: 1px solid var(--color-tertiary);
    border-radius: var(--radius-md);
    background: var(--color-tertiary-light);
    text-align: center;
}

.product-listing-empty h3 {
    margin-bottom: 10px;
}

.product-listing-empty p {
    margin-bottom: 22px;
    color: rgba(26, 26, 26, 0.65);
}

.price-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 15px;
}

.price-input-box {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid #E8E8E8;
    border-radius: 100px;
    background: var(--bg);
    justify-content: space-between;
}

.price-input-prefix {
    color: #000;
    white-space: nowrap;
}

.price-input-field {
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    -moz-appearance: textfield;
    color: #868686;
}

.price-input-field:focus {
    outline: none;
}

.price-input-field::-webkit-outer-spin-button,
.price-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-values-to {
    white-space: nowrap;
}

.price-slider {
    position: relative;
    height: 20px;
}

.price-slider .slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-tertiary-mid);
    transform: translateY(-50%);
    border-radius: 2px;
}

.price-slider .slider-range {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #000;
    transform: translateY(-50%);
    border-radius: 2px;
}

.price-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    margin: 0;
    pointer-events: none;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px #000;
}

.price-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px #000;
}

.price-slider input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
}

.product-filter-submit {
    width: 100%;
    margin-top: 25px;
}

.reward-intro__desc {
    margin: 0 auto 40px;
}

.reward-intro__voucher {
    margin: 0 auto;
}

.reward-intro__voucher img {
    display: block;
    width: 100%;
    height: auto;
}


@media (max-width: 991.98px) {

    .product-listing-layout {
        flex-direction: column;
    }

    /* The sidebar is a fixed-position offcanvas here, so it no longer takes part in the layout
       and only needs a drawer width. Bootstrap's 400px default overflows a phone. */
    .product-filters.offcanvas-lg {
        --bs-offcanvas-width: min(340px, 88vw);
        z-index: 9999;
    }

    /* Product count takes its own line so Filter and Sort fit on one row without squeezing */
    .product-listing-header {
        flex-wrap: wrap;
        gap: 15px;
    }

    .product-listing-count {
        flex: 1 0 100%;
    }

    .product-listing-header-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .bread_contact_banner.has-image {
        min-height: 0;
    }

    .bread_contact_banner.has-image .container-fluid {
        padding-top: 40px;
    }
}

@media (max-width: 575.98px) {
    .product-listing-sort {
        justify-content: flex-end;
    }
}



/*  ------------------------ Engraving Service Page ------------------- */
/* The hero reuses .bread_contact_banner.has-image and the closing "Join Our Membership"
   band comes from the shared newsletter_bottom partial, so only the two middle sections
   are styled here. */
.es-intro {
    padding: 100px 0 80px;
}

.es-intro__title {
    margin-bottom: 25px;
    font-weight: 600;
}

.es-intro__title em {
    font-style: italic;
}

.es-intro__lead {
    margin-bottom: 40px;
    font-weight: 300;
}

.es-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.es-feature:last-child {
    margin-bottom: 0;
}

.es-feature__icon {
    flex: 0 0 auto;
    line-height: 0;
}

.es-feature__icon img,
.es-feature__icon svg {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.es-feature__body {
    display: block;
}

.es-feature__title {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.es-feature__desc {
    display: block;
    font-weight: 300;
}

/* Two overlapping photos: the smaller one sits over the top-left of the main shot */
.es-collage {
    position: relative;
    padding: 0 0 0 125px;
}

.es-collage__main img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.es-collage__inset {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* Without an explicit width this absolutely positioned box shrink-to-fits, so its size
       silently came from the asset's intrinsic width (313px) - and at phone width that meant
       a 313px inset sitting on top of a 281px main photo. */
    width: min(313px, 45%);
}

.es-collage__inset img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

/* Category tiles */
.es-categories {
    padding-bottom: 80px;
}

.es-cat-card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.es-cat-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .4s ease;
}

.es-cat-card:hover img {
    transform: scale(1.04);
}



.es-categories__note {
    max-width: 1100px;
    margin: 80px auto 0;
    text-align: center;
}

@media (max-width: 575.98px) {
    .es-collage__inset {
        transform: translateY(0);
    }
}


/* ------------------------ OEM Service Page ------------------------ */
.oem-make {
    padding: 80px 0 100px;
}

.oem-section-heading {
    max-width: 1180px;
    margin: 0 auto 45px;
}

.oem-section-heading h2,
.oem-clients h2 {
    margin-bottom: 20px;
}

.oem-section-heading p {
    margin: 0;
}

.oem-make__row {
    --bs-gutter-x: 50px;
    --bs-gutter-y: 30px;
}

.oem-make-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oem-make-card--image-first .oem-make-card__media {
    order: -1;
}

.oem-make-card__copy,
.oem-make-card__media {
    flex: 1 1 0;
    min-height: 315px;
}

.oem-make-card__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 35px;
    background: var(--color-tertiary-mid);
    border: 1px solid var(--color-tertiary);
}

.oem-make-card__copy h3 {
    margin-bottom: 20px;
    font-weight: 500;
}

.oem-make-card__copy p {
    margin: 0;
}

.oem-make-card__number {
    font-size: var(--fs-f35);
    font-weight: 300;
    line-height: 1;
    text-align: right;

}

.oem-make-card--image-first .oem-make-card__number {
    order: 2;
}

.oem-make-card__media {
    overflow: hidden;
    background: var(--color-tertiary);
}

.oem-make-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 315px;
    object-fit: cover;
}

.oem-make-card__media.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #777;
    text-align: center;
    border: 1px dashed #bbb;
}

.oem-clients {
    padding: 80px 0;
    background: var(--color-tertiary-light);
}

.oem-clients__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 45px;
    max-width: 1250px;
    margin: 35px auto 0;
}

.oem-client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
}

.oem-client-logo img {
    display: block;
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.oem-showcase__content>h1:first-child,
.oem-showcase__content>h2:first-child {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: var(--lh-title);
    text-align: center;
    margin-bottom: 40px;
}

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

.oem-showcase__content>.nav[role="tablist"],
.oem-showcase__content>.oem-tabs {
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 35px;
    border: 0;
}

/* All the tabs live in a single .nav-item (that is how the CKEditor content is authored).
   It used to be flex-wrap: nowrap, so as soon as the labels were wider than the container
   the extra tabs were pushed outside it and clipped away - unreachable, not even scrollable.
   Wrapping keeps every tab on screen whatever the author adds. */
.oem-showcase__content>.nav[role="tablist"]>.nav-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}

.oem-showcase__content>.nav[role="tablist"] .nav-link,
.oem-showcase__content>.oem-tabs .oem-tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 10px 12px;
    color: #BEBEBE !important;
    background: transparent;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.oem-showcase__content>.nav[role="tablist"] .nav-link:hover,
.oem-showcase__content>.nav[role="tablist"] .nav-link:focus {
    color: var(--text) !important;
}

.oem-showcase__content>.nav[role="tablist"] .nav-link.active,
.oem-showcase__content>.oem-tabs .oem-tab.active {
    color: var(--text) !important;
    border-bottom-color: var(--color-primary) !important;
}

.oem-showcase__content .row:has(img) {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.oem-showcase__content .row:has(img) img {
    width: 100%;
    display: block;
}

.oem-showcase__content p:has(.btn) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
}

.oem-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.oem-cta__button {
    padding: 10px 30px;
    font-size: var(--fs-f20);
    font-weight: 500;
}

.oem-cta__whatsapp {
    color: #fff;
    background: #25d366;
    border-color: #25d366;
}

.oem-cta__whatsapp:hover,
.oem-cta__whatsapp:active,
.oem-cta__whatsapp:focus {
    color: #fff;
    background: #1fb657;
    border-color: #1fb657;
}

.oem-cta__icon {
    display: inline-flex;
    line-height: 0;
}

.oem-cta__icon svg {
    width: 25px;
    height: 25px;
}

.oem-cta__icon svg path {
    /* fill: #fff; */
}

.oem-showcase__empty {
    padding: 70px 30px;
    background: var(--color-tertiary-light);
    border: 1px dashed #bbb;
}

@media (max-width: 1199.98px) {
    .oem-make__row {
        --bs-gutter-x: 25px;
    }

    .oem-make-card__copy {
        padding-inline: 25px;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 575.98px) {
    .oem-cta {
        flex-direction: column;
    }

    .oem-cta__button {
        width: 100%;
        max-width: 280px;
    }

    .oem-showcase__content>.nav[role="tablist"]>.nav-item {
        gap: 8px;
    }

    .oem-showcase__content>.nav[role="tablist"] .nav-link {
        padding-inline: 6px;
        white-space: normal;
    }

    .oem-make-card__copy,
    .oem-make-card__media,
    .oem-make-card__media img {
        min-height: 260px;
    }

    .oem-clients__grid {
        gap: 25px;
    }

    .oem-client-logo {
        flex-basis: calc(50% - 15px);
    }

    .oem-make-card--image-first {
        flex-direction: column-reverse;
    }

    .oem-make-card--image-first .oem-make-card__copy {
        flex-direction: column-reverse;
        justify-content: space-between;
    }

}

/* ------------------------ Repair Service Page ------------------------ */

.repair-section-heading {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.repair-section-heading h1 {
    margin-bottom: 20px;
}

.repair-section-heading p {
    margin: 0;
}

.repair-benefits-row {
    --bs-gutter-x: 50px;
    --bs-gutter-y: 30px;
}

.repair-benefit {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 600px;
    overflow: hidden;
    background: var(--color-tertiary-mid);
}

.repair-benefit__copy,
.repair-benefit__image {
    flex: 1 1 0;
    min-height: 300px;
}

.repair-benefit__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 70px 60px 40px;
    text-align: center;
}

.repair-benefit__copy h3 {
    font-weight: 500;
}

.repair-benefit__copy p {
    margin: 0;
    font-weight: 300;
}

.repair-benefit__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.repair-benefit--image-first .repair-benefit__copy {
    order: 2;
    background: var(--color-primary-light);
}

.repair-benefit--image-first .repair-benefit__image {}

.repair-benefit--quality {
    position: relative;
    justify-content: center;
    color: #fff;
    background-color: #451C03;
}

.repair-benefit--quality .repair-benefit__copy {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    flex-basis: 100%;
    padding-top: 70px;
}

.repair-benefit__quality-image {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.repair-benefit__quality-image--top {
    right: 0;
    top: 0;
}

.repair-benefit__quality-image--bottom {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.repair-process {
    padding: 0 0 80px;
}

.repair-process>.container-fluid>h2 {
    margin-bottom: 38px;
}

.repair-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    overflow: hidden;
    color: #fff;
    background-color: #4a4a42;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}

.repair-step::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, .4);
    content: "";
    backdrop-filter: blur(5px);
}

.repair-step__number {
    position: absolute;
    bottom: -50px;
    left: 40px;
    z-index: 1;
    color: rgba(255, 255, 255, .25);
    font-size: clamp(92px, 10vw, 150px);
    font-weight: 400;
    line-height: 1;
}

.repair-step__copy {
    position: relative;
    z-index: 2;
    width: 35%;
    margin-left: 50%;
    margin-right: 60px;
}

.repair-step__copy h3 {
    margin-bottom: 12px;
    font-weight: 400;
}

.repair-step__copy p {
    margin: 0;
    font-size: var(--fs-p14);
}

.repair-request {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background-color: var(--color-tertiary-mid);
    background-image: url(../images/layout/membership-banner-bg-logo.png);
    background-position: center 15%;
    background-repeat: no-repeat;
    background-size: 85%;
}

.repair-request .container {
    position: relative;
    z-index: 1;
}

.repair-request h2 {
    margin-bottom: 45px;
}

.repair-request-form {
    max-width: 980px;
    margin-inline: auto;
    margin-bottom: 0;
}

.repair-request-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
}


.repair-request-form label span,
.repair-request-form legend+* label span {
    color: #F00;
}

.repair-request-form .form-control {
    min-height: 40px;
    padding: 10px 15px;
    color: var(--text);
    background: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
}

.repair-request-form .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(250, 194, 23, .2);
}

.repair-request-form textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.repair-form-group {
    padding: 0;
    margin: 40px 0 0;
    border: 0;
}

.repair-form-group legend {
    position: relative;
    width: 100%;
    font-weight: 500;
    padding-left: 20px;
    line-height: 1;
}


.repair-form-group legend:before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    bottom: -2px;
    width: 5px;
    border-radius: 10px;
    background: var(--color-primary, #FAC217);
}

.repair-service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 42px;
}

.repair-service-option {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.repair-service-option input {
    width: 15px;
    height: 15px;
    margin: 0;
    appearance: none;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 50%;
}

.repair-service-option input:checked {
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.repair-service-option>span {
    color: var(--text) !important;
}

.repair-form-remarks {
    margin-top: 28px;
}

.repair-request-submit {
    width: 100%;
    margin-top: 32px;
}

.repair-request__notice {
    display: none;
    padding: 14px 18px;
    margin: -20px 0 28px;
    border-radius: var(--radius-sm);
}

.repair-request__notice.is-success,
.repair-request__notice.is-error {
    display: block;
}

.repair-request__notice.is-success {
    color: var(--color-secondary-dark);
    background: var(--color-secondary-light);
}

.repair-request__notice.is-error {
    color: #822;
    background: #f8dddd;
}

.repair-location {
    padding: 80px 0;
}

.repair-location__map,
.repair-location__content {
    min-height: 430px;
}

.repair-location__map {
    height: 100%;
    overflow: hidden;
    background: var(--color-tertiary);
}

.repair-location__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    border: 0;
}

.repair-location__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: clamp(40px, 5vw, 75px);
    overflow: hidden;
    background: var(--color-primary-lightest);
}

.repair-location__content> :not(.repair-location__mark) {
    position: relative;
    z-index: 1;
}

.repair-location__content h2 {
    margin-bottom: 28px;
    color: var(--color-secondary);
}

.repair-location__content p {
    margin-bottom: 20px;
}

.repair-location__content a {
    color: inherit;
    text-decoration: none;
}

.repair-location__mark {
    position: absolute;
    bottom: -30%;
    right: -65%;
    z-index: 1;
    max-width: 150%;
}

@media (max-width: 1199.98px) {
    .repair-benefits-row {
        --bs-gutter-x: 20px;
    }

    .repair-benefit__copy {
        padding-inline: 20px;
    }
}

@media (max-width: 991.98px) {

    .repair-intro,
    .repair-request,
    .repair-location {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .repair-benefit {
        min-height: 520px;
    }

    .repair-benefit__copy,
    .repair-benefit__image {
        min-height: 260px;
    }

    .repair-benefit--quality .repair-benefit__copy {
        min-height: 0;
    }

    .repair-step__copy {
        width: 70%;
        margin-left: 16%;
    }
}

@media (max-width: 767.98px) {
    .repair-benefit {
        min-height: 600px;
    }

    .repair-benefit__copy,
    .repair-benefit__image {
        min-height: 300px;
    }

    .repair-benefit--quality .repair-benefit__copy {
        min-height: 0;
    }

    .repair-process {
        padding-bottom: 60px;
    }

    .repair-location__map,
    .repair-location__map iframe {
        min-height: 330px;
    }

    .repair-location__content {
        min-height: 360px;
    }

    .repair-step__number {
        bottom: -30px;
    }
}

@media (max-width: 575.98px) {

    .repair-intro,
    .repair-request,
    .repair-location {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .repair-section-heading {
        margin-bottom: 30px;
    }

    .repair-benefit {
        min-height: 520px;
    }

    .repair-benefit__copy,
    .repair-benefit__image {
        min-height: 260px;
    }

    .repair-benefit--copy-first .repair-benefit__copy,
    .repair-benefit--copy-first .repair-benefit__image,
    .repair-benefit--image-first .repair-benefit__copy,
    .repair-benefit--image-first .repair-benefit__image {
        flex-grow: 1;
        min-height: 260px;
    }

    .repair-benefit--quality .repair-benefit__copy {
        min-height: 0;
    }

    .repair-process {
        padding: 10px 0 40px;
    }

    .repair-process>.container-fluid>h2,
    .repair-request h2 {
        margin-bottom: 30px;
    }

    .repair-step {
        min-height: 230px;
    }

    .repair-step__copy {
        width: 68%;
        margin-left: 20%;
    }

    .repair-service-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .repair-request {
        background-size: 100% auto;
    }

    .repair-location__map,
    .repair-location__map iframe {
        min-height: 280px;
    }

    .repair-location__content {
        min-height: 330px;
        padding: 20px;
    }
}

/* The tiles reuse home's .hp-trending__overlay, which is sized for a 2-up banner. Tile width
   is not monotonic with the viewport - it is ~151px on a phone (2-up) and ~216px just past the
   lg switch to 4-up, but ~339px at 768px in between - so these are the two ranges where the
   banner's 30/40px padding and display-size title crowd the card out. Scoped to .es-cat-card
   so the home banners keep their original sizing. */
@media (max-width: 575.98px),
(min-width: 992px) and (max-width: 1199.98px) {
    .es-cat-card .hp-trending__overlay {
        padding: 16px;
    }

    .es-cat-card .hp-trending__title {
        font-size: var(--fs-f35);
    }

    .es-cat-card .hp-trending__tag {
        margin-bottom: 8px;
        font-size: var(--fs-t12);
    }
}

@media (max-width: 991.98px) {
    .es-intro {
        padding: 60px 0 50px;
    }

    .es-collage {
        padding: 40px 0 0 40px;
    }

    .es-categories {
        padding-bottom: 50px;
    }

    .es-categories__note {
        margin-top: 40px;
    }
}

@media (max-width: 575.98px) {
    .es-categories__note {
        margin-top: 30px;
    }
}

/*  ------------------------ Gallery Page ------------------- */
.gallery-content {
    position: relative;
    overflow: hidden;
}

.gallery-content .container-fluid {
    position: relative;
    z-index: 2;
}

.gallery-glow-top {
    --gw: 720px;
    --gh: 480px;
    --gr: 720px;
    --gt: -180px;
    --gl: 24%;
    --go: 0.18;
}

.gallery-glow-left {
    --gw: 560px;
    --gh: 880px;
    --gr: 880px;
    --gt: 34%;
    --gl: -28%;
    --go: 0.16;
}

.gallery-glow-bottom {
    --gw: 620px;
    --gh: 520px;
    --gr: 620px;
    --gb: -180px;
    --grt: -18%;
    --go: 0.14;
}

.gallery-heading {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.gallery-heading h1 {
    margin-bottom: 20px;
}

.gallery-heading p,
.gallery-intro-text {
    margin: 0 auto;
    max-width: 1100px;
}

.gallery-showcase {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: clamp(290px, 32vw, 400px);
    margin-left: calc(50% - 50vw);
    display: grid;
    place-items: center;
    overflow: hidden;
    perspective: clamp(1200px, 95vw, 1900px);
    mask-image: none;
    -webkit-mask-image: none;
    margin-bottom: 30px;
}

.gallery-showcase::before,
.gallery-showcase::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: clamp(70px, 10vw, 200px);
    pointer-events: none;
}

.gallery-showcase::before {
    left: 0;
    background: linear-gradient(90deg, #110E19 0%, rgba(17, 14, 25, 0) 100%);
}

.gallery-showcase::after {
    right: 0;
    background: linear-gradient(270deg, #110E19 0%, rgba(17, 14, 25, 0) 100%);
}

.gallery-showcase-track {
    --gallery-card-width: clamp(240px, 26vw, 450px);
    --gallery-radius: 50vw;
    position: relative;
    width: var(--gallery-card-width);
    aspect-ratio: 0.82;
    display: grid;
    transform-style: preserve-3d;
    animation: gallery-showcase-spin 36s linear infinite;
}

.gallery-showcase-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 16px;
    backface-visibility: hidden;
    aspect-ratio: 1 / 1;
    transform:
        rotateY(calc(var(--gallery-index) * 360deg / var(--gallery-count))) translateZ(var(--gallery-radius)) rotateY(180deg);
}

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

@keyframes gallery-showcase-spin {
    to {
        transform: rotateY(-360deg);
    }
}

.gallery-projects {
    position: relative;
}

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 60px;
}

.gallery-filter-button {
    flex: 1 1 auto;
    text-align: center;
}

/* Mobile category dropdown — same look as the product/blog sort select */
.gallery-filter-select {
    display: none;
    margin-bottom: 40px;
}

.gallery-filter-select .form-select {
    width: 100%;
    padding: 10px 35px 10px 14px;
    font-size: var(--fs-f16);
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #06C;
    background-color: #1E1A2B;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gallery-filter-select .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.gallery-filter-select .form-select option {
    color: #fff;
    background: #111a31;
}

@media (max-width: 767.98px) {
    .gallery-filter {
        display: none;
    }

    .gallery-filter-select {
        display: block;
    }
}

/* .gallery-filter-button {
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    border-radius: 7px;
    background: rgba(13, 13, 31, 0.72);
    color: var(--color-primary);
    font-size: var(--fs-f16);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.gallery-filter-button:hover,
.gallery-filter-button.active {
    background: var(--color-primary);
    color: #080808;
    box-shadow: 0 6px 20px rgba(231, 181, 0, 0.14);
} */

.gallery-project-grid {
    row-gap: 30px;
}

.gallery-project-item {
    min-width: 0;
}

.gallery-project-image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    aspect-ratio: 8 / 9;
    border-radius: 16px;
}


.gallery-project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
}

.gallery-project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 300ms ease;
}

.gallery-project-item:hover .gallery-project-image img {
    transform: scale(1.035);
}

.gallery-project-title {
    overflow: hidden;
    display: -webkit-box;
    margin: 20px 0 0;
    color: #fff;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Album index: cover, name, photo count, View */
.gallery-album-count {
    margin-bottom: 20px;
    color: #868686;
}

.gallery-album-item .gallery-project-title {
    margin-top: 15px;
}

.gallery-album-meta {
    margin: 5px 0 0;
    color: #868686;
}

.gallery-album-view {
    margin-top: 15px;
}

.gallery-album-back {
    margin-top: 50px;
}


@media (max-width: 1199.98px) {
    .gallery-filter {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .gallery-filter-button {
        padding-inline: 10px;
        font-size: var(--fs-t14);
    }

    .gallery-project-grid {
        row-gap: 50px;
    }
}

@media (max-width: 991.98px) {

    .gallery-showcase {
        width: 100%;
        height: 390px;
        margin-left: 0;
    }

    .gallery-showcase-track {
        --gallery-card-width: clamp(240px, 38vw, 340px);
        --gallery-radius: calc(var(--gallery-card-width) * 1.5);
        aspect-ratio: 0.66;
        /* taller cards → bigger image; radius still scales with width so cards don't overlap */
    }

    .gallery-showcase-item {
        aspect-ratio: auto;
    }

    .gallery-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-filter-button:last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 575.98px) {

    .gallery-heading h1 {
        margin-bottom: 15px;
    }

    .gallery-showcase {
        width: calc(100% + 60px);
        height: 380px;
        margin-left: -30px;
        /* perspective: 1100px; */
        margin-right: -30px
    }

    .gallery-showcase-track {
        --gallery-card-width: clamp(200px, 58vw, 280px);
        --gallery-radius: calc(var(--gallery-card-width) * 1.45);
        aspect-ratio: 0.6;
        /* more portrait → the centered image is much taller */
    }

    .gallery-showcase-item {
        border-radius: 12px;
        aspect-ratio: auto;
    }

    .gallery-intro-text {
        margin-top: 35px;
    }

    .gallery-projects {
        padding-top: 0px;
    }

    .gallery-filter {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }

    .gallery-filter-button:last-child {
        grid-column: auto;
    }

    .gallery-project-grid {
        row-gap: 30px;
    }

    .gallery-project-image {
        aspect-ratio: 4 / 3;
    }

    .gallery-project-title {
        min-height: 0;
        margin-top: 15px;
    }


    .gallery-showcase::before,
    .gallery-showcase::after {
        top: 30px;
        bottom: 30px;
    }
}

/*  ------------------------ End Gallery Page --------------- */


/*  ------------------------ Service Listing Page ------------------- */

.service-content {
    position: relative;
    overflow: hidden;
}


/*  ------------------------ End Service Listing Page --------------- */

/*  ------------------------ Service Details Page --------------------*/


.service-detail-content {
    position: relative;
    overflow: hidden;
}

.service-detail-content .hp-wave {
    z-index: -1;
}

.service-detail-content .hp-wave img {
    width: 620px;
    max-width: 70vw;
}

.service-detail-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.service-detail-head .service-title {
    margin-bottom: 15px;
}



/* Carousel */
.service-carousel-section .service-slide img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 16px;
}

.service-carousel-section .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 10px;
    left: 0;
    right: 0;
}

.service-carousel-section .owl-nav button {
    pointer-events: auto;
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.08));
    transition: all 0.3s ease;
    border: none;
}

.service-carousel-section .owl-nav button:hover {
    background: var(--color-primary);
}

/* Carousel dots: hidden on desktop, shown only below 768px */
.service-carousel-section .owl-dots {
    text-align: center;
}

#service-carousel {
    padding: 0 90px;
}


/* CKEditor content body */

.service-detail-body img {
    max-width: 100%;
    height: auto;
}

.service-detail-body h2,
.service-detail-body h3 {
    margin-bottom: 20px;
}

.service-detail-body ul li,
.service-detail-body ol li {
    font-size: var(--fs-p14);
}


/* FAQ accordion from CKEditor (.toggle markup) — styled like the FAQ page.
 The editor outputs bare .toggle items with no .faq-list wrapper, so we
 re-apply the same look here (white titles, circular +/- on the right). */
.service-detail-body .toggle {
    margin: 0 auto;
    max-width: 900px;
    border-bottom: 1px solid rgba(206, 206, 206, 0.40);
}

.service-detail-body .toggle .togglet,
.service-detail-body .toggle .toggleta {
    position: relative;
    background-color: transparent;
    padding: 20px 50px 20px 30px;
    color: #fff;
    font-size: var(--fs-f16);
    font-weight: 400;
    cursor: pointer;
}

/* open state — question goes yellow */
.service-detail-body .toggle .toggleta {
    color: var(--color-primary);
    font-weight: 600;
}

.service-detail-body .toggle .togglec {
    padding: 0 50px 20px 30px;
    font-size: var(--fs-p14);
    text-align: left;
}

.service-detail-body .toggle .togglec p:last-child {
    margin-bottom: 0;
}

/* plus / minus circle on the right */
.service-detail-body .toggle .togglet i {
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
}


.service-detail-body .toggle .togglet i.toggle-open {
    display: none;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #110E19;
}

.service-detail-body .toggle .toggleta i.toggle-closed {
    display: none;
}

.service-detail-body .toggle .toggleta i.toggle-open {
    display: flex;
}

@media (max-width: 767px) {

    .service-detail-body .toggle .togglet,
    .service-detail-body .toggle .toggleta {
        padding: 15px 40px 15px 0;
    }

    .service-detail-body .toggle .togglec {
        padding: 0 40px 15px 0;
    }

}


@media (max-width: 991.98px) {
    .service-carousel-section .service-slide img {
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    #service-carousel {
        padding: 0;
    }

    .service-carousel-section .service-slide img {
        height: 220px;
    }


    .service-carousel-section .owl-nav {
        display: none;
    }
}

body.service-detail-body {
    background: #110E19;
    color: #fff;
}

.service-section {
    padding: 60px 0;
}

.service-section:last-child {
    margin-bottom: 0;
}


.service-section .btgrid .row {
    margin-top: 10px;
}


/* subtitle reused from the product styles, lightened for the dark page */
.service-detail-body .pd-section-subtitle {
    color: #fff;
}

/* ── Feature card — icon box + title + description ────────────── */
.svc-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 5px 0;
}

/* the icon box — its own styling (blue rounded square, yellow mark) */
.svc-feature__icon {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 102, 204, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.svc-feature__icon i {
    color: var(--color-primary, #FFD000);
    font-size: 26px;
    line-height: 1;
}

.svc-feature__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.svc-feature__body {
    flex: 1;
    min-width: 0;
}

.svc-feature__title {
    margin: 0;
    color: #fff;
}

.svc-feature__desc {
    margin: 0;
}

/* the auto number ("1.", "2." …) — bold and white like the title */
/* the bold first line reads as the step title */



@media (max-width: 575.98px) {
    .service-section {
        padding: 0 0 60px;
    }
}

/*	------------------------ Service Details Page End -------------------------- */



/*	------------------------ About Us -------------------------- */


/* Breadcrumb */
#bread_contact_banner {
    background-color: transparent;
    padding: 15px 0;
    top: auto;
    text-align: center;
    position: relative;
    border: none;
    /* margin-top: 100px; */
}

.topcrumb {
    padding: 0;
}

.topcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topcrumb ul li {
    display: inline-block;
    /*color: var(--text);*/
}

/* Product detail breadcrumb: uppercase per the design. Scoped to this modifier so the
   ~50 other views sharing #bread_contact_banner / .topcrumb keep their current casing. */
.topcrumb ul li,
.topcrumb ul li a {
    text-transform: uppercase;
    /* letter-spacing: 0.16px; */
    font-weight: 300;
}

.topcrumb ul li.active,
.topcrumb ul li.active a {
    font-weight: 400;
}

/* .topcrumb ul li a {
    color: #555;
} */


/* ============================================
   Page: About Us
   ============================================ */
/* shared centered section heading */
/* ── Hero Banner ── */
/* ── Stats Bar ── */
/* ── Vision / Mission / Core Values ── */
/* Card — glass fill (markup adds .glass), gradient border via ::before */
/* gradient border — same gradient as the icon */
/* gradient border replaces the glass white rim */
/* gradient icon — SVG used as a mask so the original color doesn't matter */
/* ── Achievements ── */
/* ── Meet Our Team ── */
/* ── Trusted By Our Clients ── */
/* carousel arrows */
/* ── CTA Banner ── */


/* responsive */
/*	------------------------ About Us END -------------------------- */

/* ------------------------ Extreme Leather Our Story ------------------------ */
.about-story-background {
    position: relative;
    overflow: hidden;
}

.about-story-heading {
    position: relative;
}

.about-story-heading::before {
    position: absolute;
    background: url(../images/layout/membership-banner-bg-logo.png) center 25% no-repeat;
    content: "";
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1;
}

.about-story-heading h2,
.about-story-mission h2,
.about-story-craft>.container-fluid>h2,
.about-story-testimonials h2 {
    margin-bottom: 30px;
}

.about-story-background__content p {
    max-width: 1180px;
    margin: 0 auto;
}

.about-story-background__content p+p {
    margin-top: 0;
}

.about-story-background__image {
    height: clamp(200px, 18vw, 240px);
    overflow: hidden;
}

.about-story-background__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-story-mission {}

.about-story-mission p {
    margin: 0;
}

.about-story-craft {
    padding: 35px 0 80px;
}

.about-story-craft__row {
    --bs-gutter-x: 15px;
    --bs-gutter-y: 20px;
}

.about-story-craft-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-story-craft-card>img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.about-story-craft-card__copy {
    flex: 1 1 auto;
    padding: 30px 15px 0;
}

.about-story-craft-card__copy h3 {
    margin-bottom: 10px;
    font-weight: 500;
}

.about-story-craft-card__copy p {
    margin: 0;
    font-weight: 400;
}

.about-story-location {}

.about-story-location__row {
    min-height: 560px;
    background: var(--color-tertiary-mid);
}

.about-story-location__image {
    height: 100%;
    min-height: 560px;
    overflow: hidden;
}

.about-story-location__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
}

.about-story-location__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 60px 40px 60px 60px;
}

.about-story-location__content>h2 {
    margin-bottom: 35px;
    color: var(--color-secondary);
    font-size: clamp(40px, 5vw, 64px);
}

.about-story-location__addresses {
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
    margin-bottom: 30px;
}

.about-story-location__addresses h3 {
    margin-bottom: 10px;
    font-weight: 500;
}

.about-story-location__addresses h3 a {
    color: inherit;
    text-decoration: none;
}

.about-story-location__addresses h3 a:hover {
    color: var(--color-secondary);
}

.about-story-location__addresses p {
    margin: 0;
}

.about-story-location__content>.btn {
    align-self: flex-start;
}

.about-story-testimonials {}

.about-story-testimonials__row {
    --bs-gutter-x: 25px;
    --bs-gutter-y: 25px;
}

.about-story-testimonial-card {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    padding: 30px;
    background: var(--color-tertiary-mid);
    border-radius: 10px;
}

.about-story-testimonial-card>h3 {
    margin-bottom: 6px;
    font-weight: 500;
}

.about-story-testimonial-card>time {
    color: #686868;
}

.about-story-testimonial-card__quote {
    height: 50px;
    margin-top: 20px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 1;
}

.about-story-testimonial-card>p {
    flex: 1 1 auto;
}

.about-story-testimonial-media {
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    padding: 0;
    overflow: hidden;
    background: #ddd;
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
}

.about-story-testimonial-media img,
.about-story-testimonial-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-story-testimonial-media[data-media-type="video"] {
    cursor: pointer;
}

.about-story-testimonial-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .65);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.about-story-testimonial-media__play::after {
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
    content: "";
    transform: translate(-50%, -50%);
}

.about-story-testimonial-media__label {
    margin-top: 7px;
    color: #555;
    font-size: var(--fs-t12);
}

.about-story-testimonials__more {
    margin-top: 35px;
}

.about-testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px;
    visibility: hidden;
    background: rgba(0, 0, 0, .82);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.about-testimonial-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.about-testimonial-modal__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 1100px);
    height: min(100%, 780px);
}

.about-testimonial-modal__content img,
.about-testimonial-modal__content video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: #111;
    box-shadow: 0 12px 45px rgba(0, 0, 0, .35);
}

.about-testimonial-modal__close {
    position: absolute;
    top: 90px;
    right: 25px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    font-family: Arial, sans-serif;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
}

body.about-testimonial-modal-open {
    overflow: hidden;
}

@media (max-width: 991.98px) {

    .about-story-background,
    .about-story-craft,
    .about-story-location,
    .about-story-testimonials {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about-story-craft {
        padding-top: 20px;
    }

    .about-story-craft-card>img {
        height: 280px;
    }

    .about-story-location__row,
    .about-story-location__image,
    .about-story-location__image img {
        min-height: 420px;
    }
}

@media (max-width: 767.98px) {
    .about-story-background__image {
        height: 290px;
    }

    .about-story-testimonial-card {
        min-height: 360px;
    }
}

@media (max-width: 575.98px) {

    .about-story-background,
    .about-story-craft,
    .about-story-location,
    .about-story-testimonials {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-story-heading::before {
        background-size: contain;
        background-position: 20% center;
    }

    .about-story-background__image {
        height: 230px;
    }

    .about-story-craft__row {
        --bs-gutter-y: 30px;
    }

    .about-story-craft-card__copy {
        padding: 20px 5px 0;
    }

    .about-story-location__row,
    .about-story-location__image,
    .about-story-location__image img {
        min-height: 330px;
    }

    .about-story-location__content {
        padding: 38px 25px;
    }


    .about-story-testimonial-card {
        padding: 28px;
    }

    .about-testimonial-modal {
        padding: 55px 18px 25px;
    }

    .about-testimonial-modal__close {
        top: 8px;
        right: 12px;
    }
}


/*  ------------------------ Product Detail -------------------------- */

.sidebar {
    position: sticky;
    top: calc(75px + 30px);
}

.categories-panel {
    border-radius: 8px;
    /* padding-block: 15px; */
    margin-bottom: var(--space);
    background-color: #F5F5F5;
}

.categories-panel:has(.fabric-special-panel) {
    background: transparent;
}


/* ── Root list ─────────────────────────────────────────────────── */
.cat-root-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000;
}

.cat-root {
    background: #F5F5F5;
    margin-inline: 30px;
    margin-bottom: 20px;
}

.cat-root.fabric-root {
    margin-inline: 0;
    background: transparent;
}

.cat-root:first-child {
    margin-top: 20px;
}

.cat-root:last-child {
    border-bottom: none;
    margin-bottom: 20px;
}

.cat-root.is-active>.cat-root-row,
.cat-root:has(.is-active)>.cat-root-row {
    background: #FFF;
    border-radius: 8px;
    padding: 15px;
    margin-inline: -15px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}

.cat-root>.cat-root-row.fabric-root-row,
.cat-root>.cat-root-row.fabric-root-row {
    background: var(--color-secondary);
    margin-inline: 0;
    border-radius: 8px;
    padding: 15px 30px;
    /* margin-inline: -15px; */
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}


.cat-root-row.fabric-root-row .cat-root-link {
    color: #fff;

}


.cat-root.is-open>.cat-root-row {
    margin-bottom: 20px;
}

.cat-root-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: margin-bottom 0.35s ease;
}



.cat-root-row:not(:has(+ .cat-sub-list)) {
    padding-right: 20px;
}

.cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: color .15s, font-weight .1s;
}

.cat-root.is-open>.cat-root-row .cat-root-link,
.cat-root:has(.is-active)>.cat-root-row .cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 700;
    color: #000;
}

.cat-root.is-open>.cat-root-row .cat-root-link.fabric-root-link,
.cat-root:has(.is-active)>.cat-root-row .cat-root-link.fabric-root-link {
    color: #fff;
}



.cat-root.is-active>.cat-root-row .cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 700;
    color: #000;
}

.cat-root.is-active>.cat-root-row .cat-root-link.fabric-root-link {
    color: #fff;
}

.fabric-root .cat-sub-list {
    padding-inline: 30px;
}

.cat-root-link:hover {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.cat-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 410ms ease,
        opacity 350ms ease,
        transform 350ms ease;
}

.cat-sub-list.is-open {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
}

/* ── Sub item row ── grey background ── */
.cat-sub-item {
    /* background: #F5F5F5; */
    margin-bottom: 20px;
}

.cat-sub-item:last-child {
    margin-bottom: 0;
}

.cat-sub-list:has(.cat-sub-list.is-open) {
    margin-bottom: 20px;
}

.cat-sub-item.is-open>.cat-sub-row {
    margin-bottom: 20px;
}

.cat-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
}

/* indent levels */
.cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding: 0 0 0 10px;
}

.cat-sub-list>.cat-sub-item>.cat-sub-row:last-child {
    margin-bottom: 0;
}

.cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 20px;
    padding-right: 0;
}

.cat-sub-list .cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 30px;
    padding-right: 0;
}

.cat-sub-list .cat-sub-list .cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 40px;
    padding-right: 0;
}


/* ── Sub link: default ── */
.cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: color .15s, font-weight .1s;
}

/* Sub open (its own sub showing) → 600 + green */
.cat-sub-item.is-open>.cat-sub-row>.cat-sub-link,
.cat-sub-item.is-open>.cat-sub-row .cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
}

/* Sub active (current page) */
.cat-sub-item.is-active>.cat-sub-row>.cat-sub-link,
.cat-sub-item.is-active>.cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
}

/* Sub link hover */
.cat-sub-link:hover {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

/* Base reset for all */
.cat-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    transition: background .15s, color .15s, border-color .15s;
}

.cat-toggle-btn i {
    font-size: 12px;
}

/* Root toggle — circle with black border */
.cat-root-row .cat-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #000;
    color: #000;
    background: transparent;

}

.cat-root-row .cat-toggle-btn.fabric-toggle-btn {
    border: 2px solid #fff;
    color: #fff;
}

/* Root open → filled green circle */
.cat-root.is-open>.cat-root-row .cat-toggle-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Root toggle hover */
.cat-root-row .cat-toggle-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Sub toggle — plain icon, no circle, no border */
.cat-sub-row .cat-toggle-btn {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #333;
    padding: 2px 4px;
}

.cat-sub-row .cat-toggle-btn i {
    font-size: 13px;
}

/* Sub open → green icon */
.cat-sub-item.is-open>.cat-sub-row .cat-toggle-btn {
    color: var(--color-primary);
}

/* Sub toggle hover */
.cat-sub-row .cat-toggle-btn:hover {
    color: var(--color-primary);
    background: transparent;
    border: none;
}

/* ── Scroll ─────────────────────────────────────────────────────── */
.cat-bg {
    overflow-y: auto;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .cat-root {
        margin-inline: 15px;
    }

    .sidebar-widgets-wrap {
        margin: 0;
    }
}

@media (max-width: 1366px) {
    .cat-toggle-btn i {
        font-size: 12px;
    }
}

@media(max-width: 768px) {

    /* =========================
   MOBILE CATEGORY DROPDOWN
========================= */
    .category-filter-dropdown {
        position: relative;
    }

    .category-dropdown-toggle {
        display: flex;
        align-items: center;
        border-radius: 8px;
        font-weight: 500;
        background: #CECECE;
        width: 250px;
        color: #000
    }

    .category-dropdown-toggle:hover,
    .category-dropdown-toggle:focus,
    .category-dropdown-toggle:active {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

    .category-dropdown-menu {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 2;
        display: none;
        background: #fff;
        border: 1px solid #CECECE;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        max-height: none;
        overflow: hidden;
    }

    .category-dropdown-menu.is-open {
        display: block;
    }

    .category-dropdown-menu-list {
        padding: 0;
        border-radius: 8px;

    }

    .mobile-cat-current-root-title {
        padding: 15px 20px;
        font-weight: 800;
        /* letter-spacing: 0.04em; */
        text-transform: uppercase;
        color: #fff;
        border-bottom: 1px solid #CECECE;
        background: var(--color-secondary)
    }

    .mobile-cat-filter-list-wrap {
        padding: 0 10px 10px 10px;
        border-radius: 8px;

    }

    .mobile-cat-filter-list {
        max-height: 320px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-cat-filter-list,
    .mobile-cat-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    .mobile-cat-item {
        border-bottom: 1px solid #CECECE;
    }

    .mobile-cat-submenu.is-open .mobile-cat-item {
        border-bottom: 1px solid transparent;
    }

    .mobile-cat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-cat-link {
        display: block;
        flex: 1 1 auto;
        padding: 15px;
        color: #000;
    }

    .mobile-cat-link:hover,
    .mobile-cat-link:focus {
        color: var(--color-primary);
        text-decoration: none;
    }

    .mobile-cat-toggle {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #000;
        transition: color 0.25s ease, transform 0.25s ease;
    }

    .mobile-cat-toggle:hover {
        color: #000;
    }

    .mobile-cat-item.is-active>.mobile-cat-row>.mobile-cat-link {
        font-weight: 700;
        color: #000;
    }

    .mobile-cat-item.is-first-level>.mobile-cat-row>.mobile-cat-link {
        font-weight: 600;
    }

    .mobile-cat-submenu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
        background: #fff;
    }

    .mobile-cat-submenu.is-open {
        max-height: 1200px;
        opacity: 1;
        visibility: visible;
    }

    .mobile-cat-submenu .mobile-cat-link {
        padding: 10px 20px;
    }

    .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-link {
        padding-left: 40px;
    }

    .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-link {
        padding-left: 52px;
    }

    .mobile-cat-item.is-open>.mobile-cat-row .mobile-cat-toggle {
        color: #000;
    }
}

/* owl wrap */
/* .pdv-owl-wrap { flex: 1; min-width: 0; position: relative; } */
/* pdf panel */


/* enquire */

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* .pdv-table-responsive {
        margin-bottom: 16px;
    } */

}

/* --------------------------- Product Detail End -------------------------- */
/*	------------------------ Gallery Page -------------------------- */
/* If a square image lands in a wide spot, revert to 1×1 */
/* If a landscape image lands in a tall spot, revert to 1×1 */
/* Default: Square images stay as 1×1 */
/* Landscape images get 2 columns */
/* Portrait images get 2 rows */


@keyframes pgAjaxSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*	------------------------ Gallery Page END -------------------------- */
/*	------------------------ Blog Page -------------------------- */


.blogs-glow-right {
    --gw: 560px;
    --gh: 760px;
    --gr: 760px;
    --gb: 2%;
    --grt: -24%;
    --go: 0.13;
}


.blogs-latest-prev,
.blogs-latest-next,
.service-carousel-section .owl-nav button,
.aboutus-clients-carousel .owl-nav button.owl-prev,
.aboutus-clients-carousel .owl-nav button.owl-next,
.blog-related-carousel .owl-nav button.owl-prev,
.blog-related-carousel .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

/* visible while hovering the carousel */


/* Lightbox (Magnific Popup) arrows — same round white button style as the carousels */
.mfp-wrap .mfp-arrow {
    width: 44px;
    height: 44px;
    margin: -22px 0 0;
    top: 50%;
    opacity: 1;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    transition: background-color 180ms ease;
}

.mfp-wrap .mfp-arrow:hover,
.mfp-wrap .mfp-arrow:focus {
    opacity: 1;
    background-color: var(--color-primary);
}

/* drop the default CSS triangles — the chevron comes from the background image */
.mfp-wrap .mfp-arrow:before,
.mfp-wrap .mfp-arrow:after {
    display: none;
}

.mfp-wrap .mfp-arrow:before {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    opacity: 1;
    font-family: "font-icons";
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: var(--text);
}

.mfp-wrap .mfp-arrow-left:before {
    content: "\e7a4";
}

.mfp-wrap .mfp-arrow-right:before {
    content: "\e7a5";
}

/* Magnific pins its arrows to left/right 0, which leaves them flush against the viewport edge. */
.mfp-wrap .mfp-arrow-left {
    left: 30px;
}

.mfp-wrap .mfp-arrow-right {
    right: 30px;
}

@media (max-width: 575.98px) {
    .mfp-wrap .mfp-arrow-left {
        left: 10px;
    }

    .mfp-wrap .mfp-arrow-right {
        right: 10px;
    }
}


/* mobile: show dots, hide arrows */
/* tablet/desktop: show arrows, hide dots */
/* Mobile sort icon button + menu (blog & product listings) */


.blogs-listing-pagination {
    position: relative;
    z-index: 3;
    margin-top: 85px;
}

.blogs-listing-pagination nav,
.blogs-listing-pagination .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blogs-listing-pagination a,
.blogs-listing-pagination strong {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-p14);
}

.blogs-listing-pagination a:hover {
    color: var(--color-primary);
}

.blogs-listing-pagination i {
    color: #BEBEBE;
    font-size: var(--fs-p14);

}

.blogs-listing-pagination i:hover {
    color: var(--color-primary);
}



.blogs-listing-pagination strong {
    background: #000;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 575.98px) {


    .blogs-listing-pagination {
        margin-top: 55px;
    }

}


@keyframes blog-share-status {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.88);
    }

    65% {
        opacity: 1;
        transform: translateY(-2px) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes blog-copy-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 7px rgba(255, 208, 0, 0.16);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}


/*	------------------------ Blog Page END -------------------------- */
/*	------------------------ Contact US -------------------------- */
/* Contact Banner */
/* Contact Info Bar */


/* Contact Form Section */
#contact-form-section {}


#contact-form-section .form-image {
    width: 100%;
    height: 100%;
}

#contact-form-section .form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% center;
}

#contact-form-section .form-container {
    background-color: #FAFAFA;
    height: 100%;
}

#contact-form-section .form-container h2 {
    color: #000;
    margin-bottom: 30px;
}

#contact-form-section .form-container p {
    color: #000;
    margin-bottom: 5px;
    font-weight: 400;
    font-size: var(--fs-24);
}

#contact-form-section .form-group {
    margin-bottom: 15px;
}

#contact-form-section .form-group label {
    display: block;
    font-weight: 400;
    margin-bottom: 10px;
}

#contact-form-section .form-group .form-control {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    background: #FFF;
}

#contact-form-section .form-group .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}


#contact-form-section .form-group textarea.form-control {
    resize: vertical;
    min-height: 100px;
}


#contact-form-section .loadingDiv {
    color: #fff;
}

/* ── LEFT: Form side ─────────────────────────────────────────────── */
/* Form fields */
/* Select arrow */
/* Two-col row */
/* ── RIGHT: Info side ────────────────────────────────────────────── */


/* Notice / loading */
#noticeDiv {
    margin: 0 0 12px;
}

.loadingDiv {
    display: none;
    padding: 8px 0;
    color: #888;
    font-size: 14px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: var(--bg);
    color: var(--text);
}

.table> :not(caption)>*>* {
    background-color: var(--bg);
    color: var(--text);
}

/* Map Section */


/* Contact Page Responsive */
@media (max-width: 991.9px) {



    #contact-form-section .form-image {
        min-height: 300px;
    }
}

/* Contact Page Redesign */
.contact-page {
    position: relative;
    overflow: hidden;
}

.contact-page .container-fluid {
    position: relative;
    z-index: 2;
}


@media (max-width: 575.98px) {


    /*.contact-page-card{*/
    /*    flex-direction: row;*/
    /*    text-align: left;*/
    /*    align-items: flex-start;*/
    /*    justify-content: center;*/
    /*    gap: 30px;*/
    /*    min-height: 200px;*/
    /*}*/

    /*.contact-page-card .contact-page-card-icon{*/
    /*    height: 30px;*/
    /*    margin-bottom: 0;*/
    /*}*/

    /*.contact-page-map-links{*/
    /*    justify-content: flex-start;*/
    /*}*/
}

/*	------------------------ Contact Page END -------------------------- */

/*	------------------------ Contact Page 2026 -------------------------- */

.contact-breadcrumb {
    padding: 25px 0 20px;
}

.contact-page {
    overflow: visible;
    background: #FFFFFF;
}

.contact-intro__image {
    width: 100%;
    height: 100%;
    min-height: 485px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.contact-intro__content {
    height: 100%;
    min-height: 485px;
    padding: 60px 70px;
    background: var(--color-tertiary-mid);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.contact-intro__eyebrow {
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-intro__title {
    margin-bottom: 20px;
    color: var(--color-secondary);
    font-weight: 600;
}

.contact-intro__title em {}

.contact-intro__address,
.contact-intro__phones,
.contact-intro__hours {
    margin-bottom: 20px;
}

.contact-intro__directions {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-intro__directions a {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-intro__directions svg {
    width: 35px;
    height: 35px;
    display: block;
}

.contact-enquiry {
    min-height: 735px;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url('../images/layout/bg-contact-form.webp');
    background-size: cover;
    background-position: center;
}

.contact-enquiry__card {
    position: relative;
    overflow: hidden;
    padding: 65px 100px 70px;
    border-radius: 10px;
    background: var(--color-tertiary-mid);
}

.contact-enquiry__card::before {
    content: '';
    position: absolute;
    inset: 90px 60px 50px;
    background: url('../images/layout/membership-banner-bg-logo.png') top / contain no-repeat;
    pointer-events: none;
    background-position: center -100%;
}

.contact-enquiry__card>* {
    position: relative;
    z-index: 1;
}

.contact-enquiry__card h2 {
    margin-bottom: 35px;
    text-align: center;
}

.contact-enquiry__card .form-group {
    margin-bottom: 20px;
}

.contact-enquiry__card label {
    margin-bottom: 10px;
    display: block;
    font-weight: 400;
}

.contact-enquiry__card label span {
    color: #E2231A;
}

.contact-enquiry__card .form-control {
    width: 100%;
    min-height: 45px;
    padding: 10px 15px;
    border: 0;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text);
    box-shadow: none;
}

.contact-enquiry__card .form-control:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.contact-enquiry__card textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.contact-enquiry__submit {
    width: 100%;
    margin-top: 30px;
}

.contact-enquiry #noticeDiv {
    margin-bottom: 20px;
}

.contact-enquiry .loadingDiv {
    display: none;
    padding-top: 15px;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .contact-intro__content {
        padding: 50px;
    }

    .contact-enquiry__card {
        padding-right: 75px;
        padding-left: 75px;
    }
}

@media (max-width: 991.98px) {

    .contact-intro__image {
        min-height: 420px;
    }

    .contact-intro__content {
        min-height: 420px;
        padding: 50px;
    }

    .contact-enquiry {
        min-height: 0;
    }

    .contact-enquiry__card {
        padding: 55px 60px 60px;
    }
}

@media (max-width: 767.98px) {
    .contact-breadcrumb {
        padding: 20px 0;
    }

    .contact-intro__image {
        min-height: 350px;
    }

    .contact-intro__content {
        min-height: 0;
        padding: 45px 30px;
    }

    .contact-enquiry__card {
        padding: 45px 30px 50px;
    }

    .contact-enquiry__card::before {
        inset: 100px 20px 50px;
    }
}

@media (max-width: 575.98px) {
    .contact-intro__image {
        min-height: 280px;
    }

    .contact-intro__content {
        padding: 40px 25px;
    }

    .contact-enquiry__card {
        padding: 40px 20px 45px;
    }
}

/*	------------------------ Contact Page 2026 END -------------------------- */


/*	------------------------ Cart -------------------------- */

#content.cart_view,
#content.billing_view {
    padding-top: 30px;
    padding-bottom: 30px;
}

.process-steps {
    padding: 0;
}

ul.process-steps.process-3 {
    max-width: 780px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

.process-steps.process-3 li {
    float: none;
    width: 100%;
    flex: 0 0 33.3333%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
}

.process-steps.process-3 li:first-child {
    justify-content: flex-start;
}

.process-steps.process-3 li:last-child {
    justify-content: flex-end;
}

.process-steps li h6 {
    margin: 15px 0 0 0;
    padding: 0 10px;
}

.process-steps li .innerbox {
    z-index: 2;
    position: relative;
}

#content.cart_view .process-steps li:after,
#content.cart_view .process-steps li:before,
#content.billing_view .process-steps li:after,
#content.billing_view .process-steps li:before {
    width: calc(100% - 53px);
}


#content.cart_view .cart .quantity .plus,
#content.cart_view .cart .quantity .minus {
    border: none;
    display: block;
    cursor: pointer;
    background-color: transparent;
    color: var(--text);
    font-weight: 100;
    line-height: 1;
    text-align: center;
    padding: 0;
    height: 100%;
    width: calc((100% - 35px) / 2);
}

#content.cart_view .cart .quantity .minus {
    font-size: 14px;
}

#content.cart_view .cart .quantity .plus {
    font-size: 22px;
}

#content.cart_view .cart .quantity .plus:hover,
#content.cart_view .cart .quantity .minus:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#content.cart_view .cart .quantity .qty {
    border: 1px solid #cecece;
    background-color: transparent;
    height: 100%;
    width: 35px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text);
}

#content.cart_view .cart .quantity {
    margin: 0;
    height: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

#content.cart_view .subDisc del {
    font-size: 13px;
}

#content.cart_view .subDisc strong {
    font-weight: 700;
}

#addVouc .button3 {
    display: flex;
    text-align: center;
    height: 100%;
    width: 100%;
    font-weight: 700;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.cart_totals td {
    padding: 20px 0;
    color: var(--text);
}

.cart_totals .cart tr:first-child td {
    border-top: 1px solid #d6d6d6;
}

.cart_totals .cart tr:last-child td {
    border-bottom: none;
}

.cart_totals .cart td strong {
    font-weight: 600;
}

.cart_totals .cart tr td:last-child {
    text-align: right;
}

.cart_totals .cart tr:last-child td:last-child .amount.color.lead {
    font-size: 16px;
    color: #fff;
}

#mycarttotal {
    font-size: 20px;
    font-weight: 600;
}

#sttotal2 {
    color: #fff;
    line-height: 25px;
    display: inline-block;
    padding-right: 10px;
}

.cartDiv .attrDesc {
    font-size: 14px;
}


#voucher.form-control {
    height: 45px;
    border-radius: 8px;
}

#voucher+.button {
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    height: 100%;
}

.guest-checkout-modal .modal-dialog {
    max-width: 420px;
}

.guest-checkout-modal .modal-content {
    position: relative;
    padding: 40px 32px 32px;
    border: none;
    border-radius: 16px;
    background: var(--bg);
}

.guest-checkout-close {
    position: absolute;
    top: 12px;
    right: 16px;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #868686;
}

.guest-checkout-close:hover {
    color: var(--text);
}

.guest-checkout-head {
    margin-bottom: 24px;
    text-align: center;
}

.guest-checkout-head h4 {
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
}

.guest-checkout-head p {
    margin: 0;
    font-size: var(--fs-p14);
    color: #868686;
}

.guest-checkout-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* the two actions carry equal weight; only the colour separates them */
.guest-checkout-btn {
    width: 100%;
}

.guest-checkout-register {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-tertiary);
    text-align: center;
}

.guest-checkout-register__label {
    font-size: var(--fs-p14);
    color: #868686;
}

.guest-checkout-register a {
    font-weight: 500;
    text-decoration: underline;
}

.guest-checkout-register__perk {
    margin: 8px 0 0;
    font-size: var(--fs-t12);
    color: #868686;
}

/*	------------------------ Cart END -------------------------- */


/*	------------------------ Billing END -------------------------- */

.buyforrow+hr {
    border-top: 1px solid #d6d6d6;
    margin-top: 25px;
    margin-bottom: 35px;
    opacity: 1;
}

.billing_view label {
    color: #233745;
    font-weight: 600;
}

.billing_view form#ePayment {
    max-width: 900px;
    margin: 15px auto 0;
}

.billing_view form#ePayment>.row,
.billing_view form#ePayment>.buyfordiv {
    max-width: 740px;
    margin: 0 auto;
}

#someoneelse {
    max-width: 740px;
    margin: 0 auto;
}

label .error {
    color: red;
}

.billing_view form#ePayment h4 {
    margin-bottom: 5px;
}

.billing_view form#ePayment h4+.row label {
    margin-top: 20px;
    margin-bottom: 8px;
}

.billing_view .style-msg {
    margin: 0 auto 35px;
    max-width: 780px;
}

/*	------------------------ Billing END -------------------------- */


/*	------------------------ Confirm -------------------------- */

.custinfo {
    color: #242422;
}

.custinfo strong {
    font-weight: 600;
}

.whitespace {
    white-space: nowrap;
}

.confirm_view table {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.confirm_view table th {
    background-color: var(--color-primary-dark);
    color: #000;
    padding: 10px;
    font-weight: 600;
}

.confirm_view table td {
    padding: 15px;
    border-bottom: 1px solid #d6d6d6;
    background-color: var(--bg);
    color: var(--text);

}

.confirm_view img.displayImg {
    height: 75px;
    width: 75px;
    object-fit: cover;
}

.confirm_view td:has(img)+td a {
    font-weight: 600;
    color: var(--text);
}

.confirm_view .td-qty .qty {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #cecece;
    background-color: transparent;
    height: 100%;
    width: 35px;
    height: 35px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    font-weight: 600;
    color: #242422;
}

.confirm_view td.td-qty+td,
.confirm_view td.td-qty+td+td {
    font-weight: 600;
    color: #242422;
}

.confirm_view table td .subDisc {
    font-size: 14px;
}

.confirm_view .subDisc del {
    color: #242422;
}

.confirm_view table td .subDisc span {
    color: #ec2227;
}

.confirm_view .subDisc strong {
    font-weight: 700;
    color: var(--text);
}

.confirm_view #sttotal {
    font-size: 15px;
    color: var(--text);
    line-height: 25px;
}

.confirm_view .subtotal {
    color: var(--text);
    padding: 5px 20px;
    float: right;
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view .discount {
    color: var(--text);
    /*background-color:#ebebeb;*/
    float: right;
    margin-top: 0;
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view .discountcon {
    padding: 5px 20px;
}

.confirm_view .tax {
    color: var(--text);
    padding: 5px 20px;
    float: right;
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view #sttotal2 {
    color: #000;
    font-size: 14px;
}

.confirm_view .subtotal #sttotal,
.confirm_view .discount #sttotal,
.confirm_view .tax #sttotal {
    font-size: 14px;
    color: var(--text);
    line-height: 25px;
    font-weight: normal;
}

.confirm_view #mycarttotal {
    font-size: 16px;
}

.confirm_view .ttotal {
    color: #000;
    background-color: var(--color-primary-dark);
    float: right;
    margin-top: 5px;
    margin-bottom: 30px;
    line-height: 25px;
    width: 100%;
    text-align: right;
}

.confirm_view .ttotalcon {
    padding: 5px 20px;
    font-size: 18px;
    font-weight: 600;
}

.confirm_view .ttotalcon #mycarttotal {
    font-size: 18px;
}


/*	------------------------ Confirm END -------------------------- */


/*	------------------------ Responsive -------------------------- */

@media(max-width: 1399.9px) {

    /* h1,
    .h1 {
        font-size: 35px;
    }

    h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3 {
        font-size: 20px;
    } */


    .bannerstyle {
        padding-right: 15px;
        padding-left: 15px;
    }

    .facilitiespage.bannerstyle {
        padding: 0;
    }

    .container-fluid {
        max-width: calc(100% - 30px);
    }
}

@media(min-width: 1200px) and (max-width: 1399.9px) {
    #content.homepage .col-xl-3 {
        width: 30%;
    }

}

@media(min-width: 768px) and (max-width: 1199.9px) {
    #content.homepage .col-xl-3 {
        width: 40%;
    }

    #content.homepage {
        background-size: 60% auto !important;
    }
}

@media(max-width: 1199.9px) {

    /*.top-search-open .header-inner-flexbox{width: calc(100% - 450px);}*/
    /*.header-inner-flexbox{width: calc(100% - 200px);}*/
    #primary-menu>div>ul>li>a {
        padding: 20px 5px;
    }

    .top-search-open #top-search form {
        width: 100%;
    }


    #primary-menu ul li a+ul.category-nav:before {
        left: 50px;
    }


    #slider~#content,
    #sliderm~#content {}

    /*padding-top: 40px; padding-bottom: 40px;*/

    .product-desc .product-title {
        font-size: 22px;
    }


    #content.doctordetailpage .box .scheduletable {
        padding: 20px;
    }


    .addtocart_button .button {
        padding: 15px 35px;
        width: auto;
    }
}

@media(max-width: 991.9px) {
    #primary-menu-container {
        display: none;
    }

    #header {
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #110E19;
        border-bottom: 1px solid #CECECE;
    }

    .top-message .flexbox {
        justify-content: center;
    }

    .top-message .content p {
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: var(--fs-p14);
    }

    .top-message .content p a {
        white-space: nowrap;
    }


    .slider-caption h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .slider-caption .button3,
    .button,
    .button2,
    .button3,
    .button-outlined,
    .button3+.button-outlined {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 20px;
    }

    .docSearchForm input {
        padding: 0 15px;
        width: 30%;
        font-size: 14px;
    }

    .docSearchForm select {
        padding: 0 15px;
        width: 32%;
        font-size: 14px;
    }

    .docSearchForm a#docSubmit {
        font-size: 16px;
        font-weight: 600;
        margin-left: 0;
        padding-left: 15px;
    }

    .docSearchForm a#docSubmit span {
        margin-top: 0;
        margin-left: 5px;
    }

    .docSearchForm a#docSubmit svg {
        width: 20px;
    }

    #searchdoctorform+section,
    #searchdoctorform+div {
        margin-top: 0;
        padding-top: 40px;
    }

    #content.homepage {
        aspect-ratio: auto;
        position: relative;
    }

    #content.homepage:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 60%;
        height: 100%;
        background-image: url(../images/layout/WELLNESS_LOUNGE.webp?v1);
        background-position: right top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #content.homepage .content {
        padding-top: 0;
        padding-bottom: 0;
    }



    .facilities_slider {
        margin-top: 30px;
    }

    .facilities_slider .oc-item .facilitycontent {
        width: calc(100% - 50px);
    }

    #content.doctordetailpage .box .schedulebutton {
        height: auto;
    }

    #content.doctordetailpage .box .bookappointment {
        height: auto;
    }


    .product_detail_view .blog_side_cat {
        margin-top: 30px;
    }
}

@media(max-width: 864.9px) {
    /* #header .header-info .infobox {
        padding: 0 10px;
    }

    #header .header-info .infobox.top-contact .flexbox .text {
        padding-right: 7px;
    }

    #header .header-info .infobox.top-contact .flexbox .text span {
        font-size: 11px;
    }

    #header .header-info .infobox.others svg {
        padding: 0 10px;
        height: 20px;
    } */
}

@media(max-width: 767.9px) {

    /* h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3,
    .homeproduct .product-desc .product-title,
    .homeproduct .product-desc .product-price ins {
        font-size: 18px;
    }

    h4,
    .h4 {
        font-size: 16px;
    }

    h5,
    .h5,
    .homeproduct .product-desc .product-price del {
        font-size: 14px;
    }

    h6,
    .h6 {
        font-size: 14px;
    } */

    small,
    .sm-text {
        font-size: 10px;
    }

    #sliderm {
        aspect-ratio: 1350 / 600;
    }

    #sliderm .swiper-pagination {
        bottom: 20px !important;
        width: 100%;
        left: unset;
        right: unset;
    }

    .tag,
    .homeproduct .discount-tag .percentage,
    .product_detail_view .product-desc1 .prodCat {
        font-size: 10px;
    }


    .cta-text,
    .button {
        font-size: 14px;
    }


    .docSearchForm {
        padding: 0;
        border-radius: 15px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .docSearchForm input {
        width: 100%;
        padding-top: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #dddddd;
    }

    .docSearchForm select {
        width: 50%;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .docSearchForm select:first-of-type {
        border-left: none;
    }

    .docSearchForm a#docSubmit {
        width: 100%;
    }

    #content.homepage {
        padding-bottom: 0 !important;
    }

    #content.homepage:after {
        position: relative;
        width: 100%;
        bottom: 0;
        aspect-ratio: 957 / 708;
    }

    #content.homepage .content p:has(.button3) {
        margin-top: 20px;
        margin-bottom: 40px !important;
    }


    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1000;
        background-size: cover;
        background-position: center 90% !important;
        overflow: hidden;
        position: relative;
    }

    .bannerstyle .container-fluid:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
        z-index: 1;
    }

    .bannerstyle .container-fluid>* {
        z-index: 2;
        position: relative;
    }

    .pointsrow .content {
        padding: 35px 20px;
    }

    .specialtypointsrow .content {
        padding: 20px;
    }

    .verticaltabs .nav-underline .nav-link {
        font-size: 14px;
        padding: 10px 15px;
    }

    .verticaltabs .nav-underline .nav-link:after {
        font-size: 20px;
    }

    .specialtytablerow .col-12 .content {
        margin-bottom: 15px;
    }

    .specialtytablerow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .specialtytablerow .col-12 .content p:last-child {
        border-bottom: 1px solid #cecece;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1000 !important;
        background-size: cover;
        background-position: center 90% !important;
        overflow: hidden;
        position: relative;
        align-content: flex-start !important;
    }

    .facilitiespage.bannerstyle .container-fluid:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
        z-index: 1;
    }

    .facilitiespage.bannerstyle .container-fluid>* {
        z-index: 2;
        position: relative;
    }

    .facilitiespage.bannerstyle .container-fluid svg {
        position: absolute;
        bottom: 60px;
    }

    #facilities .content .content {
        height: auto;
        margin-bottom: 15px;
    }

    #facilities .content .col-12:last-child .content {
        margin-bottom: 0;
    }


    #reports .middlecol {
        padding-top: 30px;
    }

    .widget>h4 {
        margin-top: 20px;
    }


}

@media(max-width: 604.9px) {

    #sliderm {
        aspect-ratio: 1350 / 600;
    }

    #sliderm .swiper-pagination {
        bottom: 20px !important;
    }
}

@media(max-width: 575.9px) {


    .container {
        max-width: calc(100% - 30px);
    }

    #sliderm .slider-caption {
        padding-bottom: 40px;
    }


    #footer .footer-widgets-wrap>.row>.col {
        width: 100%;
    }

    #footer .footer-widgets-wrap {
        padding: 30px 0;
    }

    .widget_links li {
        padding-top: 5px;
    }

    .docSearchForm input {
        padding-top: 15px;
        padding-bottom: 15px;
    }


    #sliderm,
    #banner.aboutuspage {
        aspect-ratio: 900 / 1300;
    }

    .slider-caption h2 {
        /*font-size: 18px;*/
    }


    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1100;
        padding: 60px 40px !important;
    }


    .pointsrow .col:last-child .content,
    .pointsrow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .specialtypointsrow .content {
        height: auto;
        margin-bottom: 15px;
    }

    .specialtypointsrow .col:last-child .content,
    .specialtypointsrow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .verticaltabs .tab-content {
        margin-top: 30px;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1100 !important;
    }

    .blog_side_cat {
        margin-bottom: 30px;
    }


    .blog_side_cat h4 {
        margin-bottom: 20px;
    }

}

@media(max-width: 476.9px) {


    #sliderm,
    #banner.aboutuspage {
        aspect-ratio: 900 / 1300;
    }


    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1300;
        padding: 60px 30px !important;
    }

    .bannerstyle .container-fluid .content {
        padding: 0 20px !important;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1300 !important;
    }


    section {
        overflow: hidden;
    }


    #logo img {
        height: 25px;
    }
}

@media(max-width: 333.9px) {
    .header-inner-flexbox {
        /*width: calc(100% - 85px);*/
    }
}

@media(max-width: 279.9px) {

    #primary-menu-trigger,
    #page-submenu-trigger {
        width: 35px;
    }
}

/* ----------------------- Mobile Header Layout (< 992px) ----------------------- */
@media (max-width: 991.98px) {
    #header {
        border-bottom: 0;
    }


    /* Three same-specificity rules set `right` on #side-panel (#side-panel, body.side-panel-open
       and body.side-push-panel); the closed one is last in the file, so it kept winning while the
       panel was open — the overlay dimmed but the menu never slid in. Restating the open position
       with the extra class settles it. Scoped to phones on purpose: from 991px up the panel is
       positioned with left/transform, and forcing `right` there misplaces it. */
    body.side-push-panel #side-panel {
        left: 0;
        right: auto;
        transform: translateX(-100%);
        transition: transform .4s ease;
    }

    body.side-push-panel.side-panel-open #side-panel {
        transform: translateX(0);
    }

    /* Below 992px the header is always filled white (the rule that unsets the transparent
       background), so the hero treatment — white icons and an inverted logo — is invisible
       against it. Pin them to the solid-header colours whatever the scroll state. */
    #header.transparent-header #logo img {
        filter: invert(0);
    }

    #header.transparent-header .side-panel-trigger.side-nav-bar svg path,
    #header.transparent-header #top-search svg path,
    #header.transparent-header .loginaccount svg path,
    #header.transparent-header #top-cart svg path {
        stroke: #000;
    }

    /* #primary-menu holds only the search / account / cart icons here — the navigation itself
       lives in the side panel — so it stays on phones instead of being hidden with the nav
       (mobile-drawer.css hides it by default). Keeping this third column also restores the
       three-column grid, which is what puts the logo back in the centre. */
    #header #primary-menu {
        display: flex;
        align-items: center;
    }

    #header #primary-menu>div,
    #header #primary-menu>div>ul {
        width: 100%;
        height: auto;
    }

    #header #primary-menu>div>ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /* The column is only a third of a phone's width, so the icons must not wrap onto a
           second line — that was stretching the header to ~156px. They keep the right edge and
           overflow towards the logo's whitespace instead. */
        flex-wrap: nowrap;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #header #primary-menu>div>ul>li {
        display: flex;
        align-items: center;
        height: auto;
        margin: 0;
        padding: 0;
    }

    /* The desktop rules give these anchors a tall click area, which left the icons on
       different baselines from the search one. Level them so all three sit on one line. */
    #header #primary-menu>div>ul>li>a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 0;
    }

    /* Only search and cart stay in the header — a third of a phone's width can't hold more
       without crowding the logo. Account and logout move into the side panel instead. */
    #header #primary-menu>div>ul>li.loginaccount,
    #header #primary-menu>div>ul>li.logout {
        display: none;
    }

    /* The field stays hidden until the magnifier is tapped: a third of a phone's
       width cannot hold it next to the logo. Tapping adds .top-search-open, and the
       whole header row becomes the search bar rather than trying to fit both. */
    #header #primary-menu #top-search .searchinput {
        display: none;
    }

    body.top-search-open #header .topinfo {
        position: relative;
    }

    /* the logo and the hamburger keep their space in the grid but step out of
       sight, so the bar can span the row without the columns reflowing */
    body.top-search-open #header .topinfo > .col-4:not(#primary-menu) {
        visibility: hidden;
    }

    body.top-search-open #header #primary-menu #top-search .searchinput {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        height: 35px;
        padding: 0 15px;
        border: none;
        background: transparent;
        font-size: var(--fs-p14);
    }

    /* the wrapper div and the li both sit relative, so without this the absolute
       form anchors to the li instead of spanning the header row */
    body.top-search-open #header #primary-menu > div,
    body.top-search-open #header #primary-menu > div > ul > li {
        position: static;
    }

    body.top-search-open #header #top-search form {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        /* the theme form is flex-wrap:wrap; at this width the field and the button
           add up to more than the row, so they wrapped onto two lines */
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-right: 12px;
        border-radius: 8px;
        background: var(--color-tertiary-mid);
        min-height: 35px;
        z-index: 5;
    }

    body.top-search-open #header #top-search .searchbutton {
        flex: 0 0 auto;
    }

    /* the desktop close cross is white, which vanishes on the light bar */
    body.top-search-open #header #top-search .searchbutton .search-close-icon {
        color: var(--text);
    }
    .global-search-inner {
        padding-top: 60px 0;
    }

    #header .header-outter-flexbox {
        display: block;
        height: auto;
        padding: 10px 0;
    }

    #header .header-inner-flexbox {
        width: 100%;
    }

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

    /* Hamburger menu - Left */
    #header #primary-menu-trigger {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        order: 1;
        width: 40px;
        height: 40px;
    }

    /* Logo - Center */
    #header #logo {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 2;
        margin: 0;
    }

    #header #logo img {
        max-width: 200px;
    }

    /* Mobile Search Trigger - Right */
    #mobile-search-trigger,
    #top-search-trigger-m {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        height: 40px;
        cursor: pointer;
        order: 3;
    }

    #top-search-trigger-m:hover i,
    #mobile-search-trigger:hover i {
        color: var(--color-primary);
    }

    /* Mobile: account / cart / logout icons */
    #header .mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 12px;
        order: 4;
        margin-left: 12px;
    }

    #header .mobile-header-icons .mhi-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: var(--text);
    }

    #header .mobile-header-icons .mhi-icon svg {
        width: 20px;
        height: 20px;
    }

    #header .mobile-header-icons .mhi-cart-qty {
        position: absolute;
        top: -7px;
        right: -9px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: red;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        font-weight: 700;
    }

    .top-search-open .mobile-header-icons {
        display: none !important;
    }

    /* Mobile Search Form - hidden by default */
    #mobile-search-form {
        display: none !important;
    }

    /* When search is open on mobile */
    .top-search-open #primary-menu-trigger,
    .top-search-open #logo,
    .top-search-open #top-search-trigger-m,
    .top-search-open #mobile-search-trigger {
        display: none !important;
    }

    .top-search-open #mobile-search-form {
        display: flex !important;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    #mobile-search-form form {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 0;
    }

    #mobile-search-form form input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 10px 14px;
        font-size: 14px;
        color: #333;
        font-family: 'Inter', sans-serif;
    }

    #mobile-search-form form input::placeholder {
        color: #999;
    }

    #mobile-search-form .mobile-search-submit {
        border: none;
        background: transparent;
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    #mobile-search-form .mobile-search-submit svg {
        width: 16px;
        height: 16px;
    }

    #mobile-search-close {
        border: none;
        background: transparent;
        padding: 8px;
        cursor: pointer;
        font-size: 18px;
        color: #333;
        display: flex;
        align-items: center;
    }
}

/* Desktop: Hide mobile search trigger */
@media (min-width: 992px) {

    #top-search-trigger-m,
    #mobile-search-trigger {
        display: none !important;
    }
}

/*	------------------------ Responsive END -------------------------- */

.floating-action-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.whatsapp-button {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-button svg {
    width: 50px;
    height: 50px;
}

#gotoTop {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* border: 1px solid #595959; */
    /* border-radius: 50%; */
    /* color: #595959; */
    font-size: 30px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    line-height: unset;
}

#gotoTop svg {
    width: 40px;
    height: 40px;

}

#gotoTop svg circle {
    fill-opacity: 0;
}

#gotoTop.show {
    opacity: 1;
    visibility: visible;
}

#gotoTop:hover svg path {
    stroke: var(--color-secondary);
}

#gotoTop:hover svg circle {
    stroke: var(--color-secondary);
}

#gotoTop:hover {
    background: transparent;
}

/* Mobile responsive */
@media (max-width: 767.98px) {
    .floating-action-buttons {
        bottom: 20px;
        right: 20px;
        gap: 12px;
    }

    .whatsapp-button {
        width: 50px;
        height: 50px;
    }

    .whatsapp-button svg {
        width: 50px;
        height: 50px;
    }

    #gotoTop {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

/* Continuous linear scroll for gallery carousel */


/* ============================================
   Page: FAQ
   ============================================ */
.faq-hero .bread_image::after {
    background: rgba(0, 0, 0, 0.45);
}

.faq-section {
    padding: 70px 0 60px;
}

.faq-section__row {
    align-items: flex-start;
    --bs-gutter-x: 50px;
}

.faq-help-card {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    background-color: #22160f;
}

.faq-help-card__image,
.faq-help-card__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.faq-help-card__image {
    object-fit: cover;
}

.faq-help-card__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.95) 100%);
}

.faq-help-card__content {
    position: absolute;
    z-index: 1;
    right: 25px;
    bottom: 40px;
    left: 25px;
    color: #fff;
}

.faq-help-card__content h2 {
    margin-bottom: 5px;
}

.faq-help-card__content p {
    margin: 0 auto 30px;
    max-width: 330px;
    color: #fff;
    font-weight: 300;
}

.faq-help-card__content p a {
    color: inherit;
}

.faq-help-card__content .btn {
    min-width: 135px;
}

.faq-list {
    width: 100%;
}

.faq-list>p {
    margin-bottom: 20px;
}

.faq-list .toggle {
    margin: 0;
    border-bottom: 1px solid #d9d9d9;
}

.faq-list .toggle:last-child {
    margin: 0;
    border-bottom: none;
}


.faq-list .toggle .togglet,
.faq-list .toggle .toggleta {
    position: relative;
    min-height: 70px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 30px 50px 30px 0;
    background: transparent;
    color: var(--text);
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    font-size: var(--fs-f20);
    line-height: 1;

}

.faq-list .toggle .togglet:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.faq-list .toggle .togglec {
    padding: 0 50px 30px 0;
    text-align: left;
}

.faq-list .toggle .togglec p,
.faq-list .toggle .togglec li {
    font-weight: 300;
}

.faq-list .toggle .togglec> :last-child {
    margin-bottom: 0;
}

/* links inside an answer would otherwise read as plain copy */
.faq-list .toggle .togglec a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-list .toggle .togglec a:hover {
    color: var(--color-primary-dark);
}

.faq-list .toggle .togglec ul,
.faq-list .toggle .togglec ol {
    margin: 0 0 15px;
    padding-left: 20px;
}

.faq-list .toggle .togglec li+li {
    margin-top: 5px;
}

.faq-list .toggle .togglet i {
    position: absolute;
    top: 50%;
    right: 5px;
    left: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: var(--text);
    font-weight: 700;
}

.faq-list .toggle .togglet i.toggle-open {
    display: none;
}

.faq-list .toggle .toggleta i.toggle-closed {
    display: none;
}

.faq-list .toggle .toggleta i.toggle-open {
    display: flex;
}

@media (max-width: 991.98px) {
    .faq-section {
        padding: 50px 0;
    }

    .faq-section__row {
        --bs-gutter-x: 30px;
        --bs-gutter-y: 40px;
    }

    .faq-help-card {
        min-height: 500px;
    }
}

@media (max-width: 575.98px) {
    .faq-section {
        padding: 40px 0;
    }

    .faq-help-card {
        min-height: 460px;
    }

    .faq-list .toggle .togglet,
    .faq-list .toggle .toggleta {
        min-height: 60px;
        padding: 15px 40px 15px 0;
    }

    .faq-list .toggle .togglec {
        padding: 0 40px 15px 0;
    }
}



/* ============================================
   Page: Product Detail
   ============================================ */

/* ── Top buy area ── */
.product-detail-content {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    color: #000;
}

.pd-main {
    position: relative;
    z-index: 2;
}

/* Gallery */
.pd-gallery {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border-radius: 16px;
}

.pd-gallery-thumbs-wrap {
    position: relative;
    flex: 0 0 76px;
    width: 76px;
    height: 416px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.pd-gallery-thumbs {
    position: absolute;
    top: 38px;
    left: 0;
    width: 340px;
    height: 76px;
    transform: rotate(90deg) translateY(-76px);
    transform-origin: top left;
    overflow: hidden;
}

.pd-gallery-thumbs .owl-stage-outer {
    overflow: hidden;
}

.pd-gallery-thumbs .owl-item {
    height: 76px;
}

.pd-gallery-thumbs .owl-item .pd-thumb {
    transform: rotate(-90deg);
}

.pd-gallery-arrow {
    position: relative;
    z-index: 3;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #BEBEBE;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.pd-gallery-arrow i {
    font-size: 24px;
}

.pd-gallery-arrow:hover {
    color: #BEBEBE;
}

.pd-gallery-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E9E8E6;
    background: #FFF;
}

.pd-gallery-main a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.pd-gallery-main img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

/* Prev/next overlaid on the main image (siblings of the lightbox link, not inside it) */
.pd-main-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #BEBEBE;
    background-color: transparent;
    cursor: pointer;
    transition: color 200ms ease;
}

.pd-main-arrow i {
    font-size: 32px;
}

.pd-main-arrow:hover {
    color: var(--text);
}

.pd-main-prev {
    left: 4px;
}

.pd-main-next {
    right: 4px;
}

.pd-thumb {
    display: block;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1px solid #E9E8E6;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-thumb.active,
.pd-thumb:hover {
    border-color: #000;
    ;
}

@media (max-width: 767.98px) {
    .pd-gallery {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .pd-gallery-thumbs-wrap {
        width: 100%;
        height: 76px;
        flex-basis: auto;
        flex-direction: row;
    }

    .pd-gallery-thumbs {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 76px);
        height: 76px;
        transform: none;
        transform-origin: center;
    }

    .pd-gallery-thumbs .owl-item .pd-thumb {
        transform: none;
    }

    .pd-thumb {
        width: 76px;
        height: 76px;
    }

    .pd-gallery-prev i,
    .pd-gallery-next i {
        transform: rotate(-90deg);
    }
}

.pd-cart form {
    margin-bottom: 0;
}

/* Buy box */
.pd-buybox {
    padding-left: 0;
}

.pd-sku {
    font-weight: 500;
    color: #B3B3B3;
}

.pd-title {
    margin-bottom: 10px;
    font-size: var(--fs-f20);
    line-height: var(--lh-normal);
    font-weight: 500;
    font-family: var(--font-body);
}


.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
}

.pd-price ins {
    text-decoration: none;
    font-size: var(--fs-h4);
    font-weight: 400;
    /*color: #E7B500;*/
}

.pd-price del {
    color: #000;
    font-size: var(--fs-f16);
}


/* Attribute chips */
/*.packageAttrRow {*/
/*    margin-bottom: 20px;*/
/*}*/

.packageprodAttrlabel {
    display: block;
    color: #000;
    font-size: var(--fs-f16);
    font-weight: 700;
    margin-bottom: 10px;
}

.pd-main .optionsList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pd-attr {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.pd-attr input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pd-attr .titlebox {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #555;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pd-attr:hover .titlebox,
.pd-attr.active .titlebox,
.pd-attr input:checked+.titlebox {
    border-color: var(--color-primary);
}

.pd-attr-name {
    display: block;
    color: inherit;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.pd-attr.active .pd-attr-name,
.pd-attr input:checked+.titlebox .pd-attr-name {
    color: #000;
    font-weight: 700;
}

.pd-attr-price {
    display: none;
}

.pd-opt {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #868686;
}

.pd-opt-label {
    margin-bottom: 10px;
}

.pd-opt-label .pd-color-current {
    font-weight: 500;
}

.pd-opt-heading {
    margin-bottom: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Colour swatches */
.pd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pd-swatch {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--sw, #8B5A2B);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
}

.pd-swatch.active,
.pd-swatch input:checked+* {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #000;
}

.pd-swatch.active {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #000;
}

/* Engraving + packaging shared card look */
.pd-engrave-radios[hidden] {
    display: none;
}

.pd-engrave-card,
.pd-pack-card {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 15px 25px;
    border: 1px solid #BEBEBE;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease;
}


.pd-engrave-card.active,
.pd-pack-card.active {
    border: 2px solid var(--color-primary);
}

.pd-engrave-card-head,
.pd-pack-card {
    display: flex;
    justify-content: space-between;
}

/* .pd-engrave-card.active .pd-engrave-card-head{
    flex-direction: column;
} */

.pd-engrave-card-title,
.pd-pack-name {
    /* font-weight: 600; */
}

.pd-engrave-price,
.pd-pack-price {
    white-space: nowrap;
}

/* Engraving body reveals only when "Add Engraving" is active */
.pd-engrave-body {
    display: none;
    margin: 15px 0;
}

.pd-engrave-card.active .pd-engrave-body {
    display: block;
}

.pd-engrave-body .form-select,
.pd-engrave-body .form-control {
    margin-bottom: 10px;
    background-color: var(--color-tertiary-mid);
    padding: 10px 30px;
    border-radius: 100px;

}

.pd-engrave-body .form-select:focus,
.pd-engrave-body .form-control:focus {
    box-shadow: none;
    border-color: var(--color-tertiary-mid);
}

.pd-field-label {
    display: block;
    margin-bottom: 10px;
    color: #868686;
}

.pd-engrave-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 16px;
    background: var(--color-tertiary);
    overflow: hidden;
}

.pd-engrave-preview.is-empty {
    display: none;
}

.pd-engrave-preview span {
    font-size: 24px;
    line-height: 1;
    word-break: break-word;
    text-align: center;
}

/* Description / Details accordions */

.pd-acc {
    border-bottom: 1px solid #868686;
    padding: 30px 0;
}

.pd-acc:first-child {
    padding-top: 0;
}

.pd-acc:last-child {
    border-bottom: none;
}

.pd-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding-inline: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    text-align: left;
}

.pd-acc-head span{
    color: #000;
}


/* +/− toggle icon */
.pd-acc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.pd-acc-icon::before,
.pd-acc-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 1.5px;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
}

.pd-acc-icon::after {
    transform: rotate(90deg);
}

.pd-acc.is-open .pd-acc-icon::after {
    opacity: 0;
}

.pd-acc-body {
    display: none;
}

.pd-acc.is-open .pd-acc-body {
    display: block;
    padding-top: 15px;
}

.pd-acc-body *:last-child {
    margin-bottom: 0;
}


@media (max-width: 575px) {
    .pd-main .optionsList {
        gap: 10px;
    }

    .pd-attr .titlebox {
        min-height: 46px;
        padding: 0 18px;
    }

    .pd-attr-name {
        font-size: var(--fs-f16);
    }
}

/* Price summary box */
.pd-pricebox {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.pd-pricebox .flexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.pd-pricebox .ordertotal {
    margin-bottom: 0;
}

.pd-pricebox hr {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 15px 0;
}

.pd-pricebox .displayprice {
    font-weight: 700;
}

/* Quantity + buttons */
.pd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: column;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #868686;
}

.quantity-box {
    display: flex;
    align-items: center;
}

.quantity-box .quantitytext {
    display: block;
    font-weight: 500;
    text-transform: uppercase;
}

.pd-main .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    overflow: hidden;
}

.pd-main .quantity input.minus,
.pd-main .quantity input.plus {
    width: 44px;
    height: 44px;
    border: 0;
    background-color: #fff;
    color: #000;
    font-size: 18px;
    cursor: pointer;
}

.pd-main .quantity input.qty {
    border: 0;
    border-radius: 100px;
    border: 1px solid #D9D9D9;
    background: transparent;
    text-align: center;
    padding: 5px;
    font-weight: 600;
    max-width: 80px;
}

.addtocart_button {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
}

/* Both buttons share the row and fill the full width (per design) */
.addtocart_button .btn {
    width: 100%;
    min-width: 0;
}

/* "Add to Cart" — white button, dark text + cart icon (per design) */
.addtocart_button .add {
    background-color: var(--color-tertiary-mid);
    color: #000;
    border-color: var(--color-tertiary-mid);
}

.addtocart_button .add:hover {
    background-color: var(--color-primary);
    color: #000;
    border-color: var(--color-primary);
}

.addtocart_button .buy {}

/* The icon/cart partial is hardcoded white for the dark header — recolor it
   to follow the button text colour so it shows on the white button. */
.addtocart_button .addtocart_icon {
    display: inline-flex;
    align-items: center;
}

.addtocart_button .addtocart_icon svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.addtocart_button .addtocart_icon svg path {
    /*stroke: currentColor;*/
}

.addtocart_button .addtocart_icon svg path[fill="white"] {
    fill: currentColor;
}

.loadingDiv {
    display: none;
    color: rgba(255, 255, 255, 0.6);
}

.pd-soldout {
    color: #ff0000;
    font-weight: 700;
    margin-bottom: 20px;
}

.pd-brochure {
    margin-top: 15px;
}

.pd-brochure a {
    color: var(--color-primary);
    font-weight: 600;
}

#noticeDiv2.successmsg {
    margin-top: 15px;
}

#noticeDiv2.errormsg {
    color: #ff6b6b;
    margin-top: 15px;
}

/* ── Dynamic sections (Figma light theme) ── */
.pd-section {
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #000;
}

.pd-section .nav-item .nav-link {
    color: #000;
}

.pd-section .nav-item .nav-link.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
}


/* optional per-section full-width background.
   color mode -> inline background-color (wins over the base .pd-section white).
   image mode -> --pd-bg-d / --pd-bg-m inline vars applied here; mobile overrides in the media query below. */
.pd-section.pd-section--bg {
    background-image: var(--pd-bg-d, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.pd-section-title {
    margin-bottom: 30px;
    color: #000;
}

.pd-section-title:has(+ .pd-section-subtitle) {
    margin-bottom: 10px;
}

.pd-section-subtitle {
    margin: 0 auto 30px;
}

/* Intro */
.pd-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.pd-intro--has-video {
    grid-template-columns: 1fr 1.1fr;
}

.pd-intro-title {
    color: #000;
    margin-bottom: 10px;
}

.pd-intro-subtitle {
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
}

.pd-intro-body {
    color: #000;
}

.pd-intro-body p {
    margin-bottom: 15px;
}

.pd-intro-media .pd-video {
    margin: 0;
}

.pd-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    background: #000000;
}

.pd-video iframe,
.pd-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Feature icon grid (horizontal cards) */
.pd-feature-grid>[class*="col"] {
    display: flex;
}

.pd-feature-grid>[class*="col"]>.pd-feature {
    width: 100%;
}

.pd-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    border-radius: 20px;
    border: 0;
    background: rgba(240, 240, 240, 0.3);
    box-shadow: -27px 66px 29px 0 rgba(145, 145, 145, 0.01), -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    overflow: hidden;
    border: 1px solid #cecece;
    transition: transform 0.3s ease;
}

.pd-feature:hover {
    transform: scale(1.02);
    box-shadow:
        8px 10px 5px -6px rgba(0, 0, 0, 0.1);
}

/*.pd-feature::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    padding: 1px;*/
/*    border-radius: inherit;*/
/*    background: conic-gradient(*/
/*        from -92deg,*/
/*        rgba(64, 64, 64, 0.5) 3%,*/
/*        rgba(64, 64, 64, 0.35) 9%,*/
/*        rgba(255, 255, 255, 0.5) 17%,*/
/*        rgba(255, 255, 255, 0.5) 30%,*/
/*        rgba(64, 64, 64, 0.35) 52%,*/
/*        rgba(249, 249, 249, 0.8) 58%,*/
/*        rgba(255, 255, 255, 0.5) 80%,*/
/*        rgba(249, 249, 249, 0.5) 91%*/
/*    );*/
/*    -webkit-mask:*/
/*        linear-gradient(#fff 0 0) content-box,*/
/*        linear-gradient(#fff 0 0);*/
/*    -webkit-mask-composite: xor;*/
/*    mask-composite: exclude;*/
/*    pointer-events: none;*/
/*}*/

.pd-feature-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-feature-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-feature-title {
    font-weight: 700;
    color: #000;
}

.pd-feature-desc {
    color: #777777;
    font-size: var(--fs-p14);
}

/* Image showcase — stacked typed rows (highlight / video+text / image+text) */
.pd-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-sc-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #e9ebef;
}

.pd-sc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Type 1: full-width image with overlay text */
.pd-sc-highlight {
    /*min-height: 350px;*/
    /*max-height: 450px;*/
    width: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #1f2128;
}

.pd-sc-highlight-bg {
    display: block;
    position: relative;
    inset: 0;
}

.pd-sc-highlight-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.pd-sc-highlight-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-sc-highlight-text {
    position: relative;
    z-index: 1;
    width: min(520px, 55%);
    min-height: 460px;
    padding: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Types 2 & 3: split text card + media */
.pd-sc-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    min-height: 350px;
    align-items: stretch;
    max-height: 450px;
}


.pd-sc-textcard {
    background: linear-gradient(210deg, #2f6fd0 0%, #183C7F 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pd-sc-text {
    color: #fff;
    margin: 0;
}

.pd-sc-text p:last-child {
    margin-bottom: 0;
}

.pd-sc-media {
    border-radius: 20px;
    overflow: hidden;
    min-height: 240px;
}

.pd-sc-media .pd-sc-img,
.pd-sc-media .pd-video {
    height: 100%;
    margin: 0;
    border-radius: 20px;
}

.pd-sc-media .pd-sc-img img {
    aspect-ratio: 5 / 3;
}

@media (max-width: 767.98px) {

    .pd-sc-split {
        grid-template-columns: 1fr;
    }

    .pd-sc-highlight {
        min-height: unset;
    }

    .pd-sc-highlight-text {
        width: 100%;
        min-height: 360px;
        padding: 30px;
    }


    .pd-sc-split {
        gap: 0;
    }

    .pd-sc-media,
    .pd-sc-media .pd-sc-img,
    .pd-sc-media .pd-video {
        border-radius: 0 0 20px 20px;
        min-height: unset;
    }

    .pd-sc-textcard {
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 575.98px) {
    .pd-sc-highlight-bg {
        position: relative;
    }

    .pd-sc-highlight-bg img {
        object-fit: contain;
    }

    .pd-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 10px;
        gap: 10px;
    }

    .addtocart_button .add,
    .addtocart_button .buy {
        padding: 0;
    }

    .pd-intro--has-video .pd-intro-text {
        text-align: center;
    }

    .pd-feature:before {
        background: conic-gradient(from -53deg,
                rgba(64, 64, 64, 0.5) 3%,
                rgba(64, 64, 64, 0.35) 8%,
                rgba(255, 255, 255, 0.5) 17%,
                rgba(255, 255, 255, 0.5) 30%,
                rgba(64, 64, 64, 0.35) 52%,
                rgba(249, 249, 249, 0.8) 58%,
                rgba(255, 255, 255, 0.5) 80%,
                rgba(249, 249, 249, 0.5) 91%);
    }

    .pd-section {
        padding: 30px 0;
    }


    /* mobile-specific section background image (falls back to the desktop one) */
    .pd-section.pd-section--bgm {
        background-image: var(--pd-bg-m, var(--pd-bg-d, none));
    }

}

/* Parameter table */
.pd-paramtable {
    margin: 0 auto;
    border-radius: 16px;

}

.pd-paramtable table {
    width: 100%;
    border: 1px solid #CECECE;
    border-radius: 16px;
    border-collapse: collapse;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.pd-paramtable thead th {
    background: #183C7F;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    padding: 15px;
    border: 1px solid #183C7F;
}

.pd-paramtable tbody th,
.pd-paramtable tbody td {
    padding: 15px 20px;
    border-bottom: 1px solid #e3e6ea;
    color: #000;
    vertical-align: top;
    text-align: center;
}

.pd-paramtable tbody tr:last-child th,
.pd-paramtable tbody tr:last-child td {
    border-bottom: 0;
}

.pd-paramtable tbody th {
    width: 50%;
    font-weight: 500;
    border-right: 1px solid #CECECE;
}

/* Step list (image cards with overlay caption) */
.pd-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pd-step-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #000;
}

.pd-step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-step-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.95) 100%);
}

.pd-step-no {
    align-self: flex-start;
    background: var(--color-primary-dark);
    color: #fff;
    font-weight: 700;
    padding: 0 10px;
    border-radius: 16px;
}

.pd-step-title {
    color: #ffffff;
    font-size: var(--fs-f16);
    margin: 0;
}

.pd-step-desc {
    color: #fff;
    font-size: var(--fs-p14);
    margin: 0;
    min-height: 42px;
}

@media (max-width: 767.98px) {
    .pd-intro--has-video {
        grid-template-columns: 1fr;
    }
}

/* Related products */
.pd-related {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.pd-related-head {
    text-align: center;
    margin-bottom: 30px;
}

.pd-related-heading {
    margin: 0;
    color: #000000;
}

.pd-related-heading span {
    color: var(--color-primary);
}

/* card is a flex column so the button can sit at the bottom regardless of title length */



/* equal-height cards in the owl carousel so the Shop Now buttons align */
#pd-related-carousel .owl-stage {
    display: flex;
    align-items: stretch;
    gap: 0;
}

#pd-related-carousel .owl-item {
    display: flex;
}


@media (max-width: 575.98px) {
    .pd-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .addtocart_button .btn {
        flex: 1 1 100%;
        padding: 10px;
    }

    .pd-related-head {
        margin-bottom: 28px;
    }


    .pd-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-step-overlay {
        padding: 10px;
        gap: 10px;
    }

    #pd-related-carousel.owl-carousel .owl-stage-outer {
        overflow: visible;
    }
}

/* Event listing and detail */


.event-listing-hero {
    min-height: 330px;
}

.event-listing-hero .bread_image::after {
    background: rgba(0, 0, 0, 0.35);
}

.event-listing-section {
    padding: 70px 0 80px;
}


/* Related events is an owl carousel, not a Bootstrap row - spacing comes from owl's
   margin option. Same equal-height idiom as #pd-related-carousel above, so the
   "Learn more" links line up across cards. */
.event-related-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.event-related-carousel .owl-item {
    display: flex;
}

.event-related__item {
    display: flex;
    width: 100%;
}

/* Arrows from lg up, dots below it.
   Seated on the carousel's edges rather than outside it: the container gutter is only
   15px at 1200px wide, so a 40px button placed fully outside would clip off-screen. */
.event-related-carousel.owl-carousel {
    position: relative;
}

.event-related-carousel .owl-nav button.owl-prev,
.event-related-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    transition: background-color .2s ease;
}

.event-related-carousel .owl-nav button.owl-prev {
    left: 0;
}

.event-related-carousel .owl-nav button.owl-next {
    right: 0;
}

.event-related-carousel .owl-nav button svg {
    display: block;
}

.event-related-carousel .owl-nav button svg path {
    stroke: #fff;
    transition: stroke .2s ease;
}

/* hover: gold outline on the page background, gold chevron */
.event-related-carousel .owl-nav button.owl-prev:hover,
.event-related-carousel .owl-nav button.owl-next:hover {
    background-color: transparent;
}

.event-related-carousel .owl-nav button.owl-prev:hover svg path,
.event-related-carousel .owl-nav button.owl-next:hover svg path {
    stroke: var(--color-primary);
}

@media (max-width: 991.98px) {
    .event-related-carousel .owl-nav {
        display: none;
    }

    /* the global .owl-dots rule hides dots above 575.9px and only styles them below it,
       so this carousel restyles its own for the 576-991 range as well */
    .event-related-carousel .owl-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }

    .event-related-carousel .owl-dots .owl-dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: #cecece;
        transition: background-color .3s ease;
    }

    .event-related-carousel .owl-dots .owl-dot.active {
        background-color: var(--color-primary);
    }
}

.event-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
    color: #000;
}

.event-card-clickable {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.event-card-clickable:hover,
.event-card-clickable:focus {
    color: inherit;
    text-decoration: none;
}

.event-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #e9e9e9;
}

.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-card:hover .event-card__image img {
    transform: scale(1.05);
}

.event-card__content {
    display: flex;
    flex: 1;
    gap: 10px;
    padding: 20px 15px;
}

.event-card__date {
    padding: 10px;
    display: flex;
    flex: 0 0 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: #D9D9D9;
    color: #000;
    text-align: center;
}

.event-card__date strong {
    font-weight: 500;
}

.event-card__date span {
    font-weight: 400;
}

.event-card__date strong,
.event-card__date span {
    display: block;
}

.event-card__summary {
    min-width: 0;
}

.event-card__summary h2,
.event-card__featured-content h2 {
    margin: 0 0 5px;
    font-weight: 400;
    font-family: var(--font-body);
}

.event-card__summary h2 a,
.event-card__featured-content h2 a {
    color: inherit;
    text-decoration: none;
}

.event-card__location,
.event-card__meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #00000080;
}

.event-card__location svg,
.event-card__meta svg {
    flex: 0 0 auto;
    text-align: center;
}

.event-card__link {
    display: block;
    padding: 15px;
    border-top: 1px solid #d8d8d8;
    color: #000;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.event-card__link:hover {
    color: var(--color-primary);
}

.event-card--featured {
    position: relative;
    min-height: 100%;
}

.event-card--featured .event-card__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.event-card--featured .event-card__image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 70%);
    content: "";
}

.event-card__featured-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 380px;
    padding: 45px 150px 40px 40px;
    color: #fff;
}

.event-card__featured-content .event-card__meta {
    margin-top: 10px;
    color: #fff;
}

.event-card__featured-button {
    position: absolute;
    right: 25px;
    bottom: 25px;
    min-width: 120px;
    text-align: center;
}

.event-empty {
    padding: 80px 20px;
    background: #f5f5f5;
}

.event-empty h2 {
    margin-bottom: 10px;
}

.event-empty p {
    margin: 0;
}

.event-detail-hero {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.event-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-detail-intro .container-fluid {
    display: flex;
    justify-content: center;
}

.event-detail-info-card {
    position: relative;
    z-index: 2;
    width: min(100%, 800px);
    margin-top: calc(-80px + -75px);
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.15);
}

.event-detail-info-card h1 {
    margin: 0 0 25px;
    font-weight: 500;
}

.event-detail-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.event-detail-info-row svg {
    flex: 0 0 auto;
    text-align: center;
}

.event-detail-share {
    margin-top: 40px;
}

.event-detail-share p {
    margin: 0 0 10px;
    color: #A4A4A4;
}

.share-icon-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.share-icon-links a,
.share-icon-links button {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-icon-links svg {
    display: block;
    width: 24px;
    height: 24px;
}

.share-icon-links a:hover,
.share-icon-links button:hover {
    opacity: 0.75;
    transform: translateY(-3px);
}

.event-detail-copy-status {
    color: #777;
}

.event-detail-content {}

.event-detail-content__row,
.event-detail-gallery {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.event-detail-copy p,
.event-detail-copy ul,
.event-detail-copy ol {
    margin-bottom: 20px;
}

.event-detail-copy h2,
.event-detail-copy h3,
.event-detail-copy h4 {
    margin: 30px 0 15px;
}

.event-detail-copy img {
    max-width: 100%;
    height: auto;
}

.event-detail-feature-image {
    display: block;
    height: 100%;
    min-height: 350px;
    overflow: hidden;
}

.event-detail-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-detail-gallery {
    margin-top: 30px;
}

.event-detail-gallery a {
    display: block;
    height: 300px;
    overflow: hidden;
}

.event-detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-related {}

.event-related__title {
    margin: 0 0 30px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .event-listing-section {
        padding: 50px 0 60px;
    }

    .event-card--featured {
        min-height: 430px;
    }

    .event-detail-content {
        padding: 50px 0;
    }

    .event-detail-feature-image {
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .event-listing-hero {
        min-height: 280px;
    }

    .event-card__featured-content {
        min-height: 400px;
        padding: 25px;
    }

    .event-card__featured-button {
        position: static;
        align-self: flex-start;
        margin-top: 20px;
    }

    .event-detail-hero {
        height: 320px;
    }

    .event-detail-info-card {
        /* Sit the card over the bottom of the cover, as it does on desktop (~25% of the card).
           The old -50px only netted a 10px overlap, so the card read as sitting below the image.
           The margin has to beat .event-detail-intro's top padding, which is 80px here and
           40px below 576px - hence the second value in the next breakpoint. */
        margin-top: -145px;
        padding: 30px;
    }

    .event-detail-content {
        padding: 45px 0;
    }

    .event-related {
        padding: 10px 0 60px;
    }
}

@media (max-width: 575.98px) {
    .event-listing-section {
        padding: 40px 0 50px;
    }

    /* The cards sit 2-up here, so a 156px card lost 90px of that to padding + the 50px date
       badge + the gap, leaving 66px for the title and location - both wrapped to 4 lines.
       Stacking the badge above the text gives the copy the full card width instead. */
    .event-card__content {
        flex-direction: column;
        gap: 8px;
        padding: 15px 12px;
    }

    .event-card__location,
    .event-card__meta {
        gap: 6px;
    }

    /* There is a global `section { overflow: hidden }` below 476.9px. It clipped the card's
       negative-margin overlap to the section box, so the part sitting over the cover - the
       title - was cut off and the card looked like it started at the date row. */
    .event-detail-intro {
        overflow: visible;
    }

    .event-detail-info-card {
        /* .event-detail-intro drops to 40px of top padding here, so the margin drops to match
           and keep the same ~25% overlap over the cover. */
        margin-top: -105px;
        padding: 25px 20px;
    }

    .share-icon-links {
        gap: 15px;
    }

    .event-detail-feature-image {
        min-height: 300px;
    }

    .event-related__title {
        margin-bottom: 25px;
    }
}

/* Blog listing and detail */

.blog-listing-hero {
    min-height: 330px;
}

.blog-listing-hero .bread_image::after {
    background: rgba(0, 0, 0, 0.4);
}

.blog-listing-section {
    padding: 70px 0 80px;
}

.blog-listing-row,
.blog-related__row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 40px;
}

.blog-card-clickable {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-card-clickable:hover,
.blog-card-clickable:focus {
    color: inherit;
    text-decoration: none;
}

.blog-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #eeeeee;
}

.blog-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.04);
}

.blog-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
}

.blog-card__content time {
    margin-bottom: 10px;
    color: #686868;
    font-size: var(--fs-p14);
}

.blog-card__content h2,
.blog-card__content h3 {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-weight: 500;
}

.blog-card__content p {
    display: -webkit-box;
    margin: 0 0 40px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-weight: 300;
}

.blog-card__read-more {
    margin-top: auto;
    font-weight: 500;
    text-decoration: underline;
}

.blog-card__read-more:hover {
    color: var(--color-primary);
}

.blog-card--featured {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    color: #ffffff;
}

.blog-card--featured .blog-card__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.blog-card--featured .blog-card__image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 65%);
    content: "";
}

.blog-card__featured-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 570px;
    padding: 40px;
}

.blog-card__featured-content h2 {
    margin: 0 0 10px;
    color: #ffffff;
}

.blog-card__featured-content time {
    color: #ffffff;
}

.blog-empty {
    padding: 80px 20px;
    background: #f5f5f5;
}

.blog-empty h2 {
    margin-bottom: 10px;
}

.blog-empty p {
    margin: 0;
}

.blog-article {
    max-width: 1100px;
    margin-inline: auto;
}

.blog-article .container {
    max-width: 900px;
}


.blog-article__header {
    margin-bottom: 30px;
}

.blog-article__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
    color: #000;
}

.blog-article__meta span,
.blog-article__meta time {
    font-weight: 300;
}



.blog-article__meta-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
}

.blog-article__header h1 {
    margin: 0;
}

.blog-article__cover {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eeeeee;
}

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

.blog-article__body {
    margin-top: 30px;
}

.blog-article__body p,
.blog-article__body ul,
.blog-article__body ol {
    margin-bottom: 20px;
}

.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
    margin: 35px 0 15px;
}

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

.blog-article__gallery {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
    margin-top: 30px;
}

.blog-article__gallery a {
    display: block;
    height: 350px;
    overflow: hidden;
}

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

.blog-article__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #dddddd;
}

.blog-article__tags,
.blog-article__share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-article__tags span,
.blog-article__share span {
    color: #686868;
}

.blog-detail-copy-status {
    color: #777777;
}

.blog-article__back a {
    font-weight: 500;
}

.blog-related__title {
    margin: 0 0 30px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .blog-listing-section {
        padding: 50px 0 60px;
    }

    .blog-card--featured,
    .blog-card__featured-content {
        min-height: 480px;
    }
}

@media (max-width: 767.98px) {
    .blog-listing-hero {
        min-height: 280px;
    }

    .blog-listing-row,
    .blog-related__row {
        --bs-gutter-y: 35px;
    }

    .blog-card--featured,
    .blog-card__featured-content {
        min-height: 420px;
    }

    .blog-card__featured-content {
        padding: 25px;
    }

    .blog-article {
        padding-top: 30px;
    }

    .blog-article__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-related {
        padding: 20px 0 60px;
    }
}

@media (max-width: 575.98px) {
    .blog-listing-section {
        padding: 40px 0 50px;
    }

    .blog-card--featured,
    .blog-card__featured-content {
        min-height: 380px;
    }

    .blog-card__content p {
        margin-bottom: 20px;
    }

    .blog-article__meta {
        flex-wrap: wrap;
        gap: 15px;
    }

    .blog-article__gallery a {
        height: 300px;
    }


    .blog-article__share {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Store locations */
.store-location-hero {
    min-height: 330px;
}

.store-location-hero .bread_image::after {
    background: rgba(0, 0, 0, 0.45);
}

.store-location-finder {
    padding: 70px 0;
}

.store-location-finder__row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 30px;
    align-items: stretch;
}

.store-location-list {
    height: 650px;
    padding-right: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    scrollbar-width: none;
}

.store-location-list::-webkit-scrollbar {
    display: none;
}

.store-location-card {
    display: flex;
    gap: 15px;
    padding: 25px 15px;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.store-location-card:last-child {
    border-bottom: 0;
}


.store-location-card__marker {
    flex: 0 0 25px;
    padding-top: 5px;
}

.store-location-card__marker svg {
    display: block;
    width: 20px;
    height: 25px;
}

.store-location-card__content {
    flex: 1;
    min-width: 0;
}

.store-location-card__image {
    display: block;
    width: 100%;
    height: 140px;
    margin-bottom: 15px;
    object-fit: cover;
    background: #eeeeee;
}

.store-location-card__content h2 {
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.store-location-card__content>p {
    margin: 0;
    font-size: var(--fs-p14);
    font-weight: 300;
}

.store-location-card__directions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.store-location-card__directions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
}

.store-location-card__directions svg,
.store-location-card__directions img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.store-location-card__hours {
    margin-top: 15px;
}

.store-location-card__hours strong {
    display: block;
    margin-bottom: 0;
    font-weight: 400;
    font-size: var(--fs-p14);
}

.store-location-card__hours p {
    margin: 0;
    font-weight: 300;
    font-size: var(--fs-p14);
}

.store-location-card__phone {
    margin-top: 10px !important;
}

.store-location-map {
    position: sticky;
    top: 20px;
    height: 650px;
    overflow: hidden;
    background: #eeeeee;
}

.store-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.store-location-empty {
    padding: 80px 20px;
    background: #f5f5f5;
}

.store-location-banners {
    padding: 0 0 80px;
}

.store-location-banner+.store-location-banner {
    margin-top:80px;
}

.store-location-banner,
.store-location-banner a {
    display: block;
    width: 100%;
}

.store-location-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   Page: Customer Testimonials
   ============================================ */
.testimonial-listing-hero .bread_image::after {
    background: rgba(0, 0, 0, 0.45);
}

.testimonial-listing-section {
    padding: 70px 0 60px;
}

.testimonial-listing-row {
    --bs-gutter-x: 25px;
}

.testimonial-listing-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.testimonial-listing-card.about-story-testimonial-card {
    min-height: 0;
}

.testimonial-listing-card.about-story-testimonial-card>p {
    flex: 0 1 auto;
    margin-bottom: 20px;
}

.testimonial-listing-empty {
    padding: 80px 20px;
    background: var(--color-tertiary-mid);
}

.testimonial-listing-empty h2 {
    margin-bottom: 10px;
}

.testimonial-listing-empty p {
    margin: 0;
}

@media (max-width: 767.98px) {
    .testimonial-listing-section {
        padding: 50px 0;
    }

    .testimonial-listing-row {
        --bs-gutter-y: 25px;
    }
}

@media (max-width: 991.98px) {
    .store-location-finder {
        padding: 50px 0 60px;
    }

    .store-location-list {
        height: 550px;
    }

    .store-location-card__image {
        height: 220px;
    }

    .store-location-map {
        position: static;
        height: 500px;
    }

    .store-location-banners {
        padding-bottom: 60px;
    }
}

@media (max-width: 767.98px) {
    .store-location-hero {
        min-height: 280px;
    }

    .store-location-card__image {
        height: 190px;
    }

    .store-location-map {
        height: 450px;
    }

    .store-location-banner+.store-location-banner {
        margin-top: 30px;
    }
}

@media (max-width: 575.98px) {
    .store-location-finder {
        padding: 40px 0 50px;
    }

    .store-location-list {
        height: 500px;
    }

    .store-location-card {
        padding: 20px 10px;
    }

    .store-location-card__image {
        height: 160px;
    }

    .store-location-map {
        height: 400px;
    }

    .store-location-banners {
        padding-bottom: 50px;
    }
}

/*  ------------------------ Member Order Detail ------------------- */
/* Progress bar step dates and the courier's own latest status, both sitting
   under the numbered steps in member_order_detail_view. */
.orderStepDate {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-t12);
    color: #868686;
}

.orderStepCourier {
    margin-bottom: 24px;
    text-align: center;
    font-weight: 500;
}

/* Courier event history. Rendered newest-first exactly as EasyParcel returns it,
   so the vertical rule marks the first item as the current position. */
.orderTrackingList {
    margin: 0 0 10px 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 1px solid var(--color-tertiary);
}

.orderTrackingList li {
    position: relative;
    padding: 0 0 16px 0;
}

.orderTrackingList li:last-child {
    padding-bottom: 0;
}

.orderTrackingList li:before {
    content: "";
    position: absolute;
    top: 6px;
    left: -23px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-tertiary-mid);
}

/* the newest event is where the parcel is now */
.orderTrackingList li:first-child:before {
    background: var(--color-primary);
}

.orderTrackingDate {
    display: block;
    font-size: var(--fs-t12);
    color: #868686;
}

.orderTrackingStatus {
    display: block;
    font-weight: 500;
}

.orderTrackingLoc {
    display: block;
    font-size: var(--fs-p14);
    color: #868686;
}

/* the tracking card sits directly above the three info columns, which have no
   top margin of their own */
.clientOrderDetail .orderTrackingList {
    margin-bottom: 24px;
}

/* .well carries no styling in this Bootstrap version, so the order detail blocks
   rendered as bare stacked text. .orderCard is scoped to that view rather than
   restyling .well, which is used elsewhere. */
.orderCard {
    padding: 24px;
    background: var(--color-tertiary-light);
    border: 1px solid var(--color-tertiary);
    border-radius: 8px;
}

.orderCard .control-group+.control-group {
    margin-top: 18px;
}

/* label above value: small and muted so the value is what the eye lands on */
.orderCard .control-group strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-body);
    font-size: var(--fs-t12);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #868686;
}

.orderCard .control-group br:first-of-type {
    display: none;
}

/* the tracking card spans the full width above the columns. the gap goes on the
   inner card because the wrapper carries .nobottommargin, which is !important */
.orderTrackingCard .orderCard {
    margin-bottom: 24px;
}

/* .row already stretches its columns to equal height; this makes the card fill
   that height so the three line up. scoped to the row so it cannot affect the
   full-width tracking card, whose parent has no definite height. */
.orderInfoRow .orderCard {
    height: 100%;
}

/* keeps a gap when the columns wrap on narrow screens */
.orderInfoRow {
    row-gap: 24px;
}

.orderTrackingCard .control-group strong {
    font-size: var(--fs-p16);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}


/* Category strip on phones: the 150px avatar only fits two per screen at 375px,
   which reads as a broken row rather than a scrollable one. Shrinking it shows
   three plus a sliver of the fourth, which is what tells people it slides. */
@media (max-width: 767.9px) {
    .hp-cat-strip__row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 12px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .hp-cat-strip__row .hp-cat-strip__item {
        width: auto;
        gap: 10px;
    }

    .hp-cat-strip__avatar {
        width: 100%;
        max-width: 100px;
        height: auto;
        aspect-ratio: 1;
        margin-inline: auto;
    }

    .hp-cat-strip__label {
        font-size: var(--fs-p14);
    }
}
@media (min-width: 768px) and (max-width: 1199.9px) {
    .hp-cat-strip__row {
        gap: clamp(20px, 3vw, 40px);
    }

    .hp-cat-strip__row .hp-cat-strip__item {
        width: clamp(96px, 10vw, 130px);
    }

    .hp-cat-strip__avatar {
        width: clamp(88px, 9.2vw, 120px);
        height: clamp(88px, 9.2vw, 120px);
    }
}

/* Discounted shipping fee: the original struck through, the payable one plain.
   Grey so the eye lands on the price actually being charged. */
.thisShip del,
.subtotal .textRight del {
    margin-right: 4px;
    color: #868686;
    font-weight: 400;
}

/* Member price marker. Appears next to the price wherever a logged-in customer
   is seeing product_member_price instead of the normal one, so the lower number
   reads as a membership benefit rather than an unexplained discount. Outlined
   rather than filled: a solid gold badge shouts as loud as the price itself and
   reads like a clearance sticker, which is the wrong note for the brand. */
.member-price-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    font-size: var(--fs-t12);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The detail page's price row is a baseline-aligned flex line with its own gap,
   so the chip needs neither the margin nor the baseline it would otherwise sit on. */
.pd-price .member-price-tag {
    align-self: center;
    margin-left: 0;
}

/* Listing and carousel cards are only ~240px wide and get narrower on mobile,
   where the full-size chip pushes itself onto a second line and drags the colour
   dots down with it. Tightened here so it sits beside the price for as long as
   there is room, and reads as a deliberate second line once there is not. */
.hp-new-arrivals__price .member-price-tag {
    margin-left: 6px;
    padding: 2px 8px 1px;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* ── Product detail: the gallery follows the buy box down ────────────────── */
@media (min-width: 992px) {
    #content.pd-main,
    .product-detail-content {
        overflow: clip;
    }

    .pd-gallery {
        position: sticky;
        top: calc(var(--header-h) + 20px);
    }
}
.mfp-image-holder .mfp-content{
    max-width: 50%;
}