/* ============================================================
   Perlas Atelier — WooCommerce + WordPress glue styles
   Maps WooCommerce's default markup onto the Perlas design system,
   and styles the few new wrappers the PHP templates introduce.
   Loaded after perlas.css so it can override Woo defaults.
   ============================================================ */

/* ---------- New wrappers from the PHP templates ---------- */
.piece-card__media { position: relative; }
img.tile { object-fit: cover; }
.piece-card__media img.tile,
.piece-card__media .tile {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--dur-4) var(--ease-soft);
}
.piece-card:hover .piece-card__media img.tile { transform: translateY(-2px); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: var(--space-5);
  top: var(--space-5);
  z-index: 300;
  background: var(--navy-700);
  color: var(--cream-100);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}
.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* ---------- Mobile burger + nav ---------- */
.mast__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  justify-self: start;
}
.mast__burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--navy-700);
  transition: transform var(--dur-2) var(--ease-soft), opacity var(--dur-2) var(--ease-soft);
}
@media (max-width: 760px) {
  .mast__burger { display: flex; }
  /* Bag stays visible on mobile (col 3); burger opens the left nav (col 1). */
  .mast.mast--nav-open {
    grid-template-rows: auto auto;
    background: var(--cream-100);
    backdrop-filter: none;
  }
  .mast.mast--nav-open .mast__nav.left {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-5);
    align-items: flex-start;
  }
  .mast--nav-open .mast__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .mast--nav-open .mast__burger span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

/* ---------- Soft fade-in on scroll ---------- */
.will-fade { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-4) var(--ease-soft), transform var(--dur-4) var(--ease-soft); }
.will-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .will-fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- WooCommerce: shop / archive grid ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-align: left;
}
@media (max-width: 1000px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* The product card link we print in woo-setup.php */
.woocommerce ul.products li.product a.piece-card {
  border: none;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product img {
  border-radius: var(--radius-md);
  margin: 0;
}

/* Sale flash → quiet pill */
.woocommerce span.onsale {
  background: var(--lustre-blush);
  color: var(--lustre-blush-ink);
  border-radius: var(--radius-pill);
  font-family: var(--sans-heading);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 500;
  min-height: 0;
  min-width: 0;
  padding: 5px 12px;
  top: 12px; right: 12px; left: auto;
  margin: 0;
  box-shadow: none;
}

/* Result count + ordering bar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-family: var(--sans-heading);
  font-size: 12px;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.woocommerce .woocommerce-ordering select {
  font-family: var(--sans-body);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: transparent;
  color: var(--navy-700);
}

/* Page title (shop) */
.woocommerce .page-title,
.woocommerce-products-header__title {
  font-family: var(--serif-display);
  font-size: clamp(56px, 9vw, 110px);
  color: var(--navy-700);
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: var(--space-6);
}

/* ---------- WooCommerce: single product ---------- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce div.product div.images {
  margin: 0;
  position: sticky;
  top: 110px;
}
@media (max-width: 900px) {
  .woocommerce div.product div.images { position: static; }
}
.woocommerce div.product div.images img { border-radius: var(--radius-md); }
.woocommerce div.product div.summary { margin: 0; padding-top: var(--space-3); }

.woocommerce div.product .product_title {
  font-family: var(--serif-display);
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.9;
  color: var(--navy-700);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--sans-heading);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--navy-700);
  margin-bottom: var(--space-5);
}
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--sans-heading);
  font-size: 24px;
  font-weight: 300;
  color: var(--navy-700);
  margin-bottom: var(--space-6);
}
.woocommerce div.product p.price del { color: var(--fg-4); font-weight: 300; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--navy-700); }

/* Quantity + add-to-cart */
.woocommerce .quantity .qty {
  font-family: var(--sans-heading);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy-700);
  padding: 14px 10px;
  width: 72px;
  text-align: center;
}
.woocommerce div.product form.cart { margin-bottom: var(--space-6); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* Buttons — map Woo .button to the Perlas .btn */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  font-family: var(--sans-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: 16px 28px;
  background: var(--navy-700);
  color: var(--cream-100);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
  cursor: pointer;
  line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: var(--navy-500);
  box-shadow: var(--shadow-2);
  color: var(--cream-100);
}
.woocommerce .single_add_to_cart_button { flex: 1; min-width: 200px; }

.piece-detail__reassure {
  margin-top: var(--space-4);
  font-family: var(--sans-heading);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* From-the-bench note (custom field) */
.woocommerce div.product .piece-detail__bench {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--cream-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.woocommerce div.product .piece-detail__bench .eyebrow { display: block; margin-bottom: var(--space-3); }
.woocommerce div.product .piece-detail__bench .body-text { font-style: italic; color: var(--ink-500); font-size: 15px; margin: 0; }

/* Tabs (description / additional info) */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-8); border-top: 1px solid var(--border); padding-top: var(--space-7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  gap: var(--space-5);
  border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 6px;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--sans-heading);
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  border: none;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--navy-700); border-bottom: 1px solid var(--navy-700); }
.woocommerce div.product .woocommerce-tabs .panel { font-family: var(--sans-body); color: var(--ink-700); line-height: 1.75; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--sans-heading); font-weight: 300; color: var(--navy-700); margin-bottom: var(--space-4); }

/* Related products */
.woocommerce .related.products,
.woocommerce .upsells.products {
  grid-column: 1 / -1;
  margin-top: var(--space-9);
  border-top: 1px solid var(--border);
  padding-top: var(--space-7);
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-family: var(--sans-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--navy-700);
  margin-bottom: var(--space-6);
}

/* ---------- WooCommerce: cart ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  background: var(--cream-050);
}
.woocommerce table.shop_table th {
  font-family: var(--sans-heading);
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.woocommerce table.shop_table td { font-family: var(--sans-body); color: var(--ink-700); border-top: 1px solid var(--border); }
.woocommerce table.cart img { border-radius: var(--radius-sm); }
.woocommerce .cart_totals h2 { font-family: var(--sans-heading); font-weight: 300; color: var(--navy-700); }
.woocommerce a.remove {
  color: var(--navy-700) !important;
  border: 1px solid var(--border);
  line-height: 1.6;
}
.woocommerce a.remove:hover { background: var(--navy-700) !important; color: var(--cream-100) !important; }

/* Coupon + inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-checkout input.input-text,
.woocommerce-page form .form-row input.input-text,
.woocommerce select,
.woocommerce #order_review input {
  font-family: var(--sans-body);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--cream-050);
  color: var(--navy-700);
  padding: 12px 14px;
}
.woocommerce form .form-row label { font-family: var(--sans-heading); font-size: 12px; color: var(--ink-700); }

/* ---------- WooCommerce: checkout review ---------- */
.woocommerce-checkout #payment {
  background: var(--cream-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.woocommerce-checkout #payment div.payment_box { background: var(--cream-200); border-radius: var(--radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cream-200); }

/* ---------- WooCommerce: notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border-top: none;
  border-left: 3px solid var(--navy-700);
  background: var(--cream-050);
  border-radius: var(--radius-sm);
  font-family: var(--sans-body);
  color: var(--ink-700);
}
.woocommerce-message::before { color: var(--lustre-mint-ink); }
.woocommerce-info::before { color: var(--navy-700); }
.woocommerce-error { border-left-color: var(--crimson-500); }
.woocommerce-message .button,
.woocommerce-info .button { padding: 8px 16px; }

/* ---------- Folio body (Care/Shipping/etc page content) ---------- *
   Authors write plain headings + paragraphs; we give it the folio rhythm.
   An <h2> starts a chapter, <h3> a sub-note. */
.folio-body { max-width: 760px; }
.folio-body h2 {
  font-family: var(--sans-heading);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--navy-700);
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.folio-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.folio-body h3 {
  font-family: var(--sans-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--navy-700);
  margin: var(--space-6) 0 var(--space-3);
}
.folio-body p {
  font-family: var(--sans-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 62ch;
}
.folio-body ul, .folio-body ol { max-width: 62ch; color: var(--ink-700); line-height: 1.75; }
.folio-body blockquote {
  border-left: 2px solid var(--sand-300);
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  font-style: italic;
  color: var(--ink-500);
}

/* Generic entry content (page.php) */
.entry-content h2 { font-family: var(--sans-heading); font-weight: 300; color: var(--navy-700); margin: var(--space-7) 0 var(--space-4); }
.entry-content h3 { font-family: var(--sans-heading); font-weight: 500; color: var(--navy-700); margin: var(--space-5) 0 var(--space-3); }
.entry-content a { color: var(--navy-700); border-bottom: 1px solid var(--border); }
.entry-content img { border-radius: var(--radius-md); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
.pagination .nav-links {
  border: none;
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--sans-heading);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  min-width: 40px; height: 40px;
  line-height: 40px;
  color: var(--navy-700);
  background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--navy-700);
  color: var(--cream-100);
  border-color: var(--navy-700);
}