/*
Theme Name: HEATSHABU Store
Description: Bright retail storefront for the HEATSHABU Timex catalogue — colour skins, dense product rows, sticky buy box.
Version: 5.2.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: heatshabu
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
/* The brand colours come in three skins (body.skin-*); ocean is the live one. */
body.skin-emerald {
  --hs-brand:        #0A8754;
  --hs-brand-dark:   #066B42;
  --hs-brand-50:     #EAF6F0;
  --hs-brand-100:    #CFEBDD;
  --hs-accent:       #FF7A30;
  --hs-accent-dark:  #E0611A;
  --hs-accent-50:    #FFF2EA;
  --hs-accent-100:   #FFDCC7;
  --hs-accent-light: #FFB68A;
  --hs-tile-1: #E4F3EB;
  --hs-tile-2: #FFEFE4;
  --hs-tile-3: #E9EFFB;
  --hs-tile-4: #FBEEF3;
}
body.skin-violet {
  --hs-brand:        #5B3FD3;
  --hs-brand-dark:   #4529AE;
  --hs-brand-50:     #F2EFFD;
  --hs-brand-100:    #E1DAFA;
  --hs-accent:       #FF8A1F;
  --hs-accent-dark:  #E57400;
  --hs-accent-50:    #FFF4E8;
  --hs-accent-100:   #FFE0BF;
  --hs-accent-light: #FFC58A;
  --hs-tile-1: #EEEAFD;
  --hs-tile-2: #FFF1E2;
  --hs-tile-3: #E5F5EF;
  --hs-tile-4: #FDEDF3;
}
/* Ocean — the chosen palette, also the fallback before body classes apply. */
:root,
body.skin-ocean {
  --hs-brand:        #0B7D8C;
  --hs-brand-dark:   #075F6B;
  --hs-brand-50:     #E7F5F7;
  --hs-brand-100:    #C7EAEE;
  --hs-accent:       #F45D48;
  --hs-accent-dark:  #D94532;
  --hs-accent-50:    #FFF0EE;
  --hs-accent-100:   #FFD6D0;
  --hs-accent-light: #FFB0A5;
  --hs-tile-1: #E3F3F5;
  --hs-tile-2: #FFEDEA;
  --hs-tile-3: #ECEFFB;
  --hs-tile-4: #F1F6E6;
}

:root {
  --hs-ink:        #1C2430;
  --hs-ink-dark:   #121821;
  --hs-ink-2:      #4A5361;
  --hs-gray:       #6B7480;
  --hs-line:       #E3E6EA;
  --hs-line-2:     #C5CBD3;
  --hs-tint:       #F4F6F8;
  --hs-tint-2:     #E8EBEF;
  --hs-bg:         #F4F5F7;
  --hs-green:      #1F7A4D;
  --hs-red:        #D23B2F;

  --f-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --pill: 999px;

  --sh-card: 0 1px 3px rgba(20, 30, 45, .08), 0 0 0 1px rgba(20, 30, 45, .05);
  --sh-pop:  0 14px 36px rgba(20, 30, 45, .16), 0 2px 6px rgba(20, 30, 45, .08);
  --sh-btn:  0 2px 6px rgba(20, 30, 45, .14);

  --wrap: 1440px;
  --gutter: clamp(16px, 2.2vw, 32px);

  /* Names the support templates use inline, mapped onto the palette. */
  --c-white: #fff;
  --c-ice: var(--hs-tint);
  --c-ice-deep: var(--hs-tint-2);
  --c-navy: var(--hs-ink);
  --c-navy-deep: var(--hs-ink-dark);
  --c-ink: var(--hs-ink);
  --c-ink-soft: var(--hs-ink-2);
  --c-line: var(--hs-line);
  --c-line-soft: #EEF0F3;
  --c-ok: var(--hs-green);
  --f-display: var(--f-ui);
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .9375rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  --t-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-sm: var(--r-1);
  --r: var(--r-2);
  --r-lg: var(--r-3);
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }

body {
  margin: 0;
  background: #fff;
  color: var(--hs-ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.2; color: var(--hs-ink); letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--hs-line); margin: 24px 0; }

:focus-visible { outline: 2px solid var(--hs-brand); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
  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 {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--hs-brand); color: #fff;
  padding: 10px 16px; border-radius: var(--r-2); font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn,
.button,
button.button,
input[type="submit"].button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 22px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn--primary,
.button.alt,
.woocommerce .button.alt,
.single_add_to_cart_button,
#place_order,
.checkout-button {
  background: var(--hs-brand);
  color: #fff !important;
}
.btn--primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
#place_order:hover,
.checkout-button:hover {
  background: var(--hs-brand-dark);
  color: #fff;
}

.btn--navy { background: var(--hs-ink); color: #fff; }
.btn--navy:hover { background: var(--hs-ink-dark); color: #fff; }

.btn--ghost,
.button:not(.alt):not(.add_to_cart_button):not(.hs-add) {
  background: #fff;
  color: var(--hs-ink);
  border-color: var(--hs-line-2);
}
.btn--ghost:hover,
.button:not(.alt):not(.add_to_cart_button):not(.hs-add):hover {
  border-color: var(--hs-ink);
  color: var(--hs-ink);
}

.btn--white { background: #fff; color: var(--hs-ink); }
.btn--white:hover { background: var(--hs-brand-50); color: var(--hs-ink); }

.btn--sm { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.btn--lg { min-height: 50px; padding: 12px 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.button.loading,
.btn.loading { opacity: .65; pointer-events: none; }

.link-u {
  text-decoration: underline;
  text-decoration-color: var(--hs-brand);
  text-underline-offset: 3px;
  font-weight: 600;
  color: var(--hs-ink);
}
.link-u:hover { color: var(--hs-brand); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 700;
  color: var(--hs-brand);
}
.link-arrow:hover { color: var(--hs-brand-dark); }
.link-arrow svg { transition: transform .15s; }
.link-arrow:hover svg { transform: translateX(2px); }

/* ============================================================
   4. SHARED PIECES
   ============================================================ */

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 0 10px;
  font-size: 13px;
  color: var(--hs-gray);
}
.crumbs a { color: var(--hs-ink-2); }
.crumbs a:hover { color: var(--hs-brand); text-decoration: underline; text-underline-offset: 2px; }
.crumbs__sep { color: var(--hs-line-2); }

/* Section heading: copper rule under a bold title, arrow link on the right */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sec-head__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hs-brand);
  margin-bottom: 6px;
}
.sec-head__title {
  position: relative;
  font-size: clamp(20px, 1.2vw + 14px, 25px);
  font-weight: 800;
  padding-left: 14px;
}
.sec-head__title::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--hs-brand);
}
.sec-head__sub { margin-top: 4px; padding-left: 14px; color: var(--hs-gray); font-size: 14px; max-width: 60ch; }
.sec-head__link {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  border-radius: var(--pill);
  border: 1px solid var(--hs-line-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--hs-ink);
}
.sec-head__link svg { display: none; }
.sec-head__link::after { content: "\2192"; }
.sec-head__link:hover { border-color: var(--hs-brand); color: var(--hs-brand); }

/* Inside the support templates the eyebrow already does the job of the rule. */
.sup-hero .sec-head__title::before,
.band .sec-head__eyebrow + .sec-head__title::before { display: none; }
.band .sec-head__eyebrow + .sec-head__title,
.band .sec-head__eyebrow ~ .sec-head__sub { padding-left: 0; }

.band { padding-block: clamp(28px, 3vw, 44px); }
.band--tight { padding-block: 24px; }
.band--ice { background: var(--hs-tint); }

/* Flags */
.flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--hs-brand);
  color: #fff;
  white-space: nowrap;
}
.flag--yellow, .flag--copper { background: var(--hs-accent); color: #fff; }
.flag--green  { background: var(--hs-green); color: #fff; }
.flag--line   { background: #fff; color: var(--hs-ink); box-shadow: inset 0 0 0 1px var(--hs-line-2); }

/* Spec chip */
.spec-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-1);
  background: var(--hs-tint);
  font-size: 12px;
  font-weight: 700;
  color: var(--hs-ink-2);
}
.spec-chip--accent { background: var(--hs-brand-50); color: var(--hs-brand-dark); }

/* Price */
.hs-price {
  display: inline-block;
  font-weight: 800;
  color: var(--hs-ink);
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* Plain WooCommerce prices that still appear (checkout, cart lines) */
.price, .amount { font-weight: 700; }
del .amount { font-weight: 400; color: var(--hs-gray); }
ins { text-decoration: none; }

/* Form controls */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], select, textarea,
.input-text {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--hs-line-2);
  border-radius: var(--r-2);
  font-size: 15px;
  color: var(--hs-ink);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus, .input-text:focus {
  outline: none;
  border-color: var(--hs-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-brand) 18%, transparent);
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C2430' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
label { font-size: 14px; font-weight: 600; }

/* Quantity stepper */
.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hs-line-2);
  border-radius: var(--pill);
  background: #fff;
  height: 42px;
  overflow: hidden;
}
.quantity .qty {
  width: 44px;
  min-height: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 800;
  -moz-appearance: textfield;
  box-shadow: none !important;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn {
  width: 38px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--hs-ink);
  background: var(--hs-tint);
}
.qty-btn:hover { background: var(--hs-tint-2); }

/* WooCommerce notices */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  background: var(--hs-tint);
  border: 1px solid var(--hs-tint-2);
  border-left: 4px solid var(--hs-brand);
  color: var(--hs-ink);
}
.woocommerce-message { background: #EEF6F1; border-color: #CFE5D8; border-left-color: var(--hs-green); }
.woocommerce-error { background: #FBEDEC; border-color: #F1CFCC; border-left-color: var(--hs-red); display: block; }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; margin-left: auto; min-height: 32px; padding: 4px 14px; font-size: 13px; }
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) { text-decoration: underline; }

/* Utilities */
.u-muted { color: var(--hs-gray); }
.u-mono-label { font-size: 12px; font-weight: 700; color: var(--hs-gray); }
.entry-content > * + * { margin-top: 1em; }
.entry-content a { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-brand); }
.entry-content h2 { font-size: 22px; margin-top: 1.6em; }
.entry-content h3 { font-size: 18px; margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .35em; }