/*
Theme Name: Donut3D Storefront
Template: storefront
Version: 1.0.5
Description: Storefront child theme for Donut3D
Author: Donut3D
*/

/* ============================
   Tokens
   ============================ */
:root{
  --donut-pink: #FF4FA3;
  --deep-purple: #5B2EFF;
  --ink: #0F172A;

  --topbar: #000000;
  --charcoal: #1F2937;          /* lighter charcoal */
  --menu-text: #F8FAFC;
}

/* ============================
   HEADER (top bar): full width black
   ============================ */
.site-header{
  background: var(--topbar);
  padding: 0 !important;
  margin: 0 !important;
}

/* Storefront max-width wrapper */
.site-header .col-full{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: transparent;
  padding: 8px 0 !important;   /* tight top bar */
}

/* Storefront floats interfere with flex */
.site-header .site-branding,
.site-header .site-search,
.site-header .site-header-cart,
.site-header .secondary-navigation{
  float: none !important;
}

/* Top bar text colours */
.site-header,
.site-header a{
  color: #fff;
}
.site-header a:hover{
  color: var(--donut-pink);
}

/* ============================
   Top bar layout: logo | search | cart
   ============================ */
.site-header .site-branding{ order: 1; flex: 0 0 auto; margin: 0; }
.site-header .site-search{ order: 2; flex: 1 1 260px; margin: 0 12px; }
.site-header .site-header-cart{ order: 3; margin-left: auto; flex: 0 0 auto; }
.site-header .secondary-navigation{ order: 4; }

/* Logo sizing */
.site-header .site-branding{
  max-width: 90px;
}
.site-header .site-branding a.custom-logo-link{
  display: block;
  max-width: 90px;
}
.site-header .site-branding img.custom-logo{
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
  max-width: 90px !important;
  display: block;
}

/* ============================
   SEARCH: make it ~1/2 size (desktop + mobile)
   ============================ */
/* Constrain the search container and center it */
.site-header .site-search{
  max-width: 420px;             /* ~half of the earlier 820px */
  width: 100%;
}
.site-header .site-search form{
  width: 100%;
}
.site-header .site-search input[type="search"]{
  width: 100%;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  height: 40px;                /* slightly slimmer */
}
.site-header .site-search input[type="search"]:focus{
  border-color: var(--deep-purple);
  box-shadow: 0 0 0 3px rgba(91, 46, 255, 0.25);
  outline: none;
}

/* ============================
   Cart: always visible on top bar
   ============================ */
.site-header-cart .cart-contents{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: #fff !important;
}

/* Dropdown only on hover/focus */
.site-header-cart .widget_shopping_cart{ display: none; }
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart{ display: block; }

/* ============================
   NAV (second bar): full width charcoal, slim
   ============================ */
.storefront-primary-navigation{
  background: var(--charcoal) !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Remove boxed/lines + keep inner container transparent */
.storefront-primary-navigation .col-full{
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.main-navigation{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Slim height */
.main-navigation ul.menu > li > a,
.main-navigation ul.menu li a{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
  font-weight: 700;
}

/* Menu colours */
.main-navigation a{
  color: var(--menu-text) !important;
}
.main-navigation ul.menu > li:hover > a,
.main-navigation ul.menu > li.focus > a{
  color: var(--donut-pink) !important;
}
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a{
  color: #A78BFA !important;
}

/* Dropdown menus stay white for readability */
.main-navigation ul.menu ul{
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
}
.main-navigation ul.menu ul li a{
  color: var(--ink) !important;
}
.main-navigation ul.menu ul li a:hover{
  background: rgba(255,79,163,.10) !important;
  color: var(--deep-purple) !important;
}

/* Remove any extra divider lines around nav/content */
.site-header + .storefront-primary-navigation,
.storefront-primary-navigation + .site-content{
  border-top: 0 !important;
}
.storefront-primary-navigation hr,
.site-header hr{
  display: none !important;
}

/* Mobile menu toggle sizing */
button.menu-toggle{
  padding: 8px 12px !important;
  line-height: 1.2 !important;
}

/* ============================
   Tablet/iPad fix:
   Keep CART in top bar; drop SEARCH to its own line and CENTER it.
   ============================ */
@media (max-width: 1024px){
  .site-header .col-full{
    justify-content: space-between;
  }

  /* Logo left, cart right */
  .site-header .site-branding{ order: 1; }
  .site-header .site-header-cart{ order: 2; margin-left: auto; }

  /* Search becomes its own row, centered, still "half size" */
  .site-header .site-search{
    order: 10;
    flex: 1 0 100%;
    max-width: 420px;          /* stays half size */
    width: 100%;
    margin: 8px auto 0 auto;   /* centers it */
  }
}

/* ============================
   Phones: keep it tidy
   (still half-size search, centered)
   ============================ */
@media (max-width: 480px){
  .site-header .site-branding img.custom-logo{
    height: 48px !important;
    max-height: 48px !important;
  }

  .site-header .site-search input[type="search"]{
    height: 38px;
  }
}
/* Cart contents: align amount, items, and basket nicely */
.site-header-cart .cart-contents{
  display: inline-flex !important;
  align-items: center !important;   /* vertical alignment */
  gap: 12px;                        /* spacing between bits */
  white-space: nowrap;
}

/* Make amount + items sit on the same baseline-ish */
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count{
  line-height: 1 !important;
}

/* Basket icon alignment + size */
.site-header-cart .cart-contents::after{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: translateY(-1px);      /* tiny nudge up/down; tweak -2px..+2px */
  font-size: 20px;                  /* controls basket icon size */
}