/*
Theme Name: Osona
Theme URI: https://osonayarns.com
Author: Bluelight.co.ke
Author URI: https://bluelight.co.ke
Description: Hand-written block theme for Osona Yarns. No page builder, no build step. Design tokens live in theme.json; this file holds what theme.json cannot express.
Version: 0.11.23
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: osona
*/

/* ---------------------------------------------------------------------------
   Shape tokens (theme.json has no radius scale)
--------------------------------------------------------------------------- */
:root {
  --osona-pill: 999px;
  --osona-card: 12px;
  --osona-swatch: 6px;
  --osona-shadow: 0 1px 4px rgba(17, 17, 17, .12);
}

/* Small, spaced-caps label used for eyebrows and option names */
.osona-label {
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Buttons — pills everywhere (theme.json sets colour + radius on core/button;
   WooCommerce buttons need the same treatment)
--------------------------------------------------------------------------- */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wp-block-woocommerce-product-button .wp-block-button__link,
.single_add_to_cart_button {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--osona-pill) !important;
  padding: 12px 24px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--ink);
  line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:hover {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}

/* WhatsApp button (rendered by the osona-site plugin) */
.osona-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--osona-pill);
  padding: 12px 22px;
  background: #25D366;
  color: #073B1B;
  text-decoration: none;
  line-height: 1.2;
}
.osona-whatsapp:hover { background: #1FBF5B; color: #073B1B; }
.osona-whatsapp svg { width: 18px; height: 18px; fill: currentColor; }
form.cart .osona-whatsapp { margin-left: 8px; vertical-align: middle; width: auto; flex: 0 0 auto; align-self: center; }
@media (max-width: 599px) { form.cart .osona-whatsapp { margin: 10px 0 0; } }

/* ---------------------------------------------------------------------------
   Product cards (Product Collection block)
--------------------------------------------------------------------------- */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
  border-radius: var(--osona-card);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--wp--preset--color--sand);
}
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--dm-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  margin: 12px 0 4px;
}
.wp-block-woocommerce-product-price,
.wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 500;
  font-size: 17px;
}
.wc-block-components-product-price del,
.price del { color: var(--wp--preset--color--muted); font-weight: 400; }
.wc-block-components-product-sale-badge,
.onsale {
  background: var(--wp--preset--color--gold) !important;
  color: var(--wp--preset--color--ink) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--wp--preset--font-family--dm-sans);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 4px 9px !important;
}

/* ---------------------------------------------------------------------------
   Single product — photo swatches from variation images (rendered natively by
   WooCommerce's Add to Cart with Options block / variation form)
--------------------------------------------------------------------------- */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options,
.variations select { font-family: var(--wp--preset--font-family--dm-sans); }
.wc-block-components-product-image--single img { border-radius: var(--osona-card); }
table.variations th.label { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

.osona-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.osona-swatches img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--osona-swatch);
  border: 1px solid var(--wp--preset--color--line);
}
.osona-swatches .is-selected img { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; border-color: transparent; }
.osona-swatches .is-unavailable img { opacity: .35; }
.osona-swatches .is-unavailable { position: relative; }
.osona-swatches .is-unavailable::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 47%, var(--wp--preset--color--muted) 48%, var(--wp--preset--color--muted) 52%, transparent 53%);
}

/* Quantity stepper as a pill */
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--wp--preset--color--line-2); border-radius: var(--osona-pill); height: 46px; padding: 0 6px; }
.quantity input.qty { border: 0; width: 44px; text-align: center; font-weight: 500; background: transparent; font-family: var(--wp--preset--font-family--dm-sans); }

/* Tabs */
.wc-tabs, .woocommerce-tabs ul.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--wp--preset--color--line); padding: 0; margin: 26px 0 18px; list-style: none; }
.woocommerce-tabs ul.tabs li { background: none; border: 0; padding: 0; margin: 0; }
.woocommerce-tabs ul.tabs li a { font-family: var(--wp--preset--font-family--jost); font-size: 16px; color: var(--wp--preset--color--muted); padding: 10px 0; display: inline-block; text-decoration: none; }
.woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); border-bottom: 2px solid var(--wp--preset--color--ink); margin-bottom: -1px; }

/* Stock status */
.stock.in-stock { color: var(--wp--preset--color--stock); }
.stock.out-of-stock { color: var(--wp--preset--color--error); }

/* ---------------------------------------------------------------------------
   Header & footer parts
--------------------------------------------------------------------------- */
.osona-topbar { font-size: 13px; }
.osona-topbar a { color: inherit; text-decoration: none; }
.osona-header .wp-block-site-logo { flex: none; }
.osona-header .wp-block-site-logo img { height: 84px; width: 84px; object-fit: contain; } /* square source; WP pins width, we pinned height: set both or the circle squashes */
.osona-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: 17px; letter-spacing: .01em; }
.osona-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-deep); }
.osona-tagline { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* Sticky mobile bar — Menu · Shop · Search · Cart · WhatsApp */
.osona-mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; grid-template-columns: repeat(5, 1fr);
  background: var(--wp--preset--color--paper);
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(17, 17, 17, .06);
}
.osona-mobile-bar a, .osona-mobile-bar button { position: relative; display: flex; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--wp--preset--color--ink-2); text-decoration: none; }
.osona-mobile-bar .osona-drawer__open { width: auto; height: auto; margin: 0; color: var(--wp--preset--color--ink-2); }
.osona-mobile-bar .osona-drawer__open svg { width: 22px; height: 22px; stroke-width: 1.7; }
.osona-mobile-bar svg, .osona-mobile-bar img { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.osona-mobile-bar .osona-wish-count, .osona-mobile-bar .osona-cart-count { position: absolute; top: -6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
@media (max-width: 899px) {
  .osona-mobile-bar { display: grid; }
  body { padding-bottom: 64px; }
}

/* Reduced motion: no transitions anywhere */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Focus */
:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Home page pieces
--------------------------------------------------------------------------- */
.osona-hero .wp-block-cover__inner-container { max-width: 820px; }
.osona-hero h1 { font-family: var(--wp--preset--font-family--jost); font-weight: 500; letter-spacing: -.01em; margin-bottom: 8px; }
.osona-tiles .wp-block-cover .wp-block-button__link { font-size: 15px; white-space: nowrap; } /* one line each, so every tile button is the same height */
.osona-cat-circles.wp-block-columns { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; justify-items: center; }
.osona-cat-circles .wp-block-column { flex: none !important; width: 100%; max-width: 150px; }
.osona-cat-circles img { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); transition: transform .15s ease; }
.osona-cat-circles a:hover img { transform: scale(1.04); }
.osona-cat-circles p { font-size: 15px; margin-top: 8px; line-height: 1.3; }
.osona-cat-circles p a { text-decoration: none; color: var(--wp--preset--color--ink); }
.osona-cat-circles p a:hover { color: var(--wp--preset--color--gold-deep); }
@media (max-width: 899px) {
  .osona-cat-circles.wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osona-cat-circles img { width: 84px !important; height: 84px !important; }
  .osona-cat-circles p { font-size: 13.5px; }
}
.osona-branches h3 { margin-bottom: .25rem; }

/* ---------------------------------------------------------------------------
   Header on small screens: logo + hamburger + cart; search lives in the mobile bar
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .osona-topbar .wp-block-group > p:last-child { display: none; }
  .osona-topbar { text-align: center; }
  .osona-header .wp-block-search,
  .osona-header .osona-tagline,
  .osona-header .wp-block-site-title { display: none; }
  .osona-header .wp-block-site-logo img { height: 52px; width: 52px; }
  .osona-header .wp-block-navigation { display: none; } /* phones use the drawer below */
  .osona-header :has(> .osona-drawer__open) { display: contents; } /* the shortcode's wrapper; lets the button join the flex row */
  .osona-header .osona-drawer__open { display: grid; order: -1; } /* hamburger leftmost, then logo, then icons */
  .osona-header .osona-search-link, .osona-header .wp-block-woocommerce-customer-account { display: none; } /* both live in the drawer and bottom bar */
}

/* Phone drawer: <dialog> pinned left, slides in */
.osona-drawer__open { display: none; place-items: center; width: 44px; height: 44px; margin-right: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--wp--preset--color--ink); }
.osona-drawer__open svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
dialog.osona-drawer:not([open]) { display: none; } /* browsers/scrapers without <dialog> support otherwise render the menu inline (seen in Pingdom's screenshot) */
dialog.osona-drawer { position: fixed; inset: 0 auto 0 0; margin: 0; max-height: none; height: 100dvh; width: min(84vw, 380px); max-width: none; border: 0; padding: 0; background: var(--wp--preset--color--paper); box-shadow: 0 0 40px rgba(17,17,17,.25); transform: translateX(-100%); transition: transform .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
dialog.osona-drawer[open] { transform: none; }
@starting-style { dialog.osona-drawer[open] { transform: translateX(-100%); } }
dialog.osona-drawer::backdrop { background: rgba(17,17,17,.5); }
.osona-drawer__inner { display: flex; flex-direction: column; min-height: 100%; padding: 22px 24px 28px; overflow-y: auto; }
.osona-drawer__head { display: flex; align-items: center; gap: 10px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--wp--preset--color--line); }
.osona-drawer__brand { margin-right: auto; line-height: 0; }
.osona-drawer__brand img { width: 56px; height: 56px; }
.osona-drawer__login { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--osona-pill); background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); font-weight: 500; text-decoration: none; }
.osona-drawer__login svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.osona-drawer__login img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.osona-drawer__close { width: 36px; height: 36px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--wp--preset--color--ink); }
.osona-drawer__nav { flex: 1 1 auto; }
.osona-drawer__top, .osona-drawer__group summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-family: var(--wp--preset--font-family--jost); font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--wp--preset--color--ink); text-decoration: none; cursor: pointer; list-style: none; }
.osona-drawer__group summary::-webkit-details-marker { display: none; }
.osona-drawer__group summary::after { content: ""; width: 9px; height: 9px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.osona-drawer__group[open] summary::after { transform: rotate(-135deg); }
.osona-drawer__group ul { list-style: none; margin: 0 0 8px; padding: 0 0 6px 12px; }
.osona-drawer__group li a { display: block; padding: 8px 0; color: var(--wp--preset--color--ink-2); text-decoration: none; font-size: 16px; }
.osona-drawer__pills { display: flex; gap: 12px; margin: 20px 0 28px; }
.osona-drawer__pills a { position: relative; flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 0; border: 1px solid var(--wp--preset--color--line-2); border-radius: var(--osona-pill); color: var(--wp--preset--color--ink); font-weight: 500; text-decoration: none; }
.osona-drawer__pills svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.osona-drawer__pills .osona-wish-count { position: absolute; top: -7px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wp--preset--color--gold); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.osona-drawer__label { margin: 0 0 10px; font-weight: 600; }
.osona-drawer__social { margin-bottom: 26px; }
/* Payment marks: five 2:1 cards in one row, card-like border */
.osona-pay-marks { display: inline-flex; gap: 8px; vertical-align: middle; }
.osona-pay-marks img { width: 58px; height: 29px; object-fit: contain; border: 1px solid var(--wp--preset--color--line); border-radius: 5px; background: #fff; padding: 2px 4px; box-sizing: content-box; }
.osona-drawer .osona-pay-marks { display: flex; }
.osona-drawer .osona-pay-marks img { flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 2 / 1; }

/* Footer social icons */

/* ---------------------------------------------------------------------------
   Single product page (templates/single-product.html)
--------------------------------------------------------------------------- */
.osona-pdp .wp-block-woocommerce-breadcrumbs { font-size: 13.5px; color: var(--wp--preset--color--muted); }
.osona-pdp .wp-block-woocommerce-breadcrumbs a { color: var(--wp--preset--color--ink-2); }
.osona-pdp h1.wp-block-post-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .5rem; }
.osona-pdp .wp-block-woocommerce-product-price { font-family: var(--wp--preset--font-family--jost); font-size: 1.5rem; font-weight: 500; }
.osona-pdp .osona-tax-note { font-family: var(--wp--preset--font-family--dm-sans); font-size: 13px; color: var(--wp--preset--color--muted); font-weight: 400; margin-left: 8px; }
.osona-pdp .wp-block-woocommerce-product-summary { color: var(--wp--preset--color--ink-2); }

/* Gallery: main image + a compact, scrollable thumbnail strip (classic gallery markup) */
/* WooCommerce ships the gallery at inline opacity:0 until its slider script runs, which held the main
   image (the page's LCP) back ~2s. Show it at once; only the first slide is visible until the slider takes over. */
.osona-pdp .woocommerce-product-gallery { position: relative; opacity: 1 !important; }
.osona-pdp .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) { display: none; }
.osona-pdp .woocommerce-product-gallery__wrapper { margin: 0; }
.osona-pdp .woocommerce-product-gallery__image img { border-radius: var(--osona-card); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--wp--preset--color--sand); }
.osona-pdp .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 9; width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--paper); box-shadow: var(--osona-shadow); display: grid; place-items: center; text-indent: -9999px; }
.osona-pdp .woocommerce-product-gallery__trigger::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--wp--preset--color--ink); border-radius: 50%; position: absolute; top: 12px; left: 12px; }
.osona-pdp .woocommerce-product-gallery__trigger::after { content: ""; width: 2px; height: 8px; background: var(--wp--preset--color--ink); position: absolute; top: 24px; left: 25px; transform: rotate(-45deg); }
.osona-pdp .flex-control-thumbs { display: flex !important; gap: 8px; margin: 10px 0 0; padding: 4px 0; list-style: none; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.osona-pdp .flex-control-thumbs li { flex: 0 0 72px; width: 72px !important; margin: 0; scroll-snap-align: start; }
.osona-pdp .flex-control-thumbs img { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); opacity: .75; cursor: pointer; }
.osona-pdp .flex-control-thumbs img.flex-active, .osona-pdp .flex-control-thumbs img:hover { opacity: 1; border-color: var(--wp--preset--color--ink); }

/* Variation form: hide the native select once swatches exist; lay out the rows */
.osona-pdp table.variations { border: 0; margin: 0 0 12px; width: 100%; }
.osona-pdp table.variations td, .osona-pdp table.variations th { display: block; padding: 0; border: 0; text-align: left; }
.osona-pdp table.variations th.label { margin: 14px 0 8px; }
.osona-pdp table.variations th.label label { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.osona-swatches__current { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--wp--preset--color--muted); margin-left: 4px; }
.osona-swatches__select { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.osona-swatches { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.osona-swatches li { position: relative; }
.osona-swatch { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--osona-swatch); line-height: 0; }
.osona-swatches.is-photo .osona-swatch img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--osona-swatch); border: 1px solid var(--wp--preset--color--line); display: block; }
.osona-swatches li.is-selected .osona-swatch img { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; border-color: transparent; }
.osona-swatches li.is-text .osona-swatch { font-family: var(--wp--preset--font-family--dm-sans); font-size: 13.5px; font-weight: 500; line-height: 1; padding: 12px 16px; min-width: 44px; border-radius: var(--osona-pill); border: 1px solid var(--wp--preset--color--line-2); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.osona-swatches li.is-text.is-selected .osona-swatch { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); }
.osona-swatches li.is-soldout .osona-swatch img, .osona-swatches li.is-unavailable .osona-swatch { opacity: .4; }
.osona-swatches li.is-soldout::after, .osona-swatches li.is-unavailable::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, transparent 47%, var(--wp--preset--color--muted) 48%, var(--wp--preset--color--muted) 52%, transparent 53%); border-radius: var(--osona-swatch); }
.osona-pdp .reset_variations { font-size: 13px; color: var(--wp--preset--color--muted); margin-left: 6px; }
.osona-pdp .woocommerce-variation-price .price { font-family: var(--wp--preset--font-family--jost); font-size: 1.25rem; font-weight: 500; }
.osona-pdp .woocommerce-variation-availability .stock { font-size: 14px; margin: 4px 0 0; }
.osona-pdp .woocommerce-variation-add-to-cart, .osona-pdp form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.osona-pdp form.cart .quantity { margin: 0; }
.osona-pdp .single_add_to_cart_button { height: 46px; }
.osona-pdp .product_meta { font-size: 13.5px; color: var(--wp--preset--color--muted); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--line); }
.osona-pdp .product_meta > span { display: block; margin: 2px 0; }
.osona-pdp .product_meta a { color: var(--wp--preset--color--gold-deep); }

/* Trust strip */
.osona-trust { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); }
.osona-trust .wp-block-column { text-align: center; }
.osona-trust h3 { font-size: 15px; margin: 0 0 2px; }
.osona-trust p { font-size: 13px; color: var(--wp--preset--color--muted); margin: 0; }

/* Tabs (product-details block) */
.osona-pdp .wp-block-woocommerce-product-details .woocommerce-Tabs-panel h2:first-child { display: none; }
@media (max-width: 781px) {
  .osona-pdp .osona-pdp-cols { gap: 24px; }
}

/* Product meta: one line per item, no stray borders; brand line above the title */
.osona-pdp .wp-block-woocommerce-product-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wp--preset--color--line); font-size: 13.5px; color: var(--wp--preset--color--muted); }
.osona-pdp .wp-block-woocommerce-product-meta .wp-block-group { flex-direction: column; align-items: flex-start; gap: 4px; }
.osona-pdp .wp-block-woocommerce-product-sku { border: 0; padding: 0; margin: 0; width: auto; }
.osona-pdp .wp-block-woocommerce-product-meta a { color: var(--wp--preset--color--gold-deep); }
.osona-pdp .osona-pdp-brand { margin: 0 0 4px; color: var(--wp--preset--color--muted); }
.osona-pdp .osona-pdp-brand a { color: var(--wp--preset--color--gold-deep); text-decoration: none; font-weight: 500; }
/* Gallery: never crop the preview photo */
.osona-pdp .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); }

/* Hero on phones: tighter padding so the copy gets the width */
@media (max-width: 781px) {
  .osona-hero.wp-block-cover { padding: var(--wp--preset--spacing--50) !important; min-height: 460px !important; }
  .osona-tiles .wp-block-cover { min-height: 220px !important; }
}

/* ===========================================================================
   Round 2 of Kevin's product-page feedback
=========================================================================== */
/* Price: make it the loudest thing after the title */
.osona-pdp .wp-block-woocommerce-product-price,
.osona-pdp .wp-block-woocommerce-product-price .price,
.osona-pdp .wp-block-woocommerce-product-price .amount { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.osona-pdp .woocommerce-variation-price .price { font-size: 1.5rem; font-weight: 600; }

/* Gallery fills its column; the hairline goes on the frame so no side is clipped */
.osona-pdp .woocommerce-product-gallery { width: 100% !important; max-width: none !important; float: none !important; }
.osona-pdp .woocommerce-product-gallery__image img { border: 0; }
.osona-pdp .woocommerce-product-gallery .flex-viewport,
.osona-pdp .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); overflow: hidden; background: var(--wp--preset--color--paper);
}
/* Sticky gallery: stays put while the buy column scrolls, releases at the description */
@media (min-width: 782px) {
  .osona-pdp-cols { align-items: flex-start; }
  .osona-pdp-cols > .wp-block-column:first-child { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); align-self: flex-start; }
}

/* Product cards everywhere: square, whole photo visible, hairline frame.
   The FRAME (container) owns border, radius and padding; the photo only zooms inside it. */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image .wc-block-components-product-image img {
  aspect-ratio: 1 / 1 !important; object-fit: contain !important; width: 100%; height: auto;
  border: 0 !important; border-radius: calc(var(--osona-card) - 6px); background: var(--wp--preset--color--paper); box-sizing: border-box;
}
.wc-block-components-product-image { padding: 6px; }

/* Footer social icons: plain marks, no circles */

/* Product actions row: Ask a question · Share · Save */
.osona-pdp-actions { position: relative; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 16px 0 6px; }
.osona-pdp-actions button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--wp--preset--color--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.osona-pdp-actions button:hover { color: var(--wp--preset--color--ink); }
.osona-pdp-actions svg, .osona-wish-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.osona-wish.is-on svg { fill: var(--wp--preset--color--gold); stroke: var(--wp--preset--color--gold); }
.osona-share__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 196px; padding: 6px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); box-shadow: 0 8px 24px rgba(17,17,17,.12); }
.osona-share__opt { display: flex !important; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--wp--preset--color--ink); text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; }
.osona-share__opt:hover { background: var(--wp--preset--color--sand); }
/* Brand marks keep their own colours; the link/tick are stroked in ink */
.osona-share__opt svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.osona-share__opt svg.osona-mark--stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.osona-share__opt.is-whatsapp svg { color: #25D366; }
.osona-share__opt.is-facebook svg { color: #1877F2; }
.osona-share__opt.is-x svg { color: #000000; }
.osona-share__opt.is-link svg { color: var(--wp--preset--color--ink-2); }
.osona-share__opt.is-done svg { color: var(--wp--preset--color--stock); }
.osona-share__fallback { width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--wp--preset--color--line-2); border-radius: 8px; }

/* Add to cart while no variation is chosen: WooCommerce dims it to 50%, which
   reads as broken. Make "not yet" look deliberate, and say why. */
.osona-pdp .single_add_to_cart_button.disabled,
.osona-pdp .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 1 !important; /* WooCommerce sets .5 with a heavier selector; the sand colour is the signal instead */
  background: var(--wp--preset--color--sand-2); color: var(--wp--preset--color--ink-2); /* ink-2, not muted: muted on sand fails AA */
  border-color: var(--wp--preset--color--line-2); cursor: not-allowed;
}
.osona-pdp .single_add_to_cart_button.disabled:hover,
.osona-pdp .single_add_to_cart_button.wc-variation-selection-needed:hover {
  background: var(--wp--preset--color--sand-2); color: var(--wp--preset--color--ink-2); border-color: var(--wp--preset--color--line-2);
}
.osona-pick-hint { flex: 0 0 100%; font-size: 13.5px; color: var(--wp--preset--color--muted); margin: 4px 0 0; }
form.cart.variations_form:has(.single_add_to_cart_button:not(.disabled)) .osona-pick-hint { display: none; }

/* Header wishlist icon */
/* Header icons: search (opens the live-search overlay), account, wishlist, cart — all 40px boxes, centred on one line */
.osona-icon-link, .osona-wish-link { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); margin: 0; text-decoration: none; }
.osona-icon-link svg, .osona-wish-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.osona-icon-link:hover, .osona-wish-link:hover { color: var(--wp--preset--color--gold-deep); }
.osona-wish-count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }

/* Native dialog (Ask a question) */
dialog.osona-dialog { border: 0; padding: 0; border-radius: var(--osona-card); max-width: 560px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(17,17,17,.25); }
dialog.osona-dialog::backdrop { background: rgba(17, 17, 17, .55); }
.osona-dialog__inner { position: relative; padding: 32px 28px 28px; }
.osona-dialog__title { font-size: 1.5rem; margin: 0 0 4px; }
.osona-dialog__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); font-size: 20px; line-height: 1; cursor: pointer; }
.osona-muted { color: var(--wp--preset--color--muted); }

/* Live search overlay */
html.osona-search-open { overflow: hidden; }
.osona-search { position: fixed; inset: 0; z-index: 1000; display: none; overflow: auto; padding: 5vh 16px 40px; background: rgba(17, 17, 17, .5); }
.osona-search.is-open { display: block; }
.osona-search__panel { max-width: 1100px; margin: 0 auto; background: var(--wp--preset--color--paper); border-radius: var(--osona-card); padding: 18px 24px 28px; }
.osona-search__form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 12px; }
.osona-search__icon { width: 22px; height: 22px; fill: none; stroke: var(--wp--preset--color--muted); stroke-width: 1.7; flex: none; }
.osona-search__input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--wp--preset--font-family--jost); font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; color: var(--wp--preset--color--ink); min-width: 0; }
.osona-search__input::-webkit-search-cancel-button { display: none; }
.osona-search__close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.osona-search__all { text-align: center; margin: 22px 0 0; }

/* Shared small product grid (search results, wishlist page) */
.osona-pgrid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 899px) { .osona-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.osona-pcard { position: relative; }
.osona-pcard a { display: block; text-decoration: none; color: var(--wp--preset--color--ink); }
.osona-pcard img, .osona-pcard__noimg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); background: var(--wp--preset--color--paper); }
.osona-pcard__name { display: block; margin: 10px 0 2px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.osona-pcard__price { display: block; font-family: var(--wp--preset--font-family--jost); font-weight: 500; }
.osona-pcard__price s { color: var(--wp--preset--color--muted); font-weight: 400; margin-right: 6px; }
.osona-wish--remove { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); cursor: pointer; font-size: 18px; line-height: 1; }
.osona-wishlist__empty { font-size: 1.125rem; }

/* WooCommerce caps the gallery block at 512px; let it fill the column */
.osona-pdp .wp-block-woocommerce-product-image-gallery { max-width: none !important; }

/* Keep the gallery shorter than the buy column so it stays pinned longer while scrolling */
.osona-pdp .woocommerce-product-gallery__image img { max-height: 620px; }

/* ---------------------------------------------------------------------------
   Fluent Forms, in the theme's clothes (ask-a-question dialog, footer signup)
--------------------------------------------------------------------------- */
.fluentform .ff-el-group { margin-bottom: 14px; }
.fluentform .ff-el-input--label label { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); }
.fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"],
.fluentform input[type="number"], .fluentform textarea, .fluentform select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line-2);
  border-radius: 8px; box-shadow: none;
}
.fluentform textarea { min-height: 120px; resize: vertical; }
.fluentform input:focus, .fluentform textarea:focus, .fluentform select:focus { border-color: var(--wp--preset--color--gold); outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; }
.fluentform .ff-btn-submit {
  font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: 15px;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--ink); border-radius: var(--osona-pill);
  padding: 12px 26px; cursor: pointer;
}
.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.fluentform .ff-el-is-error input, .fluentform .ff-el-is-error textarea { border-color: var(--wp--preset--color--error); }
.fluentform .error, .fluentform .text-danger { color: var(--wp--preset--color--error); font-size: 13px; }
.ff-message-success { background: var(--wp--preset--color--gold-tint); border: 1px solid var(--wp--preset--color--gold); border-radius: var(--osona-card); padding: 14px 16px; color: var(--wp--preset--color--ink); }
/* Fluent Forms drives its own colours from this variable — retune it, don't fight it */
:root { --fluentform-primary: #111111; --fluentform-secondary: #C7A75B; }
/* Form 2 (footer signup) ships hardcoded blue + full-width in its own <style>; override both */
body form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit,
body form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper); min-width: 0;
}
body form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit:hover,
body form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style):hover {
  background-color: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink); min-width: 0;
}

/* Footer signup sits on sand: keep inputs white and the row tight */
.osona-footer .fluentform .ff-el-input--label { display: none; }

/* ---------------------------------------------------------------------------
   Checkout & cart (WooCommerce block checkout)
--------------------------------------------------------------------------- */
.osona-header--checkout .wp-block-navigation, .osona-header--checkout .wp-block-search { display: none; }
.osona-secure { margin: 0 12px 0 0; }
.osona-checkout .wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { font-family: var(--wp--preset--font-family--dm-sans); }
/* Step headings in Jost, cards with our hairline and radius */
.wc-block-components-checkout-step__heading, .wc-block-components-checkout-step__title, .wc-block-components-title, .wc-block-cart__totals-title { font-family: var(--wp--preset--font-family--jost) !important; font-weight: 500 !important; letter-spacing: -.01em; }
.wc-block-components-checkout-step__title { font-size: 1.25rem !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-components-textarea, .wc-block-components-country-input input, .wc-block-components-state-input input {
  border-radius: 8px !important; border-color: var(--wp--preset--color--line-2) !important; font-family: var(--wp--preset--font-family--dm-sans);
}
.wc-block-components-text-input.is-active input, .wc-block-components-text-input input:focus { border-color: var(--wp--preset--color--gold) !important; border-width: 1.5px !important; box-shadow: none !important; }
/* Ship / Pickup toggle and option cards.
   Kevin, round 3: white against the grey was too close a call, so the chosen half
   is a gold pill on the container's radius, the other stays flat and muted.
   The black box came from WooCommerce's own "border: 2px solid" (currentColor)
   plus an inset shadow of ours; both off. Woo keeps 2px of transparent border on
   every option, so dropping the colour shifts nothing. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container { border-radius: var(--osona-card); overflow: hidden; border: 1px solid var(--wp--preset--color--line-2); }
.wc-block-checkout__shipping-method-option { border-radius: 0 !important; color: var(--wp--preset--color--muted) !important; }
.wc-block-checkout__shipping-method-option--selected { background: var(--wp--preset--color--gold) !important; color: var(--wp--preset--color--ink) !important; border-color: transparent !important; border-radius: var(--osona-card) !important; box-shadow: none !important; }
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title { font-weight: 600; }
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink) !important; border-radius: var(--osona-card) !important; }
.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option { border-color: var(--wp--preset--color--line) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--wp--preset--color--ink) !important; background: var(--wp--preset--color--ink) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--paper) !important; }
/* Pickup: hide the empty "details" line so cards stay tight */
.wc-block-components-radio-control__description:empty { display: none; }
/* Shop name ahead of the branch, wrapped by site.js, so "Osona Yarns" leads. */
.wc-block-components-radio-control__label strong { font-weight: 600; }
/* Order summary on sand */
.wc-block-components-sidebar .wc-block-components-order-summary, .wc-block-components-sidebar { background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 20px !important; }
.wc-block-components-order-summary-item__image img { border-radius: 8px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--jost); font-size: 1.5rem; font-weight: 600; }
.wc-block-components-totals-footer-item-tax { color: var(--wp--preset--color--muted); }
.wc-block-components-checkout-place-order-button { width: 100%; height: 52px; font-size: 16px !important; }
.wc-block-components-checkout-return-to-cart-button { color: var(--wp--preset--color--gold-deep); }
/* Sign-in row above Contact information (site.js adds it, guests only). Woo's own
   "Log in" link in the heading says the same thing twice, so it goes. Turning it
   off properly is WooCommerce -> Settings -> Accounts & Privacy -> "Enable log-in
   during checkout"; hidden here so the setting stays free for you to use. */
.wc-block-checkout__login-prompt { display: none !important; }
.osona-signin-row { margin: 0 0 16px; font-size: 15px; color: var(--wp--preset--color--muted); }
.osona-signin { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--wp--preset--color--gold-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.osona-signin:hover, .osona-signin:focus-visible { color: var(--wp--preset--color--ink); }

/* Login dialog: WooCommerce classic form, dressed */
.osona-dialog--login .woocommerce-form-login { margin: 0; }
.osona-dialog--login .woocommerce-form-login .form-row { margin-bottom: 12px; padding: 0; }
.osona-dialog--login .woocommerce-form-login label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); margin-bottom: 4px; }
.osona-dialog--login .woocommerce-form-login .input-text { width: 100%; padding: 12px 14px; border: 1px solid var(--wp--preset--color--line-2); border-radius: 8px; font: inherit; font-size: 15px; }
.osona-dialog--login .woocommerce-form-login .input-text:focus { border-color: var(--wp--preset--color--gold); outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; }
.osona-dialog--login .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 12px; }
.osona-dialog--login .woocommerce-form-login .lost_password, .osona-dialog--login .woocommerce-LostPassword { display: none; }
.osona-dialog--login .woocommerce-form-login__submit { width: 100%; }
.osona-login__foot { font-size: 13.5px; color: var(--wp--preset--color--muted); margin: 14px 0 0; }

/* Payment method logos (Visa, Mastercard, M-Pesa). Paystack ships them as one
   1695x309 PNG, so there is plenty of resolution to scale up: at 34px tall it is
   still rendering well under half its natural size and stays sharp on retina.
   Trimmed on phones so the row does not crowd the method name.
   Two things had to give: WooCommerce caps these at max-height 24px, which beats
   any height we set, and the unstyled wrapper around the image is zero-width, so
   max-width:100% resolved to 0. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option img {
  height: 34px; max-height: 34px; width: auto; max-width: none; object-fit: contain;
}
@media (max-width: 600px) {
  .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option img { height: 26px; max-height: 26px; }
}

/* Checkout footer: the policies, no way out of the purchase. */
.osona-checkout-foot { padding: 24px 0 40px; border-top: 1px solid var(--wp--preset--color--line); margin-top: 8px; }
.osona-checkout-foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.osona-policy-link { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--wp--preset--color--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.osona-policy-link:hover, .osona-policy-link:focus-visible { color: var(--wp--preset--color--ink); }
.osona-checkout-foot__meta { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--wp--preset--color--muted); }
/* Policies run long, so the dialog scrolls inside itself rather than the page. */
dialog.osona-dialog--policy { max-width: 720px; max-height: min(80vh, 900px); }
.osona-dialog--policy .osona-dialog__inner { display: flex; flex-direction: column; max-height: inherit; }
.osona-policy__body { overflow-y: auto; margin-top: 12px; font-size: 15px; line-height: 1.65; }
.osona-policy__body > :first-child { margin-top: 0; }
.osona-policy__body h2 { font-size: 1.125rem; margin: 24px 0 6px; }
.osona-policy__body h3 { font-size: 1rem; margin: 18px 0 4px; }
.osona-policy__body ul { padding-left: 20px; }

/* ---------------------------------------------------------------------------
   Order confirmation
   The site header and footer stay here on purpose: the sale is done, so browsing
   on is what we want, unlike the checkout where every link is a leak.
--------------------------------------------------------------------------- */
.osona-confirmation .wc-block-order-confirmation-status { margin-bottom: 8px; }
.osona-confirmation h1, .osona-confirmation h2 { font-family: var(--wp--preset--font-family--jost); font-weight: 500; letter-spacing: -.01em; }
.osona-confirmation h2 { font-size: 1.25rem; }

/* What happens next: the one thing WooCommerce does not tell them. */
.osona-next-steps { background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 22px 24px; margin: 24px 0 32px; border-left: 3px solid var(--wp--preset--color--gold); }
.osona-next-steps__title { margin: 0 0 10px; font-size: 1.125rem !important; }
.osona-next-steps__body { margin: 0; line-height: 1.7; }
.osona-next-steps__help { margin: 16px 0 0; font-size: 14px; color: var(--wp--preset--color--muted); }
/* The three routes out of a question, as buttons. WhatsApp reuses the site's own
   green pill (product pages, mobile bar) so there is one WhatsApp button on the
   site; the other two are the same pill in outline. */
.osona-next-steps__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* Transparent border so the filled pill matches the outlined ones to the pixel:
   without it the 1px border on .osona-action makes those two 2px taller. */
.osona-next-steps__actions .osona-whatsapp { padding: 11px 20px; font-size: 14.5px; border: 1px solid transparent; }
.osona-action {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: 14.5px; line-height: 1.2;
  padding: 11px 20px; border-radius: var(--osona-pill);
  background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--line-2); text-decoration: none;
}
.osona-action:hover, .osona-action:focus-visible { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
/* These glyphs are drawn as strokes, unlike the filled WhatsApp mark. */
.osona-action svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Order summary strip, totals table, addresses: the checkout's hairline and radius. */
/* Every section on one column edge. The constrained layout caps these at the
   820px content size, but the cap lands on the content box, so each block's own
   padding was pushing it wider than the ones without padding. */
.osona-confirmation > * { box-sizing: border-box; }

.osona-confirmation .wc-block-order-confirmation-summary { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 18px 22px; margin-top: 24px !important; margin-bottom: 0 !important; }
.osona-confirmation .wc-block-order-confirmation-summary-list-item__key { color: var(--wp--preset--color--muted); }

/* Order details sits in the same sand card as the checkout's order summary, so
   the two pages read as one flow. */
.osona-confirmation .wc-block-order-confirmation-totals-wrapper { background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 8px 22px 22px; margin-top: 32px; }
.osona-confirmation .wc-block-order-confirmation-totals__table { width: 100%; border-collapse: collapse; }
/* The width hint goes on the header row only. Fixing the columns sized every row
   to the product rows' 68/32, which left "Shipping:" 450px away from its value
   whenever that value was a pickup address rather than a price. Auto layout gives
   the address the room it needs and leaves the product rows alone. */
.osona-confirmation .wc-block-order-confirmation-totals__table thead th:first-child { width: 62%; }
.osona-confirmation .wc-block-order-confirmation-totals__table th,
.osona-confirmation .wc-block-order-confirmation-totals__table td { padding: 12px 14px; border-bottom: 1px solid var(--wp--preset--color--line-2); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.osona-confirmation .wc-block-order-confirmation-totals__table thead th { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 600; }
.osona-confirmation .wc-block-order-confirmation-totals__table td:last-child,
.osona-confirmation .wc-block-order-confirmation-totals__table th:last-child { text-align: right; }
/* Woo gives the footer rows no border at all, so subtotal and shipping ran into
   the product list. Rule above the block, none inside it. */
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot th,
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot td { border-bottom: 0; border-top: 0; padding: 6px 14px; }
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot tr:first-child th,
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot tr:first-child td { padding-top: 16px; }
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.osona-confirmation .wc-block-order-confirmation-totals__table tfoot tr:last-child td { border-top: 1px solid var(--wp--preset--color--line-2); padding-top: 14px; font-family: var(--wp--preset--font-family--jost); font-size: 1.25rem; font-weight: 600; }
.osona-confirmation .wc-block-order-confirmation-totals__table small.includes_tax { display: block; margin-top: 2px; font-family: var(--wp--preset--font-family--dm-sans); font-size: 13px; font-weight: 400; color: var(--wp--preset--color--muted); }

/* The addresses were sitting right under the totals with nothing between them. */
.osona-confirmation .wc-block-order-confirmation-address-wrapper { margin-top: 40px !important; gap: 32px; }
.osona-confirmation .wc-block-order-confirmation-address-wrapper h2 { margin-top: 0; }
.osona-confirmation .wc-block-order-confirmation-address { color: var(--wp--preset--color--ink-2); line-height: 1.7; }
.osona-confirmation .wp-block-buttons { margin-top: 40px; }

/* Checkout form fields — Kevin's round 1
   1) Country/County selects had no top margin (touching the row above) and WooCommerce's
      dark 4px border; make them identical to the text inputs.
   2) Floating labels and placeholders read as "placeholder text": grey, not ink. */
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox { margin-top: 12px !important; }
.wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-select select {
  background: var(--wp--preset--color--paper) !important;
  border: 1px solid var(--wp--preset--color--line-2) !important;
  border-radius: 8px !important;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--dm-sans);
}
.wc-blocks-components-select__select:focus,
.wc-block-components-combobox.is-active .components-combobox-control__input { border-color: var(--wp--preset--color--gold) !important; border-width: 1.5px !important; box-shadow: none !important; }
.wc-blocks-components-select__label,
.wc-block-components-text-input label,
.wc-block-components-combobox .components-base-control__label,
.wc-block-components-textarea label,
.wc-block-components-form .wc-block-components-checkbox__label { color: var(--wp--preset--color--muted) !important; }
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select.is-active .wc-blocks-components-select__label { color: var(--wp--preset--color--muted) !important; }
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder,
.wc-block-components-checkout input::placeholder { color: var(--wp--preset--color--muted) !important; opacity: 1; }
.wc-block-components-text-input input,
.wc-blocks-components-select__select { color: var(--wp--preset--color--ink) !important; }

/* ---------------------------------------------------------------------------
   Shop & category pages — title band, filter rail, results bar
--------------------------------------------------------------------------- */
.osona-archive .osona-band .wp-block-woocommerce-breadcrumbs { color: var(--wp--preset--color--muted); margin-bottom: 6px; }
.osona-archive .osona-band .woocommerce-breadcrumb a, .osona-archive .osona-band .wp-block-woocommerce-breadcrumbs a, .osona-pdp .wp-block-woocommerce-breadcrumbs a, .woocommerce-breadcrumb a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--line-2); text-underline-offset: 3px; } /* links must not rely on colour alone */
.osona-archive .osona-band .wp-block-woocommerce-breadcrumbs a { color: var(--wp--preset--color--ink-2); }
.osona-archive .osona-band .wp-block-query-title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.osona-archive .osona-band .wp-block-term-description { max-width: 60ch; margin-top: 8px; }
.osona-archive .osona-band .wp-block-term-description p { margin: 0; }

/* Results bar: count left, sort right, hairline below */
.osona-shop__bar { padding-bottom: 14px; border-bottom: 1px solid var(--wp--preset--color--line); margin-bottom: 22px; }
.osona-shop__bar .woocommerce-result-count { margin: 0; color: var(--wp--preset--color--muted); font-size: 14px; }
.osona-shop__bar .wc-block-catalog-sorting { margin: 0; }
.osona-shop__bar .orderby { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-pill); padding: 8px 36px 8px 14px; background: var(--wp--preset--color--paper); font: inherit; font-size: 14px; }

/* Filter rail: sticky on desktop, each group separated by a hairline */
.osona-shop__filters .wc-block-product-filters { position: sticky; top: 24px; flex-direction: column; gap: 0; }
.osona-filter { padding: 18px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.osona-filter:first-child { padding-top: 0; }
.osona-filter--active:empty { display: none; }
.osona-filter__title { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }

/* Checkbox lists: our mark, muted counts, capped height with a scroll for long lists (colours) */
.osona-filter .wc-block-product-filter-checkbox-list__item { font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
.osona-filter .wc-block-product-filter-checkbox-list__count { color: var(--wp--preset--color--muted); }
.osona-filter .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark,
.osona-filter .wc-block-product-filter-checkbox-list__input:checked ~ .wc-block-product-filter-checkbox-list__mark { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); }
.osona-filter .wc-block-product-filter-checkbox-list__show-more-button { color: var(--wp--preset--color--gold-deep); font-size: 16px; text-decoration: underline; padding: 6px 0 0; background: none; border: 0; }
.osona-filter .wc-block-product-filter-checkbox-list__color-swatch { border: 1px solid var(--wp--preset--color--line); }

/* Price slider in gold, inputs as small pills. WooCommerce shrink-wraps the slider grid, so give it the rail width. */
.osona-filter .wp-block-woocommerce-product-filter-price-slider, .osona-filter .wc-block-product-filter-price-slider__content { width: 100%; }
.osona-filter .wc-block-product-filter-price-slider { --wc-product-filter-price-slider-handle: var(--wp--preset--color--gold); --wc-product-filter-price-slider-handle-border: var(--wp--preset--color--gold); --wc-product-filter-price-slider-slider: var(--wp--preset--color--gold); }
.osona-filter .wc-block-product-filter-price-slider input[type="text"] { width: 6.5em; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-pill); padding: 6px 10px; font-size: 13px; text-align: center; }

/* Active chips + clear */
.osona-filter--active .wc-block-product-filter-removable-chips__item { border-radius: var(--osona-pill); background: var(--wp--preset--color--gold-tint); border: 0; font-size: 13.5px; }
.osona-filter--active .wc-block-product-filter-clear-button { color: var(--wp--preset--color--gold-deep); font-size: 14px; background: none; border: 0; padding: 0; text-decoration: underline; }

/* Phone: the rail collapses to WooCommerce's drawer; make its trigger a pill and its Apply our gold */
.wc-block-product-filters__open-overlay { border: 1px solid var(--wp--preset--color--line) !important; border-radius: var(--osona-pill); padding: 10px 16px !important; font-weight: 500; }
.wc-block-product-filters__overlay-content .osona-filter { padding-left: 4px; padding-right: 4px; }
.wc-block-product-filters__apply { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); border-radius: var(--osona-pill); }
@media (max-width: 781px) {
  .osona-shop.wp-block-columns { flex-direction: column; }
  .osona-shop__filters { flex-basis: auto !important; }
  .osona-shop__filters .wc-block-product-filters { position: static; }
}

/* Product cards in grids: hover = slight zoom + crossfade to the second photo, and a stack of round
   action buttons (buy, save) over the top-right of the photo. Both added by osona-site. On touch
   devices the buttons are always visible. */
.wc-block-product-template li, .wp-block-post-template li:has(.wp-block-woocommerce-product-image) { position: relative; }
.wc-block-product-template .wp-block-woocommerce-product-image, .wp-block-post-template .wp-block-woocommerce-product-image { position: relative; }
.wc-block-product-template .wc-block-components-product-image, .wp-block-post-template .wc-block-components-product-image { position: relative; display: block; overflow: hidden; border-radius: var(--osona-card); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.wc-block-product-template .wc-block-components-product-image img, .wp-block-post-template .wc-block-components-product-image img { transition: transform .5s ease, opacity .4s ease; }
.wc-block-product-template .osona-hover-img, .wp-block-post-template .osona-hover-img { position: absolute; inset: 0; opacity: 0; }
.osona-card-actions { position: absolute; top: 14px; right: 14px; display: grid; gap: 10px; z-index: 2; }
.osona-card-actions__btn { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); box-shadow: var(--osona-shadow); cursor: pointer; transition: background .2s ease, color .2s ease, transform .25s ease, opacity .25s ease; }
.osona-card-actions__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.osona-card-actions__btn:hover, .osona-card-actions__btn.is-on { background: var(--wp--preset--color--gold); }
.osona-card-actions__btn.is-on svg { fill: currentColor; }
.osona-card-actions__btn.loading { opacity: .6; }
.osona-card-actions__btn .osona-wish__text, .wc-block-product-template .added_to_cart { display: none; }
@media (hover: hover) {
  .wc-block-product-template li:hover .wc-block-components-product-image, .wp-block-post-template li:hover .wc-block-components-product-image { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(17,17,17,.14); border-color: var(--wp--preset--color--line-2); }
  .wc-block-product-template li:hover .wc-block-components-product-image img, .wp-block-post-template li:hover .wc-block-components-product-image img { transform: scale(1.04); }
  .wc-block-product-template li:hover .osona-hover-img, .wp-block-post-template li:hover .osona-hover-img { opacity: 1; }
  .osona-card-actions__btn { opacity: 0; transform: translateX(10px); }
  .osona-card-actions__btn:nth-child(2) { transition-delay: .05s; }
  .wc-block-product-template li:hover .osona-card-actions__btn, .wp-block-post-template li:hover .osona-card-actions__btn, .osona-card-actions__btn:focus-visible { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Content pages (Phase 04): About, Contact, FAQ, policies, Track order
--------------------------------------------------------------------------- */
.osona-lead { font-family: var(--wp--preset--font-family--jost); font-weight: 500; }
.osona-cards .wp-block-column { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 24px; }
.osona-cards--sand .wp-block-column { background: var(--wp--preset--color--sand); border-color: transparent; }
.osona-cards h3 { font-size: 1.125rem; margin: 0 0 8px; }
.osona-cards p { margin: 0; color: var(--wp--preset--color--ink-2); }

/* Contact */
.osona-contact h2 { margin-top: 0; font-size: 1.5rem; }
.osona-contact h3 { font-size: 1rem; margin-top: 28px; }
.osona-contact .osona-whatsapp { margin-top: 6px; }
.osona-contact__form .fluentform { background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 28px; }

/* Branch cards, from [osona_branches]: sand cards, gold rule under the name, icon rows */
.osona-branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
@media (max-width: 1023px) { .osona-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .osona-branches { grid-template-columns: 1fr; } }
.osona-branch { background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 28px 26px 26px; display: flex; flex-direction: column; }
/* Home: the reviews above are already sand, so branch cards go white with a hairline instead */
.home .osona-branch { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); }
.osona-branch h3 { font-size: 1.25rem; margin: 0 0 22px; padding-bottom: 16px; position: relative; }
.osona-branch h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--wp--preset--color--gold); }
.osona-branch p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; color: var(--wp--preset--color--ink-2); font-size: 15px; line-height: 1.5; }
.osona-branch p svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--wp--preset--color--gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.osona-branch__phones a, .osona-branch__email { display: block; padding: 3px 0; color: var(--wp--preset--color--ink); text-decoration: none; } /* >=24px tap targets */
.osona-branch__phones a:hover, .osona-branch__email:hover { color: var(--wp--preset--color--gold-deep); }
.osona-branch__foot { margin-top: auto; padding-top: 6px; }
.osona-branch__map { display: inline-block; padding: 9px 18px; background: var(--wp--preset--color--ink); border-radius: var(--osona-pill); color: var(--wp--preset--color--paper); text-decoration: none; font-size: 14px; font-weight: 500; }
.osona-branch__map:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

/* FAQ as native <details> */
.osona-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 18px 0; margin: 0; }
.osona-faq summary { font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: 1.125rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.osona-faq summary::-webkit-details-marker { display: none; }
.osona-faq summary::after { content: "+"; color: var(--wp--preset--color--gold-deep); font-size: 1.4rem; line-height: 1; flex: none; }
.osona-faq details[open] summary::after { content: "–"; }
.osona-faq details p { margin: 12px 0 0; color: var(--wp--preset--color--ink-2); }

/* Policy pages: quiet numbered sub-headings, the three policies as a pill row at the top */
.osona-policy h2 { font-size: 1.125rem; margin: 32px 0 8px; letter-spacing: .01em; }
.osona-policy p, .osona-policy li { color: var(--wp--preset--color--ink-2); }
/* Policy pages: the three policies as a pill row at the top */
.osona-policy-nav { gap: 10px; margin-bottom: 28px; }
.osona-policy-nav p { margin: 0; }
.osona-policy-nav a { display: inline-block; padding: 8px 16px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-pill); text-decoration: none; color: var(--wp--preset--color--ink); font-size: 14px; }
.osona-policy-nav a:hover { border-color: var(--wp--preset--color--ink); }

/* Order tracking form */
.track_order { display: grid; gap: 16px; max-width: 480px; }
.track_order .form-row { margin: 0; }
.track_order input.input-text { width: 100%; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 12px 14px; }

/* About: full-width photo band with the title over it; icon cards; centred closing */
.osona-about-hero .wp-block-cover__inner-container { max-width: 900px; }
.osona-cards--icons .wp-block-column img { width: 56px; height: 56px; margin-bottom: 14px; }
.osona-cards--icons figure { margin: 0; }
.osona-about-closing .wp-block-image { margin-top: 40px; }
/* Branch emails */
.osona-branch__email { display: block; color: var(--wp--preset--color--ink); text-decoration: none; }

/* Home: Google reviews widget in our clothes — sand cards, equal height, no inner scrollbars, no review photos */
.wp-gr { --rev-color: var(--wp--preset--color--sand); --name-color: var(--wp--preset--color--ink); }
.wp-gr .grw-review-inner { border-radius: var(--osona-card); padding: 24px !important; }
.wp-gr a.wp-google-name, .wp-gr .wp-google-name { color: var(--wp--preset--color--ink) !important; font-family: var(--wp--preset--font-family--jost); font-weight: 500 !important; }
.wp-gr .wp-google-time { color: var(--wp--preset--color--muted); font-size: 13px; }
.wp-gr .wp-google-feedback { max-height: none !important; overflow: visible !important; }
.wp-gr .wp-google-text { color: var(--wp--preset--color--ink-2); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wp-gr .wp-google-feedback img, .wp-gr .grw-review img:not(.grw-img) { display: none !important; }
.wp-gr .grw-img { border-radius: 50%; }

/* Home: five category tiles under the hero; two-up on phones */
.osona-tiles .wp-block-button__link { font-size: 14px; padding: 10px 16px; }
@media (max-width: 781px) {
  .osona-tiles.wp-block-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .osona-tiles .wp-block-column:last-child { grid-column: 1 / -1; }
  .osona-tiles .wp-block-cover { min-height: 200px !important; }
}

/* Blog index: photo with a category chip in the corner, title, date. Nothing else. */
.osona-blog__grid { row-gap: 40px; }
.osona-blog__media { position: relative; }
.osona-blog__media .wp-block-post-featured-image { margin: 0; }
.osona-chip { position: absolute; top: 14px; left: 14px; margin: 0; z-index: 1; }
.osona-chip a { display: inline-block; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; text-decoration: none; }
.osona-chip .wp-block-post-terms__separator { display: none; }
.osona-chip--inline { position: static; margin: 22px 0 10px; }
.osona-chip--inline a { background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); border-radius: var(--osona-pill); margin-right: 6px; }
.osona-blog__grid .wp-block-post-title { margin: 16px 0 6px; font-size: 1.5rem; line-height: 1.25; }
.osona-blog__grid .wp-block-post-date { font-size: 15px; }
.osona-blog__grid .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.osona-blog__grid .wp-block-post-title a:hover { color: var(--wp--preset--color--gold-deep); }
.osona-blog__grid .wp-block-post-date { margin: 0; }

/* Single post: one 760px column, back link, contained image, lead, author line, then the article */
.osona-post__back { margin: 0 0 18px; }
.osona-post__back a { text-decoration: none; color: var(--wp--preset--color--ink-2); }
.osona-post .wp-block-post-featured-image img { border: 1px solid var(--wp--preset--color--line); }
.osona-post .wp-block-post-title { font-size: clamp(1.875rem, 3.2vw, 2.5rem); line-height: 1.15; margin: 0 0 12px; }
.osona-post__lead { color: var(--wp--preset--color--ink-2); margin: 0 0 20px; }
.osona-post__lead .wp-block-post-excerpt__more-text { display: none; }
.osona-post__meta { gap: 12px; align-items: center; margin-bottom: 28px; }
.osona-post__meta .wp-block-post-author-name { font-weight: 500; line-height: 1.3; }
.osona-post .wp-block-separator { border-color: var(--wp--preset--color--line); margin: 0 0 32px; opacity: 1; }
.osona-post .wp-block-post-content { font-size: 1.0625rem; line-height: 1.75; }
.osona-post .wp-block-post-content h2 { font-size: 1.5rem; margin-top: 2em; }
.osona-post .wp-block-post-content img { border-radius: var(--osona-card); }
.osona-post .wp-block-post-content blockquote { border-left: 3px solid var(--wp--preset--color--ink); padding-left: 20px; font-style: italic; }

/* My Account (classic WooCommerce shortcode): login/register side by side, dashboard nav as a pill list */
.osona-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 781px) { .osona-account .u-columns { grid-template-columns: 1fr; } }
.osona-account .u-column1, .osona-account .u-column2 { width: auto !important; float: none !important; }
.osona-account .u-columns h2 { font-size: 1.5rem; margin: 0 0 16px; }
.osona-account .woocommerce-form { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 28px; margin: 0; }
.osona-account .form-row { margin: 0 0 14px; padding: 0; }
.osona-account .form-row label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); margin-bottom: 4px; }
.osona-account .form-row label.woocommerce-form__label-for-checkbox { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.osona-account .woocommerce .input-text, .osona-account .input-text { width: 100%; padding: 12px 14px; border: 1px solid var(--wp--preset--color--line-2); border-radius: 8px; font: inherit; font-size: 15px; background: var(--wp--preset--color--paper); }
.osona-account .woocommerce-privacy-policy-text { font-size: 13px; color: var(--wp--preset--color--muted); }
.osona-account .lost_password { font-size: 14px; margin: 8px 0 0; }
.osona-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.osona-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 16px; border-radius: var(--osona-pill); color: var(--wp--preset--color--ink); text-decoration: none; }
.osona-account .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--sand); }
.osona-account .woocommerce-MyAccount-navigation .is-active a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.osona-account .woocommerce-MyAccount-navigation { width: 240px !important; float: none !important; }
.osona-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.osona-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
@media (max-width: 781px) { .osona-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; grid-template-areas: "profile" "nav" "content"; row-gap: 0; } .osona-account .woocommerce-MyAccount-content { margin-top: 32px; } .osona-account .woocommerce-MyAccount-navigation { width: auto !important; } .osona-account .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, 1fr); } }
.osona-account table.shop_table { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); border-collapse: separate; }
.osona-account table.shop_table th, .osona-account table.shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--wp--preset--color--line); }
.osona-account .woocommerce-Address { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 20px; }
.osona-account .woocommerce-notices-wrapper .woocommerce-message, .osona-account .woocommerce-notices-wrapper .woocommerce-error { border-radius: var(--osona-card); }

/* Home section titles: bigger, with a short gold rule beneath so they read as chapter heads */
main h2.has-text-align-center {
  font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -.01em; margin-bottom: 36px; padding-bottom: 28px; position: relative;
}
main h2.has-text-align-center + p.has-text-align-center { margin-top: -12px; margin-bottom: 40px; } /* intro line under a title: closer to the rule than to the content */
main h2.has-text-align-center::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 3px; transform: translateX(-50%); background: var(--wp--preset--color--gold); border-radius: 2px; }

/* Sign in: one centred card (email → link), password form folded underneath, register column hidden (the link registers) */
.osona-login { max-width: 560px; margin: 0 auto; }
.osona-login__card { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 36px 32px; background: var(--wp--preset--color--paper); box-shadow: var(--osona-shadow); }
.osona-login__card h2 { margin: 0 0 8px; font-size: 1.75rem; }
.osona-login__lead { color: var(--wp--preset--color--ink-2); margin: 0 0 22px; }
.osona-login__form label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); margin-bottom: 6px; }
.osona-login__row { display: flex; gap: 10px; }
.osona-login__row input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--wp--preset--color--line-2); border-radius: var(--osona-pill); font: inherit; font-size: 15px; }
.osona-login__row button { flex: none; white-space: nowrap; padding: 13px 22px; border-radius: var(--osona-pill); border: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font: inherit; font-weight: 500; cursor: pointer; }
.osona-login__row button:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
@media (max-width: 599px) { .osona-login__row { flex-direction: column; } }
.osona-login__fine { font-size: 13px; color: var(--wp--preset--color--muted); margin: 14px 0 0; }
.osona-login__note { padding: 12px 16px; border-radius: 8px; font-size: 14.5px; margin: 0 0 18px; }
.osona-login__note.is-ok { background: #EAF4EA; color: var(--wp--preset--color--stock); }
.osona-login__note.is-warn { background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); }
.osona-login__switch { margin: 18px 0 0; text-align: center; }
.osona-login__toggle { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; color: var(--wp--preset--color--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.osona-login__toggle:hover { color: var(--wp--preset--color--gold-deep); }
/* Password card: WooCommerce's login + register forms, restyled to match the link card */
.osona-login__password .u-columns { display: block; }
.osona-login__password .u-columns h2 { font-size: 1.375rem; margin: 0 0 14px; }
.osona-login__password .u-column2 { display: none; } /* registering = the email link; the password card only logs in */
.osona-account .osona-login__password .woocommerce-form { border: 0; padding: 0; margin: 0; }
.osona-login__password .form-row { margin: 0 0 14px; padding: 0; }
.osona-account .osona-login__password .form-row label, .osona-account .osona-login__reset .form-row label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); margin-bottom: 6px; }
.osona-login__password label.woocommerce-form__label-for-checkbox { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.osona-account .osona-login__password .woocommerce .input-text, .osona-account .osona-login__password .input-text, .osona-account .osona-login__reset .input-text { width: 100%; padding: 13px 16px; border: 1px solid var(--wp--preset--color--line-2); border-radius: var(--osona-pill); font: inherit; font-size: 15px; background: var(--wp--preset--color--paper); }
.osona-login__password .woocommerce-privacy-policy-text, .osona-login__password .lost_password { font-size: 13px; color: var(--wp--preset--color--muted); margin: 8px 0 0; }
.osona-login__password .woocommerce-form-row--wide .required { color: var(--wp--preset--color--gold-deep); }

/* Reset-password card (WooCommerce lost-password endpoint inside the sign-in card) */
.osona-login__reset h2 { margin: 0 0 8px; font-size: 1.75rem; }
.osona-login__reset .woocommerce-ResetPassword { margin: 0; }
.osona-login__reset .woocommerce-ResetPassword > p:first-of-type { color: var(--wp--preset--color--ink-2); margin: 0 0 20px; }
.osona-login__reset .form-row { margin: 0 0 14px; padding: 0; }
.osona-login__reset .woocommerce-Button { margin-top: 4px; }
a.osona-login__toggle { text-decoration: underline; }

/* Reset-password field: same pill as the sign-in card (declared last so it beats the generic account rule) */
.osona-account .osona-login__reset .woocommerce-ResetPassword .input-text { width: 100%; box-sizing: border-box; border-radius: var(--osona-pill); padding: 13px 16px; border-color: var(--wp--preset--color--line-2); }
.osona-login__reset .woocommerce-ResetPassword .form-row { width: 100%; float: none; }

/* 404: a loose thread drawn across the page, then the message with room to breathe */
.osona-404 { text-align: center; }
.osona-404 > * { margin-left: auto; margin-right: auto; }
.osona-404__thread { display: block; width: min(560px, 90%); height: auto; margin: 0 auto 8px; overflow: visible; }
.osona-404__thread path { fill: none; stroke: var(--wp--preset--color--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: osona-thread 2.4s ease-out .2s forwards; }
.osona-404__thread circle { fill: var(--wp--preset--color--gold); opacity: 0; animation: osona-knot .4s ease-out 2.4s forwards; }
@keyframes osona-thread { to { stroke-dashoffset: 0; } }
@keyframes osona-knot { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .osona-404__thread path { stroke-dashoffset: 0; animation: none; } .osona-404__thread circle { opacity: 1; animation: none; } }
.osona-404__code { font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: clamp(6rem, 16vw, 11rem); line-height: 1; color: var(--wp--preset--color--gold-tint); margin: -20px 0 -.42em; position: relative; z-index: 0; user-select: none; }
.osona-404 h1 { position: relative; z-index: 1; }
.osona-404 h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); margin: 0 0 18px; }
.osona-404__lead { max-width: 34em; margin-bottom: 36px !important; }
.osona-404 .wp-block-buttons { margin-bottom: 28px; }
.osona-404 .wp-block-button__link { transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.osona-404 .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 17, 17, .14); }
.osona-404 .has-gold-background-color:hover { background-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--paper) !important; }
.osona-404 .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.osona-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.osona-404__links a { color: var(--wp--preset--color--ink-2); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--line-2); }
.osona-404__links a:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }

/* ---------------------------------------------------------------------------
   Footer — white, four quiet columns, no underlines, icon contact list
--------------------------------------------------------------------------- */
.osona-footer h3 { font-size: 1.25rem; margin: 0 0 22px; }
.osona-footer p, .osona-footer li { font-size: 16px; line-height: 1.6; }
.osona-footer a { text-decoration: none; color: var(--wp--preset--color--ink-2); }
.osona-footer a:hover { color: var(--wp--preset--color--gold-deep); }
.osona-footer__links { list-style: none; margin: 0; padding: 0; }
.osona-footer__links li { margin: 0 0 14px; }
.osona-footer__contact { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.osona-footer__contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--wp--preset--color--ink-2); }
.osona-footer__contact svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--wp--preset--color--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wp-block-social-links.osona-socials { gap: 12px; }
.wp-block-social-links.osona-socials .wp-social-link { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s, transform .2s; }
.wp-block-social-links.osona-socials .wp-social-link svg { width: 26px; height: 26px; } /* brand colours come from WordPress's default social-links style */
.wp-block-social-links.osona-socials .wp-social-link:hover { background-color: var(--wp--preset--color--ink) !important; transform: translateY(-2px); }
.wp-block-social-links.osona-socials .wp-social-link a { padding: 0; display: grid; place-items: center; }
.osona-footer .fluentform .ff-el-form-control { border-radius: var(--osona-pill); padding: 13px 18px; }
.osona-footer__bar p { margin: 0; }
.osona-footer__pay { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.osona-footer__pay > span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.osona-footer__credit { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--osona-pill); color: var(--wp--preset--color--ink) !important; font-size: 14px; text-decoration: none; transition: background-color .2s, color .2s; }
.osona-footer__credit span { color: var(--wp--preset--color--muted); }
.osona-footer__credit strong { font-weight: 600; letter-spacing: .01em; }
.osona-footer__credit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.osona-footer__credit:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper) !important; }
.osona-footer__credit:hover span { color: inherit; }
@media (max-width: 781px) {
  .osona-footer__cols { gap: 0; }
  .osona-footer__cols .wp-block-column + .wp-block-column { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--line); }
  .osona-footer h3 { margin-bottom: 16px; }
  .osona-footer__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .osona-footer__links li { margin: 0 0 10px; }
  .osona-footer__bar { justify-content: center; text-align: center; }
}
/* Signup: email and button share the row at every width (Fluent Forms stacks its columns on phones) */
.osona-footer .fluentform .ff-t-container { display: flex; flex-wrap: nowrap; gap: 10px; }
.osona-footer .fluentform .ff-t-cell { flex: 1 1 50%; min-width: 0; padding: 0; }
.osona-footer .fluentform .ff-el-group { margin: 0; height: 100%; }
.osona-footer .fluentform .ff-el-input--content { height: 100%; }
.osona-footer .fluentform .ff-el-form-control, .osona-footer .fluentform .ff-btn-submit { height: 50px; width: 100%; box-sizing: border-box; }
.osona-footer .fluentform .ff-btn-submit { border-radius: var(--osona-pill); }

/* Account, logged in: profile card + menu on the left, content on the right */
.osona-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "profile content" "nav content"; column-gap: 48px; row-gap: 0; }
.osona-account__profile { grid-area: profile; background: var(--wp--preset--color--sand); border-radius: var(--osona-card) var(--osona-card) 0 0; padding: 32px 28px 24px; margin: 0; }
.osona-account .woocommerce-MyAccount-navigation { grid-area: nav; border-radius: 0 0 var(--osona-card) var(--osona-card) !important; padding-top: 20px !important; align-self: start; }
.osona-account .woocommerce-MyAccount-content { grid-area: content; }
.osona-account .woocommerce-MyAccount-navigation { width: auto !important; background: var(--wp--preset--color--sand); border-radius: var(--osona-card); padding: 32px 28px; }
.osona-account__profile { text-align: center; border-bottom: 1px solid var(--wp--preset--color--line-2); }
.osona-account__avatar { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto 14px; }
.osona-account__profile strong { display: block; font-family: var(--wp--preset--font-family--jost); font-size: 1.25rem; font-weight: 500; }
.osona-account__profile span { display: block; color: var(--wp--preset--color--ink-2); font-size: 15px; word-break: break-all; }
.osona-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-size: 16px; }
.osona-account .woocommerce-MyAccount-navigation a::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.osona-account .woocommerce-MyAccount-navigation .is-active a { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); box-shadow: var(--osona-shadow); }
.osona-account .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--paper); }
.woocommerce-MyAccount-navigation-link--dashboard a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M8 12h10'/%3E%3C/svg%3E"); }
.osona-dashboard .woocommerce-MyAccount-content > p:nth-of-type(1), .osona-dashboard .woocommerce-MyAccount-content > p:nth-of-type(2) { display: none; }
.osona-account .woocommerce-MyAccount-content h2 { font-size: 1.75rem; margin: 0 0 20px; }
.osona-account__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 40px; }
.osona-account__stats > div { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; }
.osona-account__stats svg { grid-row: 1 / 3; width: 36px; height: 36px; fill: none; stroke: var(--wp--preset--color--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; padding-right: 18px; border-right: 1px solid var(--wp--preset--color--line); box-sizing: content-box; }
.osona-account__stats span { color: var(--wp--preset--color--ink-2); font-size: 15px; }
.osona-account__stats strong { font-family: var(--wp--preset--font-family--jost); font-size: 2rem; font-weight: 500; line-height: 1.1; }
.osona-orders, .osona-account table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); overflow: hidden; }
.osona-orders th, .osona-account table.shop_table th { text-align: left; background: var(--wp--preset--color--sand); font-family: var(--wp--preset--font-family--jost); font-weight: 500; padding: 14px 18px; border: 0; }
.osona-orders td, .osona-account table.shop_table td { padding: 16px 18px; border: 0; border-top: 1px solid var(--wp--preset--color--line); vertical-align: middle; }
.osona-orders td a { text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 500; }
.osona-orders small { display: block; color: var(--wp--preset--color--muted); font-size: 13px; }
.osona-orders__items { display: flex; gap: 14px; align-items: center; }
.osona-orders__items img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); }
.osona-status { display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink-2); }
.osona-status.is-completed { background: #EAF4EA; color: var(--wp--preset--color--stock); }
.osona-status.is-processing, .osona-status.is-on-hold, .osona-status.is-pending { background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); }
.osona-status.is-cancelled, .osona-status.is-failed, .osona-status.is-refunded { background: #F8E8E6; color: var(--wp--preset--color--error); }
.osona-account .woocommerce-orders-table__cell-order-actions .button { padding: 8px 14px; font-size: 13px; margin-right: 6px; }
.osona-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.osona-account .woocommerce-Address { position: relative; padding: 26px 26px 26px; }
.osona-account .woocommerce-Address-title h2 { font-size: 1.125rem; margin: 0 0 12px; }
.osona-account .woocommerce-Address-title .edit { position: absolute; top: 22px; right: 22px; padding: 8px 18px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-radius: var(--osona-pill); text-decoration: none; font-size: 14px; }
.osona-account .woocommerce-Address address { font-style: normal; color: var(--wp--preset--color--ink-2); line-height: 1.6; }
.osona-account .woocommerce-EditAccountForm .form-row, .osona-account .woocommerce-address-fields .form-row { margin-bottom: 14px; }
.osona-account fieldset { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 20px 22px; margin: 20px 0; }
.osona-account fieldset legend { font-family: var(--wp--preset--font-family--jost); font-weight: 500; padding: 0 8px; }
@media (max-width: 781px) { .osona-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; grid-template-areas: "profile" "nav" "content"; row-gap: 0; } .osona-account .woocommerce-MyAccount-content { margin-top: 32px; } .osona-account__stats { grid-template-columns: 1fr; } .osona-account .woocommerce-Addresses { grid-template-columns: 1fr; } .osona-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; } }

/* Footer bottom bar: logo + copyright, payment logos, credit */
.osona-footer__bar { gap: 16px 32px; }
.osona-footer__logo img { width: 160px; height: 160px; }
.osona-footer__pay { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }
.osona-footer__pay img { height: 28px; width: auto; }

/* Addresses: two tidy cards, title and Edit on one line */
.osona-account .woocommerce-Addresses.u-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; }
.osona-account .woocommerce-Addresses .woocommerce-Address { float: none !important; width: auto !important; max-width: none; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 24px 26px; }
.osona-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.osona-account .woocommerce-Address-title h2, .osona-account .woocommerce-Address-title h3 { font-size: 1.125rem; margin: 0; }
.osona-account .woocommerce-Address-title .edit { position: static; white-space: nowrap; }
.osona-account .woocommerce-MyAccount-content > p:first-of-type:not(.osona-account__empty) { color: var(--wp--preset--color--ink-2); margin-top: 0; }

/* Account details + address forms: pill fields, quiet password box */
.osona-account .woocommerce-EditAccountForm .input-text, .osona-account .woocommerce-address-fields .input-text, .osona-account .woocommerce-address-fields select, .osona-account .woocommerce-EditAccountForm input[type="file"] { border-radius: var(--osona-pill); padding: 12px 18px; }
.osona-account .woocommerce-EditAccountForm .form-row-first, .osona-account .woocommerce-EditAccountForm .form-row-last, .osona-account .woocommerce-address-fields .form-row-first, .osona-account .woocommerce-address-fields .form-row-last { width: calc(50% - 8px); float: none; display: inline-block; vertical-align: top; }
.osona-account .woocommerce-EditAccountForm .form-row-first, .osona-account .woocommerce-address-fields .form-row-first { margin-right: 12px; }
.osona-account .woocommerce-EditAccountForm em, .osona-account .woocommerce-EditAccountForm .description { font-style: normal; font-size: 13px; color: var(--wp--preset--color--muted); display: block; margin-top: 6px; }
.osona-account .woocommerce-EditAccountForm fieldset { background: var(--wp--preset--color--sand); border: 0; border-radius: var(--osona-card); padding: 22px 24px 10px; margin: 24px 0; }
.osona-account .woocommerce-EditAccountForm fieldset legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-size: 1rem; }
.osona-account .woocommerce-EditAccountForm fieldset .input-text { background: var(--wp--preset--color--paper); }
.osona-account .show-password-input { top: 50%; transform: translateY(-50%); right: 16px; }
.osona-account .woocommerce-EditAccountForm .required { color: var(--wp--preset--color--gold-deep); }
.osona-account .woocommerce-EditAccountForm button.woocommerce-Button { margin-top: 8px; }
.osona-account .woocommerce-Button, .osona-account .woocommerce-MyAccount-content .button:not(.edit) { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-radius: var(--osona-pill); }

/* Own profile photo: camera badge on the avatar links to Account details; upload row there */
.osona-account__profile { position: relative; }
.osona-account__photo { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; display: block; }
.osona-account__photo .osona-account__avatar { margin: 0; width: 96px; height: 96px; object-fit: cover; }
.osona-account__photo span { position: absolute; right: -2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); display: grid; place-items: center; box-shadow: var(--osona-shadow); }
.osona-account__photo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.osona-photo-row { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.osona-photo-row img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.osona-photo-row label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--ink-2); margin-bottom: 6px; }
.osona-photo-row input[type="file"] { font-size: 14px; }
.osona-photo-row .osona-photo-row__remove { font-size: 13px; color: var(--wp--preset--color--muted); }

/* WooCommerce's block-theme stylesheet caps the account wrapper at 1000px; the sand band is 1400 */
.osona-account .woocommerce, .woocommerce-account .osona-account .woocommerce { max-width: none !important; margin: 0; }

/* WooCommerce's `.woocommerce form .form-row .input-text` outranks three plain classes: match it, then add ours */
.osona-account .woocommerce form .form-row .input-text, .osona-account .woocommerce form .form-row select, .osona-account .woocommerce form .form-row .input-text:focus { border-radius: var(--osona-pill); padding: 12px 18px; border: 1px solid var(--wp--preset--color--line-2); }
.osona-account .woocommerce form .form-row .input-text:focus { border-color: var(--wp--preset--color--ink); outline: none; }
/* Address cards: pin each to its own cell so WooCommerce's column rules cannot stagger them */
.osona-account .woocommerce-Addresses .col-1 { grid-column: 1; grid-row: 1; }
.osona-account .woocommerce-Addresses .col-2 { grid-column: 2; grid-row: 1; }
@media (max-width: 781px) { .osona-account .woocommerce-Addresses .col-1, .osona-account .woocommerce-Addresses .col-2 { grid-column: 1; grid-row: auto; } }
.osona-account .woocommerce form .form-row-first, .osona-account .woocommerce form .form-row-last { width: calc(50% - 10px); float: none; display: inline-block; vertical-align: top; }
.osona-account .woocommerce form .form-row-first { margin-right: 12px; }
/* Flex instead of inline-block so the two name fields really share a row */
.osona-account .woocommerce-EditAccountForm, .osona-account .woocommerce-address-fields__field-wrapper { display: flex; flex-wrap: wrap; column-gap: 12px; }
.osona-account .woocommerce-EditAccountForm > *, .osona-account .woocommerce-address-fields__field-wrapper > * { flex: 0 0 100%; }
.osona-account .woocommerce form .form-row-first, .osona-account .woocommerce form .form-row-last { flex: 0 0 calc(50% - 6px); width: auto; margin-right: 0; display: block; }
.osona-account .woocommerce form .form-row { padding: 0; margin: 0 0 14px; box-sizing: border-box; }

/* Related products: card prices at shop size, not the buy-column size */
.osona-pdp .wp-block-post-template .wp-block-woocommerce-product-price, .osona-pdp .wp-block-post-template .wp-block-woocommerce-product-price .price, .osona-pdp .wp-block-post-template .wp-block-woocommerce-product-price .amount { font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: 1.3; }
.osona-pdp .wp-block-post-template .wp-block-woocommerce-product-price .wc-block-components-product-price__suffix, .osona-pdp .wp-block-post-template .woocommerce-price-suffix { font-size: 13px; }

/* Events + Jobs */
.osona-meta { display: grid; gap: 6px 16px; grid-template-columns: max-content 1fr; margin: 12px 0 0; font-size: 15px; }
.osona-meta > div { display: contents; }
.osona-meta dt { color: var(--wp--preset--color--muted); }
.osona-meta dd { margin: 0; color: var(--wp--preset--color--ink-2); }
.osona-event .osona-meta, .osona-job .osona-meta { font-size: 1rem; padding: 20px 24px; background: var(--wp--preset--color--sand); border-radius: var(--osona-card); margin: 16px 0 28px; }
.osona-events__grid { row-gap: 40px; }
.osona-event-card .wp-block-post-title { font-size: 1.375rem; margin: 16px 0 0; }
.osona-event-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.osona-date-chip { position: absolute; top: 14px; left: 14px; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--wp--preset--color--paper); box-shadow: var(--osona-shadow); font-family: var(--wp--preset--font-family--jost); line-height: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--ink-2); }
.osona-date-chip strong { font-size: 1.5rem; font-weight: 500; color: var(--wp--preset--color--ink); }
.osona-event__cta { margin-top: 28px; }
.osona-jobs__list { display: grid; gap: 16px; }
.osona-job-card { border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-card); padding: 24px 26px; align-items: center; }
.osona-job-card .wp-block-post-title { font-size: 1.25rem; margin: 0; }
.osona-job-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.osona-job-card .osona-meta { margin-top: 8px; grid-template-columns: max-content 1fr; }
.osona-job-card .wp-block-read-more { padding: 10px 20px; border: 1px solid var(--wp--preset--color--ink); border-radius: var(--osona-pill); text-decoration: none; color: var(--wp--preset--color--ink); font-size: 14px; font-weight: 500; }
.osona-job-card .wp-block-read-more:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* Event / job single: air between the photo and the title; softer details box */
.osona-event .wp-block-post-title, .osona-job .wp-block-post-title { margin-top: 32px; }
.osona-event .wp-block-post-featured-image img { border: 1px solid var(--wp--preset--color--line); }
.osona-event .osona-meta, .osona-job .osona-meta { grid-template-columns: 110px 1fr; gap: 10px 20px; }
.osona-event .osona-meta dt, .osona-job .osona-meta dt { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; padding-top: 3px; }

/* Event: map link inside the details box; calendar buttons beside the WhatsApp one */
.osona-meta__map { margin-left: 10px; font-size: 14px; color: var(--wp--preset--color--gold-deep); }
.osona-calendar { display: flex; flex-wrap: wrap; gap: 10px; }
.osona-calendar__btn { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--wp--preset--color--ink); border-radius: var(--osona-pill); color: var(--wp--preset--color--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.osona-calendar__btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.osona-event__cta { gap: 10px; align-items: center; }

/* A zero count is hidden by site.js; the grid display above must not defeat that */
.osona-wish-count[hidden] { display: none; }

@media (max-width: 599px) { .osona-footer .osona-pay-marks img { width: 50px; height: 25px; padding: 2px 3px; } .osona-footer .osona-pay-marks { gap: 6px; } }

.osona-cart-count[hidden] { display: none; }

/* Floating WhatsApp (desktop only — phones have WhatsApp in the bottom bar) */
.osona-wa { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: none; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (min-width: 900px) { .osona-wa { display: flex; } }
.osona-wa__btn { width: 60px; height: 60px; border: 0; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(17,17,17,.2); transition: transform .2s, background-color .3s; }
.osona-wa__btn:hover { transform: translateY(-2px); }
.osona-wa__btn .osona-wa__icon { width: 32px; height: 32px; }
.osona-wa__icon { display: block; object-fit: contain; }
.osona-wa.is-closed .osona-wa__btn, .osona-wa.is-closed .osona-wa__head { background: #3F3F46; } /* dark grey outside East African Time hours */
.osona-wa__panel { width: 340px; max-width: calc(100vw - 48px); border-radius: var(--osona-card); overflow: hidden; background: var(--wp--preset--color--sand); box-shadow: 0 20px 50px rgba(17,17,17,.22); }
.osona-wa__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #25D366; color: #fff; font-family: var(--wp--preset--font-family--jost); font-weight: 500; font-size: 17px; transition: background-color .3s; }
.osona-wa__head .osona-wa__icon { width: 26px; height: 26px; flex: none; }
.osona-wa__head span { flex: 1; }
.osona-wa__close { border: 0; background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px; }
.osona-wa__body { padding: 18px 16px 6px; min-height: 140px; }
.osona-wa__bubble { position: relative; margin: 0; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #fff; color: var(--wp--preset--color--ink); font-size: 15px; line-height: 1.5; box-shadow: 0 2px 6px rgba(17,17,17,.06); }
.osona-wa__bubble.is-closed { display: none; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.osona-wa.is-closed .osona-wa__bubble.is-open { display: none; }
.osona-wa.is-closed .osona-wa__bubble.is-closed { display: block; }
.osona-wa__form { display: flex; gap: 8px; padding: 12px 16px 16px; }
.osona-wa__form input { flex: 1; min-width: 0; border: 1px solid var(--wp--preset--color--line); border-radius: var(--osona-pill); padding: 12px 16px; font: inherit; font-size: 15px; background: #fff; }
.osona-wa__form button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--wp--preset--color--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.osona-wa__form button svg { width: 20px; height: 20px; fill: currentColor; }
.osona-wa__form button:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

/* ---------------------------------------------------------------------------
   Buttons: one hover language everywhere — lift + shadow, a gold sheen sweeping
   left→right, arrows nudge, press-down on click. Colour swaps stay as they were.
   (Icon-only controls, the bottom bar and the card overlay buttons keep their own.)
--------------------------------------------------------------------------- */
.wp-block-button__link, .wp-element-button:not(.wc-block-mini-cart__button),
.woocommerce .button, .woocommerce a.button, .single_add_to_cart_button, .wc-block-components-button,
.fluentform .ff-btn-submit, .osona-branch__map, .osona-calendar__btn, .osona-footer__credit,
.osona-drawer__pills a, .osona-drawer__login, .osona-whatsapp, .osona-login__row button, .osona-wa__form button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}
.wp-block-button__link::before, .wp-element-button:not(.wc-block-mini-cart__button)::before,
.woocommerce .button::before, .woocommerce a.button::before, .single_add_to_cart_button::before, .wc-block-components-button::before,
.fluentform .ff-btn-submit::before, .osona-branch__map::before, .osona-calendar__btn::before, .osona-footer__credit::before,
.osona-drawer__pills a::before, .osona-drawer__login::before, .osona-whatsapp::before, .osona-login__row button::before, .osona-wa__form button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .55s ease;
}
.wp-block-button__link:hover, .wp-element-button:not(.wc-block-mini-cart__button):hover,
.woocommerce .button:hover, .woocommerce a.button:hover, .single_add_to_cart_button:not(.disabled):hover, .wc-block-components-button:hover,
.fluentform .ff-btn-submit:hover, .osona-branch__map:hover, .osona-calendar__btn:hover, .osona-footer__credit:hover,
.osona-drawer__pills a:hover, .osona-drawer__login:hover, .osona-whatsapp:hover, .osona-login__row button:hover, .osona-wa__form button:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,17,17,.16);
}
.wp-block-button__link:hover::before, .wp-element-button:not(.wc-block-mini-cart__button):hover::before,
.woocommerce .button:hover::before, .woocommerce a.button:hover::before, .single_add_to_cart_button:not(.disabled):hover::before, .wc-block-components-button:hover::before,
.fluentform .ff-btn-submit:hover::before, .osona-branch__map:hover::before, .osona-calendar__btn:hover::before, .osona-footer__credit:hover::before,
.osona-drawer__pills a:hover::before, .osona-drawer__login:hover::before, .osona-whatsapp:hover::before, .osona-login__row button:hover::before, .osona-wa__form button:hover::before {
  transform: translateX(120%);
}
.wp-block-button__link:active, .wp-element-button:active, .woocommerce .button:active, .single_add_to_cart_button:active, .wc-block-components-button:active,
.fluentform .ff-btn-submit:active, .osona-branch__map:active, .osona-calendar__btn:active, .osona-footer__credit:active, .osona-drawer__pills a:active, .osona-whatsapp:active {
  transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgba(17,17,17,.12); transition-duration: .08s;
}
/* Outline pills fill on hover */
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); }
/* Arrows in button text slide right (the "Label →" tiles, "Get directions" etc.) */
.wp-block-button__link, .osona-branch__map, .osona-footer__credit { --arrow-shift: 0px; }
.wp-block-button__link:hover, .osona-branch__map:hover, .osona-footer__credit:hover { --arrow-shift: 4px; }
.osona-footer__credit svg { transition: transform .22s ease; }
.osona-footer__credit:hover svg { transform: translate(var(--arrow-shift), calc(var(--arrow-shift) * -1)); }
.osona-tiles .wp-block-button__link { letter-spacing: .01em; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, letter-spacing .22s ease, background-color .22s ease, color .22s ease; }
.osona-tiles .wp-block-button__link:hover { letter-spacing: .05em; }
/* Icon buttons (header, search, share, swatches): a gold ring blooms out */
.osona-icon-link, .osona-wish-link, .wc-block-customer-account__link, .osona-pdp-actions button, .osona-card-actions__btn, .osona-drawer__open, .osona-swatch {
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.osona-icon-link:hover, .osona-wish-link:hover, .wc-block-customer-account__link:hover, .osona-pdp-actions button:hover, .osona-drawer__open:hover {
  transform: translateY(-2px); box-shadow: 0 0 0 6px var(--wp--preset--color--gold-tint); border-radius: 50%; color: var(--wp--preset--color--gold-deep);
}
.osona-card-actions__btn:hover { transform: scale(1.08); }
.osona-swatch:hover { transform: scale(1.08); }
/* Hover only where a pointer can hover — no stuck states on touch */
@media (hover: none) {
  .wp-block-button__link:hover, .wp-element-button:hover, .woocommerce .button:hover, .single_add_to_cart_button:hover, .wc-block-components-button:hover,
  .fluentform .ff-btn-submit:hover, .osona-branch__map:hover, .osona-calendar__btn:hover, .osona-footer__credit:hover, .osona-drawer__pills a:hover, .osona-drawer__login:hover, .osona-whatsapp:hover { transform: none; box-shadow: none; }
}