/* ============================================================================
   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;
}

/* Paged grids opt out of the scroll-reveal animation: woo-filters.js decides
   what is on screen, so a card paged into view would otherwise be stranded at
   opacity 0 (it never crossed the observer) or replay the fade on every page
   change. Only set while there is more than one page. */
#woo-grid.is-paged .theme-item.reveal {
  opacity: 1;
  transform: none;
  animation: 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;
  /* WooCommerce's .button also overrides these two, so the shop cards would
     otherwise sit at 700/8px against the homepage cards' 800/5px. */
  font-weight: 800;
  gap: 5px;
}

.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; }

/* ---- shop pagination -----------------------------------------------------
   woocommerce/loop/pagination.php prints the homepage's pill control, so the
   shared .theme-pagination / .page-pill / .page-btn styling in site.css does
   the work. These are the differences: the homepage builds <button>s, the shop
   builds <a>s and <span>s, so the :disabled and link states need covering. */
.woocommerce-section .theme-pagination .page-btn {
  text-decoration: none;
  cursor: pointer;
}

.woocommerce-section .theme-pagination .page-btn.is-disabled {
  opacity: .32;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* The ellipsis between number ranges is a label, not a target. */
.woocommerce-section .theme-pagination .page-btn.dots {
  background: none;
  cursor: default;
  pointer-events: none;
}

/* WooCommerce's own pagination rules would otherwise put a list bullet and
   float back on the nav. */
.woocommerce-section nav.woocommerce-pagination ul,
.woocommerce-section nav.woocommerce-pagination li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  float: none;
}

/* ---- space under the page banner ----------------------------------------
   pages.css sets `.page-banner + section{padding-top:40px !important}` for every
   banner page. That suits pages whose first element is a section heading; the
   store screens open on a thin toolbar or straight into the grid, so 40px reads
   as no gap at all. Adding the class beats that rule on specificity, and the
   !important is needed to outrank it. Mirrors the .contact-content-top pattern. */
.page-banner + section.woocommerce-section { padding-top: 72px !important; }

@media (max-width: 1024px) {
  .page-banner + section.woocommerce-section { padding-top: 56px !important; }
}

@media (max-width: 640px) {
  .page-banner + section.woocommerce-section { padding-top: 40px !important; }
}

/* ---- 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;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), 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;
  color: #fff;
}

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

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

/* Ordering / result count row above the shop grid. Both are floated siblings
   in WooCommerce's markup; ctrspace_woo_toolbar_open() wraps them so they can
   sit in a flex row instead -- floats here are not cleared by the CSS grid
   below and would overlap the first row of cards. */
.ctrspace-woo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 30px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-result-count,
.woocommerce-ordering {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  float: none;
}

.ctrspace-woo-toolbar .woocommerce-ordering select {
  padding-right: 42px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.ctrspace-woo-toolbar .woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.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; }
  .ctrspace-woo-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .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;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), 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;
  color: #fff !important;
}

.wc-block-components-button:disabled,
.wc-block-components-button.is-loading { opacity: .55; transform: 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; }
}

/* =========================================================================
   MY ACCOUNT
   WooCommerce ships the account screen as a bare <ul> of links beside a
   content div. Nothing styled it, so it rendered as a bulleted list inside
   page.php's .article-body card. This builds the real two-column dashboard:
   a sticky nav rail of icon pills and a content panel.
   ========================================================================= */

/* The outer .article-body prose card is flattened by the .ctrspace-store-page
   rule further up -- page.php adds that class on account pages too. */

/* Two columns only when the nav is present, i.e. when logged in. Logged out
   this is the login / register form and stays a single centred column. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* WooCommerce floats the two panes and gives them percentage widths (30% / 68%).
   Inside a grid container the floats are ignored but the widths still win, which
   collapses both columns -- so both are reset to fill their grid cell. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

/* Placement is stated rather than left to auto-flow, so the rail cannot end up
   in the content column if the panes are ever reordered. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
}

/* ---- navigation rail ----------------------------------------------------- */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 10, 70, .06);
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation li { margin: 0; list-style: none; }
.woocommerce-MyAccount-navigation li + li { margin-top: 4px; }

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

/* Icons are masks rather than background images, so they inherit the link
   colour and turn white on the active pill without a second set of assets. */
.woocommerce-MyAccount-navigation li a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--ctrspace-account-icon) center / 18px 18px no-repeat;
  mask: var(--ctrspace-account-icon) center / 18px 18px no-repeat;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: rgba(123, 0, 255, .07);
  color: var(--purple);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--grad);
  color: #fff;
}

.woocommerce-MyAccount-navigation-link--dashboard a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  --ctrspace-account-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

/* Log out sits apart from the navigation proper. */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ---- content panel ------------------------------------------------------- */
.woocommerce-MyAccount-content {
  padding: 34px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 10, 70, .06);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.8;
}

.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }

/* The dashboard greeting: "Hello <name>". */
.woocommerce-MyAccount-content > p:first-of-type {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.woocommerce-MyAccount-content > p:first-of-type strong { font-weight: 800; }

.woocommerce-MyAccount-content a:not(.button) {
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content legend {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.woocommerce-MyAccount-content fieldset { margin: 30px 0 0; padding: 0; border: 0; }

/* Empty states -- "No order has been made yet", "No downloads available". */
.woocommerce-MyAccount-content .woocommerce-Message--info,
.woocommerce-MyAccount-content .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 26px 28px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, #F7FAFF, #FAF7FF);
  color: var(--ink-soft);
  font-weight: 600;
}

/* WooCommerce prints a pseudo-element icon on its notices; inside the panel it
   lands as a stray glyph against the text. */
.woocommerce-MyAccount-content .woocommerce-Message--info::before,
.woocommerce-MyAccount-content .woocommerce-info::before { display: none; }

/* ---- addresses ----------------------------------------------------------- */
/* WooCommerce lays these out with floated .col-1 / .col-2 at 48% each. A grid
   is steadier and keeps the two cards equal height. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

/* WooCommerce's .col-1 / .col-2 floats and 48% widths load after this file, so
   these need the extra specificity -- and placement is stated outright, the way
   the nav and content panes are, rather than left to auto-flow. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address.col-1 {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address.col-2 {
  grid-column: 2;
  grid-row: 1;
}

.woocommerce-MyAccount-content .woocommerce-Address {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, #F9FBFF, #FCF9FF);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--purple);
  white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
  margin: 0;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }

  .woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address.col-1,
  .woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address.col-2 {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- logged out: login / register --------------------------------------- */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  max-width: 940px;
  margin: 0 auto;
}

/* WooCommerce's own `.woocommerce form.login` sets padding and a 5px radius at
   higher specificity, so these selectors have to match it element-for-class. */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register {
  padding: 34px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 10, 70, .06);
}

.woocommerce-account .woocommerce > h2 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}

.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 600; }

.woocommerce-account .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-size: 14px;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: auto;
  }

  /* Stacked above the content, so it no longer needs to stick. The rail stays
     a vertical list -- easier to hit than a scrolling pill bar on a phone. */
  .woocommerce-MyAccount-navigation { position: static; }
}

@media (max-width: 640px) {
  .woocommerce-MyAccount-content { padding: 24px 20px; }

  .woocommerce-account .woocommerce form.woocommerce-form-login,
  .woocommerce-account .woocommerce form.woocommerce-form-register { padding: 24px 20px; }
}