/* ==========================================================================
   Ghantee frontend overrides — dark theme + gold/saffron accents
   Palette: gold #D4A017 (text/border), #c9a34e (secondary border),
            saffron #FF9933 (hover/accent), base surface #1a1410
   Scope: wishlist page buttons, My Account > Downloads button,
          My Account mobile navigation
   ========================================================================== */

/* 1) Wishlist page action buttons (row actions, empty-state CTA, bottom form actions).
   These read CSS custom properties defined by the parent theme's [data-mode=dark]
   scope (--et_btn-dark-*); we override those custom properties at a more specific
   selector so cascade + specificity both favor this block without !important. */
.woocommerce-wishlist .xstore-wishlist-action .button,
.woocommerce-wishlist .empty-wishlist-block .btn,
.woocommerce-wishlist .form-actions .btn {
  --et_btn-dark-bg-color: #1a1410;
  --et_btn-dark-br-color: #c9a34e;
  --et_btn-dark-color: #D4A017;
  --et_btn-dark-bg-color-hover: #FF9933;
  --et_btn-dark-br-color-hover: #FF9933;
  --et_btn-dark-color-hover: #1a1410;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.woocommerce-wishlist .xstore-wishlist-action .button:hover,
.woocommerce-wishlist .empty-wishlist-block .btn:hover,
.woocommerce-wishlist .form-actions .btn:hover {
  box-shadow: 0 0 12px rgba(255, 153, 51, .35);
}

/* 2) My Account > Downloads button. Rendered by WooCommerce core
   (woocommerce/templates/order/order-downloads.php) as
   <a class="woocommerce-MyAccount-downloads-file button alt">. Unlike almost
   every other button on the site, this class is never targeted by the theme's
   dark-mode button rules, so it was falling back to WooCommerce's own default
   button styling instead of the site's theme. */
.woocommerce-MyAccount-downloads-file.button {
  display: inline-flex;
  align-items: center;
  background-color: #1a1410;
  border: 1px solid #c9a34e;
  color: #D4A017;
  -webkit-text-fill-color: currentColor;
  border-radius: 0;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.woocommerce-MyAccount-downloads-file.button:hover {
  background-color: #FF9933;
  border-color: #FF9933;
  color: #1a1410;
  box-shadow: 0 0 12px rgba(255, 153, 51, .35);
}

/* 3) My Account navigation on mobile. Desktop shows it as a left sidebar
   (25% column, floated). Below 993px there was no responsive treatment at
   all, so the full <ul> of ~9 stacked nav items (Dashboard, Orders,
   Downloads, Addresses, Account details, Wishlist, Compare, Payment
   methods, Logout) rendered as a tall vertical block above the tab content,
   pushing it far down the page. Convert it to a horizontal scrollable tab
   strip instead, consistent with the theme's own existing
   .etheme-account-page-tabs-horizontal pattern. */
@media only screen and (max-width: 992px) {
  .woocommerce-MyAccount-navigation-wrapper {
    margin-bottom: 20px;
  }
  .woocommerce-MyAccount-navigation-wrapper ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 1px solid var(--et_border-color);
    scrollbar-width: thin;
  }
  .woocommerce-MyAccount-navigation-wrapper li {
    flex: 0 0 auto;
  }
  .woocommerce-MyAccount-navigation-wrapper li a {
    width: auto;
    padding: 10px 14px;
  }
  .woocommerce-MyAccount-navigation-wrapper li.is-active a {
    color: #D4A017;
    border-bottom: 2px solid #D4A017;
  }
}

/* 4) Cart page — extend the same gold/saffron palette for full consistency.
   "Update cart" and "Clear shopping cart" already carry the sitewide
   .bordered utility class (gold #D4A017 border/text on transparent
   background via an existing !important rule) — their base state already
   matches this palette. Only their :hover was inconsistent, falling back to
   a plain white background (--et_btn-bordered-bg-color-hover:#fff) instead
   of an accent colour. "Apply coupon" and "Proceed to checkout" read the
   same --et_btn-dark-* variables as the wishlist/downloads buttons above,
   so they get the same variable-override treatment. */
.woocommerce-cart .checkout-button.button,
.woocommerce-cart .coupon input[type="submit"].btn {
  --et_btn-dark-bg-color: #1a1410;
  --et_btn-dark-br-color: #c9a34e;
  --et_btn-dark-color: #D4A017;
  --et_btn-dark-bg-color-hover: #FF9933;
  --et_btn-dark-br-color-hover: #FF9933;
  --et_btn-dark-color-hover: #1a1410;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.woocommerce-cart .checkout-button.button:hover,
.woocommerce-cart .coupon input[type="submit"].btn:hover {
  box-shadow: 0 0 12px rgba(255, 153, 51, .35);
}
.woocommerce-cart button[name="update_cart"].btn.bordered:hover,
.woocommerce-cart a.clear-cart.btn.bordered:hover {
  background-color: #FF9933 !important;
  border-color: #FF9933 !important;
  color: #1a1410 !important;
  box-shadow: 0 0 12px rgba(255, 153, 51, .35);
}

/* 5) Account nav strip + breadcrumb bar (wishlist, cart, My Account >
   Downloads). New components, not reusing .woocommerce-MyAccount-navigation-
   wrapper — that class carries the desktop-sidebar layout rules for the My
   Account page (25% floated column expecting a .woocommerce-MyAccount-content
   sibling), which would break on standalone pages like wishlist/cart that
   have no such sibling. These are self-contained bars using the theme's own
   .container grid class for alignment. */
.ghantee-breadcrumb-bar {
  background-color: #1a1410;
  border-bottom: 1px solid #2f2f2f;
  padding: 10px 0;
}
.ghantee-breadcrumb {
  font-size: .85rem;
  color: #9a9a9a;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ghantee-breadcrumb a {
  color: #c9a34e;
  text-decoration: none;
}
.ghantee-breadcrumb a:hover {
  color: #FF9933;
}
.ghantee-breadcrumb .sep {
  margin: 0 8px;
  color: #5a5a5a;
}
.ghantee-breadcrumb .current {
  color: #D4A017;
}

.ghantee-account-strip-wrapper {
  background-color: #1a1410;
  border-bottom: 1px solid #2f2f2f;
}
.ghantee-account-strip ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
}
.ghantee-account-strip li {
  flex: 0 0 auto;
}
.ghantee-account-strip a {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  color: #c9a34e;
  text-decoration: none;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.ghantee-account-strip a:hover {
  color: #FF9933;
}
.ghantee-account-strip li.active a {
  color: #D4A017;
  border-bottom-color: #D4A017;
}

/* ==========================================================================
   6) Downloads page: hide the default WooCommerce account header block
   (avatar, name, email, duplicate Dashboard/Orders/Downloads/Address/Account
   nav list) since our own breadcrumb + simplified nav strip already cover
   that. Scoped to the .ghantee-downloads-page body class (added only when
   on the downloads endpoint specifically) so Orders/Addresses/etc. keep
   their normal account header. Also darkens the downloads table area to
   match the Wishlist page instead of WooCommerce's default light background.
   ========================================================================== */
.ghantee-downloads-page .MyAccount-user-info,
.ghantee-downloads-page .woocommerce-MyAccount-navigation-wrapper {
  display: none !important;
}
.ghantee-downloads-page .woocommerce-MyAccount-content {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  padding-top: 0 !important;
}
.ghantee-downloads-page table.shop_table,
.ghantee-downloads-page table.woocommerce-table--downloads,
.ghantee-downloads-page table.woocommerce-MyAccount-downloads {
  background-color: #1a1410;
  color: #e0dcd4;
  border-color: #2f2f2f;
}
.ghantee-downloads-page table.shop_table th,
.ghantee-downloads-page table.woocommerce-table--downloads th {
  background-color: #141414;
  color: #c9a34e;
  border-color: #2f2f2f;
}
.ghantee-downloads-page table.shop_table td,
.ghantee-downloads-page table.woocommerce-table--downloads td {
  border-color: #2f2f2f;
}

/* ==========================================================================
   7) Wishlist page: small cart access pill near the top, next to the
   breadcrumb/nav strip, since there's no other visible way back to /cart/
   after adding an item from Wishlist.
   ========================================================================== */
.ghantee-wishlist-cart-access {
  background-color: #1a1410;
  border-bottom: 1px solid #2f2f2f;
  padding: 8px 0;
}
.ghantee-wishlist-cart-access .ghantee-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px;
  padding: 8px 14px;
  border: 1px solid #c9a34e;
  border-radius: 20px;
  color: #D4A017;
  text-decoration: none;
  font-size: .85rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.ghantee-wishlist-cart-access .ghantee-cart-pill:hover {
  background-color: #FF9933;
  border-color: #FF9933;
  color: #1a1410;
}
.ghantee-wishlist-cart-access .ghantee-cart-pill-count {
  background-color: #D4A017;
  color: #1a1410;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  padding: 0 5px;
}
.ghantee-wishlist-cart-access .ghantee-cart-pill:hover .ghantee-cart-pill-count {
  background-color: #1a1410;
  color: #FF9933;
}

/* ==========================================================================
   8) Font consistency: --gh-font is only ever defined scoped to
   #ghantee-home-content (an Elementor HTML widget on the homepage), so
   every var(--gh-font) reference elsewhere in the codebase has been
   silently resolving to nothing outside the homepage. Defining it on :root
   makes it genuinely global and fixes that everywhere, not just here.
   Applied via plain inheritance on the body (no !important, no universal
   selector) so it only affects text that doesn't already have its own
   explicit font-family — icon fonts (xstore-icons, et-icon, WooCommerce
   notice icons, dropdown chevrons, etc.) all declare their own font-family
   explicitly and are completely unaffected by inheritance. An earlier,
   more aggressive version of this rule (`.selector *` with !important)
   broke several unrelated icon glyphs and was reverted.
   ========================================================================== */
:root {
  --gh-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.woocommerce-wishlist,
body.woocommerce-cart,
body.woocommerce-account {
  font-family: var(--gh-font);
}

/* ==========================================================================
   9) Sitewide floating cart badge (desktop only — mobile already has the
   Cart tab in the bottom panel added earlier). Fixed position, independent
   of the Elementor header template. min-width:993px matches the theme's
   own desktop/mobile breakpoint used throughout this site.
   ========================================================================== */
@media only screen and (min-width: 993px) {
  .ghantee-floating-cart-badge-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
  }
  .ghantee-floating-cart-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background-color: #1a1410;
    border: 1px solid #c9a34e;
    border-radius: 30px;
    color: #D4A017;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
  }
  .ghantee-floating-cart-badge:hover {
    background-color: #FF9933;
    border-color: #FF9933;
    color: #1a1410;
    transform: translateY(-2px);
  }
  .ghantee-floating-cart-badge-count {
    background-color: #D4A017;
    color: #1a1410;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    padding: 0 6px;
  }
  .ghantee-floating-cart-badge:hover .ghantee-floating-cart-badge-count {
    background-color: #1a1410;
    color: #FF9933;
  }
}
@media only screen and (max-width: 992px) {
  .ghantee-floating-cart-badge-wrapper {
    display: none;
  }
}


/* ==========================================================================
   11) Downloads page: product thumbnail in the PRODUCT column, sized at
   2x the Wishlist page's own product image (Wishlist:
   .xstore-wishlist-image img { max-width: 6rem; max-height: 100px; },
   mobile 3.5rem — this is exactly double both).
   ========================================================================== */
.ghantee-download-product {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}
.ghantee-download-thumb {
  max-width: 12rem;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 4px;
  flex-shrink: 0;
}
.ghantee-download-product-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
@media only screen and (max-width: 992px) {
  .ghantee-download-thumb {
    max-width: 7rem;
    max-height: 116px;
  }
}