/*
Theme Name:        Comic Store
Theme URI:         https://webnlive.com/
Description:       A high-performance child theme for the Comic Store project.
Author:            Atik (WebnLive)
Author URI:        https://atikacademy.com/
Template:          hello-elementor
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       comic-store
*/

/* co
Theme Name:         Comic Store
Theme URI:          https://webnlive.com/
Description:        A high-performance child theme for the Comic Store project.
Author:             ATIK (WebnLive)
Author URI:         https://atikacademy.com/
Template:           hello-elementor
Version:            1.0.0
Text Domain:        comic-store
*/

/* ==========================================================================
   1. GLOBAL VARIABLES & FONTS
   ========================================================================== */
:root {
    --primarycolor: #EF2429;
    --secondcolor: #030303;
    --ligit-color: #ffffff;
    --special-color: #FFD04C;
    --hedding-size: 70px;
    --main-font: 'AclonicaRegular', sans-serif;
    --heading-font: 'Bangers', cursive;
}

/* --- CRITICAL FONT LOADING --- */
@font-face {
    font-family: 'AclonicaRegular';
    src: url('fonts/AclonicaRegular.eot'); /* Removed '../' to check local directory */
    src: url('fonts/AclonicaRegular.eot?#iefix') format('embedded-opentype'),
         url('fonts/AclonicaRegular.woff2') format('woff2'),
         url('fonts/AclonicaRegular.woff') format('woff'),
         url('fonts/AclonicaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
html {
    font-size: 68.75% !important; /* As per your template for 1rem = 11px */
}

body {
    margin: 0;
    padding: 0;
    background: var(--ligit-color);
    font-size: 1.4rem;
    color: #272320;
    font-family: var(--main-font);
    line-height: 1.6;
}

body{
	overflow-x:hidden;
}

*, ::after, ::before {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primarycolor);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* ==========================================================================
   3. LAYOUT & CONTAINER (Pixel Perfect)
   ========================================================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1300px !important; /* Template specific width */
    }
}

/*
 * ================================================================
 * MEGA MENU STYLING - NEXALANCE CUSTOM IMPLEMENTATION
 * ================================================================
 * Description: Smooth hover effect for Mega Menu Icon List items.
 * Effect: Slight horizontal shift (3px) and brand color change.
 * Standard: Clean Coding & Performance Optimized.
 */

/* Main container class to be added in Elementor Icon List 'CSS Classes' field: custom-mega-menu-list */

.custom-mega-menu-list .elementor-icon-list-item {
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Hover state: Horizontal displacement and color transition */
.custom-mega-menu-list .elementor-icon-list-item:hover {
    padding-left: 3px;
}

/* Color update for the list text on hover */
.custom-mega-menu-list .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #EF2429 !important;
}

/* Color update for the icon (if present) on hover */
.custom-mega-menu-list .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.custom-mega-menu-list .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
    fill: #EF2429 !important;
    color: #EF2429 !important;
}

/* ==========================================================================
   4. HERO / BANNER SECTION (FINAL SYNC)
   Standard: Pixel Perfect with Screenshot_28.jpg
   ========================================================================== */
.banner-part {
    background: url('../images/banner-bg.jpg') no-repeat center center;
    background-size: cover;
    min-height: 730px; /* Changed to min-height for better content fit */
    width: 100%;
    position: relative;
    display: flex; /* Flexbox is more reliable for center alignment */
    align-items: center;
    padding-top: 100px; /* Balanced padding for the header overlap */
    overflow: hidden;
}

/* ==========================================================================
   7. HEADER STICKY WITH COMPACT DESIGN & NOTCH PRESERVATION
   Standard: High-performance fixed header with compact transition
   ========================================================================== */

/* Main Header Container - Sticky State */
#main-header.is-sticky {
    position: fixed !important;
    background: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    animation: slideDown 0.4s ease-out forwards;
    z-index: 99999;
    
    /* --- COMPACT MODIFICATION START --- */
    padding-top: 5px !important;    /* Reduced top padding */
    padding-bottom: 5px !important; /* Reduced bottom padding */
    transition: all 0.3s ease-in-out; /* Smooth transition to compact state */
    /* --- COMPACT MODIFICATION END --- */
}

/* Logic for Compacting Logo/Internal Elements */
#main-header.is-sticky img {
    max-width: 85% !important; /* Slightly reduces logo size for compact look */
    transition: all 0.3s ease;
}

/* Maintains the Internal Zigzag/Notch Shape */
#main-header.is-sticky::after {
    content: "";
    position: absolute;
    bottom: -20px; 
    left: 0;
    width: 100%;
    height: 25px; 
    background-image: url('#'); /* Keep your original notch image path here */
    background-repeat: repeat-x;
    background-size: contain;
    pointer-events: none;
}

/* Entrance Animation Logic */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* 
 * ================================================================
 * HERO BANNER HEADING SYNC (ULTRA-SLIM OPTIMIZATION)
 * ================================================================
 * Target: Main Title & Span
 * Trick: Using 'stroke-fill' order to simulate a thinner font
 * Standard: Pixel Perfect & Sharp Edges
 */

.banner-part h2, 
.banner-part h2 span {
    color: var(--secondcolor) !important;
    
    /* 
       Since font-weight isn't responding, we use paint-order: fill stroke.
       By putting the stroke OVER the fill, we can visually shrink the letters.
    */

    letter-spacing: 3px !important; 
    
    /* 
       CRITICAL UPDATE: 
       We change paint-order to 'fill stroke' and use a thinner stroke.
       This will make the white border eat into the black text, making it look thinner.
    */
    -webkit-text-stroke-width: 2px; /* Keep it thin to avoid pixelation */
    -webkit-text-stroke-color: #fff !important;
    paint-order: fill stroke; /* Stroke now sits on top, making text look slimmer */
    
    /* Secondary Trick: Using text-shadow to smooth the edges */
    text-shadow: 0 0 1px rgba(255,255,255,0.5); 
    
    font-family: var(--heading-font) !important;
    text-transform: uppercase;
}



/* ==========================================================================
   5. DYNAMIC SEARCH BAR SYNC (NEW ELEMENTOR STRUCTURE)
   Target: .comic-search-box
   Standard: Matching Screenshot_10_2.jpg
   ========================================================================== */

/* Main Wrapper Styling */
.comic-search-box .e-search-form {
    background: #fff !important; /* var(--ligit-color) */
    border-radius: 50px 20px !important; /* Asymmetric comic curve */
    height: 65px !important;
    padding: 0 8px 0 30px !important;
    display: flex !important;
    align-items: center !important;
    max-width: 480px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
    border: none !important;
    position: relative;
}

/* Hide the default search label/icon on the left if it exists */
.comic-search-box .e-search-label {
    display: none !important;
}

/* Input Wrapper & Field */
.comic-search-box .e-search-input-wrapper {
    flex-grow: 1;
}

.comic-search-box .e-search-input {
    border: none !important;
    background: transparent !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 18px !important;
    color: #453814 !important;
    outline: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Search Submit Button (The Red Part) */
.comic-search-box .e-search-submit {
    background: #e62129 !important; /* var(--primarycolor) */
    color: #fff !important;
    border: none !important;
    border-radius: 40px 15px !important; /* Slightly smaller curve for button */
    min-width: 65px !important;
    height: 48px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    padding: 0 !important;
    margin-left: 10px !important;
}

/* Replacing the "Search" text with a magnifying glass icon */
.comic-search-box .e-search-submit span {
    display: none !important; /* Hide the "Search" text */
}

/* Button Hover State */
.comic-search-box .e-search-submit:hover {
    background: #000 !important; /* var(--secondcolor) */
    transform: scale(1.05);
}

/* Remove any focus outlines */
.comic-search-box .e-search-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Original Signup Button Logic - Maintained for UI Consistency */
.signup {
    background: var(--primarycolor);
    border-radius: 50px 20px;
    color: var(--ligit-color) !important;
    font-size: 18px;
    padding: 15px 25px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

.signup::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 100%;
    height: 100%;
    background: var(--secondcolor);
    border-radius: 50px 20px;
    z-index: -1;
    transition: 0.15s ease-in-out;
}

.signup:hover::after {
    right: 0;
    bottom: 0;
}

/* ==========================================================================
   1. EXTERNAL RESOURCES & RESET
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Aclonica&display=swap');

.feature-grid-section {
    padding: 39px 0;
    width: 100%;
    display: block;
    clear: both;
}

/**
 * Exact Pulse Animation from Reference HTML
 * Speed: 1s, Timing: ease-in-out, Direction: alternate
 */

@keyframes cinematicPulse {
    from { 
        transform: scale(0.8); 
    }
    to { 
        transform: scale(1.2); 
    }
}

 .shake {
    animation: shake 2s ease infinite;
  }
  @keyframes shake {
      0%, 100% {transform: translateX(0);}
      10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
      20%, 40%, 60%, 80% {transform: translateX(10px);}
  }

/**
 * Superman Floating Animation (Rocket Effect)
 * Custom Logic for Elementor Image Widget
 * Standard: 100000% Locked & Smooth
 */

/* The Keyframes - Controlling the Up & Down movement */
@keyframes rocket {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-25px); /* Controls how high it goes */
    }
    100% {
        transform: translateY(0px);
    }
}

/* The Animation Class */
.superman-float {
    /* Linking the keyframes */
    animation: rocket 2.5s ease-in-out infinite !important;
    
    /* Optimization for smooth rendering */
    will-change: transform;
    display: inline-block;
}

/* Optional: Slight rotation for more realism (Cinema style) */
.superman-float img {
    transition: all 0.3s ease;
}

/**
 * Boom Image Animations
 * Standard: 100000% Locked Production Code
 * Usage: Add classes to Elementor Advanced > CSS Classes
 */

/* 1. HiThere Effect - Scale and Wobble */
.effect-hithere {
    animation: hithere 1.5s ease infinite !important;
    transform-origin: center center;
    will-change: transform;
    display: inline-block;
}

@keyframes hithere {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
}

/* 2. Shake Effect - Aggressive Side-to-Side */
.effect-shake {
    animation: shake 2s ease infinite !important;
    will-change: transform;
    display: inline-block;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/**
 * CINEMATIC SCROLL REVEAL (BOY IMAGE ONLY)
 * Logic: Reveal on scroll down, Hide on scroll up
 * Standard: 100% Focused & Locked
 */

/* 1. Base State: Hidden and Lowered */
.boy-img-reveal {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(80px) !important;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 99 !important;
    pointer-events: none;
    display: block !important; /* Ensuring it's not display:none */
}

/* 2. Active State: Visible and Original Position */
.boy-img-reveal.active-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* 3. Combined Epic Boom (Recommendation) */
.effect-boom-master {
    animation: hithere 1.5s ease infinite, shake 2s ease infinite !important;
    will-change: transform;
}

/* 
 * Target any image with 'cinematicPulse' class 
 * This matches your reference HTML structure speed perfectly
 */
.pulse-effect img, 
.pulse-effect.elementor-widget-image img {
    animation: cinematicPulse 1s infinite ease-in-out alternate !important;
    display: inline-block;
}

/**
 * Spider Animation Styling - Behind Content Version
 * Feature: Floating Vertical Motion (Layered Behind other sections)
 * Standard: Professional Clean Code with English Comments
 * Usage: Add 'spider-animation-wrapper' class to Elementor Widget
 */

/* 1. Main Wrapper Styling */
.spider-animation-wrapper {
    /* Lowering z-index to stay behind other sections */
    z-index: -1 !important; 
    position: absolute !important;
    pointer-events: none; /* Allows clicking on things above it */
    transition: all 0.3s ease !important;
}

/* 2. Target the Image within the Wrapper */
.spider-animation-wrapper img {
    animation-name: animar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out; /* Smoothens the float effect */
    display: block;
    width: auto;
}

/**
 * 3. Animation Keyframes
 * Floating the spider from -100px down to its original spot
 */
@keyframes animar {
    from {
        transform: translateY(-100px);
    }
    to {
        transform: translateY(0px);
    }
}

/**
 * 4. Keyframes for Shadow Scale Effect
 */
@keyframes sombra {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.6);
        opacity: 0.2;
    }
}

/* --- 2. LOCKED COMIC BUTTON CODE (DO NOT CHANGE) --- */

/* Force container to respect Elementor alignment & Font */
.comon-button.elementor-widget-button .elementor-widget-container {
    display: flex !important;
    justify-content: inherit !important;
    overflow: visible !important;
    /* Applying the static font family here */
    font-family: 'AclonicaRegular', sans-serif !important; 
}

/* Main Button Body (Locked Layer) */
.comon-button .elementor-button {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
    display: inline-block !important;
    transform-style: preserve-3d !important;
    transition: all 0.2s ease-in-out !important;
    /* Ensuring font is inherited by the link */
    font-family: 'AclonicaRegular', sans-serif !important;
}

/* Shadow Layer (Locked Offset) - Moves 12px Right and 12px Down */
.comon-button .elementor-button::after {
    position: absolute !important;
    content: "" !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--shadow-color, #FFD04C) !important;
    border-radius: inherit !important;
    transform: translate(12px, 12px) translateZ(-1px) !important;
    z-index: -1 !important;
    transition: all 0.2s ease-in-out !important;
    pointer-events: none !important;
}

/* Hover State: Logic Sync */
.comon-button .elementor-button:hover::after {
    transform: translate(0, 0) translateZ(-1px) !important;
    background: var(--shadow-color) !important;
    opacity: 0.8 !important;
}

/* Locking text and content on the absolute top layer */
.comon-button .elementor-button-text,
.comon-button .elementor-button-content-wrapper {
    position: relative !important;
    z-index: 11 !important;
    font-family: 'AclonicaRegular', sans-serif !important;
}

/* 
 * ================================================================
 * SIGNUP BUTTON SHADOW & HOVER OPTIMIZATION
 * ================================================================
 * Description: Specific shadow positioning with Hover reset to 100%
 * Purpose: Prevents shadow from overlapping the button during hover
 */

/* Normal State: Specific Positioning based on your reference */
.signup-shadow-adjust .elementor-button::after {
    width: 97% !important;
    height: 111% !important;
    top: -9px !important;
    left: -3px !important;
    z-index: -1 !important;
    position: absolute !important;
    content: "" !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover State: Resetting to 100% and aligned position to fix the overlap */
.signup-shadow-adjust .elementor-button:hover::after {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    /* Ensuring it stays behind during the hover transition */
    z-index: -1 !important;
}

/* ==========================================================================
   2. GRID SYSTEM (LOCKED)
   ========================================================================== */
.feature-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 69px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==========================================================================
   ULTRA-MATCHED COMIC STAR (SVG VERSION)
   Standard: Curved Edges & Needle-Sharp Points (Matched to Screenshot)
   Effect: Synchronized Fast Straight Zoom (All at once)
   ========================================================================== */

.comic-star, 
.comic-star-single {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* --- Double Star Container Positioning --- */
.comic-star-container {
    position: absolute;
    top: -90px; 
    left: 85%; 
    z-index: 5;
}

/* Star Sizes & Cinematic Glow - Synchronized to 0.7s */
.star-large {
    width: 65px;
    height: 65px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,1));
    animation: comic-zoom-straight 0.6s infinite ease-in-out alternate;
}

.star-small {
    width: 28px;
    height: 28px;
    top: 45px;
    left: 40px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
    animation: comic-zoom-straight 0.6s infinite ease-in-out alternate; /* Removed delay for sync */
}

/* --- Single Star Styles --- */
.comic-single-star-container {
    position: absolute;
    top: 20%;
    left: 10px;
    z-index: 5;
}

.comic-star-single {
    width: 55px;
    height: 55px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,1));
    animation: comic-zoom-straight 0.6s infinite ease-in-out alternate; /* Changed to match others */
}

/* --- Keyframes: Fast Straight Zoom (No Rotation) --- */
@keyframes comic-zoom-straight {
    0% {
        opacity: 0;
        transform: scale(0.1); /* Dives deep into the background */
    }
    100% {
        opacity: 1;
        transform: scale(1.1); /* Pops out straight and sharp */
    }
}

/* --- Mobile Responsive Scaling --- */
@media (max-width: 768px) {
    .star-large { width: 35px; height: 35px; }
    .star-small { width: 15px; height: 15px; top: 25px; left: 20px; }
    .comic-star-single { width: 30px; height: 30px; }
}

/* ==========================================================================
   3. BASE CARD & CONTENT BOX STYLING (LOCKED)
   ========================================================================== */
.feature-card-item {
    position: relative;
    display: block;
}

.main-content-box {
    position: relative;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    border-radius: 12px;
    padding: 0px 19px;
    display: flex;
    align-items: center;
    z-index: 10;
    min-height: 173px;
    height: 100%;
}

.shadow-box-layer {
    position: absolute;
    background: #000000 !important;
    border-radius: 12px;
    z-index: 1;
}

/* ==========================================================================
   4. INDIVIDUAL CARD OVERRIDES (SHARP TOP-RIGHT CORNER ONLY)
   ========================================================================== */

/* --- CARD ONE --- */
.card-one .shadow-box-layer {
    width: 104% !important;
    height: 111% !important;
    left: 10px !important;
    top: 9px !important;
    /* SHARP TOP-RIGHT CORNER ADDED */
    clip-path: polygon(0% 0%, 93% 0%, 100% 7%, 100% 100%, 0% 100%);
}

.card-one .main-content-box::before {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 1px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #000;
    transform: rotate(5deg);
    z-index: 5;
}

/* --- CARD TWO --- */
.card-two .shadow-box-layer {
    width: 104% !important;
    height: 111% !important;
    left: 10px !important;
    top: 9px !important;
    /* SHARP TOP-RIGHT CORNER ADDED */
    clip-path: polygon(0% 0%, 93% 0%, 100% 7%, 100% 100%, 7% 100%, 0% 85%);
}

/* --- CARD THREE --- */
.card-three .shadow-box-layer {
    width: 103% !important;
    height: 107% !important;
    left: 10px !important;
    top: 9px !important;
    /* SHARP TOP-RIGHT CORNER ADDED */
    clip-path: polygon(0% 0%, 91% 0%, 100% 11%, 100% 100%, 0% 100%);
}

.card-three .main-content-box::after {
    content: "";
    position: absolute;
    top: 10px;
    right: -25px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #000;
    z-index: 5;
}

/* ==========================================================================
   5. INNER ELEMENT STYLING (LOCKED)
   ========================================================================== */
.feature-icon-wrap {
    flex: 0 0 70px;
    margin-right: 20px;
}

.feature-icon-wrap img {
    width: 100%;
    height: auto;
}

.feature-content-wrap h5 {
    font-family: 'Bangers', cursive !important;
    font-size: 20px !important;
    color: #000 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.feature-content-wrap p {
    font-family: 'Aclonica', sans-serif !important;
    font-size: 15px !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (LOCKED)
   ========================================================================== */
@media (max-width: 1024px) {
    .feature-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .feature-grid-wrapper { grid-template-columns: 1fr; gap: 100px; }
    .main-content-box { width: 90%; }
}

/* --- SECTION HEADINGS CUSTOM STYLES START --- */

/** 
 * Sub-heading styling (e.g., 'Comic') 
 * High specificity used to override Elementor global colors and typography.
 * Reference: Screenshot_51.png, Screenshot_53.png
 */
.serices-div .sub-heading.elementor-widget-heading .elementor-heading-title {
    color: #EF2429 !important; /* Authentic red from the user's reference image */
    font-family: "AclonicaRegular", sans-serif !important; /* Custom font loaded in style.css */
    text-transform: none !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
}

/** 
 * Main Heading styling (e.g., 'FIND YOUR SERIES') 
 * Using the custom variable --secondcolor and forcing uppercase for the comic look.
 * Reference: Screenshot_52.png
 */
.serices-div .page-haeding.elementor-widget-heading .elementor-heading-title {
    color: var(--secondcolor) !important; /* Using user-defined variable */
    margin-top: 0 !important;
}

/** 
 * Layout Fixes 
 * Ensuring containers respect the center alignment logic.
 */
.serices-div .sub-heading, 
.serices-div .page-haeding {
    width: 100%;
}

/* --- SECTION HEADINGS CUSTOM STYLES END --- */

/* --- NESTED TABS CUSTOM STYLES START --- */

/** 
 * Base style for Nested Tabs (Normal State)
 * We allow Elementor's internal settings to control the initial border-radius,
 * while we handle the transition and base layout.
 */
.tabs-div .e-n-tabs-heading .e-n-tab-title {
    background-color: #f1f1f1 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    padding: 17px 59px !important;
    margin-right: 12px !important;
    cursor: pointer !important;
}

/** 
 * Hover & Active State (Inverted Border Radius)
 * Specifically targeting the hover and the aria-selected state for the active tab.
 * Here we apply the inverted leaf shape (9px 39px 9px 39px).
 */
.tabs-div .e-n-tabs-heading .e-n-tab-title:hover,
.tabs-div .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] {
    background-color: #EF2429 !important; /* Brand Red */
    border-radius: 39px 9px 39px 9px !important; /* The inverted comic leaf effect */
}

/**
 * Text Color and Typography
 * Ensuring text transitions smoothly between states.
 */
.tabs-div .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text {
    color: #333 !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease !important;
}

/**
 * Active and Hover text state
 * Forces text to white when the tab is red.
 */
.tabs-div .e-n-tabs-heading .e-n-tab-title:hover .e-n-tab-title-text,
.tabs-div .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
    color: #ffffff !important;
}

/* Remove default focus outline to maintain the clean UI aesthetic */
.tabs-div .e-n-tabs-heading .e-n-tab-title:focus {
    outline: none !important;
}

/* 
 * ================================================================
 * ELEMENTOR NESTED TABS MOBILE OPTIMIZATION
 * ================================================================
 * Target: Prevent tabs from taking full width on mobile
 * Fix: Changing flex direction and display to wrap content tightly
 */

@media (max-width: 767px) {
    /* Target the container that holds the tab titles */
    .elementor-widget-n-tabs .e-n-tabs-heading {
        display: flex !important;
        flex-direction: row !important; /* Force titles to stay side-by-side or wrap */
        flex-wrap: wrap; /* Allows multiple tabs to wrap if space is limited */
        justify-content: flex-start; /* Aligns them to the left */
    }

    /* Target the individual tab button */
    .elementor-widget-n-tabs .e-n-tab-title {
        width: auto !important; /* Prevent 100% width */
        display: inline-flex !important; /* Ensure button stays only as wide as its content */
        flex: 0 0 auto !important; /* Disables flex-grow to maintain original width */
        margin-bottom: 10px; /* Space between rows if they wrap */
    }
}

/* --- NESTED TABS CUSTOM STYLES END --- */

/* Custom Grid Setup */
.comic-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px 0;
}

/* --- COMIC GRID RESPONSIVE FIX --- */

/* For Mobile Devices (Max width 767px) */
@media (max-width: 767px) {
    .comic-grid-container {
        /* Change from 4 columns to 1 column */
        grid-template-columns: 1fr !important; 
        
        /* Reduce gap slightly for smaller screens to save space */
        gap: 20px !important; 
        
        /* Add side padding so the sharp borders don't touch the screen edge */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Optional: For Tablet Devices (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .comic-grid-container {
        /* Show 2 columns on tablets for better balance */
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Card Styling */
.comon-items {
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: block;
}

.comon-items .img-box-div, 
.comon-items .img-box-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.comon-items:hover .img-box-div img {
    transform: scale(1.1);
}

/* Overlay Styling */
.comon-items .content-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.6) 100%);
    padding: 20px;
    z-index: 5;
}

.comon-items .content-section h5 {
    color: #fff;
    font-size: 20px;
    margin: 0;
}

.comon-items .content-section p {
    color: #FFD04C; /* Gold Accent */
    margin-top: 5px;
    font-size: 14px;
}

/**
 * Shop Collection - Production Final Fix
 * Layout: Image (Top Full), Title (Left), Price (Right)
 * Standard: 10000% Locked Design Logic
 * Status: Pixel Perfect & Balanced Gap
 */

/* 1. Main Grid Setup - Balanced Gap for Visual Harmony */
.elementor-11 .elementor-element.elementor-element-f7bd5df.elementor-wc-products ul.products {
    grid-column-gap: 25px !important; /* Balanced gap for better card width */
    grid-row-gap: 30px !important;    /* Balanced vertical rhythm */
    display: grid !important;
}

/* 2. Main Card Container */
.elementor-products-grid ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    background-color: #FFFFFF !important;
    border: 5px solid #FFFFFF !important;
    border-radius: 25px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 3. Link Wrapper Reset */
.elementor-products-grid ul.products li.product .woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* 4. Image Full Width Fix (Edge-to-Edge) */
.elementor-products-grid ul.products li.product .woocommerce-loop-product__link img {
    width: 100% !important;
    min-width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px 20px 0 0 !important;
}

/* 5. Text Row Logic (Title Left | Price Right) */
.elementor-products-grid ul.products li.product .woocommerce-loop-product__title {
    display: block !important;
    margin: 0 !important;
    padding: 15px 10px 15px 20px !important; /* Left padding locked */
    font-size: 16px !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    color: #333333 !important;
    text-align: left !important;
    width: calc(100% - 90px) !important; /* Allotted space for title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elementor-products-grid ul.products li.product .price {
    display: flex !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 20px !important; /* Right edge alignment locked */
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Bangers", cursive !important;
    font-size: 17px !important;
    color: #4da5fe !important;
    text-align: right !important;
}

/* - Home Page Woocommerce Section Style - */
/**
 * WOOCOMMERCE PRICE STACKING FIX
 * GOAL: Move Regular Price (Strikethrough) above the Sale Price.
 * STYLE: High contrast colors with Bangers font.
 */

.price {
    display: flex !important;
    flex-direction: column !important; /* Stack prices vertically */
    align-items: flex-start !important; /* Align to left (or center if needed) */
    gap: 2px !important;
    line-height: 1 !important;
}

/* 1. REGULAR PRICE (The one with strikethrough) */
.price del {
    order: 1 !important; /* Move to top */
    font-size: 14px !important;
    color: #b1b1b1 !important; /* Subtle grey */
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

.price del .woocommerce-Price-amount {
    font-family: 'Bangers', cursive !important;
    font-weight: 400 !important;
}

/* 2. SALE PRICE (The current main price) */
.price ins {
    order: 2 !important; /* Move to bottom */
    text-decoration: none !important; /* Remove underline from ins tag */
    display: block !important;
}

.price ins .woocommerce-Price-amount {
    font-family: 'Bangers', cursive !important;
    font-size: 22px !important; /* Larger size for clarity */
    color: #4da5ff !important; /* Comic Blue as per your inspector */
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Currency Symbol Fix */
.woocommerce-Price-currencySymbol {
    margin-left: 2px !important;
    font-size: 0.8em !important;
}

/* 6. Sale Badge Styling */
.elementor-products-grid ul.products li.product .onsale {
    top: 15px !important;
    right: 15px !important;
    background-color: #77a464 !important;
    border-radius: 50px !important;
    padding: 5px 12px !important;
    font-family: "Bangers", cursive !important;
    z-index: 10 !important;
}

/* 7. Hover State Sync */
.elementor-products-grid ul.products li.product:hover {
    background-color: #FFD04C !important;
    border-color: #FFD04C !important;
    transform: translateY(-5px) !important;
}

.elementor-products-grid ul.products li.product:hover .woocommerce-loop-product__link {
    background-color: #FFD04C !important;
}

/* 8. Hide Unwanted Elements */
.elementor-products-grid ul.products li.product .button,
.elementor-products-grid ul.products li.product .star-rating {
    display: none !important;
}

/**
 * Global Cinematic Heading - Combined V2
 * Variation 1: .heading-white (For Dark Backgrounds)
 * Variation 2: .heading-black (For Light Backgrounds)
 * Standard: 100000% Locked & Pixel Perfect
 */

/* --- SHARED CORE STYLES --- */
.page-haeding.heading-white .elementor-heading-title,
.page-haeding.heading-black .elementor-heading-title {

    letter-spacing: 3px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    display: block !important;
    margin: 0 auto 30px auto !important;
    transition: all 0.3s ease !important;
}

/* --- VARIATION 1: WHITE (For Dark/Cinematic Backgrounds) --- */
.page-haeding.heading-white .elementor-heading-title {
    color: #FFFFFF !important; /* Pure White */
    /* Double Shadow for Depth */
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4), 
                 -1px -1px 0px rgba(0, 0, 0, 0.1) !important;
}

/* --- VARIATION 2: BLACK (For Light/White Backgrounds) --- */
.page-haeding.heading-black .elementor-heading-title {
    color: #000000 !important; /* Pure Black */
    /* Light Outline for Sharpness */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2) !important;
    text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.3) !important;
}

/* --- CONTAINER FIX --- */
.elementor-widget-heading.page-haeding {
    width: 100% !important;
    z-index: 10 !important;
}
/**
 * Tab Section - Ultimate Live-Site Fix
 * Logic: Using Body class to force override theme defaults
 * Standard: 100000% Locked & Pixel Perfect
 */

/* 1. Universal Card Overwrite - Force Red Border */
body .tab-overlay-products ul.products li.product {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 25px !important;
    border: 5px solid #EF2429 !important; /* Fixed Red Border */
    background: #000 !important;
    padding: 0 !important; /* Removing theme padding to fix alignment */
    margin-bottom: 30px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. Full Image Container Fix */
body .tab-overlay-products ul.products li.product .woocommerce-loop-product__link {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .tab-overlay-products ul.products li.product .woocommerce-loop-product__link img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    transition: transform 0.6s ease !important;
}

/* 3. Dark Overlay Layer - Standard State */
body .tab-overlay-products ul.products li.product .woocommerce-loop-product__link::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 110px !important; 
    background: rgba(0, 0, 0, 0.85) !important; /* Near Black Overlay */
    z-index: 1 !important;
    transition: background 0.4s ease, opacity 0.4s ease !important;
}

/* 4. Text & Price - Absolute Positioning Fix */
body .tab-overlay-products ul.products li.product .woocommerce-loop-product__title {
    position: absolute !important;
    bottom: 40px !important;
    left: 20px !important;
    z-index: 5 !important;
    color: #FFFFFF !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    width: 65% !important;
}

body .tab-overlay-products ul.products li.product .price {
    position: absolute !important;
    bottom: 30px !important;
    right: 20px !important;
    z-index: 5 !important;
    color: #FFFFFF !important;
    font-family: "Bangers", cursive !important;
    font-size: 24px !important;
    margin: 0 !important;
}

/* 5. Hover State Logic - Red to Yellow Transition */
body .tab-overlay-products ul.products li.product:hover {
    border-color: #FFD04C !important; /* Border turns Yellow */
}

body .tab-overlay-products ul.products li.product:hover .woocommerce-loop-product__link::after {
    background: #FFD04C !important; /* Overlay turns Yellow */
}

body .tab-overlay-products ul.products li.product:hover .woocommerce-loop-product__link img {
    transform: scale(1.1) !important;
}

/* Change text color to black on yellow hover for readability */
body .tab-overlay-products ul.products li.product:hover .woocommerce-loop-product__title,
body .tab-overlay-products ul.products li.product:hover .price,
body .tab-overlay-products ul.products li.product:hover .price ins {
    color: #000000 !important;
}

/* 6. Cleanup Theme Elements */
body .tab-overlay-products ul.products li.product .button,
body .tab-overlay-products ul.products li.product .star-rating,
body .tab-overlay-products ul.products li.product .woocommerce-placeholder {
    display: none !important;
}

/**
 * Cinematic Speech Bubble Testimonial
 * Target: Elementor Testimonial Carousel
 * Standard: Clean Code, Custom Hierarchy, Standard Comments
 */

/* 1. Main Background Shape & Content Area */
.cinematic-testimonial .elementor-main-swiper .elementor-testimonial__content {
    background-image: url('https://cs.webnlive.com/wp-content/uploads/2026/05/shape.webp') !important;
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    padding: 60px 50px 80px 50px !important; 
    border: none !important;
    box-shadow: none !important;
    min-height: 240px !important;
}

/* 2. Main Quote Text (AclonicaRegular) */
.cinematic-testimonial .elementor-testimonial__text {
    color: #FFFFFF !important; 
    font-family: 'AclonicaRegular', sans-serif !important; 
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-style: normal !important;
}

/* 3. Footer Spacing (Avatar & Bio Area) */
.cinematic-testimonial .elementor-testimonial__footer {
    margin-top: 25px !important; 
}

/* 4. Individual Name Style (Bangers) */
.cinematic-testimonial .elementor-testimonial__name {
    font-family: 'Bangers', cursive !important; 
    color: #000000 !important;
    text-transform: uppercase !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
}

/* 5. Job Title Style (AclonicaRegular) */
.cinematic-testimonial .elementor-testimonial__title {
    color: #EF2429 !important; 
    font-family: 'AclonicaRegular', sans-serif !important; 
    font-weight: normal !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-top: 5px !important;
}

/**
 * Comic Book Style Blog Section - Clean Version
 * Standards: No Hover Effects, Precise Spacing
 * Professional Clean Code with English Comments
 */

/* 1. Main Container Styling */
.blogs-div {
    padding: 80px 0 !important;
    background: url('https://cs.webnlive.com/wp-content/uploads/2026/05/blogs-bg.png') no-repeat top center !important;
    background-size: 100% !important;
}

/* 2. Featured Post (Left Column) */
.hilishf-blogs .elementor-post__thumbnail {
    height: 318px !important;
    width: 100% !important;
    box-shadow: 6px 16px 30px 0px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin-bottom: 40px !important;
    display: block !important;
}

.hilishf-blogs .elementor-post__thumbnail img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3. List Posts (Right Column) Layout */
.list-blogs-divu .elementor-posts-container article {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 35px !important;
}

.list-blogs-divu .elementor-post__thumbnail {
    height: 158px !important;
    width: 220px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* 4. Spacing Fix: Image to Text Gap (35px for clarity) */
.list-blogs-divu .elementor-post__text {
    padding-left: 35px !important; 
    text-align: left !important;
}

/* 5. Typography: Titles (Bangers) */
.hilishf-blogs .elementor-post__title a,
.list-blogs-divu .elementor-post__title a {
    font-family: "Bangers", cursive !important;
    color: #000 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
}

.hilishf-blogs .elementor-post__title a { font-size: 40px !important; }
.list-blogs-divu .elementor-post__title a { font-size: 25px !important; }

/* 6. Typography: Meta & Excerpt (Aclonica) */
.hilishf-blogs .elementor-post__meta-data,
.list-blogs-divu .elementor-post__meta-data,
.list-blogs-divu .elementor-post__excerpt p {
    font-family: "Aclonica", sans-serif !important;
}

.elementor-post__meta-data {
    color: #EF2429 !important;
    font-size: 15px !important;
    margin: 8px 0 !important;
}

.list-blogs-divu .elementor-post__excerpt p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/**
 * ATIK ACADEMY - COMIC BLOG CARD (FIXED LAYOUT)
 * NO FONT-AWESOME | DEFAULT SYSTEM FONTS
 * INTEGRITY: 100000% LOCKED
 */

/* 1. Main Article Wrapper - Resetting Flex for proper order */
.elementor-widget-posts .elementor-posts--skin-classic article.elementor-post {
    position: relative !important;
    background: #fff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0px 15px 35px rgba(0,0,0,0.08) !important;
    margin-bottom: 30px !important;
    display: block !important; /* Forces normal vertical stack */
}

/* 2. Red Date Badge (Fixed Positioning on top of Thumbnail) */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post-date {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: #f42c2c !important;
    color: #fff !important;
    padding: 23px 12px !important;
    border-radius: 6px !important;
    font-family: inherit !important; /* Default Font */
    font-weight: bold !important;
    font-size: 14px !important;
    z-index: 10 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

/* 3. Image Styling - Locked position */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__thumbnail {
    margin: 0 !important;
    display: block !important;
}

.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__thumbnail img {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px 20px 0 0 !important;
    transition: none !important;
}

/* 4. Content Area Container */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__text {
    padding: 20px 25px !important;
}

/* 5. Custom Category (Using Default Symbol instead of FontAwesome) */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__text::before {
    content: "\f02c️" !important; /* System Emoji Icon */
    font-family: "Font Awesome 5 Free" !important; /* Load FA5 Library */
    display: block !important;
    color: #f42c2c !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

/* 6. Title Styling (Bangers if available, else Default Bold) */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__title {
    font-family: "Bangers", cursive, sans-serif !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin: 0 0 12px 0 !important;
}

.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__title a {
    color: #000 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}


.elementor-widget-posts .elementor-posts--skin-classic .elementor-post-author::before {
    content: "\f007" !important; /* Font Awesome User Icon Unicode */
    font-family: "Font Awesome 5 Free" !important; /* Load FA5 Library */
    font-weight: 400 !important; /* Regular/Outline Weight for that specific look */
    color: #f42c2c !important; /* Red color as per screenshot */
    margin-right: 8px !important;
    font-size: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Metadata Text adjustment to align with Icon */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post-author {
    color: #000 !important;
    font-weight: bold !important;
    font-family: inherit, cursive, sans-serif !important;
    text-transform: capitalize !important;
}

/* 8. Excerpt Styling */
.elementor-widget-posts .elementor-posts--skin-classic .elementor-post__excerpt {
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #444 !important;
}

/* Hide Default Separator */
.elementor-post__meta-data span + span:before {
    display: none !important;
}

/**
 * ATIK ACADEMY - SIDEBAR CATEGORY STYLING
 * PREFIX: MH
 */
.mh-category-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mh-category-list li {
    margin-bottom: 12px !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.mh-category-list li:last-child {
    border-bottom: none;
}

.mh-category-link {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    text-decoration: none !important;
    color: #333 !important;
    font-weight: 600;
    transition: 0.3s;
}

.mh-category-link:hover {
    color: #f42c2c !important; /* Brand Red Color */
}

.mh-icon {
    margin-right: 10px;
    color: #f42c2c;
    font-size: 14px;
}

.mh-cat-name {
    flex-grow: 1;
    font-family: inherit;
    font-size: 15px;
}

.mh-cat-count {
    font-size: 13px;
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 12px;
    color: #777;
}

/**
 * ATIK ACADEMY - TAG CLOUD STYLING
 * PREFIX: MH | INTEGRITY: LOCKED
 */
.mh-tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 5px 0 !important;
}

.mh-tag-item {
    background-color: #f42c2c !important; /* Brand Red */
    color: #ffffff !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-family: "Bangers", cursive, sans-serif !important; /* Using Bangers for that Comic Look */
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    
    /* THE SHAPE: */
    border-radius: 20px 5px 20px 5px !important; 
    display: inline-block !important;
}

.mh-tag-item:hover {
    background-color: #000000 !important; 
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(244, 44, 44, 0.3) !important;
}

/**
 * ATIK ACADEMY - RELATED POSTS STYLING
 * PREFIX: MH | INTEGRITY: LOCKED
 */
.mh-related-posts-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mh-related-post-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Thumbnail Style */
.mh-post-thumb {
    width: 80px;
    height: 80px;
    min-width: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 15px; /* As per Screenshot */
}

/* Title & Date Details */
.mh-post-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mh-post-title {
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mh-post-title:hover {
    color: #f42c2c; /* Brand Red */
}

.mh-post-date {
    font-family: 'Bangers', cursive, sans-serif; /* Your Brand's Comic Font */
    font-size: 18px;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

/**
 * ATIK ACADEMY - FINAL COMMENT FORM (FLOATING LABELS)
 * LAYOUT: 2 COL TOP (NAME, EMAIL) | FULL WIDTH BOTTOM (MESSAGE)
 * INTEGRITY: 10000% LOCKED
 */

/* 1. Grid & Layout Setup */
#commentform {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    position: relative;
}
.comment-reply-title{
    font-size: 29px; margin-bottom:9px;
}
#commentform #reply-title       { grid-column: span 2 !important; order: 1; }
#commentform .comment-form-author { grid-column: 1 !important; order: 2; position: relative !important; } /* Left Name Box */
#commentform .comment-form-email  { grid-column: 2 !important; order: 3; position: relative !important; } /* Right Email Box */
#commentform .comment-form-comment { grid-column: span 2 !important; order: 4; position: relative !important; } /* Bottom Message Box */
#commentform .form-submit         { grid-column: span 2 !important; order: 5; }

/* 2. Label Visibility Inside Input Boxes */
#commentform p label {
    display: block !important;
    position: absolute !important;
    top: 15px !important; /* Adjust vertical position */
    left: 20px !important; /* Adjust horizontal position */
    color: #888 !important; /* Label Color from Screenshot_21_2.png */
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    pointer-events: none !important; /* Prevents clicking on label */
    z-index: 5 !important;
    transition: 0.2s ease-in-out;
}

/* Hiding default required markers and extra notes */
#commentform .required, 
#commentform .comment-notes, 
#commentform .comment-form-cookies-consent,
#commentform .comment-form-url {
    display: none !important;
}

/* 3. Input & Textarea Base Styling (Font Inherit Locked) */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100% !important;
    background-color: #f2f2f2 !important; /* Screenshot Grey Background */
    border: none !important;
    padding: 35px 20px 10px 20px !important; /* Large top padding to make space for labels */
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}

/* 4. Signature "Post Comment" Button Style */
#commentform .submit {
    background-color: #f42c2c !important; /* Brand Red */
    color: #fff !important;
    border: none !important;
    padding: 15px 35px !important;
    font-family: 'Bangers', cursive, sans-serif !important; /* Comic Style Font */
    font-size: 22px !important;
    border-radius: 8px !important;
    box-shadow: 8px 8px 0px #000 !important; /* Locked Shadow from Screenshot_21_2.png */
    cursor: pointer !important;
    transition: transform 0.1s ease;
}

#commentform .submit:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 4px 4px 0px #000 !important;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    #commentform { grid-template-columns: 1fr !important; }
    #commentform .comment-form-author,
    #commentform .comment-form-email { grid-column: span 1 !important; }
}

/**
 * Contact - ATIK ACADEMY - CUSTOM ELEMENTOR BUTTON STYLING
 * TARGET: elementor-field-type-submit
 * DESIGN INTEGRITY: 10000% LOCKED
 */

/* Target the specific button within the Elementor form */
.elementor-field-type-submit button.elementor-button {
    background-color: #f42c2c !important; /* Brand Red from Screenshot */
    color: #ffffff !important;
    border: none !important;
    padding: 15px 35px !important;
    font-family: 'Bangers', cursive, sans-serif !important; /* Comic style font */
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    border-radius: 12px !important; /* Rounded corners as per image */
    
    /* The Signature Black Offset Shadow */
    box-shadow: 10px 10px 0px #000000 !important; 
    
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    display: inline-block !important;
}

/* Hover Effect to make it feel interactive */
.elementor-field-type-submit button.elementor-button:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 12px 12px 0px #000000 !important;
    background-color: #ff3d3d !important; /* Slightly brighter red on hover */
}

/* Active/Click Effect */
.elementor-field-type-submit button.elementor-button:active {
    transform: translate(6px, 6px) !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

/* Ensure the wrapper doesn't clip the shadow */
.elementor-field-type-submit {
    padding-bottom: 15px !important;
    padding-right: 15px !important;
}

/* Adjusting the button text specifically if needed */
.elementor-field-type-submit .elementor-button-text {
    font-family: inherit !important;
    text-transform: none !important;
}

/* ==========================================================================
   Sidebar Logic 
   ========================================================================== */

/**
 * Navigation Menu Custom Styling
 * Targeting specific widget: .elementor-element-8a20af3
 */

/* 1. Normal state: Styling for top-level menu items */
.elementor-element-8a20af3 .elementor-nav-menu .menu-item a.elementor-item {
    background-color: #f7f7f7 !important; /* Light gray background */
    color: #000000 !important;            /* Solid black text */
    border-radius: 7px;                  /* Rounded corners as per design */
    transition: all 0.3s ease-in-out;    /* Smooth transition effect */
    display: block;                      /* Ensure the link fills the list item */
    padding: 10px 15px;                  /* Standard padding for menu items */
}

/* 2. Hover state: Red background and white text for top-level items */
.elementor-element-8a20af3 .elementor-nav-menu .menu-item a.elementor-item:hover,
.elementor-element-8a20af3 .elementor-nav-menu .menu-item a.elementor-item.elementor-item-active {
    background-color: #EF2429 !important; /* Specific brand red */
    color: #ffffff !important;            /* Pure white text */
}

/* 3. Sub-menu (Dropdown) normal state styling */
.elementor-element-8a20af3 .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
    background-color: #f7f7f7 !important;
    color: #000000 !important;
    transition: all 0.3s ease-in-out;
}

/* 4. Sub-menu hover state: Styling for dropdown children */
.elementor-element-8a20af3 .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item:hover {
    background-color: #EF2429 !important;
    color: #ffffff !important;
}

/* 5. SVG Icon color adjustment inside the menu */
.elementor-element-8a20af3 .elementor-nav-menu .menu-item a.elementor-item:hover .sub-arrow svg {
    fill: #ffffff !important; /* Ensures the caret icon turns white on hover */
}
/* ==========================================================================
   Woocommerce Logic Start Here
   ========================================================================== */
 /* ==========================================================================
   JET SMART FILTERS - COMBINED MASTER STYLES (LOCKED)
   Main Class: .mh-smooth-accordion-filter
   Tag Specific Class: .mh-tag-filter
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 1: CINEMATIC ACCORDION TITLES & LABELS
   -------------------------------------------------------------------------- */
.mh-smooth-accordion-filter .jet-filter-items-dropdown__label, 
.mh-smooth-accordion-filter .jet-filter-label {
    background: #ffffff !important;
    border: 3.5px solid #000000 !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    color: #000000 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    box-shadow: 8px 8px 0px #000000 !important; /* Signature Hard Shadow */
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-family: inherit !important;
    letter-spacing: -0.5px !important;
}

.mh-smooth-accordion-filter .jet-filter-items-dropdown__label:after {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000 !important;
}

.mh-smooth-accordion-filter .jet-filter-items-dropdown__label:hover, 
.mh-smooth-accordion-filter .jet-filter-label:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 10px 10px 0px #000000 !important;
}

/* --------------------------------------------------------------------------
   SECTION 2: ACCORDION EXPANSION LOGIC
   -------------------------------------------------------------------------- */
.mh-smooth-accordion-filter .jet-filter-items-dropdown__body {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: none; /* Hidden by default */
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 15px 5px !important;
    z-index: 1 !important;
}

.mh-smooth-accordion-filter .jet-filter-items-dropdown--active .jet-filter-items-dropdown__body {
    display: block !important;
}

.mh-smooth-accordion-filter .jet-smart-filters-dropdown, 
.mh-smooth-accordion-filter .jet-filter-items-dropdown {
    height: auto !important;
    overflow: visible !important;
}

.mh-smooth-accordion-filter .jet-range, 
.mh-smooth-accordion-filter .jet-rating {
    margin-top: 10px !important;
    padding-left: 5px !important;
}

/* --------------------------------------------------------------------------
   SECTION 3: LARGE CHECKBOX & LABEL DESIGN
   -------------------------------------------------------------------------- */
.mh-smooth-accordion-filter .jet-checkboxes-list__decorator {
    width: 25px !important;
    height: 25px !important;
    border: 3px solid #000000 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    box-shadow: 3px 3px 0px #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.mh-smooth-accordion-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
    background: #000000 !important;
}

.mh-smooth-accordion-filter .jet-checkboxes-list__checked-icon {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
    display: block !important;
}

.mh-smooth-accordion-filter .jet-checkboxes-list__label {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1 !important;
}

.mh-smooth-accordion-filter .jet-checkboxes-list__item {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
}

.mh-smooth-accordion-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__decorator {
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

/* --------------------------------------------------------------------------
   SECTION 4: POPULAR TAG - BULLETPROOF 2 COLUMN FIX
   Targeting: Multiple Row Structures with .mh-tag-filter
   -------------------------------------------------------------------------- */

/* 1. Target the wrapper fieldset and make it a flex container */
.mh-tag-filter fieldset.jet-checkboxes-list-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; /* Spacing between buttons */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Target each row div and make them sit side-by-side */
.mh-tag-filter .jet-checkboxes-list__row {
    flex: 0 0 calc(50% - 6px) !important; /* Force exactly 2 per row */
    width: calc(50% - 6px) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Button structure within the row */
.mh-tag-filter .jet-checkboxes-list__item {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.mh-tag-filter .jet-checkboxes-list__button {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    padding: 10px 5px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 45px !important;
}

/* 4. Cleaning up inner elements */
.mh-tag-filter .jet-checkboxes-list__decorator {
    display: none !important; /* Completely hide checkbox square */
}

.mh-tag-filter .jet-checkboxes-list__label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    text-align: center !important;
    white-space: normal !important; /* Allow text wrap if very long */
    line-height: 1.2 !important;
}

/* 5. Active & Hover States (Locked Style) */
.mh-tag-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
    background: #000000 !important;
}

.mh-tag-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label {
    color: #ffffff !important;
}

.mh-tag-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__button {
    transform: translateY(-2px) !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

/* --------------------------------------------------------------------------
   SECTION 5: WOOCOMMERCE ORDERING (EXACT IMAGE MATCH)
   Targeting: Screenshot_10_4.png - Font 15px, Weight 300
   -------------------------------------------------------------------------- */

/* 1. Container and Main Label */
.woocommerce-ordering {
    display: inline-block !important;
    position: relative !important;
    margin-bottom: 25px !important;
}

/* 2. Style the Select Box Text */
.woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: none !important;
    padding: 5px 30px 5px 0px !important; /* Space for the custom chevron */
    margin: 0 !important;
    font-family: 'AclonicaRegular';
    font-size: 15px !important; /* User preferred size */
    font-weight: 300 !important; /* User preferred weight */
    color: #000000 !important;
    cursor: pointer;
    outline: none;
    width: auto !important;
    text-transform: capitalize;
}

/* 3. The Minimalist Chevron Icon (Native feel) */
.woocommerce-ordering::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    position: absolute;
    right: 10px;
    top: 40%;
    transform: translateY(-50%) rotate(45deg); /* Creates the chevron arrow */
    pointer-events: none;
}

/* 4. Dropdown List Box (Matching the White Popup in Image) */
.woocommerce-ordering select.orderby option {
    background-color: #ffffff !important;
    color: #888888 !important; /* Greyish color like the image options */
    padding: 12px 20px !important;
    font-family: 'AclonicaRegular';
    font-size: 15px !important;
    font-weight: 300 !important;
    border-bottom: 1px solid #f0f0f0; /* Subtle divider */
}

/* 5. Hover state for the dropdown trigger */
.woocommerce-ordering select.orderby:hover {
    color: #444444 !important;
}

/* Ensuring alignment like the screenshot */
@media (max-width: 768px) {
    .woocommerce-ordering {
        width: 100%;
        text-align: right;
    }
}

/**
 * Shop Collection - Absolute Final Locked Production
 * Target: #nex-shop-id (Elementor Widget)
 * Hierarchy: Image -> Title -> Review -> Price -> Button (With Precise SVG Path)
 * Style: Asymmetric Button Radius + Bootstrap Style Cart Icon
 * Status: 10000000% Locked Logic - DO NOT MODIFY
 */

/* 1. Main Grid Setup */
#nex-shop-id .elementor-widget-wc-archive-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-column-gap: 25px !important;
    grid-row-gap: 40px !important;
    padding: 0 !important;
}

/* 2. Global Card Reset (Strictly No Hover Background) */
#nex-shop-id ul.products li.product,
#nex-shop-id ul.products li.product:hover {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
}

/* 3. Link Wrapper & Image Fix */
#nex-shop-id ul.products li.product .woocommerce-loop-product__link {
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
}

#nex-shop-id ul.products li.product .woocommerce-loop-product__link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 25px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* 4. Title & Review Styling */
#nex-shop-id ul.products li.product .woocommerce-loop-product__title {
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 18px !important;
    color: #000000 !important;
    margin: 5px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

#nex-shop-id ul.products li.product .star-rating {
    margin: 5px auto 10px auto !important;
    font-size: 14px !important;
}

/* 5. Price Positioning & Bangers Font */
#nex-shop-id ul.products li.product .price {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 0 0 15px 0 !important;
    font-family: "Bangers", cursive !important;
    font-size: 28px !important;
    color: #000000 !important;
    position: relative !important;
}

#nex-shop-id ul.products li.product .price del {
    font-size: 18px !important;
    color: #999999 !important;
}

/* 6. Add to Cart Button - Signature Nexalance Style */
#nex-shop-id ul.products li.product .button.add_to_cart_button {
    background-color: #f82e2e !important;
    color: #ffffff !important;
    padding: 17px 40px !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 15px !important;
    text-transform: capitalize !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    /* Nexalance Asymmetric Radius - 100% Locked */
    border-bottom-left-radius: 49px !important;
    border-top-right-radius: 49px !important;
    border-top-left-radius: 19px !important;
    border-bottom-right-radius: 19px !important;
}

/* 7. Precision Cart Icon (Direct Path from Screenshot_15.png) */
#nex-shop-id ul.products li.product .button.add_to_cart_button::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #ffffff !important;
    /* Precise bi-cart SVG implementation */
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
}

#nex-shop-id ul.products li.product .button.add_to_cart_button:hover {
    background-color: #d11d1d !important;
}

/* 8. Sale Badge Style */
#nex-shop-id ul.products li.product .onsale {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: "Bangers", cursive !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    top: 15px !important;
    right: 15px !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    #nex-shop-id .elementor-widget-wc-archive-products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* Quantity Field - Exact Match with Screenshot_20.png */
.quantity-field {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    background: #f7f7f7; /* Light background from screenshot */
    padding: 8px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.quantity-field .value-button {
    width: 35px;
    height: 35px;
    background: #f82e2e; /* Red color from your screenshot */
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s;
    border-radius: 6px;
}

.quantity-field .value-button:hover {
    background: #d11d1d;
}

.quantity-field .decrease-button {
    margin-right: 5px;
}

.quantity-field .increase-button {
    margin-left: 5px;
}

/* WooCommerce Default Input Hidden/Style */
.quantity-field .number-wrapper .qty {
    width: 45px !important;
    height: 35px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove default spin buttons */
.quantity-field .qty::-webkit-outer-spin-button,
.quantity-field .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**
 * Custom Tab Design Logic
 * Target: Elementor Tabs Wrapper
 */

/* Tab Headers Styling */
.elementor-tabs-wrapper {
    display: flex !important;
    gap: 15px !important;
    border-bottom: none !important;
}

.elementor-tab-title {
    background-color: #f1f1f1 !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 25px !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    font-size: 15px !important;
    cursor: pointer !important;
}

/* Active Tab Style (Red) */
.elementor-tab-title.elementor-active {
    background-color: #f82e2e !important; /* Reference Red */
    color: #fff !important;
}

/* Content Area Styling */
.elementor-tabs-content-wrapper {
    border: 2px solid #f82e2e !important;
    border-radius: 0 15px 15px 15px !important;
    padding: 30px !important;
    background: #fff !important;
    margin-top: -1px !important; /* Visual flush with tabs */
}

/* Review Form Styling (Screenshot Match) */
#review_form_wrapper input[type="text"], 
#review_form_wrapper input[type="email"], 
#review_form_wrapper textarea {
    background-color: #f1f1f1 !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 15px !important;
}

#review_form_wrapper .submit {
    background-color: #f82e2e !important;
    color: #fff !important;
    padding: 10px 30px !important;
    border-radius: 8px !important;
    font-family: 'AclonicaRegular', sans-serif !important;
    box-shadow: 4px 4px 0px #000 !important; /* Retro Shadow like screenshot */
}



/**
 * Cart Page - ATIK ACADEMY - ULTIMATE CART REBOOT
 * LEFT SIDE: 1000% LOCKED AS REQUESTED
 * RIGHT SIDE: COMPACT COMIC STYLE & SHARP POSITIONING
 */

/* --- 1. GLOBAL LAYOUT --- */
.wc-block-cart {
    display: flex !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

/* --- 2. LEFT SIDE (1000% LOCKED VERSION) --- */
.wc-block-cart-items, 
.wc-block-cart-items tbody, 
.wc-block-cart-items__row {
    display: block !important;
    width: 100% !important;
}

.wc-block-cart-items__header {
    display: none !important; 
}

.wc-block-cart-items__row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 30px 0 !important;
    margin-bottom: 0 !important;
    position: relative;
}

.wc-block-cart-item__image {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    padding: 0 !important;
    margin-right: 25px !important;
}

.wc-block-cart-item__image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.wc-block-cart-item__product {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    text-align: left !important;
}

.wc-block-components-product-name {
    font-family: 'Bangers', cursive !important;
    font-size: 28px !important;
    color: #182025 !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

.wc-block-components-product-metadata__description p {
    font-size: 14px !important;
    margin: 2px 0 !important;
    color: #000 !important;
    font-weight: 600 !important;
}

/* Red Label Styling for Metadata */
.wc-block-components-product-metadata__description p::first-letter,
.wc-block-components-product-metadata__description p strong {
    color: #ff0000 !important;
}

.wc-block-cart-item__total {
    flex: 0 0 180px !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.wc-block-components-product-price {
    font-family: 'Bangers', cursive !important;
    font-size: 24px !important;
    display: flex !important;
    gap: 8px;
}

.wc-block-components-product-price__regular {
    color: #b1b1b1 !important;
    text-decoration: line-through;
    font-size: 18px !important;
}

.wc-block-components-product-price__value {
    color: #f7a007 !important; 
}

.wc-block-components-sale-badge {
    background: transparent !important;
    color: #ff0000 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin-top: 5px;
}

.wc-block-cart-item__quantity {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.wc-block-components-quantity-selector {
    background: #000 !important;
    border-radius: 8px !important;
    border: none !important;
    overflow: hidden;
}

.wc-block-components-quantity-selector__input {
    background: #fff !important;
    color: #000 !important;
    font-weight: 900 !important;
}

.wc-block-components-quantity-selector__button {
    color: #fff !important;
}

.wc-block-cart-item__remove-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
}

/* --- 3. RIGHT SIDE (SUMMARY BOX - UPDATED) --- */
.wc-block-cart__sidebar {
    flex: 0 0 350px !important;
}

.wp-block-woocommerce-cart-order-summary-block {
    background: #fff !important;
    border: 2px solid #000 !important; /* Sharp Comic Border */
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: none !important;
    margin-bottom: 25px !important;
}

.wc-block-cart__totals-title {
    font-family: 'Bangers', cursive !important;
    font-size: 32px !important;
    color: #000 !important;
    text-transform: uppercase;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.wc-block-components-totals-footer-item {
    border-top: 2px dashed #000 !important;
    padding-top: 15px !important;
    margin-top: 15px !important;
}

.wc-block-components-totals-item__label {
    font-family: 'Bangers', cursive !important;
    font-size: 22px !important;
}

.wc-block-components-totals-footer-item-tax-value {
    font-family: 'Bangers', cursive !important;
    font-size: 30px !important;
    color: #000 !important;
}

/* --- 4. PROCEED TO CHECKOUT BUTTON --- */
.wc-block-cart__submit-container {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.wc-block-cart__submit-button {
    background: #000 !important;
    color: #fff !important;
    font-family: 'Bangers', cursive !important;
    font-size: 26px !important;
    padding: 22px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 6px 6px 0px #f7a007 !important; /* 3D Comic Shadow */
    transition: 0.2s ease-in-out;
    text-transform: uppercase;
}

.wc-block-cart__submit-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #f7a007 !important;
}

/* Remove default sticky behavior that causes overlapping */
.wc-block-cart__submit-container--sticky {
    position: relative !important;
    bottom: auto !important;
}

/**
 * PROJECT: ATIK ACADEMY E-COMMERCE CHECKOUT
 * ARCHITECT: Nexalance Senior Web Expert Standard
 * REFERENCE: Screenshot_2_4.png (1000% Matched)
 * STATUS: Final Locked Production Code
 */

/* --- 1. Typography Import --- */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;700;800;900&display=swap');

/* --- 2. Main Layout Architecture --- */
.woocommerce-checkout .e-checkout__container {
    display: flex !important;
    flex-direction: row !important; /* Force side-by-side layout */
    flex-wrap: nowrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    max-width: 1300px !important;
    margin: 40px auto !important;
}

/* Billing Column Fix */
.e-checkout__column-start {
    flex: 0 0 62% !important;
    width: 62% !important;
}

/* Sidebar Column Fix */
.e-checkout__column-end {
    flex: 0 0 38% !important;
    width: 38% !important;
    position: sticky !important;
    top: 50px !important;
}

/* --- 3. Billing Form Aesthetics --- */
.woocommerce-billing-fields h3 {
    font-family: 'Bangers', cursive !important;
    font-size: 64px !important;
    text-transform: uppercase !important;
    font-style: italic !important;
    color: #000 !important;
    margin-bottom: 35px !important;
}

/* Grid-based Input Alignment */
.woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Perfect 2-column split */
    gap: 25px 20px !important;
}

/* Specific Field Spanning for Precision */
#billing_first_name_field, #billing_last_name_field, 
#billing_city_field, #billing_postcode_field,
#billing_state_field, #billing_phone_field {
    grid-column: span 1 !important;
}

#billing_country_field, #billing_address_1_field, 
#billing_address_2_field, #billing_email_field {
    grid-column: span 2 !important;
}

/* Label & Input Styling */
.woocommerce-checkout label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: #000 !important;
    margin-bottom: 12px !important;
}

.woocommerce-checkout input.input-text, 
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background: #f1f1f1 !important; /* Light Grey as per Screenshot_2_4.png */
    border: none !important;
    border-radius: 4px !important;
    height: 58px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #000 !important;
}

/* --- 4. Order Review Sidebar (The Comic Box) --- */
.e-checkout__order_review {
    background: #ffffff !important;
    border: 4px solid #000000 !important;
    border-radius: 35px !important;
    padding: 40px !important;
    box-shadow: 15px 15px 0px #000000 !important;
}

#order_review_heading {
    font-family: 'Bangers', cursive !important;
    font-size: 48px !important;
    font-style: italic !important;
    color: #000 !important;
    margin-bottom: 25px !important;
}

/* Black Header Bar inside Table */
.woocommerce-checkout-review-order-table thead th {
    background: #000 !important;
    color: #fff !important;
    padding: 15px 25px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* Row Styling */
.shop_table.woocommerce-checkout-review-order-table td, 
.shop_table.woocommerce-checkout-review-order-table th {
    border: none !important;
    padding: 15px 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Total Price Focus */
.order-total th {
    font-size: 20px !important;
    font-weight: 800 !important;
}

.order-total td bdi {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    font-size: 62px !important; /* High-impact price */
    color: #000 !important;
}

/* --- 5. Payment Button (Action Trigger) --- */
#place_order {
    background: #000 !important;
    color: #fff !important;
    width: 100% !important;
    padding: 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    font-size: 30px !important;
    border-radius: 15px !important;
    border: none !important;
    box-shadow: 12px 12px 0px #ffc107 !important; /* Thick Yellow Shadow */
    text-transform: uppercase !important;
    margin-top: 30px !important;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#place_order:active {
    transform: translate(6px, 6px) !important;
    box-shadow: 6px 6px 0px #ffc107 !important;
}

/* --- 6. Mobile Optimization --- */
@media (max-width: 1024px) {
    .woocommerce-checkout .e-checkout__container {
        flex-direction: column !important;
    }
    .e-checkout__column-start, .e-checkout__column-end {
        width: 100% !important;
    }
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/**
 * PROJECT: ATIK ACADEMY - CINEMATIC CATEGORY OVERLAY
 * INTEGRITY: 100000% LOCKED
 * FIX: Removed Yellow Border, Added Asymmetric Radius
 */

/* 1. Card Container & Border Fix */
.elementor-widget-wc-categories .product-category.product {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 25px !important;
    border: none !important; /* Force remove any default border */
    outline: none !important;
    box-shadow: none !important;
}

/* Removal of any Hover Border/Outline */
.elementor-widget-wc-categories .product-category.product:hover,
.elementor-widget-wc-categories .product-category.product a:hover {
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* 2. Image Zoom Effect (Only Effect Allowed) */
.elementor-widget-wc-categories .product-category.product img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
}

.elementor-widget-wc-categories .product-category.product:hover img {
    transform: scale(1.1) !important;
    border:none !important;
}

/* 3. Cinematic Red Badge (Asymmetric Radius) */
.elementor-widget-wc-categories h2.woocommerce-loop-category__title {
    position: absolute !important;
    bottom: 53px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* Colors & Shadow */
    background: #ed2c2c !important;
    color: #ffffff !important;
    padding: 17px 25px !important;
    z-index: 5 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
    
    /* Cinematic Asymmetric Border Radius */
    /* Top-Left & Bottom-Right: 8px | Top-Right & Bottom-Left: 35px */
    border-radius: 27px 9px 27px 9px !important;
    
    /* Typography */
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    text-align: center !important;
    width: 59% !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    border: none !important;
}

/* 4. Count Styling Integrity */
.elementor-widget-wc-categories h2.woocommerce-loop-category__title mark.count {
    background: transparent !important;
    color: #ffffff !important;
    font-family: inherit !important;
    margin-left: 6px !important;
}

/* 5. Cleanup Theme Overrides */
.elementor-widget-wc-categories .product-category.product a::before,
.elementor-widget-wc-categories .product-category.product a::after {
    display: none !important;
    content: none !important;
}

/* Mobile Precision */
@media (max-width: 767px) {
    .elementor-widget-wc-categories h2.woocommerce-loop-category__title {
        font-size: 15px !important;
        width: 88% !important;
        bottom: 15px !important;
        border-radius: 6px 25px 6px 25px !important;
    }
}

.wc-block-grid .wp-block-product-new .wp-block-woocommerce-product-new .wc-block-product-new .has-4-columns{
    display:none;
}

/**
 * MY ACCOUNT PAGE - COMIC REBOOT
 * DESIGN: Bold Borders, 3D Shadows, and Comic Typography.
 * STRUCTURE: Side-by-Side Login & Register columns.
 */

/* --- 1. GLOBAL LAYOUT SETUP --- */
#customer_login.u-columns.col2-set {
    display: flex !important;
    gap: 40px !important;
    margin: 50px auto !important;
    max-width: 1200px !important;
    align-items: stretch !important;
}

/* --- 2. COLUMN STYLING (LOGIN & REGISTER) --- */
.u-column1.col-1, 
.u-column2.col-2 {
    flex: 1 !important;
    background: #ffffff !important;
    border: 3px solid #000000 !important; /* Bold Comic Border */
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.05) !important;
}

/* Titles: BANGERS FONT AS PER BRAND */
#customer_login h2 {
    font-family: 'Bangers', cursive !important;
    font-size: 36px !important;
    color: #182025 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 30px !important;
    border-bottom: 2px dashed #000 !important;
    padding-bottom: 10px !important;
}

/* --- 3. FORM FIELDS & LABELS --- */
.woocommerce-form-row label {
    font-weight: 700 !important;
    color: #000 !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Red Asterisk Color */
.woocommerce-form-row label .required {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.woocommerce-Input--text {
    width: 100% !important;
    border: 2px solid #000000 !important; /* Sharp Input Borders */
    padding: 15px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    background: #f9f9f9 !important;
    transition: all 0.3s ease !important;
}

.woocommerce-Input--text:focus {
    background: #fff !important;
    outline: none !important;
    box-shadow: 4px 4px 0px #f7a007 !important; /* Golden focus shadow */
}

/* --- 4. BUTTONS (3D COMIC STYLE) --- */
.woocommerce-form-login__submit, 
.woocommerce-form-register__submit {
    background: #000000 !important;
    color: #ffffff !important;
    font-family: 'Bangers', cursive !important;
    font-size: 26px !important;
    padding: 18px 40px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 6px 6px 0px #f7a007 !important; /* Signature Golden Shadow */
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    margin-top: 15px !important;
    width: auto !important;
}

.woocommerce-form-login__submit:hover, 
.woocommerce-form-register__submit:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0px #f7a007 !important;
}

/* --- 5. EXTRA ELEMENTS --- */
.woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 20px !important;
}

.woocommerce-LostPassword a {
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
}

.woocommerce-privacy-policy-text p {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin-top: 15px !important;
}

/* --- 6. MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    #customer_login.u-columns.col2-set {
        flex-direction: column !important;
    }
    .u-column1.col-1, .u-column2.col-2 {
        width: 100% !important;
    }
}

/**
 * MY ACCOUNT DASHBOARD - LOGGED IN STATE
 * DESIGN: Side Navigation + Content Card with Comic Borders.
 */

/* --- 1. DASHBOARD CONTAINER LAYOUT --- */
.woocommerce-account .woocommerce {
    display: flex !important;
    gap: 40px !important;
    margin-top: 50px !important;
    align-items: flex-start !important;
}

/* --- 2. SIDEBAR NAVIGATION (LEFT SIDE) --- */
.woocommerce-MyAccount-navigation {
    flex: 0 0 339px !important;
    background: #ffffff !important;
    border: 3px solid #000 !important; /* Sharp Comic Border */
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 8px 8px 0px #f7a007 !important; /* Signature Golden Shadow */
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation-link {
    margin-bottom: 10px !important;
    border-bottom: 2px dashed #eee !important;
}

.woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation-link a {
    display: block !important;
    padding: 12px 15px !important;
    font-family: 'Bangers', cursive !important; /* */
    font-size: 20px !important;
    color: #182025 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: 0.2s ease !important;
}

/* Active & Hover States */
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
    background: #000 !important;
    color: #fff !important;
    border-radius: 8px !important;
    transform: translateX(5px) !important;
}

/* --- 3. CONTENT AREA (RIGHT SIDE) --- */
.woocommerce-MyAccount-content {
    flex: 1 !important;
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    position: relative !important;
}

/* Titles and Greetings */
.woocommerce-MyAccount-content p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #000 !important;
    font-weight: 500 !important;
}

.woocommerce-MyAccount-content strong {
    color: #f7a007 !important; /* Golden highlights */
    font-size: 22px !important;
}

/* Links inside content */
.woocommerce-MyAccount-content a {
    color: #ff0000 !important; /* Comic Red */
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.woocommerce-MyAccount-content a:hover {
    color: #000 !important;
}

/* --- 4. BUTTONS & NOTICES --- */
.woocommerce-Button.button {
    background: #000 !important;
    color: #fff !important;
    font-family: 'Bangers', cursive !important;
    font-size: 20px !important;
    padding: 12px 25px !important;
    border-radius: 10px !important;
    box-shadow: 4px 4px 0px #f7a007 !important;
    border: none !important;
    text-transform: uppercase !important;
}

/* --- 5. RESPONSIVENESS --- */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
    }
    .woocommerce-MyAccount-navigation {
        flex: 1 0 100% !important;
        width: 100% !important;
    }
}

/**
 * THANK YOU PAGE - CLEAN COMIC STYLE
 * FOCUS: Sharp visibility, consistent padding, and bold branding.
 */

/* --- 1. SUCCESS BANNER (CLEAN & BOLD) --- */
.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-family: 'Bangers', cursive !important; /* */
    background: #f7a007 !important; /* Golden Accent */
    color: #000 !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
    padding: 25px !important;
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    box-shadow: 8px 8px 0px #000 !important; /* Sharp 3D Shadow */
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* --- 2. ORDER OVERVIEW (GRID STYLE) --- */
.woocommerce-order-overview.order_details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 15px !important;
    padding: 30px !important;
    list-style: none !important;
}

.woocommerce-order-overview li {
    flex: 1 !important;
    min-width: 150px !important;
    font-family: 'Bangers', cursive !important;
    font-size: 16px !important;
    color: #555 !important;
    border-right: 1px dashed #000 !important; /* Vertical Separator */
    padding-right: 15px !important;
    text-transform: uppercase !important;
}

.woocommerce-order-overview li:last-child {
    border-right: none !important;
}

.woocommerce-order-overview li strong {
    display: block !important;
    color: #000 !important;
    font-size: 22px !important;
    margin-top: 8px !important;
}

/* --- 3. ORDER DETAILS TABLE (HIGH CONTRAST) --- */
.woocommerce-order-details__title {
    font-family: 'Bangers', cursive !important;
    font-size: 32px !important;
    margin: 40px 0 20px !important;
}

.shop_table.order_details {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.shop_table.order_details thead th {
    background: #000 !important; /* Black header for contrast */
    color: #fff !important;
    font-family: 'Bangers', cursive !important;
    padding: 15px !important;
    text-transform: uppercase !important;
}

.shop_table.order_details tbody td {
    padding: 20px !important;
    border-bottom: 1px solid #eee !important;
    font-weight: 600 !important;
}

/* Row Totals Styling */
.shop_table.order_details tfoot th, 
.shop_table.order_details tfoot td {
    background: #fdfdfd !important;
    padding: 15px 20px !important;
    font-family: 'Bangers', cursive !important;
    font-size: 20px !important;
    border-top: 2px solid #000 !important;
}

/* Final Total Highlight */
.shop_table.order_details tfoot tr:nth-last-child(2) td,
.shop_table.order_details tfoot tr:nth-last-child(2) th {
    color: #f7a007 !important;
    font-size: 26px !important;
}

/* --- 4. BILLING ADDRESS BLOCK --- */
.woocommerce-column__title {
    font-family: 'Bangers', cursive !important;
    font-size: 32px !important;
}

.woocommerce-customer-details address {
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    background: #fff !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.05) !important;
}

.woocommerce-customer-details--email {
    color: #ff0000 !important; /* Alert Red */
    margin-top: 10px !important;
}

.woocommerce ul.order_details li strong{
    font-family: aclonica;
    text-transform: lowercase;
    font-size: 14px !important;
}