/* ============================================================
   Lisensio — WooCommerce / Statute SEO / WP core bridging rules
   Maps plugin-generated markup onto the design system in style.css.
   ============================================================ */

:root{
  --slswc-primary:var(--primary);
  --slswc-primary-hover:var(--primary-dark, var(--primary));
}

/* ---------- Statute SEO breadcrumbs → .crumbs ---------- */
.statute-seo-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:18px}
.statute-seo-breadcrumbs a{color:var(--primary)}
.statute-seo-breadcrumbs-separator{margin:0 6px;color:var(--muted)}
.statute-seo-breadcrumbs-current{font-weight:700;color:var(--ink)}

/* ---------- Notices → cards ----------
   Subtle tinted background per notice type (no left-border accent) with a
   leading icon. .woocommerce-message/.woocommerce-info are WC's own <div>
   wrappers (text + any inline button as direct children), flexed so the
   button is pushed to the right via margin-left:auto and always stays
   inside the box instead of the old float:right, which pulled it out of
   flow and let it overflow past the notice's edge. .woocommerce-error is a
   <ul><li> list of messages, so each <li> gets the same treatment instead
   of the container. */
.woocommerce-message,.woocommerce-error,.woocommerce-info{list-style:none;border-radius:12px;padding:16px 20px;margin:0 0 22px;color:var(--ink);font-size:14.5px;box-shadow:var(--shadow-sm)}
.woocommerce-message,.woocommerce-info{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.woocommerce-message{background:var(--bg-tint)}
.woocommerce-message::before{content:"✅";flex-shrink:0}
.woocommerce-info{background:rgba(217,119,6,.08)}
.woocommerce-info::before{content:"ℹ️";flex-shrink:0}
.woocommerce-error{background:rgba(220,38,38,.06)}
.woocommerce-error li{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.woocommerce-error li:not(:last-child){margin-bottom:10px}
.woocommerce-error li::before{content:"⚠️";flex-shrink:0}
/* order:99 (not just margin-left:auto) because WC doesn't put the button last consistently —
   e.g. its own "temporary password" notice renders "<a class=button>Resend</a> Your account is
   using..." with the button FIRST — so this forces it to the visual end of the row regardless
   of where it falls in the notice HTML. */
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:99;margin-left:auto;flex-shrink:0}

/* ---------- Form rows → .field ---------- */
.woocommerce form .form-row{margin-bottom:18px}
.woocommerce form .form-row label{display:block;font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:8px;font-family:var(--font-head)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:14.5px;font-family:var(--font-body);color:var(--ink);transition:.25s;background:#fff}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row select:focus,.woocommerce form .form-row textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(43,163,119,.12)}
.woocommerce form .form-row .required{color:#dc2626;text-decoration:none}

/* ---------- Buttons → .btn ---------- */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 30px;border-radius:12px;transition:.3s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;font-family:var(--font-head);background:var(--gradient);color:#fff;box-shadow:0 10px 26px rgba(43,163,119,.35);line-height:1.2}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,.woocommerce input.button:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(43,163,119,.45);color:#fff}
.woocommerce .button.alt,.woocommerce button.button.alt{background:var(--gradient);color:#fff}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- Tables → .data-table ---------- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:none;border-radius:0;font-size:14.5px}
.woocommerce table.shop_table th{text-align:left;font-family:var(--font-head);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 14px;border-bottom:1.5px solid var(--border)}
.woocommerce table.shop_table td{padding:15px 14px;border-bottom:1px solid var(--border);color:var(--ink);font-weight:500;vertical-align:middle;border-top:none}
.woocommerce table.shop_table tbody tr:hover td{background:var(--bg-soft)}

/* ---------- Header cart badge ---------- */
.cart-count:empty{display:none}

/* ---------- Star rating (read-only display) ----------
   wc_get_rating_html() outputs a bare accessibility string ("Rated 4.5 out
   of 5...") inside .star-rating > span[style="width:X%"] with no visual
   star glyphs — WooCommerce's own disabled stylesheet normally supplies
   those via an icon font. Rebuilt here with Unicode stars so the raw text
   stays screen-reader-only while a gold/border star row renders visually. */
.star-rating{overflow:hidden;position:relative;height:1em;line-height:1;width:5.4em;font-size:14px;display:inline-block;vertical-align:middle}
.star-rating::before{content:"★★★★★";position:absolute;top:0;left:0;letter-spacing:.2em;color:var(--border)}
.star-rating span{overflow:hidden;position:absolute;top:0;left:0;height:100%;padding-top:1.5em}
.star-rating span::before{content:"★★★★★";position:absolute;top:0;left:0;letter-spacing:.2em;color:#f5a623}

/* ---------- Category pill badge ----------
   Shared by the single-product summary and .shop-card product loop items
   (woocommerce/content-single-product.php, woocommerce/content-product.php). */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--bg-tint);color:var(--primary-dark);letter-spacing:.04em;text-transform:uppercase}

/* ---------- .shop-card content (design source: .shop-card / .product-card) ----------
   .product-card (already global, matches design) supplies the box: background,
   border, radius, padding, hover lift + gradient-bar reveal. This block covers
   only the .shop-card-specific children, shared by both grid contexts that
   reuse woocommerce/content-product.php: the shop archive (assets/css/shop.css)
   and the single-product "Related products" section (assets/css/single-product.css) —
   each of those files only needs to define its own grid container layout. */
.shop-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.shop-card:hover .shop-thumb{background:var(--gradient)}
.shop-card .pill{margin-bottom:10px}
.shop-card img{height:150px;object-fit:cover;background:var(--bg-tint);border-radius:14px;margin-bottom:14px;width:100%}
.shop-card .woocommerce-loop-product__title{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:6px}
.shop-card .star-rating{font-size:13px;margin-bottom:6px}
.shop-card .p-desc{font-size:14px;color:var(--body)}
/* margin-top:auto (not the design source's fixed 18px) so the price/button
   row always sits flush with the card bottom even when the pill or
   description above it is missing — real product data here is uneven
   (most test products have no category or short description), which the
   design's curated mock content never has to account for. */
/* Fixed 2-column grid (not flex) so the button always starts at the same X
   across every card in a row, regardless of the price column's content
   (missing price, short price, or a long "$X – $Y" range). */
/* min-height reserves room for the tallest possible price (2-line range, or
   amount + .price-period) so every card's row starts at the same height —
   margin-top:auto alone only bottom-aligns rows, and rows vary in height
   whenever one card's price wraps and another's doesn't (or has no price
   at all), which desyncs the row's top edge across cards in the same grid row. */
.shop-card .shop-meta{display:grid;grid-template-columns:1fr 1fr;justify-items:start;align-items:center;gap:8px 12px;margin-top:auto;padding-top:18px;min-height:104px}
.shop-card .price{display:block;font-weight:800;font-size:18px;color:var(--ink);font-family:var(--font-head);position:relative;min-width:0}
.shop-card .price del{opacity:.5;font-weight:600;margin-right:6px}
.shop-card .price ins{text-decoration:none}
.shop-card .price .price-period{display:block;font-size:12.5px;font-weight:500;color:var(--muted);font-family:var(--font-body);margin-top:2px}
/* Subscription signup-fee/trial note (SLSWC get_subscription_price_html()) breaks the
   compact card layout if shown inline — collapse it into a hover/focus hint instead. */
.shop-card .price br{display:none}
.shop-card .price small{display:none;position:absolute;bottom:calc(100% + 8px);left:0;width:200px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px;font-weight:500;font-family:var(--font-body);color:var(--body);line-height:1.5;box-shadow:var(--shadow-sm);z-index:5;white-space:normal}
/* .price-hint (lisensio_get_shop_price_html(), inc/pricing.php) is a real inline
   trigger element sitting right after the price amount, so the icon stays on the
   same line as the amount instead of trailing the whole (possibly 2-line) price
   block. `:has(> small)` keeps the old auto-generated icon working for any
   get_price_html() fallback output that isn't already wrapped in .price-hint. */
.shop-card .price:has(> small)::after{content:"ⓘ";display:inline-block;margin-left:6px;width:16px;height:16px;border-radius:50%;background:var(--bg-tint);color:var(--primary-dark);font-size:11px;font-weight:700;line-height:16px;text-align:center;cursor:help;vertical-align:middle}
.shop-card .price-hint{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;width:16px;height:16px;border-radius:50%;background:var(--bg-tint);color:var(--primary-dark);font-size:11px;font-weight:700;cursor:help;vertical-align:middle}
.shop-card .price:hover small,
.shop-card .price:focus-within small{display:block}
.shop-card .button{padding:10px 20px;font-size:13.5px;justify-self:end}
.shop-card span.onsale{position:absolute;top:16px;left:16px;background:var(--gradient);color:#fff;font-family:var(--font-head);font-weight:700;font-size:12px;padding:5px 12px;border-radius:100px;z-index:1}


/* ---------- Pricing card AJAX add-to-cart loading state ---------- */
.pricing-add-to-cart.loading{opacity:.65;pointer-events:none}

/* ---------- My Account navigation reset ---------- */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--body);transition:.25s}
.woocommerce-MyAccount-navigation a:hover{background:var(--bg-tint);color:var(--primary)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--gradient);color:#fff;box-shadow:0 8px 20px rgba(43,163,119,.3)}