/*
Theme Name: THE HATIM STORE
Theme URI: https://thehatimstore.com
Author: Hatim Tech
Description: Premium Custom WooCommerce Theme
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: hatim-tech
*/

/* ================================================================
   THE HATIM STORE — COMPLETE HEADER CSS
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
================================================================ */



/* ================================================================
   THE HATIM STORE — COMPLETE HEADER CSS
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
   Design: Premium Black / White / Grey
   Typography: Cormorant Garamond + Montserrat

   Compatible with the supplied header.php.
   Replace the OLD HEADER CSS completely.
================================================================ */

/* ================================================================
   01. DESIGN VARIABLES & TYPOGRAPHY
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --ths-black: #111111;
    --ths-deep-black: #080808;
    --ths-white: #ffffff;
    --ths-grey: #777777;
    --ths-border: #dedede;

    --ths-display-font: 'Cormorant Garamond', Georgia, serif;
    --ths-nav-font: 'Montserrat', Arial, sans-serif;

    --ths-header-max: 1500px;
    --ths-header-space: clamp(18px, 4vw, 65px);

    --ths-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ths-transition: 300ms var(--ths-ease);
}

body,
button,
input,
select,
textarea {
    font-family: var(--ths-nav-font);
}

.ht-lux-header *,
.ht-lux-navigation-shell *,
.ht-lux-ticker * {
    box-sizing: border-box;
}

.ht-lux-header a,
.ht-lux-navigation-shell a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   THE HATIM STORE — ORIGINAL PREMIUM MOVING TICKER
   Continuous Infinite Horizontal Animation
================================================================ */

.ht-lux-ticker {
    position: relative;
    z-index: 1002;
    display: block;
    width: 100%;
    height: 34px;
    overflow: hidden;
    background: #080808;
    color: #ffffff;
    border-bottom: 1px solid #292929;
}

.ht-lux-ticker__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    height: 100%;
    animation: ths-luxury-ticker 12s linear infinite !important;
    will-change: transform;
}

.ht-lux-ticker__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    gap: clamp(24px, 3.5vw, 52px);
    width: max-content;
    min-width: max-content;
    height: 100%;
    padding: 0 26px;
    white-space: nowrap;
}

.ht-lux-ticker__group span {
    display: inline-block;
    flex: 0 0 auto;
    color: #f2f2f2;
    font-family: var(--ths-nav-font, Montserrat, Arial, sans-serif);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.ht-lux-ticker__group .ht-lux-ticker__separator {
    color: #858585;
    font-size: 9px;
}

@keyframes ths-luxury-ticker {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@media (max-width: 600px) {

    .ht-lux-ticker {
        height: 30px;
    }

    .ht-lux-ticker__track {
        animation-duration: 12s !important;
    }

    .ht-lux-ticker__group {
        gap: 20px;
        padding: 0 18px;
    }

    .ht-lux-ticker__group span {
        font-size: 8px;
        letter-spacing: 1.3px;
    }
}


/* ================================================================
   03. MAIN HEADER — LOGO CENTER / CTA RIGHT
================================================================ */

.ht-lux-header {
    position: relative;
    z-index: 1001;
    width: 100%;
    background: var(--ths-white);
    border-bottom: 1px solid #ededed;
    color: var(--ths-black);
}

.ht-lux-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: var(--ths-header-max);
    min-height: 125px;
    margin: 0 auto;
    padding: 20px var(--ths-header-space);
}

/* WordPress logo — actual PHP wrapper */

.ht-lux-header__logo-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.ht-lux-header__logo-row .custom-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 220px;
    margin: 0;
    padding: 0;
}

.ht-lux-header__logo-row .custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 190px;
    max-height: 90px;
    object-fit: contain;
}

.ht-lux-header__logo-fallback {
    display: block;
    color: var(--ths-black);
    font-family: var(--ths-display-font);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

/* Website CTA — right column */

.ht-lux-header__actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.ht-lux-get-website-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid var(--ths-black);
    border-radius: 0;
    background: var(--ths-black);
    color: var(--ths-white);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--ths-transition), color var(--ths-transition);
}

.ht-lux-get-website-button:hover,
.ht-lux-get-website-button:focus-visible {
    background: var(--ths-white);
    color: var(--ths-black);
}

.ht-lux-cta-arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform var(--ths-transition);
}

.ht-lux-get-website-button:hover .ht-lux-cta-arrow {
    transform: translateX(4px);
}


/* ================================================================
   04. SEARCH PANEL
================================================================ */

.ht-lux-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1010;
    width: 100%;
    padding: 24px var(--ths-header-space);
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid var(--ths-border);
    background: var(--ths-white);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
    animation: ths-search-reveal 250ms ease both;
}

.ht-lux-search-panel[hidden] {
    display: none !important;
}

.ht-lux-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    border-bottom: 1px solid #888888;
}

.ht-lux-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px 5px;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--ths-black);
    font-size: 12px;
}

.ht-lux-search input[type="search"]:focus {
    border: 0;
    outline: none;
    box-shadow: none;
}

.ht-lux-search button {
    min-width: 110px;
    padding: 10px 18px;
    border: 1px solid var(--ths-black);
    border-radius: 0;
    background: var(--ths-black);
    color: var(--ths-white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    cursor: pointer;
    transition: background var(--ths-transition), color var(--ths-transition);
}

.ht-lux-search button:hover {
    background: var(--ths-white);
    color: var(--ths-black);
}

@keyframes ths-search-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   05. SECOND ROW — DESKTOP NAVIGATION
================================================================ */

.ht-lux-navigation-shell {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid var(--ths-border);
    background: rgba(255, 255, 255, 0.97);
}

.ht-lux-navigation {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: var(--ths-header-max);
    min-height: 62px;
    margin: 0 auto;
    padding: 0 var(--ths-header-space);
}

/* Search — left */

.ht-lux-navigation__search {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Navigation links — center */

.ht-lux-navigation__menu-wrap {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.ht-lux-navigation__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-lux-navigation__menu > li {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-lux-navigation__menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 17px;
    color: #242424;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--ths-transition);
}

/* Underline */

.ht-lux-navigation__menu > li:not(.menu-item-home) > a::after {
    position: absolute;
    right: 17px;
    bottom: 13px;
    left: 17px;
    height: 1px;
    background: var(--ths-black);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1200ms var(--ths-ease);
}

.ht-lux-navigation__menu > li:not(.menu-item-home) > a:hover::after,
.ht-lux-navigation__menu > li.current-menu-item:not(.menu-item-home) > a::after,
.ht-lux-navigation__menu > li.current_page_item:not(.menu-item-home) > a::after {
    transform: scaleX(1);
}

/* ================================================================
   HOME BUTTON — ELEGANT PREMIUM HOVER
================================================================ */

.ht-lux-navigation__menu > li.menu-item-home > a {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 38px;
    padding: 0 20px;

    border: 1px solid var(--ths-black);
    background: var(--ths-black);
    color: var(--ths-white);

    transform: translateY(0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease;
}

/* Sliding light reflection */
/* BRIGHT PREMIUM SHINE */

.ht-lux-navigation__menu > li.menu-item-home > a::before {
    content: "";
    position: absolute;
  
    left: -65%;
    z-index: -1;

 width: 18%;
height: 100%;
top: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, .08) 20%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, .08) 80%,
        transparent 100%
    );

    transform: skewX(-20deg);
    transition: left .85s cubic-bezier(.22, 1, .36, 1);
}

.ht-lux-navigation__menu > li.menu-item-home > a:hover::before {
    left: 125%;
}

/* Click */

.ht-lux-navigation__menu > li.menu-item-home > a:active {
    transform: translateY(-1px);
    box-shadow: none;
}

/* Right-side icons */

.ht-lux-navigation__actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

/* Desktop hamburger is hidden */

.ht-lux-mobile-toggle {
    display: none;
}

/* Icon buttons */

.ht-lux-icon-button {
    position: relative;
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--ths-black);
    cursor: pointer;

    transition:
        background-color .55s cubic-bezier(.22, 1, .36, 1),
        color .45s cubic-bezier(.22, 1, .36, 1),
        border-color .45s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Smooth icon movement */

.ht-lux-icon-button svg {
    display: block;
    width: 21px;
    height: 21px;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.ht-lux-icon-button:hover,
.ht-lux-icon-button:focus-visible {
    border-color: var(--ths-black);
    background: var(--ths-black);
    color: var(--ths-white);
}

.ht-lux-icon-button:hover svg {
    transform: scale(1.08);
}
.ht-lux-icon-button svg {
    display: block;
    width: 21px;
    height: 21px;
}

.ht-lux-icon-button:hover,
.ht-lux-icon-button:focus-visible {
    border-color: var(--ths-black);
    background: var(--ths-black);
    color: var(--ths-white);
}

.ht-lux-icon-label {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    z-index: 100;
    width: max-content;
    padding: 7px 10px;
    border: 1px solid #292929;
    background: var(--ths-black);
    color: var(--ths-white);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity var(--ths-transition), transform var(--ths-transition), visibility var(--ths-transition);
}

.ht-lux-icon-button:hover .ht-lux-icon-label,
.ht-lux-icon-button:focus-visible .ht-lux-icon-label {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Cart count */

.ht-lux-cart-link {
    overflow: visible !important;
}

.ht-lux-cart-count {
    position: absolute;
    top: 1px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1px solid var(--ths-white);
    border-radius: 50%;
    background: var(--ths-black);
    color: var(--ths-white);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}


/* ================================================================
   06. TABLET
================================================================ */

@media (max-width: 1100px) and (min-width: 768px) {

    .ht-lux-header__inner {
        min-height: 105px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .ht-lux-header__logo-row .custom-logo {
        max-width: 155px;
        max-height: 72px;
    }

    .ht-lux-navigation {
        padding-right: 20px;
        padding-left: 20px;
    }

    .ht-lux-navigation__menu {
        gap: 0;
    }

    .ht-lux-navigation__menu > li > a {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    .ht-lux-navigation__actions {
        gap: 2px;
    }

    .ht-lux-icon-button {
        flex-basis: 36px;
        width: 36px;
        height: 38px;
    }

    .ht-lux-icon-button svg {
        width: 19px;
        height: 19px;
    }
}


/* ================================================================
   07. MOBILE HEADER — CENTER LOGO / RIGHT CTA
================================================================ */

@media (max-width: 767px) {

    .ht-lux-ticker {
        height: 30px;
    }

    .ht-lux-ticker__group {
        gap: 20px;
        padding: 0 18px;
    }

    .ht-lux-ticker__group span {
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .ht-lux-header__inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 82px;
        gap: 5px;
        padding: 10px 12px;
    }

    .ht-lux-header__logo-row {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
    }

    .ht-lux-header__logo-row .custom-logo-link {
        max-width: 150px;
    }

    .ht-lux-header__logo-row .custom-logo {
        max-width: 145px;
        max-height: 57px;
    }

    .ht-lux-header__logo-fallback {
        font-size: 19px;
        letter-spacing: 0.8px;
    }

    .ht-lux-header__actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
    }

    .ht-lux-get-website-button {
        gap: 4px;
        min-height: 34px;
        padding: 0 8px;
        font-size: 7px;
        letter-spacing: 0.25px;
    }

    .ht-lux-cta-arrow {
        font-size: 12px;
    }

    /* Mobile navigation row */

    .ht-lux-navigation-shell {
        position: sticky;
        top: 0;
        z-index: 9999;
    }

    .ht-lux-navigation {
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 54px;
        padding: 0 10px;
    }

    .ht-lux-navigation__search {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
    }

    .ht-lux-search-toggle {
        display: inline-flex;
    }

    .ht-lux-mobile-toggle {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        gap: 7px;
        min-width: 48px;
        min-height: 42px;
        padding: 6px;
        border: 0;
        background: transparent;
        color: var(--ths-black);
        cursor: pointer;
    }

    .ht-lux-mobile-toggle__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 19px;
        height: 19px;
    }

    .ht-lux-mobile-toggle__icon span {
        display: block;
        width: 19px;
        height: 1.5px;
        background: currentColor;
        transition: transform var(--ths-transition), opacity var(--ths-transition);
    }

    .ht-lux-mobile-toggle[aria-expanded="true"] .ht-lux-mobile-toggle__icon span:first-child {
        transform: translateY(6.5px) rotate(45deg);
    }

    .ht-lux-mobile-toggle[aria-expanded="true"] .ht-lux-mobile-toggle__icon span:nth-child(2) {
        opacity: 0;
    }

    .ht-lux-mobile-toggle[aria-expanded="true"] .ht-lux-mobile-toggle__icon span:last-child {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .ht-lux-mobile-toggle__label {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .ht-lux-navigation__actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        gap: 1px;
    }

    .ht-lux-navigation__actions .ht-lux-icon-button {
        flex-basis: 33px;
        width: 33px;
        height: 38px;
        border: 0;
    }

    .ht-lux-navigation__actions .ht-lux-icon-button svg {
        width: 19px;
        height: 19px;
    }

    .ht-lux-icon-label {
        display: none !important;
    }

    /* Mobile dropdown */

    .ht-lux-navigation__menu-wrap {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1010;
        display: none;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        max-width: none;
        max-height: 70vh;
        padding: 10px 14px 15px;
        overflow-y: auto;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid var(--ths-border);
        background: var(--ths-white);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    }

    .ht-lux-navigation__menu-wrap.is-open {
        display: flex !important;
        animation: ths-mobile-menu-reveal 220ms ease both;
    }

    .ht-lux-navigation__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .ht-lux-navigation__menu > li {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-bottom: 1px solid #eeeeee;
    }

    .ht-lux-navigation__menu > li > a {
        justify-content: flex-start;
        width: 100%;
        min-height: 47px;
        padding: 12px 6px;
        font-size: 11px;
        letter-spacing: 0.8px;
    }

    .ht-lux-navigation__menu > li > a::after {
        display: none !important;
    }

    .ht-lux-navigation__menu > li.menu-item-home > a {
        justify-content: flex-start;
        min-height: 39px;
        margin: 5px 0;
        padding: 10px 12px;
    }

    /* Search panel on mobile */

    .ht-lux-search-panel {
        padding: 14px;
    }

    .ht-lux-search {
        gap: 7px;
    }

    .ht-lux-search input[type="search"] {
        min-height: 42px;
        font-size: 11px;
    }

    .ht-lux-search button {
        min-width: 78px;
        padding: 9px;
        font-size: 9px;
    }
}

@keyframes ths-mobile-menu-reveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   08. SMALL MOBILE
================================================================ */

@media (max-width: 380px) {

    .ht-lux-header__inner {
        min-height: 72px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .ht-lux-header__logo-row .custom-logo {
        max-width: 115px;
        max-height: 48px;
    }

    .ht-lux-header__logo-fallback {
        font-size: 16px;
    }

    .ht-lux-get-website-button {
        min-height: 32px;
        gap: 3px;
        padding: 0 6px;
        font-size: 6.5px;
    }

    .ht-lux-navigation {
        padding-right: 6px;
        padding-left: 6px;
    }

    .ht-lux-navigation__actions .ht-lux-icon-button {
        flex-basis: 29px;
        width: 29px;
    }

    .ht-lux-navigation__actions .ht-lux-icon-button svg {
        width: 17px;
        height: 17px;
    }
}


/* ================================================================
   09. ACCESSIBILITY
================================================================ */

.ht-lux-header .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .ht-lux-ticker__track {
        animation: none !important;
    }

    .ht-lux-header *,
    .ht-lux-navigation-shell * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* ============================================================
   THE HATIM STORE — TICKER ANIMATION FIX
============================================================ */

.ht-lux-ticker {
    display: block;
    width: 100%;
    height: 34px;
    overflow: hidden;
    background: #080808;
}

.ht-lux-ticker__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    height: 100%;
    animation: ths-luxury-ticker 12s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

@keyframes ths-luxury-ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ht-lux-ticker__track {
        animation: ths-luxury-ticker 12s linear infinite !important;
    }
}



/* ================================================================
   START: THE HATIM STORE — PREMIUM NAVIGATION TYPOGRAPHY
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
================================================================ */

/* BRAND POSITION */

.ht-lux-navigation__brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: 100%;
}

/* PREMIUM BRAND FONT */

.ht-lux-navigation__brand-link {
    display: inline-block;

    font-family: 'Cormorant Garamond', serif;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 1.8px;
    line-height: 1;

    color: #111111;

    text-decoration: none !important;
    white-space: nowrap;

    transition: color .25s ease;
}

/* SUBTLE HOVER */

.ht-lux-navigation__brand-link:hover {
    color: #777777;
}

/* TABLET */

@media (max-width: 1100px) {

    .ht-lux-navigation__brand-link {
        font-size: 19px;
        letter-spacing: 1.2px;
    }

}

/* MOBILE */

@media (max-width: 767px) {

    .ht-lux-navigation__brand-link {
        font-size: 13px;
        letter-spacing: .6px;
    }

}

/* SMALL MOBILE */

@media (max-width: 380px) {

    .ht-lux-navigation__brand-link {
        font-size: 11px;
        letter-spacing: .3px;
    }

}

/* ================================================================
   END: THE HATIM STORE — PREMIUM NAVIGATION TYPOGRAPHY
================================================================ */



/* ================================================================
   START: HIDE WEBSITE CTA ON MOBILE
   Developed by Hatim Tech (HT)
================================================================ */

@media (max-width: 767px) {

    .ht-lux-header__actions {
        display: none !important;
    }

}

/* ================================================================
   END: HIDE WEBSITE CTA ON MOBILE
================================================================ */




/* ================================================================
   START: HIDE MOBILE MENU LABEL
   Developed by Hatim Tech (HT)
================================================================ */

@media (max-width: 767px) {

    .ht-lux-mobile-toggle__label {
        display: none !important;
    }

}

/* ================================================================
   END: HIDE MOBILE MENU LABEL
================================================================ */



/* ================================================================
   START: COMPACT MAIN HEADER — PREMIUM DESIGN
   Developed by Hatim Tech (HT)
================================================================ */

.ht-lux-header__inner {
    min-height: 85px !important;
    height: 85px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ht-lux-header__logo-row {
    min-height: 65px !important;
}

.ht-lux-header__logo-row .custom-logo {
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain;
}

/* MOBILE */

@media (max-width: 767px) {

    .ht-lux-header__inner {
        min-height: 58px !important;
        height: 58px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .ht-lux-header__logo-row {
        min-height: 48px !important;
    }

    .ht-lux-header__logo-row .custom-logo {
        max-height: 43px !important;
    }

}

/* ================================================================
   END: COMPACT MAIN HEADER — PREMIUM DESIGN
================================================================ */




/* ================================================================
   START: THE HATIM STORE — PREMIUM SEARCH DROPDOWN
   Developed by Hatim Tech (HT)
================================================================ */

.ht-lux-navigation-shell {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

.ht-lux-search-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 1005 !important;
    width: 100% !important;

    padding: 22px 30px !important;

    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-top: 1px solid #eeeeee !important;

    box-shadow: 0 14px 35px rgba(0, 0, 0, .10) !important;

    overflow: visible !important;
}

.ht-lux-search-panel[hidden] {
    display: none !important;
}

.ht-lux-search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.ht-lux-search input[type="search"] {
    flex: 1 !important;
    min-width: 0 !important;
    height: 48px !important;

    padding: 0 16px !important;

    color: #111111 !important;
    background: #f8f8f8 !important;

    border: 1px solid #dedede !important;
    border-radius: 0 !important;
    outline: none !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
}

.ht-lux-search input[type="search"]:focus {
    background: #ffffff !important;
    border-color: #777777 !important;
}

.ht-lux-search button {
    height: 48px !important;
    min-width: 115px !important;

    padding: 0 22px !important;

    color: #ffffff !important;
    background: #111111 !important;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;

    cursor: pointer !important;
    transition: background .25s ease !important;
}

.ht-lux-search button:hover {
    background: #444444 !important;
}

/* MOBILE */

@media (max-width: 767px) {

    .ht-lux-search-panel {
        padding: 15px 14px !important;
    }

    .ht-lux-search {
        gap: 8px !important;
    }

    .ht-lux-search input[type="search"] {
        height: 43px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    .ht-lux-search button {
        height: 43px !important;
        min-width: 75px !important;
        padding: 0 12px !important;
        font-size: 10px !important;
    }

}

/* ================================================================
   END: THE HATIM STORE — PREMIUM SEARCH DROPDOWN
================================================================ */




/* ================================================================
   START: HT PREMIUM LIVE PRODUCT SEARCH
   Developed by Hatim Tech (HT)
================================================================ */

.ht-lux-search-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1005 !important;
    width: 100% !important;
    padding: 22px 30px !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,.10) !important;
}

.ht-lux-search-panel[hidden] {
    display: none !important;
}

.ht-live-search-results {
    width: 100%;
    max-width: 1100px;
    margin: 14px auto 0;
    background: #fff;
}

.ht-live-search__item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 84px;
    padding: 11px 4px;
    color: #111 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #ededed;
    transition: background .2s ease;
}

.ht-live-search__item:hover {
    background: #f8f8f8;
}

.ht-live-search__thumb {
    display: block;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    overflow: hidden;
    background: #f5f5f5;
}

.ht-live-search__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.ht-live-search__details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ht-live-search__name {
    color: #171717;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.ht-live-search__price {
    color: #777;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
}

.ht-live-search__price del {
    color: #999;
    margin-right: 5px;
}

.ht-live-search__price ins {
    color: #111;
    text-decoration: none;
}

.ht-live-search__arrow {
    flex: 0 0 auto;
    color: #777;
    font-size: 20px;
    transition: transform .2s ease;
}

.ht-live-search__item:hover .ht-live-search__arrow {
    transform: translateX(4px);
}

.ht-live-search__loading,
.ht-live-search__empty {
    padding: 22px 8px;
    color: #777;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 767px) {

    .ht-lux-search-panel {
        padding: 14px !important;
    }

    .ht-live-search-results {
        margin-top: 10px;
    }

    .ht-live-search__item {
        min-height: 72px;
        gap: 12px;
    }

    .ht-live-search__thumb {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }

    .ht-live-search__name {
        font-size: 11px;
    }

}

/* ================================================================
   END: HT PREMIUM LIVE PRODUCT SEARCH
================================================================ */



/* ================================================================
   START: HT PREMIUM CATEGORY BUTTON MOTION
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
   Motion: Smooth Ease-In-Out
================================================================ */

/* CATEGORY BUTTON BASE */

.ht-lux-search-panel a.ht-live-search__category {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 54px !important;
    padding: 13px 18px !important;
    margin: 0 0 8px !important;

    background: #fff !important;
    color: #171717 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;

    text-decoration: none !important;
    overflow: hidden !important;

    transition: all .55s ease-in-out !important;
}

/* HOVER BACKGROUND */

.ht-lux-search-panel a.ht-live-search__category:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
    padding-left: 25px !important;
}

/* CATEGORY NAME */

.ht-lux-search-panel a.ht-live-search__category span:first-child {
    color: inherit !important;
    transition: all .45s ease-in-out !important;
}

/* CATEGORY ARROW */

.ht-lux-search-panel a.ht-live-search__category span:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    border: 1px solid #ddd !important;
    border-radius: 50% !important;

    background: transparent !important;
    color: #222 !important;

    transition: all .55s ease-in-out !important;
}

/* HOVER ARROW */

.ht-lux-search-panel a.ht-live-search__category:hover span:last-child {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
    transform: translateX(4px) !important;
}

/* KEYBOARD ACCESSIBILITY */

.ht-lux-search-panel a.ht-live-search__category:focus-visible {
    outline: 2px solid #111 !important;
    outline-offset: 3px !important;
}

/* MOBILE */

@media (max-width: 600px) {
    .ht-lux-search-panel a.ht-live-search__category {
        min-height: 49px !important;
        padding: 11px 13px !important;
    }

    .ht-lux-search-panel a.ht-live-search__category:hover {
        padding-left: 18px !important;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .ht-lux-search-panel a.ht-live-search__category,
    .ht-lux-search-panel a.ht-live-search__category span {
        transition: none !important;
    }
}

/* ================================================================
   END: HT PREMIUM CATEGORY BUTTON MOTION
================================================================ */




/* ================================================================
   START: MOBILE GET YOUR WEBSITE CTA
   Developed by Hatim Tech (HT)
================================================================ */

.ht-mobile-website-cta {
    display: none;
}

@media (max-width: 767px) {

    .ht-mobile-website-cta {
        display: block !important;
        margin: 18px 0 8px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e8e8e8 !important;
    }

    .ht-mobile-website-cta > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 0 17px !important;
        background: #111 !important;
        color: #fff !important;
        text-decoration: none !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 1.2px !important;
        transition: background 0.3s ease, color 0.3s ease !important;
    }

    .ht-mobile-website-cta > a:hover {
        background: #292929 !important;
        color: #fff !important;
    }

    .ht-mobile-website-cta > a span:last-child {
        font-size: 19px !important;
        font-weight: 400 !important;
        transition: transform 0.3s ease !important;
    }

    .ht-mobile-website-cta > a:hover span:last-child {
        transform: translateX(4px);
    }

}

/* ================================================================
   END: MOBILE GET YOUR WEBSITE CTA
================================================================ */




/* ================================================================
   START: HT FORCE ACRYLIC STICKY NAVIGATION
   Developed by Hatim Tech (HT)
================================================================ */

#ht-lux-sticky-header.is-scrolled .ht-lux-navigation-shell,
#ht-lux-sticky-header.is-scrolled nav.ht-lux-navigation {

    background: rgba(255, 255, 255, 0.68) !important;

    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;

    transition: background 0.45s ease,
                backdrop-filter 0.45s ease,
                box-shadow 0.45s ease !important;
}

/* KEEP NAVIGATION TRANSPARENT */

#ht-lux-sticky-header.is-scrolled nav.ht-lux-navigation {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* ================================================================
   END: HT FORCE ACRYLIC STICKY NAVIGATION
================================================================ */



/* ================================================================
   START: THE HATIM STORE — DUAL ROW COMPACT STICKY HEADER
   Package: HatimTechCore
   Developed by Hatim Tech (HT)

   Both header rows stay sticky.
   Top row becomes shorter on scroll.
================================================================ */

/* MAIN STICKY WRAPPER */

.ht-lux-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
    background: #ffffff;
    isolation: isolate;
}

/* HEADER ROW — NORMAL STATE */

.ht-lux-sticky-header .ht-lux-header {
    position: relative;
    z-index: 2;
}

.ht-lux-sticky-header .ht-lux-header__inner {
    height: 85px !important;
    min-height: 85px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    transition:
        height 350ms ease-in-out,
        min-height 350ms ease-in-out,
        padding 350ms ease-in-out;
}

/* LOGO NORMAL SIZE */

.ht-lux-sticky-header .ht-lux-header__logo-row .custom-logo {
    max-height: 58px !important;
    transition: max-height 350ms ease-in-out;
}

/* WEBSITE CTA NORMAL SIZE */

.ht-lux-sticky-header .ht-lux-get-website-button {
    transition:
        min-height 350ms ease-in-out,
        padding 350ms ease-in-out,
        background 300ms ease,
        color 300ms ease;
}

/* NAVIGATION NORMAL STATE */

.ht-lux-sticky-header .ht-lux-navigation-shell {
    position: relative !important;
    z-index: 1 !important;
}

.ht-lux-sticky-header .ht-lux-navigation {
    min-height: 62px;
    transition: min-height 350ms ease-in-out;
}

.ht-lux-sticky-header .ht-lux-navigation__menu > li > a {
    transition:
        min-height 350ms ease-in-out,
        padding 350ms ease-in-out,
        color 300ms ease;
}

/* ================================================================
   SCROLLED STATE — DESKTOP
================================================================ */

@media (min-width: 768px) {

 .ht-lux-sticky-header.is-scrolled .ht-lux-header__inner {
    height: 54px !important;
    min-height: 54px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-row {
    min-height: 46px !important;
}

.ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-row .custom-logo {
    max-height: 38px !important;
}

    .ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-fallback {
        font-size: 25px;
        transition: font-size 350ms ease-in-out;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-get-website-button {
        min-height: 35px;
        padding-right: 13px;
        padding-left: 13px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation {
        min-height: 54px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation__menu > li > a {
        min-height: 52px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation__menu > li.menu-item-home > a {
        min-height: 34px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation__brand-link {
        font-size: 20px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-icon-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

}

/* ================================================================
   SCROLLED STATE — MOBILE
================================================================ */

@media (max-width: 767px) {

    .ht-lux-sticky-header .ht-lux-header__inner {
        height: 58px !important;
        min-height: 58px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .ht-lux-sticky-header .ht-lux-header__logo-row {
        min-height: 48px !important;
    }

    .ht-lux-sticky-header .ht-lux-header__logo-row .custom-logo {
        max-height: 43px !important;
        transition: max-height 350ms ease-in-out;
    }

    .ht-lux-sticky-header .ht-lux-navigation {
        min-height: 54px;
        transition: min-height 350ms ease-in-out;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-header__inner {
        height: 48px !important;
        min-height: 48px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-row {
        min-height: 40px !important;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-row .custom-logo {
        max-height: 35px !important;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-header__logo-fallback {
        font-size: 16px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation {
        min-height: 47px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation__brand-link {
        font-size: 12px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-mobile-toggle {
        min-height: 36px;
    }

    .ht-lux-sticky-header.is-scrolled .ht-lux-navigation__actions .ht-lux-icon-button {
        height: 34px;
    }

}

/* ================================================================
   END: THE HATIM STORE — DUAL ROW COMPACT STICKY HEADER
================================================================ */



/* ============================================================
   START: HT SMOOTH STICKY HEADER
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
============================================================ */

/* Sticky wrapper */
#ht-lux-sticky-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;

    width: 100%;
    z-index: 99999 !important;

    background: #ffffff;

    margin: 0;
    padding: 0;

    isolation: isolate;
}

/* Main header */
#ht-lux-sticky-header .ht-lux-header {
    position: relative !important;
    z-index: 2;
}

/* Navigation */
#ht-lux-sticky-header .ht-lux-navigation-shell {
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
}

/* Smooth compact transition */
#ht-lux-sticky-header .ht-lux-header__inner {
    transition:
        height .45s ease,
        min-height .45s ease,
        padding .45s ease !important;
}

/* Logo transition */
#ht-lux-sticky-header .custom-logo {
    transition:
        max-height .45s ease,
        width .45s ease !important;
}

/* Navigation transition */
#ht-lux-sticky-header .ht-lux-navigation {
    transition:
        min-height .45s ease,
        padding .45s ease !important;
}

/* Desktop compact header */
@media (min-width: 768px) {

 #ht-lux-sticky-header.is-scrolled
.ht-lux-header__inner {
    height: 54px !important;
    min-height: 54px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#ht-lux-sticky-header.is-scrolled .custom-logo {
    max-height: 38px !important;
}

    #ht-lux-sticky-header.is-scrolled
    .ht-lux-navigation {
        min-height: 54px !important;
    }
}

/* Mobile compact header */
@media (max-width: 767px) {

    #ht-lux-sticky-header.is-scrolled
    .ht-lux-header__inner {
        height: 48px !important;
        min-height: 48px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    #ht-lux-sticky-header.is-scrolled .custom-logo {
        max-height: 35px !important;
    }

    #ht-lux-sticky-header.is-scrolled
    .ht-lux-navigation {
        min-height: 47px !important;
    }
}

/* Subtle shadow after scrolling */
#ht-lux-sticky-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    #ht-lux-sticky-header,
    #ht-lux-sticky-header * {
        transition: none !important;
    }
}

/* ============================================================
   END: HT SMOOTH STICKY HEADER
============================================================ */


/* ================================================================
   START: HT HIDE WEBSITE CTA FROM DESKTOP NAVBAR
================================================================ */

/* Desktop: Hide Get Your Website button from navbar */
@media (min-width: 769px) {
    .ht-lux-navigation .ht-lux-website-cta,
    .ht-lux-navigation .ht-lux-nav-cta,
    .ht-lux-navigation a[href*="get-your-website"] {
        display: none !important;
    }
}

/* END: HT HIDE WEBSITE CTA FROM DESKTOP NAVBAR */








/* ================================================================
   END — THE HATIM STORE HEADER CSS
================================================================ */







/* ============================================================
   START: THE HATIM STORE — LUXURY BRAND FOOTER
   Author: Hatim Tech
   Package: HatimTechCore
   Palette: Black / White / Graphite
   ============================================================ */


/* ============================================================
   START: 01 — FOOTER FOUNDATION
   ============================================================ */

.ht-lux-footer {
    --htf-black: #000000;
--htf-panel: #000000;
--htf-white: #ffffff;
--htf-text: #ffffff;
--htf-muted: #ffffff;
--htf-line: #292929;

    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--htf-black);
    color: var(--htf-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;
    box-sizing: border-box;
}

.ht-lux-footer *,
.ht-lux-footer *::before,
.ht-lux-footer *::after {
    box-sizing: border-box;
}

.ht-lux-footer a {
    color: inherit;
    text-decoration: none;
}

.ht-lux-footer a:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 5px;
}

.ht-lux-footer__container {
    width: min(100% - 100px, 1440px);
    margin-inline: auto;
}

/* END: 01 — FOOTER FOUNDATION */


/* ============================================================
   START: 02 — PREMIUM BRAND INTRODUCTION
   ============================================================ */

.ht-lux-footer__main {
    padding-top: 76px;
    padding-bottom: 65px;
    border-top: 1px solid #252525;
}

.ht-lux-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr)
                           minmax(0, 0.8fr)
                           minmax(0, 0.95fr)
                           minmax(0, 1fr);
    gap: clamp(28px, 4vw, 66px);
    align-items: start;
}

.ht-lux-footer__brand {
    min-width: 0;
    padding-right: 8px;
}

.ht-lux-footer__brand-link {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 23px;
}

.ht-lux-footer__brand-name {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: clamp(25px, 2.4vw, 37px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ht-lux-footer__description {
    max-width: 360px;
    margin: 0 0 26px;
    color: #a0a0a0;
    font-size: 13px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.1px;
}

.ht-lux-footer__shop-link {
    display: inline-flex;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #080808 !important;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ht-lux-footer__shop-link:hover {
    background: transparent;
    color: #ffffff !important;
}

/* END: 02 — PREMIUM BRAND INTRODUCTION */


/* ============================================================
   START: 03 — FOOTER NAVIGATION COLUMNS
   ============================================================ */

.ht-lux-footer__column {
    min-width: 0;
}

.ht-lux-footer__heading {
    position: relative;
    margin: 3px 0 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #303030;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ht-lux-footer__heading::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 35px;
    height: 1px;
    background: #ffffff;
    content: "";
}

.ht-lux-footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-lux-footer__links li {
    margin: 0;
    padding: 0;
    color: #b0b0b0;
    font-size: 13px;
    line-height: 1.8;
}

.ht-lux-footer__links a {
    display: inline-block;
    color: #a9a9a9;
    overflow-wrap: anywhere;
}

.ht-lux-footer__links a:hover {
    color: #ffffff;
}

.ht-lux-footer__information {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-lux-footer__information li {
    margin: 0 0 13px;
    color: #a5a5a5;
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.ht-lux-footer__information-text {
    color: #a5a5a5;
}

.ht-lux-footer__contact-link {
    color: #ffffff !important;
    overflow-wrap: anywhere;
}

.ht-lux-footer__contact-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* END: 03 — FOOTER NAVIGATION COLUMNS */


/* ============================================================
   START: 04 — SOCIAL MEDIA SECTION
   ============================================================ */

.ht-lux-footer__social {
    margin-top: 32px;
}

.ht-lux-footer__social-heading {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ht-lux-footer__social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.ht-lux-footer__social-link {
    display: inline-flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    border: 1px solid #3a3a3a;
    border-radius: 50%;
    background: transparent;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.ht-lux-footer__social-link:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #080808 !important;
}

/* END: 04 — SOCIAL MEDIA SECTION */



/* ============================================================
   START: 05 — PAYMENT METHODS DISPLAY
   Premium centered layout with white payment boxes
   ============================================================ */

.ht-lux-footer__payments {
    padding: 32px 0;
    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;
    text-align: center;
}

/* Payment heading centered above the payment methods */

.ht-lux-footer__payments-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

/* Payment methods heading */

.ht-lux-footer__payments-heading {
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.8;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

/* Existing payment methods list */

.ht-lux-footer__payment-list {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each existing payment method in its own white box */

.ht-lux-footer__payment-item {
    display: inline-flex;
    min-width: 110px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid #ffffff;
    border-radius: 0;
    background: #ffffff;
    color: #080808;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Subtle premium hover state */

.ht-lux-footer__payment-item:hover {
    border-color: #bdbdbd;
    background: #e9e9e9;
    color: #080808;
}

/* END: 05 — PAYMENT METHODS DISPLAY */


/* ============================================================
   START: 05A — MOBILE PAYMENT METHODS
   ============================================================ */

@media (max-width: 600px) {
    .ht-lux-footer__payments {
        padding: 26px 0;
    }

    .ht-lux-footer__payments-inner {
        gap: 18px;
    }

    .ht-lux-footer__payments-heading {
        font-size: 11px;
        letter-spacing: 1.8px;
    }

    .ht-lux-footer__payment-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .ht-lux-footer__payment-item {
        width: 100%;
        min-width: 0;
        min-height: 43px;
        padding: 9px 7px;
        font-size: 10px;
    }
}

/* END: 05A — MOBILE PAYMENT METHODS */

/*
/* ============================================================
   START: 06 — PREMIUM COPYRIGHT AND FOOTER CREDITS
   THE HATIM STORE | HatimTechCore
   Developed by Hatim Tech (HT)
============================================================ */

/* Footer bottom section */

.ht-lux-footer__bottom {
    border-top: 0;
    background: #080808;
}

/* Copyright and credit layout */

.ht-lux-footer__bottom-inner {
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Copyright typography */

.ht-lux-footer__copyright {
    margin: 0;
    color: #929292;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .55px;
    font-variant-numeric: tabular-nums;
}

/* Developer credit hierarchy */

.ht-lux-footer__credit {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 7px;

    margin: 0;
    color: #858585;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Hatim Tech brand name */

.ht-lux-footer__credit a {
    display: inline-block;
    color: #eeeeee;

    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;
    transition: color .3s ease, opacity .3s ease;
}

.ht-lux-footer__credit a:hover {
    color: #ffffff;
    opacity: .75;
}

/* MOBILE RESPONSIVE */

@media (max-width: 767px) {

    .ht-lux-footer__bottom-inner {
        min-height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 13px;
        padding: 23px 12px 25px;
        text-align: center;
    }

    .ht-lux-footer__copyright {
        width: 100%;
        font-size: 10px;
        line-height: 1.8;
        letter-spacing: .35px;
        text-align: center;
    }

    .ht-lux-footer__credit {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        width: 100%;
        font-size: 9px;
        letter-spacing: 1.8px;
        text-align: center;
    }

    .ht-lux-footer__credit a {
        font-size: 23px;
        letter-spacing: 1.4px;
    }

}

/* END: 06 — PREMIUM COPYRIGHT AND FOOTER CREDITS */


/* ============================================================
   START: THS — UNIVERSAL MOBILE PRODUCT CARD ALIGNMENT
   Home + Shop + Related Products
   ============================================================ */

@media (max-width: 767px) {

    /* Product details layout */
    .ht-card .ht-card__details {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Equal title area */
    .ht-card .ht-card__title-link {
        display: block !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        overflow: hidden !important;
    }

    .ht-card .ht-card__title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        --webkit-line-clamp: 2 !important;
        height: 44px !important;
        max-height: 44px !important;
        line-height: 22px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    /* Equal category area */
    .ht-card .ht-card__category {
        height: 15px !important;
        min-height: 15px !important;
        max-height: 15px !important;
        margin-top: 5px !important;
        line-height: 15px !important;
        overflow: hidden !important;
    }

    /* Consistent price position */
    .ht-card .ht-card__price {
        min-height: 24px !important;
        margin-top: 7px !important;
        line-height: 24px !important;
    }

}

/* ============================================================
   END: THS — UNIVERSAL MOBILE PRODUCT CARD ALIGNMENT
   ============================================================ */








   

/* ============================================================
   START: 07 — PREMIUM FLOATING WHATSAPP BUTTON
============================================================ */

.ht-lux-whatsapp-float {
    position: fixed;
    z-index: 99999;
    left: 23px;
    bottom: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    padding: 0;
    box-sizing: border-box;

    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #000000;
    color: #ffffff !important;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* WHATSAPP SVG ICON */
.ht-lux-whatsapp-float svg {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    fill: none;
    stroke: currentColor;
    color: currentColor;
}

/* HOVER — WHITE BACKGROUND, BLACK ICON */
.ht-lux-whatsapp-float:hover,
.ht-lux-whatsapp-float:focus-visible {
    background: #ffffff;
    color: #000000 !important;
    border-color: #ffffff;

    opacity: 1;
    visibility: visible;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.40);
}

/* KEYBOARD ACCESSIBILITY */
.ht-lux-whatsapp-float:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

/* HIDE OPTIONAL TEXT LABEL */
.ht-lux-whatsapp-float__label {
    display: none;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .ht-lux-whatsapp-float {
        left: 15px;
        bottom: 16px;
        width: 49px;
        height: 49px;
    }

    .ht-lux-whatsapp-float svg {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }
}

/* ============================================================
   END: 07 — PREMIUM FLOATING WHATSAPP BUTTON
============================================================ */

/* ============================================================
   END: 07 — PREMIUM FLOATING WHATSAPP BUTTON
============================================================ */



/* ============================================================
   START: 08 — FLOATING BACK-TO-TOP BUTTON
   ============================================================ */

.ht-lux-back-to-top {
    position: fixed;
    z-index: 999;
    right: 23px;
    bottom: 23px;
    display: inline-flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    border: 1px solid #404040;
    border-radius: 50%;
    background: #080808;
    color: #ffffff !important;
    font-size: 21px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.ht-lux-back-to-top:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #080808 !important;
}

/* END: 08 — FLOATING BACK-TO-TOP BUTTON */


/* ============================================================
   START: 09 — TABLET RESPONSIVE FOOTER
   ============================================================ */

@media (max-width: 1050px) {
    .ht-lux-footer__container {
        width: calc(100% - 60px);
    }

    .ht-lux-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 38px;
    }

    .ht-lux-footer__payments-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .ht-lux-footer__payment-list {
        justify-content: flex-start;
        width: 100%;
    }
}

/* END: 09 — TABLET RESPONSIVE FOOTER */


/* ============================================================
   START: 10 — MOBILE RESPONSIVE FOOTER
   ============================================================ */

@media (max-width: 600px) {
    .ht-lux-footer__container {
        width: calc(100% - 36px);
    }

    .ht-lux-footer__main {
        padding-top: 43px;
        padding-bottom: 39px;
    }

    .ht-lux-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .ht-lux-footer__brand-name {
        font-size: 27px;
        letter-spacing: 1px;
    }

    .ht-lux-footer__description {
        max-width: 100%;
    }

    .ht-lux-footer__heading {
        margin-bottom: 19px;
    }

    .ht-lux-footer__links {
        gap: 10px;
    }

    .ht-lux-footer__social {
        margin-top: 25px;
    }

    .ht-lux-footer__payments {
        padding: 22px 0;
    }

    .ht-lux-footer__payment-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ht-lux-footer__payment-item {
        min-width: 0;
        min-height: 42px;
        padding: 8px 5px;
        font-size: 9px;
    }

    .ht-lux-footer__bottom-inner {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding-top: 19px;
        padding-bottom: 23px;
    }

    .ht-lux-whatsapp-float {
        left: 13px;
        bottom: 13px;
        width: 44px;
        height: 44px;
    }

    .ht-lux-back-to-top {
        right: 13px;
        bottom: 13px;
        width: 42px;
        height: 42px;
    }
}

/* END: 10 — MOBILE RESPONSIVE FOOTER */


/* ============================================================
   START: 11 — VERY SMALL MOBILE SCREENS
   ============================================================ */

@media (max-width: 360px) {
    .ht-lux-footer__container {
        width: calc(100% - 28px);
    }

    .ht-lux-footer__grid {
        gap: 29px;
    }

    .ht-lux-footer__payment-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ht-lux-footer__payment-item {
        justify-content: flex-start;
        padding-left: 14px;
    }
}

/* END: 11 — VERY SMALL MOBILE SCREENS */



/* ============================================================
   START: THE HATIM STORE — FOOTER SOCIAL MEDIA ICONS
   Single clean stylesheet section; no duplicate rules.
============================================================ */

.ht-lux-footer .ht-lux-footer__social {
    display: block;
    margin-top: 28px;
    opacity: 1;
    visibility: visible;
}

.ht-lux-footer .ht-lux-footer__social-heading {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ht-lux-footer .ht-lux-footer__social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    overflow: visible;
}

.ht-lux-footer .ht-lux-footer__social-link {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    box-sizing: border-box;

    border: 1px solid #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    color: #111111;
    text-decoration: none;

    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* SVG ICON — VISIBLE BY DEFAULT */
.ht-lux-footer .ht-lux-footer__social-link svg {
    display: block;
    width: 19px;
    height: 19px;
    max-width: 100%;
    max-height: 100%;

    color: #111111;
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

/* HOVER — BLACK CIRCLE, WHITE ICON */
.ht-lux-footer .ht-lux-footer__social-link:hover,
.ht-lux-footer .ht-lux-footer__social-link:focus-visible {
    background-color: #111111;
    color: #ffffff;
    border-color: #ffffff;

    opacity: 1;
    visibility: visible;
    transform: none;

    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* KEEP SVG VISIBLE DURING HOVER */
.ht-lux-footer .ht-lux-footer__social-link:hover svg,
.ht-lux-footer .ht-lux-footer__social-link:focus-visible svg {
    color: #ffffff;
    opacity: 1;
    visibility: visible;
}

/* KEYBOARD ACCESSIBILITY */
.ht-lux-footer .ht-lux-footer__social-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .ht-lux-footer .ht-lux-footer__social {
        margin-top: 22px;
    }

    .ht-lux-footer .ht-lux-footer__social-links {
        gap: 10px;
    }

    .ht-lux-footer .ht-lux-footer__social-link {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* ============================================================
   END: THE HATIM STORE — FOOTER SOCIAL MEDIA ICONS
============================================================ */

/* ============================================================
   START: THE HATIM STORE — FOOTER COPYRIGHT
============================================================ */

.ht-lux-footer__copyright {
    margin: 0;
    padding: 0;
    color: #b8b8b8;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.4px;
    text-align: left;
}

.ht-lux-footer__copyright a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ht-lux-footer__copyright a:hover {
    color: #b8b8b8;
}

@media (max-width: 600px) {
    .ht-lux-footer__copyright {
        font-size: 11px;
        line-height: 1.7;
        text-align: center;
    }
}

/* ============================================================
   END: THE HATIM STORE — FOOTER COPYRIGHT
============================================================ */


/* ============================================================
   START: THS PREMIUM STACKED FOOTER MONOGRAM
============================================================ */

.ht-lux-footer .ht-lux-footer__brand-link {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 24px;
    text-decoration: none;
}

.ht-lux-footer .ht-lux-footer__ths-logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
}

.ht-lux-footer .ht-lux-footer__ths-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.ht-lux-footer .ht-lux-footer__ths-letter {
    display: block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.35px #ffffff;

    font-family: "Times New Roman", Georgia, serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 0.98;

    text-shadow:
        2px 2px 0 #080808,
        3px 3px 0 #ffffff;

    transition: text-shadow 0.25s ease;
}

.ht-lux-footer .ht-lux-footer__ths-caption {
    display: block;
    margin-top: 9px;

    color: #bdbdbd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.ht-lux-footer .ht-lux-footer__brand-link:hover
.ht-lux-footer__ths-letter {
    text-shadow:
        2px 2px 0 #080808,
        3px 3px 0 #a9a9a9;
}

.ht-lux-footer .ht-lux-footer__brand-link:hover
.ht-lux-footer__ths-caption {
    color: #ffffff;
}

.ht-lux-footer .ht-lux-footer__brand-link:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 5px;
}

@media (max-width: 600px) {
    .ht-lux-footer .ht-lux-footer__ths-logo {
        gap: 15px;
    }

    .ht-lux-footer .ht-lux-footer__ths-letter {
        font-size: 49px;
    }

    .ht-lux-footer .ht-lux-footer__ths-caption {
        font-size: 8px;
        letter-spacing: 1.5px;
    }
}

/* ============================================================
   END: THS PREMIUM STACKED FOOTER MONOGRAM
============================================================ */


/* ============================================================
   END: THE HATIM STORE — LUXURY BRAND FOOTER
   ============================================================ */



/* ============================================================
   THE HATIM STORE — MONOCHROME EDITORIAL LUXURY
   @package HatimTechCore
   @author Hatim Tech

   PALETTE: BLACK / WHITE / GREY ONLY
   SCOPE: Universal page.php content only
   NO beige / ivory / gold / gradients / glass effects
   ============================================================ */


/* >>> SECTION 01 — DESIGN FOUNDATION START >>> */

main.ths-page {
    --ths-black: #000000;
    --ths-black-soft: #111111;
    --ths-grey-dark: #333333;
    --ths-grey: #777777;
    --ths-grey-light: #bdbdbd;
    --ths-grey-pale: #e6e6e6;
    --ths-white: #ffffff;

    --ths-serif: "Cormorant Garamond", Georgia, serif;
    --ths-sans: "DM Sans", Arial, sans-serif;

    --ths-page-width: 1240px;
    --ths-reading-width: 820px;

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: clip;

    color: var(--ths-black);
    background: var(--ths-white);
    font-family: var(--ths-sans);
    font-size: 15px;
    line-height: 1.85;
}

main.ths-page *,
main.ths-page *::before,
main.ths-page *::after {
    box-sizing: border-box;
}

main.ths-page img {
    max-width: 100%;
    height: auto;
}

main.ths-page a {
    color: inherit;
    text-underline-offset: 5px;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

main.ths-page a:hover {
    color: var(--ths-grey);
}

main.ths-page :focus-visible {
    outline: 2px solid var(--ths-black);
    outline-offset: 4px;
}

/* <<< SECTION 01 — END <<< */


/* >>> SECTION 02 — PAGE CANVAS START >>> */

main.ths-page .ths-policy-page,
main.ths-page .ths-standard-page {
    width: 100%;
    margin: 0;
    padding: 0 0 110px;
    background: var(--ths-white);
}

main.ths-page .ths-policy-content,
main.ths-page .ths-standard-page__content {
    width: min(calc(100% - 80px), var(--ths-page-width));
    margin-inline: auto;
}

/* <<< SECTION 02 — END <<< */


/* >>> SECTION 03 — HIGH-FASHION POLICY HERO START >>> */

main.ths-page .ths-policy-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: end;
    column-gap: 50px;

    min-height: 440px;
    padding: 84px max(40px, calc((100% - 1240px) / 2)) 76px;

    color: var(--ths-white);
    background: var(--ths-black);
    border-bottom: 1px solid var(--ths-grey-dark);
}

main.ths-page .ths-policy-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: max(40px, calc((100% - 1240px) / 2));
    width: 70px;
    height: 5px;
    background: var(--ths-white);
}

main.ths-page .ths-policy-hero::after {
    content: "THS";
    position: absolute;
    right: max(35px, calc((100% - 1240px) / 2));
    top: 32px;

    color: transparent;
    -webkit-text-stroke: 1px #555555;

    font-family: var(--ths-serif);
    font-size: clamp(85px, 12vw, 160px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -10px;

    pointer-events: none;
    user-select: none;
}

main.ths-page .ths-policy-hero > * {
    position: relative;
    z-index: 1;
}

main.ths-page .ths-policy-eyebrow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 26px;
    color: var(--ths-grey-light);

    font-family: var(--ths-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

main.ths-page .ths-policy-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--ths-white);
}

main.ths-page .ths-policy-hero h1 {
    grid-column: 1;
    max-width: 920px;
    margin: 0;

    color: var(--ths-white);
    font-family: var(--ths-serif);
    font-size: clamp(64px, 9.5vw, 126px);
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -4px;

    overflow-wrap: normal;
    text-wrap: balance;
}

main.ths-page .ths-policy-intro {
    grid-column: 1;
    max-width: 550px;
    margin: 31px 0 0;

    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.9;
}

main.ths-page .ths-policy-updated {
    grid-column: 2;
    align-self: end;

    margin: 0;
    padding: 17px 0 0;

    color: var(--ths-grey-light);
    border-top: 1px solid #555555;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    line-height: 1.8;
    text-transform: uppercase;
}

/* <<< SECTION 03 — END <<< */


/* >>> SECTION 04 — DEFAULT PAGE TITLE COMPOSITION START >>> */

main.ths-page .ths-standard-page__header {
    position: relative;
    display: flex;
    align-items: flex-end;

    min-height: 330px;
    padding: 70px max(40px, calc((100% - 1240px) / 2)) 65px;

    background: var(--ths-black);
    color: var(--ths-white);
    border-bottom: 1px solid #444444;
    overflow: hidden;
}

main.ths-page .ths-standard-page__header::before {
    content: "";
    position: absolute;
    left: max(40px, calc((100% - 1240px) / 2));
    top: 0;
    width: 70px;
    height: 5px;
    background: var(--ths-white);
}

main.ths-page .ths-standard-page__header::after {
    content: "THE HATIM STORE";
    position: absolute;
    top: 30px;
    right: max(30px, calc((100% - 1240px) / 2));

    color: transparent;
    -webkit-text-stroke: 1px #555555;

    font-family: var(--ths-sans);
    font-size: clamp(20px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: 3px;
    white-space: nowrap;
    pointer-events: none;
}

main.ths-page .ths-standard-page__header h1 {
    position: relative;
    z-index: 1;

    max-width: 1050px;
    margin: 0;

    color: var(--ths-white);
    font-family: var(--ths-serif);
    font-size: clamp(58px, 9vw, 108px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -2.5px;
    text-wrap: balance;
}

/* <<< SECTION 04 — END <<< */


/* >>> SECTION 05 — CONTENT GRID AND READING WIDTH START >>> */

main.ths-page .ths-policy-content {
    max-width: var(--ths-reading-width);
    padding-top: 66px;
}

main.ths-page .ths-standard-page__content {
    max-width: var(--ths-page-width);
    padding-top: 68px;
}

main.ths-page .ths-standard-page__content > * {
    max-width: var(--ths-reading-width);
}

main.ths-page .ths-standard-page__content > *:first-child {
    margin-top: 0;
}

main.ths-page .ths-standard-page__content > *:last-child {
    margin-bottom: 0;
}

/* <<< SECTION 05 — END <<< */


/* >>> SECTION 06 — NUMBERED EDITORIAL POLICY SECTIONS START >>> */

main.ths-page .ths-policy-content {
    counter-reset: ths-policy-section;
}

main.ths-page .ths-policy-content > section {
    counter-increment: ths-policy-section;

    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;

    margin: 0;
    padding: 42px 0 45px;

    background: var(--ths-white);
    border: 0;
    border-bottom: 1px solid var(--ths-grey-pale);
    box-shadow: none;
}

main.ths-page .ths-policy-content > section::before {
    content: counter(ths-policy-section, decimal-leading-zero);

    grid-column: 1;
    grid-row: 1 / span 2;

    padding-top: 3px;

    color: var(--ths-grey-light);
    font-family: var(--ths-serif);
    font-size: 35px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1px;

    transition: color 180ms ease;
}

main.ths-page .ths-policy-content > section:hover::before {
    color: var(--ths-black);
}

main.ths-page .ths-policy-content > section h2 {
    grid-column: 2;
    grid-row: 1;

    position: relative;
    margin: 0 0 17px;
    padding: 0;

    color: var(--ths-black);
    border: 0;

    font-family: var(--ths-serif);
    font-size: clamp(29px, 3.7vw, 39px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.6px;
}

main.ths-page .ths-policy-content > section h2::after {
    content: none;
}

main.ths-page .ths-policy-content > section p,
main.ths-page .ths-policy-content > section ul,
main.ths-page .ths-policy-content > section ol {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 15px;

    color: var(--ths-grey-dark);
    font-size: 14px;
    line-height: 1.95;
}

main.ths-page .ths-policy-content > section p:last-child,
main.ths-page .ths-policy-content > section ul:last-child,
main.ths-page .ths-policy-content > section ol:last-child {
    margin-bottom: 0;
}

main.ths-page .ths-policy-content > section strong {
    color: var(--ths-black);
    font-weight: 700;
}

main.ths-page .ths-policy-content > section a {
    color: var(--ths-black);
    text-decoration-color: var(--ths-grey-light);
    text-underline-offset: 4px;
}

main.ths-page .ths-policy-content > section a:hover {
    text-decoration-color: var(--ths-black);
}

/* <<< SECTION 06 — END <<< */


/* >>> SECTION 07 — UNIVERSAL TYPOGRAPHY START >>> */

main.ths-page .ths-standard-page__content h2,
main.ths-page .ths-page-section h2,
main.ths-page .ths-page__section h2 {
    margin: 60px 0 22px;
    padding-bottom: 16px;

    color: var(--ths-black);
    border-bottom: 1px solid var(--ths-grey-pale);

    font-family: var(--ths-serif);
    font-size: clamp(34px, 5vw, 53px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.9px;
}

main.ths-page .ths-standard-page__content h3,
main.ths-page .ths-page-section h3,
main.ths-page .ths-page__section h3 {
    margin: 37px 0 15px;
    color: var(--ths-black);

    font-family: var(--ths-serif);
    font-size: clamp(26px, 3.5vw, 35px);
    font-weight: 600;
    line-height: 1.12;
}

main.ths-page .ths-standard-page__content h4 {
    margin: 27px 0 12px;
    color: var(--ths-black);
    font-size: 16px;
    font-weight: 700;
}

main.ths-page .ths-standard-page__content p,
main.ths-page .ths-page-section p,
main.ths-page .ths-page__section p {
    margin: 0 0 22px;
    color: var(--ths-grey-dark);
    font-size: 14px;
    line-height: 2;
}

main.ths-page .ths-standard-page__content strong,
main.ths-page .ths-page-section strong,
main.ths-page .ths-page__section strong {
    color: var(--ths-black);
    font-weight: 700;
}

main.ths-page .ths-standard-page__content hr {
    height: 1px;
    margin: 44px 0;
    border: 0;
    background: var(--ths-grey-pale);
}

/* <<< SECTION 07 — END <<< */


/* >>> SECTION 08 — MONOCHROME EDITORIAL FEATURE BLOCKS START >>> */

main.ths-page .ths-page-section,
main.ths-page .ths-policy-section,
main.ths-page .ths-page__section,
main.ths-page .page-section {
    position: relative;
    margin: 0 0 30px;
    padding: clamp(28px, 5vw, 60px);

    color: var(--ths-black);
    background: var(--ths-white);
    border: 1px solid var(--ths-grey-pale);
    border-radius: 0;
    box-shadow: none;
}

main.ths-page .ths-page-section--dark,
main.ths-page .ths-policy-section--dark,
main.ths-page .ths-page__section--dark {
    color: var(--ths-white);
    background: var(--ths-black);
    border-color: var(--ths-black);
}

main.ths-page .ths-page-section--dark h2,
main.ths-page .ths-page-section--dark h3,
main.ths-page .ths-page-section--dark p,
main.ths-page .ths-policy-section--dark h2,
main.ths-page .ths-policy-section--dark h3,
main.ths-page .ths-policy-section--dark p,
main.ths-page .ths-page__section--dark h2,
main.ths-page .ths-page__section--dark h3,
main.ths-page .ths-page__section--dark p {
    color: var(--ths-white);
}

main.ths-page .ths-page-section__eyebrow,
main.ths-page .ths-page-eyebrow {
    display: block;
    margin-bottom: 16px;

    color: var(--ths-grey);
    font-family: var(--ths-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.7px;
    text-transform: uppercase;
}

main.ths-page .ths-page-section--dark .ths-page-section__eyebrow {
    color: var(--ths-grey-light);
}

/* <<< SECTION 08 — END <<< */


/* >>> SECTION 09 — MONOCHROME LISTS START >>> */

main.ths-page .ths-standard-page__content ul,
main.ths-page .ths-standard-page__content ol,
main.ths-page .ths-page-section ul,
main.ths-page .ths-policy-content ul,
main.ths-page .ths-policy-content ol {
    margin: 22px 0 28px;
    padding-left: 25px;
    color: var(--ths-grey-dark);
}

main.ths-page .ths-standard-page__content li,
main.ths-page .ths-page-section li,
main.ths-page .ths-policy-content li {
    margin-bottom: 12px;
    padding-left: 5px;
    line-height: 1.9;
}

main.ths-page .ths-standard-page__content li::marker,
main.ths-page .ths-page-section li::marker,
main.ths-page .ths-policy-content li::marker {
    color: var(--ths-black);
}

main.ths-page .ths-page-list {
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

main.ths-page .ths-page-list li {
    position: relative;
    margin: 0;
    padding: 18px 10px 18px 34px;
    border-bottom: 1px solid var(--ths-grey-pale);
}

main.ths-page .ths-page-list li::before {
    content: "";
    position: absolute;
    top: 29px;
    left: 4px;
    width: 7px;
    height: 7px;
    background: var(--ths-black);
}

/* <<< SECTION 09 — END <<< */


/* >>> SECTION 10 — PURE MONOCHROME CALLOUTS START >>> */

main.ths-page .ths-page-notice,
main.ths-page .ths-policy-notice,
main.ths-page .ths-page-callout {
    margin: 32px 0;
    padding: 28px 30px;

    color: var(--ths-black);
    background: #f2f2f2;
    border: 0;
    border-left: 4px solid var(--ths-black);
}

main.ths-page .ths-standard-page__content blockquote,
main.ths-page .ths-page-section blockquote,
main.ths-page .ths-policy-content blockquote {
    margin: 35px 0;
    padding: 25px 0 25px 30px;

    color: var(--ths-black);
    background: var(--ths-white);
    border: 0;
    border-left: 2px solid var(--ths-black);

    font-family: var(--ths-serif);
    font-size: clamp(25px, 3.5vw, 36px);
    font-weight: 500;
    line-height: 1.35;
}

main.ths-page .ths-page-notice p:last-child,
main.ths-page .ths-policy-notice p:last-child,
main.ths-page .ths-page-callout p:last-child,
main.ths-page blockquote p:last-child {
    margin-bottom: 0;
}

/* <<< SECTION 10 — END <<< */


/* >>> SECTION 11 — CONTACT PANELS START >>> */

main.ths-page .ths-page-contact,
main.ths-page .ths-contact-panel,
main.ths-page .ths-policy-contact {
    padding: 30px;
    color: var(--ths-white);
    background: var(--ths-black);
    border: 1px solid var(--ths-black);
    border-radius: 0;
}

main.ths-page .ths-page-contact h2,
main.ths-page .ths-page-contact h3,
main.ths-page .ths-contact-panel h2,
main.ths-page .ths-contact-panel h3,
main.ths-page .ths-policy-contact h2,
main.ths-page .ths-policy-contact h3 {
    color: var(--ths-white);
}

main.ths-page .ths-page-contact p,
main.ths-page .ths-contact-panel p,
main.ths-page .ths-policy-contact p {
    color: #d0d0d0;
}

main.ths-page .ths-page-contact a,
main.ths-page .ths-contact-panel a,
main.ths-page .ths-policy-contact a {
    color: var(--ths-white);
    text-decoration-color: var(--ths-grey);
}

main.ths-page .ths-page-contact a:hover,
main.ths-page .ths-contact-panel a:hover,
main.ths-page .ths-policy-contact a:hover {
    color: var(--ths-grey-light);
}

/* <<< SECTION 11 — END <<< */


/* >>> SECTION 12 — REFINED FAQ ACCORDION START >>> */

main.ths-page .ths-faq-list {
    display: grid;
    gap: 0;
    margin: 30px 0;
    border-top: 1px solid var(--ths-grey-pale);
}

main.ths-page .ths-faq-list details,
main.ths-page details.ths-faq-item,
main.ths-page .ths-standard-page__content details {
    margin: 0;
    background: var(--ths-white);
    border: 0;
    border-bottom: 1px solid var(--ths-grey-pale);
    border-radius: 0;
}

main.ths-page .ths-faq-list summary,
main.ths-page summary.ths-faq-question,
main.ths-page .ths-standard-page__content details > summary {
    position: relative;
    display: block;
    padding: 23px 55px 23px 0;

    color: var(--ths-black);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;

    list-style: none;
    cursor: pointer;
}

main.ths-page .ths-faq-list summary::-webkit-details-marker,
main.ths-page summary.ths-faq-question::-webkit-details-marker,
main.ths-page .ths-standard-page__content details > summary::-webkit-details-marker {
    display: none;
}

main.ths-page .ths-faq-list summary::after,
main.ths-page summary.ths-faq-question::after,
main.ths-page .ths-standard-page__content details > summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;

    color: var(--ths-black);
    font-family: var(--ths-sans);
    font-size: 24px;
    font-weight: 400;

    transform: translateY(-50%);
}

main.ths-page .ths-faq-list details[open] summary::after,
main.ths-page details.ths-faq-item[open] summary::after,
main.ths-page .ths-standard-page__content details[open] > summary::after {
    content: "−";
}

main.ths-page .ths-faq-list details > p,
main.ths-page details.ths-faq-item > p,
main.ths-page .ths-standard-page__content details > p {
    margin: 0;
    padding: 0 45px 25px 0;
    color: var(--ths-grey-dark);
    font-size: 14px;
    line-height: 1.95;
}

/* <<< SECTION 12 — END <<< */


/* >>> SECTION 13 — LUXURY BUTTONS START >>> */

main.ths-page .ths-page-button,
main.ths-page .ths-page-cta,
main.ths-page .ths-standard-page__content .wp-element-button,
main.ths-page .ths-standard-page__content .wp-block-button__link,
main.ths-page .ths-page-section .wp-element-button,
main.ths-page .ths-page-section .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 15px 28px;

    color: var(--ths-white);
    background: var(--ths-black);
    border: 1px solid var(--ths-black);
    border-radius: 0;

    font-family: var(--ths-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

main.ths-page .ths-page-button:hover,
main.ths-page .ths-page-cta:hover,
main.ths-page .ths-standard-page__content .wp-element-button:hover,
main.ths-page .ths-standard-page__content .wp-block-button__link:hover,
main.ths-page .ths-page-section .wp-element-button:hover,
main.ths-page .ths-page-section .wp-block-button__link:hover {
    color: var(--ths-black);
    background: var(--ths-white);
    border-color: var(--ths-black);
}

main.ths-page .ths-page-button--light {
    color: var(--ths-black);
    background: var(--ths-white);
    border-color: var(--ths-white);
}

main.ths-page .ths-page-button--light:hover {
    color: var(--ths-white);
    background: var(--ths-black);
    border-color: var(--ths-white);
}

/* <<< SECTION 13 — END <<< */


/* >>> SECTION 14 — FORM DESIGN START >>> */

main.ths-page .ths-page-form,
main.ths-page .ths-contact-form,
main.ths-page .ths-tracking-form {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 760px;
    padding: clamp(25px, 5vw, 48px);

    background: var(--ths-white);
    border: 1px solid var(--ths-grey-pale);
    border-radius: 0;
    box-shadow: none;
}

main.ths-page .ths-page-form label,
main.ths-page .ths-contact-form label,
main.ths-page .ths-tracking-form label,
main.ths-page .ths-standard-page__content form label {
    display: block;
    margin-bottom: 8px;
    color: var(--ths-black);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

main.ths-page .ths-page-form input,
main.ths-page .ths-page-form select,
main.ths-page .ths-page-form textarea,
main.ths-page .ths-contact-form input,
main.ths-page .ths-contact-form select,
main.ths-page .ths-contact-form textarea,
main.ths-page .ths-tracking-form input,
main.ths-page .ths-tracking-form select,
main.ths-page .ths-tracking-form textarea,
main.ths-page .ths-standard-page__content form input,
main.ths-page .ths-standard-page__content form select,
main.ths-page .ths-standard-page__content form textarea {
    display: block;
    width: 100%;
    min-height: 51px;
    padding: 14px 15px;

    color: var(--ths-black);
    background: var(--ths-white);
    border: 1px solid #cccccc;
    border-radius: 0;

    font: inherit;
    font-size: 14px;
    line-height: 1.6;

    box-shadow: none;
}

main.ths-page .ths-page-form textarea,
main.ths-page .ths-contact-form textarea,
main.ths-page .ths-tracking-form textarea,
main.ths-page .ths-standard-page__content form textarea {
    min-height: 150px;
    resize: vertical;
}

main.ths-page .ths-page-form input:focus,
main.ths-page .ths-page-form select:focus,
main.ths-page .ths-page-form textarea:focus,
main.ths-page .ths-contact-form input:focus,
main.ths-page .ths-contact-form select:focus,
main.ths-page .ths-contact-form textarea:focus,
main.ths-page .ths-tracking-form input:focus,
main.ths-page .ths-tracking-form select:focus,
main.ths-page .ths-tracking-form textarea:focus {
    border-color: var(--ths-black);
    outline: 1px solid var(--ths-black);
    outline-offset: 0;
}

/* <<< SECTION 14 — END <<< */


/* >>> SECTION 15 — TABLES START >>> */

main.ths-page .ths-standard-page__content table,
main.ths-page .ths-policy-content table,
main.ths-page .ths-page-section table {
    width: 100%;
    margin: 32px 0;
    border-collapse: collapse;
    background: var(--ths-white);
    border: 1px solid var(--ths-grey-pale);
    font-size: 13px;
}

main.ths-page .ths-standard-page__content th,
main.ths-page .ths-standard-page__content td,
main.ths-page .ths-policy-content th,
main.ths-page .ths-policy-content td,
main.ths-page .ths-page-section th,
main.ths-page .ths-page-section td {
    padding: 16px 18px;
    border: 1px solid var(--ths-grey-pale);
    text-align: left;
    vertical-align: top;
}

main.ths-page .ths-standard-page__content th,
main.ths-page .ths-policy-content th,
main.ths-page .ths-page-section th {
    color: var(--ths-white);
    background: var(--ths-black);
    font-weight: 700;
}

main.ths-page .ths-standard-page__content td,
main.ths-page .ths-policy-content td,
main.ths-page .ths-page-section td {
    color: var(--ths-grey-dark);
}

/* <<< SECTION 15 — END <<< */


/* >>> SECTION 16 — REUSABLE ASYMMETRIC GRID START >>> */

main.ths-page .ths-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 35px 0;
    background: var(--ths-grey-pale);
    border: 1px solid var(--ths-grey-pale);
}

main.ths-page .ths-page-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

main.ths-page .ths-page-panel {
    min-width: 0;
    padding: 30px;
    background: var(--ths-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

main.ths-page .ths-page-panel--dark {
    color: var(--ths-white);
    background: var(--ths-black);
}

main.ths-page .ths-page-panel__number {
    display: block;
    margin-bottom: 24px;
    color: var(--ths-grey-light);
    font-family: var(--ths-serif);
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
}

main.ths-page .ths-page-panel h3 {
    margin: 0 0 15px;
    color: var(--ths-black);
    font-family: var(--ths-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

main.ths-page .ths-page-panel p {
    margin: 0;
    color: var(--ths-grey-dark);
    font-size: 13px;
    line-height: 1.9;
}

main.ths-page .ths-page-panel--dark h3,
main.ths-page .ths-page-panel--dark p {
    color: var(--ths-white);
}

main.ths-page .ths-page-panel--dark .ths-page-panel__number {
    color: var(--ths-grey-light);
}

/* <<< SECTION 16 — END <<< */


/* >>> SECTION 17 — EMPTY PAGE MESSAGE START >>> */

main.ths-page .ths-page-coming-soon {
    max-width: 760px;
    margin: 0;
    padding: 28px 0;

    color: var(--ths-grey-dark);
    background: var(--ths-white);
    border: 0;
    border-top: 1px solid var(--ths-black);
    border-bottom: 1px solid var(--ths-grey-pale);

    font-size: 14px;
    line-height: 1.9;
}

/* <<< SECTION 17 — END <<< */


/* >>> SECTION 18 — TABLET RESPONSIVE START >>> */

@media (max-width: 900px) {

    main.ths-page .ths-policy-hero {
        grid-template-columns: minmax(0, 1fr) 130px;
        column-gap: 25px;
        min-height: 380px;
        padding-top: 78px;
        padding-bottom: 58px;
    }

    main.ths-page .ths-policy-hero h1 {
        font-size: clamp(58px, 9vw, 86px);
        letter-spacing: -2px;
    }

    main.ths-page .ths-policy-content,
    main.ths-page .ths-standard-page__content {
        width: calc(100% - 60px);
    }

    main.ths-page .ths-page-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* <<< SECTION 18 — END <<< */


/* >>> SECTION 19 — MOBILE RESPONSIVE START >>> */

@media (max-width: 600px) {

    main.ths-page .ths-policy-page,
    main.ths-page .ths-standard-page {
        padding-bottom: 65px;
    }

    main.ths-page .ths-policy-hero {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        min-height: 0;
        padding: 67px 24px 38px;
    }

    main.ths-page .ths-policy-hero::before {
        left: 24px;
    }

    main.ths-page .ths-policy-hero::after {
        top: 28px;
        right: 17px;
        font-size: 85px;
        letter-spacing: -5px;
    }

    main.ths-page .ths-policy-eyebrow {
        margin-bottom: 24px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    main.ths-page .ths-policy-hero h1 {
        max-width: 100%;
        font-size: clamp(58px, 14vw, 78px);
        line-height: 0.88;
        letter-spacing: -1.7px;
    }

    main.ths-page .ths-policy-intro {
        margin-top: 25px;
        font-size: 13px;
    }

    main.ths-page .ths-policy-updated {
        align-self: stretch;
        margin-top: 25px;
        padding-top: 12px;
    }

    main.ths-page .ths-standard-page__header {
        min-height: 245px;
        padding: 65px 24px 38px;
    }

    main.ths-page .ths-standard-page__header::before {
        left: 24px;
    }

    main.ths-page .ths-standard-page__header::after {
        top: 25px;
        right: 18px;
        font-size: 20px;
        letter-spacing: 1px;
    }

    main.ths-page .ths-standard-page__header h1 {
        font-size: clamp(48px, 12vw, 68px);
        line-height: 0.92;
        letter-spacing: -1.3px;
    }

    main.ths-page .ths-policy-content,
    main.ths-page .ths-standard-page__content {
        width: calc(100% - 40px);
        padding-top: 36px;
    }

    main.ths-page .ths-policy-content > section {
        grid-template-columns: 43px minmax(0, 1fr);
        column-gap: 13px;
        padding: 28px 0 30px;
    }

    main.ths-page .ths-policy-content > section::before {
        font-size: 26px;
    }

    main.ths-page .ths-policy-content > section h2 {
        margin-bottom: 13px;
        font-size: clamp(25px, 6.5vw, 32px);
        line-height: 1.06;
        letter-spacing: -0.3px;
    }

    main.ths-page .ths-policy-content > section p,
    main.ths-page .ths-policy-content > section ul,
    main.ths-page .ths-policy-content > section ol {
        font-size: 13px;
        line-height: 1.9;
    }

    main.ths-page .ths-standard-page__content h2,
    main.ths-page .ths-page-section h2,
    main.ths-page .ths-page__section h2 {
        margin-top: 42px;
        font-size: 36px;
    }

    main.ths-page .ths-standard-page__content h3,
    main.ths-page .ths-page-section h3,
    main.ths-page .ths-page__section h3 {
        font-size: 28px;
    }

    main.ths-page .ths-page-section,
    main.ths-page .ths-policy-section,
    main.ths-page .ths-page__section,
    main.ths-page .page-section {
        margin-bottom: 20px;
        padding: 25px 21px;
    }

    main.ths-page .ths-page-grid,
    main.ths-page .ths-page-grid--three {
        grid-template-columns: minmax(0, 1fr);
    }

    main.ths-page .ths-page-panel {
        padding: 25px 22px;
    }

    main.ths-page .ths-page-contact,
    main.ths-page .ths-contact-panel,
    main.ths-page .ths-policy-contact {
        padding: 23px 20px;
    }

    main.ths-page .ths-page-form,
    main.ths-page .ths-contact-form,
    main.ths-page .ths-tracking-form {
        padding: 23px 18px;
        gap: 17px;
    }

    main.ths-page .ths-faq-list summary,
    main.ths-page summary.ths-faq-question,
    main.ths-page .ths-standard-page__content details > summary {
        padding: 19px 38px 19px 0;
        font-size: 13px;
    }

    main.ths-page .ths-faq-list summary::after,
    main.ths-page summary.ths-faq-question::after,
    main.ths-page .ths-standard-page__content details > summary::after {
        right: 2px;
    }

    main.ths-page .ths-faq-list details > p,
    main.ths-page details.ths-faq-item > p,
    main.ths-page .ths-standard-page__content details > p {
        padding: 0 0 20px;
        font-size: 13px;
    }

    main.ths-page .ths-standard-page__content table,
    main.ths-page .ths-policy-content table,
    main.ths-page .ths-page-section table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    main.ths-page .ths-standard-page__content th,
    main.ths-page .ths-standard-page__content td,
    main.ths-page .ths-policy-content th,
    main.ths-page .ths-policy-content td,
    main.ths-page .ths-page-section th,
    main.ths-page .ths-page-section td {
        padding: 12px;
    }

    main.ths-page .ths-page-button,
    main.ths-page .ths-page-cta,
    main.ths-page .ths-standard-page__content .wp-element-button,
    main.ths-page .ths-standard-page__content .wp-block-button__link {
        max-width: 100%;
        min-height: 49px;
        padding: 14px 19px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }

}

/* <<< SECTION 19 — END <<< */

@media (prefers-reduced-motion: reduce) {

    .ht-lux-header *,
    .ht-lux-navigation-shell * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   THE HATIM STORE — PREMIUM THS GLOW + EDITORIAL BRAND DETAIL
   Scope: Universal page.php hero only
   Palette: Black / White / Grey
   ========================================================= */

/* START: SUBTLE PREMIUM THS GLOW */

main.ths-page .ths-policy-hero::before {
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.75),
        0 0 12px rgba(255, 255, 255, 0.22),
        0 0 28px rgba(255, 255, 255, 0.12);

    animation: ths-premium-glow 4s ease-in-out infinite;
    will-change: text-shadow;
}

@keyframes ths-premium-glow {
    0%,
    100% {
        text-shadow:
            0 0 1px rgba(255, 255, 255, 0.55),
            0 0 10px rgba(255, 255, 255, 0.14),
            0 0 22px rgba(255, 255, 255, 0.08);
    }

    50% {
        text-shadow:
            0 0 2px rgba(255, 255, 255, 0.9),
            0 0 16px rgba(255, 255, 255, 0.3),
            0 0 34px rgba(255, 255, 255, 0.16);
    }
}

/* END: SUBTLE PREMIUM THS GLOW */


/* START: LEFT + RIGHT LUXURY BRAND ORNAMENT */

main.ths-page .ths-policy-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    letter-spacing: 0.28em;
    line-height: 1.6;
}

/* Fine line + tiny diamond on both sides */

main.ths-page .ths-policy-eyebrow::before,
main.ths-page .ths-policy-eyebrow::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: clamp(30px, 5vw, 68px);
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.8)
    );
    position: relative;
}

/* Reverse the right-hand line */

main.ths-page .ths-policy-eyebrow::after {
    background: linear-gradient(
        to left,
        transparent,
        rgba(255, 255, 255, 0.8)
    );
}

/* END: LEFT + RIGHT LUXURY BRAND ORNAMENT */


/* START: REFINED RESPONSIVE SPACING */

@media (max-width: 600px) {
    main.ths-page .ths-policy-eyebrow {
        gap: 10px;
        letter-spacing: 0.18em;
    }

    main.ths-page .ths-policy-eyebrow::before,
    main.ths-page .ths-policy-eyebrow::after {
        width: 22px;
    }
}

/* END: REFINED RESPONSIVE SPACING */


/* START: ACCESSIBILITY — RESPECT REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    main.ths-page .ths-policy-hero::before {
        animation: none;
    }
}

/* END: ACCESSIBILITY */


/* ============================================================
   THE HATIM STORE — CONTACT US PAGE
   Premium Black & White Design
   File: style.css
   ============================================================ */


/* 01. MAIN PAGE
------------------------------------------------------------ */

.ths-contact-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 70px;
    color: #171717;
    background: #ffffff;
    box-sizing: border-box;
}

.ths-contact-page *,
.ths-contact-page *::before,
.ths-contact-page *::after {
    box-sizing: border-box;
}


/* 02. HERO SECTION
------------------------------------------------------------ */

.ths-contact-hero {
    max-width: 760px;
    margin: 0 auto 54px;
    text-align: center;
}

.ths-contact-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #777777;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ths-contact-hero h1 {
    margin: 0 0 20px;
    color: #111111;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -2px;
}

.ths-contact-intro {
    max-width: 580px;
    margin: 0 auto;
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}


/* 03. CENTER DECORATIVE DIVIDER
------------------------------------------------------------ */

.ths-contact-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto 45px;
}

.ths-contact-divider-line {
    position: relative;
    display: block;
    flex: 1;
    max-width: 250px;
    height: 1px;
    background: #d8d8d8;
}

.ths-contact-divider-line::after {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    content: "";
    background: #171717;
    transform: translateY(-50%) rotate(45deg);
}

.ths-contact-divider-line:first-child::after {
    right: 0;
}

.ths-contact-divider-line:last-child::after {
    left: 0;
}

.ths-contact-divider p {
    margin: 0;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-align: center;
    white-space: nowrap;
}


/* 04. CONTACT CARDS LAYOUT
------------------------------------------------------------ */

.ths-contact-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}


/* 05. INDIVIDUAL CONTACT CARD
------------------------------------------------------------ */

.ths-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 340px;
    padding: 38px 34px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #ffffff;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.ths-contact-card:hover {
    border-color: #bdbdbd;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.055);
    transform: translateY(-4px);
}


/* 06. CONTACT ICONS
------------------------------------------------------------ */

.ths-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    color: #161616;
    background: #f8f8f8;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.ths-contact-icon svg {
    display: block;
    width: 27px;
    height: 27px;
}

.ths-contact-card:hover .ths-contact-icon {
    color: #ffffff;
    border-color: #111111;
    background: #111111;
}


/* 07. CARD LABELS & TEXT
------------------------------------------------------------ */

.ths-contact-card-label {
    display: block;
    margin-bottom: 12px;
    color: #777777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.6;
}

.ths-contact-card h2 {
    margin: 0 0 14px;
    color: #111111;
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

.ths-contact-card p {
    margin: 0 0 28px;
    color: #696969;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}


/* 08. CONTACT BUTTONS
------------------------------------------------------------ */

.ths-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 48px;
    max-width: 100%;
    margin-top: auto;
    padding: 13px 20px;
    border: 1px solid #111111;
    border-radius: 0;
    color: #ffffff;
    background: #111111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.ths-contact-button span {
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.ths-contact-button:hover {
    color: #111111;
    border-color: #111111;
    background: #ffffff;
}

.ths-contact-button:hover span {
    transform: translateX(4px);
}

.ths-contact-button:focus-visible {
    outline: 2px solid #555555;
    outline-offset: 4px;
}


/* 09. BOTTOM MESSAGE
------------------------------------------------------------ */

.ths-contact-footer {
    max-width: 760px;
    margin: 48px auto 0;
    padding-top: 25px;
    border-top: 1px solid #eeeeee;
    text-align: center;
}

.ths-contact-footer p {
    margin: 0;
    color: #777777;
    font-size: 13px;
    line-height: 1.8;
}

.ths-contact-footer strong {
    color: #222222;
    font-weight: 700;
}


/* 10. TABLET RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 768px) {

    .ths-contact-page {
        padding: 60px 20px 50px;
    }

    .ths-contact-hero {
        margin-bottom: 42px;
    }

    .ths-contact-options {
        gap: 18px;
    }

    .ths-contact-card {
        min-height: 350px;
        padding: 28px 23px;
    }

    .ths-contact-card h2 {
        font-size: 22px;
    }

    .ths-contact-divider {
        gap: 14px;
        margin-bottom: 32px;
    }

    .ths-contact-divider p {
        font-size: 10px;
        letter-spacing: 0.7px;
    }
}


/* 11. MOBILE RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 560px) {

    .ths-contact-page {
        padding: 46px 17px 42px;
    }

    .ths-contact-hero {
        margin-bottom: 36px;
    }

    .ths-contact-eyebrow {
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .ths-contact-hero h1 {
        margin-bottom: 15px;
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .ths-contact-intro {
        font-size: 14px;
        line-height: 1.8;
    }

    .ths-contact-divider {
        gap: 10px;
        margin-bottom: 28px;
    }

    .ths-contact-divider-line {
        min-width: 15px;
    }

    .ths-contact-divider p {
        max-width: 65%;
        font-size: 9px;
        letter-spacing: 0.5px;
        white-space: normal;
    }

    .ths-contact-options {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 420px;
    }

    .ths-contact-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .ths-contact-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 21px;
    }

    .ths-contact-card h2 {
        font-size: 24px;
    }

    .ths-contact-card p {
        margin-bottom: 24px;
        font-size: 14px;
    }

    .ths-contact-button {
        width: 100%;
        min-height: 48px;
    }

    .ths-contact-footer {
        margin-top: 32px;
        padding-top: 22px;
    }
}


/* 12. REDUCED MOTION ACCESSIBILITY
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ths-contact-card,
    .ths-contact-icon,
    .ths-contact-button,
    .ths-contact-button span {
        transition: none;
    }

    .ths-contact-card:hover {
        transform: none;
    }
}



/* CONTACT PAGE — BUTTON TEXT FIX */
.ths-contact-page .ths-contact-button {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    visibility: visible;
    -webkit-text-fill-color: #ffffff;
}

.ths-contact-page .ths-contact-button span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

/* DIVIDER LINES — FULL BLACK */
.ths-contact-page .ths-contact-divider-line {
    background-color: #000000 !important;
    opacity: 1;
}

/* DIVIDER DIAMONDS — FULL BLACK */
.ths-contact-page .ths-contact-divider-line::before,
.ths-contact-page .ths-contact-divider-line::after {
    background-color: #000000 !important;
    opacity: 1;
}

/* DIVIDER TEXT — FULL BLACK */
.ths-contact-page .ths-contact-divider p {
    color: #000000 !important;
    font-weight: 600;
}

/* ============================================================
   CONTACT US PAGE CSS END
   ============================================================ */


/* =====================================================
   THE HATIM STORE — PREMIUM FAQ DESIGN
   Scope: FAQ page only
   Header, footer and JavaScript untouched
   ===================================================== */

.ths-faq-page {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto !important;
    padding: 0 36px !important;
    box-sizing: border-box;
}

.ths-faq-page *,
.ths-faq-page *::before,
.ths-faq-page *::after {
    box-sizing: border-box;
}

/* FAQ introduction */

.ths-faq-page .ths-policy-hero {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 55px !important;
    text-align: center;
}

.ths-faq-page .ths-policy-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ths-faq-page .ths-policy-hero h1 {
    margin: 0 0 18px !important;
    color: #000;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1.2px;
}

.ths-faq-page .ths-policy-intro {
    max-width: 650px;
    margin: 0 auto !important;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

/* Main FAQ content */

.ths-faq-page .ths-policy-content {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

/* Question groups */

.ths-faq-page .ths-policy-content > section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 46px !important;
    padding: 0 !important;
}

.ths-faq-page .ths-policy-content > section > h2 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 0 15px !important;
    color: #000;
    border-bottom: 1px solid #000;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

/* Individual question */

.ths-faq-page .ths-policy-content details {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Full-width question row with dedicated button column */

.ths-faq-page .ths-policy-content details > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: center !important;
    column-gap: 20px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 72px;

    margin: 0 !important;
    padding: 20px 0 !important;

    color: #111 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    cursor: pointer;
    list-style: none !important;
}

.ths-faq-page .ths-policy-content details > summary::-webkit-details-marker {
    display: none !important;
}

.ths-faq-page .ths-policy-content details > summary::marker {
    content: "" !important;
}

.ths-faq-page .ths-policy-content details > summary::before {
    content: none !important;
    display: none !important;
}

/* Prevent inherited layout rules from narrowing question text */

.ths-faq-page .ths-policy-content details > summary > span {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.ths-faq-page .ths-policy-content details > summary {
    justify-items: stretch !important;
}

.ths-faq-page .ths-policy-content details > summary > :not(span) {
    min-width: 0 !important;
    max-width: none !important;
}

/* Premium square plus button */

.ths-faq-page .ths-policy-content details > summary > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #000 !important;
    background: #fff !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important;

    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;

    transition: color 0.2s ease, background-color 0.2s ease;
}

.ths-faq-page .ths-policy-content details > summary:hover {
    color: #555 !important;
}

.ths-faq-page .ths-policy-content details > summary:hover > span,
.ths-faq-page .ths-policy-content details[open] > summary > span {
    color: #fff !important;
    background: #000 !important;
}

/* Answer */

.ths-faq-page .ths-policy-content details > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 20px 52px 24px 0 !important;

    color: #555 !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;

    white-space: normal !important;
    overflow-wrap: break-word;
}

/* Keyboard accessibility */

.ths-faq-page .ths-policy-content details > summary:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

/* Tablet */

@media (max-width: 768px) {
    .ths-faq-page {
        margin: 42px auto !important;
        padding: 0 24px !important;
    }

    .ths-faq-page .ths-policy-hero {
        margin-bottom: 40px !important;
    }

    .ths-faq-page .ths-policy-hero h1 {
        font-size: 35px;
    }

    .ths-faq-page .ths-policy-intro {
        font-size: 15px;
    }

    .ths-faq-page .ths-policy-content > section {
        margin-bottom: 36px !important;
    }

    .ths-faq-page .ths-policy-content > section > h2 {
        font-size: 20px;
    }

    .ths-faq-page .ths-policy-content details > summary {
        column-gap: 14px !important;
        min-height: 66px;
        font-size: 15px;
    }
}

/* Mobile */

@media (max-width: 480px) {
    .ths-faq-page {
        margin: 30px auto !important;
        padding: 0 18px !important;
    }

    .ths-faq-page .ths-policy-hero {
        margin-bottom: 32px !important;
    }

    .ths-faq-page .ths-policy-hero h1 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .ths-faq-page .ths-policy-intro {
        font-size: 14px;
        line-height: 1.75;
    }

    .ths-faq-page .ths-policy-content > section {
        margin-bottom: 30px !important;
    }

    .ths-faq-page .ths-policy-content > section > h2 {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        font-size: 19px;
    }

    .ths-faq-page .ths-policy-content details > summary {
        grid-template-columns: minmax(0, 1fr) 28px !important;
        column-gap: 12px !important;
        min-height: 62px;
        padding: 16px 0 !important;
        font-size: 14px;
        line-height: 1.6;
    }

    .ths-faq-page .ths-policy-content details > summary > span {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        font-size: 21px;
    }

    .ths-faq-page .ths-policy-content details > p {
        padding: 16px 0 20px !important;
        font-size: 14px;
        line-height: 1.8;
    }
}

/* Respect reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
    .ths-faq-page *,
    .ths-faq-page *::before,
    .ths-faq-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* FAQ HERO — EXACT FULL SCREEN WIDTH */

.ths-faq-page .ths-policy-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .ths-faq-page .ths-policy-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* END FAQ FULL-WIDTH FIX */



/* =====================================================
   FAQ TYPOGRAPHY FIX — START
   Match FAQ typography with other policy pages
   ===================================================== */

.ths-faq-page {
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
}

/* FAQ eyebrow */
.ths-faq-page .ths-policy-eyebrow {
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
}

/* FAQ main heading and section headings */
.ths-faq-page .ths-policy-hero h1,
.ths-faq-page .ths-policy-content > section > h2 {
    font-family: var(--ths-display-font, 'Cormorant Garamond', Georgia, serif);
}

/* FAQ introduction paragraph */
.ths-faq-page .ths-policy-intro {
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
    font-weight: 400;
}

/* FAQ questions */
.ths-faq-page .ths-policy-content details > summary {
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
    font-weight: 500;
}

/* FAQ answers */
.ths-faq-page .ths-policy-content details > p {
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
    font-weight: 400;
    line-height: 1.9;
}

/* FAQ TYPOGRAPHY FIX — END */


/* END — THE HATIM STORE PREMIUM FAQ DESIGN */


/* =====================================================
   THE HATIM STORE — PREMIUM TRACK ORDER PAGE
   Scope: .ths-track-order-page only
   ===================================================== */

.ths-track-order-page {
    --ths-black: #111;
    --ths-grey: #777;
    --ths-line: #dedede;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 0 36px 35px !important;
    color: var(--ths-black);
    box-sizing: border-box;
}

.ths-track-order-page *,
.ths-track-order-page *::before,
.ths-track-order-page *::after {
    box-sizing: border-box;
}

/* HERO */

.ths-track-order-page .ths-track-hero {
    position: relative;
    width: 100%;
    padding: 24px 32px 0;
    background: #f4f4f2;
    overflow: hidden;
}

.ths-track-order-page .ths-track-hero-top,
.ths-track-order-page .ths-track-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: #555;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.ths-track-order-page .ths-track-hero-top {
    padding-bottom: 18px;
    border-bottom: 1px solid #d7d7d4;
}

.ths-track-order-page .ths-track-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: center;
    gap: 24px;
    min-height: 440px;
    padding: 45px 0;
}

.ths-track-order-page .ths-track-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 590px;
}

.ths-track-order-page .ths-track-eyebrow,
.ths-track-order-page .ths-track-section-index {
    display: block;
    color: #666;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.7;
}

.ths-track-order-page .ths-track-hero-copy h1 {
    margin: 24px 0 !important;
    color: #111;
    font-size: clamp(54px, 7vw, 96px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -5px;
}

.ths-track-order-page .ths-track-hero-copy h1 span {
    color: #888;
}

.ths-track-order-page .ths-track-hero-copy > p {
    max-width: 390px;
    margin: 0 0 28px !important;
    color: #666;
    font-size: 15px;
    line-height: 1.9;
}

.ths-track-order-page .ths-track-scroll {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.ths-track-order-page .ths-track-scroll-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #111;
    font-size: 18px;
    transition: background .2s ease, color .2s ease;
}

.ths-track-order-page .ths-track-scroll:hover .ths-track-scroll-icon {
    color: #fff;
    background: #111;
}

/* HERO ART */

.ths-track-order-page .ths-track-hero-art {
    position: relative;
    display: flex;
    min-height: 320px;
    align-items: center;
    justify-content: center;
}

.ths-track-order-page .ths-track-art-index {
    position: absolute;
    top: 0;
    right: 0;
    color: #777;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.ths-track-order-page .ths-track-art-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(290px, 90%);
    aspect-ratio: 1;
    border: 1px solid #bdbdb9;
    border-radius: 50%;
}

.ths-track-order-page .ths-track-art-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77%;
    aspect-ratio: 1;
    border: 1px solid #c9c9c5;
    border-radius: 50%;
    background: #eaeae7;
}

.ths-track-order-page .ths-track-art-monogram {
    color: #111;
    font-family: Georgia, serif;
    font-size: clamp(100px, 13vw, 170px);
    font-weight: 400;
    line-height: 1;
}

.ths-track-order-page .ths-track-art-caption {
    position: absolute;
    right: 0;
    bottom: 3px;
    color: #555;
    font-size: 9px;
    line-height: 1.8;
    letter-spacing: 1.4px;
    text-align: right;
}

.ths-track-order-page .ths-track-art-number {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #c9c9c5;
    font-size: 50px;
    font-weight: 300;
}

.ths-track-order-page .ths-track-hero-bottom {
    min-height: 48px;
    border-top: 1px solid #d7d7d4;
    font-size: 9px;
    letter-spacing: 1.3px;
}

/* MAIN WORKSPACE */

.ths-track-order-page .ths-track-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 70px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 76px 20px 65px;
}

.ths-track-order-page .ths-track-search-panel,
.ths-track-order-page .ths-track-side-panel {
    min-width: 0;
}

.ths-track-order-page .ths-track-search-panel {
    scroll-margin-top: 35px;
}

.ths-track-order-page .ths-track-panel-heading h2,
.ths-track-order-page .ths-track-side-panel > h2 {
    margin: 20px 0 14px !important;
    color: #111;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.ths-track-order-page .ths-track-panel-heading > p {
    max-width: 360px;
    margin: 0 0 34px !important;
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

/* FORM */

.ths-track-order-page .ths-track-form {
    display: block;
    width: 100%;
    margin: 0;
}

.ths-track-order-page .ths-track-field {
    width: 100%;
    min-width: 0;
    margin: 0 0 26px;
}

.ths-track-order-page .ths-track-field label {
    display: block;
    margin: 0 0 12px;
    color: #333;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.ths-track-order-page .ths-track-field input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 15px 16px;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #111;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .2s ease;
}

.ths-track-order-page .ths-track-field input::placeholder {
    color: #aaa;
}

.ths-track-order-page .ths-track-field input:focus {
    border-color: #111;
    outline: 1px solid #111;
    outline-offset: -1px;
}

.ths-track-order-page .ths-track-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 58px;
    margin: 8px 0 0;
    padding: 0 20px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background .2s ease, color .2s ease;
}

.ths-track-order-page .ths-track-submit:hover {
    background: #fff;
    color: #111;
}

.ths-track-order-page .ths-track-submit > span:last-child {
    font-size: 20px;
}

.ths-track-order-page .ths-track-form-note {
    margin: 16px 0 0 !important;
    color: #888;
    font-size: 11px;
    line-height: 1.8;
}

/* SIDE INFORMATION */

.ths-track-order-page .ths-track-side-panel {
    padding-top: 2px;
}

.ths-track-order-page .ths-track-side-panel > h2 {
    margin-bottom: 32px !important;
    font-size: 31px;
    letter-spacing: -1px;
}

.ths-track-order-page .ths-track-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 15px;
    padding: 22px 0;
    border-top: 1px solid #e1e1e1;
}

.ths-track-order-page .ths-track-step-number {
    color: #888;
    font-size: 11px;
    letter-spacing: 1px;
}

.ths-track-order-page .ths-track-step h3 {
    margin: 0 0 8px !important;
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.ths-track-order-page .ths-track-step p {
    margin: 0 !important;
    color: #777;
    font-size: 12px;
    line-height: 1.85;
}

/* SUPPORT */

.ths-track-order-page .ths-track-help-box {
    margin-top: 30px;
    padding: 24px;
    background: #f4f4f2;
}

.ths-track-order-page .ths-track-help-box > span {
    color: #777;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.ths-track-order-page .ths-track-help-box > p {
    margin: 14px 0 18px !important;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
}

.ths-track-order-page .ths-track-help-box > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #111;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
}

.ths-track-order-page .ths-track-help-box > a:hover {
    opacity: .65;
}

/* BOTTOM SIGNATURE */

.ths-track-order-page .ths-track-page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0 0;
    border-top: 1px solid #dedede;
    color: #777;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.4px;
}

/* TABLET */

@media (max-width: 900px) {
    .ths-track-order-page {
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    .ths-track-order-page .ths-track-hero {
        padding-right: 24px;
        padding-left: 24px;
    }

    .ths-track-order-page .ths-track-hero-main {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
        min-height: 380px;
    }

    .ths-track-order-page .ths-track-workspace {
        gap: 36px;
        padding: 58px 8px;
    }

    .ths-track-order-page .ths-track-art-ring {
        width: 230px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .ths-track-order-page {
        margin-top: 25px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .ths-track-order-page .ths-track-hero {
        padding: 18px 18px 0;
    }

    .ths-track-order-page .ths-track-hero-top,
    .ths-track-order-page .ths-track-hero-bottom {
        font-size: 8px;
        letter-spacing: .8px;
    }

    .ths-track-order-page .ths-track-hero-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        min-height: auto;
        padding: 42px 0 30px;
    }

    .ths-track-order-page .ths-track-hero-copy h1 {
        margin: 20px 0 !important;
        font-size: clamp(52px, 14vw, 76px);
        letter-spacing: -3px;
    }

    .ths-track-order-page .ths-track-hero-copy > p {
        font-size: 14px;
    }

    .ths-track-order-page .ths-track-hero-art {
        min-height: 250px;
        margin-top: 8px;
    }

    .ths-track-order-page .ths-track-art-ring {
        width: 220px;
    }

    .ths-track-order-page .ths-track-art-monogram {
        font-size: 120px;
    }

    .ths-track-order-page .ths-track-hero-bottom {
        flex-wrap: wrap;
        padding: 14px 0;
    }

    .ths-track-order-page .ths-track-workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
        padding: 48px 4px;
    }

    .ths-track-order-page .ths-track-panel-heading h2 {
        font-size: 38px;
    }

    .ths-track-order-page .ths-track-side-panel > h2 {
        font-size: 30px;
    }

    .ths-track-order-page .ths-track-page-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        line-height: 1.7;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .ths-track-order-page *,
    .ths-track-order-page *::before,
    .ths-track-order-page *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* THE HATIM STORE — WooCommerce Tracking Form */
.ths-track-order-page .ths-woocommerce-tracking .track_order {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order p {
    margin: 0;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order input[type="text"],
.ths-track-order-page .ths-woocommerce-tracking .track_order input[type="email"] {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    background: #fff;
    color: #111;
    font: inherit;
    box-sizing: border-box;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order input:focus {
    outline: none;
    border-color: #111;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order button,
.ths-track-order-page .ths-woocommerce-tracking .track_order .button {
    width: 100%;
    min-height: 52px;
    padding: 15px 20px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.ths-track-order-page .ths-woocommerce-tracking .track_order button:hover,
.ths-track-order-page .ths-woocommerce-tracking .track_order .button:hover {
    background: #fff;
    color: #111;
}

/* END — PREMIUM TRACK ORDER DESIGN */


/* ==================================================
   THE HATIM STORE — GLOBAL PARAGRAPH TYPOGRAPHY
   Apply Montserrat to paragraph text
   ================================================== */

body,
p,
li,
.ths-policy-page p,
.ths-policy-content p {
    font-family: var(--ths-nav-font), Arial, sans-serif;
    font-weight: 400;
    line-height: 1.9;
}

/* Keep luxury typography on headings */
h1, h2, h3, h4, h5, h6,
.ths-policy-page h1,
.ths-policy-page h2,
.ths-policy-page h3 {
    font-family: var(--ths-display-font), Georgia, serif;
}

/* ==================================================
   END — GLOBAL PARAGRAPH TYPOGRAPHY
   ================================================== */


/* =========================================================
   HATIM TECH — GET YOUR WEBSITE
   PREMIUM WEBSITE SERVICES PAGE
   Design: Luxury Editorial / Black / Ivory / Soft Grey
   File: style.css
   ========================================================= */


/* =========================================================
   SECTION 01: PAGE DESIGN TOKENS — START
   ========================================================= */

.ht-get-website {
    --ht-page-bg: #f7f5f0;
    --ht-surface: #ffffff;
    --ht-surface-soft: #eeece6;
    --ht-ink: #171715;
    --ht-ink-soft: #42413d;
    --ht-muted: #77756f;
    --ht-border: #dedbd3;
    --ht-border-dark: #292926;
    --ht-black: #171715;
    --ht-white: #ffffff;

    --ht-display-font:
        var(--ths-display-font, "Cormorant Garamond", Georgia, serif);

    --ht-body-font:
        var(--ths-nav-font, "Montserrat", Arial, sans-serif);

    --ht-container: 1240px;
    --ht-reading-width: 790px;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: var(--ht-page-bg);
    color: var(--ht-ink);
    font-family: var(--ht-body-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    isolation: isolate;
}

.ht-get-website *,
.ht-get-website *::before,
.ht-get-website *::after {
    box-sizing: border-box;
}

.ht-get-website img,
.ht-get-website svg {
    max-width: 100%;
}

.ht-get-website p {
    margin: 0 0 20px;
    color: var(--ht-muted);
    font-family: var(--ht-body-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.95;
}

.ht-get-website p:last-child {
    margin-bottom: 0;
}

.ht-get-website h1,
.ht-get-website h2,
.ht-get-website h3,
.ht-get-website h4 {
    margin-top: 0;
    color: var(--ht-ink);
    font-family: var(--ht-display-font);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ht-get-website h1 {
    font-size: clamp(48px, 7vw, 94px);
}

.ht-get-website h2 {
    font-size: clamp(36px, 4.6vw, 60px);
}

.ht-get-website h3 {
    font-size: clamp(27px, 3vw, 37px);
}

.ht-get-website a {
    color: inherit;
    text-decoration: none;
}

.ht-get-website a:focus-visible {
    outline: 2px solid var(--ht-ink);
    outline-offset: 5px;
}

.ht-get-website ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =========================================================
   SECTION 01: PAGE DESIGN TOKENS — END
   ========================================================= */


/* =========================================================
   SECTION 02: SHARED SECTION LABELS — START
   ========================================================= */

.ht-get-website .ht-website-eyebrow,
.ht-get-website .ht-website-section-label {
    display: inline-block;
    color: var(--ht-muted);
    font-family: var(--ht-body-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ht-get-website .ht-website-eyebrow {
    margin-bottom: 27px;
    color: var(--ht-ink-soft);
}

.ht-get-website .ht-website-section-label {
    margin-bottom: 23px;
}

.ht-get-website .ht-website-section-header {
    max-width: 820px;
    margin: 0 auto 64px;
    text-align: center;
}

.ht-get-website .ht-website-section-header h2 {
    margin-bottom: 22px;
}

.ht-get-website .ht-website-section-header p {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   SECTION 02: SHARED SECTION LABELS — END
   ========================================================= */


/* =========================================================
   SECTION 03: HERO SECTION — START
   ========================================================= */

.ht-get-website .ht-website-hero {
    position: relative;
    display: flex;
    min-height: 650px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 110px 28px 120px;
    overflow: hidden;
    background: var(--ht-page-bg);
    border-bottom: 1px solid var(--ht-border);
    text-align: center;
}

.ht-get-website .ht-website-hero::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 90px;
    background: var(--ht-border);
    content: "";
}

.ht-get-website .ht-website-hero .ht-website-eyebrow {
    margin-top: 18px;
}

.ht-get-website .ht-website-hero h1 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 29px;
    font-size: clamp(54px, 8.2vw, 106px);
    font-weight: 500;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.ht-get-website .ht-website-intro {
    max-width: 650px;
    margin: 0 auto 34px;
    color: var(--ht-ink-soft);
    font-size: 14px;
    line-height: 2;
}

.ht-get-website .ht-website-explore-link {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    border: 1px solid var(--ht-ink);
    background: var(--ht-ink);
    color: var(--ht-white);
    font-family: var(--ht-body-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-align: center;
}

.ht-get-website .ht-website-explore-link:hover {
    border-color: var(--ht-ink);
    background: transparent;
    color: var(--ht-ink);
}

/* =========================================================
   SECTION 03: HERO SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 04: INTRODUCTION SECTION — START
   ========================================================= */

.ht-get-website .ht-website-introduction {
    max-width: var(--ht-container);
    margin: 0 auto;
    padding: 125px 40px 130px;
    text-align: center;
}

.ht-get-website .ht-website-introduction h2 {
    max-width: 780px;
    margin: 0 auto 28px;
}

.ht-get-website .ht-website-introduction p {
    max-width: var(--ht-reading-width);
    margin-right: auto;
    margin-left: auto;
}

.ht-get-website .ht-website-introduction p + p {
    margin-top: 15px;
}

/* =========================================================
   SECTION 04: INTRODUCTION SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 05: SERVICES SECTION — START
   ========================================================= */

.ht-get-website .ht-website-services {
    padding: 115px max(40px, calc((100% - var(--ht-container)) / 2));
    background: var(--ht-surface);
    border-top: 1px solid var(--ht-border);
    border-bottom: 1px solid var(--ht-border);
}

.ht-get-website .ht-website-services > .ht-website-section-header {
    margin-bottom: 75px;
}

.ht-get-website .ht-website-service {
    position: relative;
    display: grid;
    grid-template-columns: 75px minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 35px;
    align-items: start;
    padding: 47px 0 51px;
    border-top: 1px solid var(--ht-border);
}

.ht-get-website .ht-website-service:last-child {
    border-bottom: 1px solid var(--ht-border);
}

.ht-get-website .ht-website-service-number {
    display: block;
    padding-top: 5px;
    color: var(--ht-muted);
    font-family: var(--ht-display-font);
    font-size: 29px;
    font-weight: 500;
    line-height: 1;
}

.ht-get-website .ht-website-service h3 {
    margin: 0;
    font-size: clamp(28px, 3vw, 39px);
    line-height: 1.15;
}

.ht-get-website .ht-website-service > p {
    display: none;
}

.ht-get-website .ht-website-service ul {
    grid-column: 3;
    padding: 0;
    margin: 0;
}

.ht-get-website .ht-website-service li {
    position: relative;
    margin: 0;
    padding: 0 0 13px 23px;
    color: var(--ht-ink-soft);
    font-family: var(--ht-body-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.85;
}

.ht-get-website .ht-website-service li:last-child {
    padding-bottom: 0;
}

.ht-get-website .ht-website-service li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border: 1px solid var(--ht-ink);
    border-radius: 50%;
    content: "";
}

.ht-get-website .ht-website-service:hover .ht-website-service-number {
    color: var(--ht-ink);
}

/* =========================================================
   SECTION 05: SERVICES SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 06: PROJECT APPROACH SECTION — START
   ========================================================= */

.ht-get-website .ht-website-approach {
    max-width: var(--ht-container);
    margin: 0 auto;
    padding: 125px 40px 135px;
}

.ht-get-website .ht-website-approach > .ht-website-section-header {
    margin-bottom: 78px;
}

.ht-get-website .ht-website-step {
    display: grid;
    grid-template-columns: 90px minmax(220px, 0.85fr) minmax(0, 1.15fr);
    column-gap: 35px;
    align-items: start;
    padding: 36px 0 39px;
    border-top: 1px solid var(--ht-border);
}

.ht-get-website .ht-website-step:last-child {
    border-bottom: 1px solid var(--ht-border);
}

.ht-get-website .ht-website-step-number {
    display: inline-flex;
    width: 49px;
    height: 49px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ht-border);
    border-radius: 50%;
    color: var(--ht-ink);
    font-family: var(--ht-display-font);
    font-size: 23px;
    line-height: 1;
}

.ht-get-website .ht-website-step h3 {
    margin: 3px 0 0;
    font-size: clamp(26px, 2.6vw, 34px);
}

.ht-get-website .ht-website-step p {
    max-width: 490px;
    margin: 5px 0 0;
    font-size: 13px;
}

/* =========================================================
   SECTION 06: PROJECT APPROACH SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 07: WHY CHOOSE US SECTION — START
   ========================================================= */

.ht-get-website .ht-website-why-us {
    position: relative;
    padding: 115px 30px 120px;
    background: var(--ht-surface-soft);
    border-top: 1px solid var(--ht-border);
    border-bottom: 1px solid var(--ht-border);
    text-align: center;
}

.ht-get-website .ht-website-why-us::before {
    display: block;
    width: 45px;
    height: 1px;
    margin: 0 auto 33px;
    background: var(--ht-ink);
    content: "";
}

.ht-get-website .ht-website-why-us h2 {
    max-width: 860px;
    margin: 0 auto 29px;
}

.ht-get-website .ht-website-why-us p {
    max-width: 730px;
    margin-right: auto;
    margin-left: auto;
}

.ht-get-website .ht-website-why-us p + p {
    margin-top: 15px;
}

/* =========================================================
   SECTION 07: WHY CHOOSE US SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 08: WHATSAPP CONTACT SECTION — START
   ========================================================= */

.ht-get-website .ht-website-contact {
    position: relative;
    max-width: 1060px;
    margin: 100px auto;
    padding: 90px 70px 95px;
    border: 1px solid var(--ht-border-dark);
    background: var(--ht-black);
    color: var(--ht-white);
    text-align: center;
}

.ht-get-website .ht-website-contact::before,
.ht-get-website .ht-website-contact::after {
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.3);
    border-style: solid;
    content: "";
    pointer-events: none;
}

.ht-get-website .ht-website-contact::before {
    top: 15px;
    left: 15px;
    border-width: 1px 0 0 1px;
}

.ht-get-website .ht-website-contact::after {
    right: 15px;
    bottom: 15px;
    border-width: 0 1px 1px 0;
}

.ht-get-website .ht-website-contact .ht-website-section-label {
    color: #c8c6bf;
}

.ht-get-website .ht-website-contact h2 {
    max-width: 760px;
    margin: 0 auto 25px;
    color: var(--ht-white);
    font-size: clamp(39px, 5.5vw, 67px);
}

.ht-get-website .ht-website-contact p {
    max-width: 650px;
    margin: 0 auto 35px;
    color: #cfcdc6;
    font-size: 13px;
    line-height: 2;
}

.ht-get-website .ht-website-whatsapp-button {
    display: inline-flex;
    min-height: 56px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 16px 26px;
    border: 1px solid var(--ht-white);
    background: var(--ht-white);
    color: var(--ht-black);
    font-family: var(--ht-body-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.09em;
    text-align: center;
    overflow-wrap: anywhere;
}

.ht-get-website .ht-website-whatsapp-button:hover {
    border-color: var(--ht-white);
    background: transparent;
    color: var(--ht-white);
}

.ht-get-website .ht-website-whatsapp-button:focus-visible {
    outline: 2px solid var(--ht-white);
    outline-offset: 5px;
}

/* =========================================================
   SECTION 08: WHATSAPP CONTACT SECTION — END
   ========================================================= */


/* =========================================================
   SECTION 09: WORDPRESS CONTENT SAFETY — START
   Prevent theme defaults from disrupting this page
   ========================================================= */

.ht-get-website > section,
.ht-get-website > header {
    max-width: none;
}

.ht-get-website .ht-website-hero > *,
.ht-get-website .ht-website-section-header > *,
.ht-get-website .ht-website-introduction > *,
.ht-get-website .ht-website-why-us > *,
.ht-get-website .ht-website-contact > * {
    position: relative;
}

.ht-get-website .ht-website-service h3,
.ht-get-website .ht-website-step h3 {
    overflow-wrap: anywhere;
}

.ht-get-website .ht-website-explore-link,
.ht-get-website .ht-website-whatsapp-button {
    text-decoration: none;
}

.ht-get-website .ht-website-explore-link:visited {
    color: var(--ht-white);
}

.ht-get-website .ht-website-explore-link:hover:visited {
    color: var(--ht-ink);
}

.ht-get-website .ht-website-whatsapp-button:visited {
    color: var(--ht-black);
}

.ht-get-website .ht-website-whatsapp-button:hover:visited {
    color: var(--ht-white);
}

/* =========================================================
   SECTION 09: WORDPRESS CONTENT SAFETY — END
   ========================================================= */


/* =========================================================
   SECTION 10: TABLET RESPONSIVE — START
   Screens up to 1024px
   ========================================================= */

@media (max-width: 1024px) {

    .ht-get-website .ht-website-hero {
        min-height: 580px;
        padding: 100px 30px;
    }

    .ht-get-website .ht-website-introduction {
        padding: 100px 35px 105px;
    }

    .ht-get-website .ht-website-services {
        padding: 100px 35px;
    }

    .ht-get-website .ht-website-service {
        grid-template-columns: 55px minmax(0, 0.9fr) minmax(0, 1.1fr);
        column-gap: 25px;
    }

    .ht-get-website .ht-website-approach {
        padding: 100px 35px 110px;
    }

    .ht-get-website .ht-website-step {
        grid-template-columns: 65px minmax(190px, 0.9fr) minmax(0, 1.1fr);
        column-gap: 24px;
    }

    .ht-get-website .ht-website-contact {
        margin: 75px 30px;
        padding: 80px 45px;
    }

}

/* =========================================================
   SECTION 10: TABLET RESPONSIVE — END
   ========================================================= */


/* =========================================================
   SECTION 11: MOBILE RESPONSIVE — START
   Screens up to 767px
   ========================================================= */

@media (max-width: 767px) {

    .ht-get-website {
        font-size: 14px;
        line-height: 1.8;
    }

    .ht-get-website p {
        font-size: 13px;
        line-height: 1.9;
    }

    .ht-get-website .ht-website-eyebrow,
    .ht-get-website .ht-website-section-label {
        font-size: 9px;
        letter-spacing: 0.16em;
    }

    .ht-get-website .ht-website-hero {
        min-height: 520px;
        padding: 90px 23px 80px;
    }

    .ht-get-website .ht-website-hero::before {
        height: 55px;
    }

    .ht-get-website .ht-website-hero .ht-website-eyebrow {
        margin-top: 10px;
        margin-bottom: 23px;
    }

    .ht-get-website .ht-website-hero h1 {
        max-width: 580px;
        margin-bottom: 24px;
        font-size: clamp(49px, 11vw, 72px);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .ht-get-website .ht-website-intro {
        max-width: 500px;
        margin-bottom: 29px;
        font-size: 13px;
        line-height: 1.9;
    }

    .ht-get-website .ht-website-explore-link {
        min-height: 49px;
        padding: 13px 18px;
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .ht-get-website .ht-website-introduction {
        padding: 80px 24px 85px;
    }

    .ht-get-website .ht-website-introduction .ht-website-section-label {
        margin-bottom: 20px;
    }

    .ht-get-website .ht-website-introduction h2 {
        margin-bottom: 22px;
        font-size: clamp(36px, 8vw, 48px);
        line-height: 1.1;
    }

    .ht-get-website .ht-website-introduction p + p {
        margin-top: 12px;
    }

    .ht-get-website .ht-website-services {
        padding: 80px 24px;
    }

    .ht-get-website .ht-website-services > .ht-website-section-header {
        margin-bottom: 48px;
    }

    .ht-get-website .ht-website-section-header {
        margin-bottom: 48px;
    }

    .ht-get-website .ht-website-section-header h2 {
        margin-bottom: 19px;
        font-size: clamp(35px, 8vw, 48px);
        line-height: 1.1;
    }

    .ht-get-website .ht-website-service {
        grid-template-columns: 39px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 18px;
        padding: 31px 0 35px;
    }

    .ht-get-website .ht-website-service-number {
        grid-column: 1;
        grid-row: 1;
        padding-top: 4px;
        font-size: 25px;
    }

    .ht-get-website .ht-website-service h3 {
        grid-column: 2;
        grid-row: 1;
        font-size: clamp(27px, 6vw, 35px);
        line-height: 1.15;
    }

    .ht-get-website .ht-website-service ul {
        grid-column: 2;
        grid-row: 2;
    }

    .ht-get-website .ht-website-service li {
        padding-bottom: 12px;
        font-size: 12px;
        line-height: 1.8;
    }

    .ht-get-website .ht-website-service li::before {
        top: 8px;
    }

    .ht-get-website .ht-website-approach {
        padding: 80px 24px 85px;
    }

    .ht-get-website .ht-website-approach > .ht-website-section-header {
        margin-bottom: 47px;
    }

    .ht-get-website .ht-website-step {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 12px;
        padding: 29px 0 31px;
    }

    .ht-get-website .ht-website-step-number {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 39px;
        height: 39px;
        font-size: 20px;
    }

    .ht-get-website .ht-website-step h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 1px 0 0;
        font-size: clamp(26px, 5.8vw, 33px);
        line-height: 1.17;
    }

    .ht-get-website .ht-website-step p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 12px;
        line-height: 1.9;
    }

    .ht-get-website .ht-website-why-us {
        padding: 80px 24px 85px;
    }

    .ht-get-website .ht-website-why-us::before {
        margin-bottom: 26px;
    }

    .ht-get-website .ht-website-why-us h2 {
        margin-bottom: 23px;
        font-size: clamp(36px, 8vw, 49px);
        line-height: 1.1;
    }

    .ht-get-website .ht-website-why-us p + p {
        margin-top: 13px;
    }

    .ht-get-website .ht-website-contact {
        margin: 45px 16px;
        padding: 65px 24px 70px;
    }

    .ht-get-website .ht-website-contact::before {
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
    }

    .ht-get-website .ht-website-contact::after {
        right: 10px;
        bottom: 10px;
        width: 24px;
        height: 24px;
    }

    .ht-get-website .ht-website-contact h2 {
        margin-bottom: 21px;
        font-size: clamp(38px, 8.5vw, 53px);
        line-height: 1.08;
    }

    .ht-get-website .ht-website-contact p {
        margin-bottom: 28px;
        font-size: 12px;
        line-height: 1.9;
    }

    .ht-get-website .ht-website-whatsapp-button {
        width: 100%;
        min-height: 54px;
        padding: 15px 13px;
        font-size: 9px;
        letter-spacing: 0.055em;
    }

}

/* =========================================================
   SECTION 11: MOBILE RESPONSIVE — END
   ========================================================= */


/* =========================================================
   SECTION 12: SMALL MOBILE RESPONSIVE — START
   Screens up to 380px
   ========================================================= */

@media (max-width: 380px) {

    .ht-get-website .ht-website-hero {
        min-height: 475px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .ht-get-website .ht-website-hero h1 {
        font-size: 46px;
    }

    .ht-get-website .ht-website-introduction,
    .ht-get-website .ht-website-services,
    .ht-get-website .ht-website-approach {
        padding-right: 18px;
        padding-left: 18px;
    }

    .ht-get-website .ht-website-service {
        grid-template-columns: 31px minmax(0, 1fr);
        column-gap: 12px;
    }

    .ht-get-website .ht-website-service h3 {
        font-size: 27px;
    }

    .ht-get-website .ht-website-step {
        grid-template-columns: 39px minmax(0, 1fr);
        column-gap: 12px;
    }

    .ht-get-website .ht-website-step-number {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .ht-get-website .ht-website-step h3 {
        font-size: 25px;
    }

    .ht-get-website .ht-website-contact {
        margin-right: 12px;
        margin-left: 12px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .ht-get-website .ht-website-contact h2 {
        font-size: 37px;
    }

}

/* =========================================================
   SECTION 12: SMALL MOBILE RESPONSIVE — END
   ========================================================= */


/* =========================================================
   SECTION 13: ACCESSIBILITY — START
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ht-get-website *,
    .ht-get-website *::before,
    .ht-get-website *::after {
        scroll-behavior: auto;
    }

}

/* =========================================================
   SECTION 13: ACCESSIBILITY — END
   ========================================================= */


/* =========================================================
   HATIM TECH — GET YOUR WEBSITE CSS
   COMPLETE STYLESHEET — END
   ========================================================= */


/* =====================================================
   THE HATIM STORE — SQUARE SCROLLBAR
   START
   ===================================================== */

/* Firefox */
html {
    scrollbar-width: auto !important;
    scrollbar-color: #111111 #ffffff !important;
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar {
    width: 16px !important;
    height: 16px !important;
}

html::-webkit-scrollbar-track {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 0 !important;
}

html::-webkit-scrollbar-thumb {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    min-height: 40px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #383838 !important;
    border-radius: 0 !important;
}

html::-webkit-scrollbar-thumb:active {
    background: #000000 !important;
}

html::-webkit-scrollbar-corner {
    background: #ffffff !important;
}

/* =====================================================
   THE HATIM STORE — SQUARE SCROLLBAR
   END
   ===================================================== */


/* ============================================================
   END — THE HATIM STORE MONOCHROME EDITORIAL PAGE SYSTEM
   ============================================================ */





/* ================================================================
   THE HATIM STORE
   LUXURY MY ACCOUNT — IVORY EDITION
   Package: HatimTechCore

   DESIGN:
   Ivory / White / Black / Soft Grey
   Centered welcome
   Centered account navigation
   Editorial luxury typography
   Distinct content sections
   Responsive desktop / tablet / mobile

   IMPORTANT:
   Replace the previous THS My Account CSS block.
   Keep all CSS inside the existing style.css.
   ================================================================ */


/* ================================================================
   01. DESIGN SYSTEM
   ================================================================ */

.ths-account-page {
    --ths-ivory: #faf9f6;
    --ths-white: #ffffff;
    --ths-black: #151515;
    --ths-ink: #252525;
    --ths-text: #55534f;
    --ths-muted: #85827c;
    --ths-line: #e8e5df;
    --ths-line-dark: #c9c4bb;
    --ths-soft: #f3f1ec;

    /* START: THS LUXURY FONT SYSTEM */

--ths-display-font:
    "Playfair Display",
    "Bodoni MT",
    Didot,
    Georgia,
    serif;

--ths-body-font:
    "Montserrat",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

/* END: THS LUXURY FONT SYSTEM */
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    background: var(--ths-white);
    color: var(--ths-ink);

    font-family: var(--ths-body-font);
    font-size: 14px;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-wrap: anywhere;
}

.ths-account-page *,
.ths-account-page *::before,
.ths-account-page *::after {
    box-sizing: border-box;
}

.ths-account-page img,
.ths-account-page svg {
    max-width: 100%;
}

.ths-account-page a {
    overflow-wrap: anywhere;
}

.ths-account-page button,
.ths-account-page input,
.ths-account-page select,
.ths-account-page textarea {
    font: inherit;
}

.ths-account-page :focus-visible {
    outline: 2px solid var(--ths-black);
    outline-offset: 4px;
}


/* ================================================================
   02. CENTERED IVORY WELCOME HERO
   No black background. No dark hero.
   ================================================================ */

.ths-account-page .ths-account-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 350px;
    margin: 0;
    padding: 76px 28px 70px;

    overflow: hidden;

    background: var(--ths-ivory);
    color: var(--ths-black);

    text-align: center;
}

.ths-account-page .ths-account-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 17px;

    border: 1px solid var(--ths-line);

    pointer-events: none;
}

.ths-account-page .ths-account-hero::after {
    content: "THS";
    position: absolute;
    z-index: -1;

    right: 50%;
    bottom: -36px;

    transform: translateX(50%);

    color: transparent;
    -webkit-text-stroke: 1px rgba(20, 20, 20, 0.045);

    font-family: var(--ths-display-font);
    font-size: clamp(160px, 24vw, 280px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 8px;

    pointer-events: none;
    user-select: none;
}

.ths-account-page .ths-account-hero__frame {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.ths-account-page .ths-account-eyebrow {
    display: inline-block;

    margin: 0 0 24px;
    padding: 0 0 11px;

    border-bottom: 1px solid var(--ths-line-dark);

    color: var(--ths-text);

    font-family: var(--ths-body-font);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ths-account-page .ths-account-hero__title {
    max-width: 800px;
    margin: 0 auto 19px;

    color: var(--ths-black);

    font-family: var(--ths-display-font);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -1.8px;

    text-align: center;
    text-wrap: balance;
}

.ths-account-page .ths-account-hero__description {
    max-width: 510px;
    margin: 0 auto 25px;

    color: var(--ths-text);

    font-family: var(--ths-body-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.95;

    text-align: center;
}

.ths-account-page .ths-account-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;

    margin: 0;
    padding: 0;

    color: var(--ths-muted);

    font-size: 8px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ths-account-page .ths-account-hero__meta-line {
    display: inline-block;

    width: 23px;
    height: 1px;

    background: var(--ths-line-dark);
}


/* ================================================================
   03. MAIN CONTENT WIDTH
   ================================================================ */

.ths-account-page .ths-account-shell {
    width: calc(100% - 72px);
    max-width: 1240px;

    margin: 0 auto;
    padding: 0 0 100px;
}


/* ================================================================
   04. CENTERED WELCOME SECTION
   Different visual treatment from the hero.
   ================================================================ */

.ths-account-page .ths-account-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    margin: 0;
    padding: 62px 15px 47px;

    border-bottom: 1px solid var(--ths-line);

    text-align: center;
}

.ths-account-page .ths-account-intro__copy {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.ths-account-page .ths-account-kicker {
    margin: 0 0 16px;

    color: var(--ths-muted);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ths-account-page .ths-account-intro__title {
    margin: 0 0 15px;

    color: var(--ths-black);

    font-family: var(--ths-display-font);
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.7px;

    text-align: center;
    text-wrap: balance;
}

.ths-account-page .ths-account-intro__title span {
    font-weight: 500;
}

.ths-account-page .ths-account-intro__description {
    max-width: 560px;
    margin: 0 auto;

    color: var(--ths-text);

    font-size: 13px;
    line-height: 1.9;
    text-align: center;
}


/* ================================================================
   05. ORDERS LINK
   Understated editorial action instead of a large filled card.
   ================================================================ */

.ths-account-page .ths-account-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 42px;
    margin-top: 25px;
    padding: 9px 0;

    border: 0;
    border-bottom: 1px solid var(--ths-black);
    border-radius: 0;

    background: transparent;
    color: var(--ths-black);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.ths-account-page .ths-account-primary-link span {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ths-account-page .ths-account-primary-link:hover {
    border-color: var(--ths-muted);
    background: transparent;
    color: var(--ths-muted);
}

.ths-account-page .ths-account-primary-link:hover span {
    transform: translate(2px, -2px);
}


/* ================================================================
   06. CENTERED ACCOUNT NAVIGATION
   ================================================================ */

.ths-account-page .ths-account-navigation {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 100%;
    margin: 0;
    padding: 35px 0 0;
}

.ths-account-page .ths-account-navigation__label {
    margin: 0 0 19px;

    color: var(--ths-muted);

    font-size: 8px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

.ths-account-page .ths-account-navigation__menu {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    border-top: 1px solid var(--ths-line);
    border-bottom: 1px solid var(--ths-line);
}


/* ================================================================
   07. WOOCOMMERCE NATIVE MENU
   Centered links, fine underline, no chunky tabs.
   ================================================================ */

.ths-account-page .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
}

.ths-account-page .woocommerce-MyAccount-navigation ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

.ths-account-page .woocommerce-MyAccount-navigation li {
    position: relative;

    display: flex;
    align-items: stretch;
    justify-content: center;

    float: none;
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
}

.ths-account-page .woocommerce-MyAccount-navigation li a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;
    padding: 17px 19px;

    border: 0;
    background: transparent;
    color: #77736d;

    font-family: var(--ths-body-font);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.9px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.ths-account-page .woocommerce-MyAccount-navigation li a::after {
    content: "";
    position: absolute;

    right: 19px;
    bottom: -1px;
    left: 19px;

    height: 1px;

    background: var(--ths-black);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.22s ease;
}

.ths-account-page .woocommerce-MyAccount-navigation li a:hover,
.ths-account-page .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--ths-black);
}

.ths-account-page .woocommerce-MyAccount-navigation li a:hover::after,
.ths-account-page .woocommerce-MyAccount-navigation li.is-active a::after {
    transform: scaleX(1);
}

.ths-account-page .woocommerce-MyAccount-navigation li.is-active a {
    font-weight: 700;
}


/* ================================================================
   08. ENDPOINT CONTENT FOUNDATION
   ================================================================ */

.ths-account-page .ths-account-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 49px 0 0;

    color: var(--ths-text);
}

.ths-account-page .ths-account-content::after {
    content: "";
    display: block;
    clear: both;
}

.ths-account-page .ths-account-content > :first-child {
    margin-top: 0;
}

.ths-account-page .ths-account-content h1,
.ths-account-page .ths-account-content h2,
.ths-account-page .ths-account-content h3,
.ths-account-page .ths-account-content h4 {
    color: var(--ths-black);
}

.ths-account-page .ths-account-content h2 {
    margin: 0 0 23px;

    font-family: var(--ths-display-font);
    font-size: clamp(33px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.5px;
}

.ths-account-page .ths-account-content h3 {
    margin: 30px 0 15px;

    font-family: var(--ths-display-font);
    font-size: 29px;
    font-weight: 500;
    line-height: 1.2;
}

.ths-account-page .ths-account-content p {
    margin: 0 0 18px;
}

.ths-account-page .ths-account-content a:not(.button):not(.woocommerce-button):not(.ths-account-primary-link) {
    color: var(--ths-black);
    text-decoration-color: #b9b5ad;
    text-underline-offset: 4px;
}

.ths-account-page .ths-account-content a:not(.button):not(.woocommerce-button):not(.ths-account-primary-link):hover {
    text-decoration-color: var(--ths-black);
}


/* ================================================================
   09. BUTTONS — CLEAN LUXURY
   ================================================================ */

.ths-account-page .ths-account-content .button,
.ths-account-page .ths-account-content button.button,
.ths-account-page .ths-account-content input.button,
.ths-account-page .ths-account-content a.button,
.ths-account-page .ths-account-content .woocommerce-button,
.ths-account-page .woocommerce-form-login__submit,
.ths-account-page .woocommerce-form-register__submit,
.ths-account-page .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;
    max-width: 100%;
    padding: 12px 20px;

    border: 1px solid var(--ths-black);
    border-radius: 0;

    background: var(--ths-black);
    color: var(--ths-white);

    font-family: var(--ths-body-font);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.ths-account-page .ths-account-content .button:hover,
.ths-account-page .ths-account-content button.button:hover,
.ths-account-page .ths-account-content input.button:hover,
.ths-account-page .ths-account-content a.button:hover,
.ths-account-page .ths-account-content .woocommerce-button:hover,
.ths-account-page .woocommerce-form-login__submit:hover,
.ths-account-page .woocommerce-form-register__submit:hover,
.ths-account-page .woocommerce-Button:hover {
    background: var(--ths-white);
    color: var(--ths-black);
    border-color: var(--ths-black);
}


/* ================================================================
   10. FORMS — TYPOGRAPHY AND INPUTS
   ================================================================ */

.ths-account-page .ths-account-content form {
    max-width: 100%;
}

.ths-account-page .ths-account-content label {
    display: inline-block;
    margin: 0 0 8px;

    color: var(--ths-ink);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
}

.ths-account-page .ths-account-content label .required {
    color: #8b3434;
    text-decoration: none;
}

.ths-account-page .ths-account-content input[type="text"],
.ths-account-page .ths-account-content input[type="email"],
.ths-account-page .ths-account-content input[type="password"],
.ths-account-page .ths-account-content input[type="tel"],
.ths-account-page .ths-account-content input[type="number"],
.ths-account-page .ths-account-content input[type="search"],
.ths-account-page .ths-account-content input[type="url"],
.ths-account-page .ths-account-content input[type="date"],
.ths-account-page .ths-account-content select,
.ths-account-page .ths-account-content textarea {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 13px;

    border: 1px solid #dedbd5;
    border-radius: 0;

    background: var(--ths-white);
    color: var(--ths-black);

    font-family: var(--ths-body-font);
    font-size: 13px;
    line-height: 1.7;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ths-account-page .ths-account-content textarea {
    min-height: 125px;
    resize: vertical;
}

.ths-account-page .ths-account-content input::placeholder,
.ths-account-page .ths-account-content textarea::placeholder {
    color: #99958e;
    opacity: 1;
}

.ths-account-page .ths-account-content input:focus,
.ths-account-page .ths-account-content select:focus,
.ths-account-page .ths-account-content textarea:focus {
    border-color: var(--ths-black);
    outline: none;
    box-shadow: 0 0 0 1px var(--ths-black);
}

.ths-account-page .ths-account-content .form-row {
    margin: 0 0 22px;
    padding: 0;
}

.ths-account-page .ths-account-content .form-row-first,
.ths-account-page .ths-account-content .form-row-last {
    width: calc(50% - 12px);
}

.ths-account-page .ths-account-content .form-row-first {
    float: left;
    clear: left;
}

.ths-account-page .ths-account-content .form-row-last {
    float: right;
    clear: right;
}

.ths-account-page .ths-account-content .form-row-wide {
    clear: both;
    width: 100%;
}

.ths-account-page .ths-account-content .form-row::after {
    content: "";
    display: block;
    clear: both;
}

.ths-account-page .ths-account-content fieldset {
    min-width: 0;
    margin: 30px 0;
    padding: 22px;

    border: 1px solid var(--ths-line);
}

.ths-account-page .ths-account-content legend {
    padding: 0 10px;

    color: var(--ths-black);

    font-family: var(--ths-display-font);
    font-size: 22px;
    font-weight: 500;
}

.ths-account-page .ths-account-content .password-input {
    display: block;
    width: 100%;
}


/* ================================================================
   11. CHECKBOXES AND PASSWORD HINTS
   ================================================================ */

.ths-account-page .ths-account-content input[type="checkbox"],
.ths-account-page .ths-account-content input[type="radio"] {
    accent-color: var(--ths-black);
}

.ths-account-page .ths-account-content .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;

    margin: 8px 0 15px;

    color: var(--ths-text);

    font-size: 11px;
    font-weight: 400;
}

.ths-account-page .ths-account-content .woocommerce-form__label-for-checkbox input {
    flex: 0 0 auto;
    margin-top: 5px;
}

.ths-account-page .ths-account-content .woocommerce-password-strength {
    margin-top: 10px;
    padding: 8px 10px;

    border-radius: 0;
    font-size: 11px;
}

.ths-account-page .ths-account-content .woocommerce-password-hint {
    color: var(--ths-muted);
    font-size: 11px;
}


/* ================================================================
   12. ORDERS AND OTHER TABLES
   ================================================================ */

.ths-account-page .ths-account-content .woocommerce-orders-table,
.ths-account-page .ths-account-content .woocommerce-table--order-details,
.ths-account-page .ths-account-content .woocommerce-table--customer-details,
.ths-account-page .ths-account-content table.shop_table {
    width: 100%;
    max-width: 100%;
    margin: 25px 0 32px;

    border: 0;
    border-collapse: collapse;
    border-spacing: 0;

    background: var(--ths-white);
    font-size: 12px;
    text-align: left;
}

.ths-account-page .ths-account-content table.shop_table th,
.ths-account-page .ths-account-content table.shop_table td,
.ths-account-page .ths-account-content .woocommerce-table th,
.ths-account-page .ths-account-content .woocommerce-table td {
    padding: 15px 13px;

    border: 0;
    border-bottom: 1px solid var(--ths-line);
    vertical-align: middle;
}

.ths-account-page .ths-account-content table.shop_table thead th,
.ths-account-page .ths-account-content .woocommerce-table thead th {
    border-top: 1px solid var(--ths-line);
    background: var(--ths-ivory);
    color: var(--ths-black);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ths-account-page .ths-account-content table.shop_table tfoot th,
.ths-account-page .ths-account-content table.shop_table tfoot td {
    background: transparent;
    color: var(--ths-black);
}

.ths-account-page .ths-account-content .woocommerce-orders-table__cell-order-actions .button {
    min-height: 34px;
    margin: 3px 4px 3px 0;
    padding: 8px 11px;

    font-size: 8px;
    letter-spacing: 0.6px;
}







/* ================================================================
   13. ADDRESSES
   Open editorial layout, not repeated rounded cards.
   ================================================================ */

.ths-account-page .ths-account-content .woocommerce-Addresses,
.ths-account-page .ths-account-content .u-columns.woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;

    width: 100%;
    margin: 25px 0;
}

.ths-account-page .ths-account-content .woocommerce-Addresses::before,
.ths-account-page .ths-account-content .woocommerce-Addresses::after {
    display: none;
}

.ths-account-page .ths-account-content .woocommerce-Address {
    float: none;
    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.ths-account-page .ths-account-content .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin: 0 0 18px;
    padding: 0 0 16px;

    border-bottom: 1px solid var(--ths-line);
}

.ths-account-page .ths-account-content .woocommerce-Address-title h2,
.ths-account-page .ths-account-content .woocommerce-Address-title h3 {
    margin: 0;

    font-family: var(--ths-display-font);
    font-size: 27px;
    font-weight: 500;
}

.ths-account-page .ths-account-content .woocommerce-Address-title .edit {
    color: var(--ths-black);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: uppercase;
}

.ths-account-page .ths-account-content .woocommerce-Address address {
    margin: 0;

    color: var(--ths-text);

    font-size: 12px;
    font-style: normal;
    line-height: 2.1;
}


/* ================================================================
   14. LOGIN AND REGISTRATION
   ================================================================ */

.ths-account-page .ths-account-content .u-columns.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px;

    width: 100%;
    margin: 0;
}

.ths-account-page .ths-account-content .u-columns.col2-set::before,
.ths-account-page .ths-account-content .u-columns.col2-set::after {
    display: none;
}

.ths-account-page .ths-account-content .u-columns.col2-set > .u-column1,
.ths-account-page .ths-account-content .u-columns.col2-set > .u-column2 {
    float: none;
    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.ths-account-page .ths-account-content .u-columns.col2-set h2 {
    margin: 0 0 25px;
    padding: 0 0 15px;

    border-bottom: 1px solid var(--ths-line);

    font-family: var(--ths-display-font);
    font-size: 36px;
    font-weight: 500;
}

.ths-account-page .ths-account-content .woocommerce-form-login,
.ths-account-page .ths-account-content .woocommerce-form-register,
.ths-account-page .ths-account-content .woocommerce-ResetPassword {
    max-width: 680px;
    margin: 0;
    padding: 26px;

    border: 1px solid var(--ths-line);
    border-radius: 0;

    background: var(--ths-white);
}

.ths-account-page .ths-account-content .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0 14px 14px 0;

    font-size: 11px;
}

.ths-account-page .ths-account-content .woocommerce-LostPassword {
    margin-top: 18px;
    font-size: 11px;
}


/* ================================================================
   15. NOTICES AND EMPTY STATES
   ================================================================ */

.ths-account-page .ths-account-content .woocommerce-info,
.ths-account-page .ths-account-content .woocommerce-message,
.ths-account-page .ths-account-content .woocommerce-error {
    margin: 0 0 24px;
    padding: 16px 18px 16px 44px;

    border: 0;
    border-top: 1px solid var(--ths-line-dark);
    border-bottom: 1px solid var(--ths-line);

    border-radius: 0;

    background: var(--ths-ivory);
    color: var(--ths-text);

    font-size: 12px;
    line-height: 1.9;
}

.ths-account-page .ths-account-content .woocommerce-info::before,
.ths-account-page .ths-account-content .woocommerce-message::before,
.ths-account-page .ths-account-content .woocommerce-error::before {
    top: 16px;
    left: 16px;
}

.ths-account-page .ths-account-content .woocommerce-error {
    border-top-color: #a33b35;
}

.ths-account-page .ths-account-content .woocommerce-message .button,
.ths-account-page .ths-account-content .woocommerce-info .button {
    margin-left: 10px;
}


/* ================================================================
   16. PAGINATION
   ================================================================ */

.ths-account-page .ths-account-content .woocommerce-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 7px;

    margin: 25px 0;
}

.ths-account-page .ths-account-content .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    min-height: 38px;
    padding: 8px 11px;

    border: 1px solid var(--ths-line);
    border-radius: 0;

    background: var(--ths-white);
    color: var(--ths-black);

    font-size: 11px;
    text-decoration: none;
}

.ths-account-page .ths-account-content .woocommerce-pagination .page-numbers.current,
.ths-account-page .ths-account-content .woocommerce-pagination .page-numbers:hover {
    border-color: var(--ths-black);
    background: var(--ths-black);
    color: var(--ths-white);
}


/* ================================================================
   17. EXISTING CUSTOM DASHBOARD COMPATIBILITY
   Preserve the existing dashboard markup.
   ================================================================ */

.ths-account-page .ths-dashboard {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.ths-account-page .ths-dashboard-heading {
    margin-bottom: 32px;
}

.ths-account-page .ths-dashboard-heading h2,
.ths-account-page .ths-dashboard-heading h3 {
    color: var(--ths-black);
    font-family: var(--ths-display-font);
    font-weight: 500;
}

.ths-account-page .ths-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;

    margin: 28px 0 45px;

    border-top: 1px solid var(--ths-line);
    border-bottom: 1px solid var(--ths-line);
}

.ths-account-page .ths-dashboard-stat {
    min-width: 0;
    padding: 24px 22px;

    border: 0;
    border-right: 1px solid var(--ths-line);
    border-radius: 0;

    background: transparent;
}

.ths-account-page .ths-dashboard-stat:last-child {
    border-right: 0;
}

.ths-account-page .ths-dashboard-stat h3,
.ths-account-page .ths-dashboard-stat strong {
    color: var(--ths-black);
}

.ths-account-page .ths-dashboard-stat > * {
    overflow-wrap: anywhere;
}

.ths-account-page .ths-dashboard-orders,
.ths-account-page .ths-dashboard-profile,
.ths-account-page .ths-dashboard-shortcuts {
    min-width: 0;
    margin: 0 0 45px;
}

.ths-account-page .ths-order-list {
    width: 100%;
    min-width: 0;
}

.ths-account-page .ths-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;

    padding: 20px 0;

    border-top: 1px solid var(--ths-line);
}

.ths-account-page .ths-order-row:last-child {
    border-bottom: 1px solid var(--ths-line);
}

.ths-account-page .ths-order-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ths-account-page .ths-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
}

.ths-account-page .ths-dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ths-account-page .ths-dashboard-shortcuts > * {
    min-width: 0;
}

.ths-account-page .ths-dashboard-shortcuts a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 55px;
    padding: 13px 0;

    border: 0;
    border-bottom: 1px solid var(--ths-line);
    border-radius: 0;

    background: transparent;
    color: var(--ths-black);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;

    transition: border-color 0.2s ease;
}

.ths-account-page .ths-dashboard-shortcuts a:hover {
    border-color: var(--ths-black);
    background: transparent;
}


/* ================================================================
   18. TABLET LAYOUT
   ================================================================ */

@media (max-width: 1024px) {
    .ths-account-page .ths-account-shell {
        width: calc(100% - 48px);
    }

    .ths-account-page .ths-account-hero {
        min-height: 320px;
    }

    .ths-account-page .woocommerce-MyAccount-navigation li a {
        padding-right: 13px;
        padding-left: 13px;
        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .ths-account-page .ths-dashboard-stat {
        padding: 20px 15px;
    }

    .ths-account-page .ths-dashboard-shortcuts {
        gap: 15px;
    }
}


/* ================================================================
   19. MOBILE LAYOUT
   ================================================================ */

@media (max-width: 767px) {
    .ths-account-page {
        font-size: 13px;
    }

    .ths-account-page .ths-account-hero {
        min-height: 280px;
        padding: 55px 22px;
    }

    .ths-account-page .ths-account-hero::before {
        inset: 10px;
    }

    .ths-account-page .ths-account-hero::after {
        bottom: -4px;
        font-size: 140px;
    }

    .ths-account-page .ths-account-eyebrow {
        margin-bottom: 20px;
        padding-bottom: 9px;
        font-size: 8px;
        letter-spacing: 3px;
    }

    .ths-account-page .ths-account-hero__title {
        font-size: clamp(43px, 11vw, 62px);
        line-height: 1.02;
        letter-spacing: -0.8px;
    }

    .ths-account-page .ths-account-hero__description {
        max-width: 390px;
        margin-bottom: 20px;
        font-size: 12px;
    }

    .ths-account-page .ths-account-hero__meta {
        gap: 9px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ths-account-page .ths-account-hero__meta-line {
        width: 15px;
    }

    .ths-account-page .ths-account-shell {
        width: calc(100% - 36px);
        padding-bottom: 60px;
    }

    .ths-account-page .ths-account-intro {
        padding: 41px 4px 33px;
    }

    .ths-account-page .ths-account-kicker {
        margin-bottom: 13px;
        font-size: 8px;
        letter-spacing: 2.2px;
    }

    .ths-account-page .ths-account-intro__title {
        margin-bottom: 13px;
        font-size: clamp(35px, 9vw, 47px);
        line-height: 1.08;
    }

    .ths-account-page .ths-account-intro__description {
        max-width: 400px;
        font-size: 12px;
    }

    .ths-account-page .ths-account-primary-link {
        margin-top: 20px;
        font-size: 8px;
    }

    .ths-account-page .ths-account-navigation {
        padding-top: 28px;
    }

    .ths-account-page .ths-account-navigation__label {
        margin-bottom: 14px;
        font-size: 7px;
        letter-spacing: 2.5px;
    }

    .ths-account-page .ths-account-navigation__menu {
        overflow: hidden;
    }

    .ths-account-page .woocommerce-MyAccount-navigation ul {
        flex-wrap: nowrap;
        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: thin;
        scrollbar-color: #c8c3ba transparent;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .ths-account-page .woocommerce-MyAccount-navigation li {
        flex: 0 0 auto;
    }

    .ths-account-page .woocommerce-MyAccount-navigation li a {
        min-height: 49px;
        padding: 14px 13px;

        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .ths-account-page .woocommerce-MyAccount-navigation li a::after {
        right: 13px;
        left: 13px;
    }

    .ths-account-page .ths-account-content {
        padding-top: 35px;
    }

    .ths-account-page .ths-account-content h2 {
        font-size: 36px;
    }

    .ths-account-page .ths-account-content h3 {
        font-size: 26px;
    }

    /* Forms */

    .ths-account-page .ths-account-content .form-row-first,
    .ths-account-page .ths-account-content .form-row-last {
        float: none;
        clear: both;
        width: 100%;
    }

    .ths-account-page .ths-account-content .form-row {
        margin-bottom: 18px;
    }

    .ths-account-page .ths-account-content input[type="text"],
    .ths-account-page .ths-account-content input[type="email"],
    .ths-account-page .ths-account-content input[type="password"],
    .ths-account-page .ths-account-content input[type="tel"],
    .ths-account-page .ths-account-content input[type="number"],
    .ths-account-page .ths-account-content input[type="search"],
    .ths-account-page .ths-account-content input[type="url"],
    .ths-account-page .ths-account-content input[type="date"],
    .ths-account-page .ths-account-content select,
    .ths-account-page .ths-account-content textarea {
        min-height: 46px;
        font-size: 13px;
    }

    .ths-account-page .ths-account-content fieldset {
        margin: 24px 0;
        padding: 17px;
    }

    /* Addresses */

    .ths-account-page .ths-account-content .woocommerce-Addresses,
    .ths-account-page .ths-account-content .u-columns.woocommerce-Addresses {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ths-account-page .ths-account-content .woocommerce-Address-title h2,
    .ths-account-page .ths-account-content .woocommerce-Address-title h3 {
        font-size: 25px;
    }

    /* Login / registration */

    .ths-account-page .ths-account-content .u-columns.col2-set {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .ths-account-page .ths-account-content .u-columns.col2-set > .u-column1,
    .ths-account-page .ths-account-content .u-columns.col2-set > .u-column2 {
        padding: 0;
    }

    .ths-account-page .ths-account-content .u-columns.col2-set h2 {
        font-size: 33px;
    }

    .ths-account-page .ths-account-content .woocommerce-form-login,
    .ths-account-page .ths-account-content .woocommerce-form-register,
    .ths-account-page .ths-account-content .woocommerce-ResetPassword {
        padding: 19px;
    }

    /* Tables */

    .ths-account-page .ths-account-content .woocommerce-orders-table,
    .ths-account-page .ths-account-content table.shop_table,
    .ths-account-page .ths-account-content .woocommerce-table--order-details {
        display: block;
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .ths-account-page .ths-account-content table.shop_table th,
    .ths-account-page .ths-account-content table.shop_table td,
    .ths-account-page .ths-account-content .woocommerce-table th,
    .ths-account-page .ths-account-content .woocommerce-table td {
        min-width: 100px;
        padding: 12px 10px;
        font-size: 11px;
    }

    .ths-account-page .ths-account-content .woocommerce-orders-table__cell-order-actions .button {
        min-height: 32px;
        padding: 8px 9px;
        font-size: 7px;
    }

    /* Notices */

    .ths-account-page .ths-account-content .woocommerce-info,
    .ths-account-page .ths-account-content .woocommerce-message,
    .ths-account-page .ths-account-content .woocommerce-error {
        padding: 13px 13px 13px 38px;
        font-size: 11px;
    }

    .ths-account-page .ths-account-content .woocommerce-info::before,
    .ths-account-page .ths-account-content .woocommerce-message::before,
    .ths-account-page .ths-account-content .woocommerce-error::before {
        left: 12px;
    }

    .ths-account-page .ths-account-content .woocommerce-message .button,
    .ths-account-page .ths-account-content .woocommerce-info .button {
        display: flex;
        width: fit-content;
        max-width: 100%;
        margin: 12px 0 0;
    }

    /* Dashboard */

    .ths-account-page .ths-dashboard-stats {
        grid-template-columns: minmax(0, 1fr);
        margin: 24px 0 35px;
    }

    .ths-account-page .ths-dashboard-stat {
        padding: 18px 4px;

        border-right: 0;
        border-bottom: 1px solid var(--ths-line);
    }

    .ths-account-page .ths-dashboard-stat:last-child {
        border-bottom: 0;
    }

    .ths-account-page .ths-dashboard-orders,
    .ths-account-page .ths-dashboard-profile,
    .ths-account-page .ths-dashboard-shortcuts {
        margin-bottom: 35px;
    }

    .ths-account-page .ths-order-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 17px 0;
    }

    .ths-account-page .ths-profile-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .ths-account-page .ths-dashboard-shortcuts {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .ths-account-page .ths-dashboard-shortcuts a {
        min-height: 49px;
    }
}


/* ================================================================
   20. EXTRA SMALL MOBILE
   ================================================================ */

@media (max-width: 380px) {
    .ths-account-page .ths-account-shell {
        width: calc(100% - 28px);
    }

    .ths-account-page .ths-account-hero {
        min-height: 255px;
        padding: 48px 18px;
    }

    .ths-account-page .ths-account-hero__title {
        font-size: 42px;
    }

    .ths-account-page .ths-account-hero__meta {
        gap: 7px;
        font-size: 6px;
        letter-spacing: 0.8px;
    }

    .ths-account-page .ths-account-intro__title {
        font-size: 34px;
    }

    .ths-account-page .woocommerce-MyAccount-navigation li a {
        padding-right: 11px;
        padding-left: 11px;
        font-size: 7px;
    }

    .ths-account-page .ths-account-content .woocommerce-form-login,
    .ths-account-page .ths-account-content .woocommerce-form-register,
    .ths-account-page .ths-account-content .woocommerce-ResetPassword {
        padding: 15px;
    }
}


/* ================================================================
   21. REDUCED MOTION ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ths-account-page *,
    .ths-account-page *::before,
    .ths-account-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   END: THS LUXURY MY ACCOUNT — IVORY EDITION
   ================================================================ */



   
/* ============================================================
   START: THS MINIMAL LUXURY DASHBOARD
   PROJECT: THE HATIM STORE
   FILE: style.css

   DESIGN:
   Ivory / White / Charcoal
   Editorial typography
   Minimal order statistics
   Premium recent-orders table
   Desktop / Tablet / Mobile responsive
   ============================================================ */


/* ------------------------------------------------------------
   01. DASHBOARD FOUNDATION
   ------------------------------------------------------------ */

.ths-account-page .ths-dashboard {
    --ths-dash-ink: #191916;
    --ths-dash-muted: #77756e;
    --ths-dash-line: #e5e2da;
    --ths-dash-ivory: #f7f6f2;
    --ths-dash-paper: #ffffff;
    --ths-dash-black: #151513;

    --ths-dash-serif: var(--ths-display-font);
    --ths-dash-sans: var(--ths-body-font);

    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-sans);
    font-size: 14px;
    line-height: 1.8;

    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ths-account-page .ths-dashboard *,
.ths-account-page .ths-dashboard *::before,
.ths-account-page .ths-dashboard *::after {
    box-sizing: border-box;
}

.ths-account-page .ths-dashboard a {
    color: inherit;
}

.ths-account-page .ths-dashboard a:focus-visible {
    outline: 2px solid var(--ths-dash-ink);
    outline-offset: 4px;
}


/* ------------------------------------------------------------
   02. ORDER STATISTICS
   Two simple columns, no separate floating cards.
   ------------------------------------------------------------ */

.ths-account-page .ths-dashboard__overview {
    width: 100%;
    margin: 0 0 54px;
}

.ths-account-page .ths-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    border-top: 1px solid var(--ths-dash-line);
    border-bottom: 1px solid var(--ths-dash-line);
    background: var(--ths-dash-paper);
}

.ths-account-page .ths-dashboard__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    min-height: 145px;
    padding: 26px 30px;

    background: transparent;
}

.ths-account-page .ths-dashboard__stat + .ths-dashboard__stat {
    border-left: 1px solid var(--ths-dash-line);
}

.ths-account-page .ths-dashboard__stat-label {
    display: block;
    margin: 0 0 12px;

    color: var(--ths-dash-muted);
    font-family: var(--ths-dash-sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ths-account-page .ths-dashboard__stat-value {
    display: block;
    margin: 0;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-serif);
    font-size: clamp(38px, 4vw, 49px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
    font-variant-numeric: lining-nums tabular-nums;
}


/* ------------------------------------------------------------
   03. RECENT ORDERS HEADING
   ------------------------------------------------------------ */

.ths-account-page .ths-dashboard__recent-orders {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.ths-account-page .ths-dashboard__orders-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin: 0 0 24px;
}

.ths-account-page .ths-dashboard__orders-heading > div {
    min-width: 0;
}

.ths-account-page .ths-dashboard__section-title {
    margin: 0 0 7px;
    padding: 0;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-serif);
    font-size: clamp(28px, 3vw, 37px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

.ths-account-page .ths-dashboard__section-description {
    margin: 0;

    color: var(--ths-dash-muted);
    font-family: var(--ths-dash-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

.ths-account-page .ths-dashboard__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    flex: 0 0 auto;
    margin: 0 0 3px;
    padding: 9px 0;

    border: 0;
    border-bottom: 1px solid #aaa69c;
    border-radius: 0;
    background: transparent;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;

    transition: border-color 0.2s ease;
}

.ths-account-page .ths-dashboard__view-all:hover {
    border-bottom-color: var(--ths-dash-black);
    color: var(--ths-dash-black);
}

.ths-account-page .ths-dashboard__view-all span {
    font-size: 15px;
    line-height: 1;
}


/* ------------------------------------------------------------
   04. RECENT ORDERS TABLE
   ------------------------------------------------------------ */

.ths-account-page .ths-dashboard__orders-table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    border-top: 1px solid var(--ths-dash-line);
    border-bottom: 1px solid var(--ths-dash-line);
    background: var(--ths-dash-paper);
}

.ths-account-page .ths-dashboard__orders-table {
    width: 100%;
    min-width: 620px;
    margin: 0;
    padding: 0;

    border: 0;
    border-collapse: collapse;
    border-spacing: 0;

    background: transparent;
    color: var(--ths-dash-ink);
    text-align: left;
}

.ths-account-page .ths-dashboard__orders-table thead {
    background: var(--ths-dash-ivory);
}

.ths-account-page .ths-dashboard__orders-table th {
    padding: 17px 17px;

    border: 0;
    border-bottom: 1px solid var(--ths-dash-line);
    background: var(--ths-dash-ivory);

    color: #69675f;
    font-family: var(--ths-dash-sans);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.2px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ths-account-page .ths-dashboard__orders-table td {
    padding: 21px 17px;

    border: 0;
    border-bottom: 1px solid #efede7;
    background: transparent;

    color: #5f5d56;
    font-family: var(--ths-dash-sans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
    vertical-align: middle;
}

.ths-account-page .ths-dashboard__orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.ths-account-page .ths-dashboard__orders-table tbody tr {
    transition: background-color 0.2s ease;
}

.ths-account-page .ths-dashboard__orders-table tbody tr:hover td {
    background: #faf9f6;
}

.ths-account-page .ths-dashboard__orders-table time {
    white-space: nowrap;
}

.ths-account-page .ths-dashboard__order-number {
    color: var(--ths-dash-ink);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 4px;
}

.ths-account-page .ths-dashboard__order-number:hover {
    text-decoration: underline;
}

.ths-account-page .ths-dashboard__order-status {
    display: inline-block;
    max-width: 100%;
    padding: 5px 9px;

    border: 1px solid #e4e1d9;
    border-radius: 0;
    background: #f7f6f2;

    color: #55534c;
    font-family: var(--ths-dash-sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.ths-account-page .ths-dashboard__order-status--completed {
    border-color: #dce4d9;
    background: #f4f7f1;
    color: #496044;
}

.ths-account-page .ths-dashboard__order-status--processing {
    border-color: #dce1e9;
    background: #f4f5f8;
    color: #4d5b72;
}

.ths-account-page .ths-dashboard__order-status--on-hold {
    border-color: #e7dfcc;
    background: #faf7ef;
    color: #796641;
}

.ths-account-page .ths-dashboard__order-status--cancelled,
.ths-account-page .ths-dashboard__order-status--failed,
.ths-account-page .ths-dashboard__order-status--refunded {
    border-color: #e8d9d5;
    background: #faf4f2;
    color: #86534a;
}

.ths-account-page .ths-dashboard__order-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
}

.ths-account-page .ths-dashboard__order-action:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ths-account-page .ths-dashboard__order-action span {
    font-size: 14px;
}


/* ------------------------------------------------------------
   05. EMPTY ORDERS STATE
   ------------------------------------------------------------ */

.ths-account-page .ths-dashboard__empty-orders {
    padding: 39px 28px;

    border: 1px solid var(--ths-dash-line);
    border-radius: 0;
    background: var(--ths-dash-ivory);

    text-align: center;
}

.ths-account-page .ths-dashboard__empty-orders h3 {
    margin: 0 0 11px;

    color: var(--ths-dash-ink);
    font-family: var(--ths-dash-serif);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
}

.ths-account-page .ths-dashboard__empty-orders p {
    max-width: 440px;
    margin: 0 auto 22px;

    color: var(--ths-dash-muted);
    font-family: var(--ths-dash-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.9;
}

.ths-account-page .ths-dashboard__shop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 46px;
    padding: 13px 22px;

    border: 1px solid var(--ths-dash-black);
    border-radius: 0;
    background: var(--ths-dash-black);

    color: #ffffff !important;
    font-family: var(--ths-dash-sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ths-account-page .ths-dashboard__shop-button:hover {
    background: transparent;
    color: var(--ths-dash-black) !important;
}


/* ------------------------------------------------------------
   06. TABLET RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .ths-account-page .ths-dashboard__overview {
        margin-bottom: 43px;
    }

    .ths-account-page .ths-dashboard__stat {
        min-height: 130px;
        padding: 23px;
    }

    .ths-account-page .ths-dashboard__orders-table th,
    .ths-account-page .ths-dashboard__orders-table td {
        padding-right: 13px;
        padding-left: 13px;
    }
}


/* ------------------------------------------------------------
   07. MOBILE RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .ths-account-page .ths-dashboard {
        font-size: 13px;
    }

    .ths-account-page .ths-dashboard__overview {
        margin-bottom: 39px;
    }

    .ths-account-page .ths-dashboard__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ths-account-page .ths-dashboard__stat {
        min-height: 116px;
        padding: 19px 15px;
    }

    .ths-account-page .ths-dashboard__stat-label {
        margin-bottom: 10px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .ths-account-page .ths-dashboard__stat-value {
        font-size: 37px;
    }

    .ths-account-page .ths-dashboard__orders-heading {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 19px;
    }

    .ths-account-page .ths-dashboard__section-title {
        font-size: 29px;
    }

    .ths-account-page .ths-dashboard__section-description {
        font-size: 11px;
    }

    .ths-account-page .ths-dashboard__view-all {
        margin-top: 5px;
        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .ths-account-page .ths-dashboard__orders-table {
        min-width: 600px;
    }

    .ths-account-page .ths-dashboard__orders-table th {
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 8px;
    }

    .ths-account-page .ths-dashboard__orders-table td {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .ths-account-page .ths-dashboard__empty-orders {
        padding: 31px 19px;
    }

    .ths-account-page .ths-dashboard__empty-orders h3 {
        font-size: 27px;
    }
}


/* ------------------------------------------------------------
   08. SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    .ths-account-page .ths-dashboard__stat {
        padding: 17px 11px;
    }

    .ths-account-page .ths-dashboard__stat-label {
        font-size: 7px;
        letter-spacing: 0.7px;
    }

    .ths-account-page .ths-dashboard__stat-value {
        font-size: 33px;
    }

    .ths-account-page .ths-dashboard__orders-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .ths-account-page .ths-dashboard__view-all {
        margin-top: 0;
    }
}

/* ============================================================
   09. ACCESSIBILITY
============================================================ */

.ht-lux-header .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {

    .ht-lux-header *,
    .ht-lux-navigation-shell * {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   END: THS MINIMAL LUXURY DASHBOARD
   ============================================================ */








/* ============================================================
   START: THS PREMIUM MY ACCOUNT ORDERS PAGE
   PROJECT: THE HATIM STORE
   FILE: style.css
   DESIGN: EDITORIAL LUXURY / BLACK / WHITE / GREY
   PURPOSE: WooCommerce Orders Template Styling
   ============================================================ */


/* ------------------------------------------------------------
   01. ORDERS PAGE FOUNDATION
   ------------------------------------------------------------ */

.ths-orders-page {
    --ths-orders-black: #080808;
    --ths-orders-ink: #191919;
    --ths-orders-muted: #777777;
    --ths-orders-line: #e5e5e5;
    --ths-orders-soft: #f6f6f4;
    --ths-orders-white: #ffffff;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    background: var(--ths-orders-white);
    color: var(--ths-orders-ink);

    font-family: var(
        --ths-body-font,
        "Montserrat",
        "Helvetica Neue",
        Arial,
        sans-serif
    );

    font-size: 14px;
    line-height: 1.8;

    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ths-orders-page *,
.ths-orders-page *::before,
.ths-orders-page *::after {
    box-sizing: border-box;
}

.ths-orders-page a {
    color: inherit;
    text-decoration: none;
}

.ths-orders-page button,
.ths-orders-page a {
    -webkit-tap-highlight-color: transparent;
}

.ths-orders-page a:focus-visible {
    outline: 2px solid var(--ths-orders-black);
    outline-offset: 4px;
}


/* ------------------------------------------------------------
   02. EDITORIAL PAGE HEADER
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;
    margin: 0 0 34px;
    padding: 0 0 25px;

    border-bottom: 1px solid var(--ths-orders-line);
}

.ths-orders-page .ths-orders__heading-group {
    width: 100%;
    min-width: 0;
}

.ths-orders-page .ths-orders__eyebrow {
    display: block;

    margin: 0 0 12px;

    color: var(--ths-orders-muted);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ths-orders-page .ths-orders__title {
    margin: 0 0 12px;
    padding: 0;

    color: var(--ths-orders-black);

    font-family: var(
        --ths-display-font,
        "Playfair Display",
        Georgia,
        serif
    );

    font-size: clamp(32px, 4vw, 46px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -1.2px;
}

.ths-orders-page .ths-orders__description {
    max-width: 600px;
    margin: 0;
    padding: 0;

    color: var(--ths-orders-muted);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.9;
}


/* ------------------------------------------------------------
   03. ORDERS CONTENT
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   04. TABLE CONTAINER
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__table-wrap {
    display: block;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    border: 1px solid var(--ths-orders-line);
    background: var(--ths-orders-white);

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* ------------------------------------------------------------
   05. ORDERS TABLE
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    padding: 0;

    border: 0;
    border-collapse: collapse;
    border-spacing: 0;

    background: var(--ths-orders-white);
    color: var(--ths-orders-ink);

    text-align: left;
    font-size: 12px;
    line-height: 1.7;
}

.ths-orders-page .ths-orders__table thead {
    background: var(--ths-orders-soft);
}

.ths-orders-page .ths-orders__table thead tr {
    border-bottom: 1px solid var(--ths-orders-line);
}

.ths-orders-page .ths-orders__table th {
    padding: 18px 20px;

    border: 0;
    border-bottom: 1px solid var(--ths-orders-line);

    background: var(--ths-orders-soft);
    color: var(--ths-orders-black);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.3px;
    text-align: left;
    text-transform: uppercase;

    white-space: nowrap;
}

.ths-orders-page .ths-orders__table td {
    padding: 21px 20px;

    border: 0;
    border-bottom: 1px solid var(--ths-orders-line);

    background: var(--ths-orders-white);
    color: var(--ths-orders-muted);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;

    vertical-align: middle;
}

.ths-orders-page .ths-orders__table tbody tr:last-child td {
    border-bottom: 0;
}

.ths-orders-page .ths-orders__table tbody tr {
    background: var(--ths-orders-white);
}


/* ------------------------------------------------------------
   06. ORDER NUMBER
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__number {
    min-width: 105px;
    color: var(--ths-orders-black);
    font-weight: 600;
}

.ths-orders-page .ths-orders__number a {
    display: inline-block;

    color: var(--ths-orders-black);
    font-size: 12px;
    font-weight: 600;

    text-decoration: underline;
    text-decoration-color: #c6c6c6;
    text-underline-offset: 4px;
}

.ths-orders-page .ths-orders__number a:hover {
    text-decoration-color: var(--ths-orders-black);
}


/* ------------------------------------------------------------
   07. ORDER DATE
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__date {
    min-width: 105px;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   08. ORDER STATUS
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__status-cell {
    min-width: 125px;
}

.ths-orders-page .ths-orders__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    min-height: 28px;
    padding: 5px 10px;

    border: 1px solid #dedede;
    border-radius: 0;

    background: var(--ths-orders-white);
    color: var(--ths-orders-ink);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.3px;

    text-align: center;
    overflow-wrap: anywhere;
}

/* Completed */

.ths-orders-page .ths-orders__status--completed {
    border-color: #bfcfc2;
    background: #f4f8f4;
    color: #315a3a;
}

/* Processing */

.ths-orders-page .ths-orders__status--processing {
    border-color: #d8d0b7;
    background: #faf8f0;
    color: #74612c;
}

/* On hold */

.ths-orders-page .ths-orders__status--on-hold {
    border-color: #d9d0bd;
    background: #faf7f0;
    color: #79633c;
}

/* Pending payment */

.ths-orders-page .ths-orders__status--pending {
    border-color: #e2d4b9;
    background: #fbf7ef;
    color: #80622c;
}

/* Failed */

.ths-orders-page .ths-orders__status--failed {
    border-color: #e0c5c5;
    background: #fbf3f3;
    color: #8a3e3e;
}

/* Cancelled */

.ths-orders-page .ths-orders__status--cancelled {
    border-color: #dedede;
    background: #f5f5f5;
    color: #777777;
}

/* Refunded */

.ths-orders-page .ths-orders__status--refunded {
    border-color: #d4d4d4;
    background: #f7f7f7;
    color: #555555;
}


/* ------------------------------------------------------------
   09. ORDER TOTAL
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__total {
    min-width: 125px;
    color: var(--ths-orders-black);
    font-weight: 500;
    white-space: nowrap;
}

.ths-orders-page .ths-orders__total strong {
    color: var(--ths-orders-black);
    font-weight: 600;
}


/* ------------------------------------------------------------
   10. VIEW ORDER ACTION
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__action-cell {
    min-width: 125px;
}

.ths-orders-page .ths-orders__view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 10px 15px;

    border: 1px solid var(--ths-orders-black);
    border-radius: 0;

    background: var(--ths-orders-white);
    color: var(--ths-orders-black);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.7px;
    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;
}

.ths-orders-page .ths-orders__view-button:hover {
    background: var(--ths-orders-black);
    color: var(--ths-orders-white);
}


/* ------------------------------------------------------------
   11. PAGINATION
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    width: 100%;
    margin: 27px 0 0;
    padding: 0;
}

.ths-orders-page .ths-orders__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    min-height: 38px;
    padding: 8px 11px;

    border: 1px solid var(--ths-orders-line);
    border-radius: 0;

    background: var(--ths-orders-white);
    color: var(--ths-orders-black);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.ths-orders-page .ths-orders__pagination .page-numbers.current {
    border-color: var(--ths-orders-black);
    background: var(--ths-orders-black);
    color: var(--ths-orders-white);
}

.ths-orders-page .ths-orders__pagination a.page-numbers:hover {
    border-color: var(--ths-orders-black);
    background: var(--ths-orders-black);
    color: var(--ths-orders-white);
}


/* ------------------------------------------------------------
   12. EMPTY ORDERS STATE
   ------------------------------------------------------------ */

.ths-orders-page .ths-orders__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 300px;
    margin: 0;
    padding: 50px 28px;

    border: 1px solid var(--ths-orders-line);
    background: var(--ths-orders-white);

    text-align: center;
}

.ths-orders-page .ths-orders__empty-label {
    display: block;

    margin: 0 0 14px;

    color: var(--ths-orders-muted);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.ths-orders-page .ths-orders__empty-title {
    margin: 0 0 13px;
    padding: 0;

    color: var(--ths-orders-black);

    font-family: var(
        --ths-display-font,
        "Playfair Display",
        Georgia,
        serif
    );

    font-size: clamp(27px, 4vw, 36px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

.ths-orders-page .ths-orders__empty-description {
    max-width: 430px;
    margin: 0 0 25px;
    padding: 0;

    color: var(--ths-orders-muted);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.9;
}

.ths-orders-page .ths-orders__shop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 13px 23px;

    border: 1px solid var(--ths-orders-black);
    border-radius: 0;

    background: var(--ths-orders-black);
    color: var(--ths-orders-white);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.ths-orders-page .ths-orders__shop-button:hover {
    background: var(--ths-orders-white);
    color: var(--ths-orders-black);
}


/* ------------------------------------------------------------
   13. TABLET RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .ths-orders-page .ths-orders__header {
        margin-bottom: 27px;
        padding-bottom: 22px;
    }

    .ths-orders-page .ths-orders__title {
        font-size: clamp(30px, 5vw, 40px);
        letter-spacing: -0.8px;
    }

    .ths-orders-page .ths-orders__table th {
        padding: 16px 15px;
    }

    .ths-orders-page .ths-orders__table td {
        padding: 18px 15px;
    }

}


/* ------------------------------------------------------------
   14. MOBILE RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .ths-orders-page {
        font-size: 13px;
        line-height: 1.8;
    }

    .ths-orders-page .ths-orders__header {
        margin-bottom: 22px;
        padding-bottom: 19px;
    }

    .ths-orders-page .ths-orders__eyebrow {
        margin-bottom: 9px;
        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .ths-orders-page .ths-orders__title {
        margin-bottom: 10px;
        font-size: 32px;
        letter-spacing: -0.7px;
    }

    .ths-orders-page .ths-orders__description {
        font-size: 12px;
        line-height: 1.85;
    }

    .ths-orders-page .ths-orders__table-wrap {
        border: 0;
        overflow: visible;
    }

    /*
     * Keep the table readable on narrow screens.
     * Users can scroll horizontally when required.
     */

    .ths-orders-page .ths-orders__table {
        min-width: 650px;
        font-size: 11px;
    }

    .ths-orders-page .ths-orders__table th {
        padding: 14px 12px;
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .ths-orders-page .ths-orders__table td {
        padding: 16px 12px;
        font-size: 11px;
    }

    .ths-orders-page .ths-orders__status {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .ths-orders-page .ths-orders__view-button {
        min-height: 35px;
        padding: 9px 11px;
        font-size: 9px;
        letter-spacing: 0.4px;
    }

    .ths-orders-page .ths-orders__pagination {
        justify-content: center;
        gap: 5px;
        margin-top: 22px;
    }

    .ths-orders-page .ths-orders__pagination .page-numbers {
        min-width: 34px;
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .ths-orders-page .ths-orders__empty {
        min-height: 260px;
        padding: 36px 20px;
    }

    .ths-orders-page .ths-orders__empty-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .ths-orders-page .ths-orders__empty-title {
        font-size: 29px;
    }

    .ths-orders-page .ths-orders__empty-description {
        font-size: 12px;
    }

    .ths-orders-page .ths-orders__shop-button {
        width: 100%;
        max-width: 260px;
        min-height: 44px;
        padding: 12px 18px;
    }

}


/* ------------------------------------------------------------
   15. REDUCED MOTION ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ths-orders-page *,
    .ths-orders-page *::before,
    .ths-orders-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

}


/* START: THS BUTTON COLOR AND HOVER */

.ths-orders-page a.ths-orders__view-button,
.ths-orders-page a.ths-orders__shop-button {
    background-color: #080808 !important;
    color: #ffffff !important;
    border: 1px solid #080808 !important;
}

.ths-orders-page a.ths-orders__view-button:hover,
.ths-orders-page a.ths-orders__shop-button:hover {
    background-color: #ffffff !important;
    color: #080808 !important;
    border-color: #080808 !important;
}

/* END: THS BUTTON COLOR AND HOVER */



/* ============================================================
   END: THS PREMIUM MY ACCOUNT ORDERS PAGE
   ============================================================ */



  
/* ============================================================
   START: THS PREMIUM ORDER DETAILS PAGE
   PROJECT: THE HATIM STORE
   DESIGN: EDITORIAL LUXURY / BLACK / WHITE / GREY
   FILE: style.css
   ============================================================ */

/* ------------------------------------------------------------
   01. ORDER DETAILS FOUNDATION
   ------------------------------------------------------------ */

.ths-order-details {
    --ths-order-black: #080808;
    --ths-order-ink: #171717;
    --ths-order-grey: #777777;
    --ths-order-muted: #a0a0a0;
    --ths-order-line: #e5e5e5;
    --ths-order-soft: #f7f7f5;
    --ths-order-white: #ffffff;

    width: 100%;
    min-width: 0;
    margin: 0 auto;
    color: var(--ths-order-ink);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ths-order-details *,
.ths-order-details *::before,
.ths-order-details *::after {
    box-sizing: border-box;
}

.ths-order-details img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ths-order-details a {
    color: inherit;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* ------------------------------------------------------------
   02. CENTERED ORDER HEADER
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 54px;
    padding: 48px 30px 42px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background: var(--ths-order-black);
    color: var(--ths-order-white);
}

.ths-order-details .ths-order-details__header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.ths-order-details .ths-order-details__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 0 0 20px;
    color: #d2d2d2;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ths-order-details .ths-order-details__eyebrow::before,
.ths-order-details .ths-order-details__eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.ths-order-details .ths-order-details__title {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 25px;
    padding: 0;
    color: #ffffff;
    font-family: var(--ths-display-font, inherit);
    font-size: clamp(35px, 5vw, 58px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1.5px;
    text-align: center;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__meta {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ths-order-details .ths-order-details__date,
.ths-order-details .ths-order-details__status-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 170px;
    margin: 0;
    padding: 0 28px;
    color: #ffffff;
}

.ths-order-details .ths-order-details__status-line {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.ths-order-details .ths-order-details__date > span,
.ths-order-details .ths-order-details__status-line > span {
    color: #bcbcbc;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.8px;
}

.ths-order-details .ths-order-details__date strong,
.ths-order-details .ths-order-details__status-line strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

/* Order status */

.ths-order-details .ths-order-details__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   03. SECTIONS AND HEADINGS
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__section {
    width: 100%;
    min-width: 0;
    margin: 0 0 48px;
    padding: 0;
}

.ths-order-details .ths-order-details__section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 22px;
    padding: 0 0 17px;
    border-bottom: 1px solid var(--ths-order-line);
}

.ths-order-details .ths-order-details__section-title {
    margin: 0;
    padding: 0;
    color: var(--ths-order-black);
    font-family: var(--ths-display-font, inherit);
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

.ths-order-details .ths-order-details__section-description {
    margin: 0;
    padding: 0;
    color: var(--ths-order-grey);
    font-size: 13px;
    line-height: 1.8;
}

/* ------------------------------------------------------------
   04. ORDER ITEMS TABLE
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__items-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ths-order-line);
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.ths-order-details .ths-order-details__items-table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

.ths-order-details .ths-order-details__items-table thead {
    background: var(--ths-order-soft);
}

.ths-order-details .ths-order-details__items-table th {
    padding: 16px 19px;
    border: 0;
    border-bottom: 1px solid var(--ths-order-line);
    color: #555555;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.ths-order-details .ths-order-details__items-table td {
    padding: 20px 19px;
    border: 0;
    border-bottom: 1px solid var(--ths-order-line);
    background: #ffffff;
    color: var(--ths-order-ink);
    font-size: 13px;
    vertical-align: middle;
}

.ths-order-details .ths-order-details__items-table tbody tr:last-child td {
    border-bottom: 0;
}

.ths-order-details .ths-order-details__items-table tbody tr:hover td {
    background: #fcfcfb;
}

.ths-order-details .ths-order-details__product {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ths-order-details .ths-order-details__product-image-wrap {
    flex: 0 0 76px;
    width: 76px;
    height: 88px;
    overflow: hidden;
    border: 1px solid var(--ths-order-line);
    background: var(--ths-order-soft);
}

.ths-order-details .ths-order-details__product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ths-order-details .ths-order-details__product-info {
    min-width: 0;
}

.ths-order-details .ths-order-details__product-name {
    margin: 0 0 7px;
    color: var(--ths-order-black);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__product-name a {
    color: var(--ths-order-black);
}

.ths-order-details .ths-order-details__product-name a:hover {
    color: var(--ths-order-grey);
}

.ths-order-details .ths-order-details__product-meta {
    color: var(--ths-order-grey);
    font-size: 11px;
    line-height: 1.8;
}

.ths-order-details .ths-order-details__product-meta p {
    margin: 0;
}

.ths-order-details .ths-order-details__quantity-cell {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

.ths-order-details .ths-order-details__quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--ths-order-line);
    background: #ffffff;
    color: var(--ths-order-black);
    font-size: 12px;
}

.ths-order-details .ths-order-details__line-total {
    width: 135px;
    color: var(--ths-order-black);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   05. ORDER SUMMARY
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__totals-wrap {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    border: 1px solid var(--ths-order-line);
    background: #ffffff;
}

.ths-order-details .ths-order-details__totals-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.ths-order-details .ths-order-details__totals-table th,
.ths-order-details .ths-order-details__totals-table td {
    padding: 15px 19px;
    border: 0;
    border-bottom: 1px solid var(--ths-order-line);
    background: transparent;
    font-size: 13px;
    line-height: 1.7;
    vertical-align: top;
}

.ths-order-details .ths-order-details__totals-table th {
    color: #666666;
    font-weight: 400;
    text-align: left;
}

.ths-order-details .ths-order-details__totals-table td {
    color: var(--ths-order-black);
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__totals-table tr:last-child th,
.ths-order-details .ths-order-details__totals-table tr:last-child td {
    border-bottom: 0;
}

.ths-order-details .ths-order-details__totals-table tr:last-child th,
.ths-order-details .ths-order-details__totals-table tr:last-child td {
    background: var(--ths-order-soft);
    color: var(--ths-order-black);
    font-size: 15px;
    font-weight: 700;
}

.ths-order-details .ths-order-details__totals-table small {
    color: var(--ths-order-grey);
    font-size: 11px;
}

/* ------------------------------------------------------------
   06. BILLING AND SHIPPING ADDRESS CARDS
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.ths-order-details .ths-order-details__address-card {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--ths-order-line);
    background: #ffffff;
}

.ths-order-details .ths-order-details__address-title {
    margin: 0 0 19px;
    padding: 0 0 13px;
    border-bottom: 1px solid var(--ths-order-line);
    color: var(--ths-order-black);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ths-order-details .ths-order-details__address {
    margin: 0;
    padding: 0;
    color: #555555;
    font-size: 13px;
    font-style: normal;
    line-height: 2;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__address p {
    margin: 0;
}

.ths-order-details .ths-order-details__contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #eeeeee;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__contact span {
    color: var(--ths-order-grey);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ths-order-details .ths-order-details__contact a {
    color: var(--ths-order-black);
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__contact a:hover {
    color: var(--ths-order-grey);
}

/* ------------------------------------------------------------
   07. CUSTOMER NOTE
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__customer-note {
    padding: 22px 24px;
    border-left: 3px solid var(--ths-order-black);
    background: var(--ths-order-soft);
    color: #444444;
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.ths-order-details .ths-order-details__customer-note p {
    margin: 0;
}

/* ------------------------------------------------------------
   08. ORDER ACTION BUTTONS
   BLACK BUTTON / WHITE TEXT
   HOVER: WHITE BUTTON / BLACK TEXT
   ------------------------------------------------------------ */

.ths-order-details .ths-order-details__actions-section {
    width: 100%;
    margin: 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--ths-order-line);
}

.ths-order-details .ths-order-details__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.ths-order-details a.ths-order-details__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 25px;
    border: 1px solid #080808;
    border-radius: 0;
    background: #080808;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.4px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: none;
}

.ths-order-details a.ths-order-details__action:hover,
.ths-order-details a.ths-order-details__action:focus-visible {
    border-color: #080808;
    background: #ffffff;
    color: #080808 !important;
}

/* ------------------------------------------------------------
   09. WOOCOMMERCE NOTICES
   ------------------------------------------------------------ */

.ths-order-details .woocommerce-message,
.ths-order-details .woocommerce-info,
.ths-order-details .woocommerce-error,
.ths-order-details .ths-order-details__notice {
    margin: 0 0 30px;
    padding: 18px 22px;
    border: 1px solid var(--ths-order-line);
    border-left: 3px solid var(--ths-order-black);
    border-radius: 0;
    background: var(--ths-order-soft);
    color: var(--ths-order-ink);
    font-size: 13px;
    line-height: 1.8;
    box-shadow: none;
}

.ths-order-details .woocommerce-message::before,
.ths-order-details .woocommerce-info::before,
.ths-order-details .woocommerce-error::before {
    color: var(--ths-order-black);
}

.ths-order-details .woocommerce-message a,
.ths-order-details .woocommerce-info a,
.ths-order-details .woocommerce-error a {
    color: var(--ths-order-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   10. TABLET RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .ths-order-details .ths-order-details__header {
        margin-bottom: 42px;
        padding: 42px 24px 36px;
    }

    .ths-order-details .ths-order-details__section {
        margin-bottom: 38px;
    }

    .ths-order-details .ths-order-details__address-card {
        padding: 22px;
    }

    .ths-order-details .ths-order-details__items-table th,
    .ths-order-details .ths-order-details__items-table td {
        padding: 15px;
    }
}

/* ------------------------------------------------------------
   11. MOBILE RESPONSIVENESS
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .ths-order-details {
        font-size: 14px;
        line-height: 1.8;
    }

    .ths-order-details .ths-order-details__header {
        margin-bottom: 34px;
        padding: 37px 20px 30px;
    }

    .ths-order-details .ths-order-details__header::before {
        inset: 9px;
    }

    .ths-order-details .ths-order-details__eyebrow {
        gap: 9px;
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .ths-order-details .ths-order-details__eyebrow::before,
    .ths-order-details .ths-order-details__eyebrow::after {
        width: 20px;
    }

    .ths-order-details .ths-order-details__title {
        margin-bottom: 21px;
        font-size: clamp(30px, 8vw, 42px);
        letter-spacing: -0.8px;
    }

    .ths-order-details .ths-order-details__meta {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .ths-order-details .ths-order-details__date,
    .ths-order-details .ths-order-details__status-line {
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .ths-order-details .ths-order-details__section {
        margin-bottom: 34px;
    }

    .ths-order-details .ths-order-details__section-heading {
        margin-bottom: 17px;
        padding-bottom: 13px;
    }

    .ths-order-details .ths-order-details__section-title {
        font-size: 23px;
    }

    .ths-order-details .ths-order-details__section-description {
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__items-table {
        min-width: 480px;
    }

    .ths-order-details .ths-order-details__items-table th {
        padding: 13px 12px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .ths-order-details .ths-order-details__items-table td {
        padding: 14px 12px;
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__product {
        gap: 11px;
    }

    .ths-order-details .ths-order-details__product-image-wrap {
        flex-basis: 58px;
        width: 58px;
        height: 70px;
    }

    .ths-order-details .ths-order-details__product-name {
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__product-meta {
        font-size: 10px;
    }

    .ths-order-details .ths-order-details__totals-wrap {
        max-width: 100%;
    }

    .ths-order-details .ths-order-details__totals-table th,
    .ths-order-details .ths-order-details__totals-table td {
        padding: 13px 14px;
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__addresses {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ths-order-details .ths-order-details__address-card {
        padding: 21px;
    }

    .ths-order-details .ths-order-details__address-title {
        margin-bottom: 15px;
    }

    .ths-order-details .ths-order-details__address {
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__customer-note {
        padding: 17px;
        font-size: 12px;
    }

    .ths-order-details .ths-order-details__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .ths-order-details a.ths-order-details__action {
        width: 100%;
        min-height: 46px;
        padding: 13px 18px;
    }

    .ths-order-details .woocommerce-message,
    .ths-order-details .woocommerce-info,
    .ths-order-details .woocommerce-error,
    .ths-order-details .ths-order-details__notice {
        padding: 15px;
        font-size: 12px;
    }
}

/* ------------------------------------------------------------
   12. ACCESSIBILITY: REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ths-order-details *,
    .ths-order-details *::before,
    .ths-order-details *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* START: THS ORDER NUMBER WHITE COLOR */

.ths-order-details .ths-order-details__title {
    color: #ffffff !important;
}

/* END: THS ORDER NUMBER WHITE COLOR */


/* ============================================================
   END: THS PREMIUM ORDER DETAILS PAGE
   ============================================================ */



  
/* ============================================================
   START: THS PREMIUM MY ACCOUNT ADDRESSES
   PROJECT: THE HATIM STORE
   DESIGN: EDITORIAL LUXURY / BLACK / WHITE / GREY
   SCOPE: MY ACCOUNT > ADDRESSES
   ============================================================ */

/* ------------------------------------------------------------
   01. PAGE FOUNDATION
------------------------------------------------------------ */

.ths-account-page.ths-addresses-page {
    --ths-address-black: #080808;
    --ths-address-ink: #171717;
    --ths-address-grey: #777777;
    --ths-address-muted: #999999;
    --ths-address-line: #e5e5e5;
    --ths-address-soft: #f7f7f5;
    --ths-address-white: #ffffff;

    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 72px;

    color: var(--ths-address-ink);
    background: var(--ths-address-white);

    font-family: inherit;
    font-size: 15px;
    line-height: 1.8;

    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ths-account-page.ths-addresses-page *,
.ths-account-page.ths-addresses-page *::before,
.ths-account-page.ths-addresses-page *::after {
    box-sizing: border-box;
}

.ths-account-page.ths-addresses-page a {
    text-decoration: none;
}

.ths-account-page.ths-addresses-page p {
    margin-top: 0;
}


/* ------------------------------------------------------------
   02. EDITORIAL BLACK HERO
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__header {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 300px;
    margin: 0 0 54px;
    padding: 65px 28px;

    overflow: hidden;
    text-align: center;

    color: var(--ths-address-white);
    background: var(--ths-address-black);
}

/* Fine architectural border */

.ths-addresses-page .ths-addresses__header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 16px;

    border: 1px solid rgba(255, 255, 255, 0.19);

    pointer-events: none;
}

/* Subtle horizontal editorial line */

.ths-addresses-page .ths-addresses__header::after {
    content: "";
    position: absolute;
    z-index: -1;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.16) 22%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.16) 78%,
        transparent
    );

    pointer-events: none;
}


/* ------------------------------------------------------------
   03. BRAND EYEBROW
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__eyebrow {
    position: relative;

    margin: 0 0 22px;
    padding: 0 22px;

    color: #c9c9c9;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Decorative side rules */

.ths-addresses-page .ths-addresses__eyebrow::before,
.ths-addresses-page .ths-addresses__eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 25px;
    height: 1px;

    background: rgba(255, 255, 255, 0.65);
}

.ths-addresses-page .ths-addresses__eyebrow::before {
    right: 100%;
}

.ths-addresses-page .ths-addresses__eyebrow::after {
    left: 100%;
}


/* ------------------------------------------------------------
   04. MAIN PAGE TITLE
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__title {
    position: relative;
    z-index: 1;

    max-width: 900px;
    margin: 0 0 19px;

    color: #ffffff !important;

    font-family: inherit;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -2px;

    text-align: center;
    overflow-wrap: anywhere;
}

/* THS outlined monogram */

.ths-addresses-page .ths-addresses__title::after {
    content: "THS";

    position: absolute;
    z-index: -1;

    top: 50%;
    left: calc(100% + 24px);

    transform: translateY(-50%);

    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 78px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 3px;
    white-space: nowrap;

    pointer-events: none;
}

.ths-addresses-page .ths-addresses__description {
    max-width: 560px;
    margin: 0 auto;

    color: #c4c4c4;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.15px;
}


/* ------------------------------------------------------------
   05. ADDRESS CARD GRID
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: calc(100% - 64px);
    max-width: 1120px;
    margin: 0 auto;

    gap: 26px;
    align-items: stretch;
}


/* ------------------------------------------------------------
   06. PREMIUM ADDRESS CARD
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 345px;
    padding: 30px 30px 25px;

    border: 1px solid var(--ths-address-line);
    background: #ffffff;

    color: var(--ths-address-ink);

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

/* Card hover: subtle border emphasis */

.ths-addresses-page .ths-addresses__card:hover {
    border-color: #b8b8b8;
}


/* ------------------------------------------------------------
   07. ADDRESS CARD HEADER
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding: 0 0 23px;
    border-bottom: 1px solid var(--ths-address-line);
}

.ths-addresses-page .ths-addresses__card-heading {
    min-width: 0;
}

.ths-addresses-page .ths-addresses__card-label {
    margin: 0 0 9px;

    color: var(--ths-address-grey);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ths-addresses-page .ths-addresses__card-title {
    margin: 0;

    color: var(--ths-address-black) !important;

    font-family: inherit;
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.6px;

    overflow-wrap: anywhere;
}

.ths-addresses-page .ths-addresses__card-index {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    border: 1px solid #dedede;

    color: #555555;
    background: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}


/* ------------------------------------------------------------
   08. SAVED ADDRESS CONTENT
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__card-content {
    flex: 1 1 auto;

    min-width: 0;
    padding: 26px 0 30px;
}

.ths-addresses-page .ths-addresses__address {
    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    color: #454545;
    background: transparent;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 2;

    overflow-wrap: anywhere;
}

/* Keep address text clean and readable */

.ths-addresses-page .ths-addresses__address p {
    margin: 0 0 5px;

    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ths-addresses-page .ths-addresses__address p:last-child {
    margin-bottom: 0;
}

.ths-addresses-page .ths-addresses__address strong {
    color: #171717;
    font-weight: 600;
}


/* ------------------------------------------------------------
   09. EMPTY ADDRESS STATE
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-height: 125px;
    padding: 4px 0;
}

.ths-addresses-page .ths-addresses__empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;
    margin: 0 0 15px;

    border: 1px solid #dcdcdc;

    color: #171717;
    background: #ffffff;

    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.ths-addresses-page .ths-addresses__empty-title {
    margin: 0 0 7px;

    color: #222222;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.ths-addresses-page .ths-addresses__empty-help {
    max-width: 330px;
    margin: 0;

    color: var(--ths-address-grey);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}


/* ------------------------------------------------------------
   10. CARD FOOTER
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding-top: 21px;
    border-top: 1px solid var(--ths-address-line);
}


/* ------------------------------------------------------------
   11. EDIT / ADD ADDRESS BUTTON
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    min-height: 48px;
    max-width: 100%;
    padding: 12px 17px;

    border: 1px solid #080808;
    border-radius: 0;

    color: #ffffff !important;
    background: #080808 !important;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.3px;
    text-align: left;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* Premium inverted hover */

.ths-addresses-page .ths-addresses__edit-button:hover,
.ths-addresses-page .ths-addresses__edit-button:focus-visible {
    color: #080808 !important;
    background: #ffffff !important;
    border-color: #080808;

    outline: none;
}

.ths-addresses-page .ths-addresses__edit-button:focus-visible {
    outline: 2px solid #777777;
    outline-offset: 4px;
}

.ths-addresses-page .ths-addresses__edit-arrow {
    display: inline-block;
    flex: 0 0 auto;

    color: inherit;

    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.2s ease;
}

.ths-addresses-page .ths-addresses__edit-button:hover
.ths-addresses__edit-arrow {
    transform: translateX(3px);
}


/* ------------------------------------------------------------
   12. ADDRESS INFORMATION NOTICE
------------------------------------------------------------ */

.ths-addresses-page .ths-addresses__notice {
    width: calc(100% - 64px);
    max-width: 1120px;
    margin: 32px auto 0;
    padding: 23px 26px;

    border: 1px solid var(--ths-address-line);
    border-left: 3px solid #080808;

    background: var(--ths-address-soft);
}

.ths-addresses-page .ths-addresses__notice-title {
    margin: 0 0 7px;

    color: #171717;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

.ths-addresses-page .ths-addresses__notice p {
    margin: 0;

    color: #666666;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.9;
}


/* ------------------------------------------------------------
   13. TABLET RESPONSIVENESS
------------------------------------------------------------ */

@media (max-width: 900px) {

    .ths-addresses-page .ths-addresses__header {
        min-height: 270px;
        margin-bottom: 38px;
        padding: 58px 25px;
    }

    .ths-addresses-page .ths-addresses__grid {
        width: calc(100% - 44px);
        gap: 18px;
    }

    .ths-addresses-page .ths-addresses__card {
        min-height: 330px;
        padding: 24px 22px 22px;
    }

    .ths-addresses-page .ths-addresses__card-title {
        font-size: 23px;
    }

    .ths-addresses-page .ths-addresses__notice {
        width: calc(100% - 44px);
    }

}


/* ------------------------------------------------------------
   14. MOBILE RESPONSIVENESS
------------------------------------------------------------ */

@media (max-width: 600px) {

    .ths-account-page.ths-addresses-page {
        padding-bottom: 45px;
        font-size: 14px;
    }

    .ths-addresses-page .ths-addresses__header {
        min-height: 245px;
        margin-bottom: 29px;
        padding: 52px 23px;
    }

    .ths-addresses-page .ths-addresses__header::before {
        inset: 10px;
    }

    .ths-addresses-page .ths-addresses__eyebrow {
        margin-bottom: 19px;
        padding: 0 15px;

        font-size: 9px;
        letter-spacing: 2.7px;
    }

    .ths-addresses-page .ths-addresses__eyebrow::before,
    .ths-addresses-page .ths-addresses__eyebrow::after {
        width: 20px;
    }

    .ths-addresses-page .ths-addresses__title {
        margin-bottom: 14px;

        font-size: clamp(32px, 9vw, 43px);
        line-height: 1.15;
        letter-spacing: -1.2px;
    }

    .ths-addresses-page .ths-addresses__title::after {
        top: auto;
        bottom: calc(100% + 8px);
        left: 50%;

        transform: translateX(-50%);

        font-size: 28px;
        letter-spacing: 4px;

        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    }

    .ths-addresses-page .ths-addresses__description {
        max-width: 340px;

        font-size: 12px;
        line-height: 1.85;
    }

    .ths-addresses-page .ths-addresses__grid {
        grid-template-columns: minmax(0, 1fr);

        width: calc(100% - 32px);
        gap: 17px;
    }

    .ths-addresses-page .ths-addresses__card {
        min-height: 0;
        padding: 23px 20px 20px;
    }

    .ths-addresses-page .ths-addresses__card-header {
        gap: 12px;
        padding-bottom: 19px;
    }

    .ths-addresses-page .ths-addresses__card-label {
        margin-bottom: 7px;

        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .ths-addresses-page .ths-addresses__card-title {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .ths-addresses-page .ths-addresses__card-index {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .ths-addresses-page .ths-addresses__card-content {
        padding: 21px 0 23px;
    }

    .ths-addresses-page .ths-addresses__address {
        font-size: 13px;
        line-height: 1.9;
    }

    .ths-addresses-page .ths-addresses__empty {
        min-height: 115px;
    }

    .ths-addresses-page .ths-addresses__empty-help {
        font-size: 11px;
    }

    .ths-addresses-page .ths-addresses__card-footer {
        padding-top: 18px;
    }

    .ths-addresses-page .ths-addresses__edit-button {
        width: 100%;
        min-height: 47px;
        padding: 12px 15px;

        font-size: 9px;
        letter-spacing: 1.1px;
    }

    .ths-addresses-page .ths-addresses__notice {
        width: calc(100% - 32px);
        margin-top: 22px;
        padding: 19px 18px;
    }

    .ths-addresses-page .ths-addresses__notice-title {
        font-size: 12px;
    }

    .ths-addresses-page .ths-addresses__notice p {
        font-size: 11px;
        line-height: 1.85;
    }

}


/* ------------------------------------------------------------
   15. SMALL MOBILE DEVICES
------------------------------------------------------------ */

@media (max-width: 360px) {

    .ths-addresses-page .ths-addresses__header {
        padding-right: 18px;
        padding-left: 18px;
    }

    .ths-addresses-page .ths-addresses__title {
        font-size: 30px;
    }

    .ths-addresses-page .ths-addresses__grid {
        width: calc(100% - 24px);
    }

    .ths-addresses-page .ths-addresses__card {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ths-addresses-page .ths-addresses__notice {
        width: calc(100% - 24px);
    }

}


/* ------------------------------------------------------------
   16. REDUCED MOTION ACCESSIBILITY
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ths-addresses-page *,
    .ths-addresses-page *::before,
    .ths-addresses-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ============================================================
   END: THS PREMIUM MY ACCOUNT ADDRESSES
   ============================================================ */






/* =========================================================
   START: THE HATIM STORE — PREMIUM LUXURY HERO
   Developed by Hatim Tech (HT)
   Namespace: ht-hero
========================================================= */

/* 01. HERO FOUNDATION */
.ht-hero {
    --hero-black: #111111;
    --hero-white: #ffffff;
    --hero-ivory: #f5f3ef;
    --hero-display-font: var(--ths-display-font);
    --hero-body-font: var(--ths-nav-font);

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: min(790px, calc(100svh - 40px));
    min-height: min(790px, calc(100vh - 40px));
    overflow: hidden;
    background: var(--hero-black);
    color: var(--hero-white);
    font-family: var(--hero-body-font);
    -webkit-font-smoothing: antialiased;
}

/* 02. FULL-WIDTH BACKGROUND IMAGE */
.ht-hero__background {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: #292929;
}

.ht-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center 55%;
    transform: scale(1.015);
}

/* 03. PREMIUM DARK OVERLAY */
/* 03. PREMIUM DARK BLACK OVERLAY */
.ht-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #000000 0%,
            rgba(0, 0, 0, 0.98) 20%,
            rgba(0, 0, 0, 0.94) 38%,
            rgba(0, 0, 0, 0.72) 58%,
            rgba(0, 0, 0, 0.30) 80%,
            rgba(0, 0, 0, 0.16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.30) 30%,
            rgba(0, 0, 0, 0.10) 65%,
            rgba(0, 0, 0, 0.35) 100%
        );
}

/* 04. CONTENT CONTAINER */
.ht-hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100% - 120px, 1440px);
    min-height: inherit;
    margin-inline: auto;
    padding-top: 100px;
    padding-bottom: 38px;
    box-sizing: border-box;
}

/* 05. HERO TEXT */
.ht-hero__content {
    width: 100%;
    max-width: 690px;
    padding-block: 60px;
}

.ht-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--hero-body-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ht-hero__eyebrow::before {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.85);
}

/* 06. LUXURY HEADING */
.ht-hero__title {
    margin: 0;
    color: var(--hero-white);
    font-family: var(--hero-display-font);
    font-size: clamp(66px, 7.2vw, 112px);
    font-weight: 400;
    line-height: 0.91;
    letter-spacing: -3.8px;
    text-transform: none;
    text-wrap: balance;
}

.ht-hero__title span {
    display: inline-block;
    margin-top: 12px;
    color: var(--hero-ivory);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -4.2px;
}

/* 07. DESCRIPTION */
.ht-hero__description {
    max-width: 465px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--hero-body-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.15px;
}

/* 08. BUTTON GROUP */
.ht-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* Shared Button Styles */
.ht-hero__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 55px;
    padding: 0 25px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0;
    font-family: var(--hero-body-font);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

/* Primary Button */
.ht-hero__button--primary {
    color: var(--hero-black);
    background: var(--hero-white);
    border-color: var(--hero-white);
}

.ht-hero__button--primary span {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s ease;
}

.ht-hero__button--primary:hover {
    color: var(--hero-white);
    background: transparent;
    border-color: var(--hero-white);
}

.ht-hero__button--primary:hover span {
    transform: translateX(4px);
}

/* Secondary Button */
.ht-hero__button--secondary {
    color: var(--hero-white);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.48);
}

.ht-hero__button--secondary:hover {
    color: var(--hero-black);
    background: var(--hero-white);
    border-color: var(--hero-white);
}

/* Keyboard Accessibility */
.ht-hero__button:focus-visible {
    outline: 2px solid var(--hero-white);
    outline-offset: 5px;
}

/* 09. BOTTOM INFORMATION */
.ht-hero__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: auto;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.27);
}

.ht-hero__bottom-label {
    color: rgba(255, 255, 255, 0.77);
    font-family: var(--hero-body-font);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 2px;
}

.ht-hero__bottom-index {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--hero-white);
    font-family: var(--hero-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ht-hero__bottom-index span {
    color: rgba(255, 255, 255, 0.48);
}

/* 10. LARGE LAPTOPS */
@media (min-width: 1600px) {
    .ht-hero__container {
        width: min(100% - 160px, 1440px);
    }
}

/* 11. TABLETS */
@media (max-width: 1024px) {
    .ht-hero {
        min-height: 720px;
    }

    .ht-hero__container {
        width: calc(100% - 72px);
        padding-top: 80px;
        padding-bottom: 30px;
    }

    .ht-hero__content {
        max-width: 610px;
    }

    .ht-hero__title {
        font-size: clamp(66px, 9vw, 92px);
        letter-spacing: -2.8px;
    }

    .ht-hero__title span {
        letter-spacing: -3px;
    }

    .ht-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(12, 12, 12, 0.86) 0%,
                rgba(12, 12, 12, 0.66) 48%,
                rgba(12, 12, 12, 0.24) 100%
            ),
            linear-gradient(
                0deg,
                rgba(12, 12, 12, 0.48),
                transparent 50%
            );
    }
}

/* 12. MOBILE */
@media (max-width: 600px) {
    .ht-hero {
        min-height: 690px;
        min-height: max(690px, 86svh);
    }

    .ht-hero__image {
        object-position: 60% center;
    }

    .ht-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(12, 12, 12, 0.78) 0%,
                rgba(12, 12, 12, 0.58) 100%
            ),
            linear-gradient(
                0deg,
                rgba(12, 12, 12, 0.65) 0%,
                rgba(12, 12, 12, 0.12) 65%,
                rgba(12, 12, 12, 0.24) 100%
            );
    }

    .ht-hero__container {
        width: calc(100% - 40px);
        padding-top: 65px;
        padding-bottom: 24px;
    }

    .ht-hero__content {
        max-width: 100%;
        padding-block: 55px;
    }

    .ht-hero__eyebrow {
        gap: 11px;
        margin-bottom: 24px;
        font-size: 9px;
        letter-spacing: 2.8px;
    }

    .ht-hero__eyebrow::before {
        width: 24px;
    }

    .ht-hero__title {
        font-size: clamp(52px, 12.4vw, 74px);
        line-height: 0.98;
        letter-spacing: -2px;
    }

    .ht-hero__title span {
        margin-top: 8px;
        letter-spacing: -2.4px;
    }

    .ht-hero__description {
        max-width: 370px;
        margin-top: 24px;
        font-size: 12px;
        line-height: 1.9;
    }

    .ht-hero__actions {
        align-items: stretch;
        gap: 10px;
        margin-top: 28px;
    }

    .ht-hero__button {
        min-height: 51px;
        padding-inline: 16px;
        gap: 12px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .ht-hero__bottom {
        gap: 12px;
        padding-top: 18px;
    }

    .ht-hero__bottom-label {
        max-width: 220px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .ht-hero__bottom-index {
        gap: 6px;
        font-size: 10px;
    }
}

/* 13. SMALL MOBILE SCREENS */
@media (max-width: 360px) {
    .ht-hero__container {
        width: calc(100% - 30px);
    }

    .ht-hero__title {
        font-size: 48px;
        letter-spacing: -1.8px;
    }

    .ht-hero__title span {
        letter-spacing: -2px;
    }

    .ht-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ht-hero__button {
        width: 100%;
    }
}

/* 14. REDUCED MOTION ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .ht-hero__button,
    .ht-hero__button--primary span {
        transition: none;
    }
}

/* START: FIX MOBILE HERO BACKGROUND */

@media (max-width: 600px) {

    .ht-hero {
        position: relative !important;
        min-height: 100svh !important;
        height: auto !important;
        overflow: hidden;
        isolation: isolate;
    }

    .ht-hero__background {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -3 !important;
        overflow: hidden;
    }

    .ht-hero__image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .ht-hero__overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: -2 !important;
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.96) 0%,
                rgba(0, 0, 0, 0.82) 55%,
                rgba(0, 0, 0, 0.40) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.65),
                transparent 75%
            ) !important;
    }

    .ht-hero__container {
        position: relative !important;
        z-index: 1 !important;
        width: calc(100% - 40px) !important;
        min-height: 100svh !important;
        padding-top: 100px !important;
        padding-bottom: 25px !important;
        box-sizing: border-box !important;
    }

}

/* END: FIX MOBILE HERO BACKGROUND */

/* =========================================================
   END: THE HATIM STORE — PREMIUM LUXURY HERO
========================================================= */


/* =================================================================
   START: THE HATIM STORE — PREMIUM MOVING TICKER
   Developed by Hatim Tech (HT)
================================================================= */

.ht-ticker {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    overflow: hidden;
 background: #080808;    color: #ffffff;
    border-bottom: 1px solid #292929;
    box-sizing: border-box;
}

.ht-ticker__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    height: 100%;
    animation: ht-ticker-marquee 18s linear infinite;
    will-change: transform;
}

.ht-ticker__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    gap: clamp(24px, 3.5vw, 52px);
    min-width: max-content;
    height: 100%;
    padding: 0 26px;
    white-space: nowrap;
    box-sizing: border-box;
}

.ht-ticker__group span {
    flex: 0 0 auto;
    margin: 0;
    color: #f2f2f2;
    font-family: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
}

.ht-ticker__group .ht-ticker__separator {
    color: #858585;
    font-size: 9px;
}

/* Seamless movement: two equal-width content groups */
@keyframes ht-ticker-marquee {
    from {
        transform: translateX(0);
    }

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

/* START: Pause Ticker on Hover */
@media (hover: hover) {
    .ht-ticker:hover .ht-ticker__track {
        animation-play-state: paused;
    }
}
/* END: Pause Ticker on Hover */

/* Mobile */
@media (max-width: 600px) {
    .ht-ticker {
        height: 32px;
    }

    .ht-ticker__track {
        animation-duration: 14s;
    }

    .ht-ticker__group {
        gap: 20px;
        padding: 0 18px;
    }

    .ht-ticker__group span {
        font-size: 8px;
        letter-spacing: 1.3px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .ht-ticker__track {
        animation: none;
        transform: none;
    }
}

/* =================================================================
   END: PREMIUM MOVING TICKER
================================================================= */


/* =========================================================
   START: THE HATIM STORE — PREMIUM TRUST FEATURES
   Developed by Hatim Tech (HT)
   @package HatimTechCore
========================================================= */



/* ============================================================
   START: HT TRUST — FINAL MOBILE TYPOGRAPHY HIERARCHY
   Developed by Hatim Tech (HT)
============================================================ */

@media (max-width: 680px) {

    .ht-trust .ht-trust__item {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Small supporting label */
    .ht-trust .ht-trust__eyebrow {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 9px !important;
        color: #77736d !important;
    }

    /* Main feature heading */
    .ht-trust .ht-trust__title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 11px !important;
        color: #171717 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /* Readable supporting description */
    .ht-trust .ht-trust__description {
        max-width: 250px !important;
        min-height: 0 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.75 !important;
        letter-spacing: 0.1px !important;
        color: #696761 !important;
    }

    .ht-trust .ht-trust__icon {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 16px !important;
    }

    .ht-trust .ht-trust__icon svg {
        width: 31px !important;
        height: 31px !important;
    }

    .ht-trust .ht-trust__accent {
        margin-top: 14px !important;
    }

    /* Brand signature */
    .ht-trust .ht-trust__signature p {
        font-size: 8px !important;
        letter-spacing: 1.4px !important;
    }

    .ht-trust .ht-trust__brand {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }
}

/* Small phones */
@media (max-width: 380px) {

    .ht-trust .ht-trust__eyebrow {
        font-size: 7.5px !important;
        letter-spacing: 1px !important;
    }

    .ht-trust .ht-trust__title {
        font-size: 23px !important;
    }

    .ht-trust .ht-trust__description {
        font-size: 10px !important;
        line-height: 1.7 !important;
    }
}

/* ============================================================
   END: HT TRUST — FINAL MOBILE TYPOGRAPHY HIERARCHY
============================================================ */



/* START: SECTION BASE */
.ht-trust,
.ht-trust * {
    box-sizing: border-box;
}

.ht-trust {
    --ht-trust-black: #151515;
    --ht-trust-text: #414141;
    --ht-trust-muted: #77736d;
    --ht-trust-line: #e8e5e0;
    --ht-trust-accent: #a99b86;
    --ht-trust-display: var(--ths-display-font, 'Cormorant Garamond', Georgia, serif);
    --ht-trust-body: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);

    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 76px clamp(22px, 5vw, 84px) 54px;
    overflow: hidden;
    background: #ffffff;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-body);
    border-bottom: 1px solid #f0eeeb;
}

/* Subtle luxury detail */
.ht-trust::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(180px, 32vw);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ht-trust-accent),
        transparent
    );
    transform: translateX(-50%);
}
/* END: SECTION BASE */


/* START: FOUR-COLUMN LAYOUT */
.ht-trust__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.ht-trust__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(15px, 2.4vw, 38px) 12px;
    text-align: center;
}

.ht-trust__item + .ht-trust__item::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: var(--ht-trust-line);
}

/* Small diamond detail on dividers */
.ht-trust__item + .ht-trust__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border: 1px solid #d9d2c8;
    transform: translate(-50%, -50%) rotate(45deg);
}
/* END: FOUR-COLUMN LAYOUT */


/* START: PREMIUM LINE ICONS */
.ht-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: 0 0 25px;
    color: var(--ht-trust-black);
    background: #ffffff;
    border: 1px solid #d9d1c5;
    border-radius: 50%;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.ht-trust__icon svg {
    display: block;
    width: 43px;
    height: 43px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-trust__item:hover .ht-trust__icon {
    color: #ffffff;
    background: var(--ht-trust-black);
    border-color: var(--ht-trust-black);
    transform: translateY(-3px);
}
/* END: PREMIUM LINE ICONS */


/* START: FEATURE TYPOGRAPHY */
.ht-trust__eyebrow {
    display: block;
    margin: 0 0 12px;
    color: var(--ht-trust-muted);
    font-family: var(--ht-trust-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.1px;
    line-height: 1.7;
    text-transform: uppercase;
}

.ht-trust__title {
    width: 100%;
    margin: 0 0 13px;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-display);
    font-size: clamp(23px, 2.15vw, 34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.45px;
    text-transform: none;
    overflow-wrap: anywhere;
}

.ht-trust__description {
    max-width: 270px;
    min-height: 48px;
    margin: 0;
    color: var(--ht-trust-text);
    font-family: var(--ht-trust-body);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.8px;
}

.ht-trust__accent {
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 22px;
    background: var(--ht-trust-accent);
    transition: width 0.3s ease;
}

.ht-trust__item:hover .ht-trust__accent {
    width: 58px;
}
/* END: FEATURE TYPOGRAPHY */


/* START: BRAND SIGNATURE */
.ht-trust__signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(16px, 2.2vw, 36px);
    row-gap: 13px;
    max-width: 760px;
    margin: 53px auto 0;
    text-align: center;
}

.ht-trust__signature-line {
    display: block;
    flex: 1 1 50px;
    max-width: 130px;
    height: 1px;
    background: var(--ht-trust-accent);
}

.ht-trust__signature p {
    flex: 0 1 auto;
    margin: 0;
    color: var(--ht-trust-text);
    font-family: var(--ht-trust-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.8;
    text-transform: uppercase;
}

.ht-trust__signature p span {
    padding: 0 5px;
    color: var(--ht-trust-accent);
}

.ht-trust__brand {
    flex: 0 0 100%;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: clamp(4px, 0.8vw, 7px);
    line-height: 1.8;
    text-align: center;
}
/* END: BRAND SIGNATURE */


/* START: TABLET RESPONSIVE */
@media (max-width: 1000px) {
    .ht-trust {
        padding: 60px 28px 44px;
    }

    .ht-trust__item {
        padding-right: 17px;
        padding-left: 17px;
    }

    .ht-trust__icon {
        width: 78px;
        height: 78px;
        margin-bottom: 21px;
    }

    .ht-trust__icon svg {
        width: 37px;
        height: 37px;
    }

    .ht-trust__eyebrow {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .ht-trust__title {
        font-size: clamp(21px, 2.7vw, 28px);
    }

    .ht-trust__description {
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .ht-trust__signature {
        margin-top: 42px;
    }
}
/* END: TABLET RESPONSIVE */


/* START: MOBILE RESPONSIVE */
@media (max-width: 680px) {
    .ht-trust {
        padding: 45px 18px 36px;
    }

    .ht-trust__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    .ht-trust__item {
        padding: 0 12px 12px;
    }

    .ht-trust__item:nth-child(3)::before {
        display: none;
    }

    .ht-trust__item:nth-child(3)::after {
        display: none;
    }

    .ht-trust__item:nth-child(3),
    .ht-trust__item:nth-child(4) {
        padding-top: 7px;
    }

    .ht-trust__item:nth-child(4)::before {
        top: 0;
        bottom: 8px;
    }

    .ht-trust__item:nth-child(4)::after {
        top: 50%;
    }

    .ht-trust__icon {
        width: 68px;
        height: 68px;
        margin-bottom: 17px;
    }

    .ht-trust__icon svg {
        width: 33px;
        height: 33px;
    }

    .ht-trust__eyebrow {
        margin-bottom: 9px;
        font-size: 7px;
        letter-spacing: 1.1px;
    }

    .ht-trust__title {
        margin-bottom: 9px;
        font-size: clamp(21px, 5.3vw, 27px);
        line-height: 1.12;
        letter-spacing: -0.3px;
    }

    .ht-trust__description {
        min-height: 54px;
        font-size: 9px;
        line-height: 1.8;
        letter-spacing: 0.2px;
    }

    .ht-trust__accent {
        width: 28px;
        margin-top: 15px;
    }

    .ht-trust__item:hover .ht-trust__accent {
        width: 38px;
    }

    .ht-trust__signature {
        column-gap: 12px;
        row-gap: 10px;
        margin-top: 33px;
    }

    .ht-trust__signature-line {
        flex-basis: 22px;
    }

    .ht-trust__signature p {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .ht-trust__brand {
        font-size: 10px;
        letter-spacing: 4px;
    }
}
/* END: MOBILE RESPONSIVE */


/* START: SMALL MOBILE */
@media (max-width: 380px) {
    .ht-trust {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ht-trust__item {
        padding-right: 8px;
        padding-left: 8px;
    }

    .ht-trust__title {
        font-size: 20px;
    }

    .ht-trust__description {
        font-size: 8px;
    }

    .ht-trust__signature p {
        font-size: 7px;
        letter-spacing: 1.1px;
    }
}
/* END: SMALL MOBILE */


/* START: ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .ht-trust__icon,
    .ht-trust__accent {
        transition: none;
    }

    .ht-trust__item:hover .ht-trust__icon {
        transform: none;
    }
}
/* END: ACCESSIBILITY */

/* =========================================================
   END: THE HATIM STORE — PREMIUM TRUST FEATURES
========================================================= */



/* =========================================================
   START: THS — LUXURY EDITORIAL CATEGORIES COMPLETE STYLE
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   Text Domain: hatim-tech
   ========================================================= */

/* ---------- 01. DESIGN TOKENS & SECTION ---------- */
.ht-categories {
    --ht-cat-black: #111111;
    --ht-cat-white: #ffffff;
    --ht-cat-muted: #777777;
    --ht-cat-paper: #f5f4f1;
    --ht-cat-border: rgba(17, 17, 17, 0.14);
    --ht-cat-display: var(--ths-display-font, "Cormorant Garamond", Georgia, serif);
    --ht-cat-body: var(--ths-nav-font, "Montserrat", Arial, sans-serif);

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: clamp(64px, 8vw, 124px) clamp(18px, 5vw, 76px);
    overflow: hidden;
    background: var(--ht-cat-paper);
    color: var(--ht-cat-black);
    font-family: var(--ht-cat-body);
    box-sizing: border-box;
}

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

.ht-categories img {
    vertical-align: middle;
}

/* ---------- 02. EDITORIAL HEADING ---------- */
.ht-categories__heading {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    margin: 0 auto clamp(38px, 5vw, 68px);
    text-align: center;
}

.ht-categories__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 0 0 18px;
    color: #555555;
    font-family: var(--ht-cat-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.2px;
    line-height: 1.6;
    text-transform: uppercase;
}

.ht-categories__eyebrow::before,
.ht-categories__eyebrow::after {
    content: "";
    display: block;
    width: 26px;
    height: 1px;
    flex: 0 0 26px;
    background: #99958e;
}

.ht-categories__title {
    margin: 0;
    color: var(--ht-cat-black);
    font-family: var(--ht-cat-display);
    font-size: clamp(38px, 5.3vw, 72px);
    font-weight: 500;
    letter-spacing: -1.8px;
    line-height: 1.05;
    text-transform: none;
}

.ht-categories__title span {
    color: #77736c;
    font-style: italic;
    font-weight: 400;
}

.ht-categories__intro {
    max-width: 490px;
    margin: 19px auto 0;
    color: #696969;
    font-family: var(--ht-cat-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.9;
}

/* ---------- 03. CATEGORY GRID ---------- */
.ht-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(12px, 1.3vw, 18px);
    width: 100%;
    max-width: 1150px;
    margin-inline: auto;
}

.ht-categories__card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.ht-categories__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    outline-offset: 5px;
    -webkit-tap-highlight-color: transparent;
}

.ht-categories__card:focus {
    color: inherit;
}

.ht-categories__card:focus-visible {
    outline: 2px solid var(--ht-cat-black);
    outline-offset: 5px;
}

.ht-categories__card:visited {
    color: inherit;
}

/* ---------- 04. IMAGE FRAME & ORIGINAL SMOOTH ZOOM ---------- */
.ht-categories__image-wrap {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    overflow: hidden;
    background: #e1dfda;
}

.ht-categories__card:first-child .ht-categories__image-wrap {
    aspect-ratio: 0.91 / 1;
}

.ht-categories__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
    transform: scale(1);
    transform-origin: center center;

    /* Original smooth transition preserved */
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Image shade */
.ht-categories__image-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.23) 100%
    );
}

/* ---------- 05. CARD NUMBER ---------- */
.ht-categories__number {
    position: absolute;
    top: 17px;
    left: 17px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: var(--ht-cat-white);
    background: rgba(17, 17, 17, 0.20);
    font-family: var(--ht-cat-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---------- 06. ARROW ---------- */
.ht-categories__arrow {
    position: absolute;
    right: 17px;
    bottom: 17px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    color: var(--ht-cat-white);
    background: rgba(17, 17, 17, 0.18);
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.4s ease;
}

/* ---------- 07. CARD INFORMATION ---------- */
.ht-categories__card-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 1px 8px;
}

.ht-categories__status {
    display: block;
    margin: 0 0 9px;
    color: #77736c;
    font-family: var(--ht-cat-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.6;
    text-transform: uppercase;
}

.ht-categories__name {
    margin: 0;
    color: #171717;
    font-family: var(--ht-cat-display);
    font-size: clamp(23px, 2.2vw, 33px);
    font-weight: 500;
    letter-spacing: -0.45px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

.ht-categories__card:first-child .ht-categories__name {
    font-size: clamp(30px, 3.4vw, 48px);
}

.ht-categories__description {
    max-width: 390px;
    margin: 10px 0 0;
    color: #747474;
    font-family: var(--ht-cat-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.85;
}

/* ---------- 08. COMING SOON OVERLAY ---------- */
.ht-categories__card.is-coming-soon .ht-categories__coming-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 20px);
    padding: 12px;
    overflow: hidden;
    color: var(--ht-cat-white);
    background: #080808;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ht-categories__card.is-coming-soon .ht-categories__coming-overlay::before,
.ht-categories__card.is-coming-soon .ht-categories__coming-overlay::after {
    content: none;
    display: none;
}

.ht-categories__card.is-coming-soon .ht-categories__coming-label {
    position: relative;
    z-index: 2;
    display: inline-block;
    flex: 0 0 auto;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--ht-cat-white);
    background: transparent;
    font-family: var(--ht-cat-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.ht-categories__card.is-coming-soon .ht-categories__coming-line {
    position: relative;
    z-index: 2;
    display: block;
    width: 0;
    margin: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* ---------- 09. HOVER INTERACTIONS ---------- */
.ht-categories__card:hover .ht-categories__image {
    transform: scale(1.05); /* Scales flawlessly from center center */
}

.ht-categories__card:hover .ht-categories__arrow {
    transform: scale(1.1) rotate(45deg);
    background-color: var(--ht-cat-white);
    color: var(--ht-cat-black);
}

.ht-categories__card.is-coming-soon:hover .ht-categories__coming-overlay {
    opacity: 1;
    visibility: visible;
}

.ht-categories__card.is-coming-soon:hover .ht-categories__coming-label {
    opacity: 1;
    transform: translateY(0);
}


/* START: Keep the Large Featured Image Colorful */
.ht-categories__card:first-child .ht-categories__image {
    filter: grayscale(0%);
}
/* END: Keep the Large Featured Image Colorful */
/* =========================================================
   END: THS — LUXURY EDITORIAL CATEGORIES COMPLETE STYLE
   ========================================================= */





   





/* =========================================================
   START: THS — CATEGORIES RESPONSIVE DESIGN
   Developed by Hatim Tech (HT)
   ========================================================= */


/* ---------- 01. TABLET RESPONSIVE ---------- */

@media (max-width: 1024px) {

    .ht-categories {
        padding: 76px 28px;
    }

    .ht-categories__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .ht-categories__card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .ht-categories__card:first-child .ht-categories__image-wrap {
        aspect-ratio: 0.95 / 1;
    }

    .ht-categories__image-wrap {
        aspect-ratio: 1 / 1.05;
    }

    .ht-categories__card-info {
        padding-top: 13px;
    }

    .ht-categories__name {
        font-size: clamp(22px, 2.5vw, 30px);
    }

    .ht-categories__card:first-child .ht-categories__name {
        font-size: clamp(29px, 3.5vw, 42px);
    }

}


/* ---------- 02. MOBILE RESPONSIVE ---------- */

@media (max-width: 767px) {

    .ht-categories {
        width: 100%;
        padding: 64px 18px;
        overflow: hidden;
    }

    /* Heading */

    .ht-categories__heading {
        width: 100%;
        margin-bottom: 34px;
    }

    .ht-categories__eyebrow {
        gap: 9px;
        margin-bottom: 13px;
        font-size: 8px;
        letter-spacing: 2.2px;
    }

    .ht-categories__eyebrow::before,
    .ht-categories__eyebrow::after {
        width: 18px;
        flex-basis: 18px;
    }

    .ht-categories__title {
        font-size: clamp(36px, 8vw, 48px);
        letter-spacing: -1px;
        line-height: 1.08;
    }

    .ht-categories__intro {
        max-width: 340px;
        margin-top: 13px;
        font-size: 11px;
        line-height: 1.8;
    }


    /* Two-column category layout */

    .ht-categories__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 26px 12px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Featured first category */

    .ht-categories__card:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .ht-categories__card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }


    /* Image dimensions */

    .ht-categories__image-wrap {
        width: 100%;
        aspect-ratio: 0.82 / 1;
    }

    .ht-categories__card:first-child .ht-categories__image-wrap {
        aspect-ratio: 1.35 / 1;
    }

    .ht-categories__image {
        object-fit: cover;
        object-position: center;
    }


    /* Image number */

    .ht-categories__number {
        top: 10px;
        left: 10px;
        min-width: 27px;
        min-height: 27px;
        padding: 5px 6px;
        font-size: 8px;
        letter-spacing: 1px;
    }


    /* Arrow */

    .ht-categories__arrow {
        right: 10px;
        bottom: 10px;
        width: 32px;
        height: 32px;
        font-size: 17px;
    }


    /* Category information */

    .ht-categories__card-info {
        padding: 12px 0 0;
        min-width: 0;
    }

    .ht-categories__status {
        margin-bottom: 6px;
        font-size: 7px;
        letter-spacing: 1.3px;
        line-height: 1.5;
    }

    .ht-categories__name {
        font-size: clamp(20px, 4.5vw, 27px);
        letter-spacing: -0.3px;
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .ht-categories__card:first-child .ht-categories__name {
        font-size: clamp(29px, 7vw, 38px);
    }

    .ht-categories__description {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.7;
        overflow-wrap: break-word;
    }


    /* Coming Soon overlay */

    .ht-categories__card.is-coming-soon .ht-categories__coming-overlay {
        gap: 7px;
        padding: 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ht-categories__card.is-coming-soon .ht-categories__coming-label {
        max-width: 100%;
        flex: 0 1 auto;
        padding: 9px 10px;
        font-size: 8px;
        letter-spacing: 1.5px;
        line-height: 1.5;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .ht-categories__card.is-coming-soon .ht-categories__coming-line {
        width: 30px;
        height: 1px;
        flex: 0 0 1px;
    }

    

    /* Disable hover zoom on touch screens */

    .ht-categories__card:hover .ht-categories__image {
        transform: none;
    }

    .ht-categories__card:hover .ht-categories__arrow {
        transform: none;
    }

}


/* ---------- 03. SMALL MOBILE ---------- */

@media (max-width: 480px) {

    .ht-categories {
        padding: 52px 14px;
    }

    .ht-categories__grid {
        gap: 23px 10px;
    }

    .ht-categories__heading {
        margin-bottom: 29px;
    }

    .ht-categories__title {
        font-size: clamp(33px, 8.5vw, 41px);
    }

    .ht-categories__intro {
        max-width: 300px;
        font-size: 10px;
    }

    .ht-categories__image-wrap {
        aspect-ratio: 0.78 / 1;
    }

    .ht-categories__card:first-child .ht-categories__image-wrap {
        aspect-ratio: 1.2 / 1;
    }

    .ht-categories__status {
        font-size: 6.5px;
        letter-spacing: 1px;
    }

    .ht-categories__name {
        font-size: clamp(18px, 5vw, 23px);
    }

    .ht-categories__card:first-child .ht-categories__name {
        font-size: clamp(27px, 7.5vw, 34px);
    }

    .ht-categories__description {
        font-size: 8px;
        line-height: 1.65;
    }

}


/* ---------- 04. EXTRA SMALL MOBILE ---------- */

@media (max-width: 360px) {

    .ht-categories {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ht-categories__grid {
        column-gap: 9px;
        row-gap: 20px;
    }

    .ht-categories__coming-label {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-categories__name {
        font-size: 18px;
    }

    .ht-categories__card:first-child .ht-categories__name {
        font-size: 27px;
    }

}


/* =========================================================
   END: THS — CATEGORIES RESPONSIVE DESIGN
   ========================================================= */



/* =========================================================
   START: HT EDITORIAL PREMIUM IMAGE ZOOM CORE FIX
   Developed by Hatim Tech (HT)
   ========================================================= */

/* 1. Missing Wrapper Layout Injector */
.ht-editorial__image-link {
    display: block !important;
    overflow: hidden !important;  /* Yeh image ko bahar nikalne se rokega */
    position: relative !important; /* Context locking */
    width: 100%;
    height: 100%;
}

/* 2. Image Base Setup with Cubic-Bezier Timing */
.ht-editorial__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1);
    transform-origin: center center !important;
    
    /* Hardware acceleration layer */
    will-change: transform;
    
    /* Premium transition engine */
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Hover Trigger State */
@media (hover: hover) and (pointer: fine) {
    /* Jab card par hover ho, toh image ko zoom karo */
    .ht-editorial__card:hover .ht-editorial__image {
        transform: scale(1.07) !important;
    }
}

/* =========================================================
   END: HT EDITORIAL PREMIUM IMAGE ZOOM CORE FIX
   ========================================================= */


   /* =========================================================
   START: HT EDITORIAL GALLERY IMAGES TRANSITION STYLE
   Developed by Hatim Tech (HT)
   Package: HatimTechCore
   ========================================================= */

/* Main Image Component Styling */
.ht-editorial__image {
    opacity: 1;
    transform: scale(1);
    transform-origin: center center !important;
    
    /* Active GPU layers to prevent desktop/mobile screen flickering */
    will-change: opacity, transform;
    
    /* Synced luxury cubic-bezier timing engine for entry animation */
    transition: 
        opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* JavaScript State: Smooth Ghost Shrink and Fade Out on Arrow Click */
.ht-editorial__image.ht-image-changing {
    opacity: 0 !important;
    transform: scale(0.95) !important; /* Image shifts subtly backward on click */
    
    /* Snappy exit timing to handle dynamic source replacement quickly */
    transition: 
        opacity 0.25s ease-in-out,
        transform 0.25s ease-in-out !important;
}

/* Optional hover state integration for static desktops */
@media (hover: hover) and (pointer: fine) {
    .ht-editorial__card:hover .ht-editorial__image:not(.ht-image-changing) {
        transform: scale(1.05);
    }
}




/* =========================================================
   START: HT — Premium Editorial Header
   Developed by Hatim Tech (HT)
   ========================================================= */

.ht-editorial__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 30px;
    margin: 0 auto 58px;
    text-align: center;
}

.ht-editorial__intro {
    width: 100%;
    max-width: 850px;
    margin-inline: auto;
    text-align: center;
}

.ht-editorial__eyebrow {
    display: inline-block;
    margin: 0 auto 24px;
    color: #77746e;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    line-height: 1.8;
    text-transform: uppercase;
}

.ht-editorial__heading {
    max-width: 800px;
    margin: 0 auto;
    color: #111111;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(46px, 6.3vw, 82px);
    font-weight: 500;
    letter-spacing: -2.2px;
    line-height: 0.98;
    text-align: center;
    text-wrap: balance;
}

.ht-editorial__heading em {
    display: block;
    margin-top: 5px;
    color: #77746e;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -1.8px;
}

.ht-editorial__subtitle {
    max-width: 530px;
    margin: 25px auto 0;
    color: #777777;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.35px;
    line-height: 2;
    text-align: center;
}

/* START: HT — Tablet & Mobile */

@media (max-width: 768px) {
    .ht-editorial__header {
        gap: 24px;
        margin-bottom: 38px;
        padding-inline: 18px;
    }

    .ht-editorial__intro {
        max-width: 100%;
    }

    .ht-editorial__eyebrow {
        margin-bottom: 19px;
        font-size: 9px;
        letter-spacing: 2.8px;
    }

    .ht-editorial__heading {
        font-size: clamp(43px, 10vw, 64px);
        letter-spacing: -1.4px;
        line-height: 1;
    }

    .ht-editorial__heading em {
        letter-spacing: -1px;
    }

    .ht-editorial__subtitle {
        max-width: 420px;
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.9;
    }
}

/* END: HT — Premium Editorial Header */




/* =========================================================
   END: HT EDITORIAL GALLERY IMAGES TRANSITION STYLE
   ========================================================= */


   
/* =========================================================
   START: THS — PREMIUM SINGLE PRODUCT PAGE
   Theme: THE HATIM STORE
   Package: HatimTechCore
   Author: Hatim Tech
   Text Domain: hatim-tech
========================================================= */

/* 01. DESIGN TOKENS */

.ht-product-page {
    --htp-ink: #171717;
    --htp-muted: #77736f;
    --htp-line: #e7e5e2;
    --htp-paper: #ffffff;
    --htp-soft: #f4f2ef;
    --htp-accent: #b92030;

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px 90px;
    color: var(--htp-ink);
    background: var(--htp-paper);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.75;
}

.ht-product-page,
.ht-product-page * {
    box-sizing: border-box;
}

.ht-product-page img {
    display: block;
    max-width: 100%;
}

.ht-product-page button,
.ht-product-page input,
.ht-product-page select {
    font-family: inherit;
}

/* 02. BREADCRUMB */

.ht-product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 42px;
    padding: 7px 0 10px;
    color: var(--htp-muted);
    font-size: 10px;
}

.ht-product-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.ht-product-breadcrumb a:hover {
    color: #111;
}

.ht-product-breadcrumb__category a {
    pointer-events: none;
}

/* 03. MAIN LAYOUT */

.ht-product-layout {
    display: grid;
    grid-template-columns:
        minmax(210px, .85fr)
        minmax(330px, 1.15fr)
        minmax(300px, .95fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 34px);
    width: 100%;
}

.ht-product-left,
.ht-product-gallery,
.ht-product-summary {
    min-width: 0;
}

/* 04. THUMBNAILS */

.ht-product-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 15px;
}

.ht-product-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--htp-soft);
    cursor: pointer;
    transition: border-color .25s ease;
}

.ht-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ht-product-thumbnail:hover img {
    transform: scale(1.04);
}

.ht-product-thumbnail.is-active {
    border-color: #171717;
}

.ht-product-thumbnail--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 05. DESCRIPTION */

.ht-product-description {
    overflow-wrap: anywhere;
}

.ht-product-description h2 {
    display: table;
    margin: 0 0 12px;
    padding-bottom: 3px;
    border-bottom: 1px solid #171717;
    color: #171717;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
}

.ht-product-description__content {
    color: #393939;
    font-size: 12px;
    line-height: 1.9;
}

.ht-product-description__content p {
    margin: 0 0 9px;
}

.ht-product-description__content h2,
.ht-product-description__content h3,
.ht-product-description__content h4 {
    margin: 12px 0 5px;
    color: #171717;
    font-size: 13px;
    font-weight: 600;
}

.ht-product-description__content ul,
.ht-product-description__content ol {
    padding-left: 20px;
}

.ht-product-description__sku {
    margin: 12px 0 0;
    font-size: 11px;
}

/* 06. SHARE */

.ht-product-share {
    margin-top: 22px;
}

.ht-product-share__button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    color: #222;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

.ht-product-share__button svg {
    width: 21px;
    height: 21px;
    fill: #171717;
    stroke: #171717;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-product-share__button:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 07. MAIN PRODUCT GALLERY */

.ht-product-gallery {
    position: sticky;
    top: 95px;
    width: 100%;
}

.ht-product-gallery__stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    background: var(--htp-soft);
}

.ht-product-gallery__slide {
    display: none;
    width: 100%;
    aspect-ratio: .72 / 1;
    overflow: hidden;
}

.ht-product-gallery__slide.is-active {
    display: block;
    animation: ths-product-reveal .3s ease both;
}

.ht-product-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.ht-product-gallery__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    background: var(--htp-soft);
}

.ht-product-gallery__placeholder img {
    width: 100%;
    max-height: 700px;
    object-fit: contain;
}

/* 08. SMALL ROUND GALLERY ARROWS */

.ht-product-gallery__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(20, 20, 20, .09);
    border-radius: 50%;
    color: #171717;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 9px rgba(0, 0, 0, .07);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.ht-product-gallery__arrow--prev {
    left: 12px;
}

.ht-product-gallery__arrow--next {
    right: 12px;
}

.ht-product-gallery__arrow > span {
    display: none;
}

.ht-product-gallery__arrow::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

.ht-product-gallery__arrow--prev::before {
    transform: translateX(1px) rotate(-135deg);
}

.ht-product-gallery__arrow--next::before {
    transform: translateX(-1px) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
    .ht-product-gallery__arrow:hover {
        color: #fff;
        background: #171717;
        border-color: #171717;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    }
}

.ht-product-gallery__sale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    padding: 4px 9px;
    color: #fff;
    background: var(--htp-accent);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.ht-product-gallery__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    padding: 3px 8px;
    color: #171717;
    background: rgba(255, 255, 255, .85);
    font-size: 10px;
}

/* 09. PRODUCT SUMMARY */

.ht-product-summary {
    min-width: 0;
}

.ht-product-summary__category {
    margin-bottom: 5px;
    color: var(--htp-muted);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ht-product-summary__category a {
    color: inherit;
    text-decoration: none;
}

.ht-product-summary__title {
    margin: 0 0 13px;
    color: #171717;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
}

.ht-product-summary__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    font-size: 11px;
}

.ht-product-summary__rating .star-rating {
    float: none;
    margin: 0;
}

.ht-product-summary__rating > span {
    color: var(--htp-muted);
}

.ht-product-summary__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 20px;
}

.ht-product-summary__price {
    color: #171717;
    font-size: 18px;
    font-weight: 500;
}

.ht-product-summary__price del {
    margin-right: 5px;
    color: #888;
    font-size: 13px;
    font-weight: 400;
}

.ht-product-summary__price ins {
    text-decoration: none;
}

.ht-product-summary__delivery {
    color: var(--htp-accent);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.ht-product-summary__short-description {
    margin-bottom: 14px;
    color: #555;
    font-size: 12px;
    line-height: 1.85;
}

.ht-product-summary__short-description p {
    margin: 0 0 8px;
}

.ht-product-summary__availability {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -7px 0 17px;
    color: #454545;
    font-size: 11px;
}

.ht-product-summary__stock-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #53895c;
}

.ht-product-summary__out-of-stock {
    color: var(--htp-accent);
}

/* 10. WOOCOMMERCE PURCHASE FORM */

.ht-product-purchase,
.ht-product-purchase .cart {
    width: 100%;
    margin: 0;
}

/* Quantity selector — compact luxury styling */

.ht-product-purchase .quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 38px;
    margin: 0 0 20px !important;
    padding: 3px;
    border: 1px solid #dedbd7;
    border-radius: 3px;
    background: #fff;
    transition: border-color .2s ease;
}

.ht-product-purchase .quantity:focus-within {
    border-color: #171717;
}

.ht-product-purchase .quantity input.qty {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 30px;
    margin: 0;
    padding: 0 2px;
    border: 0 !important;
    border-radius: 0;
    outline: none;
    color: #171717;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    box-shadow: none !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ht-product-purchase .quantity input.qty::-webkit-inner-spin-button,
.ht-product-purchase .quantity input.qty::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* 11. ADD TO CART */

.ht-product-purchase .single_add_to_cart_button,
.ht-product-purchase button.single_add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 47px;
    margin: 8px 0 24px !important;
    padding: 13px 20px !important;
    border: 1px solid #171717 !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: #171717 !important;
    font-family: "Montserrat", sans-serif;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .22s ease, background-color .22s ease;
}

.ht-product-purchase .single_add_to_cart_button:hover {
    color: #171717 !important;
    background: #fff !important;
}

.ht-product-purchase .single_add_to_cart_button:disabled,
.ht-product-purchase .single_add_to_cart_button.disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ht-product-purchase .stock {
    font-size: 12px;
}

/* 12. VARIABLE PRODUCTS */

.ht-product-purchase form.variations_form {
    width: 100%;
}

.ht-product-purchase table.variations {
    width: 100%;
    margin: 0 0 18px !important;
    border: 0 !important;
    border-collapse: collapse;
}

.ht-product-purchase table.variations tbody,
.ht-product-purchase table.variations tr,
.ht-product-purchase table.variations th,
.ht-product-purchase table.variations td {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left;
}

.ht-product-purchase table.variations tr {
    margin-bottom: 16px;
}

.ht-product-purchase table.variations th.label {
    margin-bottom: 7px;
}

.ht-product-purchase table.variations th.label label {
    display: block;
    margin: 0;
    color: #353535;
    font-size: 11px;
    font-weight: 400;
}

.ht-product-purchase table.variations select {
    width: 100%;
    max-width: 280px;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #d2d0cc;
    border-radius: 0;
    color: #171717;
    background: #fff;
    font-size: 12px;
    box-shadow: none;
}

.ht-product-purchase table.variations select:focus {
    border-color: #171717;
    outline: none;
}

.ht-product-purchase .reset_variations {
    display: inline-block;
    margin: 6px 0 0;
    color: #777;
    font-size: 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ht-product-purchase .woocommerce-variation {
    margin: 10px 0;
    font-size: 12px;
}

.ht-product-purchase .woocommerce-variation-price {
    margin-bottom: 7px;
}

.ht-product-purchase .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 13. PRODUCT ACCORDIONS */

.ht-product-accordions {
    margin-top: 0;
    border-top: 1px solid var(--htp-line);
}

.ht-product-accordion {
    border-bottom: 1px solid var(--htp-line);
}

.ht-product-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 49px;
    padding: 12px 0;
    color: #242424;
    font-size: 11px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.ht-product-accordion summary::-webkit-details-marker {
    display: none;
}

.ht-product-accordion__icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.ht-product-accordion__icon::before,
.ht-product-accordion__icon::after {
    position: absolute;
    top: 5px;
    left: 1px;
    width: 10px;
    height: 1px;
    background: #666;
    content: "";
    transition: transform .2s ease;
}

.ht-product-accordion__icon::after {
    transform: rotate(90deg);
}

.ht-product-accordion[open] .ht-product-accordion__icon::after {
    transform: rotate(0);
}

.ht-product-accordion__content {
    padding: 0 0 16px;
    color: #666;
    font-size: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.ht-product-accordion__content p {
    margin: 0 0 9px;
}

.ht-product-accordion__content ul,
.ht-product-accordion__content ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

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

.ht-product-details-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f0efed;
}

/* 14. WOOCOMMERCE NOTICES */

.ht-product-page .woocommerce-notices-wrapper {
    margin-bottom: 14px;
}

.ht-product-page .woocommerce-message,
.ht-product-page .woocommerce-info,
.ht-product-page .woocommerce-error {
    margin: 0 0 15px;
    padding: 12px 15px;
    border-top: 2px solid #171717;
    background: #f7f7f7;
    font-size: 12px;
}


/* ============================================================
   START: THS — PREMIUM RELATED PRODUCTS SECTION
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   ============================================================ */

/* SECTION */
.ht-product-related {
    width: 100%;
    max-width: 1440px;
    margin: 100px auto 90px;
    padding: 0 30px;
    box-sizing: border-box;
}

/* HEADING */
.ht-product-related__heading {
    text-align: center;
    margin: 0 auto 42px;
}

.ht-product-related__heading > span {
    display: block;
    margin-bottom: 12px;
    color: #858585;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ht-product-related__heading h2 {
    margin: 0;
    color: #151515;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.7px;
}

/* PRODUCT GRID */
.ht-product-related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 16px;
    width: 100%;
}

/* PRODUCT CARD */
.ht-product-related__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
}

/* IMAGE WRAPPER */
.ht-product-related__image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f3f2f0;
    border-radius: 2px;
    isolation: isolate;
}

.ht-product-related__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.ht-product-related__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .75s cubic-bezier(.2,.65,.3,1);
}

.ht-product-related__card:hover .ht-product-related__image img {
    transform: scale(1.035);
}

/* PRODUCT INFORMATION */
.ht-product-related__information {
    position: relative;
    padding: 13px 0 0;
    padding-right: 0;
    min-width: 0;
}

.ht-product-related__information h3 {
    margin: 0 0 6px;
    padding: 0;
    color: #202020;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .05px;
}

.ht-product-related__information h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

.ht-product-related__information h3 a:hover {
    color: #777;
}

/* PRODUCT PRICE */
.ht-product-related__price {
    display: block;
    color: #171717;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .15px;
}

.ht-product-related__price del {
    margin-right: 6px;
    color: #999;
    font-size: 11px;
    font-weight: 400;
}

.ht-product-related__price ins {
    color: #171717;
    text-decoration: none;
}

/* PREMIUM SHOPPING BAG BUTTON */
.ht-related-bag-button {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 47px;
    height: 47px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.97);
    color: #111;

    box-shadow: 0 2px 12px rgba(0,0,0,.13);

    cursor: pointer;
    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease;
}

.ht-related-bag-button svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.ht-related-bag-button:hover {
    background: #111;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0,0,0,.2);
}

.ht-related-bag-button:hover svg {
    transform: scale(1.07);
}

.ht-related-bag-button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 4px;
}

.ht-related-bag-button:disabled {
    opacity: .65;
    cursor: wait;
}

/* LOADING STATE */
.ht-related-bag-button.is-loading svg {
    animation: ht-related-bag-loading .65s ease-in-out infinite alternate;
}

@keyframes ht-related-bag-loading {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

/* ADDED STATE */
.ht-related-bag-button.is-added {
    background: #111;
    color: #fff;
}

.ht-related-bag-button__feedback {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .5px;
    opacity: 0;
    transform: scale(.8);
    transition: .25s ease;
    pointer-events: none;
}

.ht-related-bag-button.is-added svg {
    opacity: 0;
    transform: scale(.5);
}

.ht-related-bag-button.is-added .ht-related-bag-button__feedback {
    opacity: 1;
    transform: scale(1);
}

/* ERROR STATE */
.ht-related-bag-button.has-error {
    color: #a33131;
    background: #fff;
}

/* FLYING PRODUCT IMAGE */
.ht-cart-flying-image {
    position: fixed;
    z-index: 999999;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    pointer-events: none;
    opacity: 1;
    transform: scale(1);

    box-shadow: 0 8px 25px rgba(0,0,0,.2);

    transition:
        left .8s cubic-bezier(.2,.75,.25,1),
        top .8s cubic-bezier(.2,.75,.25,1),
        width .8s ease,
        height .8s ease,
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.75,.25,1);
}

/* TABLET */
@media (max-width: 1024px) {
    .ht-product-related {
        padding: 0 22px;
        margin: 75px auto;
    }

    .ht-product-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 14px;
    }

    .ht-related-bag-button {
        width: 43px;
        height: 43px;
        right: 10px;
        bottom: 10px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .ht-product-related {
        padding: 0 14px;
        margin: 60px auto;
    }

    .ht-product-related__heading {
        margin-bottom: 27px;
    }

    .ht-product-related__heading > span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .ht-product-related__heading h2 {
        font-size: 35px;
    }

    .ht-product-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 10px;
    }

    .ht-product-related__image {
        aspect-ratio: 3 / 4;
    }

    .ht-product-related__information {
        padding-top: 10px;
    }

    .ht-product-related__information h3 {
        font-size: 10px;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .ht-product-related__price {
        font-size: 10px;
    }

    .ht-product-related__price del {
        font-size: 9px;
    }

    .ht-related-bag-button {
        width: 39px;
        height: 39px;
        right: 8px;
        bottom: 8px;
    }

    .ht-related-bag-button svg {
        width: 19px;
        height: 19px;
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .ht-product-related *,
    .ht-cart-flying-image {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   END: THS — PREMIUM RELATED PRODUCTS SECTION
   ============================================================ */

/* 16. ACCESSIBILITY AND ANIMATION */

.ht-product-page button:focus-visible,
.ht-product-page a:focus-visible,
.ht-product-page summary:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 3px;
}

@keyframes ths-product-reveal {
    from { opacity: .65; }
    to { opacity: 1; }
}

/* 17. TABLET */

@media (max-width: 1100px) {
    .ht-product-page {
        padding-right: 15px;
        padding-left: 15px;
    }

    .ht-product-layout {
        grid-template-columns:
            minmax(170px, .75fr)
            minmax(260px, 1.1fr)
            minmax(250px, .95fr);
        gap: 17px;
    }

    .ht-product-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ht-product-summary__title {
        font-size: 23px;
    }
}

/* 18. SMALL TABLET */

@media (max-width: 800px) {
    .ht-product-layout {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 20px;
    }

    .ht-product-left {
        grid-column: 1;
        grid-row: 1;
    }

    .ht-product-gallery {
        position: relative;
        top: auto;
        grid-column: 2;
        grid-row: 1;
    }

    .ht-product-summary {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 12px;
    }

    .ht-product-summary__title {
        font-size: 25px;
    }

    .ht-product-related {
        margin-top: 55px;
    }
}

/* 19. MOBILE */

@media (max-width: 560px) {
    .ht-product-page {
        padding: 0 12px 45px;
    }

    .ht-product-breadcrumb {
        min-height: 35px;
        font-size: 10px;
    }

    .ht-product-layout {
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .ht-product-gallery {
        position: relative;
        top: auto;
        order: 1;
        width: 100%;
    }

    
.ht-product-gallery__slide {
    display: none;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    overflow: hidden;
    background: var(--htp-soft);
}

.ht-product-gallery__slide.is-active {
    display: block;
    animation: ths-product-reveal .3s ease both;
}


    .ht-product-gallery__arrow {
        width: 32px;
        height: 32px;
    }

    .ht-product-gallery__arrow--prev {
        left: 9px;
    }

    .ht-product-gallery__arrow--next {
        right: 9px;
    }

    .ht-product-summary {
        order: 2;
        width: 100%;
        margin-top: 0;
    }

    .ht-product-summary__title {
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 1.4;
    }

    .ht-product-summary__price-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .ht-product-summary__price {
        font-size: 17px;
    }

    .ht-product-summary__delivery {
        font-size: 9px;
    }

    .ht-product-purchase table.variations select {
        max-width: 100%;
    }

    .ht-product-purchase .quantity {
        width: 108px;
        height: 36px;
    }

    .ht-product-purchase .single_add_to_cart_button {
        min-height: 47px;
        border-radius: 5px !important;
    }

    .ht-product-left {
        display: flex;
        flex-direction: column;
        order: 3;
        width: 100%;
    }

    .ht-product-thumbnails {
        display: flex;
        gap: 8px;
        order: 1;
        overflow-x: auto;
        padding: 2px 1px 7px;
        margin-bottom: 15px;
        scrollbar-width: thin;
    }

    .ht-product-thumbnail {
        flex: 0 0 68px;
        width: 68px;
    }

    .ht-product-description {
        order: 2;
    }

    .ht-product-share {
        margin-top: 17px;
    }

    .ht-product-related {
        margin-top: 45px;
        padding-top: 25px;
    }

    .ht-product-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }

    .ht-product-related__heading h2 {
        font-size: 31px;
    }
}

/* 20. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .ht-product-page *,
    .ht-product-page *::before,
    .ht-product-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   END: THS — PREMIUM SINGLE PRODUCT PAGE
========================================================= */




/* =========================================================
   START: THS — Premium Quantity Controls
   Developed by Hatim Tech (HT)
   ========================================================= */

.ht-product-purchase .quantity {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 142px;
    height: 48px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.ht-product-purchase .quantity:focus-within {
    border-color: #111111;
}

.ht-product-purchase .quantity .ht-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: transparent;
    color: #171717;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ht-product-purchase .quantity .ht-qty-btn:hover {
    background: #111111;
    color: #ffffff;
}

.ht-product-purchase .quantity .ht-qty-btn:focus-visible {
    outline: 2px solid #111111;
    outline-offset: -2px;
}

.ht-product-purchase .quantity input.qty {
    flex: 1 1 auto;
    width: 40px !important;
    min-width: 0;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ht-product-purchase .quantity input.qty::-webkit-inner-spin-button,
.ht-product-purchase .quantity input.qty::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ht-product-purchase .quantity input.qty:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile refinement */
@media (max-width: 480px) {
    .ht-product-purchase .quantity {
        width: 132px;
        height: 46px;
    }

    .ht-product-purchase .quantity .ht-qty-btn {
        flex-basis: 32px;
        width: 32px;
        height: 34px;
    }

    .ht-product-purchase .quantity input.qty {
        height: 34px !important;
        line-height: 34px;
    }
}

/* END: THS — Premium Quantity Controls */



/* =========================================================
   START: THS — Product Title & Delivery Alignment
   Developed by Hatim Tech (HT)
   ========================================================= */

.ht-product-summary__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.ht-product-summary__title-row .ht-product-summary__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.ht-product-summary__title-row .ht-product-summary__delivery {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    text-align: right;
}

/* Mobile alignment */
@media (max-width: 600px) {
    .ht-product-summary__title-row {
        gap: 8px;
    }

    .ht-product-summary__title-row .ht-product-summary__delivery {
        font-size: 10px;
    }
}

/* =========================================================
   END: THS — Product Title & Delivery Alignment
   ========================================================= */
   /* START: THS — Larger Product Title & Delivery */

.ht-product-summary__title-row .ht-product-summary__title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
}

.ht-product-summary__title-row .ht-product-summary__delivery {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 600px) {
    .ht-product-summary__title-row .ht-product-summary__title {
        font-size: 27px;
    }

    .ht-product-summary__title-row .ht-product-summary__delivery {
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* END: THS — Larger Product Title & Delivery */

/* =========================================================
   START: THS — Premium Black Text Selection
   Developed by Hatim Tech (HT)
   ========================================================= */

::selection {
    background-color: #111111;
    color: #ffffff;
    text-shadow: none;
}

::-moz-selection {
    background-color: #111111;
    color: #ffffff;
    text-shadow: none;
}

/* END: THS — Premium Black Text Selection */


/* =========================================================
   START: THS — Premium Product Image Viewer
   Developed by Hatim Tech (HT)
   ========================================================= */

/* ---------------------------------------------------------
   1. Product Image Hover Zoom
   --------------------------------------------------------- */

.ht-product-gallery__slide {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}


.ht-product-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    transition: transform 0.15s ease;
}


/* ---------------------------------------------------------
   2. Magnifier Button on Product Image
   --------------------------------------------------------- */

.ht-product-gallery__zoom-trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #111;
    cursor: zoom-in;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.ht-product-gallery__zoom-trigger svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
    .ht-product-gallery__slide:hover .ht-product-gallery__zoom-trigger {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.ht-product-gallery__zoom-trigger:focus-visible {
    opacity: 1;
    visibility: visible;
    outline: 2px solid #111;
    outline-offset: 3px;
}

/* Touch devices: keep magnifier available */
@media (hover: none) {
    .ht-product-gallery__zoom-trigger {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* ---------------------------------------------------------
   3. Fullscreen Image Viewer
   --------------------------------------------------------- */

.ht-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 55px 70px 95px;
    background: #000;
}

.ht-image-lightbox.is-open {
    display: flex;
}

.ht-image-lightbox__image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.ht-image-lightbox__image {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.ht-image-lightbox__image.is-zoomed {
    cursor: grab;
}

.ht-image-lightbox__image.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* ---------------------------------------------------------
   4. Top Toolbar: Zoom, Fullscreen, Close
   --------------------------------------------------------- */

.ht-image-lightbox__toolbar {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ht-image-lightbox__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.ht-image-lightbox__button:hover {
    opacity: 0.7;
}

.ht-image-lightbox__button svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-image-lightbox__zoom {
    font-size: 24px;
    font-weight: 400;
}

.ht-image-lightbox__zoom.is-active {
    border-radius: 50%;
    background: #fff;
    color: #111;
}

/* ---------------------------------------------------------
   5. Image Counter
   --------------------------------------------------------- */

.ht-image-lightbox__counter {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 5;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
}

/* ---------------------------------------------------------
   6. Previous / Next Arrows
   --------------------------------------------------------- */

.ht-image-lightbox__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ht-image-lightbox__arrow:hover {
    opacity: 0.6;
}

.ht-image-lightbox__arrow--prev {
    left: 12px;
}

.ht-image-lightbox__arrow--next {
    right: 12px;
}

/* ---------------------------------------------------------
   7. Bottom Thumbnails
   --------------------------------------------------------- */

.ht-image-lightbox__thumbnails {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 30px);
    overflow-x: auto;
    transform: translateX(-50%);
}

.ht-image-lightbox__thumbnail {
    flex: 0 0 auto;
    width: 60px;
    height: 65px;
    padding: 0;
    border: 1px solid transparent;
    background: #111;
    opacity: 0.65;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}

.ht-image-lightbox__thumbnail.is-active {
    border-color: #fff;
    opacity: 1;
}

.ht-image-lightbox__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------
   8. Prevent Background Scrolling
   --------------------------------------------------------- */

body.ht-image-lightbox-open {
    overflow: hidden;
}

/* ---------------------------------------------------------
   9. Mobile Responsive Layout
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .ht-image-lightbox {
        padding: 65px 12px 100px;
    }

    .ht-image-lightbox__toolbar {
        top: 12px;
        right: 12px;
        gap: 10px;
    }

    .ht-image-lightbox__button {
        width: 36px;
        height: 36px;
    }

    .ht-image-lightbox__button svg {
        width: 22px;
        height: 22px;
    }

    .ht-image-lightbox__counter {
        top: 24px;
        left: 12px;
        font-size: 12px;
    }

    .ht-image-lightbox__arrow {
        width: 32px;
        font-size: 30px;
    }

    .ht-image-lightbox__arrow--prev {
        left: 0;
    }

    .ht-image-lightbox__arrow--next {
        right: 0;
    }

    .ht-image-lightbox__thumbnail {
        width: 48px;
        height: 54px;
    }

    .ht-product-gallery__zoom-trigger {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   END: THS — Premium Product Image Viewer
   ========================================================= */


   
/* =========================================================
   /* =========================================================
   START: THS — Live Product Image Hover Zoom
   Developed by Hatim Tech (HT)
   ========================================================= */

.ht-product-gallery__slide {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 0;
    overflow: hidden;
    background: var(--htp-soft);
}

.ht-product-gallery__slide.is-active {
    display: block;
    animation: ths-product-reveal .3s ease both;
}

.ht-product-gallery__slide > img.ht-product-gallery__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center;
}

.ht-product-gallery__slide > img {
    cursor: crosshair;
}

/* Desktop Hover Zoom */
@media (hover: hover) and (pointer: fine) {

    .ht-product-gallery__slide > img {
        transition: transform .12s ease-out;
        transform-origin: center center;
        will-change: transform;
    }

    .ht-product-gallery__slide.is-hover-zooming > img {
        transform: scale(3);
        transition: none;
    }
}

/* END: THS — Live Product Image Hover Zoom */



/* =========================================================
   START: HT EDITORIAL GALLERY IMAGES TRANSITION STYLE
   Developed by Hatim Tech (HT)
   Package: HatimTechCore
   ========================================================= */

/* Main Image Component Styling */
.ht-editorial__image {
    opacity: 1;
    transform: scale(1);
    transform-origin: center center !important;
    
    /* Active GPU layers to prevent desktop/mobile screen flickering */
    will-change: opacity, transform;
    
    /* Synced luxury cubic-bezier timing engine for entry animation */
    transition: 
        opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* JavaScript State: Smooth Ghost Shrink and Fade Out on Arrow Click */
.ht-editorial__image.ht-image-changing {
    opacity: 0 !important;
    transform: scale(0.95) !important; /* Image shifts subtly backward on click */
    
    /* Snappy exit timing to handle dynamic source replacement quickly */
    transition: 
        opacity 0.25s ease-in-out,
        transform 0.25s ease-in-out !important;
}

/* Optional hover state integration for static desktops */
@media (hover: hover) and (pointer: fine) {
    .ht-editorial__card:hover .ht-editorial__image:not(.ht-image-changing) {
        transform: scale(1.05);
    }
}

/* =========================================================
   END: HT EDITORIAL GALLERY IMAGES TRANSITION STYLE
   ========================================================= */






/* ============================================================
   THE HATIM STORE — LUXURY BRAND EDITORIAL
   SECTION 07 | REFINED FASHION STORY
   @package HatimTechCore
   @author Hatim Tech
   Developed by Hatim Tech (HT)
============================================================ */


/* ============================================================
   01. DESIGN SYSTEM
============================================================ */

.ht-brand-editorial {
    --editorial-bg: #eae7e1;
    --editorial-paper: #f1eee8;
    --editorial-ink: #171715;
    --editorial-body: #49463f;
    --editorial-muted: #817b72;
    --editorial-line: rgba(32, 29, 24, .18);

    --editorial-serif: "Cormorant Garamond", Georgia, serif;
    --editorial-sans: "Montserrat", Arial, sans-serif;

    position: relative;
    width: 100%;
    padding: 82px 0 64px;
    overflow: hidden;
    isolation: isolate;

    background: var(--editorial-bg);
    color: var(--editorial-ink);
}

.ht-brand-editorial *,
.ht-brand-editorial *::before,
.ht-brand-editorial *::after {
    box-sizing: border-box;
}


/* ============================================================
   02. CONTAINER
============================================================ */

.ht-brand-editorial__container {
    width: min(1240px, calc(100% - 110px));
    margin: 0 auto;
}


/* ============================================================
   03. TOP EDITORIAL BAR
============================================================ */

.ht-brand-editorial__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 15px;
    margin-bottom: 34px;

    border-bottom: 1px solid var(--editorial-line);
}

.ht-brand-editorial__eyebrow,
.ht-brand-editorial__number {
    font-family: var(--editorial-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ht-brand-editorial__number {
    color: var(--editorial-muted);
}


/* ============================================================
   04. MAIN LAYOUT
============================================================ */

.ht-brand-editorial__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;

    width: 100%;
    max-width: 1160px;
    min-height: 590px;

    margin: 0 auto;
}


/* ============================================================
   05. LEFT VISUAL
============================================================ */

.ht-brand-editorial__visual {
    position: relative;
    min-width: 0;
    min-height: 590px;
    overflow: hidden;
}

.ht-brand-editorial__figure {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 590px;

    margin: 0;
    overflow: hidden;

    background: #d4d0c8;
}

.ht-brand-editorial__image {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 590px;

    object-fit: cover;
    object-position: center 30%;

    filter: saturate(.86) contrast(1.03);

    transform: scale(1.06);
    animation: editorialImageIn 1.5s cubic-bezier(.2, .7, .2, 1) both;

    transition:
        transform 1.2s cubic-bezier(.2, .7, .2, 1),
        filter .8s ease;
}

@keyframes editorialImageIn {
    from {
        opacity: .55;
        transform: scale(1.06);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ht-brand-editorial__visual:hover .ht-brand-editorial__image {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.03);
}


/* IMAGE OVERLAY */

.ht-brand-editorial__figure::after {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 0, 0, .42)
    );
}


/* ============================================================
   06. IMAGE DETAILS
============================================================ */

.ht-brand-editorial__image-caption {
    position: absolute;
    left: 25px;
    bottom: 27px;
    right: 20px;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;

    font-family: var(--editorial-sans);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.6px;
}

.ht-brand-editorial__caption-line {
    width: 27px;
    height: 1px;
    flex-shrink: 0;

    background: #fff;
}

.ht-brand-editorial__image-index {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;

    color: rgba(255, 255, 255, .9);

    font-family: var(--editorial-serif);
    font-size: 28px;
    font-weight: 400;
}


/* ============================================================
   07. RIGHT CONTENT
============================================================ */

.ht-brand-editorial__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    min-height: 590px;

    padding: 45px 0 40px 75px;
}


/* ============================================================
   08. SMALL LABEL
============================================================ */

.ht-brand-editorial__small-label {
    display: block;
    margin-bottom: 19px;

    color: var(--editorial-muted);

    font-family: var(--editorial-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;

    animation: editorialTextIn .8s ease .25s both;
}


/* ============================================================
   09. HEADING
============================================================ */

.ht-brand-editorial__heading-wrap {
    position: relative;
}

.ht-brand-editorial__title {
    max-width: 580px;
    margin: 0;

    color: var(--editorial-ink);

    font-family: var(--editorial-serif);
    font-size: clamp(55px, 5.3vw, 72px);
    font-weight: 400;

    line-height: .99;
    letter-spacing: -1.5px;

    animation: editorialTextIn .9s ease .35s both;
}

.ht-brand-editorial__title-rule {
    display: block;

    width: 49px;
    height: 1px;

    margin-top: 22px;

    background: #27251f;
    transform-origin: left;

    animation: editorialRuleIn .9s ease .7s both;
}

@keyframes editorialRuleIn {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


/* ============================================================
   10. PARAGRAPHS
============================================================ */

.ht-brand-editorial__story {
    width: 100%;
    max-width: 650px;
    margin-top: 25px;
}

.ht-brand-editorial__description {
    margin: 0 0 19px;

    color: var(--editorial-body);

    font-family: var(--editorial-sans);
    font-size: 13px;
    font-weight: 400;

    line-height: 2.05;
    letter-spacing: .04px;

    animation: editorialTextIn .85s ease both;
}

.ht-brand-editorial__description:nth-child(1) {
    animation-delay: .55s;
}

.ht-brand-editorial__description:nth-child(2) {
    animation-delay: .7s;
}

.ht-brand-editorial__description:nth-child(3) {
    animation-delay: .85s;
}


/* ============================================================
   11. EDITORIAL QUOTE
============================================================ */

.ht-brand-editorial__quote {
    position: relative;

    width: 100%;
    max-width: 640px;

    margin: 10px 0 0;
    padding: 10px 0 10px 21px;

    border-left: 1px solid rgba(40, 37, 31, .3);

    animation: editorialTextIn .85s ease 1s both;
}

.ht-brand-editorial__quote p {
    margin: 0;

    color: #302d27;

    font-family: var(--editorial-serif);
    font-size: 24px;
    font-style: italic;
    font-weight: 400;

    line-height: 1.4;
}


/* ============================================================
   12. PREMIUM ANIMATED CTA
============================================================ */

.ht-brand-editorial__actions {
    margin-top: 30px;
    animation: editorialTextIn .85s ease 1.15s both;
}

.ht-brand-editorial__button {
    position: relative;
    z-index: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 265px;
    min-height: 54px;

    padding: 0 26px;
    overflow: hidden;
    isolation: isolate;

    border: 1px solid #171715;

    background: #171715;
    color: #fff;

    font-family: var(--editorial-sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-align: center;
    text-decoration: none;

    transition:
        color .45s ease,
        border-color .45s ease,
        transform .45s cubic-bezier(.2, .7, .2, 1),
        box-shadow .45s ease;
}

/* Animated light background sweep */

.ht-brand-editorial__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: var(--editorial-paper);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}

/* Button text stays above the animation */

.ht-brand-editorial__button-text {
    position: relative;
    z-index: 1;

    display: inline-block;

    transition:
        letter-spacing .4s ease,
        transform .4s ease;
}

/* Hover state */

.ht-brand-editorial__button:hover::before {
    transform: scaleX(1);
}

.ht-brand-editorial__button:hover {
    color: #171715;
    border-color: #171715;

    transform: translateY(-3px);

    box-shadow: 0 10px 24px rgba(23, 23, 21, .10);
}

.ht-brand-editorial__button:hover .ht-brand-editorial__button-text {
    letter-spacing: 2px;
    transform: translateX(2px);
}

/* Keyboard accessibility */

.ht-brand-editorial__button:focus-visible {
    outline: 2px solid #171715;
    outline-offset: 5px;
}

/* Press state */

.ht-brand-editorial__button:active {
    transform: translateY(-1px);
    box-shadow: none;
}


/* ============================================================
   13. SIGNATURE
============================================================ */

.ht-brand-editorial__signature {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;

    margin-top: 31px;
    padding-top: 16px;

    border-top: 1px solid var(--editorial-line);

    animation: editorialTextIn .85s ease 1.3s both;
}

.ht-brand-editorial__signature-line {
    width: 23px;
    height: 1px;
    flex-shrink: 0;

    background: #34312b;
}

.ht-brand-editorial__signature-text {
    color: var(--editorial-ink);

    font-family: var(--editorial-sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.ht-brand-editorial__signature-note {
    margin-left: auto;

    color: var(--editorial-muted);

    font-family: var(--editorial-sans);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 1.1px;
}


/* ============================================================
   14. SECTION FOOTER
============================================================ */

.ht-brand-editorial__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 39px;
    padding-top: 17px;

    border-top: 1px solid var(--editorial-line);
}

.ht-brand-editorial__footer > span:not(.ht-brand-editorial__footer-divider) {
    color: var(--editorial-muted);

    font-family: var(--editorial-sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.ht-brand-editorial__footer-divider {
    width: 3px;
    height: 3px;
    flex-shrink: 0;

    border-radius: 50%;
    background: #68635a;
}


/* ============================================================
   15. TEXT ANIMATION
============================================================ */

@keyframes editorialTextIn {
    from {
        opacity: 0;
        transform: translateY(17px);
    }

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


/* ============================================================
   16. LAPTOP RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .ht-brand-editorial {
        padding: 70px 0 55px;
    }

    .ht-brand-editorial__container {
        width: calc(100% - 70px);
    }

    .ht-brand-editorial__layout {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        min-height: 540px;
    }

    .ht-brand-editorial__visual,
    .ht-brand-editorial__figure,
    .ht-brand-editorial__image {
        min-height: 540px;
    }

    .ht-brand-editorial__content {
        min-height: 540px;
        padding-left: 45px;
    }

    .ht-brand-editorial__title {
        font-size: clamp(48px, 5.5vw, 62px);
    }

    .ht-brand-editorial__description {
        font-size: 12px;
        line-height: 1.95;
        margin-bottom: 15px;
    }

    .ht-brand-editorial__quote p {
        font-size: 21px;
    }
}


/* ============================================================
   17. TABLET
============================================================ */

@media (max-width: 767px) {

    .ht-brand-editorial {
        padding: 55px 0 45px;
    }

    .ht-brand-editorial__container {
        width: calc(100% - 36px);
    }

    .ht-brand-editorial__layout {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        min-height: 470px;
    }

    .ht-brand-editorial__visual,
    .ht-brand-editorial__figure,
    .ht-brand-editorial__image {
        min-height: 470px;
    }

    .ht-brand-editorial__content {
        min-height: 470px;
        padding: 25px 0 20px 24px;
    }

    .ht-brand-editorial__title {
        font-size: clamp(34px, 5vw, 45px);
        letter-spacing: -.8px;
    }

    .ht-brand-editorial__small-label {
        font-size: 7px;
        margin-bottom: 12px;
    }

    .ht-brand-editorial__title-rule {
        width: 30px;
        margin-top: 14px;
    }

    .ht-brand-editorial__story {
        margin-top: 16px;
    }

    .ht-brand-editorial__description {
        font-size: 10px;
        line-height: 1.8;
        margin-bottom: 11px;
    }

    .ht-brand-editorial__quote {
        padding-left: 12px;
    }

    .ht-brand-editorial__quote p {
        font-size: 16px;
    }

    .ht-brand-editorial__actions {
        margin-top: 17px;
    }

    .ht-brand-editorial__button {
        min-width: 0;
        width: 100%;
        min-height: 44px;
        padding: 0 10px;
        font-size: 7px;
        letter-spacing: .8px;
    }

    .ht-brand-editorial__signature {
        margin-top: 19px;
        padding-top: 11px;
        gap: 6px;
    }

    .ht-brand-editorial__signature-line {
        width: 11px;
    }

    .ht-brand-editorial__signature-text,
    .ht-brand-editorial__signature-note {
        font-size: 6px;
        letter-spacing: .5px;
    }

    .ht-brand-editorial__image-caption {
        left: 10px;
        bottom: 14px;
        gap: 6px;
        font-size: 6px;
        letter-spacing: .5px;
    }

    .ht-brand-editorial__image-index {
        top: 12px;
        right: 12px;
        font-size: 19px;
    }

    .ht-brand-editorial__footer {
        margin-top: 28px;
    }
}


/* ============================================================
   18. MOBILE
============================================================ */

@media (max-width: 560px) {

    .ht-brand-editorial {
        padding: 45px 0 38px;
    }

    .ht-brand-editorial__container {
        width: calc(100% - 32px);
    }

    .ht-brand-editorial__topline {
        margin-bottom: 24px;
    }

    .ht-brand-editorial__layout {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .ht-brand-editorial__visual,
    .ht-brand-editorial__figure {
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .ht-brand-editorial__image {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .ht-brand-editorial__content {
        min-height: 0;
        padding: 35px 0 10px;
    }

    .ht-brand-editorial__small-label {
        font-size: 8px;
        margin-bottom: 14px;
    }

    .ht-brand-editorial__title {
        max-width: 440px;
        font-size: clamp(43px, 11vw, 58px);
        line-height: .98;
        letter-spacing: -1px;
    }

    .ht-brand-editorial__title-rule {
        width: 39px;
        margin-top: 17px;
    }

    .ht-brand-editorial__story {
        margin-top: 21px;
    }

    .ht-brand-editorial__description {
        font-size: 12px;
        line-height: 1.95;
        margin-bottom: 14px;
    }

    .ht-brand-editorial__quote {
        margin-top: 15px;
        padding: 9px 0 9px 17px;
    }

    .ht-brand-editorial__quote p {
        font-size: 22px;
        line-height: 1.35;
    }

    .ht-brand-editorial__actions {
        margin-top: 24px;
    }

    .ht-brand-editorial__button {
        width: auto;
        min-width: 235px;
        min-height: 50px;
        padding: 0 23px;
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .ht-brand-editorial__signature {
        margin-top: 26px;
        padding-top: 15px;
        gap: 10px;
    }

    .ht-brand-editorial__signature-line {
        width: 19px;
    }

    .ht-brand-editorial__signature-text {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-brand-editorial__signature-note {
        font-size: 6px;
        letter-spacing: .8px;
    }

    .ht-brand-editorial__image-caption {
        left: 17px;
        bottom: 20px;
        gap: 9px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-brand-editorial__caption-line {
        width: 20px;
    }

    .ht-brand-editorial__image-index {
        top: 17px;
        right: 17px;
        font-size: 25px;
    }

    .ht-brand-editorial__footer {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 30px;
        padding-top: 15px;
    }

    .ht-brand-editorial__footer > span:not(.ht-brand-editorial__footer-divider) {
        font-size: 7px;
        letter-spacing: 1px;
    }
}


/* ============================================================
   19. SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .ht-brand-editorial__container {
        width: calc(100% - 26px);
    }

    .ht-brand-editorial__title {
        font-size: 42px;
    }

    .ht-brand-editorial__description {
        font-size: 11px;
        line-height: 1.9;
    }

    .ht-brand-editorial__quote p {
        font-size: 20px;
    }

    .ht-brand-editorial__button {
        min-width: 220px;
        min-height: 47px;
        font-size: 7px;
    }

    .ht-brand-editorial__signature-note {
        font-size: 5px;
    }
}


/* ============================================================
   20. ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ht-brand-editorial *,
    .ht-brand-editorial *::before,
    .ht-brand-editorial *::after {
        animation: none !important;
        transition: none !important;
    }

    .ht-brand-editorial__image {
        transform: none !important;
    }
}



/* =========================================
   HT — CTA BUTTON ANIMATION FIX
========================================= */

.ht-brand-editorial .ht-brand-editorial__button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    isolation: isolate !important;
    overflow: hidden !important;

    background: #171715 !important;
    color: #fff !important;
    border: 1px solid #171715 !important;

    transition:
        color .5s ease,
        transform .5s ease,
        box-shadow .5s ease !important;
}

/* Animated ivory layer */
.ht-brand-editorial .ht-brand-editorial__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: #f1eee8;

    transform: translateX(-101%);
    transition: transform .6s cubic-bezier(.76, 0, .24, 1);
    pointer-events: none;
}

/* Text above animated layer */
.ht-brand-editorial .ht-brand-editorial__button-text {
    position: relative;
    z-index: 1;

    transition:
        transform .45s ease,
        letter-spacing .45s ease !important;
}

/* Hover */
.ht-brand-editorial .ht-brand-editorial__button:hover::before {
    transform: translateX(0);
}

.ht-brand-editorial .ht-brand-editorial__button:hover {
    color: #171715 !important;
    transform: translateY(-3px);
    box-shadow: 0 9px 25px rgba(0, 0, 0, .12);
}

.ht-brand-editorial .ht-brand-editorial__button:hover
.ht-brand-editorial__button-text {
    transform: translateX(3px);
    letter-spacing: 2px;
}

/* Active */
.ht-brand-editorial .ht-brand-editorial__button:active {
    transform: translateY(-1px);
    box-shadow: none;
}



/* ============================================================
   END — LUXURY BRAND EDITORIAL
   Developed by Hatim Tech (HT)
============================================================ */






/* ============================================================
   THE HATIM STORE — CINEMATIC BRAND FINALE
   SECTION 08 | UNLEASH YOUR INNER MODEL
   @package HatimTechCore
   @author Hatim Tech
   Developed by Hatim Tech (HT)
============================================================ */


/* ============================================================
   01. DESIGN SYSTEM
============================================================ */

.ht-brand-finale {
    --finale-black: #090909;
    --finale-deep: #111110;
    --finale-white: #f4f1eb;
    --finale-muted: #aaa69e;
    --finale-line: rgba(244, 241, 235, .24);

    --finale-serif: "Cormorant Garamond", Georgia, serif;
    --finale-sans: "Montserrat", Arial, sans-serif;

    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 760px;

    overflow: hidden;

    background: var(--finale-black);
    color: var(--finale-white);
}


/* ============================================================
   02. GLOBAL RESET
============================================================ */

.ht-brand-finale *,
.ht-brand-finale *::before,
.ht-brand-finale *::after {
    box-sizing: border-box;
}

.ht-brand-finale a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   03. BACKGROUND ATMOSPHERE
============================================================ */

.ht-brand-finale__background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.ht-brand-finale__background span {
    position: absolute;

    top: -100px;
    right: -45px;

    color: rgba(255, 255, 255, .025);

    font-family: var(--finale-serif);
    font-size: clamp(260px, 35vw, 590px);
    font-weight: 500;

    line-height: .8;
    letter-spacing: -20px;

    white-space: nowrap;
    user-select: none;
}


/* ============================================================
   04. MAIN CONTAINER
============================================================ */

.ht-brand-finale__container {
    position: relative;

    display: grid;
    grid-template-columns: 48px minmax(0, .95fr) minmax(0, 1.05fr);

    align-items: stretch;

    width: min(1500px, calc(100% - 90px));
    min-height: 760px;

    margin: 0 auto;
    padding: 65px 0 55px;
}


/* ============================================================
   05. VERTICAL BRAND LABEL
============================================================ */

.ht-brand-finale__side-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 24px;

    color: var(--finale-white);

    font-family: var(--finale-sans);
    font-size: 9px;
    font-weight: 500;

    letter-spacing: 5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ht-brand-finale__side-line {
    display: block;

    width: 1px;
    height: 70px;

    background: rgba(255, 255, 255, .65);
}


/* ============================================================
   06. MODEL VISUAL
============================================================ */

.ht-brand-finale__visual {
    position: relative;

    min-width: 0;
    min-height: 640px;

    overflow: hidden;
}

.ht-brand-finale__figure {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 640px;

    margin: 0;
    overflow: hidden;

    background: #252321;
}

.ht-brand-finale__figure::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 60%,
            rgba(9, 9, 9, .2) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .22),
            transparent 35%
        );
}

.ht-brand-finale__image {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 640px;

    object-fit: cover;
    object-position: center top;

    filter: saturate(.68) contrast(1.08);

    transform: scale(1.045);

    animation: finaleImageReveal 1.7s cubic-bezier(.2, .7, .2, 1) both;

    transition:
        transform 1.2s cubic-bezier(.2, .7, .2, 1),
        filter .9s ease;
}

.ht-brand-finale__visual:hover .ht-brand-finale__image {
    transform: scale(1.01);
    filter: saturate(.9) contrast(1.08);
}

@keyframes finaleImageReveal {
    from {
        opacity: .4;
        transform: scale(1.09);
    }

    to {
        opacity: 1;
        transform: scale(1.045);
    }
}


/* ============================================================
   07. CONTENT AREA
============================================================ */

.ht-brand-finale__content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 25px 0 25px 55px;
}


/* ============================================================
   08. TOPLINE
============================================================ */

.ht-brand-finale__topline {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-bottom: 37px;

    animation: finaleTextReveal .9s ease .2s both;
}

.ht-brand-finale__eyebrow {
    flex-shrink: 0;

    color: var(--finale-white);

    font-family: var(--finale-sans);
    font-size: 9px;
    font-weight: 600;

    letter-spacing: 4px;
}

.ht-brand-finale__topline-rule {
    width: 100%;
    height: 1px;

    background: var(--finale-line);
}


/* ============================================================
   09. OVERSIZED EDITORIAL HEADING
============================================================ */

.ht-brand-finale__heading {
    position: relative;
    width: 100%;
}

.ht-brand-finale__title {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0;
    padding: 0;

    color: var(--finale-white);

    font-family: var(--finale-serif);
    font-size: clamp(75px, 9.2vw, 142px);
    font-weight: 400;

    line-height: .72;
    letter-spacing: -5px;

    text-transform: uppercase;
}

.ht-brand-finale__title-top {
    display: block;

    width: 100%;

    white-space: nowrap;

    animation: finaleTextReveal 1s cubic-bezier(.2, .7, .2, 1) .3s both;
}

.ht-brand-finale__title-middle {
    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 8px;

    animation: finaleTextReveal 1s cubic-bezier(.2, .7, .2, 1) .45s both;
}

.ht-brand-finale__title-your {
    display: inline-block;

    font-style: italic;
    font-weight: 400;

    color: rgba(244, 241, 235, .83);

    transform: translateX(-12px);
}

.ht-brand-finale__title-inner {
    display: block;

    align-self: flex-end;

    margin-top: 5px;

    font-weight: 500;

    animation: finaleTextReveal 1s cubic-bezier(.2, .7, .2, 1) .6s both;
}

.ht-brand-finale__title-bottom {
    display: block;

    align-self: flex-start;

    margin-top: 5px;

    font-weight: 400;

    animation: finaleTextReveal 1s cubic-bezier(.2, .7, .2, 1) .75s both;
}


/* ============================================================
   10. DESCRIPTION
============================================================ */

.ht-brand-finale__story {
    width: 100%;
    max-width: 510px;

    margin-top: 35px;
}

.ht-brand-finale__description {
    margin: 0;

    color: rgba(244, 241, 235, .82);

    font-family: var(--finale-serif);
    font-size: 22px;
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: .1px;

    animation: finaleTextReveal .9s ease .85s both;
}


/* ============================================================
   11. BRAND FEATURES
============================================================ */

.ht-brand-finale__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 100%;
    max-width: 490px;

    margin-top: 44px;

    animation: finaleTextReveal .9s ease 1s both;
}

.ht-brand-finale__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 0 12px;

    text-align: center;
}

.ht-brand-finale__feature + .ht-brand-finale__feature {
    border-left: 1px solid rgba(244, 241, 235, .45);
}

.ht-brand-finale__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    margin-bottom: 12px;

    color: var(--finale-white);
}

.ht-brand-finale__feature-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.ht-brand-finale__feature-title,
.ht-brand-finale__feature-subtitle {
    display: block;

    color: var(--finale-white);

    font-family: var(--finale-sans);
    font-size: 9px;
    font-weight: 500;

    letter-spacing: 1.2px;
    line-height: 1.65;
}


/* ============================================================
   12. PREMIUM CTA
============================================================ */

.ht-brand-finale__actions {
    margin-top: 43px;

    animation: finaleTextReveal .9s ease 1.15s both;
}

.ht-brand-finale__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    min-height: 52px;
    padding: 0 5px 0 0;

    overflow: hidden;
    isolation: isolate;

    color: var(--finale-white);

    font-family: var(--finale-sans);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.7px;
    text-decoration: none;

    transition:
        color .45s ease,
        transform .45s ease;
}

.ht-brand-finale__button::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 4px;

    width: calc(100% - 55px);
    height: 1px;

    background: rgba(244, 241, 235, .65);

    transform: scaleX(1);
    transform-origin: left;

    transition: transform .45s ease;
}

.ht-brand-finale__button-text {
    position: relative;
    z-index: 1;

    transition:
        letter-spacing .4s ease,
        transform .4s ease;
}

.ht-brand-finale__button-arrow {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;
    flex-shrink: 0;

    border: 1px solid rgba(244, 241, 235, .8);
    border-radius: 50%;

    transition:
        background .4s ease,
        border-color .4s ease,
        transform .4s ease;
}

.ht-brand-finale__button-arrow svg {
    display: block;

    width: 23px;
    height: 23px;

    transition: transform .4s ease;
}

.ht-brand-finale__button:hover {
    color: #fff;
    transform: translateY(-2px);
}

.ht-brand-finale__button:hover::after {
    transform: scaleX(.7);
}

.ht-brand-finale__button:hover .ht-brand-finale__button-text {
    letter-spacing: 2px;
    transform: translateX(3px);
}

.ht-brand-finale__button:hover .ht-brand-finale__button-arrow {
    background: var(--finale-white);
    border-color: var(--finale-white);

    transform: scale(1.06);
}

.ht-brand-finale__button:hover .ht-brand-finale__button-arrow svg {
    color: var(--finale-black);
    transform: translateX(3px);
}

.ht-brand-finale__button:focus-visible {
    outline: 2px solid var(--finale-white);
    outline-offset: 6px;
}


/* ============================================================
   13. TEXT REVEAL ANIMATION
============================================================ */

@keyframes finaleTextReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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


/* ============================================================
   14. LARGE LAPTOP
============================================================ */

@media (max-width: 1200px) {

    .ht-brand-finale__container {
        grid-template-columns: 35px minmax(0, .95fr) minmax(0, 1.05fr);

        width: calc(100% - 60px);
        min-height: 680px;
    }

    .ht-brand-finale__visual,
    .ht-brand-finale__figure,
    .ht-brand-finale__image {
        min-height: 580px;
    }

    .ht-brand-finale__content {
        padding-left: 38px;
    }

    .ht-brand-finale__title {
        font-size: clamp(68px, 8.5vw, 112px);
        letter-spacing: -3px;
    }

    .ht-brand-finale__description {
        font-size: 19px;
    }

    .ht-brand-finale__features {
        margin-top: 35px;
    }
}


/* ============================================================
   15. TABLET
============================================================ */

@media (max-width: 900px) {

    .ht-brand-finale__container {
        grid-template-columns: 30px minmax(0, .9fr) minmax(0, 1.1fr);

        width: calc(100% - 40px);
        min-height: 590px;

        padding: 50px 0;
    }

    .ht-brand-finale__visual,
    .ht-brand-finale__figure,
    .ht-brand-finale__image {
        min-height: 500px;
    }

    .ht-brand-finale__content {
        padding-left: 25px;
    }

    .ht-brand-finale__topline {
        margin-bottom: 28px;
    }

    .ht-brand-finale__title {
        font-size: clamp(56px, 8vw, 83px);
        letter-spacing: -2.5px;
    }

    .ht-brand-finale__story {
        margin-top: 27px;
    }

    .ht-brand-finale__description {
        font-size: 17px;
    }

    .ht-brand-finale__features {
        margin-top: 30px;
    }

    .ht-brand-finale__feature {
        padding: 0 7px;
    }

    .ht-brand-finale__feature-title,
    .ht-brand-finale__feature-subtitle {
        font-size: 7px;
        letter-spacing: .7px;
    }

    .ht-brand-finale__actions {
        margin-top: 30px;
    }

    .ht-brand-finale__button {
        font-size: 8px;
        letter-spacing: 1px;
        gap: 10px;
    }

    .ht-brand-finale__button-arrow {
        width: 44px;
        height: 44px;
    }
}


/* ============================================================
   16. MOBILE
============================================================ */

@media (max-width: 600px) {

    .ht-brand-finale {
        min-height: auto;
    }

    .ht-brand-finale__background span {
        top: 190px;
        right: -35px;

        font-size: 220px;
        letter-spacing: -10px;
    }

    .ht-brand-finale__container {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        min-height: auto;

        padding: 0 20px 55px;
    }

    .ht-brand-finale__side-label {
        position: absolute;
        top: 24px;
        left: 0;
        z-index: 3;

        flex-direction: row;

        gap: 10px;

        padding: 0 20px;

        font-size: 7px;
        letter-spacing: 2px;

        writing-mode: initial;
        transform: none;
    }

    .ht-brand-finale__side-line {
        width: 25px;
        height: 1px;
    }

    .ht-brand-finale__visual {
        min-height: 0;

        margin: 0 -20px;
    }

    .ht-brand-finale__figure {
        min-height: 0;
        height: auto;

        aspect-ratio: 4 / 5;
    }

    .ht-brand-finale__image {
        min-height: 0;
        height: 100%;

        aspect-ratio: 4 / 5;

        object-position: center 20%;
    }

    .ht-brand-finale__content {
        min-height: 0;

        padding: 36px 0 0;
    }

    .ht-brand-finale__topline {
        margin-bottom: 27px;
    }

    .ht-brand-finale__eyebrow {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .ht-brand-finale__title {
        font-size: clamp(66px, 15vw, 92px);
        letter-spacing: -2.5px;
        line-height: .75;
    }

    .ht-brand-finale__title-middle {
        margin-top: 7px;
    }

    .ht-brand-finale__title-your {
        transform: translateX(-5px);
    }

    .ht-brand-finale__title-inner,
    .ht-brand-finale__title-bottom {
        margin-top: 7px;
    }

    .ht-brand-finale__story {
        margin-top: 29px;
    }

    .ht-brand-finale__description {
        max-width: 430px;

        font-size: 19px;
        line-height: 1.5;
    }

    .ht-brand-finale__features {
        margin-top: 35px;
    }

    .ht-brand-finale__feature {
        padding: 0 5px;
    }

    .ht-brand-finale__feature-icon {
        width: 31px;
        height: 31px;

        margin-bottom: 10px;
    }

    .ht-brand-finale__feature-title,
    .ht-brand-finale__feature-subtitle {
        font-size: 7px;
        letter-spacing: .5px;
    }

    .ht-brand-finale__actions {
        margin-top: 34px;
    }

    .ht-brand-finale__button {
        min-height: 48px;

        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .ht-brand-finale__button-arrow {
        width: 47px;
        height: 47px;
    }
}


/* ============================================================
   17. SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .ht-brand-finale__container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .ht-brand-finale__visual {
        margin-right: -15px;
        margin-left: -15px;
    }

    .ht-brand-finale__title {
        font-size: 61px;
        letter-spacing: -2px;
    }

    .ht-brand-finale__description {
        font-size: 17px;
    }

    .ht-brand-finale__feature-title,
    .ht-brand-finale__feature-subtitle {
        font-size: 6px;
    }

    .ht-brand-finale__button {
        font-size: 7px;
        letter-spacing: .9px;
        gap: 8px;
    }
}


/* ============================================================
   18. ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ht-brand-finale *,
    .ht-brand-finale *::before,
    .ht-brand-finale *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .ht-brand-finale__image {
        transform: none !important;
    }
}




/* ============================================================
   HT — BRAND FINALE EXTRA COMPACT OVERRIDE
============================================================ */

.ht-brand-finale {
    min-height: 460px;
}

.ht-brand-finale__container {
    width: min(1180px, calc(100% - 70px));
    min-height: 460px;
    padding: 28px 0;
    grid-template-columns: 32px minmax(0, .9fr) minmax(0, 1.1fr);
}

/* IMAGE */
.ht-brand-finale__visual,
.ht-brand-finale__figure,
.ht-brand-finale__image {
    min-height: 404px;
}

/* CONTENT */
.ht-brand-finale__content {
    min-height: 404px;
    padding: 12px 0 12px 30px;
}

.ht-brand-finale__topline {
    margin-bottom: 17px;
}

.ht-brand-finale__eyebrow {
    font-size: 8px;
    letter-spacing: 2.5px;
}

/* HEADING */
.ht-brand-finale__title {
    font-size: clamp(48px, 6vw, 82px);
    letter-spacing: -2px;
    line-height: .78;
}

.ht-brand-finale__title-middle,
.ht-brand-finale__title-inner,
.ht-brand-finale__title-bottom {
    margin-top: 4px;
}

/* DESCRIPTION */
.ht-brand-finale__story {
    margin-top: 18px;
}

.ht-brand-finale__description {
    max-width: 390px;
    font-size: 15px;
    line-height: 1.4;
}

/* FEATURES */
.ht-brand-finale__features {
    max-width: 370px;
    margin-top: 21px;
}

.ht-brand-finale__feature-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
}

.ht-brand-finale__feature-title,
.ht-brand-finale__feature-subtitle {
    font-size: 7px;
    line-height: 1.5;
}

/* CTA */
.ht-brand-finale__actions {
    margin-top: 20px;
}

.ht-brand-finale__button {
    min-height: 39px;
    font-size: 8px;
    gap: 12px;
}

.ht-brand-finale__button-arrow {
    width: 39px;
    height: 39px;
}

.ht-brand-finale__button-arrow svg {
    width: 18px;
    height: 18px;
}

/* BACKGROUND TYPOGRAPHY */
.ht-brand-finale__background span {
    font-size: clamp(200px, 25vw, 340px);
}


/* TABLET */
@media (max-width: 900px) {
    .ht-brand-finale__container {
        width: calc(100% - 40px);
        min-height: 400px;
        padding: 25px 0;
        grid-template-columns: 25px minmax(0, .9fr) minmax(0, 1.1fr);
    }

    .ht-brand-finale__visual,
    .ht-brand-finale__figure,
    .ht-brand-finale__image {
        min-height: 350px;
    }

    .ht-brand-finale__content {
        min-height: 350px;
        padding-left: 20px;
    }

    .ht-brand-finale__title {
        font-size: clamp(43px, 6vw, 65px);
    }

    .ht-brand-finale__description {
        font-size: 13px;
    }
}


/* MOBILE */
@media (max-width: 600px) {
    .ht-brand-finale {
        min-height: auto;
    }

    .ht-brand-finale__container {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        min-height: auto;
        padding: 0 15px 28px;
    }

    .ht-brand-finale__visual {
        margin: 0 -15px;
    }

    .ht-brand-finale__figure {
        min-height: 0;
        aspect-ratio: 4 / 3.7;
    }

    .ht-brand-finale__image {
        min-height: 0;
        aspect-ratio: 4 / 3.7;
    }

    .ht-brand-finale__content {
        min-height: auto;
        padding: 23px 0 0;
    }

    .ht-brand-finale__topline {
        margin-bottom: 19px;
    }

    .ht-brand-finale__title {
        font-size: clamp(48px, 11vw, 65px);
        line-height: .78;
        letter-spacing: -1.5px;
    }

    .ht-brand-finale__story {
        margin-top: 19px;
    }

    .ht-brand-finale__description {
        font-size: 15px;
    }

    .ht-brand-finale__features {
        margin-top: 23px;
    }

    .ht-brand-finale__actions {
        margin-top: 22px;
    }
}


/* SMALL MOBILE */
@media (max-width: 380px) {
    .ht-brand-finale__title {
        font-size: 45px;
    }

    .ht-brand-finale__description {
        font-size: 14px;
    }
}



/* PRODUCT CATEGORY — CLEAN PREMIUM STYLE */
.ht-card__category,
.ht-card__category a {
    color: #77746e !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.ht-card__category a:hover {
    color: #111111 !important;
    text-decoration: none !important;
}



/* =========================================================
   START — THS FEATURED PRODUCTS BRAND SIGNATURE
   Developed by Hatim Tech (HT)
========================================================= */

.ht-editorial__footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    margin-top: 38px;
    padding: 20px 0;
    border-top: 1px solid #dedbd5;
    border-bottom: 1px solid #dedbd5;
    box-sizing: border-box;
    gap: 20px;
}

/* LEFT — BRAND STATEMENT */
.ht-editorial__footer span:first-child {
    display: block;
    color: #77746e;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.8px;
    line-height: 1.7;
    text-transform: uppercase;
}

/* RIGHT — BRAND NAME */
.ht-editorial__footer span:last-child {
    display: block;
    color: #171717;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3.2px;
    line-height: 1.7;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

/* SUBTLE HOVER DETAIL */
.ht-editorial__footer span:last-child {
    transition: color .3s ease;
}

.ht-editorial__footer:hover span:last-child {
    color: #77746e;
}

/* TABLET */
@media (max-width: 768px) {
    .ht-editorial__footer {
        min-height: 68px;
        margin-top: 30px;
        padding: 18px 0;
    }

    .ht-editorial__footer span:first-child {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .ht-editorial__footer span:last-child {
        font-size: 9px;
        letter-spacing: 2px;
    }
}

/* MOBILE */
@media (max-width: 480px) {
    .ht-editorial__footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        min-height: 78px;
        gap: 9px;
        margin-top: 24px;
        padding: 16px 0;
    }

    .ht-editorial__footer span:first-child {
        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .ht-editorial__footer span:last-child {
        font-size: 9px;
        letter-spacing: 2.5px;
        text-align: left;
    }
}

/* =========================================================
   END — THS FEATURED PRODUCTS BRAND SIGNATURE
========================================================= */




/* START: ALWAYS VISIBLE COMING SOON LABEL */

.ht-categories__coming-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* END: ALWAYS VISIBLE COMING SOON LABEL */



/* ============================================================
   HT — BRAND FINALE PREMIUM CTA TRANSITION
============================================================ */

.ht-brand-finale .ht-brand-finale__button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    isolation: isolate !important;

    color: #f4f1eb !important;
    transition:
        color .45s ease,
        transform .45s ease !important;
}

/* Ivory sweep */
.ht-brand-finale .ht-brand-finale__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: #f4f1eb;

    transform: translateX(-101%);
    transition: transform .55s cubic-bezier(.76, 0, .24, 1);

    pointer-events: none;
}

/* Text */
.ht-brand-finale .ht-brand-finale__button-text {
    position: relative;
    z-index: 2;

    transition:
        color .4s ease,
        transform .4s ease,
        letter-spacing .4s ease !important;
}

/* Arrow circle */
.ht-brand-finale .ht-brand-finale__button-arrow {
    position: relative;
    z-index: 2;

    color: #f4f1eb;
    border-color: rgba(244, 241, 235, .8);

    transition:
        color .4s ease,
        background .4s ease,
        border-color .4s ease,
        transform .5s cubic-bezier(.2, .7, .2, 1) !important;
}

.ht-brand-finale .ht-brand-finale__button-arrow svg {
    transition: transform .4s ease !important;
}

/* Hover */
.ht-brand-finale .ht-brand-finale__button:hover::before {
    transform: translateX(0);
}

.ht-brand-finale .ht-brand-finale__button:hover {
    color: #090909 !important;
    transform: translateY(-3px);
}

.ht-brand-finale .ht-brand-finale__button:hover
.ht-brand-finale__button-text {
    color: #090909;
    transform: translateX(3px);
    letter-spacing: 2px;
}

.ht-brand-finale .ht-brand-finale__button:hover
.ht-brand-finale__button-arrow {
    color: #090909;
    background: #090909;
    border-color: #090909;
    transform: rotate(45deg);
}

.ht-brand-finale .ht-brand-finale__button:hover
.ht-brand-finale__button-arrow svg {
    color: #f4f1eb;
    transform: rotate(-45deg) translateX(2px);
}

/* Click */
.ht-brand-finale .ht-brand-finale__button:active {
    transform: translateY(-1px);
}

/* Focus */
.ht-brand-finale .ht-brand-finale__button:focus-visible {
    outline: 2px solid #f4f1eb;
    outline-offset: 5px;
}





/* ============================================================
   END — CINEMATIC BRAND FINALE
   Developed by Hatim Tech (HT)
============================================================ */



/* ============================================================
   FIX — FEATURED PRODUCTS LEFT ALIGNMENT
   Developed by Hatim Tech (HT)
   ============================================================ */

section.ht-editorial ul.ht-editorial__grid.products {
    display: grid !important;

    width: calc(100% - 80px) !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}

section.ht-editorial ul.ht-editorial__grid.products > li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box !important;
}

/* Tablet */
@media (max-width: 1024px) {
    section.ht-editorial ul.ht-editorial__grid.products {
        width: calc(100% - 48px) !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    section.ht-editorial ul.ht-editorial__grid.products {
        width: calc(100% - 32px) !important;
    }
}

/* ============================================================
   END — FEATURED PRODUCTS LEFT ALIGNMENT
   ============================================================ */



/* ============================================================
   THE HATIM STORE — PREMIUM SHOP PAGE
   Cinematic Editorial WooCommerce Design
   Developed by Hatim Tech (HT)
   ============================================================ */






   
:root {
    --ht-shop-black: #101010;
    --ht-shop-dark: #191919;
    --ht-shop-white: #ffffff;
    --ht-shop-ivory: #f7f6f3;
    --ht-shop-muted: #77736e;
    --ht-shop-border: #e8e6e1;
    --ht-shop-container: 1440px;
}

/* ============================================================
   01. SHOP PAGE BASE
   ============================================================ */

.ht-shop-page {
    width: 100%;
    overflow: hidden;
    background: var(--ht-shop-white);
    color: var(--ht-shop-black);
    font-family: 'Montserrat', sans-serif;
}

.ht-shop-page *,
.ht-shop-page *::before,
.ht-shop-page *::after {
    box-sizing: border-box;
}

.ht-shop-page img {
    display: block;
    max-width: 100%;
}

.ht-shop-page a {
    color: inherit;
    text-decoration: none;
}

.ht-shop-page button,
.ht-shop-page input,
.ht-shop-page select {
    font: inherit;
}




/* ============================================================
   START: THS — COMPACT CINEMATIC SHOP HERO
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   ============================================================ */


/* ---------- 01. MAIN HERO ---------- */

.ht-shop-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 480px;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #111;
}


/* ---------- 02. BACKGROUND IMAGE ---------- */

.ht-shop-hero__image-wrap {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.ht-shop-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    opacity: .88;
    transform: scale(1.015);
}


/* ---------- 03. IMAGE OVERLAY ---------- */

.ht-shop-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(10, 10, 10, .04) 0%,
            rgba(10, 10, 10, .16) 37%,
            rgba(10, 10, 10, .78) 68%,
            rgba(10, 10, 10, .96) 100%
        );
}


/* ---------- 04. HERO CONTENT ---------- */

.ht-shop-hero__content {
    width: min(calc(100% - 80px), var(--ht-shop-container, 1320px));
    margin: 0 auto;
    padding: 65px 0 65px 54%;
    color: #fff;
}


/* ---------- 05. EYEBROW ---------- */

.ht-shop-hero__eyebrow,
.ht-shop-finale__eyebrow {
    display: block;
    margin-bottom: 17px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .30em;
    line-height: 1.6;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}


/* ---------- 06. HERO TITLE ---------- */

.ht-shop-hero__title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(68px, 8vw, 112px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .88;
    color: #fff;
}


/* ---------- 07. DESCRIPTION ---------- */

.ht-shop-hero__description {
    max-width: 390px;
    margin: 21px 0 25px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .10em;
    line-height: 1.9;
    color: rgba(255,255,255,.76);
}


/* ---------- 08. HERO BUTTON ---------- */

.ht-shop-hero__button,
.ht-shop-finale__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-width: 205px;
    min-height: 48px;
    padding: 14px 17px;
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.ht-shop-hero__button svg,
.ht-shop-finale__button svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

.ht-shop-hero__button:hover,
.ht-shop-finale__button:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.ht-shop-hero__button:hover svg,
.ht-shop-finale__button:hover svg {
    transform: translateX(4px);
}


/* ---------- 09. TABLET RESPONSIVE ---------- */

@media (max-width: 1024px) {

    .ht-shop-hero {
        min-height: 420px;
    }

    .ht-shop-hero__content {
        width: calc(100% - 60px);
        padding: 55px 0 55px 48%;
    }

    .ht-shop-hero__title {
        font-size: clamp(65px, 9vw, 96px);
    }

    .ht-shop-hero__description {
        max-width: 340px;
        margin: 18px 0 22px;
    }

}




/* ---------- 10. MOBILE RESPONSIVE ---------- */

@media (max-width: 767px) {

    .ht-shop-hero {
        min-height: 390px;
        align-items: center;
    }

    .ht-shop-hero__image {
        object-position: center 35%;
        opacity: 1;
    }

    .ht-shop-hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(10, 10, 10, .08) 0%,
            rgba(10, 10, 10, .20) 35%,
            rgba(10, 10, 10, .55) 65%,
            rgba(10, 10, 10, .78) 100%
        );
    }

    .ht-shop-hero__content {
        width: calc(100% - 36px);
        margin: 0 auto;
        padding: 35px 0 35px 35%;
        position: relative;
        z-index: 1;
    }

    .ht-shop-hero__eyebrow {
        margin-bottom: 12px;
        font-size: 8px;
        letter-spacing: .22em;
    }

    .ht-shop-hero__title {
        font-size: 55px;
        line-height: .95;
        letter-spacing: -.04em;
    }

    .ht-shop-hero__description {
        max-width: 230px;
        margin: 16px 0 20px;
        font-size: 10px;
        letter-spacing: .06em;
        line-height: 1.8;
    }

    .ht-shop-hero__button {
        min-width: 170px;
        min-height: 42px;
        gap: 16px;
        padding: 11px 13px;
        font-size: 8px;
    }
}


/* ---------- 11. SMALL MOBILE ---------- */

@media (max-width: 480px) {

    .ht-shop-hero {
        min-height: 360px;
    }

    .ht-shop-hero__content {
        width: calc(100% - 30px);
        padding: 30px 0 30px 32%;
    }

    .ht-shop-hero__eyebrow {
        font-size: 7px;
        margin-bottom: 10px;
    }

    .ht-shop-hero__title {
        font-size: 48px;
    }

    .ht-shop-hero__description {
        margin: 13px 0 17px;
        font-size: 9px;
    }

    .ht-shop-hero__button {
        min-width: 155px;
        min-height: 40px;
        padding: 10px 12px;
        font-size: 7px;
    }

    .ht-shop-hero__button svg {
        width: 14px;
        height: 14px;
    }
}


/* ---------- 12. EXTRA SMALL MOBILE ---------- */

@media (max-width: 360px) {

    .ht-shop-hero {
        min-height: 340px;
    }

    .ht-shop-hero__content {
        width: calc(100% - 26px);
        padding-left: 28%;
    }

    .ht-shop-hero__title {
        font-size: 44px;
    }

    .ht-shop-hero__description {
        font-size: 8px;
    }
}



/* ============================================================
   END: THS — COMPACT CINEMATIC SHOP HERO
   ============================================================ */




   




/* ============================================================
   THE HATIM STORE — PREMIUM CATEGORY NAVIGATION
   @package HatimTechCore
   @author Hatim Tech
   Developed by Hatim Tech (HT)
============================================================ */


/* ============================================================
   START — CATEGORY SECTION LAYOUT
   Roman Urdu: Category buttons ko center mein balanced position.
============================================================ */

.ht-shop-categories {
    position: relative;
    width: min(100% - 100px, var(--ht-shop-container));
    margin: 0 auto;
    padding: 42px 0 52px;
}

.ht-shop-categories__inner {
    width: 100%;
    overflow: hidden;
}

.ht-shop-categories__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 9px;
    width: 100%;
}

/* ============================================================
   END — CATEGORY SECTION LAYOUT
============================================================ */


/* ============================================================
   START — PREMIUM CATEGORY BUTTON
   Roman Urdu: Compact black buttons with refined typography.
============================================================ */

.ht-shop-category-button {
    position: relative;
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;

    min-width: 125px;
    min-height: 45px;
    padding: 0 17px;

    overflow: hidden;

    border: 1px solid #171717;
    border-radius: 0;

    background: #111;
    color: #fff !important;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .105em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color .4s cubic-bezier(.2,.7,.2,1),
        color .4s cubic-bezier(.2,.7,.2,1),
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s cubic-bezier(.2,.7,.2,1);

    -webkit-tap-highlight-color: transparent;
}

/* AVAILABLE BUTTON — WHITE HOVER */

@media (hover: hover) and (pointer: fine) {

    .ht-shop-category-button:not(.ht-shop-category-button--disabled):hover {
        background: #fff;
        color: #111 !important;
        border-color: #111;

        box-shadow:
            0 4px 13px rgba(0, 0, 0, .07);

        transform: translateY(-2px);
    }

}

/* ACTIVE CATEGORY */

.ht-shop-category-button.is-active {
    background: #fff;
    color: #111 !important;
    border-color: #111;
}

/* ACTIVE / HOVER UNDERLINE */

.ht-category-button__line {
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #111;

    transform: translateX(-50%);
    transition: width .4s cubic-bezier(.2,.7,.2,1);
}

.ht-shop-category-button.is-active .ht-category-button__line {
    width: 24px;
}

@media (hover: hover) and (pointer: fine) {

    .ht-shop-category-button:not(.ht-shop-category-button--disabled):hover
    .ht-category-button__line {
        width: 24px;
    }

}

/* ============================================================
   END — PREMIUM CATEGORY BUTTON
============================================================ */


/* ============================================================
   START — COMING SOON 3D FLIP BUTTON
   Roman Urdu: Front par category name, back par Coming Soon.
============================================================ */

.ht-shop-category-button--disabled {
    display: inline-flex;
    flex: 0 1 auto;

    padding: 0;
    overflow: hidden;

    background: #111;
    color: #fff !important;

    border: 1px solid #171717;

    cursor: pointer;
    perspective: 800px;

    text-decoration: none !important;
}

.ht-category-flip {
    position: relative;
    display: block;

    width: 100%;
    height: 45px;

    transform-style: preserve-3d;

    transition:
        transform .75s cubic-bezier(.2,.75,.2,1);
}

.ht-category-flip__front,
.ht-category-flip__back {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .105em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ht-category-flip__front {
    background: #111;
    color: rgba(255,255,255,.65);
}

.ht-category-flip__back {
    background: #fff;
    color: #111;

    border: 1px solid #171717;

    font-weight: 700;
    letter-spacing: .15em;

    transform: rotateY(180deg);
}

/* DESKTOP — 3D FLIP */

@media (hover: hover) and (pointer: fine) {

    .ht-shop-category-button--disabled:hover .ht-category-flip {
        transform: rotateY(180deg);
    }

}

/* KEYBOARD FOCUS */

.ht-shop-category-button:focus-visible {
    outline: 2px solid #777;
    outline-offset: 4px;
}

/* ============================================================
   END — COMING SOON 3D FLIP BUTTON
============================================================ */


/* ============================================================
   START — TABLET RESPONSIVE
   Roman Urdu: Chhoti screens par horizontal scrolling.
============================================================ */

@media (max-width: 1100px) {

    .ht-shop-categories {
        width: calc(100% - 64px);
        padding: 35px 0 43px;
    }

    .ht-shop-categories__nav {
        justify-content: flex-start;
        gap: 9px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 3px 10px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ht-shop-categories__nav::-webkit-scrollbar {
        display: none;
    }

    .ht-shop-category-button {
        flex: 0 0 auto;
        min-width: 125px;
        min-height: 43px;
    }

    .ht-category-flip {
        height: 43px;
    }

}

/* ============================================================
   END — TABLET RESPONSIVE
============================================================ */


/* ============================================================
   START — MOBILE RESPONSIVE
   Roman Urdu: Mobile par compact buttons aur smooth swipe.
============================================================ */

@media (max-width: 767px) {

    .ht-shop-categories {
        width: calc(100% - 30px);
        padding: 27px 0 34px;
    }

    .ht-shop-categories__nav {
        justify-content: flex-start;
        gap: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 2px 10px;

        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .ht-shop-category-button {
        flex: 0 0 auto;

        min-width: 118px;
        min-height: 41px;

        padding: 0 13px;

        font-size: 8px;
        letter-spacing: .09em;

        scroll-snap-align: start;
    }

    .ht-category-flip {
        height: 41px;
    }

    .ht-category-flip__front,
    .ht-category-flip__back {
        padding: 0 11px;
        font-size: 8px;
        letter-spacing: .09em;
    }

    /* TOUCH FEEDBACK */

    .ht-shop-category-button:not(.ht-shop-category-button--disabled):active {
        background: #fff;
        color: #111 !important;
        border-color: #111;
    }

}

/* ============================================================
   END — MOBILE RESPONSIVE
============================================================ */


/* ============================================================
   START — REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ht-shop-category-button,
    .ht-category-flip,
    .ht-category-button__line {
        transition: none !important;
    }

    .ht-shop-category-button:hover {
        transform: none;
    }

    .ht-shop-category-button--disabled:hover .ht-category-flip {
        transform: none;
    }

}

/* ============================================================
   END — REDUCED MOTION ACCESSIBILITY
============================================================ */



/* ============================================================
   04. PRODUCT CATALOG AREA
   ============================================================ */

.ht-shop-catalog {
    width: min(100% - 100px, var(--ht-shop-container));
    margin: 0 auto;
    padding: 0 0 105px;
}

.ht-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 21px 0;
    border-top: 1px solid var(--ht-shop-border);
    border-bottom: 1px solid var(--ht-shop-border);
}

.ht-shop-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.ht-shop-filter-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.ht-shop-filter-label svg {
    width: 17px;
    height: 17px;
}

.ht-shop-filter {
    position: relative;
    display: block;
}

.ht-shop-filter select,
.ht-shop-filter input {
    width: 145px;
    height: 42px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--ht-shop-border);
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #333;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    transition: border-color .25s ease;
}

.ht-shop-filter input {
    width: 112px;
    padding-right: 10px;
}

.ht-shop-filter select:focus,
.ht-shop-filter input:focus {
    border-color: #333;
}

/* ---------- APPLY FILTER BUTTON ---------- */

.ht-shop-filter-submit {
    height: 42px;
    padding: 0 19px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    cursor: pointer;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;

    transition:
        background-color .3s ease-in-out,
        color .3s ease-in-out,
        border-color .3s ease-in-out;
}

.ht-shop-filter-submit:hover {
    background: #fff;
    color: #111;
    border-color: #111;
}

.ht-shop-sorting {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.ht-shop-sorting__label {
    font-size: 10px;
    color: var(--ht-shop-muted);
}

.ht-shop-sorting .woocommerce-ordering {
    margin: 0;
}

.ht-shop-sorting .orderby {
    height: 42px;
    min-width: 155px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--ht-shop-border);
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #222;
    font-size: 10px;
}

.ht-shop-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 0 27px;
}

.ht-shop-results__count {
    margin: 0;
    color: var(--ht-shop-muted);
    font-size: 10px;
    letter-spacing: .04em;
}





/* ---------- APPLY BUTTON — FINAL FIX ---------- */

button.ht-shop-filter-submit {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;

    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #111 !important;

    transition: background-color .4s ease-in-out,
                color .4s ease-in-out,
                border-color .4s ease-in-out !important;
}

button.ht-shop-filter-submit:hover {
    background-color: #fff !important;
    color: #111 !important;
    border-color: #111 !important;
}





/* =========================================================
   START: THS — PREMIUM COMPACT CUSTOM DROPDOWN
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   Text Domain: hatim-tech
   ========================================================= */


/* ---------- 01. WRAPPER ---------- */

.ht-custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    font-family: 'Montserrat', sans-serif;
}


/* ---------- 02. ORIGINAL SELECT ---------- */

.ht-custom-dropdown__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ---------- 03. DROPDOWN TRIGGER ---------- */

.ht-custom-dropdown__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 42px;

    padding: 0 34px 0 11px;

    background: #fff;
    color: #111;

    border: 1px solid #d8d8d8;
    border-radius: 0;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .015em;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;

    cursor: pointer;

    transition:
        background-color .4s ease,
        color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.ht-custom-dropdown__trigger:hover {
    border-color: #111;
}

.ht-custom-dropdown__trigger:focus-visible {
    outline: 1px solid #111;
    outline-offset: 2px;
}


/* ---------- 04. ARROW ---------- */

.ht-custom-dropdown__trigger::after {
    content: '';

    position: absolute;
    right: 13px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: translateY(-70%) rotate(45deg);

    transition: transform .4s ease;
}

.ht-custom-dropdown.is-open
.ht-custom-dropdown__trigger::after {
    transform: translateY(-30%) rotate(225deg);
}


/* ---------- 05. DROPDOWN MENU ---------- */

.ht-custom-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;

    z-index: 99999;

    width: 100%;
    max-height: 230px;

    overflow-y: auto;
    overflow-x: hidden;

    background: #fff;
    border: 1px solid #dedede;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ht-custom-dropdown.is-open
.ht-custom-dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ---------- 06. OPTIONS ---------- */

.ht-custom-dropdown__option {
    display: block;

    width: 100%;
    min-height: 35px;

    padding: 8px 11px;

    background: #fff;
    color: #222;

    border: 0;
    border-bottom: 1px solid #ededed;
    border-radius: 0;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .015em;
    line-height: 1.35;

    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;

    cursor: pointer;

    transition:
        background-color .35s ease,
        color .35s ease,
        padding-left .35s ease;
}


/* ---------- 07. HOVER ---------- */

.ht-custom-dropdown__option:hover,
.ht-custom-dropdown__option:focus-visible {
    background: #111 !important;
    color: #fff !important;

    padding-left: 15px;

    outline: none;
}


/* ---------- 08. SELECTED OPTION ---------- */

.ht-custom-dropdown__option.is-selected {
    background: #111;
    color: #fff;
}


/* ---------- 09. DISABLED OPTION ---------- */

.ht-custom-dropdown__option:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* ---------- 10. HIDE SCROLLBAR ---------- */

.ht-custom-dropdown__menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ht-custom-dropdown__menu::-webkit-scrollbar {
    display: none;
}


/* ---------- 11. MOBILE ---------- */

@media (max-width: 767px) {

    .ht-custom-dropdown__trigger {
        min-height: 40px;
        padding-left: 10px;
        font-size: 10px !important;
    }

    .ht-custom-dropdown__option {
        min-height: 34px;
        padding: 8px 10px;
        font-size: 10px !important;
    }

    .ht-custom-dropdown__menu {
        max-height: 200px;
    }
}


/* =========================================================
   END: THS — PREMIUM COMPACT CUSTOM DROPDOWN
   ========================================================= */





/* ============================================================
   05. PRODUCT GRID
   ============================================================ */

.ht-shop-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 19px;
}

.ht-shop-product-grid ul.products,
.ht-shop-product-grid .products {
    display: contents;
}

.ht-shop-product-grid .product {
    position: relative;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    text-align: left;
}

.ht-shop-product-grid .product a img {
    width: 100%;
    height: 370px;
    margin: 0;
    object-fit: cover;
    object-position: center;
    background: var(--ht-shop-ivory);
    transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.ht-shop-product-grid .product > a:first-child {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--ht-shop-ivory);
}

.ht-shop-product-grid .product:hover a img {
    transform: scale(1.045);
}

.ht-shop-product-grid .product .woocommerce-loop-product__title {
    margin: 17px 0 8px;
    padding: 0;
    color: #171717;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.6;
}

.ht-shop-product-grid .product .price {
    display: block;
    margin: 0 0 15px;
    color: #555;
    font-size: 11px;
    font-weight: 500;
}

.ht-shop-product-grid .product .price del {
    margin-right: 5px;
    color: #999;
    opacity: .75;
}

.ht-shop-product-grid .product .price ins {
    color: #111;
    text-decoration: none;
}

.ht-shop-product-grid .product .button,
.ht-shop-product-grid .product a.add_to_cart_button,
.ht-shop-product-grid .product a.product_type_variable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    text-align: center;
    text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}

.ht-shop-product-grid .product .button:hover,
.ht-shop-product-grid .product a.add_to_cart_button:hover,
.ht-shop-product-grid .product a.product_type_variable:hover {
    background: #fff;
    color: #111;
}

.ht-shop-product-grid .product .added_to_cart {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    text-align: center;
    text-decoration: underline;
}

.ht-shop-product-grid .product .onsale {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px 11px;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

/* WooCommerce product card clearfix */
.ht-shop-product-grid .product::before,
.ht-shop-product-grid .product::after {
    display: none !important;
}

/* ============================================================
   06. PAGINATION
   ============================================================ */

.ht-shop-pagination {
    display: flex;
    justify-content: center;
    margin-top: 75px;
}

.ht-shop-pagination .woocommerce-pagination {
    width: 100%;
}

.ht-shop-pagination .woocommerce-pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.ht-shop-pagination .woocommerce-pagination ul li {
    float: none;
    margin: 0;
    border: 0;
}

.ht-shop-pagination .woocommerce-pagination ul li a,
.ht-shop-pagination .woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    padding: 0;
    border: 1px solid var(--ht-shop-border);
    border-radius: 0;
    background: #fff;
    color: #222;
    font-size: 10px;
    transition: all .25s ease;
}

.ht-shop-pagination .woocommerce-pagination ul li span.current,
.ht-shop-pagination .woocommerce-pagination ul li a:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}

/* ============================================================
   07. EMPTY SHOP STATE
   ============================================================ */

.ht-shop-empty {
    padding: 105px 20px;
    background: var(--ht-shop-ivory);
    text-align: center;
}

.ht-shop-empty__eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--ht-shop-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .25em;
}

.ht-shop-empty__title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 400;
    line-height: 1;
}

.ht-shop-empty__description {
    max-width: 430px;
    margin: 18px auto 27px;
    color: var(--ht-shop-muted);
    font-size: 11px;
    line-height: 1.9;
}

.ht-shop-empty__button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    background: #111;
    color: #fff !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
}

/* ============================================================
   08. CINEMATIC COLLECTION FINALE
   ============================================================ */

.ht-shop-finale {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 470px;
    margin-top: 10px;
    overflow: hidden;
    isolation: isolate;
    background: #111;
}

.ht-shop-finale__image-wrap {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.ht-shop-finale__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    opacity: .82;
}

.ht-shop-finale__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(10,10,10,.95) 0%,
        rgba(10,10,10,.78) 42%,
        rgba(10,10,10,.2) 100%
    );
}

.ht-shop-finale__content {
    width: min(100% - 100px, var(--ht-shop-container));
    margin: 0 auto;
    padding: 80px 0;
    color: #fff;
}

.ht-shop-finale__title {
    max-width: 590px;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 6.5vw, 88px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .95;
    color: #fff;
}

.ht-shop-finale__description {
    max-width: 420px;
    margin: 22px 0 30px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .04em;
}

/* ============================================================
   09. RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {
    .ht-shop-hero {
        min-height: 540px;
    }

    .ht-shop-hero__content {
        width: calc(100% - 70px);
        padding-left: 48%;
    }

    .ht-shop-categories,
    .ht-shop-catalog {
        width: calc(100% - 70px);
    }

    .ht-shop-categories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .ht-shop-category {
        height: 340px;
    }

    .ht-shop-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 38px 16px;
    }

    .ht-shop-product-grid .product a img {
        height: 340px;
    }

    .ht-shop-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ht-shop-sorting {
        align-self: flex-end;
    }

    .ht-shop-finale__content {
        width: calc(100% - 70px);
    }
}

/* ============================================================
   10. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 767px) {
    .ht-shop-hero {
        min-height: 570px;
        align-items: flex-end;
    }

    .ht-shop-hero__image {
        object-position: 34% center;
    }

    .ht-shop-hero__overlay {
        background: linear-gradient(
            0deg,
            rgba(8,8,8,.97) 0%,
            rgba(8,8,8,.8) 35%,
            rgba(8,8,8,.18) 100%
        );
    }

    .ht-shop-hero__content {
        width: calc(100% - 42px);
        padding: 0 0 55px;
    }

    .ht-shop-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 9px;
    }

    .ht-shop-hero__title {
        font-size: clamp(76px, 19vw, 112px);
    }

    .ht-shop-hero__description {
        margin: 18px 0 25px;
        font-size: 10px;
    }

    .ht-shop-hero__button {
        min-width: 205px;
        padding: 15px;
    }

    .ht-shop-categories {
        width: calc(100% - 32px);
        padding: 48px 0 55px;
    }

    .ht-shop-categories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ht-shop-category {
        height: 245px;
    }

    .ht-shop-category__content {
        right: 13px;
        bottom: 17px;
        left: 13px;
        gap: 10px;
    }

    .ht-shop-category__title {
        font-size: clamp(21px, 5.5vw, 28px);
    }

    .ht-shop-category__link {
        gap: 7px;
        font-size: 8px;
    }

    .ht-shop-category__link svg {
        width: 13px;
        height: 13px;
    }

    .ht-shop-catalog {
        width: calc(100% - 32px);
        padding-bottom: 65px;
    }

    .ht-shop-toolbar {
        gap: 18px;
        padding: 17px 0;
    }

    .ht-shop-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 9px;
    }

    .ht-shop-filter-label {
        grid-column: 1 / -1;
        margin-bottom: 3px;
    }

    .ht-shop-filter,
    .ht-shop-filter select,
    .ht-shop-filter input {
        width: 100%;
        min-width: 0;
    }

    .ht-shop-filter select,
    .ht-shop-filter input {
        height: 42px;
        font-size: 10px;
    }

    .ht-shop-filter-submit {
        width: 100%;
        height: 42px;
    }

    .ht-shop-sorting {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .ht-shop-sorting .orderby {
        min-width: 160px;
        max-width: 190px;
    }

    .ht-shop-results {
        padding: 19px 0 20px;
    }

    .ht-shop-results__count {
        font-size: 9px;
    }

    .ht-shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 11px;
    }

    .ht-shop-product-grid .product a img {
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

    .ht-shop-product-grid .product .woocommerce-loop-product__title {
        margin-top: 12px;
        margin-bottom: 6px;
        font-size: 10px;
    }

    .ht-shop-product-grid .product .price {
        margin-bottom: 11px;
        font-size: 10px;
    }

    .ht-shop-product-grid .product .button,
    .ht-shop-product-grid .product a.add_to_cart_button,
    .ht-shop-product-grid .product a.product_type_variable {
        min-height: 39px;
        padding: 10px 7px;
        font-size: 8px;
        letter-spacing: .08em;
    }

    .ht-shop-product-grid .product .onsale {
        top: 8px;
        left: 8px;
        padding: 7px 8px;
        font-size: 7px;
    }

    .ht-shop-pagination {
        margin-top: 48px;
    }

    .ht-shop-finale {
        min-height: 410px;
        align-items: flex-end;
    }

    .ht-shop-finale__image {
        object-position: 38% center;
    }

    .ht-shop-finale__overlay {
        background: linear-gradient(
            0deg,
            rgba(8,8,8,.97) 0%,
            rgba(8,8,8,.78) 48%,
            rgba(8,8,8,.15) 100%
        );
    }

    .ht-shop-finale__content {
        width: calc(100% - 42px);
        padding: 55px 0 40px;
    }

    .ht-shop-finale__eyebrow {
        margin-bottom: 15px;
        font-size: 9px;
    }

    .ht-shop-finale__title {
        max-width: 100%;
        font-size: clamp(47px, 12vw, 66px);
    }

    .ht-shop-finale__description {
        margin: 17px 0 23px;
        font-size: 10px;
    }

    .ht-shop-finale__button {
        min-width: 205px;
        padding: 15px;
    }
}

/* ============================================================
   11. SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {
    .ht-shop-category {
        height: 215px;
    }

    .ht-shop-category__title {
        font-size: 20px;
    }

    .ht-shop-product-grid {
        gap: 28px 9px;
    }

    .ht-shop-product-grid .product .woocommerce-loop-product__title {
        font-size: 9px;
    }

    .ht-shop-product-grid .product .button {
        font-size: 7px;
    }
}

/* ============================================================
   12. ACCESSIBILITY & MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ht-shop-page *,
    .ht-shop-page *::before,
    .ht-shop-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}









/* ============================================================
   THE HATIM STORE — PREMIUM CATEGORY & COMING SOON DESIGN
   @package HatimTechCore
   @author Hatim Tech
   Developed by Hatim Tech (HT)
============================================================ */


/* ============================================================
   START — CATEGORY CARD REFINEMENT
============================================================ */

.ht-shop-category {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #111;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.ht-shop-category__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.1s cubic-bezier(.2, .65, .25, 1),
        filter .8s ease;
}

.ht-shop-category__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .04) 0%,
        rgba(0, 0, 0, .12) 35%,
        rgba(0, 0, 0, .76) 100%
    );
    transition: background .7s ease;
}

.ht-shop-category__content {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(20px, 3vw, 34px);
    color: #fff;
    transition:
        transform .7s cubic-bezier(.2, .65, .25, 1),
        opacity .5s ease;
}

.ht-shop-category__title {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.ht-shop-category__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .88);
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.ht-shop-category__link svg {
    width: 17px;
    height: 17px;
    transition: transform .35s ease;
}

@media (hover: hover) {
    .ht-shop-category:hover .ht-shop-category__image {
        transform: scale(1.055);
    }

    .ht-shop-category:hover .ht-shop-category__link svg {
        transform: translateX(5px);
    }
}

.ht-shop-category:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}


/* ============================================================
   END — CATEGORY CARD REFINEMENT
============================================================ */




/* ============================================================
   THS — MOBILE PRODUCT PRICE ALIGNMENT
   Equal title space for every product card
   ============================================================ */

@media (max-width: 767px) {

    .ht-shop-product-grid .ht-card__details {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Reserve equal space for product titles */
    .ht-shop-product-grid .ht-card__title-link {
        display: block !important;
        height: 44px !important;
        min-height: 44px !important;
        overflow: hidden !important;
    }

    .ht-shop-product-grid .ht-card__title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        --webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        height: 44px !important;
        line-height: 22px !important;
        margin: 0 !important;
    }

    /* Keep category position consistent */
    .ht-shop-product-grid .ht-card__category {
        height: 15px !important;
        min-height: 15px !important;
        margin-top: 5px !important;
        overflow: hidden !important;
        line-height: 15px !important;
    }

    /* Price starts at the same vertical position */
    .ht-shop-product-grid .ht-card__price {
        margin-top: 7px !important;
        min-height: 24px !important;
        line-height: 24px !important;
    }

}



/* ============================================================
   END — MOBILE PRODUCT PRICE ALIGNMENT
============================================================ */

/* ============================================================
   START — COMING SOON CATEGORY OVERLAY
============================================================ */

.ht-shop-category--coming-soon {
    cursor: pointer;
}

.ht-shop-category--coming-soon .ht-shop-category__image {
    filter: grayscale(100%);
}

.ht-shop-category--coming-soon .ht-shop-category__overlay {
    background: rgba(0, 0, 0, .94);
    transition: background .65s ease;
}

.ht-shop-category--coming-soon .ht-shop-category__content {
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 24px;
    text-align: center;
}

.ht-shop-category--coming-soon .ht-shop-category__title {
    color: rgba(255, 255, 255, .95);
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: .015em;
}

.ht-shop-category__link--coming-soon {
    position: relative;
    padding-top: 14px;
    color: rgba(255, 255, 255, .65);
    font-size: 9px;
    letter-spacing: .24em;
}

.ht-shop-category__link--coming-soon::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, .55);
    content: "";
    transform: translateX(-50%);
}

@media (hover: hover) {
    .ht-shop-category--coming-soon:hover .ht-shop-category__image {
        transform: scale(1.035);
    }

    .ht-shop-category--coming-soon:hover .ht-shop-category__overlay {
        background: rgba(0, 0, 0, .97);
    }
}

/* ============================================================
   END — COMING SOON CATEGORY OVERLAY
============================================================ */


/* ============================================================
   START — DEDICATED COMING SOON PAGE
============================================================ */

.ht-coming-soon-page {
    position: relative;
    display: flex;
    width: 100%;
    min-height: min(820px, 100svh);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 24px;
    background: #080808;
    color: #fff;
    text-align: center;
    isolation: isolate;
}

.ht-coming-soon-page::before,
.ht-coming-soon-page::after {
    position: absolute;
    z-index: -1;
    width: min(65vw, 720px);
    height: min(65vw, 720px);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ht-coming-soon-page::before {
    transform: scale(.72);
}

.ht-coming-soon-page::after {
    transform: scale(1);
}

.ht-coming-soon-page__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    animation: htComingSoonReveal 1s cubic-bezier(.2, .65, .25, 1) both;
}

.ht-coming-soon-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, .58);
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.ht-coming-soon-page__eyebrow::before,
.ht-coming-soon-page__eyebrow::after {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, .4);
    content: "";
}

.ht-coming-soon-page__title {
    margin: 0;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(62px, 11vw, 132px);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.ht-coming-soon-page__category {
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .82);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(11px, 1.5vw, 14px);
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.8;
    text-transform: uppercase;
}

.ht-coming-soon-page__description {
    max-width: 460px;
    margin: 20px auto 0;
    color: rgba(255, 255, 255, .48);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 2;
}

.ht-coming-soon-page__button {
    position: relative;
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 44px;
    padding: 0 29px;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease;
}

.ht-coming-soon-page__button svg {
    width: 17px;
    height: 17px;
    transition: transform .35s ease;
}

.ht-coming-soon-page__button:hover {
    border-color: #fff;
    color: #080808;
    background: #fff;
}

.ht-coming-soon-page__button:hover svg {
    transform: translateX(4px);
}

.ht-coming-soon-page__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}


/* ============================================================
   END — DEDICATED COMING SOON PAGE
============================================================ */


/* ============================================================
   START — REVEAL ANIMATION
============================================================ */

@keyframes htComingSoonReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

/* ============================================================
   END — REVEAL ANIMATION
============================================================ */


/* ============================================================
   START — RESPONSIVE CATEGORY & COMING SOON
============================================================ */

@media (max-width: 767px) {

    .ht-shop-category__content {
        gap: 9px;
        padding: 19px;
    }

    .ht-shop-category__title {
        font-size: clamp(23px, 6vw, 31px);
    }

    .ht-shop-category--coming-soon .ht-shop-category__content {
        padding: 16px;
    }

    .ht-shop-category__link--coming-soon {
        font-size: 8px;
        letter-spacing: .19em;
    }

    .ht-coming-soon-page {
        min-height: 72svh;
        padding: 90px 22px;
    }

    .ht-coming-soon-page__eyebrow {
        margin-bottom: 25px;
        font-size: 8px;
        letter-spacing: .22em;
    }

    .ht-coming-soon-page__title {
        font-size: clamp(56px, 15vw, 88px);
    }

    .ht-coming-soon-page__category {
        margin-top: 24px;
        font-size: 10px;
        letter-spacing: .16em;
    }

    .ht-coming-soon-page__description {
        max-width: 330px;
        font-size: 11px;
    }

    .ht-coming-soon-page__button {
        min-height: 50px;
        margin-top: 34px;
        padding: 0 21px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ht-shop-category__image,
    .ht-shop-category__overlay,
    .ht-shop-category__content,
    .ht-shop-category__link svg,
    .ht-coming-soon-page__button,
    .ht-coming-soon-page__button svg {
        transition: none !important;
    }

    .ht-coming-soon-page__inner {
        animation: none !important;
    }
}

/* ============================================================
   END — RESPONSIVE CATEGORY & COMING SOON
============================================================ */



/* ============================================================
   START — BY HATIM TECH PREMIUM BRAND SIGNATURE
============================================================ */

.ht-coming-soon-page__watermark {
    position: absolute;
    right: 5.5%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    transform: translateY(-50%);
    z-index: 3;
    color: rgba(255, 255, 255, 0.58);
    pointer-events: none;
}

.ht-coming-soon-page__watermark-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.ht-coming-soon-page__watermark-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.78);
}

/* Mobile */

@media (max-width: 767px) {
    .ht-coming-soon-page__watermark {
        top: auto;
        right: 24px;
        bottom: 28px;
        transform: none;
        align-items: flex-end;
    }

    .ht-coming-soon-page__watermark-label {
        font-size: 6px;
        letter-spacing: 2px;
    }

    .ht-coming-soon-page__watermark-name {
        font-size: 13px;
        letter-spacing: 1.8px;
    }
}

/* ============================================================
   END — BY HATIM TECH PREMIUM BRAND SIGNATURE
============================================================ */




/* START — COMING SOON HORIZONTAL SCROLL FIX */
body:has(.ht-coming-soon-page) {
    overflow-x: hidden;
}

.ht-coming-soon-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.ht-coming-soon-page * {
    max-width: 100%;
}
/* END — COMING SOON HORIZONTAL SCROLL FIX */



/* ============================================================
   END — THE HATIM STORE SHOP PAGE CSS
   ============================================================ */










/* =========================================================
   THE HATIM STORE — PREMIUM PRODUCT CARD SYSTEM
   Developed by Hatim Tech
========================================================= */

/* 01 — FONT IMPORT */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');


/* ============================================================
   02 — MASTER PRODUCT GRID
   Shop Page + Homepage Featured Products
============================================================ */

/* Main WooCommerce and Featured Products grids */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.ht-editorial__grid.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 38px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove WooCommerce clearfix */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.ht-editorial__grid.products::before,
ul.ht-editorial__grid.products::after {
    display: none !important;
    content: none !important;
}

/* Product item */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.ht-editorial__grid.products li.product {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Tablet */

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.ht-editorial__grid.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 17px !important;
        row-gap: 32px !important;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.ht-editorial__grid.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 27px !important;
    }
}

/* Small Mobile */

@media (max-width: 380px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.ht-editorial__grid.products {
        column-gap: 9px !important;
    }
}

/* ============================================================
   END — MASTER PRODUCT GRID
============================================================ */




/* ============================================================
   START: HT EDITORIAL EXPLORE BUTTON
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
============================================================ */

.ht-editorial__explore {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 30px;
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff !important;
    text-decoration: none !important;
    overflow: hidden;
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.ht-editorial__explore span {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    transition: color .35s ease;
}

/* HOVER */
.ht-editorial__explore:hover {
    background: #ffffff;
    border-color: #111111;
    color: #111111 !important;
}

.ht-editorial__explore:hover span {
    color: #111111;
}

/* FOCUS */
.ht-editorial__explore:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

/* MOBILE */
@media (max-width: 767px) {
    .ht-editorial__explore {
        min-height: 48px;
        padding: 0 23px;
    }

    .ht-editorial__explore span {
        font-size: 9px;
        letter-spacing: 1.6px;
    }
}

/* ============================================================
   END: HT EDITORIAL EXPLORE BUTTON
============================================================ */










/* 03 — CARD BASE */

.ht-signature-card {
    list-style: none !important;
}

.ht-card {
    position: relative;
    width: 100%;
    min-width: 0;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    border-radius: 6px;
    overflow: hidden;
}

/* 04 — PRODUCT IMAGE */

.ht-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 0.70 / 1;
    overflow: hidden;
    background: #f4f3f0;
    border-radius: 6px;
}

.ht-card__image-link,
.ht-card__image-stage {
    display: block;
    width: 100%;
    height: 100%;
}

.ht-card__image-stage {
    position: relative;
    overflow: hidden;
}

.ht-card__image-stage img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.ht-card__image-stage img:hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* 05 — SALE BADGE */

.ht-card__badge {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 5px 9px;
    background: #a9232b;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* 06 — PREMIUM CART BUTTON */

.ht-card__cart {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 8;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.10);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.055);
    transition:
        background-color .32s ease-in-out,
        border-color .32s ease-in-out,
        box-shadow .32s ease-in-out;
}

.ht-card__cart .button {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    transition: background-color .32s ease-in-out;
}

/* Shopping bag icon */

.ht-card__cart .button::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 19px;
    height: 19px;
    margin: auto;
    background-color: #171717;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l1 13H4L5 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l1 13H4L5 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color .32s ease-in-out;
}

/* Cart hover */

.ht-card__cart:hover {
    background: #171717;
    border-color: #171717;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.13);
}

.ht-card__cart:hover .button::before {
    background-color: #fff;
}

.ht-card__cart .button:hover {
    background: transparent !important;
}

/* Hide WooCommerce View Cart */

.ht-card__cart .added_to_cart,
.ht-card a.added_to_cart {
    display: none !important;
    visibility: hidden !important;
}

/* Hide cart icon after AJAX add */

.ht-card__cart .button.added {
    visibility: hidden !important;
    pointer-events: none !important;
}

.ht-card__cart .button.added::before {
    display: none !important;
    content: none !important;
}

.ht-card__cart:has(.button.added) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* 07 — IMAGE DOTS */

.ht-card__dots {
    position: absolute;
    left: 50%;
    bottom: 13px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transform: translateX(-50%);
    pointer-events: none;
}

.ht-card__dots span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.58);
}

.ht-card__dots span:first-child {
    background: #fff;
}

/* 08 — PRODUCT INFORMATION */

.ht-card__information {
    padding: 14px 0 0;
    text-align: left;
}

/* Product name — Cormorant Garamond only */

.ht-card__title-link {
    display: block;
    color: #171717 !important;
    text-decoration: none !important;
}

.ht-card__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #171717 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.16 !important;
    letter-spacing: 0;
}

/* 09 — CATEGORY — MONTSERRAT */

.ht-card__category {
    margin-top: 5px;
    color: #89857f;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* 10 — PRICE — MONTSERRAT */

.ht-card__price {
    display: block;
    margin-top: 8px;
    color: #202020 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
}

.ht-card__price .woocommerce-Price-amount,
.ht-card__price .woocommerce-Price-currencySymbol {
    color: inherit !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Regular price */

.ht-card__price del {
    margin-right: 7px;
    color: #a09b94 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.ht-card__price del .woocommerce-Price-amount,
.ht-card__price del .woocommerce-Price-currencySymbol {
    color: #a09b94 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: inherit !important;
    font-weight: 400 !important;
}

/* Sale price */

.ht-card__price ins {
    color: #202020 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ht-card__price ins .woocommerce-Price-amount,
.ht-card__price ins .woocommerce-Price-currencySymbol {
    color: #202020 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* 11 — REMOVE SECONDARY IMAGE */

.ht-card__image-stage img.ht-card-image--secondary {
    display: none !important;
}

/* 12 — TABLET */

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 17px;
        row-gap: 32px;
    }

    .ht-card__title {
        font-size: 21px !important;
    }
}

/* 13 — MOBILE */

@media (max-width: 767px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 27px;
    }

    .ht-card__media {
        aspect-ratio: 0.68 / 1;
    }

    .ht-card__badge {
        top: 9px;
        left: 9px;
        padding: 5px 7px;
        font-size: 8px;
    }

    .ht-card__cart {
        right: 9px;
        bottom: 9px;
        width: 37px;
        height: 37px;
    }

    .ht-card__cart .button::before {
        width: 17px;
        height: 17px;
    }

    .ht-card__dots {
        bottom: 11px;
    }

    .ht-card__information {
        padding-top: 11px;
    }

    .ht-card__title {
        font-size: 19px !important;
    }

    .ht-card__category {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .ht-card__price,
    .ht-card__price ins {
        font-size: 14px !important;
    }

    .ht-card__price del {
        font-size: 12px !important;
    }
}

/* 14 — SMALL MOBILE */

@media (max-width: 380px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        column-gap: 9px;
    }

    .ht-card__title {
        font-size: 18px !important;
    }
}



/* CART BUTTON — EASE IN OUT TRANSITION */

.ht-card__cart,
.ht-card__cart .button,
.ht-card__cart .button::before {
    transition: all 0.35s ease-in-out !important;
}








/* ============================================================
   THE HATIM STORE — PRODUCT IMAGE NAVIGATION ARROWS
   Developed by Hatim Tech (HT)
   START: Product Image Arrows
============================================================ */

.ht-card__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.88);
    color: #171717;

    cursor: pointer;
    opacity: 0;
    visibility: hidden;

    transform: translateY(-50%);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.ht-card__arrow--prev {
    left: 12px;
}

.ht-card__arrow--next {
    right: 12px;
}

.ht-card__arrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-card__media:hover .ht-card__arrow,
.ht-card__arrow:focus-visible {
    opacity: 1;
    visibility: visible;
}

.ht-card__arrow:hover {
    background: #171717;
    color: #fff;
    border-color: #171717;
}

.ht-card__arrow:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 3px;
}

@media (hover: none) {
    .ht-card__arrow {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 767px) {
    .ht-card__arrow {
        width: 32px;
        height: 32px;
    }

    .ht-card__arrow--prev {
        left: 7px;
    }

    .ht-card__arrow--next {
        right: 7px;
    }

    .ht-card__arrow svg {
        width: 15px;
        height: 15px;
    }
}

/* END: Product Image Arrows */




/* =========================================================
   END — THE HATIM STORE PRODUCT CARDS
========================================================= */





/* ============================================================
   START: THS SHOP — ORIGINAL FLY TO CART
   Developed by Hatim Tech (HT)
   ============================================================ */
.ht-fly-to-cart-image {
    position: fixed !important;
    display: block !important;
    visibility: visible !important;

    width: 64px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;

    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .22),
        0 2px 7px rgba(0, 0, 0, .1);

    z-index: 999999 !important;
    pointer-events: none !important;

    transform-origin: center;
    will-change: transform, opacity;
}
/* Original particle trail */

.ht-fly-to-cart-trail {
    position: fixed;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(65, 62, 54, .5);

    z-index: 999998;
    pointer-events: none;

    animation: htFlyTrailFade .38s ease-out forwards;
}

@keyframes htFlyTrailFade {

    to {
        opacity: 0;
        transform: scale(.1);
    }
}


/* Cart impact */

.ht-lux-cart-link {
    transform-origin: center center;
}

.ht-lux-cart-link.ht-cart-is-bouncing {
    animation: htFlyCartImpact .55s cubic-bezier(.16, 1, .3, 1);
}

@keyframes htFlyCartImpact {

    0% {
        transform: scale(1);
    }

    38% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1);
    }
}


/* Cart count impact */

.ht-lux-cart-count.ht-cart-count-updated {
    animation: htFlyCountBump .4s ease;
}

@keyframes htFlyCountBump {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .ht-fly-to-cart-image,
    .ht-fly-to-cart-trail {
        display: none !important;
    }

    .ht-lux-cart-link.ht-cart-is-bouncing,
    .ht-lux-cart-count.ht-cart-count-updated {
        animation: none !important;
    }
}

/* ============================================================
   END: THS SHOP — ORIGINAL FLY TO CART
   ============================================================ */


/* ============================================================
   START: THS SINGLE PRODUCT — FLY TO CART
   Developed by Hatim Tech (HT)
   ============================================================ */

/* Flying product image */

.ht-fly-to-cart-image {
    position: fixed !important;
    z-index: 99999 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1;

    width: 64px !important;
    height: 82px !important;

    object-fit: cover !important;

    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 5px;

    pointer-events: none !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .22),
        0 2px 6px rgba(0, 0, 0, .12);

    transform-origin: center center;
    will-change: transform, opacity;
}

/* Flying particle trail */

.ht-fly-to-cart-trail {
    position: fixed !important;
    z-index: 99998 !important;

    width: 3px;
    height: 3px;

    background: rgba(65, 62, 54, .5);

    border-radius: 50%;

    pointer-events: none;

    animation: htFlyTrailFade .38s ease-out forwards;
}

@keyframes htFlyTrailFade {
    to {
        opacity: 0;
        transform: scale(.1);
    }
}

/* Header cart impact */

.ht-cart-is-bouncing {
    animation: htCartImpact .55s cubic-bezier(.16, 1, .3, 1);
}

@keyframes htCartImpact {
    0% {
        transform: scale(1);
    }

    38% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1);
    }
}

/* Header cart count */

.ht-cart-count-updated {
    animation: htCartCountBump .4s ease;
}

@keyframes htCartCountBump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

/* END: THS SINGLE PRODUCT — FLY TO CART */


   /* ============================================================
   START: THS — KEEP ADD TO CART BUTTON VISIBLE
   ============================================================ */

.ht-card__cart a.add_to_cart_button,
.ht-card__cart a.add_to_cart_button.added,
.ht-card__cart a.ajax_add_to_cart {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide WooCommerce View Cart link */
.ht-card__cart a.added_to_cart {
    display: none !important;
}

/* ============================================================
   END: THS — KEEP ADD TO CART BUTTON VISIBLE
   ============================================================ */




   /* ============================================================
   START: THS SINGLE PRODUCT — VIEW CART BUTTON
   Developed by Hatim Tech (HT)
   ============================================================ */

#ht-product-page .ht-product-purchase a.added_to_cart.wc-forward {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 22px;

    background: #111 !important;
    color: #fff !important;

    border: 1px solid #111 !important;
    border-radius: 2px;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

#ht-product-page .ht-product-purchase a.added_to_cart.wc-forward:hover {
    background: #fff !important;
    color: #111 !important;
    border-color: #111 !important;
}

/* END: THS SINGLE PRODUCT — VIEW CART BUTTON */






/* ============================================================
   START: THE HATIM STORE — PREMIUM LUXURY CART
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   Text Domain: hatim-tech

   Design: Luxury Monochrome / Editorial
   Features:
   01. Premium Cart Header
   02. Cart Products
   03. Quantity Controls
   04. Sticky Order Summary
   05. Premium Checkout Button
   06. Coupon Section
   07. Empty Cart
   08. WooCommerce Notices
   09. Full Responsive Layout
   10. Smooth Transitions
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS & MAIN WRAPPER
   ============================================================ */

.ht-cart-page {
    --ht-black: #111111;
    --ht-deep-black: #080808;
    --ht-white: #ffffff;
    --ht-paper: #f8f8f7;
    --ht-soft: #f1f1ef;
    --ht-grey: #858585;
    --ht-muted: #a4a4a4;
    --ht-border: #e8e8e6;
    --ht-dark-border: rgba(255,255,255,.14);
    --ht-transition: .35s cubic-bezier(.22,.61,.36,1);

    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 0 100px;
    background: var(--ht-paper);
    color: var(--ht-black);
    font-family: 'Montserrat', sans-serif;
    overflow-x: clip;
    isolation: isolate;
}

.ht-cart-page *,
.ht-cart-page *::before,
.ht-cart-page *::after {
    box-sizing: border-box;
}

.ht-cart-page a {
    text-decoration: none;
}

.ht-cart-container {
    width: min(1440px, calc(100% - 100px));
    margin-inline: auto;
}


/* ============================================================
   02. PREMIUM CART HEADER
   ============================================================ */

.ht-cart-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 300px;
    padding: 65px 76px;
    margin-bottom: 58px;
    color: #fff;
    background:
        radial-gradient(
            ellipse at 78% 45%,
            rgba(255,255,255,.12),
            transparent 38%
        ),
        linear-gradient(
            115deg,
            #080808 0%,
            #171717 52%,
            #292929 100%
        );
    overflow: hidden;
}

.ht-cart-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 75px,
            rgba(255,255,255,.018) 76px,
            transparent 78px
        );
    pointer-events: none;
}

.ht-cart-header::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: 8%;
    top: -270px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255,255,255,.018),
        0 0 0 90px rgba(255,255,255,.012);
    pointer-events: none;
}

.ht-cart-header__content,
.ht-cart-header__count {
    position: relative;
    z-index: 2;
}

.ht-cart-eyebrow {
    display: block;
    margin-bottom: 17px;
    color: #bdbdbd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ht-cart-title {
    margin: 0;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(54px, 6vw, 82px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -2px;
}

.ht-cart-description {
    max-width: 520px;
    margin: 19px 0 0;
    color: #bcbcbc;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.9;
}

.ht-cart-header__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(12px);
}

.ht-cart-header__count-label {
    color: #aaa;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.ht-cart-header__count-number {
    margin-top: 5px;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    line-height: 1;
}


/* ============================================================
   03. WOOCOMMERCE NOTICES
   ============================================================ */

.ht-cart-page .woocommerce-notices-wrapper {
    margin-bottom: 25px;
}

.ht-cart-page .woocommerce-message,
.ht-cart-page .woocommerce-info,
.ht-cart-page .woocommerce-error {
    padding: 17px 22px 17px 48px;
    border: 1px solid var(--ht-border);
    border-top: 2px solid var(--ht-black);
    border-radius: 0;
    background: #fff;
    color: var(--ht-black);
    font-size: 12px;
    line-height: 1.7;
}

.ht-cart-page .woocommerce-message::before,
.ht-cart-page .woocommerce-info::before,
.ht-cart-page .woocommerce-error::before {
    color: var(--ht-black);
}


/* ============================================================
   04. MAIN CART GRID
   ============================================================ */

.ht-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
    gap: 30px;
    width: 100%;
}

.ht-cart-items {
    min-width: 0;
    padding: 0;
    border: 1px solid #e9e9e7;
    background: #fff;
    box-shadow: 0 12px 45px rgba(0,0,0,.035);
}


/* ============================================================
   05. ITEMS HEADING
   ============================================================ */

.ht-cart-items__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 0 32px;
    border-bottom: 1px solid var(--ht-border);
    background: linear-gradient(110deg, #f8f8f7, #fff);
}

.ht-cart-items__heading h2 {
    margin: 0;
    color: var(--ht-black);
    font-family: 'Cormorant Garamond', serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 1.2;
}

.ht-cart-items__heading span {
    color: #858585;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}


/* ============================================================
   06. PRODUCT LIST & PRODUCT CARDS
   ============================================================ */

.ht-cart-items__list {
    padding: 0 30px;
}

.ht-cart-item {
    display: grid;
    grid-template-columns: 174px minmax(0, 1fr);
    gap: 27px;
    padding: 30px 0;
    border-bottom: 1px solid var(--ht-border);
    transition:
        background var(--ht-transition),
        border-color var(--ht-transition),
        padding var(--ht-transition);
}

.ht-cart-item:hover {
    border-bottom-color: #c9c9c7;
}

.ht-cart-item__image {
    position: relative;
    width: 100%;
    height: 190px;
    padding: 10px;
    background: #f2f2f0;
    overflow: hidden;
}

.ht-cart-item__image a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ht-cart-item__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .65s cubic-bezier(.2,.65,.3,1);
}

.ht-cart-item:hover .ht-cart-item__image img {
    transform: scale(1.075);
}


/* ============================================================
   07. PRODUCT INFORMATION
   ============================================================ */

.ht-cart-item__details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
}

.ht-cart-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.ht-cart-item__category {
    display: block;
    margin-bottom: 9px;
    color: #969696;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;
}

.ht-cart-item__name {
    margin: 0;
    color: var(--ht-black);
    font-family: 'Cormorant Garamond', serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    transition: color var(--ht-transition);
}

.ht-cart-item__name a {
    color: inherit;
    transition: color var(--ht-transition);
}

.ht-cart-item__name a:hover {
    color: #777;
}

.ht-cart-item__remove {
    flex-shrink: 0;
}

.ht-cart-item__remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin: 0 !important;
    border: 1px solid #e7e7e5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #555 !important;
    font-size: 20px !important;
    font-weight: 300;
    line-height: 1 !important;
    transition:
        color var(--ht-transition),
        background var(--ht-transition),
        border-color var(--ht-transition),
        transform var(--ht-transition);
}

.ht-cart-item__remove a.remove:hover {
    border-color: #111 !important;
    background: #111 !important;
    color: #fff !important;
    transform: rotate(90deg);
}

.ht-cart-item__meta {
    margin-top: 8px;
    color: #777;
    font-size: 11px;
    line-height: 1.8;
}

.ht-cart-item__meta dl,
.ht-cart-item__meta dd,
.ht-cart-item__meta p {
    margin: 0;
}

.ht-cart-item__meta dt {
    display: inline-block;
    margin-right: 5px;
    color: #333;
    font-weight: 600;
}

.ht-cart-item__meta dd {
    display: inline-block;
}


/* ============================================================
   08. PRICE / QUANTITY / SUBTOTAL
   ============================================================ */

.ht-cart-item__bottom {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto minmax(110px, 1fr);
    align-items: end;
    gap: 16px;
    margin-top: 24px;
}

.ht-cart-item__price,
.ht-cart-item__subtotal {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ht-cart-item__price-label,
.ht-cart-item__subtotal-label,
.ht-cart-item__quantity label {
    color: #999;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ht-cart-item__price-value {
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.ht-cart-item__subtotal {
    align-items: flex-end;
    text-align: right;
}

.ht-cart-item__subtotal-value {
    color: #111;
    font-size: 17px;
    font-weight: 700;
}


/* ============================================================
   09. PREMIUM QUANTITY INPUT
   ============================================================ */

.ht-cart-item__quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ht-cart-item__quantity .quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 39px;
    margin: 0 !important;
    border: 1px solid #dededc;
    background: #fff;
    transition: border-color var(--ht-transition);
}

.ht-cart-item__quantity .quantity:focus-within {
    border-color: #111;
}

.ht-cart-item__quantity input.qty {
    width: 100% !important;
    min-width: 0;
    height: 37px !important;
    padding: 0 5px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    text-align: center;
    box-shadow: none !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ht-cart-item__quantity input.qty::-webkit-inner-spin-button,
.ht-cart-item__quantity input.qty::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}


/* ============================================================
   10. CART ACTIONS
   ============================================================ */

.ht-cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 78px;
    padding: 15px 30px;
    background: #fafaf9;
}

.ht-cart-continue-shopping,
.ht-cart-update-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    background: transparent;
    color: #222;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.1px;
    cursor: pointer;
    transition:
        color var(--ht-transition),
        background var(--ht-transition),
        border-color var(--ht-transition),
        transform var(--ht-transition);
}

.ht-cart-continue-shopping:hover {
    color: #777;
    transform: translateX(-4px);
}

.ht-cart-update-button {
    border-color: #dededc;
    background: #fff;
}

.ht-cart-update-button:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}


/* ============================================================
   11. PREMIUM STICKY ORDER SUMMARY
   ============================================================ */

.ht-cart-summary {
    position: sticky;
    top: 110px;
    align-self: start;
    min-width: 0;
    z-index: 5;
}

.ht-cart-summary__inner {
    position: relative;
    padding: 34px 30px 27px;
    border: 1px solid #303030;
    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(255,255,255,.085),
            transparent 42%
        ),
        linear-gradient(145deg, #171717, #080808);
    color: #fff;
    box-shadow: 0 22px 55px rgba(0,0,0,.13);
    overflow: hidden;
}

.ht-cart-summary__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: 55px;
    height: 2px;
    background: #fff;
}

.ht-cart-summary__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #999;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2.5px;
}

.ht-cart-summary__title {
    margin: 0 0 27px;
    padding-bottom: 23px;
    border-bottom: 1px solid var(--ht-dark-border);
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 33px;
    font-weight: 500;
    line-height: 1.15;
}

.ht-cart-summary__subtotal,
.ht-cart-summary__discount,
.ht-cart-summary__shipping,
.ht-cart-summary__fee,
.ht-cart-summary__tax {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #c5c5c5;
    font-size: 11px;
    line-height: 1.7;
}

.ht-cart-summary__subtotal > span:last-child,
.ht-cart-summary__discount > span:last-child,
.ht-cart-summary__fee > span:last-child,
.ht-cart-summary__tax > span:last-child {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.ht-cart-summary__discount a {
    color: #fff;
}

.ht-cart-summary__shipping ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-cart-summary__shipping li {
    margin: 0 0 8px;
    color: #fff;
    font-size: 11px;
}

.ht-cart-summary__shipping .woocommerce-shipping-destination {
    margin-top: 8px;
    color: #aaa;
    font-size: 10px;
    line-height: 1.7;
}

.ht-cart-summary__shipping .shipping-calculator-button {
    display: inline-block;
    margin-top: 8px;
    color: #fff;
    font-size: 10px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ht-cart-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
    padding: 20px 0 23px;
    color: #fff;
}

.ht-cart-summary__total > span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.ht-cart-summary__total strong {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    text-align: right;
}


/* ============================================================
   12. CHECKOUT BUTTON
   ============================================================ */

.ht-cart-summary__checkout {
    width: 100%;
}

.ht-cart-summary__checkout .checkout-button,
.ht-cart-summary__checkout a.checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 57px;
    margin: 0 !important;
    padding: 15px 18px !important;
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px;
    text-align: center;
    text-transform: uppercase;
    transition:
        color var(--ht-transition),
        background var(--ht-transition),
        border-color var(--ht-transition),
        transform var(--ht-transition),
        box-shadow var(--ht-transition);
}

.ht-cart-summary__checkout .checkout-button:hover {
    border-color: #aaa !important;
    background: transparent !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255,255,255,.06);
}

.ht-cart-summary__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #aaa;
    font-size: 9px;
    letter-spacing: .5px;
}

.ht-cart-summary__note span {
    color: #fff;
    font-size: 13px;
}


/* ============================================================
   13. PREMIUM COUPON SECTION
   ============================================================ */

.ht-cart-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 125px;
    margin-top: 28px;
    padding: 25px 34px;
    border: 1px solid #e8e8e6;
    background:
        linear-gradient(115deg, #eeeeec, #f8f8f7 60%, #fff);
    transition: box-shadow var(--ht-transition);
}

.ht-cart-coupon:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,.045);
}

.ht-cart-coupon__content {
    min-width: 0;
}

.ht-cart-coupon__content h3 {
    margin: 0 0 7px;
    color: #111;
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    font-weight: 600;
}

.ht-cart-coupon__content p {
    margin: 0;
    color: #777;
    font-size: 10px;
    line-height: 1.7;
}

.ht-cart-coupon__form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: min(490px, 52%);
    margin: 0;
}

.ht-cart-coupon__form input.input-text {
    width: 100%;
    min-width: 0;
    height: 49px;
    padding: 0 17px;
    border: 1px solid #dededc;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    box-shadow: none;
    transition:
        border-color var(--ht-transition),
        box-shadow var(--ht-transition);
}

.ht-cart-coupon__form input.input-text:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,.045);
}

.ht-cart-coupon__form button {
    flex-shrink: 0;
    min-width: 135px;
    min-height: 49px;
    padding: 0 17px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        color var(--ht-transition),
        background var(--ht-transition),
        border-color var(--ht-transition),
        transform var(--ht-transition);
}

.ht-cart-coupon__form button:hover {
    border-color: #555;
    background: #fff;
    color: #111;
    transform: translateY(-2px);
}


/* ============================================================
   14. EMPTY CART — EDITORIAL DESIGN
   ============================================================ */

.ht-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 490px;
    padding: 65px 25px;
    border: 1px solid #e8e8e6;
    background:
        radial-gradient(
            ellipse at center,
            #fff 0%,
            #f7f7f5 75%
        );
    text-align: center;
}

.ht-cart-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-bottom: 28px;
    border: 1px solid #dededc;
    border-radius: 50%;
    background: #fff;
    color: #111;
    transition:
        transform .5s ease,
        background var(--ht-transition),
        color var(--ht-transition);
}

.ht-cart-empty:hover .ht-cart-empty__icon {
    transform: translateY(-6px);
    background: #111;
    color: #fff;
}

.ht-cart-empty__icon svg {
    width: 43px;
    height: 43px;
}

.ht-cart-empty__eyebrow {
    margin-bottom: 12px;
    color: #999;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}

.ht-cart-empty__title {
    margin: 0;
    color: #111;
    font-family: 'Cormorant Garamond', serif;
    font-size: 43px;
    font-weight: 600;
}

.ht-cart-empty__description {
    max-width: 450px;
    margin: 14px 0 27px;
    color: #777;
    font-size: 12px;
    line-height: 1.9;
}

.ht-cart-continue-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    min-height: 53px;
    padding: 0 27px;
    border: 1px solid #111;
    background: #111;
    color: #fff !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    transition:
        color var(--ht-transition),
        background var(--ht-transition),
        transform var(--ht-transition);
}

.ht-cart-continue-button:hover {
    background: #fff;
    color: #111 !important;
    transform: translateY(-3px);
}

.ht-cart-continue-button span {
    font-size: 17px;
    transition: transform var(--ht-transition);
}

.ht-cart-continue-button:hover span {
    transform: translateX(5px);
}


/* ============================================================
   15. GENERAL INTERACTION & FOCUS
   ============================================================ */

.ht-cart-page button,
.ht-cart-page a,
.ht-cart-page input {
    -webkit-tap-highlight-color: transparent;
}

.ht-cart-page button:focus-visible,
.ht-cart-page a:focus-visible,
.ht-cart-page input:focus-visible {
    outline: 2px solid #777;
    outline-offset: 3px;
}

.ht-cart-page button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ht-cart-page .blockUI.blockOverlay {
    background-color: rgba(255,255,255,.65) !important;
}


/* ============================================================
   16. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1500px) {

    .ht-cart-container {
        width: min(1500px, calc(100% - 140px));
    }

    .ht-cart-layout {
        grid-template-columns: minmax(0, 1fr) 410px;
        gap: 36px;
    }

    .ht-cart-item {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 32px;
    }

    .ht-cart-item__image {
        height: 205px;
    }

}


/* ============================================================
   17. LAPTOP RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {

    .ht-cart-container {
        width: calc(100% - 60px);
    }

    .ht-cart-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 22px;
    }

    .ht-cart-header {
        min-height: 270px;
        padding: 55px 50px;
    }

    .ht-cart-items__list {
        padding-inline: 23px;
    }

    .ht-cart-item {
        grid-template-columns: 145px minmax(0, 1fr);
        gap: 20px;
    }

    .ht-cart-item__image {
        height: 165px;
    }

    .ht-cart-item__name {
        font-size: 24px;
    }

    .ht-cart-item__bottom {
        grid-template-columns: 1fr auto;
    }

    .ht-cart-item__subtotal {
        display: none;
    }

    .ht-cart-summary__inner {
        padding: 30px 24px 25px;
    }

}


/* ============================================================
   18. TABLET RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .ht-cart-container {
        width: calc(100% - 40px);
    }

    .ht-cart-header {
        min-height: 245px;
        margin-bottom: 35px;
        padding: 45px 35px;
    }

    .ht-cart-title {
        font-size: 60px;
    }

    .ht-cart-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .ht-cart-summary {
        position: relative;
        top: auto;
        width: 100%;
    }

    .ht-cart-summary__inner {
        padding: 32px;
    }

    .ht-cart-item {
        grid-template-columns: 155px minmax(0, 1fr);
    }

    .ht-cart-item__image {
        height: 170px;
    }

    .ht-cart-item__bottom {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .ht-cart-item__subtotal {
        display: flex;
    }

    .ht-cart-coupon {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .ht-cart-coupon__form {
        width: 100%;
    }

}


/* ============================================================
   19. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .ht-cart-page {
        padding-bottom: 55px;
    }

    .ht-cart-container {
        width: calc(100% - 28px);
    }

    .ht-cart-header {
        min-height: 225px;
        padding: 35px 23px;
        margin-bottom: 25px;
    }

    .ht-cart-eyebrow {
        margin-bottom: 12px;
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .ht-cart-title {
        font-size: clamp(43px, 11vw, 56px);
        letter-spacing: -1px;
    }

    .ht-cart-description {
        max-width: 280px;
        margin-top: 12px;
        font-size: 10px;
        line-height: 1.8;
    }

    .ht-cart-header__count {
        position: absolute;
        right: 18px;
        bottom: 22px;
        width: 64px;
        height: 64px;
    }

    .ht-cart-header__count-label {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-cart-header__count-number {
        font-size: 25px;
    }

    .ht-cart-items__heading {
        min-height: 67px;
        padding-inline: 17px;
    }

    .ht-cart-items__heading h2 {
        font-size: 24px;
    }

    .ht-cart-items__heading span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-cart-items__list {
        padding-inline: 17px;
    }

    .ht-cart-item {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 14px;
        padding: 21px 0;
    }

    .ht-cart-item__image {
        height: 125px;
        padding: 5px;
    }

    .ht-cart-item__category {
        margin-bottom: 6px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-cart-item__name {
        font-size: 21px;
        line-height: 1.1;
    }

    .ht-cart-item__remove a.remove {
        width: 28px;
        height: 28px;
        font-size: 17px !important;
    }

    .ht-cart-item__meta {
        margin-top: 6px;
        font-size: 9px;
    }

    .ht-cart-item__bottom {
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 9px;
        margin-top: 16px;
    }

    .ht-cart-item__price-label,
    .ht-cart-item__subtotal-label,
    .ht-cart-item__quantity label {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .ht-cart-item__price-value {
        font-size: 12px;
    }

    .ht-cart-item__quantity {
        align-items: flex-end;
    }

    .ht-cart-item__quantity .quantity {
        width: 92px;
        height: 34px;
    }

    .ht-cart-item__quantity input.qty {
        height: 32px !important;
        font-size: 11px !important;
    }

    .ht-cart-item__subtotal {
        display: none;
    }

    .ht-cart-actions {
        min-height: 65px;
        flex-wrap: wrap;
        padding: 12px;
        gap: 6px;
    }

    .ht-cart-continue-shopping,
    .ht-cart-update-button {
        min-height: 39px;
        padding-inline: 9px;
        font-size: 8px;
        letter-spacing: .5px;
    }

    .ht-cart-summary__inner {
        padding: 27px 21px 23px;
    }

    .ht-cart-summary__title {
        margin-bottom: 20px;
        font-size: 29px;
    }

    .ht-cart-summary__subtotal,
    .ht-cart-summary__discount,
    .ht-cart-summary__shipping,
    .ht-cart-summary__fee,
    .ht-cart-summary__tax {
        font-size: 10px;
    }

    .ht-cart-summary__total strong {
        font-size: 28px;
    }

    .ht-cart-summary__checkout .checkout-button {
        min-height: 53px;
        font-size: 9px !important;
    }

    .ht-cart-coupon {
        gap: 17px;
        margin-top: 20px;
        padding: 23px 18px;
    }

    .ht-cart-coupon__content h3 {
        font-size: 23px;
    }

    .ht-cart-coupon__content p {
        font-size: 9px;
    }

    .ht-cart-coupon__form {
        gap: 7px;
    }

    .ht-cart-coupon__form input.input-text {
        height: 45px;
        padding-inline: 11px;
        font-size: 10px;
    }

    .ht-cart-coupon__form button {
        min-width: 105px;
        min-height: 45px;
        padding-inline: 9px;
        font-size: 8px;
    }

    .ht-cart-empty {
        min-height: 390px;
        padding: 40px 18px;
    }

    .ht-cart-empty__icon {
        width: 80px;
        height: 80px;
    }

    .ht-cart-empty__title {
        font-size: 34px;
    }

    .ht-cart-empty__description {
        font-size: 10px;
    }

}


/* ============================================================
   20. SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .ht-cart-container {
        width: calc(100% - 20px);
    }

    .ht-cart-header {
        padding-inline: 18px;
    }

    .ht-cart-title {
        font-size: 42px;
    }

    .ht-cart-item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 11px;
    }

    .ht-cart-item__image {
        height: 112px;
    }

    .ht-cart-item__name {
        font-size: 19px;
    }

    .ht-cart-item__bottom {
        gap: 6px;
    }

    .ht-cart-item__quantity .quantity {
        width: 82px;
    }

    .ht-cart-coupon__form button {
        min-width: 90px;
        font-size: 7px;
    }

}


/* ============================================================
   21. REDUCED MOTION ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ht-cart-page *,
    .ht-cart-page *::before,
    .ht-cart-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


/* ============================================================
   END: THE HATIM STORE — PREMIUM LUXURY CART
   Developed by Hatim Tech (HT)
   ============================================================ */








   
/* ============================================================
   THE HATIM STORE — PREMIUM CHECKOUT
   Developed by Hatim Tech (HT)
   Complete Checkout CSS
   ============================================================ */


/* ============================================================
   01. CHECKOUT FOUNDATION
   ============================================================ */

.ht-checkout-page {
    --ht-checkout-black: #111111;
    --ht-checkout-dark: #191919;
    --ht-checkout-muted: #777777;
    --ht-checkout-border: #e8e8e8;
    --ht-checkout-white: #ffffff;
    --ht-checkout-bg: #f7f7f6;

    width: 100%;
    padding: 64px 0 100px;
    background: var(--ht-checkout-bg);
    color: var(--ht-checkout-black);
    overflow: visible;
}

.ht-checkout-page *,
.ht-checkout-page *::before,
.ht-checkout-page *::after {
    box-sizing: border-box;
}

.ht-checkout-container {
    width: min(1440px, calc(100% - 80px));
    margin-inline: auto;
    overflow: visible;
}

.ht-checkout-page h1,
.ht-checkout-page h2,
.ht-checkout-page h3,
.ht-checkout-page p {
    margin-top: 0;
}

.ht-checkout-page button,
.ht-checkout-page input,
.ht-checkout-page select,
.ht-checkout-page textarea {
    font-family: inherit;
}


/* ============================================================
   02. EMPTY CART
   ============================================================ */

.ht-checkout-empty {
    max-width: 620px;
    margin: 70px auto;
    padding: 75px 35px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e8e8e8;
}

.ht-checkout-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 25px;
    color: #222222;
}

.ht-checkout-empty__icon svg {
    width: 100%;
    height: 100%;
}

.ht-checkout-empty__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: #888888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ht-checkout-empty h1 {
    margin-bottom: 12px;
    font-size: 34px;
    font-weight: 500;
}

.ht-checkout-empty p {
    color: #777777;
    font-size: 14px;
    line-height: 1.8;
}

.ht-checkout-empty__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 52px;
    margin-top: 20px;
    padding: 0 25px;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    transition: background .3s ease, color .3s ease;
}

.ht-checkout-empty__button:hover {
    background: #333333;
    color: #ffffff;
}


/* ============================================================
   03. CHECKOUT HEADER
   ============================================================ */

.ht-checkout-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
    animation: htCheckoutReveal .65s ease both;
}

.ht-checkout-eyebrow,
.ht-checkout-panel__eyebrow {
    display: block;
    color: #858585;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ht-checkout-title {
    margin: 9px 0 7px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(46px, 5vw, 66px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.8px;
}

.ht-checkout-description {
    margin: 0;
    color: #777777;
    font-size: 13px;
    line-height: 1.7;
}

.ht-checkout-header__secure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    background: #ffffff;
    color: #333333;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.ht-checkout-header__secure-icon {
    display: flex;
    width: 17px;
    height: 17px;
}

.ht-checkout-header__secure-icon svg {
    width: 100%;
    height: 100%;
}


/* ============================================================
   04. PROGRESS TRACKER
   ============================================================ */

.ht-checkout-progress {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 720px;
    margin-bottom: 38px;
    animation: htCheckoutReveal .7s ease both;
}

.ht-checkout-progress__step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ht-checkout-progress__number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #dddddd;
    border-radius: 50%;
    color: #888888;
    font-size: 10px;
    font-weight: 700;
    transition: all .3s ease;
}

.ht-checkout-progress__label {
    color: #999999;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ht-checkout-progress__step.is-completed .ht-checkout-progress__number,
.ht-checkout-progress__step.is-active .ht-checkout-progress__number {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.ht-checkout-progress__step.is-active .ht-checkout-progress__label {
    color: #111111;
}

.ht-checkout-progress__line {
    height: 1px;
    flex: 1;
    min-width: 25px;
    margin: 0 15px;
    background: #dedede;
}


/* ============================================================
   05. MAIN CHECKOUT GRID
   ============================================================ */

.ht-checkout-form {
    width: 100%;
    overflow: visible !important;
}

.ht-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    align-items: start;
    gap: 34px;
    width: 100%;
    overflow: visible !important;
}

.ht-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    overflow: visible;
}


/* ============================================================
   06. CUSTOMER INFORMATION PANELS
   ============================================================ */

.ht-checkout-panel {
    position: relative;
    padding: 30px 32px 32px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    transition: border-color .3s ease, box-shadow .3s ease;
    animation: htCheckoutReveal .65s ease both;
}

.ht-checkout-panel:hover {
    border-color: #d2d2d2;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .025);
}

.ht-checkout-panel__heading {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-bottom: 23px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ededed;
}

.ht-checkout-panel__number {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border: 1px solid #e5e5e5;
    color: #333333;
    font-size: 11px;
    font-weight: 700;
}

.ht-checkout-panel__heading-content {
    min-width: 0;
}

.ht-checkout-panel__heading-content h2 {
    margin: 5px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1;
}

.ht-checkout-panel__eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.ht-checkout-panel__body {
    width: 100%;
}


/* ============================================================
   07. WOOCOMMERCE FORM FIELDS
   ============================================================ */

.ht-checkout-page .woocommerce-billing-fields,
.ht-checkout-page .woocommerce-shipping-fields,
.ht-checkout-page .woocommerce-additional-fields {
    width: 100%;
}

.ht-checkout-page .woocommerce-billing-fields h3,
.ht-checkout-page .woocommerce-shipping-fields h3,
.ht-checkout-page .woocommerce-additional-fields h3 {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
}

.ht-checkout-page .form-row {
    width: 100%;
    margin: 0 0 19px;
    padding: 0;
}

.ht-checkout-page .form-row-first,
.ht-checkout-page .form-row-last {
    width: calc(50% - 10px);
}

.ht-checkout-page .form-row-first {
    float: left;
    clear: left;
}

.ht-checkout-page .form-row-last {
    float: right;
    clear: right;
}

.ht-checkout-page .form-row-wide {
    clear: both;
}

.ht-checkout-page .form-row label {
    display: block;
    margin-bottom: 8px;
    color: #333333;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

.ht-checkout-page .form-row label .required {
    color: #a34a4a;
    text-decoration: none;
}

.ht-checkout-page .input-text,
.ht-checkout-page input[type="text"],
.ht-checkout-page input[type="email"],
.ht-checkout-page input[type="tel"],
.ht-checkout-page input[type="number"],
.ht-checkout-page input[type="password"],
.ht-checkout-page select,
.ht-checkout-page textarea {
    display: block;
    width: 100%;
    min-height: 49px;
    padding: 12px 14px;
    border: 1px solid #dedede;
    border-radius: 0;
    outline: none;
    background: #ffffff;
    color: #222222;
    font-size: 12px;
    box-shadow: none;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.ht-checkout-page textarea {
    min-height: 110px;
    resize: vertical;
}

.ht-checkout-page .input-text::placeholder,
.ht-checkout-page input::placeholder,
.ht-checkout-page textarea::placeholder {
    color: #aaaaaa;
    opacity: 1;
}

.ht-checkout-page .input-text:focus,
.ht-checkout-page input:focus,
.ht-checkout-page select:focus,
.ht-checkout-page textarea:focus {
    border-color: #222222;
    background: #fdfdfd;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .045);
}

.ht-checkout-page .select2-container {
    width: 100% !important;
}

.ht-checkout-page .select2-container .select2-selection--single {
    height: 49px;
    border: 1px solid #dedede;
    border-radius: 0;
    background: #ffffff;
}

.ht-checkout-page .select2-container .select2-selection__rendered {
    padding-left: 14px;
    color: #222222;
    font-size: 12px;
    line-height: 47px;
}

.ht-checkout-page .select2-container .select2-selection__arrow {
    height: 47px;
    right: 8px;
}

.ht-checkout-page .select2-container--open .select2-selection--single {
    border-color: #222222;
}

.ht-checkout-page .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.ht-checkout-page .woocommerce-input-wrapper strong {
    display: block;
    padding: 13px;
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
    font-size: 12px;
}

.ht-checkout-page .woocommerce-invalid .input-text {
    border-color: #bd5555;
}

.ht-checkout-page .woocommerce-validated .input-text {
    border-color: #d8d8d8;
}

.ht-checkout-page .woocommerce-form__label-for-checkbox,
.ht-checkout-page .woocommerce-shipping-fields label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
}

.ht-checkout-page input[type="checkbox"] {
    accent-color: #111111;
}

.ht-checkout-page .woocommerce-privacy-policy-text {
    color: #777777;
    font-size: 11px;
    line-height: 1.7;
}


/* ============================================================
   08. RIGHT SIDEBAR — STICKY POSITIONING
   ============================================================ */

.ht-checkout-sidebar {
    position: sticky !important;
    top: 30px;
    align-self: start;
    width: 100%;
    min-width: 0;
    height: fit-content;
    z-index: 5;
    overflow: visible !important;
}

.ht-checkout-sidebar__inner {
    position: relative;
    width: 100%;
    padding: 27px 26px 21px;
    overflow: visible;
    background: #111111;
    border: 1px solid #292929;
    color: #ffffff;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .12);
    animation: htCheckoutSidebarReveal .75s cubic-bezier(.2, .7, .2, 1) both;
}


/* ============================================================
   09. SIDEBAR HEADING + LOCK ICON
   ============================================================ */

.ht-checkout-sidebar__heading {
    position: relative;
    padding-bottom: 21px;
    margin-bottom: 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.ht-checkout-sidebar__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: #b5b5b5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

/* CSS-drawn lock */
.ht-checkout-sidebar__eyebrow::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 10px;
    height: 9px;
    flex: 0 0 10px;
    margin-top: 4px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.ht-checkout-sidebar__eyebrow::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 1px;
    width: 7px;
    height: 8px;
    border: 1.5px solid #ffffff;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.ht-checkout-sidebar__heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1px;
}


/* ============================================================
   10. ORDER REVIEW — PRODUCT ROWS
   ============================================================ */

.ht-checkout-order-review {
    width: 100%;
    color: #ffffff;
}

.ht-checkout-order-review table {
    width: 100%;
    margin: 0 0 19px;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
}

.ht-checkout-order-review table th,
.ht-checkout-order-review table td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    background: transparent;
    color: #ffffff;
    font-size: 11px;
    vertical-align: top;
}

.ht-checkout-order-review table thead th {
    padding-top: 0;
    padding-bottom: 12px;
    color: #888888;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ht-checkout-order-review table th.product-name,
.ht-checkout-order-review table td.product-name {
    text-align: left;
}

.ht-checkout-order-review table th.product-total,
.ht-checkout-order-review table td.product-total {
    text-align: right;
    white-space: nowrap;
}

.ht-checkout-order-review table tbody tr {
    transition: background .25s ease;
}

.ht-checkout-order-review table tbody tr:hover td {
    background: rgba(255, 255, 255, .025);
}

.ht-checkout-order-review .product-name {
    color: #eeeeee;
    font-weight: 500;
    line-height: 1.6;
}

.ht-checkout-order-review .product-name strong,
.ht-checkout-order-review .product-name .product-quantity {
    color: #a9a9a9;
    font-weight: 500;
}

.ht-checkout-order-review .product-total {
    color: #ffffff;
    font-weight: 600;
}

.ht-checkout-order-review .variation,
.ht-checkout-order-review .wc-item-meta {
    margin: 5px 0 0;
    color: #999999;
    font-size: 10px;
    line-height: 1.6;
}

.ht-checkout-order-review .variation dt,
.ht-checkout-order-review .variation dd {
    display: inline;
    margin: 0 3px 0 0;
}

.ht-checkout-order-review .variation p {
    display: inline;
    margin: 0;
}


/* ============================================================
   11. SUBTOTAL / SHIPPING / ORDER TOTAL
   ============================================================ */

.ht-checkout-order-review table tfoot th,
.ht-checkout-order-review table tfoot td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    color: #bdbdbd;
    font-size: 11px;
    font-weight: 500;
}

.ht-checkout-order-review table tfoot th {
    text-align: left;
}

.ht-checkout-order-review table tfoot td {
    text-align: right;
    color: #ffffff;
    font-weight: 600;
}

.ht-checkout-order-review table tfoot .order-total th,
.ht-checkout-order-review table tfoot .order-total td {
    padding-top: 18px;
    padding-bottom: 18px;
    border-bottom: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.ht-checkout-order-review table tfoot .order-total .amount {
    font-size: 23px;
    letter-spacing: -.4px;
}

.ht-checkout-order-review table tfoot .woocommerce-shipping-totals td {
    line-height: 1.7;
}

.ht-checkout-order-review .woocommerce-shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-checkout-order-review .woocommerce-shipping-methods li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #dddddd;
    font-size: 10px;
}

.ht-checkout-order-review .woocommerce-shipping-methods input {
    margin-top: 2px;
    accent-color: #ffffff;
}

.ht-checkout-order-review .woocommerce-shipping-destination {
    color: #999999;
    font-size: 10px;
}


/* ============================================================
   12. PAYMENT METHODS — DARK REFINED PANEL
   ============================================================ */

.ht-checkout-order-review #payment {
    margin-top: 21px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
}

.ht-checkout-order-review #payment::before {
    content: "SELECT PAYMENT METHOD";
    display: block;
    padding-bottom: 13px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #a6a6a6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ht-checkout-order-review #payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ht-checkout-order-review #payment ul.payment_methods > li {
    position: relative;
    padding: 13px 13px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: #191919;
    color: #eeeeee;
    transition: border-color .25s ease, background .25s ease;
}

.ht-checkout-order-review #payment ul.payment_methods > li:hover {
    border-color: rgba(255, 255, 255, .38);
    background: #202020;
}

.ht-checkout-order-review #payment ul.payment_methods > li input[type="radio"] {
    margin: 0 8px 0 0;
    accent-color: #ffffff;
    vertical-align: middle;
}

.ht-checkout-order-review #payment ul.payment_methods > li label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 25px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
}

.ht-checkout-order-review #payment ul.payment_methods > li img {
    display: inline-block;
    max-width: 65px;
    max-height: 23px;
    margin-left: 5px;
    object-fit: contain;
    vertical-align: middle;
    background: #ffffff;
}

.ht-checkout-order-review #payment div.payment_box {
    margin: 13px 0 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0;
    background: #252525;
    color: #c7c7c7;
    font-size: 10px;
    line-height: 1.7;
}

.ht-checkout-order-review #payment div.payment_box::before {
    display: none;
}

.ht-checkout-order-review #payment div.payment_box p {
    margin: 0 0 8px;
    color: #c7c7c7;
    font-size: 10px;
    line-height: 1.7;
}

.ht-checkout-order-review #payment div.payment_box p:last-child {
    margin-bottom: 0;
}

.ht-checkout-order-review #payment div.payment_box input,
.ht-checkout-order-review #payment div.payment_box select,
.ht-checkout-order-review #payment div.payment_box textarea {
    border-color: #555555;
    background: #171717;
    color: #ffffff;
}

.ht-checkout-order-review #payment .payment_method_cod {
    background: #191919;
}


/* ============================================================
   13. TERMS & PRIVACY
   ============================================================ */

.ht-checkout-order-review #payment .woocommerce-terms-and-conditions-wrapper {
    padding: 13px 0 0;
    color: #999999;
    font-size: 10px;
    line-height: 1.7;
}

.ht-checkout-order-review #payment .woocommerce-terms-and-conditions-wrapper a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ht-checkout-order-review #payment .form-row {
    margin-bottom: 0;
}

.ht-checkout-order-review #payment .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #bdbdbd;
    font-size: 10px;
    line-height: 1.6;
}

.ht-checkout-order-review #payment .woocommerce-form__label-for-checkbox input {
    margin-top: 3px;
    accent-color: #ffffff;
}


/* ============================================================
   14. WHITE PLACE ORDER BUTTON
   ============================================================ */

.ht-checkout-order-review #payment .place-order {
    padding: 17px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.ht-checkout-order-review #payment #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 53px;
    padding: 13px 20px;
    border: 1px solid #ffffff;
    border-radius: 0;
    outline: none;
    background: #ffffff;
    color: #111111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.ht-checkout-order-review #payment #place_order:hover {
    border-color: #bdbdbd;
    background: #dcdcdc;
    color: #111111;
    transform: translateY(-2px);
}

.ht-checkout-order-review #payment #place_order:active {
    transform: translateY(0);
}

.ht-checkout-order-review #payment #place_order:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}


/* ============================================================
   15. SIDEBAR TRUST STRIP
   ============================================================ */

.ht-checkout-sidebar__trust {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 17px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.ht-checkout-sidebar__trust > span {
    display: grid;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
}

.ht-checkout-sidebar__trust p {
    margin: 0;
    color: #929292;
    font-size: 10px;
    line-height: 1.7;
}


/* ============================================================
   16. WOOCOMMERCE NOTICES
   ============================================================ */

.ht-checkout-page .woocommerce-error,
.ht-checkout-page .woocommerce-info,
.ht-checkout-page .woocommerce-message {
    padding: 15px 18px 15px 45px;
    margin: 0 0 22px;
    border: 1px solid #e4e4e4;
    border-top: 2px solid #222222;
    border-radius: 0;
    background: #ffffff;
    color: #333333;
    font-size: 12px;
    line-height: 1.7;
}

.ht-checkout-page .woocommerce-error::before,
.ht-checkout-page .woocommerce-info::before,
.ht-checkout-page .woocommerce-message::before {
    color: #222222;
}


/* ============================================================
   17. ANIMATIONS
   ============================================================ */

@keyframes htCheckoutReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes htCheckoutSidebarReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* ============================================================
   18. TABLET RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .ht-checkout-container {
        width: calc(100% - 50px);
    }

    .ht-checkout-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 22px;
    }

    .ht-checkout-sidebar__inner {
        padding: 24px 21px 19px;
    }

    .ht-checkout-panel {
        padding: 26px 24px;
    }

    .ht-checkout-sidebar__heading h2 {
        font-size: 31px;
    }
}


/* ============================================================
   19. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    .ht-checkout-page {
        padding: 38px 0 65px;
    }

    .ht-checkout-container {
        width: calc(100% - 32px);
    }

    .ht-checkout-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 28px;
    }

    .ht-checkout-title {
        font-size: 49px;
    }

    .ht-checkout-description {
        max-width: 420px;
        font-size: 12px;
    }

    .ht-checkout-header__secure {
        padding: 10px 13px;
    }

    .ht-checkout-progress {
        margin-bottom: 27px;
    }

    .ht-checkout-progress__step {
        gap: 6px;
    }

    .ht-checkout-progress__number {
        width: 26px;
        height: 26px;
        font-size: 9px;
    }

    .ht-checkout-progress__label {
        font-size: 7px;
        letter-spacing: .5px;
    }

    .ht-checkout-progress__line {
        min-width: 12px;
        margin: 0 7px;
    }

    .ht-checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .ht-checkout-main {
        gap: 17px;
    }

    .ht-checkout-panel {
        padding: 23px 19px;
    }

    .ht-checkout-panel__heading {
        gap: 12px;
        padding-bottom: 18px;
        margin-bottom: 20px;
    }

    .ht-checkout-panel__number {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 10px;
    }

    .ht-checkout-panel__heading-content h2 {
        font-size: 24px;
    }

    .ht-checkout-panel__eyebrow {
        font-size: 8px;
    }

    .ht-checkout-page .form-row-first,
    .ht-checkout-page .form-row-last {
        float: none;
        width: 100%;
    }

    .ht-checkout-page .form-row {
        margin-bottom: 15px;
    }

    /* Sticky is intentionally disabled on mobile */
    .ht-checkout-sidebar {
        position: relative !important;
        top: auto !important;
        align-self: stretch;
        width: 100%;
        height: auto;
    }

    .ht-checkout-sidebar__inner {
        padding: 25px 21px 20px;
    }

    .ht-checkout-sidebar__heading {
        padding-bottom: 18px;
        margin-bottom: 18px;
    }

    .ht-checkout-sidebar__heading h2 {
        font-size: 32px;
    }

    .ht-checkout-order-review table th,
    .ht-checkout-order-review table td {
        font-size: 10px;
    }

    .ht-checkout-order-review table tfoot .order-total .amount {
        font-size: 21px;
    }
}


/* ============================================================
   20. SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .ht-checkout-container {
        width: calc(100% - 24px);
    }

    .ht-checkout-title {
        font-size: 43px;
    }

    .ht-checkout-progress__label {
        font-size: 6px;
    }

    .ht-checkout-progress__line {
        min-width: 8px;
        margin: 0 5px;
    }

    .ht-checkout-panel {
        padding: 20px 15px;
    }

    .ht-checkout-sidebar__inner {
        padding: 22px 16px 18px;
    }

    .ht-checkout-sidebar__heading h2 {
        font-size: 29px;
    }

    .ht-checkout-order-review table th,
    .ht-checkout-order-review table td {
        padding: 10px 0;
        font-size: 9px;
    }
}


/* ============================================================
   21. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ht-checkout-page *,
    .ht-checkout-page *::before,
    .ht-checkout-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   END: PREMIUM CHECKOUT CSS
   ============================================================ */


/* ============================================================
   START: HT — PREMIUM CHECKOUT VALIDATION NOTICE
   ============================================================ */

.woocommerce-NoticeGroup-checkout {
    margin: 0 0 20px !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error {
    list-style: none !important;
    margin: 0 !important;
    padding: 13px 18px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-left: 3px solid #a33 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error::before,
.woocommerce-NoticeGroup-checkout .woocommerce-error::after {
    display: none !important;
    content: none !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li {
    display: block !important;
    margin: 3px 0 !important;
    padding: 0 !important;
    color: #333 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li a {
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 600 !important;
}

/* Field Validation */

.woocommerce-invalid input,
.woocommerce-invalid select,
.woocommerce-invalid textarea {
    border-color: #a33 !important;
}

.woocommerce-invalid label {
    color: #222 !important;
}

/* Inline Error Messages */

.woocommerce-invalid .woocommerce-error,
.woocommerce-invalid .woocommerce-invalid-required-field {
    color: #a33 !important;
    font-size: 11px !important;
}

/* ============================================================
   END: HT — PREMIUM CHECKOUT VALIDATION NOTICE
   ============================================================ */




   
/* ============================================================
   THE HATIM STORE — PREMIUM THANK YOU PAGE
   Developed by Hatim Tech (HT)
   @package HatimTechCore
   ============================================================ */


/* ============================================================
   01. ROOT VARIABLES
   ============================================================ */

:root {
    --ht-ty-black: #111111;
    --ht-ty-dark: #222222;
    --ht-ty-white: #ffffff;
    --ht-ty-bg: #f7f7f5;
    --ht-ty-border: #e9e9e6;
    --ht-ty-muted: #777777;
    --ht-ty-soft: #f1f1ee;
    --ht-ty-serif: "Cormorant Garamond", Georgia, serif;
    --ht-ty-sans: "Montserrat", Arial, sans-serif;
}


/* ============================================================
   02. MAIN PAGE
   ============================================================ */

.ht-thankyou-page {
    width: 100%;
    min-height: 700px;
    padding: 85px 24px 110px;
    background: var(--ht-ty-bg);
    color: var(--ht-ty-black);
    font-family: var(--ht-ty-sans);
    box-sizing: border-box;
}

.ht-thankyou-page *,
.ht-thankyou-page *::before,
.ht-thankyou-page *::after {
    box-sizing: border-box;
}

.ht-thankyou-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* ============================================================
   03. SUCCESS HEADER
   ============================================================ */

.ht-thankyou-success {
    text-align: center;
    padding: 0 20px 55px;
}

.ht-thankyou-check {
    width: 66px;
    height: 66px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #222;
    border-radius: 50%;
    background: #fff;
}

.ht-thankyou-check span {
    width: 19px;
    height: 10px;
    display: block;
    border-left: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(-45deg) translate(2px, -2px);
}

.ht-thankyou-eyebrow {
    margin: 0 0 13px;
    color: #777;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ht-thankyou-success h1 {
    margin: 0;
    color: #111;
    font-family: var(--ht-ty-serif);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.8px;
}

.ht-thankyou-message {
    max-width: 510px;
    margin: 17px auto 0;
    color: #777;
    font-size: 13px;
    line-height: 1.9;
    font-weight: 400;
}

.ht-thankyou-order-reference {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 27px;
    padding: 15px 34px;
    border: 1px solid var(--ht-ty-border);
    background: #fff;
}

.ht-thankyou-order-reference span {
    color: #888;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.ht-thankyou-order-reference strong {
    color: #111;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* ============================================================
   04. ORDER INFORMATION STRIP
   ============================================================ */

.ht-thankyou-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 55px;
    border-top: 1px solid var(--ht-ty-border);
    border-bottom: 1px solid var(--ht-ty-border);
    background: #fff;
}

.ht-thankyou-info-item {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px;
    text-align: center;
}

.ht-thankyou-info-item + .ht-thankyou-info-item {
    border-left: 1px solid var(--ht-ty-border);
}

.ht-thankyou-info-item span {
    color: #888;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ht-thankyou-info-item strong {
    color: #111;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   05. MAIN TWO COLUMN LAYOUT
   ============================================================ */

.ht-thankyou-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
    gap: 28px;
    align-items: start;
}


/* ============================================================
   06. SUMMARY & DETAILS PANELS
   ============================================================ */

.ht-thankyou-summary,
.ht-thankyou-details {
    min-width: 0;
    padding: 35px;
    border: 1px solid var(--ht-ty-border);
    background: #fff;
}

.ht-thankyou-section-heading {
    padding-bottom: 25px;
    border-bottom: 1px solid var(--ht-ty-border);
}

.ht-thankyou-section-heading > span,
.ht-thankyou-next-steps > span {
    display: block;
    margin-bottom: 10px;
    color: #999;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.ht-thankyou-section-heading h2 {
    margin: 0;
    color: #111;
    font-family: var(--ht-ty-serif);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
}


/* ============================================================
   07. PRODUCT ROWS
   ============================================================ */

.ht-thankyou-products {
    width: 100%;
}

.ht-thankyou-product {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 17px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--ht-ty-border);
}

.ht-thankyou-product-image {
    width: 76px;
    height: 94px;
    overflow: hidden;
    background: var(--ht-ty-soft);
}

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

.ht-thankyou-product-details {
    min-width: 0;
}

.ht-thankyou-product-details h3 {
    margin: 0 0 9px;
    color: #171717;
    font-family: var(--ht-ty-serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.ht-thankyou-product-details > span {
    display: block;
    color: #888;
    font-size: 10px;
    line-height: 1.7;
}

.ht-thankyou-product-meta {
    margin-top: 7px;
    color: #777;
    font-size: 10px;
}

.ht-thankyou-product-meta ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-thankyou-product-meta li {
    margin: 3px 0;
}

.ht-thankyou-product-price {
    color: #111;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


/* ============================================================
   08. PRICE BREAKDOWN
   ============================================================ */

.ht-thankyou-totals {
    padding-top: 23px;
}

.ht-thankyou-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
}

.ht-thankyou-total-row span {
    color: #777;
    font-size: 11px;
    font-weight: 400;
}

.ht-thankyou-total-row strong {
    color: #222;
    font-size: 11px;
    font-weight: 600;
}

.ht-thankyou-discount strong {
    color: #333;
}

.ht-thankyou-grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 17px;
    padding: 20px 0 0;
    border-top: 1px solid #222;
}

.ht-thankyou-grand-total span {
    color: #111;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}

.ht-thankyou-grand-total strong {
    color: #111;
    font-family: var(--ht-ty-serif);
    font-size: 28px;
    font-weight: 600;
}


/* ============================================================
   09. DELIVERY DETAILS
   ============================================================ */

.ht-thankyou-detail-block {
    padding: 23px 0;
    border-bottom: 1px solid var(--ht-ty-border);
}

.ht-thankyou-detail-block:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ht-thankyou-detail-block > span {
    display: block;
    margin-bottom: 10px;
    color: #999;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ht-thankyou-detail-block strong {
    display: block;
    color: #171717;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

.ht-thankyou-detail-block p {
    margin: 5px 0 0;
    color: #777;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.9;
    overflow-wrap: anywhere;
}


/* ============================================================
   10. NEXT STEPS SECTION
   ============================================================ */

.ht-thankyou-next-steps {
    margin-top: 28px;
    padding: 40px 30px;
    border: 1px solid var(--ht-ty-border);
    background: #fff;
    text-align: center;
}

.ht-thankyou-next-steps h2 {
    margin: 0;
    color: #111;
    font-family: var(--ht-ty-serif);
    font-size: 38px;
    font-weight: 500;
}

.ht-thankyou-next-steps p {
    max-width: 570px;
    margin: 13px auto 0;
    color: #777;
    font-size: 11px;
    line-height: 2;
}


/* ============================================================
   11. ACTION BUTTONS
   ============================================================ */

.ht-thankyou-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.ht-thankyou-actions a {
    min-width: 190px;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border: 1px solid #111;
    font-family: var(--ht-ty-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.ht-thankyou-shop-button {
    background: #111;
    color: #fff !important;
}

.ht-thankyou-shop-button:hover {
    background: #333;
    border-color: #333;
    color: #fff !important;
}

.ht-thankyou-account-button {
    background: transparent;
    color: #111 !important;
}

.ht-thankyou-account-button:hover {
    background: #111;
    color: #fff !important;
}


/* ============================================================
   12. INVALID ORDER PAGE
   ============================================================ */

.ht-thankyou-invalid {
    max-width: 650px;
    margin: 50px auto;
    padding: 65px 30px;
    border: 1px solid var(--ht-ty-border);
    background: #fff;
    text-align: center;
}

.ht-thankyou-invalid-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid #222;
    border-radius: 50%;
    font-family: var(--ht-ty-serif);
    font-size: 28px;
}

.ht-thankyou-invalid h1 {
    margin: 0;
    font-family: var(--ht-ty-serif);
    font-size: 40px;
    font-weight: 500;
}

.ht-thankyou-invalid p {
    margin: 15px 0 25px;
    color: #777;
    font-size: 12px;
    line-height: 1.8;
}

.ht-thankyou-invalid a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}


/* ============================================================
   13. WOOCOMMERCE COMPATIBILITY
   ============================================================ */

.ht-thankyou-page .woocommerce-notice,
.ht-thankyou-page .woocommerce-info {
    margin-bottom: 20px;
}

.ht-thankyou-page .woocommerce-order {
    width: 100%;
}

.ht-thankyou-page .woocommerce-customer-details,
.ht-thankyou-page .woocommerce-order-details {
    display: none;
}


/* ============================================================
   14. TABLET RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .ht-thankyou-page {
        padding: 65px 20px 80px;
    }

    .ht-thankyou-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ht-thankyou-summary,
    .ht-thankyou-details {
        padding: 30px;
    }

}


/* ============================================================
   15. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .ht-thankyou-page {
        min-height: auto;
        padding: 48px 15px 65px;
    }

    .ht-thankyou-success {
        padding: 0 5px 38px;
    }

    .ht-thankyou-check {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .ht-thankyou-eyebrow {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .ht-thankyou-success h1 {
        font-size: 42px;
        line-height: 1.05;
    }

    .ht-thankyou-message {
        font-size: 11px;
        line-height: 1.8;
    }

    .ht-thankyou-order-reference {
        margin-top: 22px;
        padding: 13px 25px;
    }

    .ht-thankyou-info {
        margin-bottom: 25px;
    }

    .ht-thankyou-info-item {
        min-height: 82px;
        padding: 10px 5px;
        gap: 7px;
    }

    .ht-thankyou-info-item span {
        font-size: 8px;
        letter-spacing: .7px;
    }

    .ht-thankyou-info-item strong {
        font-size: 10px;
    }

    .ht-thankyou-layout {
        gap: 16px;
    }

    .ht-thankyou-summary,
    .ht-thankyou-details {
        padding: 23px 18px;
    }

    .ht-thankyou-section-heading {
        padding-bottom: 20px;
    }

    .ht-thankyou-section-heading h2 {
        font-size: 30px;
    }

    .ht-thankyou-product {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 12px;
        padding: 17px 0;
    }

    .ht-thankyou-product-image {
        width: 65px;
        height: 80px;
    }

    .ht-thankyou-product-details h3 {
        font-size: 18px;
    }

    .ht-thankyou-product-details > span {
        font-size: 9px;
    }

    .ht-thankyou-product-price {
        grid-column: 2;
        margin-top: -5px;
        font-size: 11px;
    }

    .ht-thankyou-grand-total strong {
        font-size: 25px;
    }

    .ht-thankyou-next-steps {
        margin-top: 16px;
        padding: 30px 18px;
    }

    .ht-thankyou-next-steps h2 {
        font-size: 32px;
    }

    .ht-thankyou-next-steps p {
        font-size: 10px;
    }

    .ht-thankyou-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 22px;
    }

    .ht-thankyou-actions a {
        width: 100%;
        min-height: 48px;
    }

    .ht-thankyou-invalid {
        margin: 15px auto;
        padding: 45px 20px;
    }

    .ht-thankyou-invalid h1 {
        font-size: 34px;
    }

}


/* ============================================================
   END: HT — PREMIUM THANK YOU PAGE CSS
   ============================================================ */







/* ============================================================
 * START: HT CHECKOUT — PREMIUM COUPON NOTICE
 * Developed by Hatim Tech (HT)
 * ============================================================ */

.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin: 0 0 28px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 19px 22px;
    background: #f7f6f2;
    border: 1px solid #e5e3dd;
    border-left: 3px solid #171717;
    border-radius: 0;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .25px;
    box-shadow: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
    display: inline-block;
    color: #111;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #777;
    transition: color .25s ease, border-color .25s ease;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
    color: #777;
    border-color: #111;
}

/* Coupon Form */

.woocommerce-checkout form.checkout_coupon {
    margin: -12px 0 30px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e3dd;
    border-radius: 0;
}

.woocommerce-checkout form.checkout_coupon p {
    margin-bottom: 15px;
    color: #555;
    font-size: 12px;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
    width: 65%;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
    width: 32%;
}

.woocommerce-checkout form.checkout_coupon input.input-text {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dedbd4;
    border-radius: 0;
    background: #fff;
    color: #111;
    font-size: 12px;
    box-shadow: none;
}

.woocommerce-checkout form.checkout_coupon input.input-text:focus {
    border-color: #111;
    outline: none;
}

.woocommerce-checkout form.checkout_coupon button.button {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
}

.woocommerce-checkout form.checkout_coupon button.button:hover {
    background: #fff;
    color: #111;
}

/* Mobile */

@media (max-width: 600px) {

    .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
        align-items: flex-start;
        padding: 15px;
        gap: 8px;
        font-size: 11px;
    }

    .woocommerce-checkout form.checkout_coupon {
        padding: 17px;
    }

    .woocommerce-checkout form.checkout_coupon .form-row-first,
    .woocommerce-checkout form.checkout_coupon .form-row-last {
        float: none;
        width: 100%;
    }

}

/* ============================================================
 * END: HT CHECKOUT — PREMIUM COUPON NOTICE
 * ============================================================ */






 /* ============================================================
    THE HATIM STORE — PREMIUM CATEGORY SECTIONS
    @package HatimTechCore
    @author Hatim Tech
    Developed by Hatim Tech (HT)
============================================================ */


/* ============================================================
   START — THS PREMIUM CENTERED CATEGORY HEADER
   THE HATIM STORE | HatimTechCore
   ============================================================ */

/* CATEGORY SECTION */

.ht-shop-category-section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 55px 50px 60px;
    box-sizing: border-box;

    animation: htCategoryReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CATEGORY HEADING — CENTERED */

.ht-shop-category-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 19px !important;
    width: 100%;
    margin: 0 0 38px !important;
    position: relative;
    text-align: center !important;
}

/* CATEGORY TITLE */

.ht-shop-category-heading__title {
    order: 1;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: clamp(36px, 4vw, 52px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.2px !important;
    text-align: center !important;

    transition: color 0.45s ease;
}

/* REMOVE OLD DIVIDER */

.ht-shop-category-heading__divider {
    display: none !important;
}

/* PREMIUM VIEW ALL BUTTON */

.ht-shop-category-heading__view-all {
    order: 2;
    flex: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 145px;
    min-height: 46px;
    padding: 0 24px !important;

    background: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 2px !important;

    color: #ffffff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.7px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    transition:
        background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.5s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease !important;
}

/* REMOVE BUTTON ARROW */

.ht-shop-category-heading__view-all span {
    display: none !important;
}

/* PREMIUM BUTTON HOVER */

.ht-shop-category-heading__view-all:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

/* BUTTON CLICK FEEDBACK */

.ht-shop-category-heading__view-all:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

/* KEYBOARD ACCESSIBILITY */

.ht-shop-category-heading__view-all:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

/* CATEGORY GRID */

.ht-shop-category-section .ht-shop-product-grid {
    width: 100%;
    margin-top: 0;
}

/* ENTRANCE ANIMATION */

@keyframes htCategoryReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

/* TABLET */

@media (max-width: 1024px) {

    .ht-shop-category-section {
        padding: 45px 30px 50px;
    }

    .ht-shop-category-heading {
        gap: 17px !important;
        margin-bottom: 30px !important;
    }

    .ht-shop-category-heading__title {
        font-size: 43px !important;
    }
}

/* MOBILE */

@media (max-width: 600px) {

    .ht-shop-category-section {
        padding: 35px 18px 40px;
    }

    .ht-shop-category-heading {
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    .ht-shop-category-heading__title {
        font-size: clamp(31px, 8vw, 38px) !important;
        letter-spacing: -0.8px !important;
    }

    .ht-shop-category-heading__view-all {
        min-width: 130px;
        min-height: 42px;
        padding: 0 19px !important;
        font-size: 9px !important;
        letter-spacing: 1.4px !important;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {

    .ht-shop-category-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ht-shop-category-heading__title {
        font-size: 30px !important;
    }

    .ht-shop-category-heading__view-all {
        min-height: 40px;
        min-width: 124px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .ht-shop-category-section {
        animation: none !important;
    }

    .ht-shop-category-heading *,
    .ht-shop-category-heading *::before,
    .ht-shop-category-heading *::after {
        transition: none !important;
    }
}

/* ============================================================
   END — THS PREMIUM CENTERED CATEGORY HEADER
   ============================================================ */







/* THE HATIM STORE — Animated Brand Identity */

.ht-op-brand {
    display: inline-block;
    position: relative;
    margin: 0 auto 42px;
    padding: 0 0 13px;
    color: #fff;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16, 1, .3, 1);
}

#ht-order-processing.ht-op-active .ht-op-brand {
    opacity: 1;
    transform: translateY(0);
}

.ht-op-brand::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: rgba(255,255,255,.85);
    transform: translateX(-50%);
    transition: width 1s cubic-bezier(.16, 1, .3, 1) .35s;
}

#ht-order-processing.ht-op-active .ht-op-brand::after {
    width: 100%;
}

.ht-op-brand span {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: none;
}

#ht-order-processing.ht-op-active .ht-op-brand span {
    animation: htBrandLetterReveal .55s cubic-bezier(.16, 1, .3, 1) forwards;
}

#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(1) { animation-delay: .10s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(2) { animation-delay: .15s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(3) { animation-delay: .20s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(4) { animation-delay: .25s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(5) { animation-delay: .30s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(6) { animation-delay: .35s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(7) { animation-delay: .40s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(8) { animation-delay: .45s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(9) { animation-delay: .50s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(10) { animation-delay: .55s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(11) { animation-delay: .60s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(12) { animation-delay: .65s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(13) { animation-delay: .70s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(14) { animation-delay: .75s; }
#ht-order-processing.ht-op-active .ht-op-brand span:nth-child(15) { animation-delay: .80s; }

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

@media (max-width: 600px) {
    .ht-op-brand {
        font-size: 12px;
        letter-spacing: 3.5px;
        margin-bottom: 36px;
    }
}


/* THE HATIM STORE — Animated Brand Identity */






/* ================================================================
   START: HT TOP ROW — PREMIUM EDITORIAL BUTTON ANIMATION
   Package: HatimTechCore
   Developed by Hatim Tech (HT)
================================================================ */

.ht-lux-header .ht-lux-get-website-button {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;

    transition:
        color .45s cubic-bezier(.22, 1, .36, 1),
        border-color .45s ease !important;
}

/* WHITE BACKGROUND ANIMATION */

.ht-lux-header .ht-lux-get-website-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: #ffffff;

    transform: scaleX(0);
    transform-origin: right center;

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* HOVER BACKGROUND */

.ht-lux-header .ht-lux-get-website-button:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}

/* HOVER TEXT */

.ht-lux-header .ht-lux-get-website-button:hover {
    background: #111111 !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

/* ARROW ANIMATION */

.ht-lux-header .ht-lux-get-website-button .ht-lux-cta-arrow {
    position: relative;
    z-index: 2;

    color: inherit !important;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.ht-lux-header .ht-lux-get-website-button:hover .ht-lux-cta-arrow {
    transform: translateX(5px);
}

/* KEYBOARD ACCESSIBILITY */

.ht-lux-header .ht-lux-get-website-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

/* ================================================================
   END: HT TOP ROW — PREMIUM EDITORIAL BUTTON ANIMATION
================================================================ */






/* START: HT 3D ICON ROTATION */

.ht-lux-navigation__actions .ht-lux-icon-button {
    perspective: 1000px;
    transform-style: preserve-3d;
    will-change: transform;
}

.ht-lux-navigation__actions .ht-lux-icon-button svg {
    transform-style: preserve-3d;
    backface-visibility: visible;
}

/* END: HT 3D ICON ROTATION */





/* START: HT THANK YOU CHECK ANIMATION */

.ht-thankyou-check {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 28px !important;
    border: 0 !important;
    background: transparent !important;
}

.ht-thankyou-check__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ht-thankyou-check__circle {
    fill: none;
    stroke: #171717;
    stroke-width: 1;
    stroke-dasharray: 196;
    stroke-dashoffset: 196;
}

.ht-thankyou-check__tick {
    fill: none;
    stroke: #171717;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
}

.ht-thankyou-check.ht-check-animate {
    animation: htCheckPop .65s cubic-bezier(.16, 1, .3, 1) both;
}

.ht-thankyou-check.ht-check-animate .ht-thankyou-check__circle {
    animation: htDrawCircle 1s ease forwards;
}

.ht-thankyou-check.ht-check-animate .ht-thankyou-check__tick {
    animation: htDrawTick .65s ease 1s forwards;
}

@keyframes htDrawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes htDrawTick {
    to { stroke-dashoffset: 0; }
}

@keyframes htCheckPop {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.7);
    }
    70% {
        opacity: 1;
        transform: translateY(-3px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* END: HT THANK YOU CHECK ANIMATION */




/* ================================================================
   START: THS — PREMIUM BACK TO TOP REVEAL
   Developed by Hatim Tech (HT)
================================================================ */

.ht-lux-back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    translate: 0 22px;
    scale: 0.94;

    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.85s !important;

    will-change: opacity, translate, scale;
}

/* START: Button smoothly appears near footer */

/* START: BUTTON REVEAL */

.ht-lux-back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    translate: 0 0;
    scale: 1;

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s;
}

/* END: BUTTON REVEAL */


/* START: PREMIUM HOVER RESPONSE */

.ht-lux-back-to-top.is-visible:hover {
    translate: 0 -4px;
    scale: 1.04;
}

/* END: PREMIUM HOVER RESPONSE */


/* START: REDUCED MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ht-lux-back-to-top,
    .ht-lux-back-to-top.is-visible {
        transition-duration: 0.01ms !important;
        translate: 0 0;
        scale: 1;
    }
}

/* END: REDUCED MOTION ACCESSIBILITY */
/* ================================================================
   END: THS — PREMIUM BACK TO TOP REVEAL
================================================================ */






/* ============================================================
   FAQ LIGHTWEIGHT ANIMATION — START
   ============================================================ */

.ths-faq-page .ths-policy-content details > p {
    transition:
        opacity 260ms ease,
        transform 260ms ease !important;
}

.ths-faq-page .ths-policy-content details[open] > p {
    opacity: 1;
    transform: translateY(0);
}

/* Plus icon animation */

.ths-faq-page .ths-policy-content details > summary > span {
    transition:
        transform 260ms ease,
        color 260ms ease,
        background-color 260ms ease !important;
}

.ths-faq-page .ths-policy-content details[open] > summary > span {
    transform: rotate(45deg);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .ths-faq-page .ths-policy-content details > p,
    .ths-faq-page .ths-policy-content details > summary > span {
        transition: none !important;
    }
}

/* ============================================================
   FAQ LIGHTWEIGHT ANIMATION — END
   ============================================================ */






/* ============================================================
   THS — MOBILE FOOTER ACCORDION
   Existing footer content preserved
============================================================ */

@media (max-width: 767px) {

    #ht-site-footer .ht-lux-footer__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    #ht-site-footer .ht-lux-footer__column {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255,255,255,.35);
    }

    #ht-site-footer .ht-lux-footer__heading {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 64px;
        margin: 0 !important;
        cursor: pointer;
    }

    /* Premium plus button */

    #ht-site-footer .ht-footer-mobile-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 27px;
        width: 27px;
        height: 27px;
        margin-left: 15px;
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 50%;
        color: #fff;
        font-size: 19px;
        font-weight: 300;
        line-height: 1;
        transition: transform .3s ease, background .3s ease;
    }

    #ht-site-footer .ht-lux-footer__column.is-mobile-open
    .ht-footer-mobile-plus {
        transform: rotate(45deg);
        background: rgba(255,255,255,.12);
    }

    /* Hide content until opened */

    #ht-site-footer .ht-lux-footer__column
    .ht-footer-mobile-content {
        display: none !important;
        padding: 0 0 22px !important;
    }

    #ht-site-footer .ht-lux-footer__column.is-mobile-open
    .ht-footer-mobile-content {
        display: block !important;
    }

    #ht-site-footer .ht-lux-footer__links {
        display: flex !important;
        flex-direction: column !important;
        gap: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ht-site-footer .ht-lux-footer__information-text {
        margin-bottom: 15px !important;
    }

}

/* ============================================================
   END: THS MOBILE FOOTER ACCORDION
============================================================ */


   


/* ============================================================
   THS — PREMIUM MINIMAL FOOTER PLUS ICON
============================================================ */

@media (max-width: 767px) {

    #ht-site-footer .ht-footer-mobile-plus {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        flex: 0 0 30px;
        width: 30px;
        height: 30px;

        margin-left: 15px;
        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        color: transparent !important;

        font-size: 0 !important;
        line-height: 1;

        transform: rotate(0deg);
        transition:
            transform .4s cubic-bezier(.22, 1, .36, 1),
            opacity .3s ease;
    }

    /* Thin horizontal and vertical strokes */

    #ht-site-footer .ht-footer-mobile-plus::before,
    #ht-site-footer .ht-footer-mobile-plus::after {
        content: "";
        position: absolute;
        display: block;
        background: #ffffff;
        border-radius: 1px;
        transition:
            transform .4s cubic-bezier(.22, 1, .36, 1),
            opacity .3s ease;
    }

    #ht-site-footer .ht-footer-mobile-plus::before {
        width: 15px;
        height: 1px;
    }

    #ht-site-footer .ht-footer-mobile-plus::after {
        width: 1px;
        height: 15px;
    }

    /* Open state: plus becomes a clean cross */

    #ht-site-footer .ht-lux-footer__column.is-mobile-open
    .ht-footer-mobile-plus {
        transform: rotate(45deg);
    }

    /* Subtle interaction */

    #ht-site-footer .ht-lux-footer__heading:active
    .ht-footer-mobile-plus {
        opacity: .55;
    }

}

/* ============================================================
   END: PREMIUM MINIMAL FOOTER PLUS ICON
============================================================ */




/* ============================================================
   THS — REMOVE MOBILE FOOTER ACCORDION LINES
============================================================ */

@media (max-width: 767px) {

    #ht-site-footer .ht-lux-footer__column {
        border-top: none !important;
        border-bottom: none !important;
    }

    #ht-site-footer .ht-lux-footer__column::before,
    #ht-site-footer .ht-lux-footer__column::after,
    #ht-site-footer .ht-lux-footer__heading::before,
    #ht-site-footer .ht-lux-footer__heading::after {
        border: none !important;
        box-shadow: none !important;
    }

}

/* ============================================================
   END: REMOVE MOBILE FOOTER ACCORDION LINES
============================================================ */




/* ============================================================
   THS — REMOVE MOBILE HORIZONTAL SCROLLBAR
============================================================ */

@media (max-width: 767px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #ht-site-footer {
        max-width: 100%;
        overflow-x: clip !important;
    }

    #ht-site-footer .ht-lux-footer__container,
    #ht-site-footer .ht-lux-footer__main,
    #ht-site-footer .ht-lux-footer__payments,
    #ht-site-footer .ht-lux-footer__bottom {
        max-width: 100%;
        box-sizing: border-box;
    }

}

/* ============================================================
   END: REMOVE MOBILE HORIZONTAL SCROLLBAR
============================================================ */



/* START: THS — TWO ROW MOBILE PAYMENT LAYOUT */

@media (max-width: 767px) {

    #ht-site-footer .ht-lux-footer__payment-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #ht-site-footer .ht-lux-footer__payment-list > * {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;

        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    #ht-site-footer .ht-lux-footer__payment-list img {
        max-width: 100% !important;
        max-height: 30px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

}

/* END: THS — TWO ROW MOBILE PAYMENT LAYOUT */




/* START: HATIM TECH FOOTER CREDIT — MOBILE */

@media (max-width: 767px) {

    #ht-site-footer .ht-lux-footer__information {
        text-align: center !important;
        width: 100% !important;
    }

    #ht-site-footer .ht-lux-footer__information a {
        display: inline-block !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.7 !important;
        letter-spacing: .4px !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* END: HATIM TECH FOOTER CREDIT */







/* START: THS — FOOTER CREDIT HIERARCHY */

#ht-site-footer .ht-lux-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#ht-site-footer .ht-lux-footer__copyright {
    margin: 0;
    color: #999;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .35px;
    line-height: 1.7;
}

#ht-site-footer .ht-lux-footer__credit {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    color: #999;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1.7;
}

#ht-site-footer .ht-lux-footer__credit a {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: opacity .3s ease;
}

#ht-site-footer .ht-lux-footer__credit a:hover {
    opacity: .7;
}

/* MOBILE HIERARCHY */

@media (max-width: 767px) {

    #ht-site-footer .ht-lux-footer__bottom-inner {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 22px 12px;
        text-align: center;
    }

    #ht-site-footer .ht-lux-footer__copyright {
        font-size: 10px;
        letter-spacing: .25px;
    }

    #ht-site-footer .ht-lux-footer__credit {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    #ht-site-footer .ht-lux-footer__credit a {
        font-size: 20px;
        letter-spacing: 1.5px;
    }

}

/* END: THS — FOOTER CREDIT HIERARCHY */







/* START — THS LUXURY MOBILE CATEGORY DESIGN */

.ht-shop-categories__toggle {
    display: none;
}

@media (max-width: 767px) {

    .ht-shop-categories {
        padding: 22px 16px 28px;
        background: #fff;
    }

    .ht-shop-categories__inner {
        width: 100%;
    }

    /* Main Toggle */
    .ht-shop-categories__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 58px;
        padding: 0 2px;
        border: 0;
        border-bottom: 1px solid #222;
        border-radius: 0;
        background: transparent;
        color: #111;
        cursor: pointer;
        text-align: left;
    }

    .ht-shop-categories__toggle-label {
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2.2px;
        color: #111;
    }

    .ht-shop-categories__toggle-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid #222;
        border-radius: 50%;
        color: #111;
        font-size: 21px;
        font-weight: 300;
        line-height: 1;
        transition: background .3s ease, color .3s ease, transform .3s ease;
    }

    .ht-shop-categories__toggle[aria-expanded="true"]
    .ht-shop-categories__toggle-icon {
        background: #111;
        color: #fff;
        transform: rotate(180deg);
    }

    /* Category List Animation */
    .ht-shop-categories__nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-5px);
        transition:
            max-height .55s cubic-bezier(.22, 1, .36, 1),
            opacity .35s ease,
            transform .4s ease;
    }

    .ht-shop-categories__nav.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    /* Individual Category */
    .ht-shop-categories__nav > .ht-shop-category-button {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        min-height: 52px;
        margin: 0 !important;
        padding: 12px 3px !important;
        border: 0 !important;
        border-bottom: 1px solid #e9e7e3 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #171717 !important;
        text-align: left;
        text-decoration: none;
        box-shadow: none !important;
        transform: none !important;
    }

    .ht-shop-categories__nav > .ht-shop-category-button:hover,
    .ht-shop-categories__nav > .ht-shop-category-button:focus-visible {
        color: #000 !important;
        padding-left: 9px !important;
    }

    .ht-shop-categories__nav .ht-category-button__text,
    .ht-shop-categories__nav .ht-category-flip__front {
        color: #171717 !important;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1.1px;
    }

    .ht-shop-categories__nav .ht-category-button__line {
        display: none !important;
    }

    .ht-shop-categories__nav .ht-shop-category-button.is-active {
        color: #000 !important;
        font-weight: 700;
    }

    .ht-shop-categories__nav .ht-shop-category-button--disabled {
        opacity: .55;
    }

    .ht-shop-categories__nav .ht-category-flip__back {
        display: none !important;
    }
}

/* END — THS LUXURY MOBILE CATEGORY DESIGN */



/* START — THS MOBILE CATEGORY SIMPLE TEXT */

@media (max-width: 767px) {

    .ht-shop-categories__nav > .ht-shop-category-button,
    .ht-shop-categories__nav > .ht-shop-category-button:hover,
    .ht-shop-categories__nav > .ht-shop-category-button:focus-visible {
        color: #171717 !important;
        padding-left: 3px !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        box-shadow: none !important;
    }

    .ht-shop-categories__nav .ht-category-button__text,
    .ht-shop-categories__nav .ht-category-flip__front {
        color: #171717 !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .ht-shop-categories__nav .ht-shop-category-button * {
        transition: none !important;
        animation: none !important;
    }

}

/* END — THS MOBILE CATEGORY SIMPLE TEXT */



/* START — THS MOBILE COMING SOON CATEGORY */

@media (max-width: 767px) {

    .ht-shop-categories__nav > .ht-shop-category-button--disabled {
        background: #111111 !important;
        color: #ffffff !important;
        border-bottom: 1px solid #333333 !important;
        opacity: 1 !important;
    }

    .ht-shop-categories__nav > .ht-shop-category-button--disabled .ht-category-flip__front,
    .ht-shop-categories__nav > .ht-shop-category-button--disabled .ht-category-button__text {
        color: #ffffff !important;
    }

    .ht-shop-categories__nav > .ht-shop-category-button--disabled .ht-category-flip__back {
        display: none !important;
    }

}

/* END — THS MOBILE COMING SOON CATEGORY */





/* ============================================================
   START — THS COMING SOON PAGE MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    .ht-coming-soon-page {
        width: 100%;
        min-height: 100svh;
        min-height: 100dvh;
        padding: 70px 20px 50px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .ht-coming-soon-page__content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .ht-coming-soon-page__watermark {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .ht-coming-soon-page__watermark-label,
    .ht-coming-soon-page__watermark-name {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

}

/* ============================================================
   END — THS COMING SOON PAGE MOBILE RESPONSIVE
   ============================================================ */



   
/* ============================================================
   START — HT MOBILE TICKER NORMAL SCROLL FIX
   Developed by Hatim Tech (HT)
============================================================ */

@media screen and (max-width: 767px) {

    body .ht-lux-ticker {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        transform: none !important;
        animation: none !important;
        width: 100% !important;
        height: 30px !important;
    }

    body #ht-lux-sticky-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
    }

}

/* ============================================================
   END — HT MOBILE TICKER NORMAL SCROLL FIX
============================================================ */
   





/* ============================================================
   START: THE HATIM STORE — PREMIUM TRUST FEATURES
   Developed by Hatim Tech (HT)
   @package HatimTechCore
============================================================ */

/* 01. SECTION BASE */

.ht-trust,
.ht-trust * {
    box-sizing: border-box;
}

.ht-trust {
    --ht-trust-black: #151515;
    --ht-trust-text: #55534f;
    --ht-trust-muted: #77736d;
    --ht-trust-line: #e8e5e0;
    --ht-trust-accent: #a99b86;

    --ht-trust-display: var(--ths-display-font, 'Cormorant Garamond', Georgia, serif);
    --ht-trust-body: var(--ths-nav-font, 'Montserrat', Arial, sans-serif);

    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 76px clamp(22px, 5vw, 84px) 54px;
    overflow: hidden;
    background: #fff;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-body);
    border-bottom: 1px solid #f0eeeb;
}

.ht-trust::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    max-width: 32vw;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ht-trust-accent),
        transparent
    );
    transform: translateX(-50%);
}

/* 02. FOUR-COLUMN LAYOUT */

.ht-trust__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.ht-trust__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(14px, 2vw, 32px) 12px;
    text-align: center;
}

.ht-trust__item + .ht-trust__item::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: var(--ht-trust-line);
}

.ht-trust__item + .ht-trust__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background: #fff;
    border: 1px solid #d9d2c8;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 03. ICONS */

.ht-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    margin: 0 0 23px;
    color: var(--ht-trust-black);
    background: #fff;
    border: 1px solid #d9d1c5;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.ht-trust__icon svg {
    display: block;
    width: 39px;
    height: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-trust__item:hover .ht-trust__icon {
    color: #fff;
    background: var(--ht-trust-black);
    border-color: var(--ht-trust-black);
    transform: translateY(-3px);
}

/* 04. TYPOGRAPHY — DESKTOP */

.ht-trust .ht-trust__eyebrow {
    display: block;
    width: 100%;
    margin: 0 0 11px;
    color: var(--ht-trust-muted);
    font-family: var(--ht-trust-body);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ht-trust .ht-trust__title {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-display);
    font-size: clamp(24px, 2.1vw, 32px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.4px;
    text-transform: none;
    overflow-wrap: normal;
    word-break: normal;
}

.ht-trust .ht-trust__description {
    display: block;
    width: 100%;
    max-width: 270px;
    min-height: 0;
    margin: 0;
    color: var(--ht-trust-text);
    font-family: var(--ht-trust-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.15px;
}

/* 05. ACCENT */

.ht-trust__accent {
    display: block;
    flex: 0 0 auto;
    width: 38px;
    height: 1px;
    margin-top: 19px;
    background: var(--ht-trust-accent);
    transition: width 0.3s ease;
}

.ht-trust__item:hover .ht-trust__accent {
    width: 52px;
}

/* 06. BRAND SIGNATURE */

.ht-trust__signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(16px, 2.2vw, 36px);
    row-gap: 12px;
    width: 100%;
    max-width: 760px;
    margin: 48px auto 0;
    text-align: center;
}

.ht-trust__signature-line {
    display: block;
    flex: 1 1 50px;
    max-width: 130px;
    height: 1px;
    background: var(--ht-trust-accent);
}

.ht-trust__signature p {
    flex: 0 1 auto;
    margin: 0;
    color: var(--ht-trust-text);
    font-family: var(--ht-trust-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.2px;
    line-height: 1.8;
    text-transform: uppercase;
}

.ht-trust__signature p span {
    padding: 0 5px;
    color: var(--ht-trust-accent);
}

.ht-trust__brand {
    flex: 0 0 100%;
    color: var(--ht-trust-black);
    font-family: var(--ht-trust-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1.8;
    text-align: center;
}

/* 07. LAPTOP & TABLET */

@media (max-width: 1000px) {
    .ht-trust {
        padding: 60px 28px 44px;
    }

    .ht-trust__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 38px;
    }

    .ht-trust__item {
        padding: 0 22px 12px;
    }

    .ht-trust__item:nth-child(3)::before {
        display: none;
    }

    .ht-trust__item:nth-child(3)::after {
        display: none;
    }

    .ht-trust__item:nth-child(3),
    .ht-trust__item:nth-child(4) {
        padding-top: 8px;
    }

    .ht-trust__item:nth-child(4)::before {
        top: 0;
        bottom: 10px;
    }

    .ht-trust__icon {
        width: 76px;
        height: 76px;
        margin-bottom: 19px;
    }

    .ht-trust__icon svg {
        width: 35px;
        height: 35px;
    }

    .ht-trust .ht-trust__eyebrow {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .ht-trust .ht-trust__title {
        font-size: clamp(24px, 3vw, 29px);
    }

    .ht-trust .ht-trust__description {
        font-size: 10.5px;
        line-height: 1.8;
    }

    .ht-trust__signature {
        margin-top: 40px;
    }
}

/* 08. MOBILE */

@media (max-width: 600px) {
    .ht-trust {
        padding: 43px 16px 34px;
    }

    .ht-trust__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
    }

    .ht-trust__item {
        padding: 0 10px 10px;
    }

    .ht-trust__item:nth-child(3),
    .ht-trust__item:nth-child(4) {
        padding-top: 5px;
    }

    .ht-trust__item:nth-child(4)::before {
        top: 0;
        bottom: 8px;
    }

    .ht-trust__icon {
        width: 62px;
        height: 62px;
        margin-bottom: 15px;
    }

    .ht-trust__icon svg {
        width: 29px;
        height: 29px;
    }

    .ht-trust .ht-trust__eyebrow {
        margin-bottom: 8px;
        font-size: 8px;
        line-height: 1.5;
        letter-spacing: 1px;
    }

    .ht-trust .ht-trust__title {
        margin-bottom: 9px;
        font-size: clamp(21px, 5.5vw, 25px);
        line-height: 1.08;
        letter-spacing: -0.2px;
    }

    .ht-trust .ht-trust__description {
        max-width: 240px;
        font-size: 10px;
        line-height: 1.7;
        letter-spacing: 0;
    }

    .ht-trust__accent {
        width: 28px;
        margin-top: 13px;
    }

    .ht-trust__signature {
        column-gap: 10px;
        row-gap: 9px;
        margin-top: 30px;
    }

    .ht-trust__signature-line {
        flex-basis: 20px;
    }

    .ht-trust__signature p {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .ht-trust__brand {
        font-size: 10px;
        letter-spacing: 3px;
    }
}

/* 09. SMALL MOBILE */

@media (max-width: 380px) {
    .ht-trust {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ht-trust__item {
        padding-right: 7px;
        padding-left: 7px;
    }

    .ht-trust .ht-trust__eyebrow {
        font-size: 7.5px;
        letter-spacing: 0.8px;
    }

    .ht-trust .ht-trust__title {
        font-size: 21px;
    }

    .ht-trust .ht-trust__description {
        font-size: 9.5px;
        line-height: 1.7;
    }

    .ht-trust__signature p {
        font-size: 7px;
        letter-spacing: 0.8px;
    }
}

/* 10. ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ht-trust__icon,
    .ht-trust__accent {
        transition: none;
    }

    .ht-trust__item:hover .ht-trust__icon {
        transform: none;
    }
}

/* ============================================================
   END: THE HATIM STORE — PREMIUM TRUST FEATURES
============================================================ */