/*
Theme Name: Nova Shop
Theme URI: https://example.com/nova-shop
Author: Nova Shop
Author URI: https://example.com
Description: A lightweight, mobile-first WooCommerce theme built for cross-border B2C retail stores selling to overseas consumers. Works with PayPal + Stripe, simple and variable products, weight/zone based shipping and free-shipping thresholds. No page builder required.
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nova-shop
Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images, translation-ready, blog, grid-layout, one-column
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. Base / Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ns-primary: #2563eb;
  --ns-primary-dark: #1d4ed8;
  --ns-dark: #111827;
  --ns-text: #374151;
  --ns-muted: #6b7280;
  --ns-border: #e5e7eb;
  --ns-soft: #f9fafb;
  --ns-sale: #dc2626;
  --ns-radius: 8px;
  --ns-container: 1200px;
  --ns-header-h: 64px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ns-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ns-dark);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
a { color: var(--ns-primary); text-decoration: none; }
a:hover { color: var(--ns-primary-dark); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }

hr { border: 0; border-top: 1px solid var(--ns-border); margin: 2em 0; }

/* Form elements */
input, select, textarea, button { font: inherit; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="password"], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  background: #fff;
  color: var(--ns-dark);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: 0;
  border-color: var(--ns-primary);
}
label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ns-dark); font-size: .9rem; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; }
th, td { border: 1px solid var(--ns-border); padding: 10px 12px; text-align: left; }

/* Accessibility */
.screen-reader-text,
.ns-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; clip: auto;
  padding: 10px 16px; background: var(--ns-dark); color: #fff; border-radius: 6px;
}

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */
.ns-container {
  width: 100%;
  max-width: var(--ns-container);
  margin: 0 auto;
  padding: 0 16px;
}
.ns-section { padding: 36px 0; }
.ns-section--soft { background: var(--ns-soft); }
.ns-section-title {
  text-align: center;
  margin: 0 0 6px;
  font-size: 1.5rem;
}
.ns-section-sub {
  text-align: center;
  color: var(--ns-muted);
  margin: 0 0 24px;
  font-size: .95rem;
}
.ns-text-center { text-align: center; }
.ns-mb-0 { margin-bottom: 0; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.ns-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-block;
  padding: 12px 24px;
  background: var(--ns-dark);
  color: #fff !important;
  border: 0;
  border-radius: var(--ns-radius);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  text-decoration: none;
}
.ns-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--ns-primary);
  color: #fff !important;
  text-decoration: none;
}
.ns-btn--primary { background: var(--ns-primary); }
.ns-btn--primary:hover { background: var(--ns-primary-dark); }
.ns-btn--outline {
  background: transparent; color: var(--ns-dark) !important;
  border: 1px solid var(--ns-dark);
}
.ns-btn--outline:hover { background: var(--ns-dark); color: #fff !important; }
.ns-btn--block { display: block; width: 100%; }
.ns-btn--sm { padding: 9px 16px; font-size: .875rem; }

/* ==========================================================================
   4. Header
   ========================================================================== */
.ns-announcement {
  background: var(--ns-dark);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  padding: 8px 16px;
  letter-spacing: .02em;
}
.ns-announcement a { color: #fff; text-decoration: underline; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid var(--ns-border);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 2px 12px rgba(17, 24, 39, .08); }

.ns-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--ns-header-h);
  padding-top: 10px;
  padding-bottom: 10px;
}

.ns-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.ns-logo img { max-height: 40px; width: auto; }
.ns-logo-text {
  font-size: 1.25rem; font-weight: 800; color: var(--ns-dark);
  letter-spacing: -.02em; white-space: nowrap;
}
.ns-logo:hover .ns-logo-text { color: var(--ns-primary); }

.ns-header-actions { display: flex; align-items: center; gap: 6px; }

.ns-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ns-dark); cursor: pointer; position: relative;
}
.ns-icon-btn:hover { background: var(--ns-soft); color: var(--ns-primary); }
.ns-icon-btn svg { width: 21px; height: 21px; }

.ns-cart-link { position: relative; display: inline-flex; text-decoration: none; color: var(--ns-dark); }
.ns-cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ns-primary); color: #fff;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 18px;
  text-align: center;
}
.ns-cart-count.is-empty { display: none; }

/* Desktop nav */
.ns-primary-nav { display: none; }
.ns-primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.ns-primary-nav li { position: relative; }
.ns-primary-nav a {
  display: block; padding: 8px 12px; border-radius: 6px;
  color: var(--ns-dark); font-weight: 500; font-size: .93rem;
}
.ns-primary-nav a:hover { background: var(--ns-soft); color: var(--ns-primary); text-decoration: none; }
.ns-primary-nav .current-menu-item > a { color: var(--ns-primary); }

/* Sub-menus */
.ns-primary-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 190px; background: #fff; border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius); box-shadow: 0 8px 24px rgba(17, 24, 39, .1);
  padding: 6px; list-style: none;
}
.ns-primary-nav li:hover > .sub-menu { display: block; }
.ns-primary-nav .sub-menu a { padding: 7px 10px; font-size: .9rem; }

/* Mobile drawer */
.ns-drawer {
  position: fixed; inset: 0 30% 0 0; z-index: 1200;
  background: #fff; padding: 20px;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
}
.ns-drawer.is-open { transform: translateX(0); }
.ns-drawer-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(17, 24, 39, .45); display: none;
}
.ns-drawer-overlay.is-open { display: block; }
.ns-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ns-border);
}
.ns-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.ns-drawer-nav a {
  display: block; padding: 13px 4px; color: var(--ns-dark);
  font-weight: 600; border-bottom: 1px solid var(--ns-border); text-decoration: none;
}
.ns-drawer-nav .sub-menu { list-style: none; padding-left: 14px; margin: 0; }
.ns-drawer-nav .sub-menu a { font-weight: 400; font-size: .92rem; color: var(--ns-muted); }
.ns-drawer-search { margin-top: 18px; }
.ns-drawer-close { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ns-dark); }

/* Header search (desktop) */
.ns-header-search { display: none; }
.ns-search-form { display: flex; gap: 6px; }
.ns-search-form input[type="search"] {
  border-radius: 999px; background: var(--ns-soft); border: 1px solid transparent;
  padding: 9px 16px; min-width: 200px;
}
.ns-search-form button {
  border: 0; background: var(--ns-dark); color: #fff;
  border-radius: 999px; padding: 0 18px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ns-search-form button:hover { background: var(--ns-primary); }
/* The inline SVGs carry no width/height attributes, so the SVG spec defaults
   them to width:100%. Inside a shrink-to-fit button there is no definite
   width to resolve against, so the icon collapses to 0px and the submit
   button renders as an empty dark pill. An explicit size fixes it. */
.ns-search-form button svg { width: 19px; height: 19px; flex: 0 0 19px; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.ns-hero {
  position: relative;
  background: var(--ns-soft);
  background-size: cover;
  background-position: center;
  padding: 56px 0;
  text-align: center;
}
.ns-hero--has-image::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(17, 24, 39, .45);
}
.ns-hero--has-image .ns-container { position: relative; z-index: 1; }
.ns-hero--has-image, .ns-hero--has-image h1, .ns-hero--has-image p { color: #fff; }
.ns-hero h1 { font-size: 2rem; margin-bottom: .4em; letter-spacing: -.02em; }
.ns-hero p { font-size: 1.05rem; color: var(--ns-muted); max-width: 620px; margin: 0 auto 1.6em; }
.ns-hero--has-image p { color: rgba(255, 255, 255, .9); }
.ns-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   6. Trust bar
   ========================================================================== */
.ns-trust {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  border-top: 1px solid var(--ns-border);
  border-bottom: 1px solid var(--ns-border);
  padding: 22px 0;
}
.ns-trust-item { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; }
.ns-trust-item svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--ns-primary); }
.ns-trust-title { font-weight: 700; color: var(--ns-dark); font-size: .95rem; display: block; }
.ns-trust-desc { font-size: .82rem; color: var(--ns-muted); display: block; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer { background: var(--ns-soft); border-top: 1px solid var(--ns-border); margin-top: 48px; }
.ns-footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; }
.ns-footer-col h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.ns-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ns-footer-col li { margin-bottom: 8px; }
.ns-footer-col a { color: var(--ns-text); font-size: .92rem; }
.ns-footer-col a:hover { color: var(--ns-primary); }
.ns-footer-col p { font-size: .92rem; color: var(--ns-muted); }
.ns-footer-contact { font-size: .92rem; color: var(--ns-muted); }
.ns-footer-bottom {
  border-top: 1px solid var(--ns-border); padding: 18px 0;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  font-size: .85rem; color: var(--ns-muted); text-align: center;
}
.ns-pay-icons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ns-pay-icons span {
  border: 1px solid var(--ns-border); border-radius: 4px;
  padding: 3px 9px; font-size: .75rem; font-weight: 600; color: var(--ns-muted); background: #fff;
}

/* ==========================================================================
   8. Content / blog
   ========================================================================== */
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-meta { font-size: .85rem; color: var(--ns-muted); margin-bottom: 12px; }
.page-header { padding: 32px 0 8px; }
.page-title { margin: 0; font-size: 1.8rem; }
.ns-post-list { list-style: none; padding: 0; margin: 0; }
.ns-post-list li { padding: 18px 0; border-bottom: 1px solid var(--ns-border); }
.ns-post-list li:first-child { padding-top: 0; }
.ns-post-list h2 { margin-bottom: 4px; font-size: 1.15rem; }
.ns-post-thumb { margin-bottom: 12px; }

.ns-pagination { display: flex; gap: 8px; justify-content: center; padding: 24px 0; flex-wrap: wrap; }
.ns-pagination .page-numbers {
  padding: 8px 14px; border: 1px solid var(--ns-border); border-radius: 6px;
  color: var(--ns-dark); font-size: .9rem;
}
.ns-pagination .page-numbers.current { background: var(--ns-dark); color: #fff; border-color: var(--ns-dark); }
.ns-pagination .page-numbers:hover { border-color: var(--ns-primary); color: var(--ns-primary); text-decoration: none; }

.ns-404 { padding: 60px 0; text-align: center; }

/* ==========================================================================
   9. WooCommerce overrides
   ========================================================================== */
.woocommerce-breadcrumb {
  font-size: .85rem; color: var(--ns-muted); margin-bottom: 18px !important;
}
.woocommerce-breadcrumb a { color: var(--ns-muted); }
.woocommerce-breadcrumb a:hover { color: var(--ns-primary); }

.woocommerce .ns-shop-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ns-shop-main { min-width: 0; }

/* Product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
/* Kill WooCommerce's clearfix on this list.
   woocommerce-layout.css ships:
     .woocommerce ul.products::before,
     .woocommerce ul.products::after { content: " "; display: table; }
   In a float layout that is a harmless clearfix. The moment the list becomes
   a grid, both pseudo-elements turn into REAL grid items: ::before steals the
   first track (a blank slot at the top-left of every product grid) and
   ::after adds a trailing empty cell. The same happens on the homepage
   [products] shortcode, cross-sells and related products, because all of them
   render ul.products. A grid never needs clearing, so drop them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  padding: 12px;
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 20px rgba(17, 24, 39, .09);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: .95rem; line-height: 1.4; margin: 10px 0 6px; padding: 0; color: var(--ns-dark);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; max-height: 2.8em;
}
.woocommerce ul.products li.product img { border-radius: 6px; margin: 0 0 4px; }
.woocommerce ul.products li.product .price {
  color: var(--ns-dark) !important; font-weight: 700; font-size: 1rem; margin-bottom: 10px;
}
.woocommerce ul.products li.product .price del { color: var(--ns-muted); font-weight: 400; font-size: .875rem; }
.woocommerce ul.products li.product .price ins { color: var(--ns-sale); text-decoration: none; }
.woocommerce ul.products li.product .button { padding: 9px 14px; font-size: .85rem; width: 100%; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--ns-sale); color: #fff;
  border-radius: 4px; padding: 3px 9px;
  font-size: .75rem; font-weight: 700; line-height: 1.5;
  min-height: 0; min-width: 0; top: 8px !important; left: 8px !important; right: auto !important;
}

/* Single product */
.woocommerce div.product .summary { margin-top: 20px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ns-dark); font-size: 1.5rem; font-weight: 700; }
.woocommerce div.product .product_title { font-size: 1.5rem; }
.woocommerce div.product form.cart { margin: 18px 0; padding: 0; border: 0; }
.woocommerce div.product form.cart .variations td { border: 0; padding: 4px 0; }
.woocommerce div.product form.cart .button { padding: 14px 30px; }
.woocommerce div.product .woocommerce-product-gallery { margin-bottom: 18px; }
.woocommerce .woocommerce-product-gallery__image img { border-radius: var(--ns-radius); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 16px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 6px 6px 0 0; background: var(--ns-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 20px; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border-radius: var(--ns-radius); }

/* Cart & checkout */
.woocommerce table.shop_table { border-radius: var(--ns-radius); border: 1px solid var(--ns-border); }
.woocommerce table.shop_table th { background: var(--ns-soft); }
.woocommerce .cart-collaterals .cart_totals table th { padding-left: 12px; }
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select { padding: 11px 14px; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.woocommerce-checkout #customer_details { margin-bottom: 24px; }
.woocommerce #payment { background: var(--ns-soft); border-radius: var(--ns-radius); }
.woocommerce #payment div.payment_box { background: #fff; border-radius: 6px; }
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { padding: 10px 12px; }
.woocommerce .quantity .qty { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ns-border); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 15px 26px; font-size: 1rem; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--ns-primary); border-radius: var(--ns-radius);
}
.woocommerce-error { border-top-color: var(--ns-sale); }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: 20px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 11px 16px; display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--ns-soft); font-weight: 700; }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 16px; }
.woocommerce .woocommerce-ordering select { width: auto; padding: 8px 12px; }

.ns-shop-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

/* Widgets / sidebar */
.ns-shop-sidebar { background: var(--ns-soft); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 18px; }
.ns-shop-sidebar .widget { margin-bottom: 22px; }
.ns-shop-sidebar .widget:last-child { margin-bottom: 0; }
.ns-shop-sidebar .widget-title { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   10. Misc blocks
   ========================================================================== */
.ns-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.ns-cat-card {
  display: block; position: relative; border-radius: var(--ns-radius); overflow: hidden;
  background: var(--ns-soft); border: 1px solid var(--ns-border); text-align: center;
  padding: 18px 12px; color: var(--ns-dark); font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: border-color .18s ease;
}
.ns-cat-card:hover { border-color: var(--ns-primary); color: var(--ns-primary); text-decoration: none; }
.ns-cat-card img { margin: 0 auto 10px; border-radius: 6px; }
.ns-cat-count { display: block; font-size: .8rem; color: var(--ns-muted); font-weight: 400; }

.ns-cta {
  background: var(--ns-dark); color: #fff; border-radius: 12px;
  padding: 34px 24px; text-align: center;
}
.ns-cta h2 { color: #fff; margin-bottom: .3em; }
.ns-cta p { color: rgba(255, 255, 255, .8); }
.ns-cta .ns-btn { background: #fff; color: var(--ns-dark) !important; }
.ns-cta .ns-btn:hover { background: var(--ns-primary); color: #fff !important; }

.ns-notice {
  background: var(--ns-soft); border: 1px dashed var(--ns-border);
  border-radius: var(--ns-radius); padding: 16px 18px; font-size: .92rem;
}

.ns-to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ns-dark); color: #fff; border: 0; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .2);
}
.ns-to-top.is-visible { display: flex; }
.ns-to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   11. Responsive (mobile-first: min-width)
   ========================================================================== */
@media (min-width: 600px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-trust { grid-template-columns: repeat(3, 1fr); }
  .ns-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .ns-hero { padding: 72px 0; }
  .ns-hero h1 { font-size: 2.4rem; }
  .ns-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  h1 { font-size: 2rem; }
  .ns-container { padding: 0 24px; }
  .ns-primary-nav { display: block; }
  .ns-header-search { display: block; }
  /* The standalone magnifier only exists to open the mobile drawer and focus
     its search field. On desktop the inline form is already visible, so the
     toggle would just be a duplicate icon next to the submit button. */
  .ns-search-toggle { display: none; }
  .ns-hamburger { display: none; }
  .ns-header-inner { gap: 24px; }
  .ns-footer-grid { grid-template-columns: repeat(4, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ns-section { padding: 52px 0; }
  .ns-hero { padding: 96px 0; }
  .ns-hero h1 { font-size: 3rem; }
  .ns-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .ns-footer-bottom { flex-direction: row; justify-content: space-between; }
  .woocommerce .ns-shop-layout--sidebar { grid-template-columns: 260px 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 240px; float: left; margin-bottom: 0; }
  .woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 264px); float: right; }
}

@media (min-width: 1200px) {
  .woocommerce .ns-shop-layout--sidebar { grid-template-columns: 280px 1fr; gap: 32px; }
}

/* ==========================================================================
   Safety net — classic checkout order row
   --------------------------------------------------------------------------
   The full styling of the order summary (three columns: thumbnail |
   title + unit price + attributes | line total) lives in
   assets/css/checkout.css, which is only loaded on the cart / checkout pages.

   The few rules below repeat the bare minimum so that, even if that file is
   stale, blocked or not yet uploaded, the order row still renders as
   "small thumbnail on the left, text on the right" instead of a full-width
   image with everything running together on one line.

   They are intentionally low-specificity and identical to the values used in
   checkout.css, so when that file IS loaded it simply wins.
   ========================================================================== */
table.shop_table td.product-name {
  position: relative;
}
table.shop_table td.product-name .ns-co-thumb {
  position: relative;
  float: left;
  margin: 3px 13px 4px 0;
  line-height: 0;
}
table.shop_table td.product-name .ns-co-thumb img {
  display: block;
  width: 56px;
  height: 56px;
  max-width: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ns-border);
  background: #fafafa;
}
table.shop_table td.product-name .ns-co-thumb__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
table.shop_table td.product-name .ns-co-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
table.shop_table td.product-name .ns-co-price {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
}
table.shop_table td.product-name::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 600px) {
  table.shop_table td.product-name .ns-co-thumb { margin-right: 11px; }
  table.shop_table td.product-name .ns-co-thumb img {
    width: 48px; height: 48px; max-width: 48px;
  }
}