/*
Theme Name: Wheet Designs
Theme URI: https://www.wheetdesigns.com
Author: Wheet Designs
Description: Custom block theme for Wheet Designs — handmade crochet. Direction B,
  "Loop & Line": editorial and airy, built on undyed-wool neutrals with a deep
  aubergine accent. Includes WooCommerce shop, product and checkout styling.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wheetdesigns
Tags: block-theme, full-site-editing, e-commerce, one-column, custom-colors
*/

/* -------------------------------------------------------------------------
   Nearly everything is driven by theme.json. What lives here is the handful
   of things theme.json cannot express: the threading line motif, product-card
   behaviour, and WooCommerce markup that still renders as classic PHP
   (checkout being the main one).
   ------------------------------------------------------------------------- */

/* --- the continuous thread that stitches sections together ---------------- */
.wd-thread {
  display: block;
  width: 100%;
  height: 52px;
  overflow: hidden;
}
.wd-thread svg { display: block; width: 100%; height: 100%; }
.wd-thread path {
  fill: none;
  stroke: var(--wp--preset--color--aubergine);
  stroke-width: 1.4;
  opacity: .4;
}

/* --- arched hero image, echoing a finished yoke --------------------------- */
.wd-arch img {
  border-radius: 180px 180px 8px 8px;
  width: 100%;
  object-fit: cover;
}

/* --- small caps label ----------------------------------------------------- */
.wd-label {
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--teal);
}

/* --- product cards -------------------------------------------------------- */
.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template {
  --wd-card-gap: 1.9rem;
}
.wc-block-grid__product,
.wp-block-post.product {
  transition: transform .18s ease;
}
.wc-block-grid__product:hover,
.wp-block-post.product:hover { transform: translateY(-3px); }

/* Products are transparent PNG cutouts sitting on the wool ground, so give
   them room to breathe rather than cropping them to a hard edge. */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
  background: var(--wp--preset--color--wool);
  border-radius: 6px;
  padding: 6%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

/* --- "PDF Pattern" badge for downloadable products ------------------------ */
.wd-badge-pattern {
  display: inline-block;
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--clay);
  border: 1px solid var(--wp--preset--color--clay);
  border-radius: 999px;
  padding: .15rem .5rem;
  margin-top: .5rem;
}

/* --- WooCommerce classic markup (cart / checkout / account) --------------- */
.woocommerce-page :where(input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], textarea, select) {
  background: #fff;
  border: 1px solid var(--wp--preset--color--wool-deep);
  border-radius: 6px;
  padding: .75rem .8rem;
  font: inherit;
  font-size: .875rem;
  color: var(--wp--preset--color--ink);
  width: 100%;
}
.woocommerce-page :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--teal);
}

.woocommerce-page .woocommerce-checkout-review-order,
.woocommerce-page .cart_totals {
  background: var(--wp--preset--color--wool);
  border-radius: 10px;
  padding: 1.75rem;
}
.woocommerce-page table.shop_table {
  border: 0;
  font-variant-numeric: tabular-nums;
}
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
  border-color: var(--wp--preset--color--wool-deep);
}

.woocommerce-page :where(.button, button.button, input.button, #place_order) {
  background: var(--wp--preset--color--aubergine);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.75rem;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .03em;
  cursor: pointer;
}
.woocommerce-page :where(.button, button.button, input.button, #place_order):hover {
  background: var(--wp--preset--color--aubergine-light);
}

/* Stripe's Payment Element renders in an iframe we cannot style from here —
   we only style the container so it reads as part of the page. Keeping our own
   scripts off this area is also what keeps the site inside PCI SAQ-A. */
.woocommerce-checkout #payment,
.wc-block-checkout__payment-method {
  background: #fff;
  border: 1px solid var(--wp--preset--color--aubergine);
  border-radius: 10px;
  padding: 1.1rem;
}
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; }
.woocommerce-checkout #payment div.form-row { padding: 0; }

/* --- downloads table on the account page ---------------------------------- */
.woocommerce-MyAccount-content .woocommerce-table--order-downloads {
  border-radius: 8px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Responsive
   Block themes stack columns and cap widths on their own, but the custom
   pieces here need explicit handling: the product grid, the arched hero, and
   the two-column checkout. 781px is WordPress's own mobile breakpoint, so
   using it keeps our behaviour in step with core's.
   ------------------------------------------------------------------------- */

/* --- tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .wd-arch img { border-radius: 120px 120px 8px 8px; }
}

/* --- mobile ---------------------------------------------------------- */
@media (max-width: 781px) {
  /* Two across still reads well for cutouts; one per row wastes the screen. */
  .woocommerce ul.products,
  .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.1rem;
  }

  /* A 180px radius on a ~350px-wide image is almost a semicircle. */
  .wd-arch img { border-radius: 90px 90px 6px 6px; }

  /* The thread motif is decorative; it only eats vertical space here. */
  .wd-thread { height: 28px; }

  /* Header: let the nav drop under the title rather than crush it. */
  header .wp-block-group.is-content-justification-space-between {
    row-gap: .6rem;
  }
  .wp-block-site-title { font-size: 1.15rem; }

  /* Checkout and cart are two-column on desktop; stack them. */
  .woocommerce-page .col2-set,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2,
  .woocommerce-page #customer_details,
  .woocommerce-page #customer_details .col-1,
  .woocommerce-page #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    margin-left: 0;
  }
  .woocommerce-page .woocommerce-checkout-review-order,
  .woocommerce-page .cart_totals { padding: 1.1rem; }

  /* Cart table: drop the thumbnail column, it squeezes everything else. */
  .woocommerce-page table.shop_table_responsive thead { display: none; }
  .woocommerce-page table.cart td.product-thumbnail { display: none; }
  .woocommerce-page table.shop_table td,
  .woocommerce-page table.shop_table th { padding: .6rem .4rem; font-size: .9rem; }

  /* Full-width tap targets beat centred pills on a phone. */
  .woocommerce-page :where(.button, button.button, input.button, #place_order) {
    width: 100%;
    text-align: center;
  }

  /* Give cutouts a bit less padding so they are not tiny in a 2-up grid. */
  .woocommerce ul.products li.product img,
  .wp-block-woocommerce-product-image img { padding: 3%; }
}

/* --- small phones ---------------------------------------------------- */
@media (max-width: 480px) {
  .wd-arch img { border-radius: 60px 60px 6px 6px; }
  .woocommerce ul.products,
  .wp-block-woocommerce-product-template { gap: .8rem; }
}

/* --- accessibility -------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 2px;
}
.skip-link:focus { top: 0; }

/* Never let anything force a horizontal scroll on a phone. */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}