/*--------------------------------------------------------------------------
   Theme Name: Elmi Publishing
   Design & Style: Mahsa Kiani
   Email: mhskiani@gmail.com
   -------------------------------------------------------------------------- */

/* Global Custom CSS Variables */
:root {
    --black: #0b0b0b;
    --white: #f5f5f5;
    --gray: #777777;
    --border: #202020;
    --color: #0094de;
    --overlay-gradient: linear-gradient(to top, rgba(11, 11, 11, 0.98) 0%, rgba(11, 11, 11, 0.75) 50%, rgba(11, 11, 11, 0.1) 100%);
}

/* ==========================================================================
    Global Core & Reset System
   ========================================================================== */
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 90%;
    -ms-text-size-adjust: 90%;
    -ms-overflow-style: scrollbar;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'elmiFont', sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--white);
    background-color: var(--black);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;     
    overflow-y: auto;    
    overflow-x: hidden;
}

h1 { font-size: 2em; margin: 0.67em 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }
p { margin-top: 0; margin-bottom: 1rem; }

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1em 0;
    padding: 0;
    overflow: visible;
}

pre, code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
    color: var(--white);
    text-decoration: none;
    transition: all .3s ease;
    -webkit-text-decoration-skip: objects;
}
a:hover { text-decoration: none; }
a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }
a:not([href]):not([tabindex]):focus { outline: 0; }

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
}

b, strong { font-weight: bolder; }
small { font-size: 80%; }
img { border-style: none; }

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

/* Forms, Inputs and Interactive Control Resets */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; }
input[type="number"]:hover,
input[type="number"]:focus { -webkit-appearance: number-input; -moz-appearance: number-input; }

fieldset { border: 0; margin: 0; padding: 0.35em 0.75em 0.625em; }
textarea { overflow: auto; resize: vertical; }

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress { vertical-align: baseline; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details { display: block; }
summary { display: list-item; }
template { display: none; }

/* Text Selection Styles */
::selection { background: var(--gray); color: var(--black); text-shadow: none; }
::-moz-selection { background: var(--gray); color: var(--black); text-shadow: none; }
::-webkit-selection { background: var(--gray); color: var(--black); text-shadow: none; }

/* Old Browser Upgrade Notification */
.browserupgrade {
    margin: 0.2em 0;
    background: var(--black);
    color: var(--white);
    padding: 0.2em 0;
}

/* ==========================================================================
   Typography & Webfont (Vazirmatn)
   ========================================================================== */
   /* Generated by script */
@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: elmiFont;
  src: url('font/Vazirmatn-RD-FD-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
     Header & Mobile Nav Trigger
   ========================================================================== */
.header {
    background-color: var(--black);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 10px 0;
    width: 100%;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: min(1400px, 94%);
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

.header .logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    z-index: 1001; 
}
.header .logo a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}
.header .logo a:hover { color: var(--color); }
.header .logo img { max-width: 70px; height: auto; display: block; max-height: 60px;}

/* Desktop Horizon Linear Navigation Shell */
.header .main-navigation-panel {
    display: flex;
    align-items: center;
}
.header .main-navigation-panel ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}
.header .main-navigation-panel ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    padding: 5px 0;
}
.header .main-navigation-panel ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--color);
    transition: width 0.3s ease;
}
.header .main-navigation-panel ul li a:hover { color: var(--color); }
.header .main-navigation-panel ul li a:hover::after { width: 100%; }

.header .header-actions-group {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1001;
}

.header .socialMedia a,
.header .login-action-btn a {
    color: var(--white);
    font-size: 18px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header .socialMedia a:hover,
.header .login-action-btn a:hover { color: var(--color); }

/* Animated Hamburger Mobile Bar Trigger System */
.hamburger-menu-trigger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002; 
    outline: none;
}
.hamburger-menu-trigger .bar-line {
    width: 100%;
    height: 2px;
    background-color: var(--white);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    transform-origin: right center; /* Optimized layout for RTL alignments */
}

/* Active Morph states transforming hamburger bars into cross arrows */
.hamburger-menu-trigger.is-active .bar-line:nth-child(1) { transform: rotate(-45deg); background-color: var(--color); }
.hamburger-menu-trigger.is-active .bar-line:nth-child(2) { opacity: 0; }
.hamburger-menu-trigger.is-active .bar-line:nth-child(3) { transform: rotate(45deg); background-color: var(--color); }


/* ==========================================================================
     HEADER BASKET ICON
   ========================================================================== */
.header-action-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-basket-wrap {
    position: relative;
    display: inline-block;
}

.basket-trigger-link {
    text-decoration: none !important;
    display: block;
    transition: transform 0.3s ease;
}
.basket-trigger-link:hover {
    transform: scale(1.05);
}

.basket-icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    border-radius: 50%;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.basket-icon-box i {
    color: #fff;
    font-size: 17px;
    transition: color 0.3s ease;
}

/* Hover effects matching the theme aesthetics */
.basket-trigger-link:hover .basket-icon-box {
    border-color: var(--color, #0094de);
    background: rgba(0, 148, 222, 0.05);
}
.basket-trigger-link:hover .basket-icon-box i {
    color: var(--color, #0094de);
}

/* High-end live notification bubble layout script */
.basket-counter-badge {
    position: absolute;
    top: -5px;
    left: -5px; /* Aligns correctly over the left bounds for RTL reading paths */
    background-color: #222;
    color: #666;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid #111;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Lights up dynamically when an item is added to the cart basket */
.basket-counter-badge.has-items {
    background-color: var(--color, #0094de) !important;
    color: #000 !important;
    border-color: #0b0b0b !important;
    box-shadow: 0 4px 10px rgba(0, 148, 222, 0.3);
}

/* ==========================================================================
     Third Party Plugin Overrides 
   ========================================================================== */
/* Contact Form 7 Styles Override */
div.wpcf7 {
    padding: 75px 0 0;
    width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: var(--black);
    color: #aaa;
    width: 100%;
    border: 1px solid var(--gray);
    transition: all .3s ease;
    padding: 30px 10px;
}
.wpcf7 textarea { border-top: 0; }

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
    border: 1px solid transparent;
    background-color: var(--gray);
    color: var(--white);
    outline: none;
}

.wpcf7-submit {
    background-color: #0083cb;
    border: none;
    color: var(--black);
    font-size: 1em;
    padding: 10px 50px;
    font-weight: normal;
    float: left;
    position: relative;
    top: -60px;
    left: 20px;
}
.wpcf7-form.invalid>.wpcf7-form-control.wpcf7-submit {
    top: -90px;
}

/* Live Search Dropdown Overrides */
.autocomplete-suggestions { padding: 10px; }
.autocomplete-suggestion { text-align: right; }

.widget_product_search {
    float: left;
    margin-right: 25px;
    width: 45%;
}
.widget_product_search input[type="search"] {
    padding: 12px;
    background: var(--gray);
    font-size: small;
    width: 100%;
    border: 1px solid transparent;
}
.widget_product_search input[type="search"]:focus {
    outline: none;
    border: 1px solid transparent;
}

.yith-s::placeholder { color: var(--color); opacity: 1; }
.yith-s:-ms-input-placeholder { color: var(--color); }
.yith-s::-ms-input-placeholder { color: var(--color); }
#yith-searchsubmit { display: none; }
.dgwt-wcas-overlay-mobile{
    background-color: var(--black);
}

/* ==========================================================================
     Customer Account Dashboard Navigation Panels
   ========================================================================== */
@media only screen and (min-width: 769px) {
    .woocommerce-account .woocommerce-MyAccount-navigation { width: 22%; }
    .woocommerce-account .woocommerce-MyAccount-content { width: 75%; }
}

nav.woocommerce-MyAccount-navigation ul {
    list-style-type: none;
    padding-right: 0;
    max-width: 200px;
    font-size: 17px;
    line-height: 26px;
}
nav.woocommerce-MyAccount-navigation ul li {
    padding: 8px 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav.woocommerce-MyAccount-navigation ul li a {
    color: var(--white);
    font-size: small;
}

nav.woocommerce-MyAccount-navigation ul li.is-active {
    background-color: rgba(255, 255, 255, 0.1);
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--color);
    cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li.is-active:after {
    content: "";
    height: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-right: 14px solid rgba(255, 255, 255, 0.1);
    border-bottom: 20px solid transparent;
    float: left;
    margin-left: -34px;
    margin-top: -7px;
}

nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.07);
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after {
    content: "";
    height: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-right: 14px solid rgba(255, 255, 255, 0.1);
    border-bottom: 20px solid transparent;
    float: left;
    margin-left: -34px;
    margin-top: -7px;
}

.woocommerce .col-1, .woocommerce .col-2 { max-width: none; }

body.my-account .woocommerce #respond input#submit, 
body.my-account .woocommerce a.button, 
body.my-account .woocommerce button.button, 
body.my-account .woocommerce input.button {
    float: none;
    display: block;
    background-color: var(--color) !important;
    color: var(--black);
    width: 100%;
    margin: 1em auto;
}

/* ==========================================================================
    Bootstrap v5.3 RTL Grid 
   ========================================================================== */
.container,
.container-fluid {
    width: 100%;
    padding-inline: 15px; /* RTL CSS Logical Properties replaces fixed left/right paddings */
    margin-inline: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
}

.no-gutters {
    margin-inline: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-inline: 0;
}

/* Master Responsive Column System */
.col, [class*="col-"] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-inline: 15px;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

/* Responsive Grid Track Breakdown */
.col-1  { flex: 0 0 8.333333%;   max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%;  max-width: 16.666667%; }
.col-3  { flex: 0 0 25%;         max-width: 25%; }
.col-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
.col-6  { flex: 0 0 50%;         max-width: 50%; }
.col-7  { flex: 0 0 58.333333%;  max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
.col-9  { flex: 0 0 75%;         max-width: 75%; }
.col-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%;  max-width: 91.666667%; }
.col-12 { flex: 0 0 100%;        max-width: 100%; }

/* Logic Re-ordering tracks */
.order-first { order: -1; }
.order-last  { order: 13; }
.order-0     { order: 0; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
.order-5     { order: 5; }
.order-6     { order: 6; }
.order-7     { order: 7; }
.order-8     { order: 8; }
.order-9     { order: 9; }
.order-10    { order: 10; }
.order-11    { order: 11; }
.order-12    { order: 12; }

/* Bootstrap Logical Shift Offsets (Built natively for RTL environments) */
.offset-1  { margin-inline-start: 8.333333%; }
.offset-2  { margin-inline-start: 16.666667%; }
.offset-3  { margin-inline-start: 25%; }
.offset-4  { margin-inline-start: 33.333333%; }
.offset-5  { margin-inline-start: 41.666667%; }
.offset-6  { margin-inline-start: 50%; }
.offset-7  { margin-inline-start: 58.333333%; }
.offset-8  { margin-inline-start: 66.666667%; }
.offset-9  { margin-inline-start: 75%; }
.offset-10 { margin-inline-start: 83.333333%; }
.offset-11 { margin-inline-start: 91.666667%; }

/* Breakpoint Small SM (>= 576px) */
@media (min-width: 576px) {
    .col-sm       { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-sm-auto  { flex: 0 0 auto; width: auto; max-width: none; }
    .col-sm-1     { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2     { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3     { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4     { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5     { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6     { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7     { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8     { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9     { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10    { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11    { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12    { flex: 0 0 100%; max-width: 100%; }
    .offset-sm-0  { margin-inline-start: 0; }
    .offset-sm-1  { margin-inline-start: 8.333333%; }
    .offset-sm-2  { margin-inline-start: 16.666667%; }
    .offset-sm-3  { margin-inline-start: 25%; }
    .offset-sm-4  { margin-inline-start: 33.333333%; }
    .offset-sm-5  { margin-inline-start: 41.666667%; }
    .offset-sm-6  { margin-inline-start: 50%; }
    .offset-sm-7  { margin-inline-start: 58.333333%; }
    .offset-sm-8  { margin-inline-start: 66.666667%; }
    .offset-sm-9  { margin-inline-start: 75%; }
    .offset-sm-10 { margin-inline-start: 83.333333%; }
    .offset-sm-11 { margin-inline-start: 91.666667%; }
}

/* Breakpoint Medium MD (>= 768px) */
@media (min-width: 768px) {
    .col-md       { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-md-auto  { flex: 0 0 auto; width: auto; max-width: none; }
    .col-md-1     { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2     { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3     { flex: 0 0 25%; max-width: 25%; }
    .col-md-4     { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5     { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6     { flex: 0 0 50%; max-width: 50%; }
    .col-md-7     { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8     { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9     { flex: 0 0 75%; max-width: 75%; }
    .col-md-10    { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11    { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12    { flex: 0 0 100%; max-width: 100%; }
    .offset-md-0  { margin-inline-start: 0; }
    .offset-md-1  { margin-inline-start: 8.333333%; }
    .offset-md-2  { margin-inline-start: 16.666667%; }
    .offset-md-3  { margin-inline-start: 25%; }
    .offset-md-4  { margin-inline-start: 33.333333%; }
    .offset-md-5  { margin-inline-start: 41.666667%; }
    .offset-md-6  { margin-inline-start: 50%; }
    .offset-md-7  { margin-inline-start: 58.333333%; }
    .offset-md-8  { margin-inline-start: 66.666667%; }
    .offset-md-9  { margin-inline-start: 75%; }
    .offset-md-10 { margin-inline-start: 83.333333%; }
    .offset-md-11 { margin-inline-start: 91.666667%; }
}

/* Breakpoint Large LG (>= 992px) */
@media (min-width: 992px) {
    .col-lg       { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-lg-auto  { flex: 0 0 auto; width: auto; max-width: none; }
    .col-lg-1     { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2     { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3     { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4     { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5     { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6     { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7     { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8     { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9     { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10    { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11    { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12    { flex: 0 0 100%; max-width: 100%; }
    .offset-lg-0  { margin-inline-start: 0; }
    .offset-lg-1  { margin-inline-start: 8.333333%; }
    .offset-lg-2  { margin-inline-start: 16.666667%; }
    .offset-lg-3  { margin-inline-start: 25%; }
    .offset-lg-4  { margin-inline-start: 33.333333%; }
    .offset-lg-5  { margin-inline-start: 41.666667%; }
    .offset-lg-6  { margin-inline-start: 50%; }
    .offset-lg-7  { margin-inline-start: 58.333333%; }
    .offset-lg-8  { margin-inline-start: 66.666667%; }
    .offset-lg-9  { margin-inline-start: 75%; }
    .offset-lg-10 { margin-inline-start: 83.333333%; }
    .offset-lg-11 { margin-inline-start: 91.666667%; }
}

/* Breakpoint Extra Large XL (>= 1200px) */
@media (min-width: 1200px) {
    .col-xl       { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-xl-auto  { flex: 0 0 auto; width: auto; max-width: none; }
    .col-xl-1     { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2     { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3     { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4     { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5     { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6     { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7     { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8     { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9     { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10    { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11    { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12    { flex: 0 0 100%; max-width: 100%; }
    .offset-xl-0  { margin-inline-start: 0; }
    .offset-xl-1  { margin-inline-start: 8.333333%; }
    .offset-xl-2  { margin-inline-start: 16.666667%; }
    .offset-xl-3  { margin-inline-start: 25%; }
    .offset-xl-4  { margin-inline-start: 33.333333%; }
    .offset-xl-5  { margin-inline-start: 41.666667%; }
    .offset-xl-6  { margin-inline-start: 50%; }
    .offset-xl-7  { margin-inline-start: 58.333333%; }
    .offset-xl-8  { margin-inline-start: 66.666667%; }
    .offset-xl-9  { margin-inline-start: 75%; }
    .offset-xl-10 { margin-inline-start: 83.333333%; }
    .offset-xl-11 { margin-inline-start: 91.666667%; }
}

/* ==========================================================================
   Display  Utilities
   ========================================================================== */

/* Visibility Elements Handlers */
.hidden { display: none !important; }
.invisible { visibility: hidden; }

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }

/* ==========================================================================
     Responsive Mobile Overrides Media Queries
   ========================================================================== */
@media only screen and (max-width: 991px) {
    .hamburger-menu-trigger {
        display: flex;
    }

    /* Transform main menu panel into a solid off-canvas mobile drawer sliding from right side */
    .header .main-navigation-panel {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 280px; 
        height: 100vh;
        background-color: #0d0d0d;
        border-left: 1px solid var(--border);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        padding: 90px 30px 40px 30px;
        box-sizing: border-box;
        align-items: flex-start;
        z-index: 1000;
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .header .main-navigation-panel.is-open {
        right: 0;
    }

    .header .main-navigation-panel ul {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        text-align: right;
    }
    .header .main-navigation-panel ul li { width: 100%; }
    .header .main-navigation-panel ul li a {
        font-size: 16px;
        display: block;
        width: 100%;
        padding: 8px 0;
    }
}

@media only screen and (max-width: 576px) {
    .header { padding: 12px 0; }
    .header .logo img { max-width: 55px; }
    .header .header-actions-group { gap: 10px; }
    .header .socialMedia { display: none; }
}

@media only screen and (max-width: 480px) {
    .widget_shopping_cart_content {
        right: -100px;
        width: 320px;
    }
}

@media only screen and (max-width: 380px) {
    .widget_product_search {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .widget_shopping_cart_content {
        right: 0;
        width: 100%;
    }
}
/* ==========================================================================
     Homepage Carousel Slider
   ========================================================================== */
.home-product-slider .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.home-slider-section-dark {
    padding: 0;
    background-color: var(--black);
}

.sale-badge-dark {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color);
    color: var(--black);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    z-index: 10;
}

.no-products-found-dark {
    color: var(--gray);
    text-align: center;
    width: 100%;
    padding: 40px 0;
}

/* Canvas wrappers preventing document overflows while scaling sliding tracks */
.home-dark-canvas-wrapper {
    background-color: var(--black);
    overflow-x: hidden !important; 
    width: 100%;
    position: relative;
}

/* Relative Container to Anchor Side Navigation Arrows */
.slider-relative-container {
    position: relative;
    width: 100%;
}

.home-product-slider {
    overflow: visible !important; 
    padding: 60px 0 !important;   
    /* Widened the safe track margins so wider center cards don't overlap side buttons */
    width: calc(100% - 160px) !important; 
    margin: 0 auto !important;
}

/* Scale and opacity configurations for passive vs centered slides */
.home-product-slider .swiper-slide {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.35;
    transform: scale(0.85); /* Slightly smaller baseline scale to give room to the wider active slide */
}
.home-product-slider .swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1.15) !important; /* Controlled active zoom to account for the wider card span */
    z-index: 10;
}

/* Individual Book Matte Overlay Card Blocks */
.cover-image-card-unit {
    position: relative;
    background: var(--card-matte-bg);
    border: 1px solid var(--border);
    height: 440px; /* Kept clean proportions for wider aspect ratio covers */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    width: 100%; /* Swiper injects the wider width here dynamically */
}
.cover-image-card-unit:hover,
.swiper-slide-active .cover-image-card-unit {
    border-color: var(--color);
}

.card-image-display-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.full-product-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.85);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.cover-image-card-unit:hover .full-product-cover-img {
    transform: scale(1.02); 
    filter: brightness(0.12) blur(4px);
}

/* Card Hover Hidden Meta Panel Reveal Trigger */
.card-hover-reveal-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(11, 11, 11, 0.7); 
    padding: 30px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cover-image-card-unit:hover .card-hover-reveal-panel {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.panel-details-middle { margin-bottom: 25px; }

.book-title-dark {
    font-size: 15px; 
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-title-dark a { color: var(--white); text-decoration: none; transition: color 0.2s ease; }
.book-title-dark a:hover { color: var(--color); }

.book-price-tag-dark { font-size: 16px; font-weight: 700; color: var(--white); }

.cover-image-card-unit .price del { color: var(--gray) !important; font-size: 13px; margin-left: 6px; }
.cover-image-card-unit .price ins { color: var(--color) !important; text-decoration: none; }

.card-action-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    width: 100%;
    box-sizing: border-box;
}

.view-product-details-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: 1px solid var(--color) !important;
    color: var(--color) !important;
    height: 42px !important; 
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.view-product-details-btn:hover {
    background-color: rgba(0, 148, 222, 0.1) !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.card-action-buttons-stack .ajax-cart-btn-wrapper { width: 100%; box-sizing: border-box; }
.card-action-buttons-stack .ajax-cart-btn-wrapper .add_to_cart_button,
.card-action-buttons-stack .ajax-cart-btn-wrapper .product_type_variable {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color) !important;
    border: 1px solid var(--color) !important;
    color: var(--black) !important;
    height: 42px !important; 
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.card-action-buttons-stack .ajax-cart-btn-wrapper .add_to_cart_button:hover,
.card-action-buttons-stack .ajax-cart-btn-wrapper .product_type_variable:hover {
    background-color: transparent !important;
    color: var(--color) !important;
}

.card-action-buttons-stack .ajax-cart-btn-wrapper .added_to_cart.wc-forward { display: none !important; }

/* Custom Side-Positioned Nav Buttons Layout Engines */
.side-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--black);
    border: 1px solid var(--border);
    color: var(--white);
    width: 46px; 
    height: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 20;
}
.side-nav-btn:hover {
    background-color: var(--color);
    border-color: var(--color);
    color: var(--black);
}

/* RTL Layout Flow Support Mapping Rules */
.slider-btn-prev { right: 0; }
.slider-btn-next { left: 0; }

/* Responsive adjustments to safely hide side buttons on narrow screen trackwidths */
@media only screen and (max-width: 768px) {
    .home-product-slider {
        width: 100% !important;
        padding: 40px 0 !important;
    }
    .cover-image-card-unit {
        height: 380px; 
    }
    .side-nav-btn {
        display: none !important; 
    }
}
/* ==========================================================================
     Footer 
   ========================================================================== */
.footer {
    background-color: var(--black);
    border-top: 1px solid var(--border, #222);
    padding: 5px 0; 
     width: 100%;
    box-sizing: border-box;
}

/* Flex Container handling rows directly inside theme grid width bounds */
.footer-row-container {
    display: flex;
    flex-direction: row-reverse;
     align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Trust Badges Sizing and Alignment Layouts */
.footer-badges {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.footer-badges img {
    height: 45px; 
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.03); 
    padding: 5px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.footer-badges img:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

/* Center Navigation System Formatting rules */
.footer-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-navigation ul li a {
    color: var(--gray, #aaa);
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    transition: color 0.2s ease;
}
.footer-navigation ul li a:hover {
    color: var(--color, #0094de); /* Brand primary target hover accent color */
}

/* Left/Ending block Copyright Rules */
.footer p.copyright {
    color: #777;
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive Fall-Back handling configurations for Tablet and Mobile devices */
@media only screen and (max-width: 1024px) {
    .footer {
        padding: 35px 0;
    }
    .footer-row-container {
        flex-direction: column; /* Stack into clean columns rows when narrow viewports restrict side space */
        justify-content: center;
        text-align: center;
        gap: 25px;
    }
    .footer-navigation {
        order: 1; /* Rearranges positions logically on mobile blocks */
    }
    .footer-badges {
        order: 2;
    }
    .footer p.copyright {
        order: 3;
        white-space: normal;
        line-height: 1.6;
    }
}

/* ==========================================================================
    Full Browser Height Content Engine
   ========================================================================== */
.site-main-canvas {
    /* calc(100vh - (Header height + Footer height)) */
    /* Adjust 120px (header) and 150px (footer) if your heights differ significantly */
    min-height: calc(100vh - 250px); 
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}
.site-content-card{
     min-height: calc(100vh - 250px); 
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, #222);
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}
/* ==========================================================================
     404 Layout 
   ========================================================================== */
.error-404-canvas {
    background-color: var(--black); 
    min-height: calc(100vh - 220px); /* Extends workspace to prevent footer floating up */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
    width: 100%;
}

.post-404-error-wrapper {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Graphics Architecture Layout */
.error-book-icon {
    position: relative;
    font-size: 72px;
    color: rgba(255, 255, 255, 0.08); /* Sophisticated subtle watermark look */
    margin-bottom: 30px;
    display: inline-block;
}
.error-badge-404 {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color, #0094de); /* Brand color highlight mapping rules */
    color: #000;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* Minimalist Content Block Typography rules */
.error-title-main {
    color: var(--white, #fff);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.error-subtitle-text {
    color: var(--gray, #aaa);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 35px 0;
    max-width: 480px;
}

/* Minimal Search Box Engineering Controls */
.error-search-box {
    width: 100%;
    max-width: 420px;
    margin-bottom: 40px;
}
.search-form-404 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.search-field-404 {
    width: 100% !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border, #222) !important;
    padding: 0 45px 0 15px !important; /* Extra padding on right to clear the search icon safely in RTL */
    color: var(--white, #fff) !important;
    font-size: 13px !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
    box-sizing: border-box !important;
}
.search-field-404:focus {
    border-color: var(--color, #0094de) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    outline: none !important;
}
.search-submit-404 {
    position: absolute;
    right: 15px; /* RTL placement inside the track boundary rules */
    background: none !important;
    border: none !important;
    color: var(--gray, #777) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}
.search-field-404:focus + .search-submit-404 {
    color: var(--color, #0094de) !important;
}

/* Return Action Buttons Interface Layout */
.error-action-space {
    display: block;
}
.return-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid var(--color, #0094de);
    color: var(--color, #0094de);
    padding: 0 24px;
    height: 42px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.return-home-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}
.return-home-btn:hover {
    background-color: var(--color, #0094de);
    color: #000 !important;
}
/* Flip arrow icon direction slightly on hover for crisp micro-interaction feel */
.return-home-btn:hover i {
    transform: translateX(-4px);
}

/* Responsive breakpoint fallback adjustments */
@media only screen and (max-width: 768px) {
    .error-404-canvas {
        padding: 60px 20px;
    }
    .error-title-main {
        font-size: 22px;
    }
    .error-subtitle-text {
        font-size: 13px;
    }
}


/* ==========================================================================
     Contact Page
   ========================================================================== */
/* Content & Form Card Styling */
.contact-content-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, #222);
    padding: 40px;
    color: var(--gray, #aaa);
    width: 100%;
    box-sizing: border-box;
}

/* Styling internal form fields dynamically (Contact Form 7 / Gutenberg support) */
.contact-content-card input[type="text"],
.contact-content-card input[type="email"],
.contact-content-card input[type="tel"],
.contact-content-card textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border, #222) !important;
    padding: 12px 15px !important;
    color: var(--white, #fff) !important;
    font-size: 13px !important;
    margin-bottom: 20px !important;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box !important;
}
.contact-content-card input:focus,
.contact-content-card textarea:focus {
    border-color: var(--color, #0094de) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    outline: none !important;
}
.contact-content-card input[type="submit"],
.contact-content-card button[type="submit"] {
    background: var(--color, #0094de) !important;
    color: #000 !important;
    border: 1px solid var(--color, #0094de) !important;
    padding: 0 35px !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.contact-content-card input[type="submit"]:hover,
.contact-content-card button[type="submit"]:hover {
    background: transparent !important;
    color: var(--color, #0094de) !important;
}

/* Responsive adjustment hooks */
@media only screen and (max-width: 768px) {
    .contact-content-card {
        padding: 25px;
    }
}

/* Integrated SVG Grayscale Maps Filtering */
#map {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
/* ==========================================================================
      Current Active Menu Item Highlight 
   ========================================================================== */

/* Target the active link directly */
.footer-navigation ul li.current-menu-item a,
.header-navigation ul li.current-menu-item a, /* Replace with your actual header nav class if different */
.current-menu-item > a,
.current-menu-ancestor > a {
    color: var(--color, #0094de) !important;
    font-weight: 700 !important;
    position: relative;
}

/* Optional Premium Touch: Add a subtle micro-accent line underneath the active item */
.header-navigation ul li.current-menu-item a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    right: 0;
    height: 2px;
    background-color: var(--color, #0094de);
    transition: all 0.3s ease;
}

/* ==========================================================================
    Shop Layout Book Covers & Pagination
   ========================================================================== */

/* Clean out core default breadcrumbs or orphaned layout grids globally */
.woocommerce-breadcrumb,
.post-type-archive-product .sidebar,
.tax-product_cat .sidebar,
#sidebar {
    display: none !important;
}

/* Force full canvas width expansion across primary main sections */
.post-type-archive-product,
.tax-product_cat,
.post-type-archive-product #main,
.tax-product_cat #main {
    background-color: #0b0b0b !important;
}

.shopPage {
    padding: 60px 0 80px 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Force Exact 4-Column Grid Rulesets */
.post-type-archive-product ul.products,
.tax-product_cat ul.products {
    margin: 40px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important;
    width: 100% !important;
}

/* Strip native list float hacks */
.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
}
.post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after,
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after {
    display: none !important;
}

/* Individual Book Matte Overlay Card Mechanics (Matching Homepage Layout) */
.post-type-archive-product ul.products li.product .cover-image-card-unit,
.tax-product_cat ul.products li.product .cover-image-card-unit {
    position: relative;
    background: var(--card-matte-bg, #141414);
    border: 1px solid var(--border, #222);
    height: 420px; /* Locked true vertical aspect ratio resembling physical book formats */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
}
.post-type-archive-product ul.products li.product:hover .cover-image-card-unit,
.tax-product_cat ul.products li.product:hover .cover-image-card-unit {
    border-color: var(--color, #0094de);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-image-display-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.post-type-archive-product ul.products li.product img,
.tax-product_cat ul.products li.product img,
.custom-related-matte-book-loop li.product img {
 width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important;
    filter: brightness(0.85);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0 !important; 
}
.post-type-archive-product ul.products li.product:hover img,
.tax-product_cat ul.products li.product:hover img,
.custom-related-matte-book-loop li.product:hover img {
    transform: scale(1.04) !important;
    filter: brightness(0.1) blur(6px) !important;
}

/* Hidden Dynamic Hover Panel Layering Details Trigger */
.card-hover-reveal-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(11, 11, 11, 0.7);
    padding: 25px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.post-type-archive-product ul.products li.product:hover .card-hover-reveal-panel,
.tax-product_cat ul.products li.product:hover .card-hover-reveal-panel {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.panel-details-middle { width: 100%; }

.card-hover-reveal-panel .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin: 0 0 10px 0 !important;
    color: var(--white, #fff) !important;
    padding: 0 !important;
}

.card-hover-reveal-panel .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--white, #fff) !important;
    display: block !important;
    margin-bottom: 20px !important;
}
.card-hover-reveal-panel .price del { color: #666 !important; font-size: 13px; margin-left: 6px; }
.card-hover-reveal-panel .price ins { color: var(--color, #0094de) !important; text-decoration: none; }

.card-hover-reveal-panel .add_to_cart_button,
.card-hover-reveal-panel .product_type_variable,
.card-hover-reveal-panel .product_type_simple {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    height: 42px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.card-hover-reveal-panel .add_to_cart_button:hover,
.card-hover-reveal-panel .product_type_variable:hover,
.card-hover-reveal-panel .product_type_simple:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}

.post-type-archive-product ul.products li.product > a,
.tax-product_cat ul.products li.product > a {
    display: block !important;
    text-decoration: none !important;
}

/* Category Filter Layout System */
.shop-utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border, #222);
    padding-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}
.shop-title-area { text-align: right; }
.shop-main-heading { color: var(--white, #fff) !important; font-size: 28px !important; font-weight: 700 !important; margin: 0 0 12px 0 !important; }
.heading-accent-line { display: block; width: 50px; height: 2px; background-color: var(--color, #0094de); }
.shop-filter-area { display: flex; align-items: center; }
.custom-dropdown-wrapper { position: relative; display: flex; align-items: center; gap: 12px; }
.dropdown-label { color: var(--gray, #aaa); font-size: 13px; white-space: nowrap; margin: 0; }
.premium-cat-dropdown {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border, #222) !important;
    padding: 0 40px 0 15px !important; height: 44px !important;
    color: var(--white, #fff) !important; font-size: 13px !important; font-weight: 600 !important;
    cursor: pointer; min-width: 220px; transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box !important;
}
.premium-cat-dropdown:focus { border-color: var(--color, #0094de) !important; background: rgba(255, 255, 255, 0.05) !important; outline: none !important; }
.dropdown-arrow-icon { position: absolute; right: 115px; top: 50%; transform: translateY(-50%); color: var(--gray, #777); font-size: 11px; pointer-events: none; transition: color 0.3s ease; }
.premium-cat-dropdown:focus + .dropdown-arrow-icon { color: var(--color, #0094de); }
.premium-cat-dropdown option { background-color: #111 !important; color: #fff !important; padding: 10px !important; }

/* ==========================================================================
    PAGINATION
   ========================================================================== */
.post-type-archive-product .woocommerce-pagination,
.tax-product_cat .woocommerce-pagination {
    margin-top: 60px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
}

.post-type-archive-product .woocommerce-pagination ul.page-numbers,
.tax-product_cat .woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    border: none !important;
    background: transparent !important;
}

.post-type-archive-product .woocommerce-pagination ul.page-numbers li,
.tax-product_cat .woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
}

/* Style active states and individual link box tokens */
.post-type-archive-product .woocommerce-pagination ul.page-numbers li span.current,
.tax-product_cat .woocommerce-pagination ul.page-numbers li span.current {
    background: var(--color, #0094de) !important;
    color: #000 !important;
    border-color: var(--color, #0094de) !important;
}

.post-type-archive-product .woocommerce-pagination ul.page-numbers li a,
.post-type-archive-product .woocommerce-pagination ul.page-numbers li span,
.tax-product_cat .woocommerce-pagination ul.page-numbers li a,
.tax-product_cat .woocommerce-pagination ul.page-numbers li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border, #222) !important;
    color: var(--white, #fff) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-sizing: border-box !important;
}

/* Interactive Pagination States hover rules */
.post-type-archive-product .woocommerce-pagination ul.page-numbers li a:hover,
.tax-product_cat .woocommerce-pagination ul.page-numbers li a:hover {
    border-color: var(--color, #0094de) !important;
    color: var(--color, #0094de) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Vertically adjust custom font-awesome icons slightly within boxes */
.post-type-archive-product .woocommerce-pagination ul.page-numbers li a i,
.tax-product_cat .woocommerce-pagination ul.page-numbers li a i {
    font-size: 12px;
}

/* Responsive breakdowns configurations */
@media only screen and (max-width: 1024px) {
    .post-type-archive-product ul.products, .tax-product_cat ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media only screen and (max-width: 768px) {
    .shop-utility-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .custom-dropdown-wrapper { width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
    .premium-cat-dropdown { width: 100% !important; }
    .dropdown-arrow-icon { right: 15px !important; top: 72% !important; }
}
@media only screen and (max-width: 480px) {
    .post-type-archive-product ul.products, .tax-product_cat ul.products { grid-template-columns: repeat(1, 1fr) !important; }
    .post-type-archive-product ul.products li.product .cover-image-card-unit,
    .tax-product_cat ul.products li.product .cover-image-card-unit { height: 460px; /* Expands height cleanly for optimal single cover tracking */ }
}/* ==========================================================================
   PREMIUM DARK SINGLE PRODUCT PAGE CORE ENGINE
   ========================================================================== */
.single-product-canvas-dark {
    background-color: #0b0b0b !important;
    min-height: calc(100vh - 220px);
    width: 100%;
    box-sizing: border-box;
    padding: 60px 0 80px 0;
}

.single-product-main-container {
    direction: rtl; /* Enforces native Persian RTL flow layout mechanics */
}

/* Defensively block native WooCommerce list floats on single product item layouts */
.single-product-layout-row.product {
    width: 100% !important;
    float: none !important;
    background: transparent !important;
    margin: 0 0 50px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.single-product-gallery-column,
.single-product-details-column {
    float: none !important;
    box-sizing: border-box;
}

/* --- COLUMN 1: IMAGE FRAME STRUCTURE (UNCROPPED COMPLIANCE) --- */
.main-book-cover-stage {
    position: relative;
    background: #141414;
    border: 1px solid var(--border, #222);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 520px; /* Locked true visual scale aspect for core book display */
    box-sizing: border-box;
}

.book-spine-hero-img {
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* Prevents edge cropping; preserves physical cover ratios */
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* --- COLUMN 2: DETAILS CONTENT CARD SYSTEM --- */
.book-details-content-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, #222);
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Premium Layout Flex Header Component */
.product-title-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.product-title-hero {
    color: var(--white, #fff) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    flex: 1;
}

/* Refined Premium Price Badge Framework */
.single-product-price-track {
    margin: 0;
    white-space: nowrap;
    background: rgba(0, 148, 222, 0.07);
    padding: 8px 16px;
    border: 1px solid rgba(0, 148, 222, 0.15);
}

.single-product-price-track .price,
.single-product-price-track .price span {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--color, #0094de) !important;
}

.single-product-price-track .price del,
.single-product-price-track .price del span {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-left: 8px;
}

.single-product-price-track .price ins { 
    text-decoration: none !important; 
}

.heading-accent-left-space {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

/* Description Excerpt Typography Rules */
.book-short-explanation-excerpt {
    color: var(--gray, #aaa);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}
.book-short-explanation-excerpt p { margin: 0; }

/* Add To Cart Form Fields Custom Formatting Mechanics */
.single-add-to-cart-action-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    margin-bottom: 35px;
}

.single-add-to-cart-action-panel form.cart {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Quantity Counter Input Controls Styling */
.single-add-to-cart-action-panel .quantity input.qty {
    width: 60px !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border, #222) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
}
.single-add-to-cart-action-panel .quantity input.qty:focus {
    border-color: var(--color, #0094de) !important;
    outline: none;
}

/* Submit Add to Cart Button Block Layouts */
.single-add-to-cart-action-panel .single_add_to_cart_button,
.single-add-to-cart-action-panel  .added_to_cart.wc-forward {
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    height: 46px !important;
    padding: 0 40px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  line-height: 40px;
}
.single-add-to-cart-action-panel .single_add_to_cart_button:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}
/* Styling updates for the dynamic button AJAX states */
.single_add_to_cart_button.loading-accent-state {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative;
}

/* Styling for the AJAX "View Cart" button that appears inside Swiper/Related items after checkout click */
/* Ensure the standard button hides cleanly once added inside hover states */
.card-hover-reveal-panel .panel-details-middle .ajax_add_to_cart.added {
    display: none !important;
}

/* Styled view cart button container token rules inside the sliders */
.card-hover-reveal-panel .panel-details-middle .added_to_cart.premium-swiper-view-cart-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--white, #fff) !important;
    height: 42px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    margin-top: 5px !important;
}

.card-hover-reveal-panel .panel-details-middle .added_to_cart.premium-swiper-view-cart-btn:hover {
    border-color: var(--color, #0094de) !important;
    color: var(--color, #0094de) !important;
    background: rgba(0, 148, 222, 0.02) !important;
}
/* Hide the default checkmark icon if WooCommerce tries to inject one automatically */
.card-hover-reveal-panel .panel-details-middle .add_to_cart_button.added {
    display: none !important; /* Hides the original add button once item is successfully in cart to prevent duplicates */
}

/* Subtle styling changes for the single button when successfully processed */
.single_add_to_cart_button.added::after {
    content: ' ✓';
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
}

/* Meta Labels Catalog Taxonomy Panel Rows */
.book-metadata-tax-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.meta-tax-row {
    font-size: 13px;
    margin-bottom: 8px;
    color: #777;
}
.meta-tax-row:last-child { margin-bottom: 0; }

.meta-label {
    font-weight: 600;
    color: #999;
}

.meta-values a {
    color: var(--color, #0094de);
    text-decoration: none;
    transition: color 0.2s ease;
}
.meta-values a:hover { color: #fff; }


/* ==========================================================================
   FLAT STACKED PRODUCT DATA BLOCKS SYSTEM (REPLACING OLD BOX TABS)
   ========================================================================== */
.flat-stacked-details-wrapper {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    width: 100%;
}

.flat-data-block {
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    width: 100%;
}
.flat-data-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.flat-block-content {
    color: var(--gray, #aaa) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: justify;
}
.flat-block-content h2{
    display: none;
}
/* Core Technical Product Specifications Tables Mapping */
.flat-block-content table.shop_attributes {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 0 0 !important;
    background: transparent !important;
    border: none !important;
}

.flat-block-content table.shop_attributes th,
.flat-block-content table.shop_attributes td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
    background: transparent !important;
}

.flat-block-content table.shop_attributes th {
    color: #fff !important;
    font-weight: 600 !important;
    width: 30% !important;
    text-align: right !important;
}

.flat-block-content table.shop_attributes td {
    color: var(--gray, #aaa) !important;
    font-style: normal !important;
}

.flat-block-content table.shop_attributes tr:last-child th,
.flat-block-content table.shop_attributes tr:last-child td {
    border-bottom: none !important;
}
.flat-block-content table.shop_attributes p { margin: 0 !important; padding: 0 !important; }


/* ==========================================================================
    RELATED PRODUCTS 4-COLUMN BOOK LOOP GRID
   ========================================================================== */
.product-related-row-container {
    margin-top: 50px;
}

.related-products-matte-grid .related.products > h2 {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 35px !important;
    text-align: right;
}

/* Strict 4-Column Track Mapping Architecture for Isolated Module Loop */
.custom-related-matte-book-loop {
    margin: 40px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important;
    width: 100% !important;
    list-style: none !important;
}

.custom-related-matte-book-loop::before,
.custom-related-matte-book-loop::after {
    content: none !important;
    display: none !important;
}

/* Hard reset item-specific structural margins/floats that cause vertical dropping */
.custom-related-matte-book-loop li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}


.custom-related-matte-book-loop li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    position: relative !important;
    background: transparent !important;
}

/* Matched Matte Structure Token Container Box */
.custom-related-matte-book-loop li.product .cover-image-card-unit {
    position: relative;
    background: var(--card-matte-bg, #141414);
    border: 1px solid var(--border, #222);
    height: 420px; /* Locked true vertical aspect format resembling book sizes */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
}

.custom-related-matte-book-loop li.product:hover .cover-image-card-unit {
    border-color: var(--color, #0094de);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-image-display-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hidden Overlay Reveal Hover Panels Layering Mechanism */
.card-hover-reveal-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(11, 11, 11, 0.7);
    padding: 25px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.custom-related-matte-book-loop li.product:hover .card-hover-reveal-panel {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.panel-details-middle { width: 100%; }

.card-hover-reveal-panel .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin: 0 0 10px 0 !important;
    color: var(--white, #fff) !important;
    padding: 0 !important;
}

.card-hover-reveal-panel .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--white, #fff) !important;
    display: block !important;
    margin-bottom: 20px !important;
}
.card-hover-reveal-panel .price del { color: #666 !important; font-size: 13px; margin-left: 6px; }
.card-hover-reveal-panel .price ins { color: var(--color, #0094de) !important; text-decoration: none; }

/* Loop add to cart visual tokens styling */
.card-hover-reveal-panel .add_to_cart_button,
.card-hover-reveal-panel .product_type_variable,
.card-hover-reveal-panel .product_type_simple {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    height: 42px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.card-hover-reveal-panel .add_to_cart_button:hover,
.card-hover-reveal-panel .product_type_variable:hover,
.card-hover-reveal-panel .product_type_simple:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}


/* ==========================================================================
   RESPONSIVE LAYOUT RESPONSIVE BREAKDOWN RULES
   ========================================================================== */
@media only screen and (max-width: 991px) {
    .single-product-layout-row { gap: 0; }
    .main-book-cover-stage { height: 440px; }
    .book-details-content-card { padding: 25px; }
    .custom-related-matte-book-loop { grid-template-columns: repeat(2, 1fr) !important; }
    .product-title-row-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media only screen and (max-width: 640px) {

    .single-product-price-track {
        align-self: flex-start;
    }
}

@media only screen and (max-width: 576px) {
    .main-book-cover-stage { height: 380px; }
    .custom-related-matte-book-loop { grid-template-columns: repeat(1, 1fr) !important; }
}

/* ==========================================================================
     EMPTY CART TEMPLATE & LOOP COUPLING
   ========================================================================== */
.empty-cart-canvas-wrapper {
    direction: rtl; /* Maintains Persian RTL reading structures */
    padding: 60px 0 90px 0;
    box-sizing: border-box;
}

/* Central Empty Status Layout Panel Box */
.empty-cart-status-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, #222);
    border-radius: 0;
    padding: 60px 30px;
    text-align: center;
    width: 100%;
    margin-bottom: 70px;
    box-sizing: border-box;
}

.status-card-inner {
    max-width: 500px;
    margin: 0 auto;
}

/* Subtle Glowing Dark Frame Node around central Basket Icon */
.slate-icon-frame {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

.slate-icon-frame i {
    color: rgba(255, 255, 255, 0.2);
    font-size: 28px;
}

.slate-main-title {
    color: var(--white, #fff) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4;
}

.slate-description-text {
    color: var(--gray, #777) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 0 35px 0 !important;
}

/* High-End Target Action Return To Shop Call to Action button */
.premium-return-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    height: 48px;
    padding: 0 35px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-return-shop-btn:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
    transform: translateY(-2px);
}

/* --- SUGGESTIONS GRID AND LOOP MAPPING COMPLIANCE --- */
.empty-cart-suggestions-section {
    width: 100%;
}

.suggestions-header-row {
    margin-bottom: 35px;
    text-align: right;
    position: relative;
}

.suggestions-main-heading {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
}

/* Enforce shared styling with the core loops inside empty loops */
.matches-empty-cart-canvas.custom-related-matte-book-loop {
    margin: 0 !important;
}

/* Media Query Adaptations for Clean Mobile Grid Wrapping */
@media only screen and (max-width: 991px) {
    .empty-cart-status-card { padding: 45px 20px; }
    .slate-main-title { font-size: 20px !important; }
}

@media only screen and (max-width: 480px) {
    .premium-return-shop-btn {
        width: 100%; /* Spans full horizontal container dimensions across small viewport paths */
        box-sizing: border-box;
    }
}

/* ==========================================================================
   23. HEADER ACCOUNT ICON & STYLING ENGINE
   ========================================================================== */
.header-account-action-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
}

.header-account-icon-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none !important;
}

.header-account-icon-link:hover {
    color: var(--color, #0094de) !important;
}

.header-account-icon-link.logged-in-state {
    color: var(--color, #0094de) !important; /* Highlights icon if active log track exists */
}

/* ==========================================================================
    LOGIN/REGISTER : SPLIT AUTHENTICATION PAGE LAYOUTS
   ========================================================================== */
.auth-page-canvas-container {
    direction: rtl;
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1100px;
    margin: 50px auto 90px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Base Panel Box definitions */
.auth-card-unit {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, #222);
    border-radius: 0;
    padding: 45px 35px;
    box-sizing: border-box;
}

.auth-card-header {
    margin-bottom: 30px;
}

.auth-panel-title {
    color: var(--white, #fff) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
}

.auth-panel-subtitle {
    color: #777;
    font-size: 13px;
    margin: 0;
}

/* Input Form Controls */
.custom-auth-input-group {
    margin-bottom: 20px !important;
}

.custom-auth-input-group label {
    display: block;
    color: #aaa !important;
    font-size: 13px !important;
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-field-element {
    width: 100% !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.auth-field-element:focus {
    border-color: var(--color, #0094de) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    outline: none;
}

/* Utilities Interceptors row layout */
.auth-utilities-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 25px;
    font-size: 13px;
}

.custom-auth-checkbox-label {
    color: #999 !important;
    cursor: pointer;
}

.custom-lost-password-link a {
    color: #777 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.custom-lost-password-link a:hover {
    color: var(--color, #0094de) !important;
}

/* Primary Form Submit Button Layout */
.premium-auth-submit-btn {
    width: 100% !important;
    height: 46px !important;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.premium-auth-submit-btn:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}

.premium-auth-submit-btn.register-variant-btn {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.premium-auth-submit-btn.register-variant-btn:hover {
    border-color: var(--color, #0094de) !important;
    color: var(--color, #0094de) !important;
}

.auth-privacy-notice-text {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    margin: 15px 0;
}

/* --- Responsive Layout Breaks --- */
@media only screen and (max-width: 768px) {
    .auth-page-canvas-container {
        flex-direction: column;
        gap: 30px;
        margin: 35px auto 60px auto;
    }
    .auth-card-unit {
        padding: 35px 25px;
    }
}
/* ==========================================================================
    ACTIVE CART LAYOUT 
   ========================================================================== */

/* The Parent Container acts as a safe, vertical layout block */
.woocommerce-cart-page-wrapper {
    direction: rtl;
    display: block !important; 
    max-width: 1200px;
    margin: 40px auto 90px auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Force messages/notices to sit full width safely at the top layout level without affecting the columns */
.woocommerce-cart-page-wrapper .woocommerce-message,
.woocommerce-cart-page-wrapper .woocommerce-error,
.woocommerce-cart-page-wrapper .woocommerce-info {
    width: 100% !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #222;
    color: #fff;
    padding: 15px 20px;
    border-radius: 0;
}
.woocommerce-cart-page-wrapper .woocommerce-message::before{
    right: auto;
    left: 1.5em;
}
/* The Dedicated Flex Splitter Grid Layer */
.woocommerce-cart-page-wrapper .cart-layout-split-grid {
    display: flex !important;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* CHROME FIX: Strict mathematical sizing constraints for the product list form */
.woocommerce-cart-page-wrapper .cart-layout-split-grid form.woocommerce-cart-form {
    display: block !important; 
    flex: 0 0 calc(100% - 420px) !important;
    width: calc(100% - 420px) !important;
    min-width: 0 !important;
}

/* Rigid sidebar width handling to keep it locked alongside the form */
.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart-collaterals {
    display: block !important;
    flex: 0 0 380px !important;
    width: 380px !important;
    position: sticky;
    top: 30px;
}


/* --- PRODUCT TABLE TO CARD CONVERSION --- */

/* Forces tables to stay responsive inside Chrome's strict rendering tracking */
.woocommerce-cart-page-wrapper .cart-layout-split-grid form.woocommerce-cart-form table.shop_table {
    width: 100% !important;
    table-layout: fixed !important; 
    border-collapse: separate;
    border-spacing: 0 15px;
    background: transparent !important;
    border: none !important;
}

/* Strip headers entirely inside our unique page container */
.woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table thead {
    display: none !important;
}

/* Row Conversion into Elegant Dark Matte Cards */
.woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr.cart_item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr.cart_item:hover {
    border-color: #2a2a2a !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr.cart_item td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.woocommerce table.shop_table {
    border: 0;
}

/* --- TABLE CELL INNER COMPONENTS --- */

/* 1. Isolated Close/Delete Action Button */
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-remove {
    order: 5;
    margin-right: auto;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-remove a.remove {
    color: #555 !important;
    font-size: 20px !important;
    background: transparent !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-remove a.remove:hover {
    color: #ff4d4d !important;
    background: rgba(255, 77, 77, 0.05) !important;
}

/* 2. Isolated Uncropped Book Thumbnail Handler */
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-thumbnail {
    order: 1;
    width: 70px;
    height: auto;
    margin-left: 20px;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.01);
}

/* 3. Book Details Text Block */
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-name {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 250px;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-name a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-name a:hover {
    color: var(--color, #0094de) !important;
}

/* 4. Isolated Row Price Frameworks */
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-price,
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-subtotal {
    order: 3;
    color: #aaa !important;
    font-size: 14px !important;
    margin-left: 30px;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-subtotal {
    color: var(--color, #0094de) !important;
    font-weight: 700 !important;
}

/* 5. Quantity Input Field Box Reset */
.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-quantity {
    order: 4;
    margin-left: 30px;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-quantity .quantity input.qty {
    width: 50px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
}


/* --- ISOLATED BOTTOM ACTIONS ROW (Coupon Control) --- */
.woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr td.actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 0 0 !important;
    background: transparent !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon {
    display: flex;
    gap: 10px;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon input#coupon_code {
    height: 42px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 0 15px !important;
    width: 160px !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon button.button,
.woocommerce-cart-page-wrapper .cart-layout-split-grid button[name="update_cart"] {
    height: 42px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon button.button:hover,
.woocommerce-cart-page-wrapper .cart-layout-split-grid button[name="update_cart"]:hover {
    border-color: var(--color, #0094de) !important;
    color: var(--color, #0094de) !important;
}


/* --- SIDEBAR: CART TOTALS SUMMARY PANEL --- */
.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals h2 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 25px 0 !important;
    border-bottom: 1px solid #222 !important;
    padding-bottom: 15px !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals table.shop_table_tot {
    width: 100% !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals tr th,
.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals tr td {
    padding: 12px 0 !important;
    color: #888 !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals tr.order-total th,
.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals tr.order-total td {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-top: 1px solid #222 !important;
    padding-top: 15px !important;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .cart_totals tr.order-total td span {
    color: var(--color, #0094de) !important;
}

/* Master Checkout Button */
.woocommerce-cart-page-wrapper .cart-layout-split-grid .wc-proceed-to-checkout a.checkout-button, 
 .woocommerce a.button.pre-invoice{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    margin-bottom: 0;
}

.woocommerce-cart-page-wrapper .cart-layout-split-grid .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart-page-wrapper .cart_totals a.button.pre-invoice:hover{
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}


/* --- RESPONSIVE CONTAINER BREAKPOINTS --- */
@media only screen and (max-width: 991px) {
    .woocommerce-cart-page-wrapper .cart-layout-split-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .woocommerce-cart-page-wrapper .cart-layout-split-grid form.woocommerce-cart-form {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .woocommerce-cart-page-wrapper .cart-layout-split-grid .cart-collaterals {
        flex: 1 1 100% !important;
        width: 100% !important;
        position: static;
    }
}

@media only screen and (max-width: 600px) {
    .woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr.cart_item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 25px 15px !important;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-thumbnail {
        margin-left: 0;
        width: 90px;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-name {
        max-width: 100%;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-price, 
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-quantity, 
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-subtotal {
        margin-left: 0;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid td.product-remove {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid table.shop_table tbody tr td.actions {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon {
        flex-direction: column;
    }
    .woocommerce-cart-page-wrapper .cart-layout-split-grid .coupon input#coupon_code {
        width: 100% !important;
    }
}/* ==========================================================================
     CATALOG PAGE
   ========================================================================== */

   .elmipub-pdf-container {
    direction: rtl;
    max-width: 1100px;
    margin: 60px auto 120px auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --- HERO HEADLINE AREA --- */
.pdf-hero-header {
    margin-bottom: 60px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 40px;
    max-width: 700px;
}

.pdf-subtitle {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color, #0094de);
    font-weight: 700;
    margin-bottom: 15px;
}

.pdf-main-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.2;
}





/* Page Level Parent Boundary Alignment Control */
.elmipub-gutenberg-catalog-hub {

    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* 1. HIJACKING THE NATIVE FILE BLOCK WRAPPER CELL */
.elmipub-gutenberg-catalog-hub .wp-block-file {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #161616 !important;
    border-radius: 0 !important;
    padding: 25px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elmipub-gutenberg-catalog-hub .wp-block-file:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: #262626 !important;
    transform: translateX(-4px) !important; /* Elegant RTL structural push shift */
}

/* 2. RE-ENGINEERING FILE METADATA & LINK TEXT (Left Side Node) */
.elmipub-gutenberg-catalog-hub .wp-block-file > a:not(.wp-block-file__button) {
    font-size: 17px !important;
    font-weight: 300 !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    transition: color 0.3s ease !important;
}

/* Pseudo-element injector acting as our dynamic file format badge indicator */
.elmipub-gutenberg-catalog-hub .wp-block-file > a:not(.wp-block-file__button)::before {
    content: "FILE" !important;
    background: rgba(0, 148, 222, 0.05) !important;
    border: 1px solid rgba(0, 148, 222, 0.15) !important;
    color: var(--color, #0094de) !important;
    font-size: 11px !important;
    font-family: monospace !important;
    font-weight: 900 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

.elmipub-gutenberg-catalog-hub .wp-block-file:hover > a:not(.wp-block-file__button)::before {
    background: var(--color, #0094de) !important;
    color: #000 !important;
    border-color: var(--color, #0094de) !important;
}

.elmipub-gutenberg-catalog-hub .wp-block-file > a:not(.wp-block-file__button):hover {
    color: var(--color, #0094de) !important;
}

/* 3. HIJACKING NATIVE BUTTON COMPONENT (Right Side Node) */
.elmipub-gutenberg-catalog-hub .wp-block-file .wp-block-file__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 24px !important;
    background: transparent !important;
    border: 1px solid #262626 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    order: 2 !important; /* Keeps the button element locked on the opposite side panel */
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

/* Appending action down arrow to Gutenberg native anchor button output */
.elmipub-gutenberg-catalog-hub .wp-block-file .wp-block-file__button::after {
    content: " ↓" !important;
    font-size: 14px !important;
    margin-right: 6px;
    transition: transform 0.3s ease !important;
}

.elmipub-gutenberg-catalog-hub .wp-block-file .wp-block-file__button:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

.elmipub-gutenberg-catalog-hub .wp-block-file .wp-block-file__button:hover::after {
    transform: translateY(2px) !important;
}

/* --- MOBILE ADAPTIVE COMPONENT BREAKPOINTS --- */
@media only screen and (max-width: 768px) {
    .elmipub-gutenberg-catalog-hub .wp-block-file {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 25px !important;
    }
}


/* ==========================================================================
    CHECKOUT PAGE
   ========================================================================== */

/* --- ROOT LAYOUT CONTAINER --- */
.elmipub-checkout-page-wrapper {
    direction: rtl;
    max-width: 1000px; /* Snugger layout width for a vertical tracking flow */
    margin: 40px auto 90px auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    color: #fff;
}

/* Clear top level warning/coupon notice bars safely */
.elmipub-checkout-page-wrapper .woocommerce-form-coupon-toggle,
.elmipub-checkout-page-wrapper .woocommerce-NoticeGroup,
.elmipub-checkout-page-wrapper .woocommerce-error,
.elmipub-checkout-page-wrapper .woocommerce-message {
    width: 100% !important;
    margin-bottom: 25px !important;
    box-sizing: border-box;
}

.elmipub-checkout-page-wrapper .woocommerce-info,
.elmipub-checkout-page-wrapper .woocommerce-error {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #222 !important;
    color: #fff !important;
    padding: 18px 20px !important;
    border-radius: 4px !important;
    font-size: 14px;
}

.elmipub-checkout-page-wrapper .woocommerce-info a {
    color: var(--color, #0094de) !important;
    text-decoration: none !important;
    font-weight: 700;
}

/* --- THE MAIN VERTICAL COLOUMN FORM --- */
.elmipub-checkout-page-wrapper form.checkout {
    display: flex !important;
    flex-direction: column !important; /* Stack blocks sequentially downward */
    gap: 50px; /* Generous separation gap between forms and validation cards */
    width: 100% !important;
    box-sizing: border-box;
}

/* 1. TOP BLOCK: Billing & Shipping Forms Area */
.elmipub-checkout-page-wrapper form.checkout #customer_details {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
}

/* 2. BOTTOM BLOCK: Order Review Summary Panel Box Container */
.elmipub-checkout-page-wrapper form.checkout #order_review_heading,
.elmipub-checkout-page-wrapper form.checkout #order_review {
    display: block !important;
    float: none !important;
}

.elmipub-checkout-page-wrapper .checkout-sidebar-sticky-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important; /* Static deployment since it is locked below the fold */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #161616 !important;
    border-radius: 4px !important;
    padding: 35px !important;
    box-sizing: border-box !important;
}

/* --- BILLING FORM CUSTOM INPUT FIELDS --- */
.elmipub-checkout-page-wrapper .woocommerce-billing-fields h3,
.elmipub-checkout-page-wrapper .woocommerce-shipping-fields h3,
.elmipub-checkout-page-wrapper #order_review_heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 25px 0 !important;
    border-bottom: 1px solid #1a1a1a !important;
    padding-bottom: 15px !important;
}

/* Overriding individual Form Rows layout fields */
.elmipub-checkout-page-wrapper .form-row {
    padding: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    float: none !important;
}

.elmipub-checkout-page-wrapper .form-row-first {
    width: 48% !important;
    float: right !important;
}
.elmipub-checkout-page-wrapper .form-row-last {
    width: 48% !important;
    float: left !important;
}
.elmipub-checkout-page-wrapper .form-row-wide {
    clear: both !important;
    width: 100% !important;
}

/* Core Label Typography styling */
.elmipub-checkout-page-wrapper .form-row label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #aaa !important;
}

.elmipub-checkout-page-wrapper .form-row label .required {
    color: #ff4d4d !important;
    text-decoration: none !important;
}

/* Strict Matte Input Field Box Reset */
.elmipub-checkout-page-wrapper .form-row input.input-text,
.elmipub-checkout-page-wrapper .form-row textarea,
.elmipub-checkout-page-wrapper .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid #222 !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.elmipub-checkout-page-wrapper .form-row textarea {
    height: 120px !important;
    padding: 15px !important;
    resize: vertical;
}

/* Select2 drop selector corrections */
.elmipub-checkout-page-wrapper .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}
.elmipub-checkout-page-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    padding: 0 !important;
    text-align: right;
}
.elmipub-checkout-page-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
    left: 15px !important;
    right: auto !important;
}

/* Input Focus States */
.elmipub-checkout-page-wrapper .form-row input.input-text:focus,
.elmipub-checkout-page-wrapper .form-row textarea:focus,
.elmipub-checkout-page-wrapper .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color, #0094de) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
}


/* --- LOWER BLOCK: ORDER REVIEW TABLE MODIFICATIONS --- */
.elmipub-checkout-page-wrapper #order_review_heading {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
}

.elmipub-checkout-page-wrapper table.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 35px !important;
}

.elmipub-checkout-page-wrapper table.shop_table th,
.elmipub-checkout-page-wrapper table.shop_table td {
    padding: 16px 0 !important;
    font-size: 14px !important;
    color: #888 !important;
    border-bottom: 1px solid #161616 !important;
    background: transparent !important;
}

/* Data columns align cleanly against opposite margins */
.elmipub-checkout-page-wrapper table.shop_table th.product-name,
.elmipub-checkout-page-wrapper table.shop_table tr.cart-subtotal th,
.elmipub-checkout-page-wrapper table.shop_table tr.shipping th,
.elmipub-checkout-page-wrapper table.shop_table tr.order-total th {
    text-align: right !important; /* Context tags stay right */
    color: #aaa !important;
}

.elmipub-checkout-page-wrapper table.shop_table td.product-total,
.elmipub-checkout-page-wrapper table.shop_table tr.cart-subtotal td,
.elmipub-checkout-page-wrapper table.shop_table tr.shipping td,
.elmipub-checkout-page-wrapper table.shop_table tr.order-total td {
    text-align: left !important; /* Arithmetic figures align left */
}

.elmipub-checkout-page-wrapper table.shop_table td.product-name {
    text-align: right !important;
    color: #fff !important;
    font-weight: 500;
}

.elmipub-checkout-page-wrapper table.shop_table td.product-name .product-quantity {
    color: var(--color, #0094de) !important;
    font-weight: 700;
    margin-right: 4px;
}

/* Grand Total Row Customization styling overrides */
.elmipub-checkout-page-wrapper table.shop_table tr.order-total th,
.elmipub-checkout-page-wrapper table.shop_table tr.order-total td {
    border-bottom: none !important;
    padding-top: 24px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.elmipub-checkout-page-wrapper table.shop_table tr.order-total td span.amount {
    color: var(--color, #0094de) !important;
}


/* --- PAYMENT GATEWAYS RADIO FRAMEWORK CONTROL --- */
.elmipub-checkout-page-wrapper #payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.elmipub-checkout-page-wrapper #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    border-top: 1px solid #161616 !important;
}

.elmipub-checkout-page-wrapper #payment ul.payment_methods li {
    padding: 20px 0 !important;
    border-bottom: 1px solid #161616 !important;
    color: #aaa !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.elmipub-checkout-page-wrapper #payment ul.payment_methods li input[type="radio"] {
    margin-left: 10px !important;
    margin-top: 2px !important;
    float: right !important;
}

.elmipub-checkout-page-wrapper #payment ul.payment_methods li label {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer;
}

.elmipub-checkout-page-wrapper #payment div.payment_box {
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid #161616 !important;
    color: #777 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin: 15px 0 0 0 !important;
    font-size: 13px !important;
}
.elmipub-checkout-page-wrapper #payment div.payment_box::before {
    display: none !important; /* Clear native triangle tooltip indicator arrows */
}


/* --- SUBMIT ACTIONS PLACE ORDER BUTTON --- */
.elmipub-checkout-page-wrapper #payment button#place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background-color: var(--color, #0094de) !important;
    border: 1px solid var(--color, #0094de) !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.elmipub-checkout-page-wrapper #payment button#place_order:hover {
    background-color: transparent !important;
    color: var(--color, #0094de) !important;
}


/* --- MOBILE RESPONSIVE CONTAINER ADJUSTMENTS --- */
@media only screen and (max-width: 768px) {
    .elmipub-checkout-page-wrapper {
        margin: 20px auto 50px auto;
    }

    .elmipub-checkout-page-wrapper .form-row-first,
    .elmipub-checkout-page-wrapper .form-row-last {
        width: 100% !important;
        float: none !important;
    }
    
    .elmipub-checkout-page-wrapper .checkout-sidebar-sticky-panel {
        padding: 25px 20px !important;
    }
}