/*
Theme Name: Astra Child - RED 2 RED
Theme URI: https://redstickershops.com/
Description: A child theme built on Astra to apply the RED 2 RED design to the WooCommerce store.
Author: RED 2 RED
Template: astra
Version: 1.0.0
Text Domain: red2red-child
*/

/* =========================================================
   1) Font imports
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Tajawal:wght@400;500;700;900&display=swap');

/* =========================================================
   2) Design variables (same values as the original design files)
   ========================================================= */
:root{
  --ink:#0b0b0c;
  --ink-2:#141416;
  --paper:#f3ecd8;
  --paper-2:#e8dfc4;
  --red:#e31e24;
  --red-dark:#8f0f13;
  --acid:#e4ff3a;
  --blue:#1c3fa6;
  --line: rgba(243,236,216,.14);
  --nav-h:76px;
}

/* =========================================================
   3) General site-wide basics
   ========================================================= */
body{
  background:var(--ink) !important;
  color:var(--paper) !important;
  font-family:'Tajawal',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acid);color:var(--ink);}
a{color:inherit;}
h1,h2,h3,h4,
.entry-title,
.woocommerce-Reviews-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.site-title{
  font-family:'Cairo',sans-serif !important;
  font-weight:900 !important;
}

/* Content containers */
.ast-container{max-width:1320px;}

/* =========================================================
   4) Header / logo / navigation
   ========================================================= */
#masthead,
.ast-primary-header-bar,
.main-header-bar{
  background:rgba(11,11,12,.92) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(10px);
}
.site-title, .site-title a{
  font-family:'Cairo',sans-serif !important;
  font-weight:900 !important;
  font-size:1.5rem !important;
  color:var(--paper) !important;
}
.main-header-menu .menu-item > a,
.ast-header-navigation-arrow{
  font-family:'Cairo',sans-serif !important;
  font-weight:700 !important;
  font-size:.9rem !important;
  color:var(--paper) !important;
  opacity:.85;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a{
  color:var(--acid) !important;
  opacity:1;
}

/* "My Orders" button as a prominent CTA - add the red2red-cta class to the menu item from WordPress dashboard > Appearance > Menus */
.menu-item.red2red-cta > a{
  background:var(--acid) !important;
  color:var(--ink) !important;
  font-weight:800 !important;
  padding:.75em 1.5em !important;
  border-radius:100px !important;
  box-shadow:3px 3px 0 var(--red);
  transition:transform .18s ease, box-shadow .18s ease;
}
.menu-item.red2red-cta > a:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--red);
  color:var(--ink) !important;
}

/* Cart icon/badge (requires Astra's Cart icon widget from Customizer > Header Builder) */
.ast-cart-menu-wrap .count,
.ast-site-header-cart .count{
  background:var(--acid) !important;
  color:var(--ink) !important;
  font-family:'Cairo',sans-serif !important;
  font-weight:900 !important;
}

/* =========================================================
   5) General buttons (applies to default WooCommerce buttons)
   ========================================================= */
.button, button, input[type="submit"], input[type="button"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.wp-block-button__link{
  font-family:'Cairo',sans-serif !important;
  font-weight:800 !important;
  border-radius:100px !important;
  padding:1em 2.1em !important;
  border:none !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.woocommerce a.button, .woocommerce button.button.alt,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .ajax_add_to_cart{
  background:var(--red) !important;
  color:var(--paper) !important;
  box-shadow:4px 4px 0 var(--acid) !important;
}
.woocommerce a.button:hover, .woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover{
  background:var(--red) !important;
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--acid) !important;
}

/* =========================================================
   6) Archive page banner (shop / categories) - Page Header
   ========================================================= */
.woocommerce-products-header,
.page-header,
.ast-archive-description{
  padding:calc(var(--nav-h) + 3.5rem) 0 3rem !important;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(227,30,36,.22), transparent 70%), var(--ink) !important;
  border-bottom:1px solid var(--line) !important;
}
.woocommerce-products-header__title,
.page-title{
  font-size:clamp(2.4rem,6vw,4.2rem) !important;
  color:var(--paper) !important;
}

/* =========================================================
   7) Product grid (shop page) - mimics RED 2 RED cards
   ========================================================= */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:1.4rem !important;
  padding-bottom:6rem;
}
.woocommerce ul.products li.product{
  background:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 0 1.4rem !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
  width:100% !important;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 34px rgba(0,0,0,.4);
  border-color:var(--red) !important;
}
.woocommerce ul.products li.product a img{
  aspect-ratio:1/1;
  object-fit:contain;
  padding:1.8rem;
  background:radial-gradient(circle at 50% 40%, rgba(227,30,36,.14), transparent 65%);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.05rem !important;
  color:var(--paper) !important;
  padding:0 1.2rem;
  margin:.4rem 0 .3rem !important;
}
.woocommerce ul.products li.product .price{
  color:var(--paper) !important;
  font-family:'Cairo',sans-serif !important;
  font-weight:800 !important;
  padding:0 1.2rem;
}
.woocommerce ul.products li.product .button{
  margin:0 1.2rem !important;
  font-size:.74rem !important;
  padding:.6em 1em !important;
}
@media (max-width:1080px){ .woocommerce ul.products{grid-template-columns:repeat(3,1fr) !important;} }
@media (max-width:760px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:460px){ .woocommerce ul.products{grid-template-columns:1fr 1fr !important; gap:.8rem !important;} }

/* Category filter (Product Categories widget) styled as tabs */
.woocommerce .widget_product_categories ul{
  display:flex; flex-wrap:wrap; gap:.7rem; list-style:none; padding:0; margin-bottom:2.5rem;
}
.woocommerce .widget_product_categories ul li a{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.85rem;
  padding:.65em 1.4em; border-radius:100px; border:1px solid var(--line); color:var(--paper);
}
.woocommerce .widget_product_categories ul li.current-cat a{
  background:var(--acid); color:var(--ink); border-color:var(--acid);
}

/* =========================================================
   8) Product detail page
   ========================================================= */
.single-product div.product .woocommerce-tabs,
.single-product div.product p.price,
.single-product div.product .product_title{
  color:var(--paper) !important;
}
.single-product div.product .product_title{
  font-family:'Cairo',sans-serif !important;
  font-weight:900 !important;
}

/* =========================================================
   9) Cart page and Checkout page
   ========================================================= */
.woocommerce-cart table.cart, .woocommerce-checkout table.cart,
.woocommerce table.shop_table{
  background:transparent !important;
  border:none !important;
}
.woocommerce table.shop_table th{
  font-family:'Cairo',sans-serif !important;
  color:var(--acid) !important;
  border-bottom:1px solid var(--line) !important;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--line) !important;
  color:var(--paper) !important;
}
.woocommerce-cart-form .product-name a,
.woocommerce a{ color:var(--paper); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  background:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:1.5rem !important;
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review h3{
  font-family:'Cairo',sans-serif !important;
  color:var(--paper) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-checkout select, .woocommerce-checkout input{
  background:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  color:var(--paper) !important;
  border-radius:8px !important;
}

/* Unified card for billing fields on the checkout page (previously floating with no border, unlike the adjacent "your order" box) */
.woocommerce-checkout #customer_details{
  background:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:1.5rem !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  width:100% !important;
  float:none !important;
}

/* =========================================================
   9.1) Overall contrast fix across all WooCommerce pages (login / register / checkout)
   Text and headings that used to render in the default dark color (nearly invisible) on our black background
   ========================================================= */
body.woocommerce-account .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .entry-title,
body.woocommerce-account h1,
body.woocommerce-checkout h1{
  color:var(--paper) !important;
}
.woocommerce h2, .woocommerce h3,
.woocommerce-account h2, .woocommerce-account h3,
.woocommerce-checkout h2, .woocommerce-checkout h3{
  color:var(--paper) !important;
  font-family:'Cairo',sans-serif !important;
}
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label{
  color:var(--paper) !important;
  opacity:.9;
}
.woocommerce form p,
.woocommerce-checkout p,
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p{
  color:var(--paper) !important;
  opacity:.85;
}
.woocommerce a.woocommerce-privacy-policy-link,
.woocommerce-LostPassword a,
.woocommerce a.showlogin,
.woocommerce a.showcoupon{
  color:var(--acid) !important;
}
/* Product name and price in the order-review table on checkout (contrast boost) */
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th,
.order-total .amount,
.cart-subtotal .amount{
  color:var(--paper) !important;
}
/* Payment methods (Wayl, cash on delivery...) */
.woocommerce ul.payment_methods li label,
.woocommerce ul.payment_methods li .payment_box,
.woocommerce ul.payment_methods li .payment_box p{
  color:var(--paper) !important;
}

/* =========================================================
   10) My Account — login / orders
   ========================================================= */
/* The "My account" page title and similar headings that used to render dark (low contrast) on the black background */
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1{
  color:var(--paper) !important;
}
/* Dashboard content (welcome text, paragraphs) */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .entry-content,
.woocommerce-account .entry-content p{
  color:var(--paper) !important;
}
.woocommerce-account .woocommerce-MyAccount-content strong{
  color:var(--paper) !important;
}
/* Links inside the content (order history, headings, the logout text link...) used to be nearly invisible */
.woocommerce-account .woocommerce-MyAccount-content a,
.woocommerce-account .entry-content a{
  color:var(--acid) !important;
  text-decoration:underline;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover,
.woocommerce-account .entry-content a:hover{
  color:var(--red) !important;
}
/* ---------- Unified card grouping the sidebar and content together ---------- */
.woocommerce-account .woocommerce{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:2.2rem;
  margin-top:1.2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
@media (max-width:768px){
  .woocommerce-account .woocommerce{ padding:1.3rem; border-radius:14px; }
}

/* Wider spacing between the sidebar and content + a fixed minimum sidebar width */
.woocommerce-account .woocommerce-MyAccount-navigation{
  min-width:230px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  transition:border-color .2s ease, transform .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  border-color:var(--acid);
}

/* The "Hello ..." welcome message stands out from other paragraphs as a top bar */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{
  font-family:'Cairo',sans-serif !important;
  font-size:1.05rem;
  padding-bottom:1.1rem;
  margin-bottom:1.3rem;
  border-bottom:1px solid var(--line);
}
/* Remaining content paragraphs: comfortable line spacing and a max width for readability */
.woocommerce-account .woocommerce-MyAccount-content p{
  line-height:2;
  max-width:680px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.9rem;
  padding:.7em 1.2em; border-radius:8px; display:block;
  background:var(--ink-2); border:1px solid var(--line); color:var(--paper);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--acid) !important; color:var(--ink) !important; border-color:var(--acid) !important;
  opacity:1 !important;
}
.woocommerce-orders-table__row td,
.woocommerce-orders-table__row th{ color:var(--paper) !important; border-color:var(--line) !important; }
.woocommerce-orders-table__header,
.woocommerce-orders-table__header span,
.woocommerce-orders-table thead th{
  color:#e31e24 !important;
  font-weight:800 !important;
}
.woocommerce-order-status.status-completed{ color:var(--acid) !important; }
.woocommerce-order-status.status-processing{ color:#ff6b6f !important; }

/* =========================================================
   11.1) Halftone pattern (light dots) — element added by functions.php right after body opens
   ========================================================= */
.red2red-halftone{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(243,236,216,.16) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  opacity:.5;
}
/* Make sure the real content sits above the pattern */
#page, #content, .site-content, #masthead{ position:relative; z-index:1; }

/* =========================================================
   11.2) Eyebrow label — element added by functions.php above the product grid
   ========================================================= */
.eyebrow.red2red-eyebrow{
  font-family:'Cairo',sans-serif !important;
  font-weight:700 !important;
  font-size:.78rem !important;
  letter-spacing:.14em !important;
  color:var(--acid) !important;
  display:flex !important;
  align-items:center !important;
  gap:.5em !important;
  margin-bottom:1.1em !important;
}
.eyebrow.red2red-eyebrow::before{
  content:'';
  width:26px;
  height:3px;
  background:var(--red);
  display:inline-block;
}

/* =========================================================
   14) Parent category page with subcategories (cars, movies, gaming...)
   Each subcategory is shown with its title + a preview of 6 products (taxonomy-product_cat.php)
   ========================================================= */
.red2red-cat-archive,
.red2red-cat-archive .woocommerce-products-header,
.red2red-cat-archive .red2red-subcat-block{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  clear:both !important;
  flex:none !important;
  grid-column:auto !important;
}
.red2red-cat-archive{ padding-bottom:2rem; }
.red2red-cat-archive .term-description{
  color:var(--paper) !important; opacity:.7; max-width:760px;
  margin-top:.6rem; line-height:1.8;
}
.red2red-cat-archive .term-description p{ margin:0; }

.red2red-subcat-block{ margin-bottom:4rem; }
.red2red-subcat-block:last-child{ margin-bottom:1rem; }
.red2red-subcat-block ul.products{ padding-bottom:0 !important; }

/* ---------- Subcategory name cards (without a product preview) ---------- */
.red2red-subcat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1.2rem;
}
.red2red-subcat-tile{
  display:block;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.red2red-subcat-tile:hover{
  transform:translateY(-4px);
  border-color:var(--acid);
}
.red2red-subcat-tile .tile-img{
  aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 40%, rgba(227,30,36,.14), transparent 65%);
  display:flex; align-items:center; justify-content:center;
}
.red2red-subcat-tile .tile-img img{
  width:100%; height:100%; object-fit:cover;
}
.red2red-subcat-tile .tile-info{
  padding:.9rem 1rem;
}
.red2red-subcat-tile .tile-info h3{
  font-family:'Cairo',sans-serif !important; font-weight:800 !important;
  font-size:1rem; color:var(--paper); margin:0 0 .3rem;
}
.red2red-subcat-tile .tile-count{
  font-family:'Tajawal',sans-serif; font-size:.78rem; color:var(--acid); opacity:.85;
}

@media (max-width:600px){
  .red2red-subcat-grid{ grid-template-columns:repeat(2, 1fr); gap:.8rem; }
}

/* ---------- Two-column layout: sidebar + main content ---------- */
.red2red-cat-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:2.5rem;
  align-items:start;
}
.red2red-cat-sidebar{
  position:sticky;
  top:calc(var(--nav-h) + 20px);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.2rem;
  max-height:calc(100vh - var(--nav-h) - 40px);
  display:flex;
  flex-direction:column;
}
.red2red-cat-search-wrap{ margin-bottom:1rem; }
.red2red-cat-search{
  width:100% !important;
  background:var(--ink) !important;
  border:1px solid var(--line) !important;
  color:var(--paper) !important;
  border-radius:8px !important;
  padding:.7em 1em !important;
  font-family:'Tajawal',sans-serif !important;
  font-size:.88rem !important;
}
.red2red-cat-search::placeholder{ color:var(--paper); opacity:.5; }
.red2red-cat-search:focus{ outline:none !important; border-color:var(--acid) !important; }
.red2red-cat-sidebar-list{
  list-style:none; margin:0; padding:0;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:.15rem;
}
.red2red-cat-sidebar-list li a{
  display:flex; align-items:center; justify-content:space-between; gap:.5em;
  padding:.55em .6em; border-radius:6px;
  font-family:'Tajawal',sans-serif; font-size:.86rem;
  color:var(--paper); opacity:.85;
}
.red2red-cat-sidebar-list li a:hover{
  background:rgba(228,255,58,.08); color:var(--acid); opacity:1;
}
.red2red-cat-sidebar-list li a .count{
  font-size:.74rem; opacity:.55; font-family:'Cairo',sans-serif;
}
.red2red-cat-sidebar-list li.is-current a{
  background:var(--acid) !important; color:var(--ink) !important; opacity:1 !important;
  font-weight:700;
}
.red2red-cat-sidebar-list li.is-current a .count{ color:var(--ink); opacity:.65; }
.red2red-cat-search-empty{
  color:var(--paper); opacity:.55; font-size:.84rem; padding:.6em; margin:0;
}

/* ---------- Pagination (groups of subcategories) ---------- */
.red2red-cat-pagination{ margin-top:3rem; display:flex; justify-content:center; }
.red2red-cat-pagination ul.page-numbers{
  list-style:none; display:flex; gap:.5rem; padding:0; margin:0; flex-wrap:wrap;
}
.red2red-cat-pagination .page-numbers{
  display:flex; align-items:center; justify-content:center;
  min-width:2.6em; height:2.6em; padding:0 .5em;
  border-radius:8px; border:1px solid var(--line);
  color:var(--paper); font-family:'Cairo',sans-serif; font-weight:700; font-size:.88rem;
}
.red2red-cat-pagination a.page-numbers:hover{
  border-color:var(--acid); color:var(--acid);
}
.red2red-cat-pagination .page-numbers.current{
  background:var(--acid); color:var(--ink); border-color:var(--acid);
}
.red2red-cat-pagination .page-numbers.dots{ border-color:transparent; opacity:.5; }

@media (max-width:900px){
  .red2red-cat-layout{ grid-template-columns:1fr; }
  .red2red-cat-sidebar{
    position:static; max-height:340px; order:-1;
  }
}

/* =========================================================
   11.3) The "Crumb"-style breadcrumb — relies on Astra Breadcrumb
   Enable it from: Appearance > Customize > Breadcrumb > Enable
   ========================================================= */
.ast-breadcrumbs,
.ast-woocommerce-breadcrumb,
.woocommerce-breadcrumb{
  font-family:'Cairo',sans-serif !important;
  font-weight:700 !important;
  font-size:.78rem !important;
  color:var(--paper) !important;
  opacity:.55 !important;
  margin-bottom:1rem !important;
}
.ast-breadcrumbs a,
.ast-woocommerce-breadcrumb a,
.woocommerce-breadcrumb a{
  color:var(--acid) !important;
  opacity:1 !important;
}

/* =========================================================
   13) Safeguard: hide any fallback (off-canvas/mobile) menu from Astra
   on large screens — as a precaution against a side effect from any earlier override
   ========================================================= */
@media (min-width: 769px) {
  .ast-mobile-header-wrap,
  .ast-off-canvas-wrap,
  .ast-header-break-point-767 #ast-off-canvas-mobile-wrap,
  [class*="off-canvas"] {
    display: none !important;
  }
}

/* Dark styling for the mobile dropdown menu (used to be default white, clashing with the rest of the site)
   we cover every level in the real nested hierarchy (not just the outer element) to guarantee the coloring applies */
body #ast-mobile-header,
body .ast-mobile-header-wrap,
body .ast-mobile-header-content,
body .ast-builder-menu-mobile,
body .main-header-bar-navigation,
body #ast-mobile-site-navigation,
body .ast-mobile-header-content .main-navigation,
body #ast-hf-mobile-menu,
body .ast-mobile-header-content .main-header-menu,
body .ast-off-canvas-wrap,
body #ast-off-canvas-mobile-wrap,
body [class*="off-canvas-popup"],
body [class*="off-canvas-content"],
body [class*="off-canvas-drawer"]{
  background:var(--ink) !important;
  background-color:var(--ink) !important;
}
/* Raise the dropdown menu layer above everything on the page (even the floating hero elements that used to visually poke through it) */
body .ast-mobile-header-content{
  position:relative !important;
  z-index:999999 !important;
}
body #ast-mobile-header{
  position:relative !important;
  z-index:999999 !important;
}
.ast-mobile-header-content .menu-item,
.ast-mobile-header-content .menu-item a,
.ast-mobile-header-content a.menu-link,
.ast-off-canvas-wrap a,
#ast-off-canvas-mobile-wrap a,
[class*="off-canvas-popup"] a,
[class*="off-canvas-content"] a,
[class*="off-canvas-drawer"] a,
.ast-off-canvas-wrap li,
#ast-off-canvas-mobile-wrap li,
[class*="off-canvas-popup"] li{
  color:var(--paper) !important;
  border-color:var(--line) !important;
}
.ast-mobile-header-content .menu-item a:hover,
.ast-off-canvas-wrap a:hover,
#ast-off-canvas-mobile-wrap a:hover,
[class*="off-canvas-popup"] a:hover{
  color:var(--acid) !important;
}

.main-header-menu .menu-item:last-child > a{
  background:var(--acid) !important;
  color:var(--ink) !important;
  padding:.6em 1.4em !important;
  border-radius:100px !important;
  font-weight:800 !important;
  box-shadow:3px 3px 0 var(--red) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.main-header-menu .menu-item:last-child > a:hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:5px 5px 0 var(--red) !important;
  color:var(--ink) !important;
}

/* =========================================================
   12) Custom footer (RED 2 RED) — appears on every page of the site
   ========================================================= */
.ast-site-title-wrap{ display:none !important; }
.site-logo-img{ padding-right:0 !important; }
.custom-logo{ max-height:46px !important; width:auto !important; }

#colophon{ display:none !important; }
.red2red-footer{ background:var(--ink); padding:4.5rem 0 2rem; }
.red2red-footer .wrap{ max-width:1320px; margin:0 auto; padding:0 6vw; }
.red2red-footer .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
.red2red-footer .footer-brand .logo{ font-family:'Cairo',sans-serif; font-weight:900; font-size:1.5rem; margin-bottom:1rem; display:inline-flex; gap:.15em; }
.red2red-footer .footer-brand .logo b{ color:var(--red); }
.red2red-footer .footer-brand .logo span{ color:var(--acid); }
.red2red-footer .footer-brand p{ max-width:280px; color:var(--paper); opacity:.6; font-size:.9rem; line-height:1.8; }
.red2red-footer .footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.red2red-footer .footer-col h4{ font-family:'Cairo',sans-serif; font-weight:800; font-size:.85rem; letter-spacing:.06em; margin-bottom:1.1rem; color:var(--acid); }
.red2red-footer .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; padding:0; margin:0; }
.red2red-footer .footer-col a{ font-size:.9rem; color:var(--paper); opacity:.75; text-decoration:none; }
.red2red-footer .footer-col a:hover{ opacity:1; color:var(--acid); }
.red2red-footer .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.8rem; color:var(--paper); opacity:.5; }
@media (max-width:600px){ .red2red-footer .footer-top{ flex-direction:column; } }
#colophon, .site-footer, footer.site-footer{
  background:var(--ink) !important;
  border-top:1px solid var(--line) !important;
  color:var(--paper) !important;
}

/* =========================================================
   17) Deterrent visual protection for the designs — watermark + text-selection prevention
   Note: this is only a deterrent for a casual visitor — it does not stop screenshots (technically impossible
   via a website) or someone who knows developer tools. The goal is only to reduce casual/quick copying.
   ========================================================= */

/* Repeating "RED2RED" watermark over every product image (on cards and the single product page) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
  position:relative;
  overflow:hidden; /* prevents the watermark from overflowing outside the image bounds */
}
.woocommerce ul.products li.product > a::after,
.woocommerce-product-gallery__image::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Ctext%20x%3D%270%27%20y%3D%27140%27%20font-family%3D%27Cairo%2C%20Arial%2C%20sans-serif%27%20font-size%3D%2724%27%20font-weight%3D%27800%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.13%29%27%20transform%3D%27rotate%28-28%20120%20120%29%27%3ERED2RED%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
  pointer-events:none;
  z-index:2;
}

/* Prevent dragging images to the desktop */
img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
}

/* Prevent selecting/copying general site text (product descriptions, paragraphs...) without affecting input fields */
body, p, h1, h2, h3, h4, span, .entry-content,
.woocommerce-product-details__short-description,
.woocommerce ul.products li.product{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
input, textarea, select{
  -webkit-user-select:text;
  -moz-user-select:text;
  user-select:text;
}

/* =========================================================
   18) Bundle offers system — removed on purpose (was here before).
   ========================================================= */

/* =========================================================
   19) Offers announcement bar — removed on purpose. Floating cart button below.
   ========================================================= */

/* On the homepage, the header floats (fixed) over the banner */
body.red2red-floating-header #masthead{
  top:0 !important;
}

/* --- Floating cart button --- */
.red2red-floating-cart{
  position:fixed;
  bottom:24px;
  left:24px;
  z-index:999;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--acid);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 3px 3px 0 var(--red);
  font-size:1.5rem;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.red2red-floating-cart:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 28px rgba(0,0,0,.5), 4px 4px 0 var(--red);
}
.red2red-floating-cart-count{
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--red);
  color:#fff;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  font-size:.72rem;
  min-width:22px;
  height:22px;
  padding:0 4px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
}
@media (max-width:600px){
  .red2red-floating-cart{
    width:50px; height:50px; bottom:16px; left:16px; font-size:1.25rem;
  }
}

/* =========================================================
   20) Unified product info block (shown on every product page)
   ========================================================= */
.red2red-product-info-block{
  max-width:900px;
  margin:3rem auto 3.5rem;
  padding:0;
}
.red2red-product-info-block h2{
  font-family:'Cairo',sans-serif !important;
  font-weight:900 !important;
  font-size:1.3rem;
  color:var(--paper) !important;
  margin:0 0 .7rem;
  line-height:1.5;
}
.red2red-product-info-block h3{
  font-family:'Cairo',sans-serif !important;
  font-weight:800 !important;
  font-size:1rem;
  color:var(--acid) !important;
  margin:2.6rem 0 1.1rem;
}
.red2red-product-info-block > p{
  color:var(--paper);
  opacity:.75;
  line-height:2;
  font-size:.93rem;
  max-width:640px;
}
.red2red-product-info-block ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.red2red-product-info-block ul li{
  color:var(--paper);
  opacity:.88;
  line-height:1.75;
  font-size:.9rem;
  background:var(--ink);
  border-right:3px solid var(--line);
  border-radius:6px;
  padding:.8em 1.1em;
}
.red2red-product-info-block ul li strong{
  color:var(--paper);
  opacity:1;
  font-weight:700;
}

@media (max-width:600px){
  .red2red-product-info-block{
    padding:1.5rem 1.3rem;
    margin-top:2.2rem;
    border-radius:12px;
  }
  .red2red-product-info-block h2{ font-size:1.1rem; }
}


/* =========================================================
   21) Customer photo upload field (frames and posters)
   ========================================================= */
.red2red-upload-field{
  background:var(--ink-2);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:1.2rem;
  margin-bottom:1.3rem;
}
.red2red-upload-field label{
  display:block;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  color:var(--acid) !important;
  margin-bottom:.6rem;
  font-size:.95rem;
}
.red2red-upload-field input[type="file"]{
  display:block;
  width:100%;
  color:var(--paper);
  font-family:'Tajawal',sans-serif;
  font-size:.85rem;
}
.red2red-upload-field input[type="file"]::file-selector-button{
  background:var(--acid);
  color:var(--ink);
  border:none;
  border-radius:8px;
  padding:.55em 1.1em;
  font-family:'Cairo',sans-serif;
  font-weight:700;
  margin-inline-end:.8em;
  cursor:pointer;
}
.red2red-upload-hint{
  font-size:.78rem !important;
  color:var(--paper);
  opacity:.6;
  margin:.6rem 0 0 !important;
}

/* =========================================================
   22) Styling for the variation-selection table (size/color...) on the product page
   used to render as the browser's default white, clashing visually with the site's dark background
   ========================================================= */
.variations{ width:100%; border:none !important; margin-bottom:1rem; }
.variations tr{ display:block; margin-bottom:1rem; }
.variations td, .variations th{ display:block; padding:0 !important; border:none !important; }
.variations label{
  font-family:'Cairo',sans-serif !important;
  font-weight:800 !important;
  color:var(--acid) !important;
  font-size:.92rem;
  margin-bottom:.5rem;
  display:block;
}
.variations select{
  width:100%;
  background:var(--ink-2) !important;
  color:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  padding:.75em 1em !important;
  font-family:'Tajawal',sans-serif !important;
  font-size:.92rem !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F3ECD8' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1em center;
}
.variations select:focus{
  outline:none !important;
  border-color:var(--acid) !important;
}
.reset_variations{
  color:var(--acid) !important;
  font-family:'Tajawal',sans-serif;
  font-size:.82rem;
}
.woocommerce-variation-price .amount{
  color:var(--acid) !important;
  font-weight:800;
}
.woocommerce-variation-availability .stock{
  color:var(--paper) !important;
  opacity:.8;
}
.single_variation_wrap .woocommerce-variation{
  padding:1rem 0;
}

/* =========================================================
   23) (This change has been reverted) — it used to wrap every product section in a card, but it turned out
   to also wrap the new info block (since it's inside the same container), creating a
   "card inside a card" (doubled borders and padding). We reverted it to normal.
   ========================================================= */

/* =========================================================
   24) Fully hide the content (a guaranteed CSS fallback, even if there's a
   delay in the PHP cache update): the old short description that duplicates the
   new info block
   ========================================================= */
.woocommerce-product-details__short-description{
  display:none !important;
}

/* =========================================================
   25) Calmer spacing in the product details column (prevents elements from stacking on top of each other)
   ========================================================= */
.woocommerce div.product .summary > *{
  margin-bottom:1.3rem;
}
.woocommerce div.product .summary .price{
  display:block;
  margin-bottom:1.5rem !important;
}
.woocommerce div.product .summary .variations{
  margin-bottom:.5rem;
}

/* =========================================================
   26) Mobile dropdown menu text color (red, without changing the background)
   ========================================================= */
html body .ast-mobile-header-content .menu-item a,
html body #ast-hf-mobile-menu .menu-item a,
html body .main-header-menu .menu-item a {
  color: #e31e24 !important;
}

/* =========================================================
   27) The "Continue with Google" section above the login form
   ========================================================= */
.red2red-social-login{
  text-align:center;
  max-width:400px;
  margin:1.5rem auto 2rem;
}
.red2red-social-login h3{
  margin-bottom:15px;
  font-size:1.1rem;
  color:var(--paper) !important;
  font-family:'Cairo',sans-serif !important;
}

/* =========================================================
   28) Login / register page — full custom design
   (woocommerce/myaccount/form-login.php)
   ========================================================= */
.red2red-account-page{ padding-bottom:2rem; }

/* Top banner (breadcrumb + title) */
.red2red-account-banner{ padding:1rem 0 2.5rem; }
.red2red-account-banner .crumb{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.78rem;
  color:var(--paper); opacity:.55; margin-bottom:1rem;
}
.red2red-account-banner .crumb a{ color:var(--acid); opacity:1; }
.red2red-account-banner .eyebrow{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; color:var(--acid); display:flex; align-items:center;
  gap:.5em; margin-bottom:1.1em;
}
.red2red-account-banner .eyebrow::before{
  content:''; width:26px; height:3px; background:var(--red); display:inline-block;
}
.red2red-account-banner h1{
  font-family:'Cairo',sans-serif !important; font-weight:900 !important;
  font-size:clamp(2rem,5vw,3.2rem); color:var(--paper); margin:0;
}
.red2red-account-banner p{
  margin-top:.8rem; max-width:520px; color:var(--paper); opacity:.7; line-height:1.85;
}

/* Grid: perks column + login card */
.account-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:flex-start;
}
.account-side h2{
  font-family:'Cairo',sans-serif !important; font-weight:900 !important;
  font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--paper); margin-bottom:1rem;
}
.account-side > p{ color:var(--paper); opacity:.72; line-height:1.9; margin-bottom:2rem; max-width:420px; }
.perk{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem; }
.perk .dot{ width:10px; height:10px; border-radius:50%; background:var(--acid); margin-top:.4rem; flex:none; }
.perk h4{ font-family:'Cairo',sans-serif; font-weight:800; font-size:.98rem; color:var(--paper); margin-bottom:.25rem; }
.perk p{ color:var(--paper); opacity:.65; font-size:.85rem; margin:0; max-width:340px; }

/* Login card (a light card, slightly tilted, in a "sticker" style) */
.auth-card{
  background:var(--paper); color:var(--ink); border-radius:10px; padding:2.4rem;
  box-shadow:14px 18px 0 var(--red-dark); transform:rotate(-1deg);
}
.auth-tabs{
  display:flex; gap:.5rem; margin-bottom:1.8rem;
  background:rgba(11,11,12,.06); border-radius:100px; padding:.3rem;
}
.auth-tab{
  flex:1; text-align:center; font-family:'Cairo',sans-serif; font-weight:800;
  font-size:.85rem; padding:.7em; border-radius:100px; transition:.2s;
  color:#2b2620; opacity:.6; background:none; border:none; cursor:pointer;
}
.auth-tab.active{ background:var(--ink); color:var(--paper); opacity:1; }

/* Override WooCommerce's default column layout (u-columns/col2-set) and turn it into tabs */
.auth-card #customer_login{ display:block; }
.auth-card .u-column1, .auth-card .u-column2{
  width:100% !important; float:none !important; margin:0 !important;
  display:none;
}
.auth-card .red2red-auth-form.active{ display:block; }
.auth-card #customer_login h2{ display:none; } /* hide the default Login/Register headings, the tabs replace them */

/* Form fields (light styling inside the card) */
.auth-card .form-row{ margin-bottom:1.1rem; }
.auth-card .form-row label{
  display:block; font-family:'Cairo',sans-serif; font-weight:700; font-size:.8rem;
  margin-bottom:.4rem; color:#2b2620;
}
.auth-card .form-row label .required{ color:var(--red); }
.auth-card .woocommerce-Input{
  width:100%; padding:.85em 1em; border-radius:8px;
  border:2px solid var(--red) !important; background:#fff !important;
  font-family:'Tajawal',sans-serif; font-size:.92rem; color:#1a1a1a !important;
  color-scheme:light; -webkit-text-fill-color:#1a1a1a;
}
.auth-card .woocommerce-Input:focus{ outline:none; border-color:var(--red-dark) !important; }
.auth-card .woocommerce-Input::placeholder{ color:#8a8478; }
.auth-card .woocommerce-form-login__submit,
.auth-card .woocommerce-form-register__submit{
  width:100% !important; justify-content:center !important; margin-top:.4rem !important;
  font-family:'Cairo',sans-serif !important; font-weight:800 !important; font-size:.95rem !important;
  padding:1em 2.1em !important; border-radius:100px !important; display:flex !important; align-items:center !important;
  gap:.6em; background:var(--ink) !important; color:var(--paper) !important;
  box-shadow:4px 4px 0 var(--red) !important; transition:transform .18s ease, box-shadow .18s ease;
  border:none !important; cursor:pointer;
}
.auth-card .woocommerce-form-login__submit:hover,
.auth-card .woocommerce-form-register__submit:hover{
  transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red);
}
.auth-card .auth-note{
  font-size:.78rem; color:#5a5346; margin-top:1rem; line-height:1.7; text-align:center;
}
.auth-card .auth-note a{ color:var(--red-dark); text-decoration:underline; }
.auth-card label.woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:.5em; font-size:.85rem; color:#2b2620;
  font-family:'Tajawal',sans-serif; margin-bottom:1rem;
}

/* The Google button inside the light card — colored to specifically suit this light background */
.auth-card .red2red-social-login{ margin-top:1.3rem; }
.auth-card .red2red-social-login h3{
  color:#2b2620 !important; font-size:.9rem !important; opacity:.7;
}

@media (max-width:880px){
  .account-grid{ grid-template-columns:1fr; }
  .auth-card{ transform:none; box-shadow:8px 10px 0 var(--red-dark); }
}

/* =========================================================
   29) Simplified login card (Google button only, no traditional form)
   ========================================================= */
.red2red-auth-card-simple{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:280px;
}
.red2red-auth-card-simple h3{
  font-family:'Cairo',sans-serif !important; font-weight:900 !important;
  font-size:1.2rem; color:var(--ink) !important; margin-bottom:.6rem;
}
.red2red-auth-card-simple .auth-note{
  color:#5a5346 !important; font-size:.85rem !important;
}
.red2red-auth-card-simple .red2red-social-login{
  width:100%; max-width:320px; margin:0 auto;
}

/* =========================================================
   30) Hide the traditional login fields (kept only for the hooks of the
   free Nextend Social Login plugin), and show only the Google button
   ========================================================= */
.red2red-hidden-fields{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}
.red2red-hidden-login-form{ width:100%; text-align:center; }
/* Center only the Google button without forcing a width on the plugin's own elements (that used to break the button's shape) */
.red2red-hidden-login-form > div:not(.red2red-hidden-fields){
  max-width:320px; margin:0 auto;
}

/* =========================================================
   31) Red color for low-contrast text on the checkout page
   ========================================================= */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-info *,
.woocommerce-checkout .woocommerce-form-coupon-toggle a,
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .payment_box,
.woocommerce-checkout .payment_box *,
.woocommerce-checkout .shipping ul#shipping_method li label,
.woocommerce-checkout .shipping ul#shipping_method li label *{
  color:#e31e24 !important;
}

/* =========================================================
   32) Extra contrast boost for the payment-method description box (it was still faint)
   ========================================================= */
body .woocommerce-checkout ul.payment_methods li .payment_box,
body .woocommerce-checkout ul.payment_methods li .payment_box p,
body .woocommerce-checkout ul.payment_methods li .payment_box div,
body .woocommerce-checkout ul.payment_methods li .payment_box span,
body ul.payment_methods li div.payment_box,
body ul.payment_methods li div.payment_box p{
  color:#c81015 !important;
  background:#f3ecd8 !important;
  opacity:1 !important;
}