/*
Theme Name: Spine
Theme URI: https://hotcaraccessories.com/
Author: Blaine Anderson
Description: WooCommerce block theme for Hot Car Accessories' stores. Ink and platinum with one champagne accent, a fine "spine" line and fluted deco ribs, wide caps over an italic serif, products shown as catalog plates. Store words, photos and contact details are settings (Appearance > Spine); departments come from the product categories.
Version: 1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: spine
WC requires at least: 9.0
*/

:root {
  --ink: #0D0F12; --ink-deep: #08090B; --platinum: #E7E8EA; --paper: #F4F4F2; --gold: #C9A35E; --gold-light: #F1E3C4;
  --bronze: #8C6B2E; --steel: #6B7079; --steel-light: #B9BEC6; --rule: #C9CDD3; --rule-light: #E3E5E8;
  --wide: Syncopate, "Arial Black", sans-serif; --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1); --max: 1320px;
  --ribs: repeating-linear-gradient(90deg, rgba(201,163,94,.16) 0 1px, transparent 1px 18px);
  --ribs-dark: repeating-linear-gradient(90deg, rgba(13,15,18,.06) 0 1px, transparent 1px 18px);
}
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--gold); color: var(--ink); }
em { font-style: italic; }
.wp-site-blocks > * + *, main > .alignfull, main > .alignfull + * { margin-block-start: 0 !important; }
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* ---- shared pieces ---- */
.spine-ribs { position: absolute; inset: 0; background-image: var(--ribs); pointer-events: none; }
.spine-ribs-dark { background-image: var(--ribs-dark); }
.spine-eyebrow { margin: 0 0 .8rem; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.spine-eyebrow--bronze { color: var(--bronze); }
.spine-caps { font-family: var(--wide) !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; }
.spine-serif { font-family: var(--serif); font-style: italic; }
.spine-btn { display: inline-block; padding: 1rem 1.6rem; font: 600 .8rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s, transform .25s var(--ease); }
.spine-btn:hover { transform: translateY(-2px); }
.spine-btn--gold { background: var(--gold); color: var(--ink) !important; }
.spine-btn--gold:hover { background: #DDBB7A; }
.spine-btn--line { border: 1px solid rgba(244,244,242,.5); color: var(--paper) !important; }
.spine-btn--line:hover { background: var(--paper); color: var(--ink) !important; }

/* ---- header ---- */
.spine-header-wrap { background: var(--ink); color: var(--paper); }
.spine-utility { background: var(--ink-deep); color: #8A9099; font-size: .78rem; letter-spacing: .08em; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .4rem 1.5rem; padding: .55rem max(1.5rem, calc((100% - var(--max)) / 2)); }
.spine-utility a { color: var(--gold-light); text-decoration: none; }
.spine-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding: 1.3rem max(1.5rem, calc((100% - var(--max)) / 2));
  border-bottom: 1px solid rgba(201,163,94,.25); }
.spine-header > * { margin: 0 !important; }
.spine-wordmark { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--paper) !important; }
.spine-wordmark__line { width: 2px; height: 34px; background: var(--gold); }
.spine-wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.spine-wordmark__word { font: 700 1.05rem var(--wide); letter-spacing: .28em; text-transform: uppercase; }
.spine-wordmark__sub { font: italic .95rem var(--serif); color: var(--gold); margin-top: .35rem; }
.spine-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; flex: 1 1 420px; }
.spine-nav__link { color: #C8CCD2 !important; text-decoration: none; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; position: relative; padding: .3rem 0; }
.spine-nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold); transition: right .35s var(--ease); }
.spine-nav__link:hover, .spine-nav__link.is-current { color: var(--gold-light) !important; }
.spine-nav__link:hover::after, .spine-nav__link.is-current::after { right: 0; }
.spine-header__tools { gap: 1rem !important; }
.spine-header .wc-block-product-search, .spine-header .wp-block-search { margin: 0; }
.spine-header .wc-block-product-search__fields, .spine-header .wp-block-search__inside-wrapper { border: 1px solid rgba(244,244,242,.22) !important; background: transparent; padding: 0; }
.spine-header .wc-block-product-search__field, .spine-header .wp-block-search__input { background: transparent !important; border: 0 !important; color: var(--paper) !important;
  font: .9rem var(--sans); padding: .6rem .9rem !important; min-width: 200px; }
.spine-header .wc-block-product-search__button, .spine-header .wp-block-search__button { background: transparent !important; border: 0 !important; color: #8A9099 !important; padding: 0 .7rem !important; }
.spine-header .wc-block-mini-cart__button { color: var(--paper) !important; font: .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.spine-header .wc-block-mini-cart__badge { background: var(--gold) !important; color: var(--ink) !important; border-radius: 0 !important; font-weight: 600; }

/* ---- hero ---- */
.spine-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 4.5rem max(1.5rem, calc((100% - var(--max)) / 2)) 0; }
.spine-hero__ribs { left: 50%; right: auto; width: 46%; transform: translateX(-50%); }
.spine-hero__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(var(--gold), rgba(201,163,94,.2)); }
.spine-hero__inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
.spine-hero__copy { flex: 1 1 440px; max-width: 560px; padding-bottom: 3.5rem; animation: spine-rise .9s var(--ease) both; }
.spine-hero__title { margin: 0; font: 400 clamp(2.9rem, 5.6vw, 4.9rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--paper); }
.spine-hero__title em { color: var(--gold-light); }
.spine-hero__intro { margin: 1.6rem 0 0; font-size: 1.12rem; line-height: 1.6; color: var(--steel-light); max-width: 470px; }
.spine-hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.spine-hero__figure { flex: 1 1 520px; max-width: 700px; margin: 0; position: relative; animation: spine-fade 1.4s .2s ease both; }
.spine-hero__figure img { display: block; width: 100%; height: auto; filter: contrast(1.06) saturate(.9);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); }
.spine-hero__figure figcaption { position: absolute; right: 0; bottom: 1.4rem; font: italic .95rem var(--serif); color: #8A9099; }
.spine-hero__bigword { position: relative; margin: 0; font: 700 clamp(3.4rem, 11.2vw, 10.5rem)/.8 var(--wide); letter-spacing: .14em; white-space: nowrap; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(201,163,94,.42); text-align: center; transform: translateY(18%); }

/* ---- catalog index ---- */
.spine-catalog { padding: 6rem 0 2.5rem; }
.spine-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 1.4rem; }
.spine-sechead h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.spine-sechead p { margin: 0; font-size: 1.4rem; color: #5B616B; }
.spine-sechead--split { border-bottom: 0; padding-bottom: 0; margin-bottom: 2.2rem; }
.spine-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 40px; align-items: center; gap: 1.25rem; padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink) !important; transition: background .3s, color .3s; }
.spine-row__num { font: 2.1rem var(--serif); color: #A07B39; }
.spine-row__name { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.spine-row__title { font: 700 clamp(.95rem, 1.6vw, 1.3rem) var(--wide); letter-spacing: .12em; text-transform: uppercase; }
.spine-row__subs { font-size: .92rem; color: var(--steel); }
.spine-row__count { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.spine-row__arrow { font-size: 1.4rem; transition: transform .35s; }
.spine-row:hover { background: var(--ink); color: var(--paper) !important; }
.spine-row:hover .spine-row__subs, .spine-row:hover .spine-row__count { color: var(--steel-light); }
.spine-row:hover .spine-row__arrow { transform: translateX(8px); color: var(--gold); }

/* ---- product plates (any product grid) ---- */
.spine-bench { padding: 5rem 0 6rem !important; }
.spine-plates .wc-block-product { background: #fff; border: 1px solid #D3D6DB; display: flex; flex-direction: column; padding: 0 0 1.2rem !important; margin: 0 !important;
  position: relative; transition: transform .5s var(--ease), box-shadow .5s; text-align: left !important; }
.spine-plates .wc-block-product:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(13,15,18,.55); }
.spine-plates .wc-block-components-product-image { margin: 0 !important; padding: 1.4rem; aspect-ratio: 1; border-bottom: 1px solid var(--rule-light); overflow: hidden; }
.spine-plates .wc-block-components-product-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; transition: transform .8s var(--ease); }
.spine-plates .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.spine-plate-sku { margin: 1.1rem 1.1rem 0 !important; font-size: .7rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); }
.spine-plate-sku strong { display: none; }
.spine-plate-title { margin: .5rem 1.1rem 0 !important; font: 400 .98rem/1.4 var(--sans) !important; flex: 1; text-align: left !important; }
.spine-plate-title a { color: var(--ink) !important; text-decoration: none; }
.spine-plate-title a::after { content: ""; position: absolute; inset: 0; }   /* whole plate is the link */
.spine-plate-price { margin: .7rem 1.1rem 0 !important; font: 1.6rem var(--serif) !important; text-align: left !important; }
.spine-plate-price ins { text-decoration: none; }

/* ---- story band ---- */
.spine-story { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 7rem max(1.5rem, calc((100% - var(--max)) / 2)); }
.spine-story__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(rgba(201,163,94,.1), var(--gold), rgba(201,163,94,.1)); }
.spine-story__inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3.5rem 7.5rem; }
.spine-story__lead { margin: 0; font: clamp(2.1rem, 3.6vw, 3.25rem)/1.12 var(--serif); }
.spine-story__lead em { color: var(--gold-light); }
.spine-story__text { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; font-size: 1.06rem; line-height: 1.65; color: var(--steel-light); }
.spine-story__text p { margin: 0; }
.spine-story__facts { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }

/* ---- department pages ---- */
.spine-depthead { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 3.5rem max(1.5rem, calc((100% - var(--max)) / 2)) 3.25rem; }
.spine-depthead .spine-ribs { left: auto; width: 38%; }
.spine-depthead__spine { position: absolute; top: 0; bottom: 0; right: 19%; width: 1px; background: var(--gold); opacity: .7; }
.spine-depthead__inner { position: relative; }
.spine-crumbs, .spine-crumbs a, .woocommerce-breadcrumb, .woocommerce-breadcrumb a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8A9099 !important; text-decoration: none; }
.spine-crumbs--light, .spine-crumbs--light a { color: var(--steel) !important; }
.spine-depthead__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem; margin-top: 1.5rem; }
.spine-depthead__num { font: 4.5rem/.8 var(--serif); color: var(--gold); }
.spine-depthead__title { margin: 0; font: 700 clamp(1.7rem, 4vw, 3.3rem)/1.05 var(--wide); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); max-width: 16ch; }
.spine-depthead__desc { margin: 1.4rem 0 0; font: italic 1.4rem var(--serif); color: var(--steel-light); max-width: 620px; }
.spine-chips { background: var(--paper); border-bottom: 1px solid #D3D6DB; padding: 1.2rem max(1.5rem, calc((100% - var(--max)) / 2)); }
.spine-chips__inner { display: flex; flex-wrap: wrap; gap: .4rem; }
.spine-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .9rem; border: 1px solid #C3C7CD; background: #fff; color: var(--ink) !important;
  font: 600 .82rem var(--sans); letter-spacing: .04em; text-decoration: none; transition: background .2s, color .2s; }
.spine-chip span { opacity: .55; }
.spine-chip:hover, .spine-chip.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; }
.spine-listing__bar { margin: 2.5rem 0 1.4rem !important; }
.spine-listing__bar p, .spine-listing__bar .woocommerce-result-count { margin: 0; color: #5B616B; font-size: .92rem; }
.spine-listing select, .woocommerce-ordering select { font: .9rem var(--sans); padding: .6rem .8rem; border: 1px solid #C3C7CD; background: #fff; min-height: 44px; }
.spine-listing .spine-plates { margin-bottom: 6rem; }
.wp-block-query-pagination { margin-top: 2.5rem; gap: .5rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: .6rem .9rem; border: 1px solid #C3C7CD; background: #fff; text-decoration: none; }
.wp-block-query-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- product page ---- */
.spine-product { padding-top: 1.8rem; padding-bottom: 5rem; }
.spine-product__top { margin-top: 1.6rem !important; gap: 3rem !important; }
.spine-product__gallery .wp-block-woocommerce-product-image-gallery, .spine-product__gallery div.images { width: 100% !important; float: none !important; max-width: none !important; }
.spine-product__gallery .woocommerce-product-gallery { background: #fff; border: 1px solid #D3D6DB; padding: 1.5rem; position: relative; margin: 0 !important; width: 100% !important; float: none !important; }
.spine-product__gallery .woocommerce-product-gallery::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 0;
  background: linear-gradient(rgba(201,163,94,0), rgba(201,163,94,.5), rgba(201,163,94,0)); }
.spine-product__gallery .woocommerce-product-gallery__image img { object-fit: contain; max-height: 560px; }
.spine-product__gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 0 !important; padding: 0; }
.spine-product__gallery .flex-control-thumbs li { width: auto !important; list-style: none; border: 1px solid #D3D6DB; padding: .4rem; background: #fff; }
.spine-product__gallery .flex-control-thumbs img { opacity: .7; } .spine-product__gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.spine-buy { display: flex; flex-direction: column; gap: 1.1rem; max-width: 540px; }
.spine-buy > * { margin: 0 !important; }
.spine-buy .spine-plate-sku { margin: 0 !important; }
.spine-buy__title { font: 400 clamp(2rem, 3.4vw, 3rem)/1.08 var(--serif) !important; }
.spine-buy__summary { color: #454A52; font-size: 1.02rem; }
.spine-buy__price { font: 3rem/1 var(--serif) !important; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.spine-buy__form table.variations { border: 0; margin: 0 0 1rem; }
.spine-buy__form table.variations th, .spine-buy__form table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.spine-buy__form table.variations label { font: 700 .75rem var(--wide); letter-spacing: .22em; text-transform: uppercase; }
.spine-buy__form select { width: 100%; font: .98rem var(--sans); padding: .8rem; border: 1px solid var(--ink); background: #fff; min-height: 48px; margin: .5rem 0 .3rem; }
.spine-buy__form .reset_variations { font-size: .82rem; color: var(--steel); }
.spine-buy__form form.cart, .spine-buy__form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.spine-buy__form .quantity input.qty { width: 4.5rem; min-height: 52px; border: 1px solid var(--ink); background: #fff; font: 600 1rem var(--sans); text-align: center; }
.spine-buy__form .single_add_to_cart_button { flex: 1 1 220px; min-height: 52px; border: 0 !important; border-radius: 0 !important; background: var(--gold) !important; color: var(--ink) !important;
  font: 600 .8rem var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.spine-buy__form .single_add_to_cart_button:hover { background: #DDBB7A !important; transform: translateY(-2px); }
.spine-buy__form .woocommerce-variation-price .price { font: 2rem var(--serif); }
.spine-info { list-style: none; margin: .4rem 0 0 !important; padding: 0; border-top: 1px solid var(--rule); }
.spine-info li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.spine-info li span:first-child { color: var(--steel); }
.spine-info li span:last-child { text-align: right; }
.spine-details { margin-top: 5rem !important; padding-top: 2.8rem; border-top: 2px solid var(--ink); }
.spine-details .wc-tabs, .spine-details .tabs { display: none !important; }
.spine-details .woocommerce-Tabs-panel { display: block !important; max-width: 820px; font-size: 1.03rem; line-height: 1.7; color: #30343A; }
.spine-details h2 { font: 700 1.25rem var(--wide) !important; letter-spacing: .14em; text-transform: uppercase; }
.spine-details table { border-collapse: collapse; width: 100%; max-width: 560px; }
.spine-details th, .spine-details td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.spine-pairs-title { margin-top: 5rem !important; font-size: clamp(1.9rem, 3vw, 2.6rem) !important; }

/* ---- pages, cart, checkout ---- */
.spine-page { padding-top: 3rem; padding-bottom: 6rem; }
.spine-page__title { font: 700 clamp(1.6rem, 3.5vw, 2.8rem) var(--wide) !important; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 1.2rem; }
.wc-block-cart, .wc-block-checkout { background: transparent; }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: var(--gold) !important; color: var(--ink) !important; border-radius: 0 !important; font: 600 .82rem var(--sans) !important; letter-spacing: .16em; text-transform: uppercase; }
.wc-block-components-totals-wrapper, .wc-block-components-sidebar { border-color: var(--rule) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox input, .wc-block-components-select select { border-radius: 0 !important; }
.wc-block-cart-item__image img { background: #fff; padding: .4rem; border: 1px solid var(--rule-light); }

/* ---- footer ---- */
.spine-footer { background: var(--ink-deep); color: #8A9099; padding: 4rem max(1.5rem, calc((100% - var(--max)) / 2)) 2.2rem; font-size: .92rem; }
.spine-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.2rem; }
.spine-footer__col { display: flex; flex-direction: column; gap: .5rem; }
.spine-footer__col a { color: var(--steel-light) !important; text-decoration: none; }
.spine-footer__col a:hover { color: var(--gold-light) !important; }
.spine-footer__h { color: var(--paper); letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; margin-bottom: .2rem; }
.spine-footer__legal { margin: 3rem 0 0; font-size: .78rem; letter-spacing: .06em; }

@keyframes spine-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes spine-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 781px) {
  .spine-row { grid-template-columns: 48px minmax(0, 1fr) 24px; }
  .spine-row__count { display: none; }
  .spine-header__tools { width: 100%; }
  .spine-header .wc-block-product-search { flex: 1; }
  .spine-product__top { flex-direction: column; }
  .spine-depthead .spine-ribs, .spine-depthead__spine { display: none; }
}