/* ============================================================================
   WooCommerce — store screens and the product card grid.

   Loaded after home.css / pages.css, both of which already define the .tcard
   design. Nothing here restyles a card: the rules below only re-apply the
   refinements those files scope to `#themes` (the homepage starter-site band)
   to the store grids as well, then cover the parts WooCommerce adds and the
   design never had — variation forms, notices, quantity fields, tables.
   ========================================================================= */

/* ---- card grid: same treatment the homepage gives #themes ---------------- */
#woo-themes .filters,
.woocommerce-section .filters {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 48px;
  padding: 7px;
  gap: 4px;
  border: 1px solid rgba(123, 0, 255, .12);
  border-radius: 100px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 32px rgba(20, 10, 70, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#woo-themes .filter-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding: 10px 18px;
}

#woo-themes .filter-btn.active,
#woo-themes .filter-btn:hover {
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(123, 0, 255, .22);
  color: #fff;
}

.ctrspace-woo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  /* WooCommerce's loop wrapper is a <ul>; the grid replaces it, but a plugin
     may still hand us list markup. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctrspace-woo-grid .tcard {
  border-color: rgba(123, 0, 255, .10);
  box-shadow: 0 10px 28px rgba(20, 10, 70, .06);
}

.ctrspace-woo-grid .tcard:hover {
  box-shadow: 0 22px 48px rgba(20, 10, 70, .14);
}

.ctrspace-woo-grid .tcard-body {
  padding: 22px 24px 24px;
}

.ctrspace-woo-grid .theme-item.is-hidden {
  display: none;
}

/* The card image is an <img> inside a link rather than a bare <img>. */
.tcard-thumb .shot > a {
  display: block;
  width: 100%;
  height: 100%;
}

.tcard-body h4 a { color: inherit; }
.tcard:hover .tcard-body h4 a { color: var(--purple); }

/* ---- price pill: WooCommerce prints <del>/<ins> for sale prices ---------- */
.tcard-price .woocommerce-Price-amount { color: inherit; }
.tcard-price del {
  opacity: .55;
  font-weight: 600;
  margin-right: 5px;
}
.tcard-price ins {
  text-decoration: none;
  font-weight: 800;
}

/* ---- rating stars ------------------------------------------------------- */
.tcard-rating .stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #FFB400;
}
.tcard-rating .star.is-off { color: #DFDDEA; }

/* ---- add-to-cart: it carries WooCommerce's `button` class for its JS, so
       the plugin's default button styling has to be undone here ------------ */
.tcard-foot .tcard-demo.button {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  min-height: 0;
}

.tcard-foot .tcard-demo.button:hover { background: none; color: var(--purple); }

.tcard-foot .tcard-demo.loading { opacity: .55; pointer-events: none; }

.tcard-foot .tcard-demo.added svg { display: none; }

/* WooCommerce appends its own "View cart" link after a successful AJAX add. */
.tcard-foot .added_to_cart {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--purple);
}

.tcard-foot { flex-wrap: wrap; }

/* ---- header cart bubble ------------------------------------------------- */
.nav-actions .icon-btn { position: relative; }

.ctrspace-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(123, 0, 255, .35);
}

.ctrspace-cart-count.is-empty { display: none; }

/* ---- store pages: notices, forms, tables -------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 10, 70, .05);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.woocommerce-error { border-left-color: #FF3D71; }

.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  margin-left: auto;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 0;
  border-radius: 100px;
  background: var(--grad);
  background-size: 220% 100%;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  box-shadow: 0 12px 28px rgba(123, 0, 255, .24);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, background-position .3s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 18px 38px rgba(123, 0, 255, .32);
  color: #fff;
}

.woocommerce .button.alt { background: var(--grad); }

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: .5;
  box-shadow: none;
  transform: none;
}

/* Ordering / result count row above the shop grid. */
.woocommerce-result-count,
.woocommerce-ordering {
  display: inline-block;
  margin: 0 0 30px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.woocommerce-ordering { float: right; }

.woocommerce-ordering select,
.woocommerce form .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce .quantity input.qty {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.woocommerce .quantity input.qty {
  width: 84px;
  text-align: center;
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

/* Cart and checkout tables. */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  font-size: 14.5px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-lav, #F6F5FF);
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.cart img { width: 62px; border-radius: 10px; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  border-radius: 18px;
}

/* Single product. */
.woocommerce div.product .product_title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 24px;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 18px;
}

.woocommerce div.product div.images img { border-radius: 20px; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 22px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-soft);
  border-radius: 12px 12px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--purple);
  background: var(--grad-soft, rgba(123, 0, 255, .06));
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce div.product .woocommerce-tabs h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  margin: 46px 0 26px;
}

/* WooCommerce blocks (cart / checkout / My Account) inside .wrap. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: 100%;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .ctrspace-woo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 760px) {
  #woo-themes .filters {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 18px;
  }
  #woo-themes .filter-btn { flex: 0 0 auto; }
  .ctrspace-woo-grid { grid-template-columns: 1fr; gap: 18px; }
  .woocommerce-ordering { float: none; display: block; margin-top: 10px; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: 12px 12px; }
}

/* ============================================================================
   Cart & Checkout (WooCommerce Blocks)

   These two screens are React blocks using `wc-block-*` class names, not the
   classic `.woocommerce table.shop_table` markup styled above — which is why
   they arrived unstyled while the rest of the store looked finished.

   The design language is the theme's own: white card surfaces on the lavender
   page, 22px radius, hairline border, soft shadow, gradient primary action.
   ========================================================================= */

.ctrspace-store-page .article-body > .wp-block-woocommerce-cart,
.ctrspace-store-page .article-body > .wp-block-woocommerce-checkout { margin: 0; }

/* ---- two-column shell ---------------------------------------------------- */
.wc-block-components-sidebar-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.wc-block-cart__main,
.wc-block-checkout__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(20, 10, 70, .06);
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  flex: 0 0 380px;
  max-width: 380px;
  padding: 26px 26px 30px;
  background: linear-gradient(160deg, #fff, var(--bg-lav) 130%);
  border: 1px solid rgba(123, 0, 255, .14);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(20, 10, 70, .09);
  position: sticky;
  top: 110px;   /* clears the floating header */
}

/* ---- line items ---------------------------------------------------------- */
.wc-block-cart-items { border: 0; }

.wc-block-cart-items__header {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--line); }
.wc-block-cart-items__row:last-child { border-bottom: 0; }

.wc-block-cart-item__image img {
  width: 92px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-lav);
}

.wc-block-components-product-name {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.wc-block-components-product-name:hover { color: var(--purple); }

.wc-block-cart-item__product .wc-block-components-product-metadata { margin-top: 4px; }
.wc-block-components-product-metadata__description { font-size: 13px; line-height: 1.55; color: var(--muted); }

.wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
  font-weight: 800;
  color: var(--ink);
}

/* Quantity stepper — the plugin default is a bare bordered box. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow: hidden;
  background: #fff;
  max-width: 132px;
}
.wc-block-components-quantity-selector__input { font-weight: 800; color: var(--ink); }
.wc-block-components-quantity-selector__button {
  color: var(--ink-soft);
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}
.wc-block-components-quantity-selector__button:hover { color: var(--purple); background: var(--bg-lav); }

.wc-block-cart-item__remove-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.wc-block-cart-item__remove-link:hover { color: #FF3D71; }

/* ---- order summary ------------------------------------------------------- */
.wc-block-cart__sidebar .wc-block-components-title,
.wc-block-checkout__sidebar .wc-block-components-title,
.wc-block-components-checkout-order-summary__title-text {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  color: var(--ink);
}

.wc-block-components-totals-wrapper { border-top: 1px solid var(--line); padding: 14px 0; }
.wc-block-components-totals-wrapper:first-child { border-top: 0; padding-top: 0; }

.wc-block-components-totals-item__label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.wc-block-components-totals-item__value { font-size: 14px; font-weight: 800; color: var(--ink); }

.wc-block-components-totals-footer-item { border-top: 1px solid var(--line); padding-top: 16px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 16px; font-weight: 800; color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 26px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- primary actions ----------------------------------------------------- */
/* The block buttons render with no background of their own here, so the
   "Proceed to Checkout" and "Place Order" actions were white on white. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 16px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--grad);
  background-size: 220% 100%;
  color: #fff !important;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 14px 34px rgba(123, 0, 255, .26);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, background-position .4s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 20px 44px rgba(123, 0, 255, .34);
  color: #fff !important;
}

.wc-block-components-button:disabled,
.wc-block-components-button.is-loading { opacity: .55; transform: none; box-shadow: none; }

/* Secondary / text buttons keep their quiet treatment. */
.wc-block-components-button.is-link {
  background: none;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  width: auto;
  color: var(--purple) !important;
  font-weight: 700;
}

/* ---- checkout steps ------------------------------------------------------ */
.wc-block-components-checkout-step {
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.wc-block-components-checkout-step:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.wc-block-components-checkout-step__title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink);
  letter-spacing: -.01em;
}
.wc-block-components-checkout-step__description { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ---- form fields --------------------------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container select,
.wc-block-components-combobox-control input {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  min-height: 52px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__container select:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(123, 0, 255, .12);
  outline: none;
}

.wc-block-components-text-input label { color: var(--muted); font-size: 14px; }

/* ---- notices, coupon, misc ---------------------------------------------- */
.wc-block-components-notice-banner {
  border-radius: 14px;
  border-width: 1px;
  font-size: 14px;
}

.wc-block-components-panel__button { font-size: 14px; font-weight: 700; color: var(--ink); }

.wc-block-components-checkout-return-to-cart-button { font-weight: 700; color: var(--purple); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  /* One column: the summary drops under the items and stops being sticky. */
  .wc-block-components-sidebar-layout { flex-direction: column; gap: 22px; }
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    position: static;
  }
}

@media (max-width: 640px) {
  .wc-block-cart__main,
  .wc-block-checkout__main { padding: 22px 18px; border-radius: 18px; }
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar { padding: 20px 18px 24px; border-radius: 18px; }
  /* Narrow the cell too, or the 116px desktop cell crowds the product name. */
  .wc-block-cart-items td.wc-block-cart-item__image { width: 84px; padding-right: 12px; }
  .wc-block-cart-item__image img { width: 100%; }
  .wc-block-components-product-name { font-size: 15px; }
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; }
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button { min-height: 52px; font-size: 15px; }
}

/* ---- corrections against WooCommerce's own block CSS ---------------------- */

/* page.php wraps the content in .article-body, a prose card. On the store pages
   that produced a card inside a card around the two block panels. */
.ctrspace-store-page .article-body {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Vertical padding only — the horizontal padding is .wrap's page gutter, and
     zeroing it ran the cards flush against the screen edge on a phone. */
  padding-top: 0;
  padding-bottom: 0;
  max-width: 1180px;
}

/* WooCommerce sets flex-wrap:wrap on the layout, so a main column with no
   flex-basis takes the full row and the summary wraps underneath — which is why
   the sidebar sat below with empty space beside it. */
@media (min-width: 1001px) {
  .wc-block-components-sidebar-layout { flex-wrap: nowrap; }
  .wc-block-cart__main,
  .wc-block-checkout__main { flex: 1 1 0%; width: auto; max-width: none; }
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar { flex: 0 0 380px; width: 380px; }
}

/* The thumbnail is sized by its table cell, not the <img>. */
.wc-block-cart-items td.wc-block-cart-item__image {
  width: 116px;
  padding-right: 18px;
}
.wc-block-cart-item__image img { width: 100%; }

/* WooCommerce gives its buttons a fixed height, which clipped the taller
   padding above. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) { height: auto; }

/* Give the two panels room to breathe under the page banner. */
.ctrspace-store-page { padding-bottom: 90px; }

/* ============================================================================
   Single product

   Two problems drove most of what looked unfinished here:

   1. The global `h1, h2 { font-size: clamp(40px,5.4vw,60px) !important }` rule
      applied to the product title AND to the "Description" tab heading, so both
      rendered at 60px. The overrides below carry !important to beat it.
   2. The tab panel inherited the full 1384px content width, so the description
      ran edge to edge with no reading measure.
   ========================================================================= */

.woocommerce div.product { padding-top: 8px; }

/* ---- gallery ------------------------------------------------------------- */
.woocommerce div.product div.images {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(20, 10, 70, .08);
}

.woocommerce div.product div.images img {
  border-radius: 16px;
  display: block;
}

.woocommerce div.product div.images .flex-control-thumbs { margin-top: 14px; gap: 10px; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 74px;
  border-radius: 12px;
  border: 1px solid var(--line);
  opacity: .65;
  transition: opacity .25s ease, border-color .25s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--purple); }

/* ---- summary ------------------------------------------------------------- */
.woocommerce div.product .summary { padding: 6px 0 0 12px; }

.woocommerce div.product .product_title {
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.woocommerce div.product p.price del {
  -webkit-text-fill-color: var(--muted);
  opacity: .7;
  font-size: 20px;
  font-weight: 600;
  margin-right: 8px;
}
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 26px;
}

/* Quantity + add to cart sit on one aligned row with matching heights. */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}

.woocommerce div.product form.cart .quantity input.qty {
  height: 54px;
  width: 96px;
  border-radius: 100px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
}

.woocommerce div.product form.cart button[type="submit"],
.woocommerce div.product form.cart .single_add_to_cart_button {
  min-height: 54px;
  padding: 16px 34px;
  font-size: 15.5px;
}

.woocommerce div.product .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}
.woocommerce div.product .product_meta > span { display: inline-flex; gap: 6px; align-items: center; }
.woocommerce div.product .product_meta a {
  color: var(--purple);
  font-weight: 700;
}
.woocommerce div.product .product_meta a:hover { text-decoration: underline; }

/* ---- tabs ---------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 56px;
  scroll-margin-top: 120px;   /* the header floats over content */
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 28px;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 10, 70, .05);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 100px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 11px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--purple); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(123, 0, 255, .24);
}

/* ---- tab panel: a reading measure and real typographic rhythm ------------- */
.woocommerce div.product .woocommerce-Tabs-panel {
  max-width: 880px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.woocommerce div.product .woocommerce-Tabs-panel > h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 20px;
}

.woocommerce div.product .woocommerce-Tabs-panel h3,
.woocommerce div.product .woocommerce-Tabs-panel h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 30px 0 10px;
  letter-spacing: -.01em;
}

.woocommerce div.product .woocommerce-Tabs-panel p { margin: 0 0 14px; }
.woocommerce div.product .woocommerce-Tabs-panel strong { color: var(--ink); font-weight: 800; }

.woocommerce div.product .woocommerce-Tabs-panel ul { margin: 0 0 20px; padding: 0; list-style: none; }
.woocommerce div.product .woocommerce-Tabs-panel ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
}
/* Replaces the default bullet with the theme's gradient dot. */
.woocommerce div.product .woocommerce-Tabs-panel ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad);
}

.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes th { color: var(--ink); }

/* ---- reviews ------------------------------------------------------------- */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  background: #fff;
}

/* ---- related / upsells --------------------------------------------------- */
.woocommerce .related, .woocommerce .upsells { margin-top: 64px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce div.product div.images,
  .woocommerce div.product .summary { width: 100%; float: none; margin-right: 0; }
  .woocommerce div.product .summary { padding: 26px 0 0; }
  .woocommerce div.product .woocommerce-tabs { margin-top: 40px; }
}

@media (max-width: 640px) {
  .woocommerce div.product div.images { padding: 12px; border-radius: 18px; }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 26px; }
  .woocommerce div.product form.cart { gap: 10px; }
  .woocommerce div.product form.cart .quantity input.qty { width: 84px; height: 50px; }
  .woocommerce div.product form.cart button[type="submit"],
  .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 50px; padding: 15px 22px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { width: 100%; }
  .woocommerce div.product .woocommerce-Tabs-panel > h2 { font-size: 22px !important; }
}