/*
Theme Name:   Vendo Child
Theme URI:    https://ven-do.co.za
Description:  Mobile-first school-uniform storefront for ven-do.co.za. Child of Storefront. Design system, school branding, and category/school landing layouts.
Author:       Vendo Development Team
Template:     storefront
Version:      0.9.43
Requires PHP: 8.2
Text Domain:  vendo
*/

/* ==========================================================================
   Design tokens (deliverable 1.2 — mobile-first design system)
   ========================================================================== */
:root {
  /* Brand — Vendo Schoolwear (from store branding / logo) */
  --vendo-primary:      #1b3a5b;   /* Vendo wordmark navy */
  --vendo-primary-dark: #12293f;
  --vendo-green:        #2f5d3f;   /* signage & heading green */
  --vendo-green-dark:   #23472f;
  --vendo-accent:       #dda02b;   /* gold — rainbow / "achieve great THINGS" */
  --vendo-orange:       #e07a2c;   /* rainbow orange */
  --vendo-bg:           #ffffff;
  --vendo-text:         #1a2732;
  --vendo-muted:        #6b7280;
  --vendo-border:       #e5e7eb;

  /* Signature rainbow swoosh (green → gold → orange) */
  --vendo-rainbow: linear-gradient(90deg,
    var(--vendo-green) 0%, #6ea63f 32%, var(--vendo-accent) 66%, var(--vendo-orange) 100%);

  /* Type scale (mobile-first) */
  --vendo-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vendo-radius: 8px;
  --vendo-maxw: 1200px;
}

body.woocommerce, body {
  font-family: var(--vendo-font-body);
  color: var(--vendo-text);
}

/* Fast, touch-friendly buttons */
.button, button, .woocommerce a.button, .woocommerce button.button {
  border-radius: var(--vendo-radius);
  background: var(--vendo-primary);
  min-height: 44px; /* touch target */
}
.button:hover { background: var(--vendo-primary-dark); }

/* Layout container */
.col-full { max-width: var(--vendo-maxw); }

/* Links: clean, no default underline (nav, cards, chrome). Prose links inside
   product/page copy keep an underline on hover for affordance. */
a { text-decoration: none; }
.entry-content p a:hover,
.woocommerce-product-details__short-description a:hover,
.woocommerce-Tabs-panel a:hover { text-decoration: underline; }

/* ==========================================================================
   Brand accents (deliverable 1.2 — Vendo Schoolwear)
   ========================================================================== */

/* Section/page titles in signage green */
.woocommerce-products-header__title,
.product_title,
.vendo-modal__title,
h1.entry-title {
  color: var(--vendo-green);
}

/* Signature rainbow underline device (like the store's swoosh rule) */
.vendo-rule,
.woocommerce-products-header__title::after {
  content: "";
  display: block;
  width: 88px;
  height: 4px;
  margin: 0.5rem 0 0;
  border-radius: 4px;
  background: var(--vendo-rainbow);
}
.woocommerce-products-header { text-align: left; }

/* Secondary "green" button variant (e.g. size guide) */
.button.alt.vendo-size-trigger,
.vendo-size-trigger {
  background: var(--vendo-green);
}
.vendo-size-trigger:hover { background: var(--vendo-green-dark); }

/* Header search accent: focus ring in brand navy */
.vendo-search input[type="search"]:focus {
  outline: none;
  border-color: var(--vendo-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-primary) 25%, transparent);
}

/* ==========================================================================
   Homepage (front-page.php) — fresh & clean
   ========================================================================== */

/* Fresh, crisp homepage: white ground, clean sans, light rainbow signature. */
.home.woocommerce-page .site-content .col-full { padding-top: 0; }

/* Full-bleed helper: break out of Storefront's .col-full container */
.fh-hero,
.fh-band,
.fh-creed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Hero */
.fh-hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem clamp(2rem, 4vw, 3.5rem);
}
.fh-hero__in { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.fh-eyebrow {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem;
  font-weight: 700; color: var(--vendo-green); margin: 0 0 1rem;
}
.fh-title {
  font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 650; line-height: 1.02;
  letter-spacing: -0.035em; margin: 0; max-width: 16ch; color: var(--vendo-text);
}
.fh-title .g { color: var(--vendo-green); }
.fh-lede { max-width: 42ch; margin: 1.3rem 0 1.8rem; font-size: 1.1rem; color: var(--vendo-muted); }
.fh-search, .fh-search .vendo-search { max-width: 480px; }
.fh-trust {
  display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.4rem;
  font-size: 0.85rem; color: var(--vendo-muted);
}
.fh-trust span { display: inline-flex; align-items: center; gap: 0.5rem; }
.fh-trust span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vendo-rainbow); display: inline-block;
}
/* soft rainbow arc — a whisper of the swoosh */
.fh-arc {
  position: absolute; top: -28%; right: -6%; z-index: 1;
  width: min(44vw, 520px); height: min(44vw, 520px); border-radius: 50%;
  background: conic-gradient(from 210deg,#e07a2c,#e6b12e,#5aa23c,#2f8f7d,#2f6fb0,#3a4f9e,#e07a2c);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%);
  opacity: 0.85; pointer-events: none;
}
@media (max-width: 720px) { .fh-arc { opacity: 0.3; top: auto; bottom: -8%; right: -34%; } }

/* Bands & sections */
.fh-band { background: #ffffff; padding: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.fh-band.fh-tint { background: #f5f8f8; }
.fh-band__in { max-width: 1100px; margin: 0 auto; }
.fh-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.fh-sec-head { margin-bottom: 1.6rem; }
.fh-kicker {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem;
  font-weight: 700; color: var(--vendo-green);
}
.fh-sec-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 650;
  letter-spacing: -0.025em; margin: 0.4rem 0 0; color: var(--vendo-text);
}

/* Category pills */
.fh-pills { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.fh-pill {
  border: 1px solid var(--vendo-border); background: #fff; border-radius: 999px;
  padding: 0.6rem 1.1rem; font-size: 0.9rem; font-weight: 600;
  color: var(--vendo-text); text-decoration: none;
}
.fh-pill:hover { border-color: var(--vendo-green); color: var(--vendo-green); }

/* Creed statement */
.fh-creed { text-align: center; padding: clamp(3rem, 6vw, 5rem) 1.25rem; background: #fff; }
.fh-creed__in { max-width: 720px; margin: 0 auto; }
.fh-rule { width: 80px; height: 5px; border-radius: 99px; margin: 0 auto 1.4rem; background: var(--vendo-rainbow); display: block; }
.fh-creed h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.9rem); font-weight: 650;
  letter-spacing: -0.03em; margin: 0; line-height: 1.1; color: var(--vendo-text);
}
.fh-creed h2 .g { color: var(--vendo-green); }
.fh-creed p { color: var(--vendo-muted); max-width: 44ch; margin: 1.1rem auto 0; }

/* On the fresh homepage, the hero carries the search — hide the header one */
.home .vendo-header-search { display: none; }

/* School landing header (deliverable 2.3) */
.vendo-school-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 0 1.25rem;
  text-align: left;
}
.vendo-school-hero__crest {
  max-width: 84px;
  height: auto;
  border-radius: 8px;
}
.vendo-school-hero__count {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vendo-muted);
}
/* No extra rule here — the school page title already carries its own underline. */

/* Schools index grid — [vendo_schools] (deliverable 2.3) — premium cards */
.vendo-schools {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .vendo-schools--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .vendo-schools--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.vendo-schools__item { display: flex; }
.vendo-schools__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: 1.7rem 1.2rem;
  background: color-mix(in srgb, var(--vendo-primary) 3%, #fff);
  border: 1px solid transparent;
  border-radius: 18px;
  text-decoration: none;
  color: var(--vendo-text);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Beat Storefront's .hentry .entry-content a underline (equal specificity,
   so out-specify it — the school grid lives inside .entry-content). */
.entry-content .vendo-schools__item a,
.entry-content .vendo-schools__item a:hover,
.vendo-schools__item a,
.vendo-schools__item a:hover { text-decoration: none; }
.vendo-schools__item a:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: var(--v-shadow);
}
.vendo-schools__crest {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
}
.vendo-schools__crest--ph {
  display: inline-block;
  border-radius: 14px;
  background: conic-gradient(from 210deg,#d9722a,#e0a92c,#5aa23c,#2f8f7d,#2f6fb0,#3a4f9e,#d9722a);
}
.vendo-schools__name {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.vendo-schools__count {
  font-size: .82rem;
  font-weight: 600;
  color: var(--vendo-muted);
  margin-top: -.45rem;
}

/* ==========================================================================
   Site header (masthead) — fresh & clean, override Storefront defaults
   ========================================================================== */
.site-header {
  background-color: #fff !important;
  border-bottom: 1px solid var(--vendo-border);
  padding-top: 1rem !important;
  padding-bottom: 0.75rem !important;
}
/* Logo size + placement */
.site-header .custom-logo { max-height: 66px; width: auto; }
.site-branding, .site-header .site-branding { margin-bottom: 0; }

/* Navigation — visible dark links on white, green on hover/active */
.main-navigation, .storefront-primary-navigation, .site-header .main-navigation ul.menu,
.main-navigation ul.nav-menu { background-color: transparent !important; }
.main-navigation ul li a,
.site-header .main-navigation a { color: var(--vendo-text) !important; font-weight: 600; }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--vendo-green) !important; }
.site-header-cart .cart-contents,
.site-header-cart .amount { color: var(--vendo-text) !important; }

/* One search only: hide Storefront's default product-search widget; keep the
   predictive bar (which is hidden on the homepage where the hero carries it). */
.site-header .site-search,
.site-header .widget_product_search { display: none !important; }

/* Header predictive search bar (deliverable 2.2) */
.vendo-header-search {
  padding: 0.5rem 0 0.25rem;
}
.vendo-header-search .vendo-search {
  max-width: 640px;
  margin: 0 auto;
}
.vendo-header-search .vendo-search input[type="search"] {
  background: #f5f8f8; border-color: var(--vendo-border);
}

/* Checkout: fulfillment mode (deliverable 3.2) */
.vendo-fulfillment {
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--vendo-border);
  border-radius: var(--vendo-radius);
}
.vendo-fulfillment h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.vendo-fulfillment__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  cursor: pointer;
}
.vendo-fulfillment__details {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--vendo-border);
  font-size: 0.9rem;
  color: var(--vendo-muted);
}

/* Checkout: POPIA consent + thank-you collection note (deliverables 3.3 / 3.2) */
.vendo-collection-note {
  margin: 1.5rem 0;
  padding: 1rem;
  border-left: 4px solid var(--vendo-primary);
  background: color-mix(in srgb, var(--vendo-primary) 5%, transparent);
}
.vendo-collection-note h2 { margin-top: 0; font-size: 1.15rem; }
form.checkout .vendo-popia { margin: 1rem 0; }

/* Sizing modal (deliverable 2.5) is styled by vendo-core; overrides go here. */

/* ==========================================================================
   WooCommerce shop, category & product pages — fresh & clean
   ========================================================================== */

/* Archive header + toolbar */
.woocommerce-products-header__title.page-title { font-weight: 650; letter-spacing: -0.02em; }
.woocommerce .woocommerce-result-count { color: var(--vendo-muted); font-size: 0.88rem; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--vendo-border); border-radius: 10px; padding: 0.5rem 0.7rem;
  background: #fff; color: var(--vendo-text); font: inherit;
}

/* Product grid — override Storefront's float grid with a clean CSS grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 1.5rem 0;
}
@media (min-width: 700px) {
  .woocommerce ul.products.columns-3, .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1px solid var(--vendo-border); border-radius: 16px;
  padding: 0.9rem; text-align: left; transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 31, 44, 0.08);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 0.8rem; border-radius: 12px; aspect-ratio: 4 / 5; object-fit: cover; background: #f5f8f8;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; color: var(--vendo-text); padding: 0 0 0.2rem;
}
.woocommerce ul.products li.product .price { color: var(--vendo-green); font-weight: 700; font-size: 0.98rem; }
.woocommerce ul.products li.product .price del { color: var(--vendo-muted); font-weight: 400; }
.woocommerce ul.products li.product .button {
  margin-top: 0.6rem; background: var(--vendo-primary); border-radius: 10px; width: 100%; text-align: center;
}
.woocommerce ul.products li.product .button:hover { background: var(--vendo-primary-dark); }
.woocommerce span.onsale {
  background: var(--vendo-accent); color: #201604; border-radius: 999px;
  min-height: auto; min-width: auto; padding: 0.2rem 0.6rem; line-height: 1.4;
  font-size: 0.72rem; font-weight: 700; top: 0.8rem; left: 0.8rem; margin: 0;
}

/* Single product — clean two-column layout (full-width children span both) */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 768px) { .single-product div.product { grid-template-columns: 1fr; gap: 1.2rem; } }
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .entry-summary {
  width: auto !important; float: none !important; margin: 0 !important;
}
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .woocommerce-product-gallery + .entry-summary ~ * { grid-column: 1 / -1; }
.single-product .woocommerce-product-gallery img { border-radius: 14px; }
.single-product .product_title { font-weight: 650; letter-spacing: -0.02em; color: var(--vendo-green); }
.single-product div.product p.price,
.single-product div.product span.price { color: var(--vendo-green); font-weight: 750; font-size: 1.5rem; }
.single-product .single_add_to_cart_button.button.alt {
  background: var(--vendo-primary); border-radius: 10px; padding: 0.9rem 1.6rem; font-weight: 700;
}
.single-product .single_add_to_cart_button.button.alt:hover { background: var(--vendo-primary-dark); }
.single-product .quantity .qty { border: 1px solid var(--vendo-border); border-radius: 10px; }

/* Product tabs — clean flat, underlined tabs. Storefront draws curved tab
   corners with ::before/::after pseudo-elements; those (plus the old pill
   radius) rendered as odd rounded blobs, so we remove them entirely. */
.woocommerce-tabs { display: block; }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; padding: 0;
  border-bottom: 1px solid var(--vendo-border);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { display: none !important; content: none !important; }
.woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: .7rem 1rem; font-weight: 650; color: var(--vendo-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--vendo-text); }
.woocommerce-tabs ul.tabs li.active a { color: var(--vendo-green); border-bottom-color: var(--vendo-green); }
.woocommerce-tabs .panel { margin: 0; }
.related.products h2, .upsells h2 { color: var(--vendo-green); font-weight: 650; letter-spacing: -0.02em; }

/* ==========================================================================
   WooCommerce cart & checkout — fresh & clean
   ========================================================================== */

/* Shared form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce table.cart .quantity .qty {
  border: 1px solid var(--vendo-border); border-radius: 10px; padding: 0.65rem 0.8rem;
  font: inherit; color: var(--vendo-text); background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none; border-color: var(--vendo-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-green) 20%, transparent);
}
.woocommerce form .form-row label { color: var(--vendo-muted); font-weight: 600; font-size: 0.85rem; }

/* Checkout selects (Country / Province) — match the text inputs. */
.woocommerce form .form-row select,
.woocommerce-checkout select,
.woocommerce .select2-container .select2-selection--single{
  width: 100%; min-height: 47px;
  border: 1px solid var(--vendo-border) !important; border-radius: 10px !important;
  padding: 0.55rem 2.2rem 0.55rem 0.8rem;
  font: inherit; color: var(--vendo-text); background-color: #fff;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.woocommerce form .form-row select:focus,
.woocommerce-checkout select:focus{
  outline: none; border-color: var(--vendo-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-green) 20%, transparent);
}
/* select2 (enhanced country/state) alignment with the native look. */
.woocommerce .select2-container .select2-selection--single{ display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: normal; padding: 0; color: var(--vendo-text); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ display: none; }

/* Coupon toggle link on the notice must be readable on the light-green ground. */
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button){ color: var(--vendo-green); font-weight: 600; text-decoration: underline; }
.woocommerce-info a:not(.button):hover,
.woocommerce-message a:not(.button):hover{ color: var(--vendo-green-dark); }

/* Checkout "Your order" — right-align the amount column. */
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table .cart-subtotal td,
.woocommerce-checkout table.shop_table .order-total td{ text-align: right; }

/* Tables (cart + order review) */
.woocommerce table.shop_table {
  border: 1px solid var(--vendo-border); border-radius: 14px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th {
  background: #f5f8f8; color: var(--vendo-muted);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.woocommerce table.cart img { border-radius: 8px; }
.woocommerce a.remove {
  color: #a12d2d !important; border-radius: 50%; font-weight: 700;
}
.woocommerce a.remove:hover { background: #a12d2d !important; color: #fff !important; }
.woocommerce .button[name="apply_coupon"],
.woocommerce .button[name="update_cart"] { background: var(--vendo-primary); border-radius: 10px; }

/* Cart: product-name links clean (Storefront underlines .entry-content a). */
.woocommerce-cart td.product-name a{ text-decoration: none; }

/* Cart: breathing room around the coupon + update-cart row. */
.woocommerce-cart table.cart td.actions{ padding: 1.15rem 1.15rem !important; }
.woocommerce-cart table.cart td.actions .coupon{ display: inline-flex; gap: .5rem; align-items: center; }
.woocommerce-cart table.cart td.actions .coupon .input-text{
  min-width: 200px; min-height: 44px;
  border: 1px solid var(--vendo-border); border-radius: 12px;
  padding: .55rem .9rem; background: #fff; font: inherit; color: var(--vendo-text);
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus{
  outline: none; border-color: var(--vendo-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-primary) 18%, transparent);
}

/* Inline add-to-cart notice on the single product page (see cart-ajax.php). */
.vendo-inline-notice{ margin: 0 0 1.1rem; }
.vendo-inline-notice .woocommerce-message{ margin: 0; }

/* Cart totals + checkout review/payment cards */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
  background: #fff; border: 1px solid var(--vendo-border); border-radius: 14px;
}
.woocommerce-checkout #payment { background: #f5f8f8; }
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading { color: var(--vendo-green); font-weight: 650; letter-spacing: -0.02em; }

/* Cart totals: a compact light-tinted card aligned to the right of the page,
   with no hard borders on the inner rows. */
.woocommerce-cart .cart-collaterals{ display: flex; justify-content: flex-end; }
.woocommerce-cart .cart-collaterals .cart_totals{
  float: none; width: 100%; max-width: 420px;
  background: color-mix(in srgb, var(--vendo-primary) 5%, #fff) !important;
  border: 0 !important; border-radius: 14px;
  padding: 1.3rem 1.5rem 1.15rem;
  box-shadow: 0 1px 3px rgba(16, 31, 46, .06);
}
/* Right-align the Subtotal/Total amounts. */
.woocommerce-cart .cart_totals table.shop_table td{ text-align: right; }
.woocommerce-cart .cart_totals h2{ margin-top: 0; }
.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table tr{ border: 0 !important; background: transparent; }
/* Divider between the Subtotal and Total rows, and a heavier Total. */
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td{
  border-bottom: 1px solid color-mix(in srgb, var(--vendo-primary) 14%, transparent) !important;
  padding-bottom: .75rem;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td{ padding-top: .8rem; }
.woocommerce-cart .cart_totals table.shop_table tr.order-total td{ font-size: 1.15rem; }
.woocommerce-cart .cart_totals table.shop_table tr.order-total .amount{ color: var(--vendo-green); }
/* Proceed to checkout — align right, minimal space beneath it. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout{ text-align: right; padding-bottom: 0; margin-bottom: 0; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button{ margin-bottom: 0; }

/* Primary actions */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
  background: var(--vendo-green); border-radius: 10px; font-weight: 700;
}
/* Proceed to checkout: trimmer than Storefront's oversized default. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
  font-size: .98rem; padding: .7rem 1.4rem; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order { font-size: 1.05rem; padding: 0.9rem 1.4rem; width: 100%; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce #payment #place_order:hover { background: var(--vendo-green-dark); }

/* Payment method list tidy */
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--vendo-border); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: 10px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }

/* ==========================================================================
   Layout polish — full-width shop, tidy archive header, wider grid
   ========================================================================== */

/* Drop Storefront's sidebar on WooCommerce pages → products use full width */
.woocommerce #secondary,
.woocommerce-page #secondary { display: none !important; }
.woocommerce .content-area,
.woocommerce-page .content-area,
.woocommerce #primary,
.woocommerce-page #primary { width: 100% !important; float: none !important; margin: 0 !important; }

/* Archive header: left-aligned title + underline, tidy toolbar */
.woocommerce-products-header { text-align: left !important; padding: 0.25rem 0 0.5rem; }
.woocommerce-products-header__title.page-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.1rem;
}
.woocommerce-products-header__title::after { margin: 0.55rem 0 1rem; }
.woocommerce .woocommerce-result-count { margin: 0 0 1.2rem; }
.woocommerce .woocommerce-ordering { margin-bottom: 1.2rem; }

/* Tighter masthead */
.site-header { padding-top: 0.75rem !important; padding-bottom: 0.5rem !important; }
.vendo-header-search { padding: 0.25rem 0; }

/* Product grid: up to 4 across on wide screens */
@media (min-width: 1000px) {
  /* Fixed column WIDTH, never a fixed column count: auto-fill keeps the empty
     tracks (auto-fit would collapse them and stretch the cards). So a school
     with 2 products shows 2 normal-sized cards left-aligned with the rest of
     the row empty — the card size is identical to a full 4-across shop. */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    justify-content: start;
  }
}

/* ==========================================================================
   PREMIUM THEME — custom header, hero, cards, categories, footer
   (matches the approved store design)
   ========================================================================== */
:root{ --v-surface:#f6f8f9; --v-shadow-sm:0 1px 2px rgba(20,35,46,.05); --v-shadow:0 2px 6px rgba(20,35,46,.05), 0 22px 44px rgba(20,35,46,.08); }

/* Announcement bar (above header, full width via wp_body_open) */
.v-announce{background:var(--vendo-primary);color:#eaf0f6;text-align:center;font-size:.78rem;letter-spacing:.02em;padding:.5rem 1rem;}
.v-announce b{color:#fff;}

/* Sticky premium header (inside Storefront #masthead) — no divider line */
.site-header{position:sticky;top:0;z-index:60;box-shadow:none;border-bottom:none !important;}
/* Tighten the gap under the header on the homepage */
.home #content.site-content{padding-top:0 !important;}
.home #content.site-content .col-full{padding-top:0 !important;}
.v-hd{display:flex;align-items:center;gap:1.4rem;}
.v-hd__logo{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.v-hd__logo-img{height:72px;width:auto;}
.v-brandtext{font-weight:800;font-size:1.18rem;letter-spacing:-.02em;line-height:1;color:var(--vendo-primary);white-space:nowrap;}
@media (max-width:520px){ .v-brandtext{display:none;} }
.v-hd__nav{display:flex;gap:1.5rem;font-size:.9rem;font-weight:600;list-style:none;margin:0;padding:0;}
.v-hd__nav li{list-style:none;margin:0;padding:0;}
.v-hd__nav a{color:var(--vendo-text);}
.v-hd__nav a:hover{color:var(--vendo-green);}
.v-hd__spacer{flex:1;}
.v-hd__search{flex:0 1 340px;}
.v-hd__search .vendo-search input[type="search"]{background:var(--v-surface);border-color:var(--vendo-border);min-height:42px;}
.v-hd__cart{position:relative;color:var(--vendo-primary);display:inline-flex;}
.v-hd__cart .v-ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;}
.v-hd__count{position:absolute;top:-7px;right:-9px;background:var(--vendo-green);color:#fff;font-size:.6rem;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
@media (max-width:900px){ .v-hd__nav{display:none;} .v-hd__search{flex:1;} }

.v-home{ } /* homepage wrapper */
.v-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700;color:var(--vendo-green);}
.v-lede{font-size:1.12rem;color:var(--vendo-muted);max-width:44ch;}

/* Full-bleed helper for bands */
.v-trust,.v-quality{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* Hero */
.v-hero{padding:clamp(0.75rem,2vw,1.5rem) 0 clamp(1.5rem,3vw,2.5rem);}
.v-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;}
@media (max-width:900px){ .v-hero__grid{grid-template-columns:1fr;} }
.v-hero__text h1{font-size:clamp(2.2rem,5.2vw,3.8rem);line-height:1.04;letter-spacing:-.035em;margin:.7rem 0 1rem;font-weight:750;color:var(--vendo-text);}
.v-hero__text h1 .g{color:var(--vendo-green);}
/* Hero search — premium: larger rounded field, soft shadow, left magnifier */
.v-hero__search{ max-width:520px; margin:1.6rem 0 0; }
.v-hero__search .vendo-search{ max-width:520px; position:relative; }
.v-hero__search .vendo-search::before{
  content:""; position:absolute; left:1.05rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; z-index:2; pointer-events:none; opacity:.7;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231b3a5b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E");
}
.v-hero__search .vendo-search input[type="search"]{
  width:100%; min-height:56px; padding:0 1.1rem 0 3rem;
  border:1px solid var(--vendo-border); border-radius:14px; background:#fff;
  font-size:1.05rem; box-shadow:0 12px 30px -14px rgba(20,35,46,.22);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.v-hero__search .vendo-search input[type="search"]::placeholder{ color:var(--vendo-muted); }
.v-hero__search .vendo-search input[type="search"]:focus{
  outline:none; border-color:var(--vendo-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--vendo-primary) 18%, transparent), 0 12px 30px -14px rgba(20,35,46,.24);
}
.v-hero__chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.3rem;}
.v-hero__chips a{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:650;color:var(--vendo-primary);background:#fff;border:1px solid var(--vendo-border);padding:.5rem .95rem;border-radius:999px;box-shadow:var(--v-shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;}
.v-hero__chips a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vendo-rainbow);flex:0 0 auto;}
.v-hero__chips a:hover{color:var(--vendo-green);border-color:var(--vendo-green);transform:translateY(-1px);box-shadow:var(--v-shadow);}
.v-hero__visual{position:relative;aspect-ratio:5/4.4;border-radius:22px;overflow:hidden;border:1px solid var(--vendo-border);box-shadow:var(--v-shadow);display:flex;align-items:center;justify-content:center;background:linear-gradient(158deg,#f7f9fa,#eaf0f0);}
/* Frame the featured photo as a clean white "matted" card so product shots on
   any background (white, grey studio, etc.) read as a deliberate showcase
   rather than a floating box. */
.v-hero__prodimg{max-width:70%;height:auto;background:#fff;padding:14px;border-radius:14px;box-shadow:0 20px 42px -14px rgba(20,35,46,.26);object-fit:contain;}
.v-garment{stroke:var(--vendo-primary);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.v-swoosh{position:absolute;top:-30%;right:-18%;width:70%;height:120%;border-radius:50%;background:conic-gradient(from 210deg,#d9722a,#e0a92c,#5aa23c,#2f8f7d,#2f6fb0,#3a4f9e,#d9722a);-webkit-mask:radial-gradient(circle,transparent 64%,#000 65%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 70%,transparent 71%);opacity:.85;}
.v-hero__tag{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:12px;padding:.6rem .9rem;box-shadow:var(--v-shadow-sm);font-size:.82rem;color:var(--vendo-text);}
.v-hero__tag b{color:var(--vendo-primary);}

/* Trust strip — subtle surface tint, green check-marks (premium trust bar) */
.v-trust{border:none;background:var(--v-surface);}
.v-trust__row{max-width:var(--vendo-maxw);margin:0 auto;padding:1.1rem clamp(1.1rem,3vw,2rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media (max-width:760px){ .v-trust__row{grid-template-columns:repeat(2,1fr);} }
.v-t{display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:600;color:var(--vendo-text);}
.v-t i{width:19px;height:19px;border-radius:50%;background:var(--vendo-green);position:relative;flex:0 0 auto;}
.v-t i::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* Section blocks */
.v-blk{padding:clamp(2.4rem,4.5vw,3.6rem) 0;}
.v-blk--tint{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--v-surface);padding-left:clamp(1.1rem,3vw,2rem);padding-right:clamp(1.1rem,3vw,2rem);}
.v-blk--tint > .v-sec-head,.v-blk--tint > .woocommerce{max-width:var(--vendo-maxw);margin-left:auto;margin-right:auto;}
.v-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;}
.v-sec-head h2{font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.03em;margin:.35rem 0 0;font-weight:720;color:var(--vendo-text);}
.v-more{font-size:.86rem;font-weight:700;color:var(--vendo-green);white-space:nowrap;}

/* Schools */
.v-schools{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
@media (max-width:760px){ .v-schools{grid-template-columns:1fr;} }
/* Match the Schools-page cards: soft navy tint, borderless, lift to white. */
.v-school{display:flex;align-items:center;gap:1rem;background:color-mix(in srgb, var(--vendo-primary) 3%, #fff);border:1px solid transparent;border-radius:18px;padding:1.1rem 1.2rem;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;}
.v-school:hover{background:#fff;box-shadow:var(--v-shadow);transform:translateY(-3px);}
.v-school__crest{width:52px;height:52px;border-radius:12px;flex:0 0 auto;object-fit:contain;background:#fff;}
.v-school__crest--ph{background:conic-gradient(from 210deg,#d9722a,#e0a92c,#5aa23c,#2f8f7d,#2f6fb0,#3a4f9e,#d9722a);}
.v-school__meta{display:flex;flex-direction:column;min-width:0;}
.v-school__nm{font-weight:700;}
.v-school__mt{font-size:.8rem;color:var(--vendo-muted);}
.v-school__go{margin-left:auto;color:var(--vendo-green);font-size:1.2rem;}

/* Kill Storefront's clearfix pseudo-elements — as a CSS grid they'd become
   phantom grid items and create empty rows. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }

/* Premium product cards (override the generic loop card) */
.woocommerce ul.products li.product.v-card,
.woocommerce-page ul.products li.product.v-card{padding:0 !important;border:1px solid var(--vendo-border);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--v-shadow-sm);}
.woocommerce ul.products li.product.v-card:hover{box-shadow:var(--v-shadow);transform:translateY(-3px);}
.v-card__ph{position:relative;aspect-ratio:4/5;background:radial-gradient(120% 90% at 40% 20%,#fff,#eef2f4 76%);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.v-card__ph img{width:100%;height:100%;object-fit:cover;margin:0 !important;border-radius:0 !important;}
.v-card__imglink{display:block;width:100%;height:100%;}
.v-card__badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--vendo-accent);color:#201604;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;}
.v-card__tagmini{position:absolute;top:12px;right:12px;z-index:2;background:#fff;color:var(--vendo-primary);font-size:.62rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;box-shadow:var(--v-shadow-sm);}
.v-card__qa.button{position:absolute !important;left:12px;right:12px;bottom:12px;z-index:2;margin:0 !important;width:auto;text-align:center;background:var(--vendo-primary) !important;color:#fff !important;border-radius:11px !important;font-weight:700;font-size:.82rem;padding:.6rem !important;opacity:0;transform:translateY(8px);transition:.2s;}
.woocommerce ul.products li.product.v-card:hover .v-card__qa.button{opacity:1;transform:none;}
/* Touch devices fire no :hover, so the quick-add button would never appear.
   Reveal it persistently on coarse/touch pointers, and on keyboard focus. */
@media (hover: none), (pointer: coarse){
  .woocommerce ul.products li.product.v-card .v-card__qa.button{opacity:1;transform:none;}
  /* soft scrim so the navy button always reads over a product photo */
  .woocommerce ul.products li.product.v-card .v-card__ph::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:60px;z-index:1;
    pointer-events:none;background:linear-gradient(to top,rgba(16,31,44,.18),transparent);
  }
}
.woocommerce ul.products li.product.v-card:focus-within .v-card__qa.button{opacity:1;transform:none;}
.v-card__body{padding:.85rem 1rem 1.1rem;}
.v-card__kind{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--vendo-muted);font-weight:700;}
.v-card__name{display:block;font-weight:700;letter-spacing:-.01em;margin:.15rem 0 .3rem;color:var(--vendo-text);}
.v-card__name:hover{color:var(--vendo-green);}
.v-card__price,.v-card__price .amount{color:var(--vendo-green);font-weight:750;}
.v-card__price del .amount{color:var(--vendo-muted);font-weight:400;}

/* Category tiles */
.v-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
@media (max-width:820px){ .v-cats{grid-template-columns:repeat(2,1fr);} }
.v-cat{position:relative;aspect-ratio:3/3.4;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;padding:1.1rem;color:#fff;box-shadow:var(--v-shadow-sm);}
.v-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(19,43,69,.72));z-index:1;}
.v-cat span{position:relative;z-index:2;font-weight:750;font-size:1.05rem;letter-spacing:-.01em;}
.v-cat--1{background:linear-gradient(160deg,#22405f,#16293f);}
.v-cat--2{background:linear-gradient(160deg,#2f5d3f,#20402d);}
.v-cat--3{background:linear-gradient(160deg,#3a506e,#243651);}
.v-cat--4{background:linear-gradient(160deg,#2f6f6a,#1f4744);}
/* Photo tiles: stronger bottom scrim so the white label stays legible on any image. */
.v-cat--img::after{background:linear-gradient(180deg,rgba(19,43,69,0) 26%,rgba(15,32,52,.86));}

/* Quality band */
.v-quality{background:var(--vendo-primary);color:#eef3f8;}
.v-quality__in{max-width:760px;margin:0 auto;text-align:center;padding:clamp(2.8rem,6vw,4.6rem) clamp(1.1rem,3vw,2rem);}
.v-rule{width:90px;height:5px;border-radius:99px;margin:0 auto 1.4rem;background:var(--vendo-rainbow);display:block;}
.v-quality h2{font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:-.03em;margin:0;line-height:1.1;font-weight:720;color:#fff;}
.v-quality h2 .g{color:var(--vendo-accent);}
.v-quality p{color:#b9c6d3;margin:1.2rem auto 0;max-width:48ch;}

/* Single product: force image LEFT, summary RIGHT (Storefront floats reverse them) */
.single-product div.product{display:grid !important;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;}
.single-product div.product > .woocommerce-product-gallery{grid-column:1;grid-row:1;float:none !important;width:auto !important;margin:0 !important;}
.single-product div.product > .summary.entry-summary{grid-column:2;grid-row:1;float:none !important;width:auto !important;margin:0 !important;}
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .storefront-product-pagination{grid-column:1 / -1;}
.single-product .entry-summary .product_title{margin-top:0;}
@media (max-width:768px){ .single-product div.product{grid-template-columns:1fr;gap:1.2rem;} .single-product div.product > .summary.entry-summary{grid-column:1;grid-row:auto;} }

/* ==========================================================================
   Single product summary polish (v0.9.17)
   ========================================================================== */

/* Storefront's prev/next product pagination bled adjacent product images in
   as slivers at the screen edges — remove it. */
.single-product .storefront-product-pagination{ display: none !important; }

/* Size / variation selector — a proper field, not the bare native select */
.single-product .variations{ margin: 0 0 1.1rem; border: 0; }
.single-product .variations tbody,
.single-product .variations tr{ display: block; }
.single-product .variations th.label,
.single-product .variations td.value{ display: block; padding: 0; border: 0; text-align: left; }
.single-product .variations th.label label{ font-weight: 700; font-size: .85rem; color: var(--vendo-text); margin: 0 0 .4rem; }
.single-product .variations select{
  width: 100%; max-width: 340px; min-height: 48px;
  padding: .6rem 2.2rem .6rem .9rem; margin: 0;
  border: 1px solid var(--vendo-border); border-radius: 10px;
  background-color: #fff; font-size: .95rem; color: var(--vendo-text);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.single-product .variations select:focus{ outline: none; border-color: var(--vendo-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-primary) 22%, transparent); }
.single-product .reset_variations{ display: inline-block; font-size: .82rem; color: var(--vendo-muted); margin: .4rem 0 0; }
.single-product .woocommerce-variation-add-to-cart{ margin-top: .5rem; }

/* Name-label embroidery — collapsed behind an "Add name embroidery" button
   that reveals the label + text box on click (see embroidery.php). */
.single-product .vendo-embroidery{ display: block; max-width: 340px; margin: 1rem 0 1.2rem; }
.single-product .vendo-embroidery__toggle{
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .5rem 1.05rem;
  background: #fff; color: var(--vendo-primary);
  border: 1px solid var(--vendo-border); border-radius: 10px;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.single-product .vendo-embroidery__toggle:hover{ border-color: var(--vendo-primary); background: color-mix(in srgb, var(--vendo-primary) 5%, #fff); }
.single-product .vendo-embroidery__plus{ font-size: 1.1rem; line-height: 1; font-weight: 800; }
.single-product .vendo-embroidery__panel[hidden]{ display: none; }
.single-product .vendo-embroidery__panel{ margin-top: .2rem; }
.single-product .vendo-embroidery label{ display: block; font-weight: 700; font-size: .85rem; color: var(--vendo-text); margin: 0 0 .4rem; }
.single-product .vendo-embroidery input[type="text"]{
  width: 100%; min-height: 44px; padding: .55rem .9rem; margin: 0;
  border: 1px solid var(--vendo-border); border-radius: 10px; font-size: .95rem; background: #fff;
}
.single-product .vendo-embroidery input[type="text"]:focus{ outline: none; border-color: var(--vendo-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vendo-primary) 22%, transparent); }
.single-product .vendo-embroidery small{ display: block; color: var(--vendo-muted); font-size: .8rem; margin-top: .4rem; }

/* Tighten the summary spacing */
.single-product .entry-summary > .price{ margin: .2rem 0 1rem; }

/* Add-to-cart + size-guide buttons: matched, slightly reduced height. */
.single-product .single_add_to_cart_button.button.alt,
.single-product .vendo-size-trigger{
  min-height: 44px; padding: .62rem 1.4rem; font-size: .92rem; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
}
.single-product .vendo-size-trigger{ margin: .6rem 0 0; }
.single-product .quantity .qty{ min-height: 44px; }

/* Product meta: drop the Categories (and Tags) lines — keep the SKU. Beat
   WooCommerce's .single-product div.product .product_meta .posted_in rule. */
.single-product div.product .product_meta .posted_in,
.single-product div.product .product_meta .tagged_as{ display: none !important; }

/* ==========================================================================
   Store notices — "added to cart" success message (soft green, tidy button)
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  background: #eef7f1 !important;
  border: 1px solid color-mix(in srgb, var(--vendo-green) 30%, #fff);
  border-left: 4px solid var(--vendo-green) !important;
  border-radius: 12px;
  color: #24422f;
  padding: .95rem 1.15rem;
  font-size: .92rem; font-weight: 500;
  box-shadow: none;
}
.woocommerce-message::before,
.woocommerce-info::before{
  color: var(--vendo-green); position: static; margin: 0 .1rem 0 0; font-size: 1.05rem;
}
/* Push the "View cart" button to the right of the message text. */
.woocommerce-message .button,
.woocommerce-info .button{ margin-left: auto; }
/* View-cart button: solid brand green, sized to match the notice. */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward{
  background: var(--vendo-green); color: #fff;
  min-height: 38px; padding: .45rem 1.1rem; border-radius: 9px;
  font-size: .86rem; font-weight: 700;
  display: inline-flex; align-items: center;
}
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover{ background: var(--vendo-green-dark); }
.woocommerce-error{ background: #fdeeee !important; border-left-color: #c0392b !important; color: #4a201c; }
.woocommerce-error::before{ color: #c0392b; }

/* Footer (Storefront #colophon gets our dark ground; .v-ft is the content) */
.site-footer, #colophon.site-footer{background:#0f1f2e !important;padding:0 !important;color:#a9b7c2;}
.v-ft{padding:.5rem 0;}
.v-ft__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:2.8rem 0 2rem;}
@media (max-width:760px){ .v-ft__cols{grid-template-columns:1fr 1fr;} }
#colophon .v-ft h4{color:#fff !important;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .9rem;}
#colophon .v-ft a{display:block;color:#b4c2cf !important;padding:.2rem 0;font-size:.9rem;text-decoration:none !important;}
#colophon .v-ft a:hover{color:#fff !important;}
.v-ft__brand p{margin:.2rem 0 0;max-width:34ch;font-size:.9rem;}
.v-ft__logo-img{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.v-ft__logo{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.6rem;}
.v-ft .v-brandtext{color:#f1f6fa;}
.v-ft__bottom{border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 0 2.2rem;font-size:.8rem;}
.v-ft__pay{display:flex;gap:.5rem;align-items:center;}
.v-ft__pay span{background:rgba(255,255,255,.12);border-radius:6px;padding:.2rem .5rem;font-size:.72rem;font-weight:700;color:#dfe7ee;}

/* Homepage: the header carries a search on inner pages; hero carries it on home */
.home .v-hd__search{display:none;}

/* ==========================================================================
   HEADER POLISH (v0.9.9) — sticky elevation, mobile menu, balanced home
   masthead, dismissible announcement, tidy cart badge, active-nav marker
   ========================================================================== */

/* --- 1. Announcement bar: centred flex + dismiss button; drop 2nd clause on phones --- */
.v-announce{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;padding-right:2.4rem;}
.v-announce__close{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:transparent;color:#c3d2e2;font-size:1.15rem;line-height:1;cursor:pointer;border-radius:6px;}
.v-announce__close:hover{color:#fff;background:rgba(255,255,255,.14);}
@media (max-width:600px){ .v-announce__more{display:none;} }

/* --- 2. Sticky header gains a soft elevation once the page is scrolled --- */
/* Storefront sets `overflow-x:hidden` on body & .site to tame full-bleed
   sections — but that makes them scroll containers, which silently disables
   position:sticky on the header inside. `overflow-x:clip` tames overflow the
   same way WITHOUT establishing a scroll container, so the header sticks. */
body, .site { overflow-x: clip; }
/* In-page anchor jumps (e.g. nav "Schools" -> #shop-by-school) must stop
   BELOW the sticky header, not underneath it. scroll-margin-top reserves the
   header's height plus a little breathing room at the top of each target. */
.v-home section[id]{ scroll-margin-top: 84px; }
.site-header{transition:box-shadow .2s ease;}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--vendo-border),0 8px 24px rgba(20,35,46,.07);}
.v-hd{position:relative;}

/* --- 3. Masthead: nav sits left of the logo with a comfortable gap.
   The spacer (flex:1) still pushes the cart to the far right. Desktop-only
   margin so it doesn't shift the mobile dropdown (which is absolutely
   positioned). The header search is hidden on home, so no override needed. --- */
@media (min-width:901px){ .v-hd__nav{ margin-left: 1.6rem; } }

/* --- 4. Cart badge: never render an empty/zero bubble --- */
.v-hd__count:empty{display:none;}

/* --- 5. Mobile menu button + slide-down nav panel (hidden ≥901px) --- */
.v-hd__toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-6px;border:0;background:transparent;color:var(--vendo-primary);cursor:pointer;border-radius:10px;flex:0 0 auto;}
.v-hd__toggle:hover{background:var(--v-surface);}
.v-hd__toggle-bars{position:relative;display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:background .15s ease;}
.v-hd__toggle-bars::before,.v-hd__toggle-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,top .2s ease;}
.v-hd__toggle-bars::before{top:-6px;}
.v-hd__toggle-bars::after{top:6px;}
/* animate to an X while the panel is open */
.v-hd--navopen .v-hd__toggle-bars{background:transparent;}
.v-hd--navopen .v-hd__toggle-bars::before{top:0;transform:rotate(45deg);}
.v-hd--navopen .v-hd__toggle-bars::after{top:0;transform:rotate(-45deg);}

@media (max-width:900px){
  .v-hd__toggle{display:inline-flex;}
  .v-hd__nav{
    display:none;position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:70;
    flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--vendo-border);
    border-radius:14px;box-shadow:var(--v-shadow);padding:.4rem;
  }
  .v-hd__nav.v-hd__nav--open{display:flex;}
  .v-hd__nav a{padding:.75rem .9rem;border-radius:10px;font-size:1rem;}
  .v-hd__nav a:hover{background:var(--v-surface);}
}

/* --- 6. Active/current page marker in the nav --- */
.v-hd__nav .current-menu-item > a,
.v-hd__nav a[aria-current="page"]{color:var(--vendo-green);position:relative;}
@media (min-width:901px){
  .v-hd__nav .current-menu-item > a::after,
  .v-hd__nav a[aria-current="page"]::after{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--vendo-rainbow);
  }
}

/* ==========================================================================
   Breadcrumb + archive-header polish (v0.9.14)
   Replaces Storefront's dated default breadcrumb and tightens the loose
   whitespace on the school / category landing header.
   ========================================================================== */

/* Breadcrumb — home tile · chevron separators · accent current page */
.woocommerce-breadcrumb{
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .82rem; font-weight: 600; color: var(--vendo-primary);
  margin: .25rem 0 1.5rem; padding: 0; line-height: 1.4;
}
/* Trail links (all but the current page) — muted slate, no underline. */
.woocommerce-breadcrumb a{ color: #64748b; font-weight: 500; text-decoration: none; }
.woocommerce-breadcrumb a:hover{ color: var(--vendo-primary); }
/* First crumb (Home) → light navy tile with a navy house glyph. */
.woocommerce-breadcrumb a:first-child{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--vendo-primary) 12%, #fff);
  font-size: 0; color: transparent;
  transition: background-color .15s ease;
}
.woocommerce-breadcrumb a:first-child:hover{ background: color-mix(in srgb, var(--vendo-primary) 22%, #fff); }
.woocommerce-breadcrumb a:first-child::before{
  content: ""; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b3a5b'%3E%3Cpath d='M12 3 2 12h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Separator between crumbs — a light chevron (set via PHP delimiter filter). */
.woocommerce-breadcrumb .v-crumb-sep{
  display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Full-width shop / category / school / product — Storefront's sidebar is
   dropped (theme-chrome.php adds .vendo-full) so content uses the whole page. */
.vendo-full #secondary{ display: none; }
.vendo-full #primary,
.vendo-full #primary.content-area{ width: 100%; max-width: 100%; float: none; margin-right: 0; }

/* Archive header: collapse Storefront's floaty gaps into a tight, deliberate stack */
.woocommerce-products-header{ margin: 0 0 1rem; padding: 0; }
.woocommerce-products-header__title.page-title{ margin: 0 0 .1rem; }
.vendo-school-hero{ padding: .5rem 0 .85rem; gap: .9rem; }
/* School archive title: crest sits inline to the left of the school name; the
   rainbow underline (::after, a block) still drops onto its own line below. */
.woocommerce-products-header__title .vendo-school-title__in{
  display: inline-flex; align-items: center; gap: 1.4rem;
}
.vendo-school-title__crest{
  width: 52px; height: 52px; object-fit: contain; border-radius: 8px; flex: 0 0 auto;
}
@media (max-width: 480px){ .vendo-school-title__crest{ width: 42px; height: 42px; } }
.woocommerce-archive-description,
.term-description{ margin: 0 0 1.25rem; }
.woocommerce-archive-description p,
.term-description p{ margin: 0; color: var(--vendo-text); max-width: none; }
/* Sort toolbar removed from the storefront: hide the "Default sorting"
   dropdown and the "Showing N results" count on every archive (belt-and-braces
   alongside the hook removal in theme-chrome.php). */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering,
.woocommerce-page .woocommerce-result-count{ display: none !important; }

/* Unified page titles — give regular WordPress pages (Schools, cart, checkout,
   any content page) the same header as WooCommerce archives: green, weighted,
   with the signature rainbow underline. */
.page:not(.home) .entry-title{
  color: var(--vendo-green);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 0.1rem;
}
.page:not(.home) .entry-title::after{
  content: ""; display: block; width: 88px; height: 4px;
  margin: 0.55rem 0 1rem; border-radius: 4px; background: var(--vendo-rainbow);
}