/*
Theme Name: Styfits V4
Theme URI: https://styfits.com
Author: Styfits
Author URI: https://styfits.com
Description: Custom luxury handbags e-commerce theme for STYFITS Haute Maroquinerie, built on WooCommerce (Playfair Display + Plus Jakarta Sans, sharp-edged high-fashion aesthetic).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: styfits-v4
*/

/* Base styles are handled by Tailwind CSS (CDN) enqueued in functions.php.
   The rules below are the small custom additions from the original design
   that Tailwind's utility classes cannot express. */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* Hero carousel & testimonial slider: a flex track that shifts via transform
   so exactly one slide is visible at a time inside its overflow-hidden viewport. */
.hero-track,
.reviews-track {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reviews-track {
  transition-duration: 0.5s;
}

/* Product card gallery slider (Trending / Editor's Choice grids). */
.product-card-track {
  transition: transform 0.4s ease;
}

/* Main product image hover-zoom (single product page). */
.product-zoom-image {
  cursor: zoom-in;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.drawer-backdrop {
  background-color: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(4px);
}

/* Keep the sticky nav below the admin bar for logged-in users. */
body.admin-bar nav.sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar nav.sticky {
    top: 46px;
  }
}

/* ---------------------------------------------------------------------
   WooCommerce reskin: the product-card price markup, and the default
   Shop/Cart/Checkout/My Account pages bridged in via woocommerce.php.
   --------------------------------------------------------------------- */

.price {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.price del {
  color: #747878;
  font-size: 13px;
  font-weight: 400;
  text-decoration: line-through;
  opacity: 1;
  margin-right: 0.4em;
}

.price ins {
  color: #1a1c1c;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* Notices (added-to-cart, coupon applied/invalid, item removed, etc.). Fully
   redeclared — not just color tweaks — because WooCommerce's own bundled
   stylesheet (still loaded) reserves left padding for its own icon font;
   overriding only some properties left its icon overlapping the message text. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
  position: relative;
  display: block;
  background: #f4f3f2;
  color: #1a1c1c;
  border: 1px solid #e3e2e1;
  border-top: none;
  border-radius: 0.5rem;
  list-style: none;
  padding: 1em 1.5em 1em 3.25em;
  margin: 0 0 1.5em;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-noreviews::before {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 1em;
  left: 1.15em;
  content: 'info';
  color: #444748;
}

.woocommerce-message {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.woocommerce-message::before {
  content: 'check_circle';
  color: #059669;
}

.woocommerce-error {
  background: #fef2f2;
  border-color: #fecaca;
}
.woocommerce-error::before {
  content: 'error';
  color: #dc2626;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.woocommerce-message .button,
.woocommerce-message .wc-forward,
.woocommerce-error .button,
.woocommerce-error .wc-forward {
  float: none;
  display: inline-block;
  margin-left: 0.75em;
}

.woocommerce-content .button,
.woocommerce-content input.button,
.woocommerce-content .checkout-button {
  background: #000000;
  color: #ffffff;
  border-radius: 0.375rem;
  border: none;
  padding: 0.75rem 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background-color 0.2s ease;
}

.woocommerce-content .button:hover,
.woocommerce-content input.button:hover,
.woocommerce-content .checkout-button:hover {
  background: #725b38;
  color: #ffffff;
}

.woocommerce-content table.shop_table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-content table.shop_table th,
.woocommerce-content table.shop_table td {
  border: 1px solid #e3e2e1;
  padding: 0.75rem 1rem;
}

.woocommerce-content .quantity .qty {
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: 4rem;
}

/* Our custom quantity steppers (cart page, Quick View modal, single product
   page) always pair a number input with our own +/- buttons, so the native
   up/down spinner is redundant — and left unhidden, WebKit reserves space
   for it on the right, which visually pushes the centered number left. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce-content form.checkout input.input-text,
.woocommerce-content form.checkout select {
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  background: #ffffff;
}

.woocommerce-content form.checkout input.input-text:focus,
.woocommerce-content form.checkout select:focus {
  outline: none;
  border-color: #000000;
}

/* Checkout field rows (woocommerce_form_field() output — .form-row wraps
   every field, spacing/labels aren't otherwise styled by our Tailwind build
   since this markup comes straight from WooCommerce, not our own templates). */
.woocommerce-content .form-row {
  margin: 0 0 1rem;
}

/* WooCommerce's own stylesheet gives .form-row-first/.form-row-last a hard
   width:47% (sized for its own float-based 2-column layout). Inside our CSS
   Grid that shrinks them to ~47% of a grid cell (~23% of the row) — the
   misaligned, ragged-looking fields. Selector specificity here deliberately
   matches/exceeds theirs (.woocommerce form .form-row-first) so this wins. */
.woocommerce-content form.checkout .form-row-first,
.woocommerce-content form.checkout .form-row-last {
  width: 100%;
  float: none;
}

.woocommerce-content form.checkout .form-row-wide {
  grid-column: 1 / -1;
}

/* Requested: the Billing Address box always shows two fields per row.
   WooCommerce marks most address fields (company, address_1, city, state,
   postcode...) form-row-wide, which the rule above spans across both grid
   columns — override that back to a normal single-column placement, scoped
   to just the Billing box, so its fields pair up two-per-row uniformly. */
.woocommerce-content form.checkout .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper .form-row-wide {
  grid-column: auto;
}

/* Email and Phone (Contact box) are both individually marked form-row-wide by
   WooCommerce, so the rule above was spanning each across both grid columns —
   they stacked as two full-width rows instead of sitting side by side,
   leaving the box looking oddly tall/padded compared to its neighbours. */
.woocommerce-content form.checkout .woocommerce-contact-fields__field-wrapper .form-row-wide {
  grid-column: auto;
}

/* WooCommerce's own CSS sets #payment{background:rgba(129,110,153,.14)} via
   an ID selector, which beats our bg-surface-container-low utility class
   (ID specificity always wins over classes) — the Payment box would
   otherwise show a purple-tinted background unlike every other checkout
   box. Match the same surface color those boxes use. */
.woocommerce-content #payment {
  background-color: rgb(244 243 242);
  border-radius: 0.5rem;
}

.woocommerce-content #payment div.payment_box {
  background-color: rgb(244 243 242);
  border: 1px solid #e3e2e1;
}

.woocommerce-content .form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444748;
}

.woocommerce-content .form-row label.checkbox,
.woocommerce-content .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 13px;
  color: #1a1c1c;
}

.woocommerce-content .form-row .required {
  color: #ba1a1a;
  text-decoration: none;
}

.woocommerce-content .form-row .optional {
  color: #747878;
  font-weight: 400;
  text-transform: none;
}

.woocommerce-content .select2-container .select2-selection--single {
  height: auto;
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  padding: 0.6rem 0.75rem;
}

.woocommerce-content .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  font-size: 14px;
}

.woocommerce-content .select2-container .select2-selection__arrow {
  height: 100%;
}

/* Shipping method list inside the Order Summary box. */
.woocommerce-content ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-content ul#shipping_method li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

/* Terms & conditions checkbox. */
.woocommerce-content .woocommerce-terms-and-conditions-wrapper {
  margin-top: 1rem;
  font-size: 13px;
  color: #444748;
}

.woocommerce-content .woocommerce-terms-and-conditions-wrapper .form-row {
  margin-bottom: 0;
}

/* WooCommerce's own add-to-cart.js injects a "View cart" link straight after
   every AJAX add-to-cart button (add-to-cart.js AddToCartHandler.updateButton).
   Our own toast notification already confirms the add, sitewide — hide this
   sitewide instead of touching plugin JS. */
.added_to_cart.wc-forward {
  display: none;
}

/* Shop page: dual-handle price slider. Two overlaid range inputs; the track
   itself ignores pointer events so only the thumbs are draggable. */
.price-range-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-range-input::-webkit-slider-runnable-track {
  background: transparent;
  height: 24px;
}

.price-range-input::-moz-range-track {
  background: transparent;
  height: 24px;
}

.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 9999px;
  background: #725b38;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: grab;
}

.price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #725b38;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: grab;
}

/* Shop pagination (paginate_links output). */
.shop-page-link .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: #1a1c1c;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.shop-page-link a.page-numbers:hover,
.shop-page-link .page-numbers.current {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* Header menu dropdown (sub-items of e.g. Shop -> product categories). */
.site-nav > li {
  position: relative;
}

.site-nav > li.menu-item-has-children > a::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  vertical-align: middle;
  margin-left: 2px;
  text-transform: none;
  letter-spacing: normal;
}

.site-nav .site-subnav {
  position: absolute;
  left: -1rem;
  top: 100%;
  min-width: 13rem;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e3e2e1;
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}

.site-nav > li:hover > .site-subnav,
.site-nav > li:focus-within > .site-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   Mobile responsiveness
   --------------------------------------------------------------------- */

/* WordPress's admin bar scrolls away on phones (<= 600px), so the sticky nav
   must sit at the very top there instead of below a 46px gap. */
@media screen and (max-width: 600px) {
  body.admin-bar nav.sticky {
    top: 0;
  }
}

/* Page/section titles use a 40px display size that is too large on phones. */
@media (max-width: 640px) {
  .text-headline-lg {
    font-size: 30px;
    line-height: 38px;
  }
}

/* Logos and small header thumbnails. WooCommerce's stylesheet sets
   `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }` on
   every shop/cart/checkout/account page, which beats Tailwind's single-class
   height utilities and blew the logo up to its natural 690px height there.
   These selectors are more specific, so the header/footer look identical on
   every page. */
body img.site-logo {
  width: auto;
  max-width: none;
  display: block;
}

body img.site-logo--header {
  height: 44px;
}

body img.site-logo--drawer {
  height: 36px;
}

body img.site-logo--footer {
  height: 64px;
}

@media (min-width: 768px) {
  body img.site-logo--header {
    height: 48px;
  }
}

body img.drawer-thumb,
body img.live-thumb {
  width: 3rem;
  height: 3rem;
  max-width: none;
}

/* Hero slides: wide banner by default; the optional mobile banner (product
   field "Hero Banner Image (Mobile)") replaces it on phones. */
.hero-slide {
  background-image: var(--hero-bg);
}

@media (max-width: 767px) {
  .hero-slide {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }
}

/* ==========================================================================
   Customer panel (woocommerce/myaccount/*) — form fields, address form,
   order filter chips. Layout/colours come from Tailwind classes in the
   templates; these cover what Tailwind can't reach (WooCommerce-generated
   fields, select2) and must beat WooCommerce's own .woocommerce form styles.
   ========================================================================== */
.account-panel .account-label,
.account-login .account-label,
.account-panel .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444748;
}

.account-panel .account-label .required,
.account-login .account-label .required,
.account-panel .form-row .required {
  color: #ba1a1a;
  text-decoration: none;
  border: 0;
}

.account-panel .account-hint {
  margin-top: 0.4rem;
  font-size: 12px;
  color: #747878;
}

.account-panel input.account-input,
.account-login input.account-input,
.account-panel .form-row input.input-text,
.account-panel .form-row select,
.account-panel .form-row textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  padding: 0.75rem 0.9rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1c1c;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-panel input.account-input:focus,
.account-login input.account-input:focus,
.account-panel .form-row input.input-text:focus,
.account-panel .form-row select:focus,
.account-panel .form-row textarea:focus {
  outline: none;
  border-color: #725b38;
  box-shadow: 0 0 0 3px rgba(114, 91, 56, 0.15);
}

.account-panel input.pr-11,
.account-login input.pr-11 {
  padding-right: 2.75rem;
}

/* Address form: two columns on tablet/desktop, one on phones. */
.account-panel .account-address-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.25rem;
}

@media (min-width: 640px) {
  .account-panel .account-address-fields {
    grid-template-columns: 1fr 1fr;
  }

  .account-panel .account-address-fields .form-row-wide {
    grid-column: 1 / -1;
  }
}

.account-panel .account-address-fields .form-row {
  float: none;
  width: auto;
  margin: 0 0 1.25rem;
  padding: 0;
}

.account-panel .account-address-fields .form-row .select2-container {
  width: 100% !important;
}

.account-panel .select2-container .select2-selection--single {
  height: auto;
  border: 1px solid #e3e2e1;
  border-radius: 0.375rem;
  padding: 0.55rem 0.5rem;
}

.account-panel .select2-container .select2-selection__rendered {
  line-height: 1.4;
  padding-left: 0.4rem;
  font-size: 14px;
}

.account-panel .select2-container .select2-selection__arrow {
  height: 100%;
}

/* Order filter chips (My Orders). */
.account-order-chip {
  border-color: #e3e2e1;
  background: #ffffff;
  color: #444748;
}

.account-order-chip:hover {
  border-color: #000000;
  color: #000000;
}

.account-order-chip.is-active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* WooCommerce's layout stylesheet floats the account nav (30%) and content
   (68%) side by side on desktop; the panel stacks them (tabs above content). */
.woocommerce-account .account-panel .woocommerce-MyAccount-navigation,
.woocommerce-account .account-panel .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

.woocommerce-account .account-panel .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .account-panel .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .account-panel .woocommerce-MyAccount-navigation li a {
  text-decoration: none;
}