/*
Theme Name: Myshop NFC
Theme URI: https://myshop-nfc.com
Author: Myshop NFC
Description: Thème WooCommerce sur-mesure, sobre et orienté performance, pour la boutique Myshop NFC (étiquettes, cartes, tags, lecteurs et solutions NFC).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: shopnfc
Requires Plugins: woocommerce
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --c-bg:#ffffff;
  --c-bg-alt:#f8f7f5;
  --c-text:#1c1a19;
  --c-text-muted:#65605c;
  --c-border:#e6e2dd;
  --c-accent:#7c1c2e;
  --c-accent-dark:#5c1220;
  --c-accent-contrast:#ffffff;
  --c-success:#1a7a3c;
  --c-focus:#1a56db;
  --radius:3px;
  --radius-lg:14px;
  --gap:1.5rem;
  --container:1240px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Oswald","Arial Narrow",Impact,var(--font-sans);
  --tracking-wide:.08em;
  --shadow-sm:0 1px 2px rgba(20,15,12,.05),0 1px 1px rgba(20,15,12,.04);
  --shadow-md:0 10px 24px -12px rgba(20,15,12,.16);
  --shadow-lg:0 24px 48px -16px rgba(20,15,12,.22);
}

/* Oswald (self-hosted, latin subset only, variable font covering weights 500-700 in one file) -
   used for headings only, never body text, so this single ~21KB request is the only webfont cost
   on the whole site. font-display:swap avoids blocking text render while it loads. */
@font-face{
  font-family:"Oswald";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("assets/fonts/oswald-variable-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}

/* ==========================================================================
   1. Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--c-text);background:var(--c-bg);line-height:1.55;font-size:16px}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0 0 1rem}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ==========================================================================
   2. Accessibility helpers
   ========================================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:0;top:-999px;background:var(--c-accent);color:#fff;padding:.75rem 1.25rem;z-index:10000;border-radius:0 0 var(--radius) 0}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container{max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
.section{padding-block:clamp(2.5rem,4vw,4.5rem)}
.section-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;letter-spacing:.01em;margin-bottom:.6rem}
.section-sub{color:var(--c-text-muted);margin-bottom:2.5rem;max-width:60ch}
.grid{display:grid;gap:var(--gap)}

/* Small tracked uppercase label used above a display heading (hero, section intros) - a quiet
   "premium editorial" cue that costs nothing extra (system font, no images). */
.eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-accent);margin-bottom:.85rem}

/* ==========================================================================
   4. Top bar & header
   ========================================================================== */
.top-bar{background:#141211;color:#cfcac5;font-size:.75rem;letter-spacing:.02em}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.55rem;flex-wrap:wrap}
.top-bar a{color:#fff}
.top-bar a:hover{text-decoration:underline}
.top-bar .top-bar-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.top-bar .top-bar-msg{display:none}}

.site-header{border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-sm);position:sticky;top:0;background:var(--c-bg);z-index:100}
.site-header .container{display:flex;align-items:center;gap:1.5rem;padding-block:1.1rem}
.site-branding{margin-right:auto;display:flex;align-items:center}
.site-branding a{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.01em;color:var(--c-text)}
.site-branding .brand-accent{color:var(--c-accent)}

.main-nav{display:none}
.main-nav ul{display:flex;gap:2rem}
.main-nav a{font-weight:600;font-size:.875rem;letter-spacing:.02em;padding:.5rem 0;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--c-accent);transition:right .2s ease}
.main-nav a:hover{color:var(--c-accent)}
.main-nav a:hover::after{right:0}
.main-nav li.menu-item-has-children{position:relative}
.main-nav .sub-menu{display:none;position:absolute;left:0;top:100%;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);min-width:260px;padding:.5rem;box-shadow:var(--shadow-md)}
.main-nav li.menu-item-has-children:hover .sub-menu,
.main-nav li.menu-item-has-children:focus-within .sub-menu,
.main-nav li.menu-item-has-children.is-open .sub-menu{display:block}
.main-nav .sub-menu a{display:block;padding:.5rem .75rem;border-radius:var(--radius);font-weight:500}
.main-nav .sub-menu a:hover{background:var(--c-bg-alt)}

/* "Catégories" mega-menu trigger: keeps the top nav to just 2 items so it never wraps, no matter
   how many/long the product categories are. */
.main-nav .mega-chevron{display:inline-flex;width:12px;height:12px;margin-left:.2rem;vertical-align:-1px;transition:transform .15s ease}
.main-nav .mega-chevron svg{width:100%;height:100%;transform:rotate(90deg)}
.main-nav li.mega:hover .mega-chevron,
.main-nav li.mega:focus-within .mega-chevron{transform:rotate(180deg)}
.main-nav .mega-panel{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem;width:min(920px,92vw);z-index:200}
.main-nav li.mega:hover .mega-panel,
.main-nav li.mega:focus-within .mega-panel{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem 2rem}
.mega-col-title{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--c-border);color:var(--c-text)}
.mega-col-title:hover{color:var(--c-accent)}
.mega-col ul{display:flex;flex-direction:column;gap:.45rem}
.mega-col ul a{display:block;font-size:.8438rem;font-weight:500;color:var(--c-text-muted)}
.mega-col ul a:hover{color:var(--c-accent)}

.header-actions{display:flex;align-items:center;gap:.25rem}
.header-actions a{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.875rem;min-height:44px;min-width:44px;justify-content:center;padding:0 .35rem;position:relative}
.header-actions svg{width:22px;height:22px;flex:none}
.cart-count{background:var(--c-accent);color:#fff;border-radius:999px;font-size:.6875rem;min-width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem}

.menu-toggle{background:none;border:1px solid var(--c-border);border-radius:var(--radius);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mobile-nav{border-top:1px solid var(--c-border);max-height:calc(100dvh - 110px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-nav.is-open{display:block}
.mobile-nav:not(.is-open){display:none}
.mobile-nav ul{padding:.5rem 0}
.mobile-nav > ul > li{border-bottom:1px solid var(--c-border)}
.mobile-nav a{display:block;padding:.85rem 1.25rem;font-weight:600;min-height:44px}
.mobile-nav .sub-menu a{padding-left:2.25rem;font-weight:500;color:var(--c-text-muted)}
.mobile-nav .mobile-search{display:block;padding:1rem 1.25rem}
.mobile-nav .mobile-search .search-form{display:block;max-width:none}

.search-form{position:relative;flex:1;max-width:360px;display:none}
.search-form input[type=search]{width:100%;padding:.65rem 2.75rem .65rem .9rem;border:1px solid var(--c-border);border-radius:999px;background:var(--c-bg-alt);min-height:44px}
.search-form button{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);background:none;border:0;padding:.5rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center}

/* Breakpoint where the header switches from burger+mobile-nav to the inline desktop nav.
   Declared last (highest source-order among equal-specificity .menu-toggle/.main-nav rules)
   so it reliably wins the cascade at >=960px regardless of what precedes it above. */
@media (min-width:960px){
  .main-nav{display:block}
  .menu-toggle,.mobile-nav{display:none}
  .header-actions{gap:.5rem}
}
@media (min-width:1180px){.site-header > .container > .search-form{display:block}}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border-radius:var(--radius);font-weight:600;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-accent,button.button,input.button,.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;min-height:44px;border:1px solid transparent;
  background:var(--c-accent);color:var(--c-accent-contrast);border-color:var(--c-accent);border-radius:var(--radius);
  font-weight:600;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease
}
.btn-accent:hover,button.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.single_add_to_cart_button:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn-outline:hover{border-color:var(--c-text);box-shadow:var(--shadow-sm)}

/* ==========================================================================
   6. Home: hero
   ========================================================================== */
.hero{background:radial-gradient(120% 140% at 15% 0%,#fbf9f7 0%,var(--c-bg-alt) 60%)}
.hero .container{display:grid;gap:2.5rem;padding-block:clamp(3rem,6vw,5.5rem);align-items:center}
@media (min-width:860px){.hero .container{grid-template-columns:1.1fr .9fr}}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.85rem,3.4vw,2.9rem);letter-spacing:.01em;line-height:1.12;margin-bottom:1.1rem}
.hero p{color:var(--c-text-muted);font-size:1.0625rem;max-width:52ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{min-height:44px}
@media (max-width:480px){.hero-actions .btn{flex:1 1 100%}}
.hero-art{background:linear-gradient(165deg,#ffffff 0%,var(--c-bg-alt) 100%);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover}

/* Trust strip */
.trust-strip{border-bottom:1px solid var(--c-border)}
.trust-strip ul{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;padding-block:1.5rem}
@media (min-width:720px){.trust-strip ul{grid-template-columns:repeat(4,1fr)}}
.trust-strip li{display:flex;align-items:center;gap:.7rem;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--c-text-muted)}
.trust-strip svg{width:22px;height:22px;flex:none;color:var(--c-accent)}

.why-grid{row-gap:2.75rem}
.why-grid > div{text-align:center;max-width:34ch;margin-inline:auto}
.why-grid h3{font-family:var(--font-display);font-weight:600;font-size:1.125rem;margin:0 0 .5rem}
.why-grid .section-sub{margin-bottom:0}

/* Category grid */
.cat-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:280px){.cat-grid{grid-template-columns:1fr}}
@media (min-width:640px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
.cat-card{border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.35rem .9rem;text-align:center;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.cat-card:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.cat-card h3{font-size:.8125rem;font-weight:600;letter-spacing:.01em;margin:0;line-height:1.35}

/* .cat-icon is a <span> wrapping a raw inline <svg> with no width/height attributes of its own;
   the global `svg{height:auto}` reset otherwise lets it balloon to its block container's full
   width. Size the SPAN as a small fixed box (inline-flex so width/height actually apply, unlike
   on a plain inline element) and make the SVG fill that box - this is the one place that must
   target the svg directly rather than relying on the .cat-icon width/height alone. */
.cat-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(124,28,46,.07);margin:0 auto .9rem;color:var(--c-accent);transition:background-color .2s ease,transform .2s ease}
.cat-icon svg{width:20px;height:20px}
.cat-card:hover .cat-icon{background:var(--c-accent);color:#fff;transform:scale(1.06)}

/* ==========================================================================
   7. Products grid (WooCommerce)
   ========================================================================== */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin:0;padding:0}
@media (min-width:480px){.woocommerce ul.products{gap:1.25rem}}
@media (min-width:640px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media (min-width:960px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}}
.woocommerce ul.products li.product{list-style:none;border:1px solid var(--c-border);border-radius:10px;padding:.65rem;background:#fff;position:relative;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
.woocommerce ul.products li.product:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-2px)}
@media (min-width:480px){.woocommerce ul.products li.product{padding:1.1rem}}
.woocommerce ul.products li.product a{display:block}
.woocommerce ul.products li.product img{border-radius:6px;margin-bottom:.85rem;aspect-ratio:1/1;object-fit:contain;background:linear-gradient(165deg,#fdfcfb 0%,var(--c-bg-alt) 100%)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.8125rem;font-weight:600;margin-bottom:.35rem;line-height:1.3}
@media (min-width:480px){.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.9375rem}}
.woocommerce ul.products li.product .price{font-weight:700;color:var(--c-accent);display:block;margin-bottom:.35rem}
.woocommerce ul.products li.product .price del{color:var(--c-text-muted);font-weight:400;margin-right:.4rem}
.tier-hint{font-size:.75rem;color:var(--c-success);font-weight:600;margin-bottom:.6rem}
.min-qty-hint{font-size:.75rem;color:var(--c-text-muted);margin-bottom:.5rem}
.woocommerce ul.products li.product .button{margin-top:auto;width:100%;text-align:center;font-size:.625rem;letter-spacing:0;padding:.65rem .35rem;min-height:44px;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1180px){.woocommerce ul.products li.product .button{font-size:.6875rem;letter-spacing:.02em}}
.woocommerce span.onsale{position:absolute;top:.75rem;left:.75rem;background:var(--c-text);color:#fff;border-radius:999px;font-size:.6875rem;font-weight:700;padding:.2rem .55rem;min-height:0;min-width:0;line-height:1.4}

/* Sidebar / archive layout */
.shop-layout{display:grid;gap:2rem;align-items:start}
@media (min-width:960px){.shop-layout{grid-template-columns:250px 1fr}}
/* On mobile, show the products first and the category browser (long link list) after them -
   scanning results shouldn't require scrolling past every category/subcategory link first. */
@media (max-width:959px){
  .shop-main{order:1}
  .shop-sidebar{order:2}
}
.shop-sidebar{border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem}
.shop-sidebar h3{font-size:.75rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--c-text-muted);margin-bottom:1rem}
.shop-sidebar ul{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.5rem}
.shop-sidebar a{font-size:.9375rem;padding:.3rem 0;display:inline-block;min-height:44px;display:flex;align-items:center}
.shop-sidebar a:hover{color:var(--c-accent)}
.shop-sidebar .current-cat > a{color:var(--c-accent);font-weight:700}
.archive-header{margin-bottom:2rem}
.archive-header h1{font-family:var(--font-display);font-weight:600;font-size:1.85rem;letter-spacing:.01em;margin-bottom:.6rem}
.archive-desc{color:var(--c-text-muted);max-width:70ch}
.woocommerce-breadcrumb{font-size:.8125rem;color:var(--c-text-muted);margin-bottom:1rem}
.woocommerce-breadcrumb a:hover{color:var(--c-accent)}
.woocommerce-result-count,.woocommerce-ordering{font-size:.875rem;color:var(--c-text-muted)}
.woocommerce-ordering select{border:1px solid var(--c-border);border-radius:var(--radius);padding:.5rem;min-height:44px}
.results-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}

/* ==========================================================================
   8. Single product
   ========================================================================== */
.woocommerce div.product{display:grid;gap:2.5rem}
@media (min-width:860px){.woocommerce div.product{grid-template-columns:1fr 1fr}}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--radius-lg);border:1px solid var(--c-border);background:linear-gradient(165deg,#fdfcfb 0%,var(--c-bg-alt) 100%);aspect-ratio:1/1;object-fit:contain}
.woocommerce div.product .product_title{font-family:var(--font-display);font-weight:600;font-size:1.75rem;letter-spacing:.01em;line-height:1.2;margin-bottom:.6rem}
.woocommerce div.product p.price{font-size:1.625rem;color:var(--c-accent);font-weight:700;margin-bottom:1.1rem}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--c-text-muted);margin-bottom:1.25rem}
.min-order-note{background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:var(--radius);padding:.6rem .9rem;font-size:.875rem;margin-bottom:1.25rem}

.tier-table{width:100%;border:1px solid var(--c-border);border-radius:10px;overflow:hidden;margin-bottom:1.5rem;font-size:.875rem}
.tier-table caption{text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;padding:.85rem 1rem;background:var(--c-bg-alt);border-bottom:1px solid var(--c-border)}
.tier-table th,.tier-table td{padding:.55rem .9rem;text-align:left;border-bottom:1px solid var(--c-border)}
.tier-table tr:last-child td{border-bottom:0}
.tier-table th{background:var(--c-bg-alt);font-weight:600;color:var(--c-text-muted);text-transform:uppercase;font-size:.6875rem;letter-spacing:.04em}
.tier-table td.qty{font-weight:600}
.tier-table td.unit-price{color:var(--c-accent);font-weight:700}
.tier-table tr.is-active-tier{background:var(--c-bg-alt)}
.tier-table tr.is-active-tier td.qty::after{content:" ✓";color:var(--c-success)}

.woocommerce div.product form.cart{display:flex;gap:.75rem;align-items:stretch;flex-wrap:wrap;margin-bottom:1.5rem}
.woocommerce div.product form.cart .quantity{margin:0}
.woocommerce div.product .quantity input.qty{width:4.5rem;min-height:44px;padding:.6rem;border:1px solid var(--c-border);border-radius:var(--radius);text-align:center}
.woocommerce div.product form.cart .button{min-height:44px}
@media (max-width:480px){
  .woocommerce div.product form.cart{flex-direction:column;align-items:stretch}
  .woocommerce div.product .quantity input.qty{width:100%}
}
.product_meta{font-size:.8125rem;color:var(--c-text-muted);border-top:1px solid var(--c-border);padding-top:1rem}
.product_meta a:hover{color:var(--c-accent)}

.woocommerce-tabs{margin-top:3rem}
.woocommerce-tabs ul.tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--c-border);margin-bottom:1.5rem;flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:.75rem 1rem;font-weight:600;font-size:.8125rem;letter-spacing:.03em;text-transform:uppercase;color:var(--c-text-muted)}
.woocommerce-tabs ul.tabs li.active a{color:var(--c-accent);border-bottom:2px solid var(--c-accent)}
.woocommerce-Tabs-panel h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem}

.related.products{margin-top:3rem;border-top:1px solid var(--c-border);padding-top:2.5rem}
.related.products > h2{font-family:var(--font-display);font-weight:600;font-size:1.4rem;letter-spacing:.01em}

/* Quote-only products (services) */
.quote-only-price{font-size:1.15rem;font-weight:700;color:var(--c-text-muted)}
.quote-btn{margin-top:.5rem}

/* ==========================================================================
   9. Cart / Checkout / Account
   ========================================================================== */
.woocommerce-cart table.shop_table,.woocommerce-checkout table.shop_table{border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.woocommerce table.shop_table th{background:var(--c-bg-alt);text-align:left;padding:.75rem;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-muted)}
.woocommerce table.shop_table td{padding:.85rem .75rem;border-top:1px solid var(--c-border)}
.woocommerce-cart-form .product-thumbnail img{width:64px;border-radius:6px}
.woocommerce #content table.cart td.actions .coupon .input-text{border:1px solid var(--c-border);border-radius:var(--radius);padding:.55rem;min-height:44px}
.cart-collaterals .cart_totals{border:1px solid var(--c-border);border-radius:8px;padding:1.25rem}
.woocommerce-checkout-review-order-table{border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.woocommerce form .form-row{margin-bottom:1rem}
.woocommerce form .form-row label{display:block;margin-bottom:.35rem;font-size:.875rem;font-weight:600}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1px solid var(--c-border);border-radius:var(--radius);padding:.6rem .75rem;width:100%;min-height:44px}
.woocommerce form .form-row textarea{min-height:5.5rem}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--c-accent)}
@media (min-width:480px){
  .woocommerce form .form-row-first{width:calc(50% - .5rem);float:left;clear:both}
  .woocommerce form .form-row-last{width:calc(50% - .5rem);float:right}
  .woocommerce form .form-row-wide{clear:both}
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--c-border)}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:.85rem 1rem;font-weight:600;min-height:44px}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--c-accent)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border:1px solid var(--c-border);border-left:4px solid var(--c-accent);border-radius:var(--radius);padding:.9rem 1.1rem;background:var(--c-bg-alt);list-style:none;margin-bottom:1.5rem}
.woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

/* Any table that resists stacking (e.g. checkout review order table has no data-title labels)
   still gets a safe horizontal scroll instead of breaking the page layout. */
@media (max-width:700px){
  .woocommerce table.shop_table:not(.shop_table_responsive){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Cart & My Account order tables: stack each row into a labelled card instead of a cramped table. */
@media (max-width:700px){
  table.shop_table_responsive thead{display:none}
  table.shop_table_responsive,
  table.shop_table_responsive tbody,
  table.shop_table_responsive tr,
  table.shop_table_responsive td{display:block;width:100%}
  table.shop_table_responsive tr{border-bottom:1px solid var(--c-border);padding:.75rem 0}
  table.shop_table_responsive tr:first-child{border-top:1px solid var(--c-border)}
  table.shop_table_responsive td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0!important;padding:.4rem .75rem;text-align:right}
  table.shop_table_responsive td::before{content:attr(data-title);font-weight:600;color:var(--c-text-muted);text-align:left;font-size:.8125rem}
  table.shop_table_responsive td.product-thumbnail{justify-content:flex-start}
  table.shop_table_responsive td.product-thumbnail::before{content:none}
  table.shop_table_responsive td.product-remove{justify-content:flex-end}
  table.shop_table_responsive td.actions{display:block}
  table.shop_table_responsive td.actions::before{content:none}
}

/* Checkout: two columns on wide screens (billing/shipping form left, order summary right, sticky),
   naturally single column (stacked divs, source order) on mobile - nothing extra needed there. */
#order_review_heading{font-size:1.15rem}
@media (min-width:640px){
  .woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
}
/* wc-order-attribution-inputs is a hidden-inputs-only custom element with no visual purpose;
   unstyled custom elements default to inline and can pick up stray height, so hide it outright. */
wc-order-attribution-inputs{display:none}

/* Two floated columns instead of CSS Grid on purpose: grid items placed in the same cell overlap
   rather than stack, and we can't predict how many extra elements plugins/hooks inject between
   #customer_details and #order_review. Same-direction floats stack safely regardless of count. */
@media (min-width:960px){
  .woocommerce-checkout form.checkout{display:block}
  .woocommerce-checkout form.checkout::after{content:"";display:table;clear:both}
  .woocommerce-checkout form.checkout > #customer_details{float:left;width:calc(100% - 420px - 2.5rem)}
  .woocommerce-checkout form.checkout > #customer_details ~ *{float:right;width:420px;clear:right}
  .woocommerce-checkout form.checkout > #order_review{position:sticky;top:calc(1px + 4.5rem)}
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer{background:#141211;color:#a8a29c;margin-top:4rem;border-top:2px solid var(--c-accent)}
.footer-columns{display:grid;gap:2.25rem;padding-block:3.5rem;grid-template-columns:1fr}
@media (min-width:720px){.footer-columns{grid-template-columns:repeat(4,1fr)}}
.footer-columns h3{color:#fff;font-size:.75rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:1.1rem}
.footer-columns li{margin-bottom:.6rem;font-size:.875rem}
.footer-columns a:hover{color:#fff}
.footer-bottom{border-top:1px solid #2a2724;padding-block:1.25rem;font-size:.8125rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.payment-icons{display:flex;gap:.5rem;align-items:center;opacity:.85}

/* ==========================================================================
   11. Misc pages
   ========================================================================== */
.page-content{max-width:80ch}
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content,
.woocommerce-account .page-content{max-width:none}
.woocommerce-pagination ul{display:flex;gap:.4rem;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{display:inline-flex;min-width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:1px solid var(--c-border);border-radius:var(--radius)}
.woocommerce-pagination .current{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

.star-rating{color:#f5a623}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width: 768px){
   .o1-mob{order:1}
   .o2-mob{order:2}
}