/* =============================================================================
   SHOPIMAL — BASE LAYER
   Typography scale, buttons, forms, cards, badges.
   Matches shopimal-web-design-system.html. Build Brief §3, §6.

   Mobile-first. min-width queries only. Every value comes from tokens.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. RESET AND DOCUMENT
   -------------------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--sh-body);
  background:var(--sh-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Prices, quantities and totals must align in columns. Build Brief §3.6. */
.price,.woocommerce-Price-amount,.amount,.qty,.sh-price,.sh-price-sm,.sh-total,
.order-total,.cart-subtotal,.shipping,td.product-total,td.product-subtotal,
.woocommerce-Price-currencySymbol,input[type="number"],.sh-tabular{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY SCALE  — Build Brief §3.6
   Mobile: Display/H1/H2 x0.72, H3/H4 x0.85. Body sizes unchanged.
   -------------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,
.sh-display,.sh-h1,.sh-h2,.sh-h3,.sh-h4{
  font-family:var(--font-display);
  color:var(--sh-heading);
  margin:0 0 var(--sp-4);
}

.sh-display{ font-weight:800; font-size:37.44px; line-height:1;    letter-spacing:-.04em; }
h1,.sh-h1  { font-weight:700; font-size:27.36px; line-height:1.05; letter-spacing:-.035em; }
h2,.sh-h2  { font-weight:700; font-size:20.88px; line-height:1.15; letter-spacing:-.028em; }
h3,.sh-h3  { font-weight:600; font-size:18.7px;  line-height:1.28; letter-spacing:-.02em; }
h4,.sh-h4  { font-weight:600; font-size:15.3px;  line-height:1.35; letter-spacing:-.015em; }
h5,h6      { font-weight:600; font-size:15.3px;  line-height:1.35; letter-spacing:-.015em; }

@media (min-width:768px){
  .sh-display{ font-size:52px; }
  h1,.sh-h1{ font-size:38px; }
  h2,.sh-h2{ font-size:29px; }
  h3,.sh-h3{ font-size:22px; }
  h4,.sh-h4,h5,h6{ font-size:18px; }
}

p{ margin:0 0 var(--sp-4); }

.sh-body-lg{ font-size:18px; line-height:1.6;  color:var(--sh-body); }
.sh-body   { font-size:16px; line-height:1.65; color:var(--sh-body); }
.sh-small  { font-size:14px; line-height:1.55; color:var(--sh-muted); }

/* Never below 15px on mobile. Build Brief §3.6. */
@media (max-width:767px){
  body,.sh-body{ font-size:16px; }
  .sh-small{ font-size:14px; }
}

.sh-label,.sh-eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--sh-muted);
}

.sh-price{
  font-family:var(--font-display); font-weight:700; font-size:28px;
  line-height:1; letter-spacing:-.03em; color:var(--sh-heading);
}
.sh-price-sm{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  line-height:1; letter-spacing:-.025em; color:var(--sh-heading);
}
.sh-price-was{
  font-size:13.5px; color:var(--slate-500); text-decoration:line-through;
}

a{ color:var(--sh-link); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--sh-link-hover); }

.sh-link{ color:var(--sh-link); text-decoration:underline; text-underline-offset:2px; font-weight:500; }

/* -----------------------------------------------------------------------------
   3. FOCUS — never removed. Build Brief §6.4, CLAUDE.md hard rule 4.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.sh-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible{
  outline:2px solid var(--sh-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.sh-btn:focus-visible{ border-radius:var(--radius-pill); }

/* -----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.sh-container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sh-section{ padding-block:var(--section-y); }
.sh-section--tint{ background:var(--sh-surface-alt); }
.sh-section--deep{ background:var(--sh-deep); color:var(--slate-200); }

/* -----------------------------------------------------------------------------
   5. BUTTONS — seven variants. Build Brief §6.4.
   pink-600 for every CTA. Exactly one gradient button exists on the whole
   site: the final "Place order". .sh-btn--grad is used nowhere else.
   -------------------------------------------------------------------------- */

.sh-btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:14px 28px;
  min-height:48px;
  min-width:44px;
  border:0;
  border-radius:var(--radius-pill);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

.sh-btn--cta       { background:var(--sh-cta); color:#fff; }
.sh-btn--cta:hover { background:var(--sh-cta-hover); color:#fff; }

.sh-btn--grad      { background:var(--grad); color:#fff; }
.sh-btn--grad:hover{ background:var(--grad-deep); color:#fff; }

.sh-btn--primary       { background:var(--blue-600); color:#fff; }
.sh-btn--primary:hover { background:var(--blue-700); color:#fff; }

.sh-btn--secondary       { background:transparent; color:var(--blue-700); border:2px solid var(--blue-600); padding:12px 26px; }
.sh-btn--secondary:hover { background:var(--blue-50); color:var(--blue-700); }

.sh-btn--ghost       { background:var(--blue-50); color:var(--blue-700); }
.sh-btn--ghost:hover { background:var(--blue-100); color:var(--blue-700); }

.sh-btn--disabled,
.sh-btn:disabled,
.sh-btn[aria-disabled="true"]{
  background:var(--slate-100); color:var(--slate-400); cursor:not-allowed; border:0;
}
.sh-btn--disabled:hover,
.sh-btn:disabled:hover{ background:var(--slate-100); color:var(--slate-400); }

/* On-gradient variants — hero only. */
.sh-btn--white          { background:#fff; color:var(--blue-900); }
.sh-btn--white:hover    { background:var(--blue-50); color:var(--blue-900); }
.sh-btn--outline-w      { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85); padding:12px 26px; }
.sh-btn--outline-w:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* Sizes */
.sh-btn--sm  { padding:10px 20px; font-size:13.5px; min-height:40px; }
.sh-btn--lg  { padding:17px 34px; font-size:16.5px; min-height:56px; }
.sh-btn--icon{ width:48px; height:48px; padding:0; }
.sh-btn--block{ width:100%; }

/* Loading — width locked, no layout shift. */
.sh-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.sh-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:sh-spin .7s linear infinite;
}
.sh-btn--secondary.is-loading::after,
.sh-btn--ghost.is-loading::after{ border-color:rgba(21,67,204,.3); border-top-color:var(--blue-600); }
@keyframes sh-spin{ to{ transform:rotate(360deg); } }

/* -----------------------------------------------------------------------------
   6. FORM FIELDS — Build Brief §6.6
   -------------------------------------------------------------------------- */

.sh-field{ display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-4); }
.sh-field > label,
.sh-label-field{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--slate-700);
}
.sh-field .required,
.sh-field .req,
.sh-field abbr[title="required"]{ color:var(--sh-cta); text-decoration:none; border:0; }

input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="search"],input[type="number"],input[type="date"],
select,textarea,
.sh-input{
  height:48px;
  width:100%;
  padding:0 14px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--slate-700);
  background:#fff;
  border:1.5px solid var(--slate-400);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea,textarea.sh-input{ height:auto; min-height:104px; padding:12px 14px; line-height:1.6; resize:vertical; }

input::placeholder,textarea::placeholder,.sh-input::placeholder{ color:var(--slate-400); opacity:1; }

input:focus,select:focus,textarea:focus,.sh-input:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px var(--blue-100);
  outline:none;
}
/* Keyboard users still get the ring on top of the field styling. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sh-focus); outline-offset:2px;
}

.sh-input--error,input.sh-error,
.woocommerce-invalid input.input-text,
.woocommerce-invalid select{ border-color:var(--error); }

.sh-input--success,input.sh-ok,
.woocommerce-validated input.input-text{ border-color:var(--success); }

input:disabled,select:disabled,textarea:disabled,.sh-input--disabled{
  background:var(--slate-100); color:var(--slate-400);
  border-color:var(--slate-200); cursor:not-allowed;
}

select,select.sh-input{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C667E' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

.sh-hint  { font-size:12.8px; color:var(--slate-500); }
.sh-errmsg{ font-size:12.8px; color:var(--error);   font-weight:500; display:flex; align-items:center; gap:5px; }
.sh-okmsg { font-size:12.8px; color:var(--success); font-weight:500; display:flex; align-items:center; gap:5px; }

/* Checkbox / radio */
.sh-check{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; cursor:pointer; }
.sh-check input[type="checkbox"],
.sh-check input[type="radio"]{
  flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; padding:0;
  appearance:none; background:#fff;
  border:1.5px solid var(--slate-400); border-radius:5px;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.sh-check input[type="radio"]{ border-radius:50%; }
.sh-check input[type="checkbox"]:checked{
  background:var(--blue-600); border-color:var(--blue-600);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6.5l3 3 5-6'/></svg>");
  background-repeat:no-repeat; background-position:center;
}
.sh-check input[type="radio"]:checked{ background:#fff; border:6px solid var(--blue-600); }

/* Radio card — used by checkout payment and delivery in Phase 3. */
.sh-radcard{
  border:1.5px solid var(--slate-300); border-radius:var(--radius);
  padding:16px 18px; display:flex; gap:var(--sp-3); align-items:flex-start;
  background:#fff; cursor:pointer; transition:all var(--dur) var(--ease);
}
.sh-radcard.is-selected{ border-color:var(--blue-500); background:var(--blue-50); border-width:2px; padding:15px 17px; }
.sh-radcard .sh-radcard-t{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--blue-900); }
.sh-radcard .sh-radcard-d{ font-size:13px; color:var(--slate-500); margin-top:2px; }

/* Quantity stepper */
.sh-qty{
  display:inline-flex; align-items:center; height:44px; background:#fff;
  border:1.5px solid var(--slate-400); border-radius:var(--radius-pill); overflow:hidden;
}
.sh-qty button{
  width:42px; height:100%; border:0; background:none; cursor:pointer;
  font-family:var(--font-display); font-size:18px; color:var(--slate-600);
}
.sh-qty button:hover{ color:var(--blue-600); }
.sh-qty input,.sh-qty .sh-qty-val{
  min-width:38px; width:38px; height:100%; text-align:center; border:0; padding:0;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--blue-900);
  font-variant-numeric:tabular-nums; background:none;
}
.sh-qty input:focus{ box-shadow:none; }

/* Toggle */
.sh-toggle{
  width:48px; height:28px; border-radius:var(--radius-pill);
  background:var(--slate-300); position:relative; cursor:pointer; border:0;
  transition:background-color var(--dur) var(--ease);
}
.sh-toggle[aria-checked="true"]{ background:var(--blue-600); }
.sh-toggle::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:left var(--dur) var(--ease);
}
.sh-toggle[aria-checked="true"]::after{ left:23px; }

/* -----------------------------------------------------------------------------
   7. BADGES — Build Brief §6.7
   -------------------------------------------------------------------------- */

.sh-badge{
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.05em; padding:5px 13px; border-radius:var(--radius-pill);
  display:inline-block; line-height:1.4;
}
.sh-badge--sale { background:var(--pink-600);  color:#fff; }
.sh-badge--flash{ background:var(--pink-200);  color:var(--slate-900); }
.sh-badge--new  { background:var(--blue-100);  color:var(--blue-800); }
.sh-badge--stock{ background:var(--success-bg);color:var(--success-fg); }
.sh-badge--low  { background:var(--warning-bg);color:var(--warning-fg); }
.sh-badge--out  { background:var(--error-bg);  color:var(--error-fg); }

/* -----------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

.sh-card{
  background:#fff; border:var(--border); border-radius:var(--radius);
  padding:var(--sp-6);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sh-card--hover:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* Product card — Build Brief §6.5 */
.sh-pcard{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  overflow:hidden; position:relative;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sh-pcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.sh-pcard__img{
  aspect-ratio:1; background:var(--slate-50); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sh-pcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-pcard__tag  { position:absolute; top:12px; left:12px; z-index:2; }
.sh-pcard__heart{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); color:var(--slate-400);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sh-pcard__heart:hover{ color:var(--pink-600); }
.sh-pcard__body   { padding:var(--sp-4); }
.sh-pcard__eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-500);
}
.sh-pcard__title{
  font-family:var(--font-display); font-weight:600; font-size:16px;
  color:var(--blue-900); margin:6px 0 10px; line-height:1.3; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.sh-pcard__title a{ color:inherit; text-decoration:none; }
.sh-pcard__prices{ display:flex; align-items:baseline; gap:9px; }
.sh-pcard__stock{
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  color:var(--success); margin-top:var(--sp-2);
}
.sh-pcard__stock--out{ color:var(--error); }
.sh-pcard__add{ margin-top:13px; }
/* Whole card is a link except the button. */
.sh-pcard__overlay{ position:absolute; inset:0; z-index:1; }
.sh-pcard__add,.sh-pcard__heart{ position:relative; z-index:2; }

/* -----------------------------------------------------------------------------
   9. ALERTS
   -------------------------------------------------------------------------- */

.sh-alert{
  border-radius:var(--radius); padding:14px 18px; font-size:14.5px;
  display:flex; gap:var(--sp-3); align-items:flex-start;
}
.sh-alert b{ font-family:var(--font-display); font-weight:600; display:block; margin-bottom:2px; }
.sh-alert--success{ background:var(--success-bg); color:var(--success-fg); }
.sh-alert--warning{ background:var(--warning-bg); color:var(--warning-fg); }
.sh-alert--error  { background:var(--error-bg);   color:var(--error-fg); }
.sh-alert--info   { background:var(--blue-50);    color:var(--blue-800); }

/* -----------------------------------------------------------------------------
   10. UTILITIES
   -------------------------------------------------------------------------- */

.sh-stars{ display:inline-flex; gap:2px; color:var(--blue-600); font-size:14px; }
.sh-stars .off{ color:var(--slate-300); }

.sh-progress{ height:8px; background:var(--slate-100); border-radius:var(--radius-pill); overflow:hidden; }
.sh-progress > i{ display:block; height:100%; background:var(--pink-600); border-radius:var(--radius-pill); }

.sh-skeleton{ background:var(--slate-100); border-radius:var(--radius-sm); position:relative; overflow:hidden; }
.sh-skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:sh-shimmer 1.4s infinite;
}
@keyframes sh-shimmer{ to{ transform:translateX(100%); } }

.sh-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Image placeholder — Build Brief §13. slate-100 with the flat icon at 25%. */
.sh-img-placeholder{
  background:var(--slate-100); display:flex; align-items:center; justify-content:center;
}
.sh-img-placeholder img,.sh-img-placeholder svg{ opacity:.25; width:25%; max-width:96px; height:auto; }

/* -----------------------------------------------------------------------------
   11. ASTRA AND WOOCOMMERCE RECONCILIATION
   Astra and WooCommerce ship their own button, form and price styling. These
   rules point them at the tokens so nothing off-brand survives. Phase 3
   replaces the WooCommerce markup itself with child-theme templates.
   -------------------------------------------------------------------------- */

.ast-container,.ast-container-fluid{ max-width:var(--container); }

/* Buttons */
.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,
.wp-block-button__link,
.ast-button,
input[type="submit"],
button[type="submit"]:not(.sh-btn){
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:14px 28px;
  min-height:48px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--sh-cta);
  color:#fff;
  transition:background-color var(--dur) var(--ease);
}
.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,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.sh-btn):hover{
  background:var(--sh-cta-hover);
  color:#fff;
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled{
  background:var(--slate-100); color:var(--slate-400); cursor:not-allowed; opacity:1;
}

/* Prices */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--sh-heading);
  letter-spacing:-.025em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{ font-size:28px; letter-spacing:-.03em; }
.woocommerce ul.products li.product .price{ font-size:20px; }
.woocommerce .price del,
.woocommerce div.product p.price del{
  font-family:var(--font-body); font-weight:400; font-size:13.5px;
  color:var(--slate-500); opacity:1; text-decoration:line-through;
}
.woocommerce .price ins{ text-decoration:none; }

/* Never colour a price pink. Build Brief §2.1. */
.woocommerce .price,.woocommerce .price ins,.woocommerce .price bdi{ color:var(--sh-heading); }

/* Sale flash */
.woocommerce span.onsale{
  background:var(--pink-600); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.05em; padding:5px 13px; border-radius:var(--radius-pill);
  min-height:0; min-width:0; line-height:1.4; top:12px; left:12px; margin:0;
}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:var(--radius); border:0; border-top:0; padding:14px 18px 14px 48px;
  font-size:14.5px; font-family:var(--font-body);
}
.woocommerce-message{ background:var(--success-bg); color:var(--success-fg); }
.woocommerce-info   { background:var(--blue-50);    color:var(--blue-800); }
.woocommerce-error  { background:var(--error-bg);   color:var(--error-fg); }
.woocommerce-message::before{ color:var(--success); }
.woocommerce-info::before   { color:var(--info); }
.woocommerce-error::before  { color:var(--error); }

/* Star ratings */
.woocommerce .star-rating span,
.woocommerce p.stars a{ color:var(--blue-600); }
.woocommerce .star-rating::before{ color:var(--slate-200); }
.woocommerce .star-rating::before{ color:var(--slate-300); }

/* Hide the star row on products with no reviews. Build Sequence Phase 5.7. */
.woocommerce ul.products li.product .star-rating[aria-label="Rated 0 out of 5"],
.woocommerce ul.products li.product .star-rating:not([aria-label]){ display:none; }

/* Astra's own headings and links follow the tokens. */
.ast-single-post .entry-title,.entry-title,.widget-title{
  font-family:var(--font-display); color:var(--sh-heading);
}
.ast-page-builder-template .site-content > .ast-container{ max-width:100%; padding:0; }

/* Search form */
.search-field,.woocommerce-product-search .search-field{ height:48px; border-radius:var(--radius-sm); }