/*
Theme Name:     Kadence Child Healthy
Template:       kadence
Author:         Andrew P
Description:    Minimal child CSS for Kadence Pro (callouts, readable tables, brand grid)
Version:        2.1
License:        GNU GPL v3.0+
*/

/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */
/*
   1. CSS Custom Properties (Variables)
   2. Utility Classes
      2.1 Layout & Alignment
      2.2 Typography & Colours
      2.3 Font Sizes
      2.4 Special Elements
      2.5 Spacing Utilities
   3. Components
      3.1 Callouts (Block & Inline)
      3.2 Tables
      3.3 Brand & Category Grids
   4. Role-Based Visibility (Barn2 Wholesale Pro)
   5. WooCommerce Overrides
      5.1 Product Content & Images
      5.2 Product Meta
      5.3 Fast Cart
      5.4 Product Grids
      5.5 Archive/Category Page Fixes
      5.6 My Account
   6. Responsive Utilities
   7. Accessibility
*/


/* =========================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================= */
:root {
  /* Callout colour system */
  --callout-bg-neutral: #f3f3f3;
  --callout-bd-neutral: #e6e6e6;
  --callout-bg-info:    #e8f2ff;
  --callout-bd-info:    #c9e0ff;
  --callout-bg-success: #e7f5ea;
  --callout-bd-success: #c7e8cf;
  --callout-bg-warning: #fff6db;
  --callout-bd-warning: #ffe4a3;
  --callout-bg-danger:  #ffe7ea;
  --callout-bd-danger:  #ffc9d0;
  --callout-bg-pink:    #faafbb;
  --callout-bd-pink:    #e48a96;
  --callout-bg-blue:    #cddeee;
  --callout-bd-blue:    #acc9e3;
  --callout-bg-green:   #d3ecd1;
  --callout-bd-green:   #c4e5c1;
  --callout-bg-teal:    #cbe9e5;
  --callout-bd-teal:    #a9dad5;
  --callout-bg-yellow:  #fff3ae;
  --callout-bd-yellow:  #ffeb7b;
  --callout-bg-orange:  #ffe0cc;
  --callout-bd-orange:  #ffd1b2;
  --callout-bg-violet:  #efe6f7;
  --callout-bd-violet:  #e0d0ee;
  
  /* Brand colours */
  --color-black:        #2a2927;
  --color-red:          #ff3030;
  --color-red-dark:     #cc2626;
  --color-pink:         #b96d7c;
  --color-green:        #0f9900;
  --color-blue:         #0093d8;
  --color-grey:         #888;
  --color-winter:       #3d3a8f;
  --color-discount:     #a94442;
  
  /* Table colours */
  --table-border:       #c9c5bc;
  --table-cell-bg:      #f9f8f7;
  --table-header-bg:    #e5eddf;
  --table-footer-bg:    #eddfe5;
  
  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Border radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  
  /* Shadows */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.15);
  
  /* Typography scale */
  --text-xs: 0.65rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.3rem;
}


/* =========================================================
   2. UTILITY CLASSES
   ========================================================= */

/* -------------------- 2.1 Layout & Alignment -------------------- */

.c-centre {
  display: block;
  text-align: center;
  margin-inline: auto;
}

.c-centre--normal {
  margin-block: 0 var(--space-md);
}

.c-centre--tight {
  margin-block: 0.2em 0;
}

.textright {
  text-align: right;
  margin-bottom: var(--space-md);
}

.textrightz {
  text-align: right;
  margin-bottom: 0;
}

.textleft {
  text-align: left;
  margin-bottom: var(--space-md);
}

/* Image alignment for text wrap */
img.alignleft,
.alignleft img {
  float: left;
  margin: 0 1rem 0.75rem 0;
}

img.alignright,
.alignright img {
  float: right;
  margin: 0 0 0.75rem 1rem;
}

img.aligncenter,
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Fix top gap on inline/floated images */
img {
  vertical-align: top;
}

img.alignleft,
img.alignright,
.alignleft img,
.alignright img,
.float-escape-right,
.float-escape-left {
  vertical-align: top;
}

/* Stack images on mobile */
@media (max-width: 600px) {
  img.alignleft,
  img.alignright,
  .alignleft img,
  .alignright img {
    float: none;
    display: block;
    margin: 0.75rem auto;
  }
}

/* Float escape - allows images to span multiple paragraphs */
.float-escape-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  shape-outside: margin-box;
  max-width: 50%;
}

.float-escape-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  shape-outside: margin-box;
  max-width: 50%;
}

@media (max-width: 600px) {
  .float-escape-right,
  .float-escape-left {
    float: none;
    max-width: 100%;
    margin: 0.75rem auto;
    display: block;
  }
}


/* -------------------- 2.2 Typography & Colours -------------------- */

/* Semantic colour classes */
.text_black { color: var(--color-black); }
.text_red   { color: var(--color-red); }
.text_redd  { color: var(--color-red-dark); }
.text_pink  { color: var(--color-pink); }
.text_green { color: var(--color-green); }
.text_blue  { color: var(--color-blue); }
.text_grey  { color: var(--color-grey); }
.black      { color: #000; }

/* Contextual text styles */
.smalltext {
  font-size: var(--text-sm) !important;
}

.smallpink {
  color: var(--color-pink);
  font-size: var(--text-sm) !important;
}

.smallblack {
  color: #000;
  font-size: var(--text-sm) !important;
}

.smallwinter {
  color: var(--color-winter);
  font-size: var(--text-sm) !important;
}

.reallyhealthydisc {
  color: var(--color-discount);
  font-size: var(--text-sm) !important;
}

.smallgrey {
  font-size: var(--text-sm) !important;
  color: var(--color-grey);
  text-transform: none;
}


/* -------------------- 2.3 Font Sizes -------------------- */

.font_100 { font-size: 1rem; }
.font_090 { font-size: 0.9rem; }
.font_085 { font-size: var(--text-sm); }
.font_080 { font-size: 0.8rem; }
.font_075 { font-size: 0.75rem; }
.font_070 { font-size: 0.7rem; }
.font_065 { font-size: var(--text-xs); }
.font_060 { font-size: 0.6rem; }

/* Lighter bold for body text */
strong, b, p strong, p b {
  font-weight: 500 !important;
}

/* Semi-bold for headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
}


/* -------------------- 2.4 Special Elements -------------------- */

/* Stock notice */
p.stock_notice {
  color: var(--color-red-dark);
  font-weight: 700;
}

p.stock_notice a {
  color: var(--color-red-dark);
  text-decoration: underline;
}

/* Black Friday banner */
.black-friday {
  background-color: #000 !important;
  color: #fff;
}

/* Registered / trademark marks */
.rm {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

/* End-of-article decorative flourish */
img.ef,
li img.ef {
  display: inline;
  vertical-align: text-top;
  margin-left: 0.25em;
}

/* Hide the little SALE badges that appear beside products on sale */
.wc-block-components-product-sale-badge,
span.onsale {
    display: none !important; 
}


/* -------------------- 2.5 Spacing Utilities -------------------- */

/* Margin top */
.mt-1 { margin-top: 0.375rem; }     /* 6px */
.mt-2 { margin-top: 0.75rem; }      /* 12px */
.mt-3 { margin-top: 1rem; }         /* 16px */
.mt-4 { margin-top: 1.5rem; }       /* 24px */
.mt-5 { margin-top: 2rem; }         /* 32px */

/* Margin bottom */
.mb-1 { margin-bottom: 0.375rem; }  /* 6px */
.mb-2 { margin-bottom: 0.75rem; }   /* 12px */
.mb-3 { margin-bottom: 1rem; }      /* 16px */
.mb-4 { margin-bottom: 1.5rem; }    /* 24px */
.mb-5 { margin-bottom: 2rem; }      /* 32px */

/* Padding top */
.pt-1 { padding-top: 0.375rem; }    /* 6px */
.pt-2 { padding-top: 0.75rem; }     /* 12px */
.pt-3 { padding-top: 1rem; }        /* 16px */
.pt-4 { padding-top: 1.5rem; }      /* 24px */
.pt-5 { padding-top: 2rem; }        /* 32px */

/* Padding bottom */
.pb-1 { padding-bottom: 0.375rem; } /* 6px */
.pb-2 { padding-bottom: 0.75rem; }  /* 12px */
.pb-3 { padding-bottom: 1rem; }     /* 16px */
.pb-4 { padding-bottom: 1.5rem; }   /* 24px */
.pb-5 { padding-bottom: 2rem; }     /* 32px */


/* =========================================================
   3. COMPONENTS
   ========================================================= */

/* -------------------- 3.1 Callouts (Block & Inline) -------------------- */

/* === BASE CALLOUT === */

.callout {
  background: var(--callout-bg-neutral);
  border: 1px solid var(--callout-bd-neutral);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: var(--space-md) 0;
  display: block;
  width: 100%;
  max-width: 100%;
  /* Word-break protection for long unbreakable words */
  overflow-wrap: break-word;
  word-wrap: break-word; /* Fallback for older browsers */
  -webkit-hyphens: auto; /* Safari/iOS */
  -ms-hyphens: auto; /* IE10-11 */
  hyphens: auto; /* Modern browsers */
}

.callout > *:last-child {
  margin-block-end: 0;
}

.callout .callout-title {
  font-weight: 600;
  margin: 0 0 0.5em 0;
  font-size: 1.05em;
  line-height: 1.3;
}

/* Focus states for accessibility (if callouts contain links) */
.callout a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* === BLOCK CALLOUTS (on their own line, stack vertically) === */

/* Content-width, left aligned */
.callout.callout--left {
  width: -moz-fit-content; /* Firefox */
  width: fit-content;
  max-width: 100%;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Content-width, right aligned */
.callout.callout--right {
  width: -moz-fit-content; /* Firefox */
  width: fit-content;
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* Content-width, centred */
.callout.callout--center {
  width: -moz-fit-content; /* Firefox */
  width: fit-content;
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

/* Fixed width (360px) */
.callout.callout--fixed {
  width: 360px;
  max-width: 100%;
}

/* Fixed width can combine with alignment */
.callout.callout--fixed.callout--left {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.callout.callout--fixed.callout--right {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.callout.callout--fixed.callout--center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

/* === FLOATING CALLOUTS (text wraps around them) === */

/* Float left, text wraps */
.callout.callout--float-left {
  float: left;
  width: -moz-fit-content; /* Firefox */
  width: fit-content;
  max-width: 360px; /* Fallback for older browsers */
  max-width: min(360px, 100%); /* Modern browsers - respects both constraints */
  margin: 0.3rem 0.75rem 0.6rem 0;
}

/* Float right, text wraps */
.callout.callout--float-right {
  float: right;
  width: -moz-fit-content; /* Firefox */
  width: fit-content;
  max-width: 360px; /* Fallback */
  max-width: min(360px, 100%);
  margin: 0.3rem 0 0.6rem 0.75rem;
}

/* Fixed width floating callouts */
.callout.callout--float-left.callout--fixed {
  width: 360px;
}

.callout.callout--float-right.callout--fixed {
  width: 360px;
}

/* === INLINE BADGES (tiny highlights within text) === */

.callout.callout--badge {
  display: inline-block; /* Changed from inline for better alignment */
  vertical-align: baseline; /* Aligns properly with surrounding text */
  padding: 0.15em 0.5em;
  margin: 0 0.2em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  line-height: 1.2; /* Tighter for badges */
  white-space: nowrap;
  font-weight: 500;
}

/* === CALLOUT LISTS (for price lists, features, etc.) === */

.callout ul.callout-list,
.callout ol.callout-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.callout ul.callout-list li,
.callout ol.callout-list li {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* === CALLOUT RESPONSIVE BEHAVIOUR === */

/* On mobile, all floating callouts become full-width blocks */
@media (max-width: 768px) {
  .callout.callout--float-left,
  .callout.callout--float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: var(--space-md) 0;
  }
}

/* === CALLOUT PRINT STYLES === */

@media print {
  .callout {
    break-inside: avoid; /* Don't split callouts across pages */
    page-break-inside: avoid; /* Older browser fallback */
    box-shadow: none; /* Shadows don't print well */
    border: 2px solid currentColor; /* Ensure borders print */
  }
  
  /* No floats in print - stack everything */
  .callout.callout--float-left,
  .callout.callout--float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }
  
  /* Badges print inline as normal */
  .callout.callout--badge {
    box-shadow: none;
    border: 1px solid currentColor;
  }
}

/* === CALLOUT COLOUR VARIANTS === */

.callout--info,
.callout.callout--badge.callout--info {
  background: var(--callout-bg-info);
  border-color: var(--callout-bd-info);
}

.callout--success,
.callout.callout--badge.callout--success {
  background: var(--callout-bg-success);
  border-color: var(--callout-bd-success);
}

.callout--warning,
.callout.callout--badge.callout--warning {
  background: var(--callout-bg-warning);
  border-color: var(--callout-bd-warning);
}

.callout--danger,
.callout.callout--badge.callout--danger {
  background: var(--callout-bg-danger);
  border-color: var(--callout-bd-danger);
}

.callout--pink,
.callout.callout--badge.callout--pink {
  background: var(--callout-bg-pink);
  border-color: var(--callout-bd-pink);
}

.callout--pink-strong,
.callout.callout--badge.callout--pink-strong {
  background: #f87f93;
  border-color: #df7584;
}

.callout--blue,
.callout.callout--badge.callout--blue {
  background: var(--callout-bg-blue);
  border-color: var(--callout-bd-blue);
}

.callout--green,
.callout.callout--badge.callout--green {
  background: var(--callout-bg-green);
  border-color: var(--callout-bd-green);
}

.callout--teal,
.callout.callout--badge.callout--teal {
  background: var(--callout-bg-teal);
  border-color: var(--callout-bd-teal);
}

.callout--yellow,
.callout.callout--badge.callout--yellow {
  background: var(--callout-bg-yellow);
  border-color: var(--callout-bd-yellow);
}

.callout--orange,
.callout.callout--badge.callout--orange {
  background: var(--callout-bg-orange);
  border-color: var(--callout-bd-orange);
}

.callout--violet,
.callout.callout--badge.callout--violet {
  background: var(--callout-bg-violet);
  border-color: var(--callout-bd-violet);
}

.callout--neutral,
.callout.callout--badge.callout--neutral {
  background: var(--callout-bg-neutral);
  border-color: var(--callout-bd-neutral);
}

/* === CALLOUTS INSIDE KADENCE TABS === */

/* Kadence tabs: float containment & scroll behaviour */
.kt-tab-inner-content-inner {
  display: flow-root;
  overflow-x: visible;
  min-width: 0;
}

.kt-tab-inner-content-inner::after {
  content: "";
  display: table;
  clear: both;
}

/* Ensure callouts respect container boundaries inside tabs */
.kt-tab-inner-content-inner .callout {
  max-width: 100%;
}

/* Extra constraint for floated callouts within tabs - ensures they fit nicely */
.kt-tab-inner-content-inner .callout.callout--float-left,
.kt-tab-inner-content-inner .callout.callout--float-right {
  /* Use older browser fallback first, then modern */
  max-width: calc(50% - 1rem); /* Fallback */
}

/* Modern browser enhancement for tabs */
@supports (max-width: min(360px, calc(50% - 1rem))) {
  .kt-tab-inner-content-inner .callout.callout--float-left,
  .kt-tab-inner-content-inner .callout.callout--float-right {
    max-width: min(360px, calc(50% - 1rem));
  }
}

/* Stack callouts on medium-sized screens within tabs to prevent overlap */
@media (max-width: 1024px) {
  .kt-tab-inner-content-inner .callout.callout--float-left,
  .kt-tab-inner-content-inner .callout.callout--float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0.75rem 0;
  }
}

/* Kadence tab panels: prevent content clipping */
.kb-tabs .kb-tabs-panel {
  overflow-x: visible;
  min-width: 0;
}


/* -------------------- 3.2 Tables -------------------- */

/* === BASE TABLE STYLES === */

/* Base table styles (shrink to content, cap at container) */
table.ing,
table.var {
  display: block;
  box-sizing: border-box;
  width: 100%; /* Fallback for older browsers */
  width: -moz-fit-content; /* Firefox */
  width: fit-content; /* Modern browsers */
  max-width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  table-layout: auto;
}

/* Override theme/plugin forcing width: 100% */
.woocommerce div.product .entry-content table.ing,
.woocommerce div.product .entry-content table.var,
.woocommerce div.product .woocommerce-product-details__short-description table.ing,
.woocommerce div.product .woocommerce-product-details__short-description table.var,
.kb-tabs .kb-tabs-panel .kt-tab-inner-content-inner table.ing,
.kb-tabs .kb-tabs-panel .kt-tab-inner-content-inner table.var,
.kb-tabs .kb-tabs-panel table.ing,
.kb-tabs .kb-tabs-panel table.var,
.entry-content table.ing,
.entry-content table.var {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important; /* Fallback */
  width: -moz-fit-content !important; /* Firefox */
  width: fit-content !important; /* Modern browsers */
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Table cells - base styling */
table.ing :is(td, th),
table.var :is(td, th) {
  border: 1px solid var(--table-border);
  padding: 6px;
  vertical-align: top;
  line-height: 1.3;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  background: var(--table-cell-bg);
}

table.ing th,
table.var th {
  background: var(--table-header-bg);
  font-weight: 700;
}

/* Right-align last column by default */
table.ing :is(th:last-child, td:last-child),
table.var :is(th:last-child, td:last-child) {
  text-align: end;
}

/* === COMPACT TABLE (class="ing" or "var" only) === */

/* First column: hugs content, never wraps (for short labels like "7%") */
table.ing:not(.fullwidth) :is(td:first-child, th:first-child),
table.var:not(.fullwidth) :is(td:first-child, th:first-child) {
  width: 1%;
  white-space: nowrap;
  text-align: start;
}

/* Second column: wraps, left-aligned (for ingredient names) */
table.ing:not(.fullwidth) :is(td:nth-child(2), th:nth-child(2)),
table.var:not(.fullwidth) :is(td:nth-child(2), th:nth-child(2)) {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

/* Colspan cells: always wrap properly */
table.ing :is(td[colspan], th[colspan]),
table.var :is(td[colspan], th[colspan]) {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Table footers */
table.ing tfoot td,
table.var tfoot td {
  background: var(--table-footer-bg);
  text-align: end;
  font-size: var(--text-sm);
  color: #555;
}

/* === FULL-WIDTH TABLE (class="ing fullwidth" or "var fullwidth") === */

table.ing.fullwidth,
table.var.fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto;
}

/* First column: flexible ingredient name column (prevents breaking on long names) */
table.ing.fullwidth tr > :first-child,
table.var.fullwidth tr > :first-child {
  width: auto; /* Remove the 1% constraint from base */
  white-space: normal; /* Allow wrapping */
  min-width: 28ch; /* Minimum readable width */
  max-width: 40ch; /* Prevent excessive width from very long names */
  word-break: break-word; /* Break extremely long words if needed */
  overflow-wrap: break-word;
  text-align: start;
}

/* Give header labels slightly more room */
table.ing.fullwidth thead tr > :first-child,
table.var.fullwidth thead tr > :first-child {
  min-width: 32ch;
}

/* All middle columns (between first and last): compact data columns */
table.ing.fullwidth tr > :not(:first-child):not(:last-child),
table.var.fullwidth tr > :not(:first-child):not(:last-child) {
  white-space: nowrap; /* Keep data tight */
  width: 1%; /* Hint: be as narrow as possible */
}

/* Last column: % RDA or similar - right-aligned, compact */
table.ing.fullwidth tr > :last-child,
table.var.fullwidth tr > :last-child {
  white-space: nowrap;
  width: 1%;
  text-align: end;
  min-width: 6ch; /* Just enough for "100%" */
}

/* Second-to-last column: typically "Amount" - needs a bit more room */
table.ing.fullwidth tr > :nth-last-child(2),
table.var.fullwidth tr > :nth-last-child(2) {
  min-width: 14ch; /* Room for "1000mg" or similar */
}

/* === TABLE RESPONSIVE BEHAVIOUR === */

/* Small screens: allow everything to wrap naturally */
@media (max-width: 640px) {
  /* Remove all constraints, let content flow */
  table.ing.fullwidth tr > *,
  table.var.fullwidth tr > * {
    white-space: normal;
    min-width: 0 !important;
    width: auto !important;
  }
  
  /* First column can be narrower on mobile */
  table.ing.fullwidth tr > :first-child,
  table.var.fullwidth tr > :first-child {
    min-width: 20ch;
    max-width: none;
  }
  
  /* Compact tables also allow wrapping on mobile */
  table.ing:not(.fullwidth) :is(td:first-child, th:first-child),
  table.var:not(.fullwidth) :is(td:first-child, th:first-child) {
    white-space: normal;
  }
}

/* === TABLE PRINT STYLES === */

@media print {
  table.ing,
  table.var {
    break-inside: avoid; /* Don't split tables across pages */
    page-break-inside: avoid;
    box-shadow: none;
  }
  
  /* Ensure borders print clearly */
  table.ing :is(td, th),
  table.var :is(td, th) {
    border: 1px solid #000 !important;
  }
}


/* -------------------- 3.3 Brand & Category Grids -------------------- */

/* === BASE GRID CONTAINER === */

.all-brands-container,
.all-categories-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
  padding: 30px;
  margin: 20px auto;
  box-sizing: border-box;
  align-items: stretch;
}

/* === GRID ITEM CARDS === */

.brand-item,
.category-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: 20px 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.brand-item:hover,
.category-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* === GRID ITEM IMAGES === */

.brand-item img,
.category-item img {
  max-inline-size: 100%;
  block-size: 120px;
  object-fit: contain;
  border-radius: 5px;
  margin-block-end: 12px;
}

/* === GRID ITEM TITLES === */

.brand-item h3,
.category-item h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 10px 0 8px 0;
  color: #222;
}

/* === GRID ITEM DESCRIPTIONS === */

/* Description styling - UNIFIED for both brands and categories */
.brand-item .brand-description,
.category-item .category-description {
  font-size: 0.9em;
  color: #666;
  margin: 5px 0;
  line-height: 1.5;
  display: block;
  max-height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add ellipsis to both brand and category descriptions */
.brand-item .brand-description::after,
.category-item .category-description::after {
  content: ' …';
  color: #777;
}

/* === GRID ITEM PRODUCT COUNT === */

/* Product count styling - works for both brands and categories */
.brand-item .product-count,
.category-item .product-count {
  font-size: var(--text-sm);
  color: var(--color-grey);
  margin-block-start: 5px;
}

/* === GRID ITEM LINKS === */

/* Link styles - UNIFIED for both brands and categories */
.brand-item a,
.category-item a {
  text-decoration: none;
}

.brand-item a:hover h3,
.category-item a:hover h3 {
  text-decoration: underline;
}

/* === GRID RESPONSIVE ADJUSTMENTS === */

@media (max-width: 900px) {
  .all-brands-container,
  .all-categories-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 25px;
  }
  
  .brand-item img,
  .category-item img {
    block-size: 100px;
  }
  
  .brand-item h3,
  .category-item h3 {
    font-size: 1.2em;
  }
  
  .brand-item .brand-description,
  .category-item .product-count {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .all-brands-container,
  .all-categories-container {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    padding: 20px;
  }
  
  .brand-item img,
  .category-item img {
    block-size: 80px;
  }
  
  .brand-item h3,
  .category-item h3 {
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .all-brands-container,
  .all-categories-container {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }
  
  .brand-item a,
  .category-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
  }
  
  .brand-item img,
  .category-item img {
    margin-inline-end: 15px;
    margin-block-end: 0;
    inline-size: 60px;
    block-size: 60px;
  }
  
  .brand-item h3,
  .category-item h3 {
    margin-block: 0 3px;
    font-size: 1.2em;
  }
  
  .brand-item .brand-description,
  .category-item .product-count {
    font-size: 0.9em;
    margin-block-end: 0;
  }
}


/* =========================================================
   4. ROLE-BASED VISIBILITY (BARN2 WHOLESALE PRO)
   ========================================================= */

/* Retail only - guests + logged in ordinary customers (NO wholesale) */
.retail-only {
  display: revert;
}

body[class*="wwp-wholesale"] .retail-only {
  display: none !important;
}

/* Guest only - not logged in users only */
.guest-only {
  display: revert;
}

body.logged-in .guest-only {
  display: none !important;
}

/* Retail logged in only - logged in ordinary customers (NO guests, NO wholesale) */
.retail-logged-in-only {
  display: none;
}

body.logged-in:not([class*="wwp-wholesale"]) .retail-logged-in-only {
  display: revert !important;
}

/* Practitioner only - practitioner users only */
.practitioner-only {
  display: none;
}

body.wwp-wholesale-role-practitioner .practitioner-only {
  display: revert !important;
}

/* Wholesale only - standard wholesale role only (NOT Practitioner) */
.wholesale-only {
  display: none;
}

body.wwp-wholesale-role-wholesale .wholesale-only {
  display: revert !important;
}

/* All wholesale - both Practitioner AND Wholesale (all wholesale roles) */
.all-wholesale {
  display: none;
}

body[class*="wwp-wholesale"] .all-wholesale {
  display: revert !important;
}


/* =========================================================
   5. WOOCOMMERCE OVERRIDES
   ========================================================= */

/* -------------------- 5.1 Product Content & Images -------------------- */

.woocommerce div.product .entry-content img,
.woocommerce div.product .woocommerce-product-details__short-description img {
  max-width: 100%;
  height: auto;
}

.woocommerce div.product .entry-content :is(img.alignleft, .alignleft img),
.woocommerce div.product .woocommerce-product-details__short-description :is(img.alignleft, .alignleft img) {
  float: left;
  margin: 0 0.9rem 0.6rem 0;
}

.woocommerce div.product .entry-content :is(img.alignright, .alignright img),
.woocommerce div.product .woocommerce-product-details__short-description :is(img.alignright, .alignright img) {
  float: right;
  margin: 0 0 0.6rem 0.9rem;
}

.woocommerce div.product .entry-content :is(img.aligncenter, .aligncenter, figure.aligncenter),
.woocommerce div.product .woocommerce-product-details__short-description :is(img.aligncenter, .aligncenter, figure.aligncenter) {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.woocommerce div.product .entry-content figure figcaption,
.woocommerce div.product .woocommerce-product-details__short-description figure figcaption {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.35rem;
}

@media (max-width: 600px) {
  .woocommerce div.product .entry-content :is(img.alignleft, .alignleft img, img.alignright, .alignright img),
  .woocommerce div.product .woocommerce-product-details__short-description :is(img.alignleft, .alignleft img, img.alignright, .alignright img) {
    float: none;
    margin: 0.6rem auto;
    display: block;
  }
}


/* -------------------- 5.2 Product Meta -------------------- */

/* Hide category metadata on single product pages */
.single-product .product_meta .posted_in {
  display: none !important;
}


/* -------------------- 5.3 Fast Cart -------------------- */

/* Keep quantity spinner away from price without stacking */
.wc-fast-cart__inner-contents td.product-quantity {
  overflow: visible !important;
}

.wc-fast-cart__inner-contents td.product-quantity .quantity.spinners-added {
  position: relative !important;
  transform: translateX(2rem);
  margin: 0 !important;
  overflow: visible;
  transition: transform 0.08s linear;
}


/* -------------------- 5.4 Product Grids -------------------- */

/* Equal height product cards with bottom-aligned buttons (Product Collection block) */
.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 1rem !important;
}

.wc-block-product .wp-block-woocommerce-product-button {
  margin-top: auto !important;
}

/* Also support older WooCommerce grid blocks */
.wc-block-grid__product {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 1rem !important;
}

.wc-block-grid__product .wc-block-components-product-button {
  margin-top: auto !important;
}


/* -------------------- 5.5 Archive/Category Page Fixes -------------------- */

/* Reduce gap between category description and product grid */
.term-description {
  margin-bottom: 0.5rem !important;
}

/* Add space above archive/category/brand title */
.entry-header.product-archive-title {
  padding-top: 1.5rem !important;
}

/* Hide empty placeholder headings in mega menu */
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul > li > a[href="#"] {
  display: none !important;
}

/* Reduce the large top margin on content area */
.woocommerce .content-area {
  margin-top: 1.5rem !important;
}

/* Archive product cards - flexbox for bottom-aligned buttons */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Product details section should grow to push button down */
.woocommerce ul.products li.product .product-details {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Push the action wrap (containing button) to the bottom */
.woocommerce ul.products li.product .product-action-wrap {
  margin-top: auto !important;
}

/* Smaller buttons on archive pages to match homepage */
.woocommerce ul.products li.product .product-action-wrap .button {
  font-size: 0.75rem !important;
  padding: 0.5em 1em !important;
  line-height: 1.3 !important;
  background-color: #4a90d9 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
}

.woocommerce ul.products li.product .product-action-wrap .button:hover {
  background-color: #3a7bc8 !important;
}

/* Reduce vertical spacing around button */
.woocommerce ul.products li.product .product-action-wrap {
  margin-top: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce spacing in product details */
.woocommerce ul.products li.product .product-details {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 0.3rem 0.5rem 0.5rem 0.5rem !important;
}

/* Tighter title spacing */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin-bottom: 0.3rem !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}

/* Tighter price spacing */
.woocommerce ul.products li.product .price {
  margin-bottom: 0 !important;
  padding-bottom: 0.3rem !important;
}

/* Hide product excerpt on archive pages to match homepage cleaner look */
.woocommerce ul.products li.product .product-excerpt {
  display: none !important;
}


/* -------------------- 5.6 My Account -------------------- */

/* Smaller action buttons in orders table */
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
  padding: 8px 16px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  margin-right: 6px !important;
}

.woocommerce-orders-table__cell-order-actions .woocommerce-button:last-child {
  margin-right: 0 !important;
}


/* =========================================================
   6. RESPONSIVE UTILITIES
   ========================================================= */

/* Additional responsive behaviour can be added here as needed */


/* =========================================================
   7. ACCESSIBILITY
   ========================================================= */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brand-item:hover,
  .category-item:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .wc-fast-cart__inner-contents td.product-quantity .quantity.spinners-added {
    transition: none;
  }
}