/* ==========================================================================
   WooCommerce + Designs
   Loaded only on shop, cart, checkout, account and design pages
   (see sk_enqueue_shop_styles() in inc/design-products.php).

   Two scoping rules, deliberately different:

   1. Classes this theme invented (.product-card, .sk-product-design,
      .single-design-*) are NOT body-scoped. They only exist where we put them,
      so there is nothing to leak onto, and the design cards need to work inside
      a blog post as well as on shop pages.
   2. WooCommerce's own generic selectors (.shop_table, .button, form fields,
      .woocommerce-message) ARE scoped under .sk-shop / .sk-shop-page, because
      those names are broad enough to collide with the rest of the site.

   Depends on style.css — enqueued with ['sk-style'] so the cascade order holds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token layer

   Additive, and prefixed --sk- so it stays visibly distinct from the existing
   unprefixed --color-* / --font-* tokens in style.css. Every value here is
   lifted from something style.css already hardcodes rather than invented, so
   promoting this block into style.css later is a copy-paste with no visual
   change.

   Breakpoints are deliberately absent: custom properties cannot be used inside
   @media conditions. They stay hardcoded at 640 / 768 / 1024 to match the theme.
   -------------------------------------------------------------------------- */
:root {
  /* Spacing — from .post-card-body 2rem, .divider 1.5rem, .section-padding 5/7rem */
  --sk-space-1: 0.25rem;
  --sk-space-2: 0.5rem;
  --sk-space-3: 0.75rem;
  --sk-space-4: 1rem;
  --sk-space-5: 1.5rem;
  --sk-space-6: 2rem;
  --sk-space-8: 3rem;

  /* Radii — the theme uses exactly these three, plus a pill for badges */
  --sk-radius-sm: 4px;   /* .btn-primary, .btn-outline, .nav-cta, inputs */
  --sk-radius-md: 6px;
  --sk-radius-lg: 8px;   /* modals, media blocks */
  --sk-radius-pill: 999px;

  /* Shadows — lifted verbatim from style.css */
  --sk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sk-shadow-md: 0 1px 6px rgba(0, 0, 0, 0.08);

  /* Focus — new. The theme has no focus story worth the name; this pass adds
     one for the shop only. Extending it site-wide is a separate change. */
  --sk-focus-color: var(--color-sky-600);
  --sk-focus-ring: 0 0 0 3px rgba(61, 111, 136, 0.35);

  --sk-transition: 0.2s ease;

  /* Greys style.css uses as raw hex in dozens of places, named here so shop
     rules can reference them instead of repeating the literals. */
  --sk-text-body: #3D5468;
  --sk-text-muted: #6B8498;
}

/* --------------------------------------------------------------------------
   Product + design grid

   Mirrors .post-grid's columns exactly. The card reuses .post-card's visual
   language — sky-50 lifting to white, 2rem body, serif title — with one
   deliberate divergence: a 4/5 portrait thumbnail, which suits apparel and
   artwork far better than the blog's 16/9.
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sk-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px)  { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-sky-50);
  transition: background-color 0.3s;
}
.product-card:hover { background-color: #fff; }

.product-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-sky-100);
}
.product-card-thumbnail img {
  width: 100%;
  height: 100% !important;   /* overrides the global img { height: auto } */
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-thumbnail img { transform: scale(1.03); }

.product-card-body {
  padding: var(--sk-space-6);
  padding-bottom: var(--sk-space-4);
  flex: 1 1 auto;
}
.product-card-body .label { display: block; margin-bottom: var(--sk-space-3); }

.product-card-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-sky-800);
  line-height: 1.3;
  margin-bottom: var(--sk-space-2);
  transition: color var(--sk-transition);
}
.product-card:hover .product-card-title { color: var(--color-sky-600); }

.product-card-tagline,
.product-card-meta {
  font-size: 0.875rem;
  color: var(--sk-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--sk-space-2);
}
.product-card-meta { font-size: 0.75rem; }

.product-card-price {
  font-size: 0.95rem;
  color: var(--color-sky-800);
}
.product-card-price .price { margin: 0; }

.product-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-3);
  padding: 0 var(--sk-space-6) var(--sk-space-6);
}
/* Card buttons are quieter than a page-level CTA — the card itself is the
   primary target, the button is the shortcut. */
/* Specificity note: shop archives carry BOTH .sk-shop and .sk-shop-page, and
   `.sk-shop-page .button` further down this file would otherwise win on source
   order and turn these into solid primary buttons. Hence the extra class. */
.product-card .product-card-actions .button {
  display: inline-block;
  border: 1px solid var(--color-sky-500);
  color: var(--color-sky-600);
  background: transparent;
  padding: 0.625rem 1.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--sk-radius-sm);
  transition: background-color var(--sk-transition), color var(--sk-transition);
  cursor: pointer;
}
.product-card .product-card-actions .button:hover {
  background-color: var(--color-sky-600);
  color: var(--color-sky-50);
  transform: none;
}
.product-card--design .product-card-actions { justify-content: flex-start; }

/* Sale price + badge ------------------------------------------------------- */
.price del {
  color: var(--color-sky-400);
  text-decoration: line-through;
  font-size: 0.85em;
  margin-right: var(--sk-space-2);
}
.price ins {
  text-decoration: none;
  color: var(--color-sky-800);
  font-weight: 600;
}
/* In-flow by default. Absolute positioning is applied only inside the card
   thumbnail, which is the one place with a positioned ancestor to anchor to —
   on a single product page the badge would otherwise escape to the viewport. */
.onsale {
  display: inline-block;
  background-color: var(--color-gold-400);
  color: #fff;
  border-radius: var(--sk-radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.product-card-thumbnail .onsale {
  position: absolute;
  top: var(--sk-space-3);
  left: var(--sk-space-3);
  z-index: 2;
}
.sk-shop div.product > .onsale { margin-bottom: var(--sk-space-3); }

/* --------------------------------------------------------------------------
   Design context on a product page
   -------------------------------------------------------------------------- */
.sk-product-design {
  margin: var(--sk-space-5) 0;
  padding: var(--sk-space-4) 0;
  border-top: 1px solid var(--color-sky-200);
  border-bottom: 1px solid var(--color-sky-200);
}
.sk-product-design .label { display: block; margin-bottom: var(--sk-space-2); }
.sk-product-design-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-4);
  flex-wrap: wrap;
}
.sk-product-design-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-sky-800);
  text-decoration: none;
}
.sk-product-design-name:hover { color: var(--color-sky-600); }
.sk-product-design-tagline {
  font-size: 0.9rem;
  color: var(--sk-text-muted);
  margin: var(--sk-space-2) 0 0;
}
.sk-product-design-more {
  display: inline-block;
  margin-top: var(--sk-space-3);
  text-decoration: none;
}
.sk-product-design-more:hover { color: var(--color-sky-700); }

/* --------------------------------------------------------------------------
   Single design page
   -------------------------------------------------------------------------- */
.single-design-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sk-space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .single-design-hero-inner { grid-template-columns: 5fr 6fr; gap: var(--sk-space-8); }
}
.single-design-artwork {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--sk-radius-lg);
  background-color: var(--color-sky-200);
}
.single-design-artwork img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: var(--focus-x-mobile, 50%) center;
  display: block;
}
@media (min-width: 1024px) {
  .single-design-artwork img { object-position: var(--focus-x-desktop, 50%) center; }
}
.single-design-title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-sky-800);
  line-height: 1.15;
  margin-bottom: var(--sk-space-4);
}
.single-design-tagline {
  font-size: 1.05rem;
  color: var(--sk-text-body);
  line-height: 1.7;
  margin-bottom: var(--sk-space-4);
}
.single-design-actions { margin-top: var(--sk-space-5); }

/* --------------------------------------------------------------------------
   Shop archive
   -------------------------------------------------------------------------- */
.sk-shop-term-description {
  color: var(--sk-text-body);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.75;
}
.sk-shop .woocommerce-result-count {
  font-size: 0.75rem;
  color: var(--sk-text-muted);
  margin: 0 0 var(--sk-space-4);
}
.sk-shop .woocommerce-ordering select,
.sk-shop-page select,
.sk-shop select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233D6F88' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  border: 1px solid var(--color-sky-300);
  border-radius: var(--sk-radius-sm);
  color: var(--color-sky-800);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.7rem 2.5rem 0.7rem 1rem;
  max-width: 100%;
}
.sk-shop .woocommerce-ordering { margin-bottom: var(--sk-space-5); }

.sk-shop nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--sk-space-2);
  list-style: none;
  margin: var(--sk-space-8) 0 0;
  padding: 0;
  border: 0;
}
.sk-shop nav.woocommerce-pagination li { border: 0; }
.sk-shop nav.woocommerce-pagination a,
.sk-shop nav.woocommerce-pagination span {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--sk-radius-sm);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--color-sky-600);
}
.sk-shop nav.woocommerce-pagination span.current {
  background-color: var(--color-sky-600);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sk-shop div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--sk-space-8);
    align-items: start;
  }
  .sk-shop div.product .woocommerce-product-gallery { grid-column: 1; }
  .sk-shop div.product .summary { grid-column: 2; margin: 0; }
  /* Everything after the two columns — tabs, related products — spans both. */
  .sk-shop div.product .woocommerce-tabs,
  .sk-shop div.product .related,
  .sk-shop div.product .upsells { grid-column: 1 / -1; }
}

.sk-shop .woocommerce-product-gallery__wrapper img { border-radius: var(--sk-radius-lg); }
.sk-shop .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sk-space-2);
  list-style: none;
  margin: var(--sk-space-3) 0 0;
  padding: 0;
}
.sk-shop .flex-control-thumbs li { margin: 0; }
.sk-shop .flex-control-thumbs img {
  width: 100%;
  border-radius: var(--sk-radius-sm);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--sk-transition), outline-color var(--sk-transition);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.sk-shop .flex-control-thumbs img.flex-active,
.sk-shop .flex-control-thumbs img:hover {
  opacity: 1;
  outline-color: var(--color-sky-500);
}

.sk-shop .product_title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-sky-800);
  line-height: 1.2;
  margin-bottom: var(--sk-space-4);
}
.sk-shop .summary .price {
  font-size: 1.35rem;
  color: var(--color-sky-800);
  margin-bottom: var(--sk-space-5);
  display: block;
}
.sk-shop .woocommerce-product-details__short-description {
  color: var(--sk-text-body);
  line-height: 1.75;
}
.sk-shop .product_meta {
  margin-top: var(--sk-space-5);
  font-size: 0.78rem;
  color: var(--sk-text-muted);
}
.sk-shop .product_meta a { color: var(--color-sky-600); }
.sk-shop .stock.out-of-stock { color: var(--color-error); font-weight: 600; }
.sk-shop .stock.available-on-backorder { color: var(--color-gold-500); }

/* Variations -------------------------------------------------------------- */
.sk-shop table.variations { width: 100%; border: 0; margin-bottom: var(--sk-space-4); }
.sk-shop table.variations tr { display: block; margin-bottom: var(--sk-space-4); }
.sk-shop table.variations th,
.sk-shop table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.sk-shop table.variations th label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  display: block;
  margin-bottom: var(--sk-space-2);
}
.sk-shop table.variations select { width: 100%; }
.sk-shop .reset_variations {
  display: inline-block;
  margin-top: var(--sk-space-2);
  font-size: 0.75rem;
  color: var(--color-sky-600);
}
.sk-shop .woocommerce-variation-price { margin-bottom: var(--sk-space-4); }

/* Add to cart + quantity --------------------------------------------------- */
.sk-shop form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sk-space-3);
  margin-bottom: var(--sk-space-5);
}
.sk-shop form.cart.variations_form { display: block; }
.sk-shop .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sk-space-3);
}

.sk-shop .quantity,
.sk-shop-page .quantity { display: flex; }

/* Declared once, after the generic input block below would have reached it, so
   the fixed width survives. Core supplies the screen-reader label; this is
   purely the touch target and the 16px iOS-zoom guard. */
.sk-shop .quantity .qty,
.sk-shop-page .quantity .qty {
  min-height: 44px;
  width: 5rem;
  font-size: 16px;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid var(--color-sky-300);
  border-radius: var(--sk-radius-sm);
  background-color: #fff;
  color: var(--color-sky-800);
  font-family: var(--font-sans);
}

/* Scoped through form.cart so it outranks the generic `.sk-shop-page .button`
   rule further down — a single product page carries both body classes. */
.sk-shop form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background-color: var(--color-sky-600);
  color: #fff;
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--sk-radius-sm);
  cursor: pointer;
  transition: background-color var(--sk-transition), transform 0.15s ease;
}
.sk-shop form.cart .single_add_to_cart_button:hover {
  background-color: var(--color-sky-800);
  transform: translateY(-1px);
}
.sk-shop form.cart .single_add_to_cart_button.disabled,
.sk-shop form.cart .single_add_to_cart_button:disabled {
  background-color: var(--color-sky-300);
  cursor: not-allowed;
  transform: none;
}

/* Tabs -------------------------------------------------------------------- */
.sk-shop .woocommerce-tabs { margin-top: var(--sk-space-8); }
.sk-shop .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-5);
  list-style: none;
  margin: 0 0 var(--sk-space-5);
  padding: 0 0 var(--sk-space-3);
  border-bottom: 1px solid var(--color-sky-200);
}
.sk-shop .woocommerce-tabs ul.tabs li { margin: 0; }
.sk-shop .woocommerce-tabs ul.tabs a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
  text-decoration: none;
}
.sk-shop .woocommerce-tabs ul.tabs li.active a { color: var(--color-sky-700); }
.sk-shop .woocommerce-tabs .panel h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-sky-800);
  margin-bottom: var(--sk-space-3);
}
.sk-shop .woocommerce-tabs .panel { color: var(--sk-text-body); line-height: 1.75; }

.sk-shop .related > h2,
.sk-shop .upsells > h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-sky-800);
  text-align: center;
  margin: var(--sk-space-8) 0 var(--sk-space-6);
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.sk-shop .woocommerce-message,
.sk-shop .woocommerce-error,
.sk-shop .woocommerce-info,
.sk-shop-page .woocommerce-message,
.sk-shop-page .woocommerce-error,
.sk-shop-page .woocommerce-info {
  list-style: none;
  border-left: 3px solid var(--color-sky-400);
  background-color: var(--color-sky-100);
  border-radius: var(--sk-radius-sm);
  padding: var(--sk-space-4) var(--sk-space-5);
  margin: 0 0 var(--sk-space-5);
  font-size: 0.9rem;
  color: var(--sk-text-body);
  line-height: 1.6;
}
.sk-shop .woocommerce-message,
.sk-shop-page .woocommerce-message {
  border-left-color: var(--color-success);
  background-color: rgba(143, 221, 181, 0.14);
}
.sk-shop .woocommerce-error,
.sk-shop-page .woocommerce-error {
  border-left-color: var(--color-error);
  background-color: rgba(227, 155, 155, 0.14);
}
.sk-shop .woocommerce-error li,
.sk-shop-page .woocommerce-error li { list-style: none; }
.sk-shop .woocommerce-message .button,
.sk-shop-page .woocommerce-message .button {
  float: right;
  margin-left: var(--sk-space-4);
  color: var(--color-sky-600);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Tables — cart, order review, order details

   Mobile uses a CSS-only stacked layout driven by the data-title attributes
   WooCommerce core already prints on every <td>. That is also why
   woocommerce-smallscreen.css is dequeued in inc/woocommerce.php: it does the
   same job with defaults that fight this design.
   -------------------------------------------------------------------------- */
.sk-shop-page .shop_table,
.sk-shop .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sk-space-6);
}
.sk-shop-page .shop_table th,
.sk-shop .shop_table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  padding: var(--sk-space-3) var(--sk-space-2);
  border-bottom: 1px solid var(--color-sky-300);
}
.sk-shop-page .shop_table td,
.sk-shop .shop_table td {
  padding: var(--sk-space-4) var(--sk-space-2);
  border-bottom: 1px solid var(--color-sky-200);
  color: var(--sk-text-body);
  font-size: 0.9rem;
  vertical-align: middle;
}
.sk-shop-page .shop_table .product-thumbnail img {
  width: 80px;
  height: auto;
  border-radius: var(--sk-radius-sm);
  display: block;
}
.sk-shop-page .shop_table .product-name a {
  color: var(--color-sky-800);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  text-decoration: none;
}
.sk-shop-page .shop_table .product-name a:hover { color: var(--color-sky-600); }
.sk-shop-page .shop_table .variation {
  font-size: 0.78rem;
  color: var(--sk-text-muted);
  margin: var(--sk-space-1) 0 0;
}
.sk-shop-page .shop_table .remove {
  display: inline-block;
  color: var(--sk-text-muted);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}
.sk-shop-page .shop_table .remove:hover { color: var(--color-error); }

@media (max-width: 767px) {
  .sk-shop-page .shop_table thead,
  .sk-shop .shop_table thead { display: none; }
  .sk-shop-page .shop_table tr,
  .sk-shop .shop_table tr {
    display: block;
    padding: var(--sk-space-4) 0;
    border-bottom: 1px solid var(--color-sky-200);
  }
  .sk-shop-page .shop_table td,
  .sk-shop .shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sk-space-4);
    border: 0;
    padding: var(--sk-space-2) 0;
    text-align: right;
  }
  .sk-shop-page .shop_table td::before,
  .sk-shop .shop_table td::before {
    content: attr(data-title);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-sky-700);
    text-align: left;
    flex: 0 0 auto;
  }
  /* The thumbnail cell has no useful label and reads better full-bleed. */
  .sk-shop-page .shop_table td.product-thumbnail::before { content: none; }
  .sk-shop-page .shop_table td.product-thumbnail { justify-content: flex-start; }
}

.sk-shop-page .cart-collaterals { margin-top: var(--sk-space-6); }
@media (min-width: 1024px) {
  .sk-shop-page .cart-collaterals {
    display: flex;
    justify-content: flex-end;
  }
  .sk-shop-page .cart_totals { width: 100%; max-width: 26rem; }
}
.sk-shop-page .cart_totals h2,
.sk-shop-page .cross-sells h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-sky-800);
  margin-bottom: var(--sk-space-4);
}
.sk-shop-page .cart_totals {
  background-color: var(--color-sky-100);
  border-radius: var(--sk-radius-lg);
  padding: var(--sk-space-6);
}
.sk-shop-page .cart_totals .order-total td { font-size: 1.1rem; color: var(--color-sky-800); }

.sk-shop-page .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-3);
  margin-bottom: var(--sk-space-5);
}
.sk-shop-page .wc-proceed-to-checkout { margin-top: var(--sk-space-5); }
.sk-shop-page .wc-proceed-to-checkout .checkout-button {
  display: block;
  text-align: center;
  background-color: var(--color-sky-600);
  color: #fff;
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--sk-radius-sm);
  transition: background-color var(--sk-transition);
}
.sk-shop-page .wc-proceed-to-checkout .checkout-button:hover { background-color: var(--color-sky-800); }

/* --------------------------------------------------------------------------
   Forms — checkout, account, coupon
   -------------------------------------------------------------------------- */
.sk-shop-page .form-row { margin-bottom: var(--sk-space-4); }
.sk-shop-page label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-sky-700);
  margin-bottom: var(--sk-space-2);
}
.sk-shop-page .required { color: var(--color-error); text-decoration: none; }

.sk-shop-page input[type="text"],
.sk-shop-page input[type="email"],
.sk-shop-page input[type="tel"],
.sk-shop-page input[type="password"],
.sk-shop-page input[type="number"]:not(.qty),
.sk-shop-page textarea {
  width: 100%;
  /* 16px prevents iOS Safari zooming the viewport on focus. Do not reduce. */
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--color-sky-800);
  background-color: #fff;
  border: 1px solid var(--color-sky-300);
  border-radius: var(--sk-radius-sm);
  padding: 0.75rem 1rem;
  min-height: 44px;
}
.sk-shop-page textarea { min-height: 7rem; line-height: 1.6; }
.sk-shop-page input::placeholder,
.sk-shop-page textarea::placeholder { color: #A9BECD; }
.sk-shop-page .woocommerce-invalid input { border-color: var(--color-error); }

.sk-shop-page .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 44px;
  border: 1px solid var(--color-sky-300);
  border-radius: var(--sk-radius-sm);
  padding: 0.35rem 0.5rem;
}

.sk-shop-page .button,
.sk-shop-page button[type="submit"] {
  display: inline-block;
  background-color: var(--color-sky-600);
  color: #fff;
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--sk-radius-sm);
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--sk-transition), transform 0.15s ease;
}
.sk-shop-page .button:hover,
.sk-shop-page button[type="submit"]:hover {
  background-color: var(--color-sky-800);
  transform: translateY(-1px);
}

/* Checkout layout --------------------------------------------------------- */
@media (min-width: 1024px) {
  .sk-shop-page form.checkout {
    display: grid;
    grid-template-columns: 58fr 42fr;
    grid-column-gap: var(--sk-space-8);
    align-items: start;
  }
  .sk-shop-page form.checkout #customer_details { grid-column: 1; }
  .sk-shop-page form.checkout h3#order_review_heading { grid-column: 2; margin-top: 0; }
  .sk-shop-page form.checkout #order_review {
    grid-column: 2;
    position: sticky;
    top: 6rem;
  }
}
.sk-shop-page form.checkout h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-sky-800);
  margin: var(--sk-space-6) 0 var(--sk-space-4);
}
.sk-shop-page #order_review {
  background-color: var(--color-sky-100);
  border-radius: var(--sk-radius-lg);
  padding: var(--sk-space-6);
}
.sk-shop-page #order_review .shop_table td,
.sk-shop-page #order_review .shop_table th { border-bottom-color: var(--color-sky-200); }

/* Payment box: no radius fights with gateway-rendered iframes. */
.sk-shop-page #payment { background: transparent; }
.sk-shop-page #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--sk-space-4);
  padding: 0;
  border-bottom: 1px solid var(--color-sky-200);
}
.sk-shop-page #payment ul.payment_methods li { margin-bottom: var(--sk-space-3); }
.sk-shop-page #payment label { display: inline; font-weight: 400; }
.sk-shop-page #payment .payment_box {
  background-color: #fff;
  padding: var(--sk-space-4);
  margin-top: var(--sk-space-2);
  font-size: 0.85rem;
  color: var(--sk-text-body);
}
.sk-shop-page #place_order { width: 100%; }

.sk-shop-page .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sk-space-4); }
.sk-shop-page .woocommerce-form__label-for-checkbox { font-weight: 400; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sk-shop-page .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 15rem 1fr;
    grid-column-gap: var(--sk-space-8);
    align-items: start;
  }
}
.sk-shop-page .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: var(--sk-space-4);
  list-style: none;
  margin: 0 0 var(--sk-space-6);
  padding: 0 0 var(--sk-space-3);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-sky-200);
}
@media (min-width: 768px) {
  .sk-shop-page .woocommerce-MyAccount-navigation ul {
    display: block;
    overflow: visible;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .sk-shop-page .woocommerce-MyAccount-navigation li { margin-bottom: var(--sk-space-3); }
}
.sk-shop-page .woocommerce-MyAccount-navigation a {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
  text-decoration: none;
  padding-bottom: var(--sk-space-1);
  border-bottom: 2px solid transparent;
}
.sk-shop-page .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-sky-700);
  border-bottom-color: var(--color-sky-600);
}
.sk-shop-page .woocommerce-MyAccount-content { color: var(--sk-text-body); line-height: 1.75; }

/* --------------------------------------------------------------------------
   Order received / thank you
   -------------------------------------------------------------------------- */
.sk-shop-page .woocommerce-order .woocommerce-thankyou-order-received {
  background-color: rgba(143, 221, 181, 0.16);
  border-left: 3px solid var(--color-success);
  border-radius: var(--sk-radius-sm);
  padding: var(--sk-space-5);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-sky-800);
  margin-bottom: var(--sk-space-6);
}
.sk-shop-page .woocommerce-order-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sk-space-4);
  list-style: none;
  margin: 0 0 var(--sk-space-6);
  padding: 0;
}
@media (min-width: 640px) {
  .sk-shop-page .woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sk-shop-page .woocommerce-order-overview { grid-template-columns: repeat(4, 1fr); }
}
.sk-shop-page .woocommerce-order-overview li {
  background-color: var(--color-sky-100);
  border-radius: var(--sk-radius-sm);
  padding: var(--sk-space-4);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sky-700);
}
.sk-shop-page .woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--sk-space-2);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-sky-800);
}
.sk-shop-fulfilment-note {
  background-color: var(--color-sky-100);
  border-radius: var(--sk-radius-sm);
  padding: var(--sk-space-4) var(--sk-space-5);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--sk-text-body);
  margin-bottom: var(--sk-space-6);
}

/* --------------------------------------------------------------------------
   Focus states

   New, and scoped to the shop and design pages. The rest of the site has no
   focus story yet; extending this site-wide is a separate, deliberate change
   rather than something to smuggle in with the shop.
   -------------------------------------------------------------------------- */
.sk-shop :is(a, button, input, select, textarea):focus-visible,
.sk-shop-page :is(a, button, input, select, textarea):focus-visible,
.product-card :is(a, button):focus-visible,
.single-design-hero :is(a, button):focus-visible,
.sk-product-design :is(a, button):focus-visible {
  outline: 2px solid var(--sk-focus-color);
  outline-offset: 2px;
  box-shadow: var(--sk-focus-ring);
  border-radius: var(--sk-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .sk-shop *,
  .sk-shop-page *,
  .product-card * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .product-card:hover .product-card-thumbnail img { transform: none; }
}