/*
Theme Name: XenonZcar Store
Theme URI: https://xenonzcar.com/store/
Author: XenonZcar
Author URI: https://xenonzcar.com/
Description: Store theme that uses the main XenonZcar.com header, menu, footer and styles (/assets/components and /assets/css/site.css), so the store matches the rest of the site.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.0
Tested up to: 7.1
WC requires at least: 8.0
WC tested up to: 10.4
License: GPLv2 or later
Text Domain: xenonzcar
*/

/* Main site colors: nav #1e3a8a, buttons #1e40af (hover #2563eb), links #2563eb, page #f3f4f6 */

/* ---------- Layout ---------- */
.xzs-wrap { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.xzs-main { padding-top: 1.5rem; padding-bottom: .5rem; }
.xzs-card {
  background: #fff; border-radius: .5rem; padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
@media (max-width: 640px) { .xzs-card { padding: 1rem; } .xzs-main { padding-top: 1rem; } }

.xzs-skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000; width: auto; height: auto; margin: 0; clip: auto;
  overflow: visible; white-space: normal; padding: .5rem 1rem; background: #fff; color: #1e3a8a; border-radius: .375rem;
}

/* Fallback menu buttons (only used if the main site's menu file can't be found) */
.xzs-fallback-btn {
  display: inline-block; margin: .5rem .25rem 0 0; padding: .4rem .6rem; border-radius: .375rem;
  border: 1px solid #3b5bdb; background: #1e40af; color: #fff; font-weight: 500;
}

/* ---------- Store bar ---------- */
.xzs-bar { background: #fff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.xzs-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.xzs-brand { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: #1e3a8a; white-space: nowrap; }
.xzs-brand:hover { color: #2563eb; }

.xzs-search { display: flex; flex: 1 1 18rem; max-width: 36rem; order: 2; }
.xzs-search input {
  flex: 1; min-width: 0; padding: .5rem .75rem; background: #fff;
  border: 1px solid #d1d5db; border-right: 0; border-radius: .375rem 0 0 .375rem;
}
.xzs-search input:focus { outline: 2px solid #60a5fa; outline-offset: -1px; }
.xzs-search button {
  padding: .5rem .9rem; font-weight: 600; color: #fff; background: #1e40af;
  border: 1px solid #1e40af; border-radius: 0 .375rem .375rem 0;
}
.xzs-search button:hover { background: #2563eb; }

.xzs-account { display: flex; gap: .5rem; margin-left: auto; order: 1; }
.xzs-account a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; font-weight: 500;
  color: #1f2937; background: #fff; border: 1px solid #d1d5db; border-radius: .375rem;
}
.xzs-account a:hover { background: #dbeafe; border-color: #93c5fd; }
.xzs-count {
  display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
  font-size: .75rem; line-height: 1.35rem; font-weight: 700; color: #fff; background: #1e40af;
}
@media (max-width: 480px) {  /* keep name, Account and Cart on one row on phones */
  .xzs-bar-inner { gap: .6rem .5rem; }
  .xzs-brand { font-size: 1.05rem; }
  .xzs-account { gap: .35rem; }
  .xzs-account a { padding: .35rem .55rem; font-size: .9rem; }
}
@media (min-width: 768px) {
  .xzs-search { order: 1; }
  .xzs-account { order: 2; }
}

/* Category row: scrolls sideways on phones, wraps on wide screens */
.xzs-cats { border-top: 1px solid #e5e7eb; }
.xzs-cats ul { display: flex; gap: .25rem; margin: 0; padding: .5rem 0; overflow-x: auto; scrollbar-width: thin; }
.xzs-cats a { display: block; white-space: nowrap; padding: .35rem .8rem; border-radius: 999px; color: #1e3a8a; font-weight: 500; }
.xzs-cats a:hover, .xzs-cats .current > a, .xzs-cats .current-menu-item > a { background: #dbeafe; }
.xzs-cats .current > a, .xzs-cats .current-menu-item > a { font-weight: 700; }
@media (min-width: 1024px) { .xzs-cats ul { flex-wrap: wrap; overflow: visible; } }

/* ---------- Text ---------- */
.xzs-main h1, .xzs-main .xzs-title, .xzs-main .page-title, .woocommerce div.product .product_title {
  margin: 0 0 .75rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #111827;
}
.xzs-main h2 { margin: 1.5rem 0 .75rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; }
.xzs-main h3 { margin: 1.25rem 0 .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.xzs-main p { margin: 0 0 1rem; }
@media (max-width: 640px) {
  .xzs-main h1, .xzs-main .xzs-title, .xzs-main .page-title, .woocommerce div.product .product_title { font-size: 1.5rem; line-height: 2rem; }
  .xzs-main h2 { font-size: 1.25rem; line-height: 1.75rem; }
}
.xzs-main a, .xzs-help a { color: #2563eb; }
.xzs-main a:hover, .xzs-help a:hover { color: #1e40af; text-decoration: underline; }
.xzs-main a.xzs-btn, .xzs-main a.xzs-btn:hover { color: #fff; text-decoration: none; }

/* Bullets and numbers inside descriptions and pages (the site styles remove them by default) */
:where(.xzs-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .term-description) ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
:where(.xzs-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .term-description) ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
:where(.xzs-content, .woocommerce-Tabs-panel) img { display: inline-block; }
:where(.xzs-content, .woocommerce-Tabs-panel) table { margin: 0 0 1rem; }
:where(.xzs-content, .woocommerce-Tabs-panel) :where(td, th) { border: 1px solid #e5e7eb; padding: .4rem .6rem; }

.xzs-intro { margin-bottom: 1.25rem; }
.xzs-intro p { max-width: 48rem; color: #4b5563; }

/* ---------- Form fields (low priority so WooCommerce's checkout styles still win) ---------- */
:where(.xzs-main) :where(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password],
  input[type=search], input[type=url], select, textarea) {
  max-width: 100%; padding: .5rem .75rem; background: #fff; border: 1px solid #d1d5db; border-radius: .375rem;
}
:where(.xzs-main) :where(input, select, textarea):focus { outline: 2px solid #3b82f6; outline-offset: 0; border-color: #3b82f6; }

/* ---------- Buttons ---------- */
.xzs-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button:not(.is-link), .wp-block-button__link, .wp-element-button {
  display: inline-block; padding: .6rem 1.1rem; border-radius: .375rem; border: 1px solid #3b5bdb;
  background: #1e40af; color: #fff; font-weight: 600; line-height: 1.25; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: background-color .15s, border-color .15s;
}
.xzs-btn:hover, .xzs-btn:focus-visible,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover, .wp-block-button__link:hover, .wp-element-button:hover {
  background: #2563eb; border-color: #60a5fa; color: #fff; text-decoration: none;
}
.woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce a.button.disabled,
.woocommerce button.button.alt:disabled, .woocommerce button.button.alt.disabled {
  background: #1e40af; color: #fff; opacity: .55;
}
.xzs-btn-light { background: #fff; color: #1e40af !important; border-color: #93c5fd; margin-left: .5rem; }
.xzs-btn-light:hover { background: #dbeafe; color: #1e3a8a !important; }

/* ---------- Notices, breadcrumb, badges ---------- */
.woocommerce .woocommerce-breadcrumb { margin: 0 0 1rem; font-size: .875rem; color: #6b7280; }
.woocommerce .woocommerce-breadcrumb a { color: #2563eb; }
.woocommerce-message, .woocommerce-info { border-top-color: #1e40af; }
.woocommerce-message::before, .woocommerce-info::before { color: #1e40af; }
.woocommerce span.onsale {
  min-width: 0; min-height: 0; padding: .3rem .6rem; margin: 0; line-height: 1.2; font-size: .75rem;
  border-radius: .375rem; background: #1e40af; top: .5rem; left: .5rem; right: auto;
}
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce div.product span.onsale { z-index: 9; }

/* ---------- Product and category grid ---------- */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.5rem; padding: 0;
}
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; } }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  position: relative; display: flex; flex-direction: column;
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
  padding: .75rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; transition: box-shadow .15s, border-color .15s;
}
.woocommerce ul.products li.product:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(30,64,175,.12); }
.woocommerce ul.products li.product > a:first-child { flex: 1 1 auto; display: block; color: inherit; text-decoration: none; }
.woocommerce ul.products li.product a img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 0 .75rem; background: #f9fafb; border-radius: .375rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  padding: 0; margin: 0 0 .4rem; font-size: 1rem; line-height: 1.35; font-weight: 600; color: #111827;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:hover .woocommerce-loop-category__title { color: #1e40af; }
.woocommerce ul.products li.product .price { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: #1e3a8a; }
.woocommerce ul.products li.product .price del { color: #6b7280; font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { display: block; margin: .25rem 0 0; text-align: center; }
.woocommerce ul.products li.product .added_to_cart { display: block; margin-top: .4rem; text-align: center; font-size: .875rem; }
.woocommerce ul.products li.product-category mark.count { background: none; color: #6b7280; font-weight: 400; }
@media (max-width: 400px) {
  .woocommerce ul.products li.product { padding: .5rem; }
  .woocommerce ul.products li.product .button { padding: .55rem .5rem; font-size: .875rem; }
}

/* Count and sort row */
.woocommerce .woocommerce-result-count { margin: 0 0 1rem; font-size: .875rem; color: #6b7280; }
.woocommerce .woocommerce-ordering { margin: 0 0 1rem; }
.woocommerce .woocommerce-ordering select { padding: .4rem .6rem; border: 1px solid #d1d5db; border-radius: .375rem; background: #fff; }

/* Page numbers */
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 .2rem; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  padding: .5rem .8rem; border: 1px solid #d1d5db; border-radius: .375rem; color: #1e3a8a;
}
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: #1e40af; border-color: #1e40af; color: #fff; }

/* ---------- Single product ---------- */
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.5rem; font-weight: 700; color: #1e3a8a; }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 1.1rem; font-weight: 400; color: #6b7280; opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; }
/* Photos pasted into the short description sit side by side instead of a long stack above Add to cart */
.woocommerce-product-details__short-description img {
  display: inline-block; width: calc(50% - .6rem); max-height: 14rem; object-fit: cover;
  margin: 0 .25rem .5rem 0; border-radius: .375rem; vertical-align: top;
}
.woocommerce div.product form.cart { margin: 1.25rem 0; }
.woocommerce div.product form.cart .button { padding: .75rem 1.5rem; font-size: 1rem; }
.woocommerce .quantity .qty { width: 4.5rem; padding: .6rem .4rem; border: 1px solid #d1d5db; border-radius: .375rem; }
.woocommerce div.product form.cart .variations select { min-width: 12rem; }
.woocommerce div.product .product_meta { font-size: .875rem; color: #6b7280; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .25rem; }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 22%; float: none; }
.woocommerce div.product div.images .flex-control-thumbs li img { border-radius: .25rem; border: 1px solid #e5e7eb; }
.woocommerce div.product div.images img { border-radius: .375rem; }

/* Description / Additional information tabs */
.woocommerce div.product .woocommerce-tabs { clear: both; padding-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { margin: 0; padding: 0; border-bottom: 1px solid #e5e7eb; overflow: visible; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 .25rem -1px 0; padding: 0; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .375rem .375rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .6rem 1rem; font-weight: 600; color: #374151; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #1e3a8a; }
.woocommerce div.product .woocommerce-tabs .panel { margin: 0 0 1.5rem; padding-top: 1rem; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; font-size: 1.25rem; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: .5rem .75rem; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 1.5rem; }

/* ---------- Cart, checkout, account ---------- */
.woocommerce table.shop_table { border-radius: .5rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .5rem .75rem; border-radius: .375rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #dbeafe; font-weight: 700; }

/* ---------- Help section ---------- */
.xzs-help { margin-top: 1.5rem; }
.xzs-help-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .xzs-help-grid { grid-template-columns: 2fr 1fr 1fr; } }
.xzs-help h2 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; color: #1e3a8a; }
.xzs-help p { margin: 0; }
.xzs-help li { margin: .25rem 0; }

/* Plain post lists (index.php) */
.xzs-list > li { padding: 1rem 0; border-bottom: 1px solid #e5e7eb; }
.xzs-list > li h2 { margin: 0 0 .25rem; font-size: 1.25rem; }