/* Add custom CSS styles below */

.mb-3 {

display: none !important;

}

[class*="has-overlay--opacity-0"] {

display: none !important;

}



/* Base style for Laptop/Desktop */

.advanced-slider__caption__inner__content__button {

position: absolute !important;

bottom: 5% !important; /* Positioned in the bottom 15% */

left: 50% !important;

transform: translateX(-50%) !important;

z-index: 10;

margin: 0 !important;



/* Luxury Ghost Button Style */

background-color: transparent !important;

border: 1px solid #ffffff !important;

color: #ffffff !important;

border-radius: 0 !important;

text-transform: uppercase !important;

letter-spacing: 2px !important;

padding: 12px 30px !important; /* Larger padding for desktop */

box-shadow: none !important;

}



/* Mobile-specific adjustments */

@media (max-width: 767px) {

.advanced-slider__caption__inner__content__button {

/* Make the button overall smaller */

padding: 5px 12px !important; /* Reduced padding from 12px 30px */

font-size: 13px !important; /* Force a smaller font size */

letter-spacing: 1px !important; /* Slightly tighter letter spacing */

border-width: 1px !important; /* Ensure border remains thin and elegant */


/* Fine-tune position for the mobile frame (optional) */

bottom: 5% !important; /* Slightly higher up in the 15-20% zone */

}

}



/* Hide only the grid list inside the Square Links section */

section.s-block.s-block--square-links ul.auto-fit-grid {

display: none !important;

}



/* Hide the title "Moonphase Watch" (ساعة اطوار القمر) only */

.mb-8.home-block-title {

display: none !important;

}



/* Hide the mobile menu (hamburger) icon */

.mburger {

display: none !important;

}



/* Hide the entire top bar above the main header */

.top-navbar {

display: none !important;

}





/*-------------------------------------*/



/* 1. Main Container Styling */

nav.breadcrumbs {

padding: 15px 0 !important; /* Vertical breathing room */

background: transparent !important; /* Keep background clean */

margin-bottom: 20px !important; /* Space before the product starts */

}



/* 2. Flexbox Alignment (Fixes crooked text) */

nav.breadcrumbs ol {

display: flex !important;

align-items: center !important; /* Perfectly centers text and arrows vertically */

flex-wrap: wrap !important; /* Allows wrapping on small phones */

}



/* 3. The Links (Previous Pages - e.g., Home, Men's) */

nav.breadcrumbs a.text-primary {

color: #888888 !important; /* Soft Gray: Shows it is clickable but not the focus */

font-weight: 500 !important;

font-size: 14px !important;

text-decoration: none !important;

transition: all 0.2s ease-in-out;

}



/* Hover Effect for Links */

nav.breadcrumbs a.text-primary:hover {

color: #050f2c !important; /* Your Brand Dark Blue on hover */

text-decoration: underline !important;

}



/* 4. The Separator Icon (Arrow < ) */

nav.breadcrumbs .sicon-keyboard_arrow_left {

color: #d1d5db !important; /* Very light gray - subtle */

font-size: 14px !important; /* Not too big */

margin: 0 8px !important; /* Space between words */

display: inline-flex !important; /* Ensures icon centers with text */

}



/* 5. The Current Page (e.g., Seiko SSC813) */

nav.breadcrumbs span.fix-align {

color: #000000 !important; /* Black: Indicates "You are here" */

font-weight: 700 !important; /* Bold to stand out */

font-size: 14px !important;

cursor: default !important; /* Shows it is not clickable */

}



/* --- Mobile Adjustments --- */

@media (max-width: 767px) {

nav.breadcrumbs {

padding: 10px 20px !important; /* Add side padding on mobile so text doesn't hit edge */

background: #f9fafb !important; /* Optional: Light gray background on mobile only separates it nicely */

}


nav.breadcrumbs a.text-primary,

nav.breadcrumbs span.fix-align {

font-size: 12px !important; /* Slightly smaller text for phones */

}

}





/*تعديل الخطوط*/

/* =========================================

TYPOGRAPHIC SCALE SYSTEM

========================================= */



/* 1. Hero Headings (Main Sliders) - 24px to 28px */

.advanced-slider__caption__inner__content__heading,

.dynamic-banner__item-title {

font-size: 24px !important;

line-height: 1.3 !important;

}



@media (min-width: 768px) {

.advanced-slider__caption__inner__content__heading,

.dynamic-banner__item-title {

font-size: 28px !important;

}

}



/* 2. Section Titles (e.g. "Winter Collection", "Best Sellers") - 20px */

.s-block__title h2,

.home-block-title h2,

.section-header h2 {

font-size: 20px !important;

font-weight: 700 !important; /* Ensure bold */

}



/* 3. Product Names (Grid Items) - 16px */

/* Targets standard product cards and the square link titles */

.s-product-card__title,

.product-entry__title,

.s-block--square-links h3 {

font-size: 16px !important;

line-height: 1.4 !important;

}



/* 4. Body Text (Descriptions, Paragraphs) - 14px Minimum */

body,

p,

.entry-content,

.product-entry__sub-title {

font-size: 14px !important;

}



/* Mobile Tweak: Ensure body text never goes below 13px on very small phones */

@media (max-width: 480px) {

body, p {

font-size: 13px !important;

}

}


/*-------------------------------------*/

/* =========================================

RESTORED DESIGN + VERTICAL NUDGE

========================================= */

@media (max-width: 767px) {


/* 1. HIDE PROFILE (Keep clean layout) */

.store-header button[aria-label="Login"],

.store-header button[aria-label="Profile"],

#mainnav button[aria-label="Login"] {

display: none !important;

}



/* 2. SEARCH BAR (Restored to the working version) */

body header button[aria-label="Search"],

body nav button[aria-label="Search"],

body .sticky-header button[aria-label="Search"] {

/* Size */

width: auto !important;

flex-grow: 1 !important;

max-width: 220px !important;

height: 36px !important;


/* THE FIX: Move the whole button down 3px visually */

transform: translateY(3px) !important;



/* Visuals */

background-color: #F9FAFB !important;

border: 1px solid #E5E7EB !important;

border-radius: 6px !important;


/* Internal Layout */

display: flex !important;

align-items: center !important;

padding: 0 10px !important;

margin-left: 10px !important;

margin-right: 5px !important;

opacity: 1 !important;

visibility: visible !important;

}







/* 4. TEXT (Simple & Clean) */

body header button[aria-label="Search"]::after,

body nav button[aria-label="Search"]::after {

content: "ابحث عن..." !important;

font-size: 13px !important;

color: #9CA3AF !important;

font-weight: 400 !important;

display: block !important;

padding-top: 2px !important; /* Tiny alignment tweak */

}

}



/*--------------------------------------*/





/* =========================================

INCREASE PRODUCT PRICE SIZE

========================================= */

/* Target the price number specifically on the product page */

.product-single .product-price .total-price {

font-size: 30px !important; /* Large size (Range: 28px-32px) */

font-weight: 800 !important; /* Extra Bold */

color: #000000 !important; /* Solid Black to stand out */

line-height: 1.2 !important; /* Tighten spacing */

}



/* Optional: If there is a "Before" price (Sale), make it visible but smaller */

.product-single .product-price .before-price {

font-size: 16px !important;

color: #888 !important;

text-decoration: line-through;

}



/* Mobile Tweak: Slightly smaller on phones to prevent wrapping */

@media (max-width: 767px) {

.product-single .product-price .total-price {

font-size: 26px !important;

}

}





/*-------------------------------*/

/* =========================================

LUXURY STICKY BAR V2 (FIXED BUTTONS)

========================================= */

@media (max-width: 767px) {



/* 1. THE BAR CONTAINER (The Glass Dock) */

.sticky-product-bar {

position: fixed !important;

bottom: 0 !important;

left: 0 !important;

width: 100% !important;

z-index: 9999 !important;


/* Glass Effect & Shape */

background: #ffffff !important;

box-shadow: 0 -5px 20px rgba(0,0,0,0.08) !important;

border-radius: 20px 20px 0 0 !important; /* Round Top Only */

border-top: 1px solid #f3f3f3 !important;


/* Layout & Spacing */

display: flex !important;

align-items: center !important;

justify-content: space-between !important;

gap: 10px !important; /* Space between the two buttons */


/* Padding is KEY here - keeps buttons away from the edges */

padding: 12px 15px !important;

padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;

}



/* 2. HIDE QUANTITY (Clean up) */

.sticky-product-bar .product-quantity,

.sticky-product-bar__quantity {

display: none !important;

}



/* 3. STYLE ALL BUTTONS INSIDE (Add to Cart & Buy Now) */

.sticky-product-bar button,

.sticky-product-bar .btn--add-to-cart,

.sticky-product-bar .btn--buy-now {

flex: 1 !important; /* Make them share space equally */

height: 48px !important; /* Fixed elegant height */

border-radius: 12px !important; /* Round the BUTTONS, not just the bar */

margin: 0 !important; /* Reset margins */

font-size: 14px !important;

font-weight: 700 !important;

box-shadow: none !important; /* Remove default button shadows for a cleaner look */

}



/* 4. SPECIFIC COLORS (Optional Polish) */

/* Make "Add to Cart" Black */

.sticky-product-bar .btn--add-to-cart {

background-color: #000 !important;

color: #fff !important;

}



/* Make "Buy Now" (if present) White with Border */

.sticky-product-bar .btn--buy-now {

background-color: #fff !important;

color: #000 !important;

border: 1px solid #ddd !important;

}



/* 5. PRICE ADJUSTMENT (If price is visible) */

.sticky-product-bar .product-price {

display: none !important; /* Hide price if you have 2 buttons (too crowded) */

}


/* Body padding to prevent content overlap */

body {

padding-bottom: 90px !important;

}

}



/* =========================================

STICKY BAR POLISH: TEXT & SHAPE

========================================= */

@media (max-width: 767px) {


/* Target BOTH buttons inside the sticky bar */

.sticky-product-bar button,

.sticky-product-bar .btn--add-to-cart,

.sticky-product-bar .btn--buy-now {

/* 1. SOFTEN THE RECTANGLES */

border-radius: 10px !important; /* Soft corners, not sharp */


/* 2. BUMP THE TEXT */

font-size: 15px !important; /* Slightly larger */

font-weight: 800 !important; /* Extra Bold */

letter-spacing: 0.5px !important; /* Slight breathing room for letters */

}



/* Optional: Make the White Button Border a bit thicker */

.sticky-product-bar .btn--buy-now {

border: 1.5px solid #000 !important; /* Thicker border looks more premium */

}

}





/*----------------------------------------*/

/* =========================================

POLISH: JS COLLAPSIBLE TOGGLES

========================================= */



/* Target the summary part (the clickable gray bar) */

details.specs-accordion summary {

/* 1. MAKE IT TALLER & EASIER TO TAP */

padding: 18px 20px !important; /* Much more breathing room */

min-height: 55px !important; /* Ensure a nice, substantial height */


/* 2. MAKE THE TEXT BOLDER */

font-size: 16px !important;

font-weight: 800 !important; /* Extra bold to stand out */


/* 3. PREMIUM VISUALS */

background-color: #F9FAFB !important; /* Very light luxury gray */

border: 1px solid #E5E7EB !important; /* Subtle definition border */

border-radius: 12px !important; /* Match your other rounded buttons */

margin-bottom: 12px !important; /* Space between multiple toggles */

}



/* Fix the arrow icon alignment */

details.specs-accordion summary::-webkit-details-marker {

margin-left: 10px !important; /* Give the text some space from the arrow */

}





/*-----------------------------------------*/



/* =========================================
   FINAL PRODUCT PAGE POLISH (FIXED & SAFE)
   ========================================= */

/* 1. KILL THE GHOST PRICE */
.product-single .product-price-bottom {
    display: none !important;
}

/* 2. STYLE META LINKS (Category & Size Guide) AS BADGES */
/* We added '.product-single' to the start to stop it from breaking the Checkout page */

.product-single section.bg-storeBG.p-5.rounded-md.mb-5 {
    background-color: transparent !important;
    padding: 10px 0 !important;
    border-top: 1px solid #f3f3f3 !important;
    border-bottom: 1px solid #f3f3f3 !important;
    margin-bottom: 20px !important;
}

.product-single section.bg-storeBG.p-5.rounded-md.mb-5 .center-between {
    margin-bottom: 12px !important;
}

/* TARGET BOTH LINKS AND BUTTONS (Scoped to Product Page) */
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 a,
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 button,
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 salla-button {
    background-color: #F9FAFB !important; /* Light Gray */
    border: 1px solid #E5E7EB !important; /* Border */
    border-radius: 20px !important;       /* Pill Shape */
    padding: 6px 16px !important;         /* Internal Spacing */
    
    /* Text Styling */
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;      /* Keeps text and icon aligned */
    align-items: center !important;
    transition: all 0.2s ease !important;
}

/* Style the text inside the button specifically */
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 button span,
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 salla-button span {
     color: #333 !important; 
}

/* Icon Styling */
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 i {
    color: #888 !important;
    margin-left: 0 !important;
    margin-right: 5px !important; /* Space between text and arrow */
    font-size: 14px !important;
}

/* Convert the text links into "Pill Buttons" */
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 a {
    display: inline-block !important;
}

/* Remove the icon color to match the text */
.product-single section.bg-storeBG.p-5.rounded-md.mb-5 i {
    margin-left: 5px !important;
}
/* =========================================

FIX: HOMEPAGE BANNER BUTTONS (GLASS EFFECT)

========================================= */



/* Target the "Discover More" buttons in the main slider */

.advanced-slider .btn,

.advanced-slider__caption__inner__content__button {

/* 1. Add the Glass Background */

background-color: rgba(0, 0, 0, 0.4) !important; /* 40% Black transparent */

backdrop-filter: blur(6px) !important; /* The Blur Effect */

-webkit-backdrop-filter: blur(6px) !important; /* For Safari */


/* 2. Define the Border */

border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Semi-transparent white border */


/* 3. Text Styles */

color: #ffffff !important;

text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; /* Make text readable on any background */

font-weight: 600 !important;

}



/* 4. Hover Effect (Make it solid on hover) */

.advanced-slider .btn:hover,

.advanced-slider__caption__inner__content__button:hover {

background-color: #ffffff !important;

color: #000000 !important;

border-color: #ffffff !important;

text-shadow: none !important;

transform: translateY(-2px); /* Slight lift */

transition: all 0.3s ease;

}



/*--------------------------------------*/

/* =========================================
   HIDE BUTTONS ON BANNERS WITH NO LINK (Arabic numerals & MTP)
   ========================================= */
/* This targets only buttons where the link is just "#" */
.advanced-slider__caption__inner__content__button[href="#"] {
    display: none !important;
}