/* ============================================================
   Axomify StyleKit -- custom.css (v1.0.0, 2026-10-26)
   This file is enqueued by the Axomify StyleKit plugin. It is the
   owner's full, previously-pasted-into-Additional-CSS stylesheet,
   migrated here so it's a real versioned file instead of a
   Customizer textarea (see axomify-stylekit.php for why). Edit
   THIS file (not the Additional CSS box) for any future change --
   if the Additional CSS box in Appearance -> Customize still has
   this same content pasted in, it's now redundant and safe to
   clear out, to avoid confusion about which copy is "live."
   ============================================================ */

.woocommerce-variation.single_variation {
    margin-bottom: 5px;
}
.wapf-product-totals .wapf--inner {
    padding: 0;
}
span.wapf-product-total.price.amount {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 700;
}
span.wapf-options-total.price.amount {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 700;
}
span.wapf-grand-total.price.amount {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 700;
}
.wapf-product-totals .wapf--inner>div {
    padding-bottom: 0px;
}
span.woocommerce-Price-amount.amount {
    color: #e58701;
    font-weight: 700;
}
h1.product_title.entry-title {
    font-size: 24px;
    font-weight: 700;
    color: #00217a;
}
.woocommerce-product-details__short-description {
    padding: 0;
}
ul.products li.product .product-loop-image-wrapper .tinvwl_add_to_wishlist_button {
    margin: 0;
    background: #C5EAD9;
    color: #236849;
}
/*** Contact Form ***/
input[type=search], input[type=email], input[type=number], input[type=url], input[type=text], input[type=tel], input[type=password],
textarea {
    outline: 0;
    border: 2px solid #c2c7cc;
    padding: 13px 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    max-height: 50px;
background: #f8f6f0;
border-color: #f8f6f0;
    color: #28375a;
}
textarea{
	min-height: 250px
}
submit[type="submit"],
.wpcf7-submit {
	background: #704fe6;
	color: #ffffff;
	padding: 10px 30px!important;
	border-radius: 10px;
}
/*** Products Archive ***/
.product-loop-content {
    padding: 0;
}
.tinv-wraper.woocommerce.tinv-wishlist.tinvwl-after-add-to-cart.tinvwl-loop-button-wrapper.tinvwl-woocommerce_after_shop_loop_item {
    display: none;
}
img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.product-loop-image {
    border-radius: 10px;
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    font-weight: 600;
    color: #28375a;
}
span.price {
    font-weight: 500;
    color: #28375a;
}
h2.woocommerce-loop-product__title {
    margin-bottom: 0;
}
/*** Page Head ***/
.page-header .entry-title {
    font-size: 3em;
    font-weight: bold;
}
.site-footer .textwidget h4 {
    color: #fff;
}
* {
    font-family: Outfit, sans-serif;
}
/* Hide Comments Closed Text Across All Pages */
.nocomments,
.comments-closed,
#respond .comments-title,
p.no-comments {
    display: none !important;
}
/*** Sticky Header ***/
#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
}
/*** Sticky Header should duck behind mobile menu / cart drawer when either is open ***
 * Confirmed by reading the actual Woostify theme source (assets/js/navigation.js line 81
 * and assets/js/woocommerce/woocommerce.js line 540): the theme adds the classes
 * "sidebar-menu-open" and "cart-sidebar-open" to the <html> tag (document.documentElement),
 * NOT to <body> -- that's why an earlier body-based attempt at this fix never matched
 * anything. The theme's own drawer panels (.sidebar-menu, #shop-cart-sidebar) use
 * z-index: 200 and their dark backdrop (#woostify-overlay) uses z-index: 199 (see
 * style.css lines 4518-4524, 9280-9288, 9663-9669) -- both far below this site's custom
 * z-index: 999 on the sticky header above, which is why the header (logo/menu icon/cart
 * icon, and anything else in it) was always painting on top of the open drawer.
 */
html.sidebar-menu-open #masthead.site-header,
html.cart-sidebar-open #masthead.site-header {
    z-index: 1 !important;
}
/* Axomify: reduce Woostify's hardcoded 30px product-grid gap to 10px.
   NOTE: fixed a small inconsistency here -- the width calc()s below were still doing
   the math against a 12px gap even though the actual margin above is 10px, which drifts
   the row width by ~2px per row (usually invisible, but can nudge a row to wrap early on
   some screen widths at higher column counts). Both now use 10px consistently. */
.products .product {
  margin-right: 10px;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  .products.columns-2 .product { width: calc((100% - 10px) / 2 - 0.01px); }
  .products.columns-3 .product { width: calc((100% - 20px) / 3 - 0.01px); }
  .products.columns-4 .product { width: calc((100% - 30px) / 4 - 0.01px); }
  .products.columns-5 .product { width: calc((100% - 40px) / 5 - 0.01px); }
  .products.columns-6 .product { width: calc((100% - 50px) / 6 - 0.01px); }
}
@media (min-width: 601px) and (max-width: 991px) {
  .products.tablet-columns-2 .product { width: calc((100% - 10px) / 2 - 0.01px); }
  .products.tablet-columns-3 .product { width: calc((100% - 20px) / 3 - 0.01px); }
  .products.tablet-columns-4 .product { width: calc((100% - 30px) / 4 - 0.01px); }
  .products.tablet-columns-5 .product { width: calc((100% - 40px) / 5 - 0.01px); }
}
@media (max-width: 600px) {
  .products.mobile-columns-2 .product { width: calc((100% - 10px) / 2 - 0.01px); }
  .products.mobile-columns-3 .product { width: calc((100% - 20px) / 3 - 0.01px); }
}
/* Axomify: tighten product-title line spacing on mobile (Woostify applies a fixed
   28px line-height globally, meant for body text, but the loop-product title has
   no line-height of its own, so a 2-line wrapped product name gets the same
   oversized spacing) */
@media (max-width: 600px) {
  .product .woocommerce-loop-product__title {
    line-height: 1.2;
  }
}

/* ============================================================
   Axomify: Professional Polish -- NEW additions (2026-08-28)
   Everything above this line is your existing CSS, unchanged.
   Below is only what was genuinely missing -- checked against
   your current file first so nothing here duplicates or fights
   a rule you already have (image radius, content padding, and
   price weight are already handled above and were left alone).
   ============================================================ */

/* 1. Product title -- your CSS already bolds the link wrapper
      (a.woocommerce-LoopProduct-link), but the theme's own
      style.css sets font-weight: normal directly on the <h2>
      title itself, which wins over the inherited link weight --
      so the title text was still rendering as plain/normal weight
      in practice. This targets the title element directly. */
.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 600;
}

/* 2. Product names no longer wrap onto a second line at all -- a
      long name now truncates to ONE line with an ellipsis ("...")
      instead. (An earlier version of this rule allowed 2 lines with
      a reserved min-height so short and long titles matched card
      height -- but that reserved space was exactly the visible gap
      between the title and the price on a 1-line title like "Crest
      Memento 3 Pcs Set". Single-line truncation removes that gap
      completely, since every title now takes the exact same height
      no matter how long the name is -- no reserved space needed.) */
.product .woocommerce-loop-product__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. Product image -- forces every thumbnail into the same square
      shape (object-fit: cover crops to fit, never stretches), so
      photos of different original sizes still line up into one
      neat, uniform grid. Your existing 10px image border-radius
      above is untouched and still applies on top of this. */
.product-loop-image-wrapper {
  aspect-ratio: 1 / 1;
		  border-radius: 10px;
}
.product-loop-image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 4. Card hover -- a soft shadow + slight lift on hover, so each
      product tile feels like a distinct card. No border-radius or
      overflow change here on purpose -- your image already has its
      own 10px rounding, and content padding is already 0, so
      re-rounding the outer tile would just risk a mismatched double
      curve at the edges. */
.products .product {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.products .product:hover {
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
	  border-radius: 20px;
	  padding: 5px 5px;
}

/* 5. Star rating -- tightens the theme's default extra spacing
      above/below it so it sits closer to the title and price. */
.star-rating {
  margin: 4px 0 !important;
  font-size: 13px;
}

/* 6. Add-to-cart button (bottom, text-link style) -- a bit more
      breathing room + fully rounded "pill" corners, for a more
      modern look. Price weight/color above (span.price, 500,
      #28375a) was left exactly as you have it -- not overridden. */
.product-loop-meta.no-transform .button,
.product-loop-meta.no-transform .added_to_cart {
  border-radius: 20px;
  padding: 8px 18px;
}
/* Axomify: Single product page — main gallery image square (1:1) [v2 — corrected selectors;
   Woostify uses its own custom gallery markup (figure.image-item inside
   .product-images-container), NOT WooCommerce's default .woocommerce-product-gallery classes
   -- confirmed by reading the theme's own PHP source directly].
   object-fit: contain (not cover) so the FULL photo stays visible -- a customer deciding to
   buy should see the whole photo, not a cropped slice (matters especially for a tall
   multi-pack shot like Maggi's). */
.product-images-container .image-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8f6f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-images-container .image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.product-images-container .image-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8f6f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e2e2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Left-side thumbnail strip -- same square treatment */
.product-thumbnail-images-container .thumbnail-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-thumbnail-images-container .thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Axomify: Shop page category tiles (Shop page display = Show categories) -- these use
   WooCommerce's own default category template, separate from the product-card CSS above,
   which is why they never got the same square-image/card treatment. Giving them the same
   polish here. */
.products .product-category {
  text-align: center;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 18px 12px 20px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  background: #fff;
}
.products .product-category:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.products .product-category img {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 12px;
  display: block;
}
.products .product-category .woocommerce-loop-category__title {
  font-size: 15px;
  font-weight: 600;
  color: #28375a;
  margin: 0;
}
.products .product-category mark.count {
  background: none;
  color: #e58701;
  font-weight: 600;
}

/* Center the row instead of clumping tiles to the left with a big empty gap on the right */
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: Left;
}
.products .product-category mark.count {
  display: none;
}
.product-loop-image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border: 2px solid #e2e2e2;
	  border-radius: 10px;
}

/* ============================================================
   Axomify: Cart quantity-box "E" glyph fix (2026-09-23)
   Everything above this line is your original CSS, completely
   unchanged -- no redesign, no new colours, no layout changes.
   This is the ONE genuine bug from today: the cart page's
   quantity box was showing a stray "E"-looking character instead
   of the actual number (e.g. "5"). Confirmed live in the browser
   that the stored value was always correct -- this is a pure
   WooCommerce Blocks rendering bug, nothing to do with your CSS
   above. WooCommerce's own default styling puts 20px of padding
   on each side of a box that's only 45px wide total, leaving just
   ~5px of visible room for the digit itself -- the browser was
   squeezing the "5" into that tiny gap and the squeezed shape
   looked like an "E". Cutting the padding down to 4px each side
   gives the digit its normal ~37px of room. Verified live by
   injecting this exact rule into the page before delivering --
   the digit rendered correctly afterward on every cart line.
   ============================================================ */
body.woocommerce-cart .wc-block-components-quantity-selector__input {
    padding: 13px 4px !important;
}

/* ============================================================
   Axomify: Product name / price gap fix (2026-09-23)
   Nothing above this line touched -- only adding this one rule.
   Reported issue: on the homepage "What will you try today?"
   product grid, the gap between the product name and its price
   looked too big. Checked live: the actual margin/padding between
   the two is 0px -- there's no visible spacer. The real cause is
   that Woostify applies a global 28px line-height meant for body
   text, but the price/meta block's own text is only 14px -- so it
   sits inside a 28px-tall invisible box, which reads as extra gap.
   This is the exact same bug your own CSS already fixed for the
   product TITLE above (search "Woostify applies a fixed 28px
   line-height globally" a few lines up) -- just never extended to
   the price line below it. Tightening the line-height here shrinks
   that invisible space without touching any margin/padding, so
   nothing else about the layout moves. Verified live: this block's
   height went from 28px down to ~18px, matching the visible text,
   and confirmed sitewide (not just mobile) since the product grid
   markup is the same everywhere.
   ============================================================ */
.product-loop-meta {
    line-height: 1.3 !important;
}

/* ============================================================
   Axomify: "What will you try today?" homepage row -- mobile
   horizontal swipe-carousel (2026-09-23)

   ** NOT LIVE-VERIFIED -- Chrome connection dropped while building
   this, so unlike the two fixes above, this one has NOT been
   tested on the live site yet. Please check it on your phone and
   tell me if the card width/peek needs adjusting. **

   Scoped ONLY to this one homepage block (Elementor element id
   46106d7 -- confirmed this is the exact "What will you try
   today?" WooCommerce [products] shortcode, by checking its first
   product is "Chicken Khorika"). No other product row on the
   homepage, and no Shop page grid, is touched -- they don't share
   this id.

   This section is a plain WooCommerce shortcode grid (ul.products
   > li.product), not an Elementor Loop Grid, so this is pure CSS,
   no Elementor settings changed. On mobile it currently wraps onto
   multiple rows; this makes it scroll sideways in one row instead,
   like your reference screenshot, with the next card peeking at
   the edge.
   ============================================================ */
@media (max-width: 600px) {
  .elementor-element-46106d7 ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .elementor-element-46106d7 ul.products::-webkit-scrollbar {
    display: none;
  }
  .elementor-element-46106d7 ul.products .product {
    flex: 0 0 auto !important;
    width: 30vw !important;
    min-width: 118px !important;
    max-width: 150px !important;
    scroll-snap-align: start;
  }
}

/* ============================================================
   Axomify: My Account page -- menu icons + Downloads tab hidden
   (2026-10-26, REVISED same day -- see note below)
   Nothing above this line touched.

   1. "Vendor Dashboard" and "Notifications" were both showing the
      same default cloud icon in the My Account left-hand menu.
      Root cause (confirmed by reading the live page): Woostify
      renders each menu icon as a real inline <svg> inside
      .woostify-svg-icon, mapped from a fixed table of known
      endpoint slugs -- both of these custom tabs are unrecognised
      by that table, so both silently fell back to the same
      default icon. Fix: hide the real <svg> and set a custom icon
      via ::before on the same span instead.
   2. Downloads tab hidden entirely -- not used on this store.
   3. REVISED -- owner reported (live screenshot) the Notifications
      icon was showing up completely blank (no icon at all). Root
      cause: the site's LiteSpeed Cache plugin minifies Additional
      CSS, and the long embedded base64 icon code for Notifications
      got corrupted in that process (a known failure mode for big
      base64 strings inside minified CSS). Fix, in two parts:
      (a) owner does a LiteSpeed Cache -> Toolbox -> "Purge All"
      every time Additional CSS is changed/saved, and (b) these two
      icons now load from real uploaded image files (Media Library
      URLs) instead of embedded base64 -- a minifier cannot corrupt
      a plain image URL, so this is the safe long-term fix.
      Both files uploaded by the owner to the Media Library; URLs
      filled in below. No base64 left in these two rules at all now,
      so LiteSpeed's minifier has nothing long to corrupt.
   4. ADDED -- owner asked for the same icon treatment on "Rider
      Dashboard" (added by the Rider plugin's own
      axomify_add_myaccount_dashboard_menu_item(), slug
      'axomify-rider-dashboard' -- confirmed by reading that
      plugin's frontend/class-frontend.php, same plain-array-key
      mechanism, no real rewrite endpoint). Owner's own reference
      image had a visible "pngtree" watermark (unpaid stock
      preview) -- not usable on a live site, so a plain, properly
      licensed (Apache 2.0, no attribution required) motorbike
      icon was used instead, same flat black-silhouette style as
      the other two. File uploaded by the owner to the Media
      Library; URL filled in below.
   5. ADDED -- the new "Need Help" My Account tab (Axomify Helpdesk
      plugin, slug 'axomify-helpdesk') gets the same custom-icon
      treatment as the other three for visual consistency: a
      licensed (Apache 2.0) headset icon, same technique. File
      uploaded by the owner to the Media Library; URL filled in
      below.
   ============================================================ */
.woocommerce-MyAccount-navigation-link--axomify-vendor-dashboard .woostify-svg-icon svg,
.woocommerce-MyAccount-navigation-link--axomify-notifications .woostify-svg-icon svg,
.woocommerce-MyAccount-navigation-link--axomify-rider-dashboard .woostify-svg-icon svg,
.woocommerce-MyAccount-navigation-link--axomify-helpdesk .woostify-svg-icon svg {
    display: none !important;
}
.woocommerce-MyAccount-navigation-link--axomify-vendor-dashboard .woostify-svg-icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url('https://axomifymart.in/wp-content/uploads/2026/10/axomify-vendor-dashboard-shop-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.woocommerce-MyAccount-navigation-link--axomify-notifications .woostify-svg-icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url('https://axomifymart.in/wp-content/uploads/2026/10/axomify-notifications-bell-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.woocommerce-MyAccount-navigation-link--axomify-rider-dashboard .woostify-svg-icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url('https://axomifymart.in/wp-content/uploads/2026/10/axomify-rider-dashboard-bike-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.woocommerce-MyAccount-navigation-link--axomify-helpdesk .woostify-svg-icon::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('https://axomifymart.in/wp-content/uploads/2026/10/axomify-need-help-headset-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* ============================================================
   Axomify: My Account page -- Rider-Dashboard-style rebuild
   (2026-10-27, ROUND 5 -- REPLACES Round 4's dark-sidebar-box
   restyle below). Nothing above this line touched.

   Owner's request: "Mera website ka My account page ka UI Rider
   dashboard jeisa chahiye" -- match the Axomify Rider app's own
   Menu screen (dark profile-photo header, two stat cards, a white
   icon-list of rows, a bottom tab bar). Confirmed scope with the
   owner first: full layout, a new bottom tab bar, no promotional
   banner (Rider's own banner text is rider-specific and was
   skipped), and -- since this plugin was always meant by the
   owner to be "the one place the whole website's UI is handled
   from" (its own original request), it now also carries a small
   amount of PHP (includes/class-myaccount-blocks.php) for the
   three pieces that genuinely need real markup, not just CSS: a
   real profile photo (get_avatar()), the two stat cards, and the
   bottom tab bar. This is a deliberate, acknowledged change from
   v1.0.0's "pure CSS, no PHP" description -- see this plugin's own
   main file and readme.txt for the full story.

   Round 4's dark navy sidebar BOX is gone -- the nav list is now a
   white card of rows (icon circle + label + chevron), matching the
   Rider app's own "Basic Details / KYC Documents / Edit Profile"
   list. The dark navy treatment is kept ONLY on the new profile
   header card above it (photo + name), matching the Rider
   screenshot's own dark-header-then-white-content layout.

   The old default WooCommerce "Hello X (not X? Log out)" paragraph
   and the "Manage Your Orders & Account" welcome-card text (both
   restyled in Round 4) are now hidden entirely -- replaced by the
   new PHP-rendered profile header + stat cards above the nav list.
   Log out is unaffected -- it's still its own row in the nav list
   below, unchanged.

   AMENDED v1.4.1: the "bottom tab bar" mentioned throughout this
   block was removed at the owner's own request after seeing it
   live -- it replaced the site's default mobile footer menu, which
   wasn't the intent (only the TOP of the page was meant to match
   the Rider app). See the removal note further down this file,
   where .axsk-bottom-nav* used to be defined.
   ============================================================ */

/* ---- Profile header card (PHP: render_profile_header()) ---- */
.axsk-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #11213A;
    border-radius: 14px;
    padding: 28px 18px 24px;
    margin-bottom: 16px;
    text-align: center;
}
.axsk-profile-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50%;
    border: 3px solid #F5B700;
    object-fit: cover;
}
.axsk-profile-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none; /* v1.4.0: this is now sometimes an <a> back to the overview -- strip the theme's default link underline/colour. */
}
.axsk-profile-name:hover,
.axsk-profile-name:focus {
    color: #F5B700;
}

/* ---- Stat cards (PHP: render_stat_cards()). v1.5.0: now prints on
   EVERY My Account page (overview + every subpage), not just the
   overview -- owner's own request, confirmed via AskUserQuestion, after
   noticing the cards disappeared on Orders/Address/etc. ---- */
.axsk-stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.axsk-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid #EEF0F3;
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(15,15,15,0.06);
}
.axsk-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FCEFC7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}
.axsk-stat-card--link .axsk-stat-icon {
    background-color: #E3F3EA;
}
.axsk-stat-icon--orders {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h12a1 1 0 0 1 1 1v19l-3-2-3 2-3-2-3 2-3-2V3a1 1 0 0 1 1-1z' fill='none' stroke='%23B8860B' stroke-width='1.6'/><path d='M8 8h8M8 12h8M8 16h5' stroke='%23B8860B' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
.axsk-stat-icon--help {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='%232E7D52' stroke-width='1.6'/><path d='M9.5 9.5a2.5 2.5 0 1 1 3.6 2.25c-.75.4-1.1.8-1.1 1.75' fill='none' stroke='%232E7D52' stroke-width='1.6' stroke-linecap='round'/><circle cx='12' cy='17' r='0.9' fill='%232E7D52'/></svg>");
}
.axsk-stat-label {
    color: #70767E;
    font-size: 13px;
    font-weight: 600;
}
.axsk-stat-value {
    color: #11213A;
    font-size: 17px;
    font-weight: 700;
    margin-top: -6px;
}

/* ---- Nav list -- white rows, Rider "icon-list" style ---- */
.woocommerce-MyAccount-navigation {
    background: #fff;
    border: 1px solid #EEF0F3;
    border-radius: 14px;
    padding: 4px 16px;
    box-shadow: 0 1px 3px rgba(15,15,15,0.06);
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation-link {
    margin-bottom: 0;
    border-bottom: 1px solid #F1F2F4;
}
.woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 2px;
    border-radius: 0;
    text-decoration: none;
    color: #22262E;
    font-weight: 600;
}
.woocommerce-MyAccount-navigation-link .woostify-svg-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #F4F5F7 !important;
    border-radius: 50%;
}
.woocommerce-MyAccount-navigation-link .woostify-svg-icon svg {
    width: 18px;
    height: 18px;
}
.woocommerce-MyAccount-navigation-link .woostify-svg-icon svg path {
    fill: #4B5565 !important;
}
.woocommerce-MyAccount-navigation-link .woostify-svg-icon::before {
    filter: none;
    width: 18px !important;
    height: 18px !important;
    opacity: 0.75;
}
.woocommerce-MyAccount-navigation-link a::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid #C7CBD1;
    border-bottom: 2px solid #C7CBD1;
    transform: rotate(-45deg);
}
.woocommerce-MyAccount-navigation-link.is-active a {
    color: #11213A;
}
.woocommerce-MyAccount-navigation-link.is-active .woostify-svg-icon {
    background: #FCEFC7 !important;
}
.woocommerce-MyAccount-navigation-link.is-active .woostify-svg-icon svg path {
    fill: #B8860B !important;
}

/* ---- Old default WC greeting / welcome-text paragraphs -- hidden,
   replaced by the new profile header + stat cards above ---- */
.woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none;
}

/* ---- REMOVED in v1.4.1: the custom mobile bottom tab bar
   (.axsk-bottom-nav*, PHP: render_bottom_nav()) that lived here.
   Owner's own words after seeing it live: "Mobile footer menu default hi
   rakhiye. Yeh rider dashboard ka footer menu nahi chahiye." (Keep the
   mobile footer menu as default -- I don't want the Rider Dashboard's
   footer menu.) It replaced the site's own default theme footer bar,
   which wasn't the intent -- only the top of the page (profile header,
   stat cards, white nav list) was meant to match the Rider app's look.
   The `body.woocommerce-account { padding-bottom: 64px; }` rule that
   existed only to make room for this fixed bar is removed too -- nothing
   needs that spacing any more now that the bar itself is gone. See
   includes/class-myaccount-blocks.php's own matching removal note. ---- */

/* ============================================================
   Axomify: My Account page -- 4 follow-ups after Round 5
   (2026-10-27, ROUND 6). Nothing above this line touched.

   Owner confirmed Round 5/the v1.3.2 fix finally worked live, then
   asked for:
   1. A real "edit profile photo" option on the avatar. **REPLACED in
      v1.5.0 -- see the removal note below, where this block's CSS used
      to be.**
   2. Hide "Dashboard" from the nav list -- not considered useful/
      reliable by the owner. Same technique already used for Downloads.
      To keep a way back to the overview, the profile header's name is
      now itself a link to My Account (see class-myaccount-blocks.php).
   3. Mobile only: don't show the full nav list again above a subpage's
      own content. **REPLACED in v1.5.0 -- see the removal note below.**
   4. Hide "Need Help" from the nav list too -- the "Need Help?" stat
      card above already covers it.
   ============================================================ */

/* ---- 2 & 4: hide Dashboard and Need Help from the nav list ---- */
.woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-MyAccount-navigation-link--axomify-helpdesk {
    display: none !important;
}

/* ---- REMOVED in v1.5.0: Round 6 item 3 used to hide the ENTIRE nav
   list on mobile whenever a subpage (Orders, Addresses, etc.) was
   open, via a `body.axsk-account-subpage` class. Owner clarified (after
   seeing it live) that this wasn't actually what was asked for: "meine
   mobile kiye manga tha ki dropdown jeisa chahiye. koi ek mein tab
   karne se uske niche hi dikhana chahiye." (I'd asked for it to be like
   a dropdown -- tapping one tab should show its content right below
   THAT tab, not hide the whole list.) Replaced with a true accordion:
   the nav list always stays visible on mobile now; see the new
   ".axsk-account-dropdown-panel-li" rules below (ROUND 7) for the
   dropdown-panel look, and includes/class-myaccount-blocks.php /
   assets/js/myaccount-nav.js for how the active tab's content is moved
   to sit directly under its own row. ---- */

/* ---- REMOVED in v1.5.0: the whole "click avatar -> View/Change photo"
   popup (edit badge, popup menu, hidden file input, full-size
   lightbox) that used to be defined here. Owner's own request, to stop
   every uploaded photo from permanently consuming Media Library
   storage: "har ek user ka image save hote hi jayega aur mera space le
   lega." The entire upload feature (includes/class-avatar-upload.php,
   assets/js/myaccount.js) is deleted, not just hidden -- same "full
   reversal" convention this project always uses for an owner-requested
   removal. The avatar is now purely a static display: a real photo
   when the user already has a Gravatar set (hosted externally, costs
   this site's storage nothing), otherwise a plain colored circle with
   the user's initials (e.g. "Tultul Phukan" -> "TP") -- see the new
   ".axsk-avatar-initials" rule below and includes/class-avatar-initials.php. ---- */
.axsk-profile-avatar-wrap {
    position: relative;
    display: inline-block;
}
.axsk-profile-avatar.axsk-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A2E52; /* a touch lighter than the card's own #11213A so the circle reads as its own element, not a hole in the card */
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: inherit;
    line-height: 1;
}

/* ============================================================
   Axomify: My Account page -- mobile dropdown + initials avatar
   (2026-10-27, ROUND 7). Owner's two follow-up requests after v1.4.2:
   1. Stat cards (My Orders / Need Help?) should show on EVERY My
      Account page, not just the overview -- see
      includes/class-myaccount-blocks.php's render_stat_cards() (no CSS
      change needed for this part, the cards' own rules already applied
      generically).
   2. Mobile: true dropdown/accordion nav -- handled below.
   3. Avatar: initials instead of an uploaded photo -- handled above.
   ============================================================ */

/* ---- Mobile accordion: the active tab's content (moved here by
   assets/js/myaccount-nav.js) renders as its own <li>, directly under
   the tapped row, with the rest of the nav list still visible above
   and below it. Desktop (>991px) is untouched -- the two-column
   nav+content layout stays exactly as before; the JS only moves
   anything at the same <=991px breakpoint this plugin already uses
   elsewhere. ---- */
@media (max-width: 991px) {
    .axsk-account-dropdown-panel-li {
        list-style: none;
        border-bottom: 1px solid #F1F2F4;
    }
    .axsk-account-dropdown-panel-li:last-child {
        border-bottom: none;
    }
    .axsk-account-dropdown-panel-li .woocommerce-MyAccount-content {
        padding: 4px 2px 18px;
    }
    .woocommerce-MyAccount-navigation-link.axsk-account-dropdown-open a::after {
        transform: rotate(45deg); /* chevron points down instead of right while its panel is open */
    }
    .woocommerce-MyAccount-navigation-link.axsk-account-dropdown-open {
        border-bottom: none; /* the panel <li> right after it supplies its own divider instead */
    }
}