/* =========================================================================
   Beziworld React Theme — WooCommerce layer.
   The full component system for WooCommerce templates (shop archive, single
   product, cart, checkout, account, order received, comments, template index)
   from the design mockups, wrapped in @layer woocommerce so it overrides the
   base/components layers predictably. Tokens come from base.css; this layer
   never redefines them. Class names match the markup emitted by the block
   templates and WooCommerce hooks.
   ========================================================================= */
@layer woocommerce {

  /* ----- Breadcrumbs ---------------------------------------------------- */
  .breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
    color: var(--ink-faint); margin-bottom: 1.25rem;
  }
  .breadcrumbs a { color: var(--ink-soft); }
  .breadcrumbs a:hover { color: var(--accent); }
  .breadcrumbs .sep { opacity: 0.5; }
  .breadcrumbs .cur { color: var(--ink); }

  /* ----- Stars ---------------------------------------------------------- */
  .stars { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); }
  .stars svg { width: 16px; height: 16px; }
  .stars.lg svg { width: 20px; height: 20px; }
  .rating-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); }
  .rating-line .rev-count { color: var(--ink-faint); }

  /* ----- Price ---------------------------------------------------------- */
  .price { font-family: var(--font-head); font-weight: 600; color: var(--ink); white-space: nowrap; }
  .price .now { color: var(--accent); }
  .price .was { color: var(--ink-faint); text-decoration: line-through; font-weight: 400; margin-left: 0.5rem; font-size: 0.85em; white-space: nowrap; }

  /* ----- Product badge -------------------------------------------------- */
  .pbadge {
    position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--accent); color: var(--accent-ink);
    padding: 0.3rem 0.6rem; border-radius: 999px; font-weight: 600;
    box-shadow: var(--shadow-sm);
  }
  .pbadge.out { background: var(--ink); }

  /* Accessible overrides for WooCommerce core price/badge defaults.
     Core ships a low-contrast yellow sale flash and a 50% opacity strikethrough
     price; both fail WCAG AA. Re-skin them onto the brand tokens, which meet
     the AA contrast ratio. */
  .onsale {
    background: var(--accent) !important; color: var(--accent-ink) !important;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.3rem 0.6rem; border-radius: 999px; font-weight: 600; min-height: 0; min-width: 0; line-height: 1.4;
  }
  /* Anchor the sale flash to its media wrapper. The theme trims WooCommerce
     core layout CSS for performance, which drops the default absolute
     positioning and lets the badge escape to the page corner; restore it. */
  .woocommerce div.product div.images,
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product { position: relative; }
  .woocommerce span.onsale {
    position: absolute !important; top: 0.8rem; left: 0.8rem; right: auto; bottom: auto;
    margin: 0 !important; z-index: 3;
  }
  del, del .amount, del.woocommerce-Price-amount, del .woocommerce-Price-amount {
    opacity: 1 !important; color: var(--ink-faint) !important; font-weight: 400;
  }
  ins, ins.woocommerce-Price-amount, ins .woocommerce-Price-amount { text-decoration: none; background: none; color: var(--accent); }

  /* =========================================================================
     Shop archive
     ========================================================================= */
  .shop-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 2rem;
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--line);
  }
  .shop-count { font-size: 0.92rem; color: var(--ink-soft); }
  .shop-sort { display: flex; align-items: center; gap: 0.6rem; }
  .shop-sort label { font-size: 0.82rem; color: var(--ink-faint); }
  .select {
    appearance: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); padding: 0.55rem 2.2rem 0.55rem 0.9rem;
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.8rem center;
  }
  .select:focus-visible { border-color: var(--accent); }

  .product-grid {
    display: grid; gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
  .product-card { display: flex; flex-direction: column; cursor: pointer; }
  .pc-media { position: relative; }
  .product-card .pc-media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    margin-bottom: 0.9rem;
  }
  .product-card .pc-media .ph { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; transition: transform 0.4s cubic-bezier(0.2,0,0.1,1); }
  .product-card:hover .pc-media .ph { transform: scale(1.03); }
  .pc-add {
    position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 2;
    opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
    justify-content: center;
  }
  .product-card:hover .pc-add, .product-card:focus-within .pc-add { opacity: 1; transform: translateY(0); }
  .pc-cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
  .pc-name { font-family: var(--font-head); font-size: 1.08rem; font-weight: 500; line-height: 1.25; margin: 0.3rem 0 0.45rem; }
  .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }

  /* =========================================================================
     Single product
     ========================================================================= */
  .product-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .gallery-main { position: relative; }
  .gallery-main .ph { aspect-ratio: 4 / 5; }
  .gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
  .gallery-thumbs .ph { aspect-ratio: 1; border-radius: var(--radius); cursor: pointer; }
  .gallery-thumbs .ph::after { display: none; }
  .gallery-thumbs button { border-radius: var(--radius); border: 2px solid transparent; padding: 0; overflow: hidden; }
  .gallery-thumbs button.is-active { border-color: var(--accent); }

  .product-info .p-cat { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .product-info h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0.6rem 0 1rem; }
  .product-price-row { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; flex-wrap: wrap; }
  .product-price-row .price { font-size: 1.9rem; }
  .p-short { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.75rem; }
  .stock-line { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 600; margin-bottom: 1.5rem; }
  .stock-line.in { color: var(--ok); }
  .stock-line.out { color: var(--ink-faint); }
  .stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  .buy-row { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .qty-stepper {
    display: inline-flex; align-items: center; border: 1px solid var(--line-strong);
    border-radius: var(--radius); overflow: hidden;
  }
  .qty-stepper button { width: 44px; height: 100%; min-height: 48px; display: grid; place-items: center; color: var(--ink-soft); }
  .qty-stepper button:hover { background: var(--paper-2); color: var(--ink); }
  .qty-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
  .qty-stepper input {
    width: 48px; text-align: center; border: none; border-inline: 1px solid var(--line);
    background: transparent; font-weight: 600; -moz-appearance: textfield;
  }
  .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .buy-row .btn-primary { flex: 1; min-width: 180px; justify-content: center; }
  .btn-wish { width: 48px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-soft); }
  .btn-wish:hover { color: var(--accent); border-color: var(--accent); }

  .p-meta { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 0.5rem; display: grid; gap: 0.45rem; }
  .p-meta .row { display: flex; gap: 0.6rem; font-size: 0.88rem; }
  .p-meta .row .k { color: var(--ink-faint); min-width: 92px; }
  .p-meta .row .v { color: var(--ink-soft); }
  .p-meta .row .v a { color: var(--accent); }

  /* Product tabs */
  .tabs { margin-top: clamp(3rem, 6vw, 5rem); }
  .tab-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .tab-btn {
    padding: 0.85rem 1.1rem; font-weight: 600; color: var(--ink-faint);
    border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.96rem;
  }
  .tab-btn:hover { color: var(--ink); }
  .tab-btn.is-active { color: var(--ink); border-bottom-color: var(--accent); }
  .tab-panel { padding-top: 2rem; }
  .spec-table { width: 100%; border-collapse: collapse; max-width: 560px; }
  .spec-table th, .spec-table td { text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .spec-table th { color: var(--ink-faint); font-weight: 500; width: 40%; }

  /* Reviews */
  .review-summary { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
  .review-big { font-family: var(--font-head); font-size: 3rem; font-weight: 600; line-height: 1; }
  .review-item { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
  .review-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
  .review-head .ra { font-weight: 600; }
  .review-head .rd { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); margin-left: auto; }

  /* =========================================================================
     Related / up-sell product lists (classic WooCommerce markup)
     ========================================================================= */
  .related.products, .upsells.products { margin-top: clamp(3rem, 6vw, 5rem); clear: both; }
  .related.products > h2, .upsells.products > h2 {
    font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.75rem; text-align: left;
  }
  .woocommerce ul.products, .woocommerce-page ul.products {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; float: none;
  }
  .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
  .woocommerce ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important; text-align: left;
  }
  .woocommerce ul.products li.product a img { margin: 0 0 0.9rem; border-radius: var(--radius-lg); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; padding: 0; margin: 0.2rem 0 0.4rem;
  }
  .woocommerce ul.products li.product .price { font-size: 1rem; color: var(--ink); }
  .woocommerce ul.products li.product .button { margin-top: 0.6rem; }

  /* =========================================================================
     Cart
     ========================================================================= */
  .cart-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
  .cart-line .cl-media .ph { aspect-ratio: 1; border-radius: var(--radius); }
  .cart-line .cl-media .ph::after { display: none; }
  .cl-name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 500; }
  .cl-cat { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 0.2rem; }
  .cl-remove { font-size: 0.82rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; }
  .cl-remove:hover { color: var(--accent); }
  .cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
  .cl-right .qty-stepper button { min-height: 40px; width: 38px; }
  .cl-right .qty-stepper input { width: 40px; }
  .cl-price { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }

  .order-summary { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .order-summary h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
  .sum-row { display: flex; justify-content: space-between; padding: 0.55rem 0; font-size: 0.95rem; color: var(--ink-soft); }
  .sum-row.total { border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem; font-size: 1.2rem; color: var(--ink); font-family: var(--font-head); font-weight: 600; }
  .coupon { display: flex; gap: 0.5rem; margin: 1.25rem 0; }
  .coupon input { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); padding: 0.6rem 0.85rem; font-size: 0.9rem; }
  .coupon input:focus-visible { border-color: var(--accent); }

  /* =========================================================================
     Forms (checkout, account)
     ========================================================================= */
  .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
  .field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
  .field .req { color: var(--accent); }
  .input, .field input, .field textarea, .field select {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); padding: 0.72rem 0.9rem; font-size: 0.95rem; width: 100%;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
  }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .checkout-layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .form-section { margin-bottom: 2.5rem; }
  .form-section h2 { font-size: 1.3rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }

  .pay-method { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.6rem; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease; }
  .pay-method.is-active { border-color: var(--accent); background: var(--accent-wash); }
  .pay-method .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; }
  .pay-method.is-active .radio { border-color: var(--accent); }
  .pay-method.is-active .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .mini-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9rem; }
  .mini-line .ml-name { color: var(--ink-soft); }
  .mini-line .ml-name b { color: var(--ink); font-weight: 600; }

  /* =========================================================================
     My account
     ========================================================================= */
  .account-layout { display: grid; grid-template-columns: 230px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .account-nav { display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .account-nav button {
    text-align: left; padding: 0.7rem 0.9rem; border-radius: var(--radius);
    font-weight: 500; color: var(--ink-soft); display: flex; align-items: center; gap: 0.6rem;
  }
  .account-nav button svg { width: 18px; height: 18px; }
  .account-nav button:hover { background: var(--paper-2); color: var(--ink); }
  .account-nav button.is-active { background: var(--accent-wash); color: var(--accent); }
  .account-nav .logout { margin-top: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.9rem; color: var(--ink-faint); }

  .order-table { width: 100%; border-collapse: collapse; }
  .order-table th { text-align: left; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0 0.9rem; border-bottom: 1px solid var(--line); }
  .order-table td { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
  .order-table .oid { font-family: var(--font-mono); font-weight: 600; }
  .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; }
  .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .status-pill.done { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
  .status-pill.shipping { color: var(--accent); background: var(--accent-wash); }
  .status-pill.cancel { color: var(--ink-faint); background: var(--paper-3); }

  .auth-card { max-width: 460px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--paper-2); }
  .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; background: var(--paper-3); padding: 0.3rem; border-radius: var(--radius); margin-bottom: 1.75rem; }
  .auth-tabs button { padding: 0.6rem; border-radius: calc(var(--radius) - 1px); font-weight: 600; color: var(--ink-soft); }
  .auth-tabs button.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
  .dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
  .dash-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
  .dash-card .dn { font-family: var(--font-head); font-size: 2rem; font-weight: 600; }
  .dash-card .dl { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.2rem; }

  /* =========================================================================
     Order received
     ========================================================================= */
  .order-done { text-align: center; max-width: 640px; margin-inline: auto; }
  .order-check { width: 72px; height: 72px; border-radius: 50%; background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); display: grid; place-items: center; margin: 0 auto 1.5rem; }
  .order-check svg { width: 36px; height: 36px; }
  .order-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.25rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin: 2.5rem 0; }
  .order-meta-grid .omk { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
  .order-meta-grid .omv { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin-top: 0.3rem; }

  /* steps */
  .steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: 2rem 0 0; }
  .step { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-faint); font-size: 0.82rem; font-weight: 600; }
  .step .sn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 0.75rem; }
  .step.done { color: var(--ok); } .step.done .sn { border-color: var(--ok); background: var(--ok); color: var(--paper); }
  .step.cur { color: var(--accent); } .step.cur .sn { border-color: var(--accent); color: var(--accent); }
  .step-line { width: clamp(20px, 6vw, 60px); height: 2px; background: var(--line); margin: 0 0.5rem; }

  /* =========================================================================
     Comments (single post)
     ========================================================================= */
  .comments { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.5rem; border-top: 1px solid var(--line); }
  .comments > h2 { font-size: 1.5rem; margin-bottom: 2rem; }
  .comment { display: flex; gap: 1rem; padding: 1.4rem 0; }
  .comment.reply { margin-left: 3.2rem; border-top: 1px solid var(--line); }
  .comment-body .cm-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
  .comment-body .cm-name { font-weight: 600; }
  .comment-body .cm-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); }
  .comment-body p { color: var(--ink-soft); font-size: 0.96rem; }
  .cm-reply { font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-top: 0.5rem; display: inline-block; }
  .comment-form { margin-top: 2.5rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
  .comment-form h3 { font-size: 1.2rem; margin-bottom: 1.25rem; }

  /* =========================================================================
     Template index
     ========================================================================= */
  .tpl-group { margin-bottom: 3rem; }
  .tpl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 1.5rem; }
  .tpl-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; text-align: left; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; display: flex; flex-direction: column; gap: 0.5rem; }
  .tpl-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .tpl-card .tc-tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .tpl-card h3 { font-size: 1.15rem; }
  .tpl-card p { font-size: 0.88rem; color: var(--ink-soft); }
  .tpl-card .tc-go { margin-top: auto; font-size: 0.84rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 0.35rem; }

  /* cart badge in header */
  .cart-btn { position: relative; }
  .cart-count {
    position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--accent); color: var(--accent-ink); border-radius: 999px;
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }

  /* =========================================================================
     Responsive
     ========================================================================= */
  @media (max-width: 900px) {
    .product-layout { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-nav { flex-direction: row; flex-wrap: wrap; position: static; }
    .order-summary { position: static; }
  }
  @media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
    .cart-line { grid-template-columns: 72px 1fr; }
    .cart-line .cl-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .order-table thead { display: none; }
    .order-table td { display: block; padding: 0.3rem 0; border: none; }
    .order-table tr { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); }
    .review-summary { gap: 1rem; }
  }

  /* =========================================================================
     Live WooCommerce bridge.

     The design system above targets the bespoke mockup classes (.cart-layout,
     .order-summary, .account-nav ...). The cart/checkout/my-account templates
     render the real WooCommerce block or shortcode through post-content, so the
     markup that ships to the browser carries WooCommerce's own classes. These
     rules adopt that live markup into the mockup look without renaming any
     design class: the template wrappers (.cart-layout-wrap, .checkout-layout-
     wrap, .account-layout-wrap) scope the bridge so it never leaks elsewhere.
     Both the block-based (wc-block-*) and the classic shortcode markup
     (woocommerce-cart-form, .woocommerce-MyAccount-*) are covered.
     ========================================================================= */

  /* ----- Cart (block + shortcode) --------------------------------------- */
  .cart-layout-wrap .wp-block-woocommerce-cart .wc-block-cart,
  .cart-layout-wrap .woocommerce > .woocommerce-cart-form,
  .cart-layout-wrap form.woocommerce-cart-form {
    display: grid; grid-template-columns: 1.6fr 0.9fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  /* Block cart: items column + totals card. */
  .cart-layout-wrap .wc-block-cart__main { min-width: 0; }
  .cart-layout-wrap .wc-block-cart__sidebar .wc-block-components-sidebar,
  .cart-layout-wrap .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.75rem;
    position: sticky; top: calc(var(--header-h) + 1.5rem);
  }
  .cart-layout-wrap .wc-block-cart-items,
  .cart-layout-wrap .woocommerce-cart-form table.cart {
    border: none; margin: 0; width: 100%;
  }
  .cart-layout-wrap .wc-block-cart-items th,
  .cart-layout-wrap .woocommerce-cart-form table.cart thead { display: none; }
  .cart-layout-wrap .wc-block-cart-items__row,
  .cart-layout-wrap .woocommerce-cart-form table.cart tr.cart_item {
    border-bottom: 1px solid var(--line); padding: 1.25rem 0;
  }
  .cart-layout-wrap .wc-block-cart-item__product .wc-block-components-product-name,
  .cart-layout-wrap .woocommerce-cart-form .product-name a {
    font-family: var(--font-head); font-size: 1.1rem; font-weight: 500;
    color: var(--ink); text-decoration: none;
  }
  .cart-layout-wrap .wc-block-components-product-price,
  .cart-layout-wrap .woocommerce-cart-form .product-subtotal {
    font-family: var(--font-head); font-weight: 600; color: var(--ink);
  }

  /* Classic shortcode cart totals card. */
  .cart-layout-wrap .cart-collaterals .cart_totals,
  .cart-layout-wrap .cart_totals {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.75rem; float: none; width: auto;
  }
  .cart-layout-wrap .cart_totals h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }
  .cart-layout-wrap .cart_totals table tr {
    display: flex; justify-content: space-between; padding: 0.55rem 0;
    font-size: 0.95rem; color: var(--ink-soft);
  }
  .cart-layout-wrap .cart_totals table tr.order-total {
    border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem;
    font-size: 1.2rem; color: var(--ink); font-family: var(--font-head); font-weight: 600;
  }
  .cart-layout-wrap .coupon { display: flex; gap: 0.5rem; margin: 1.25rem 0; }
  .cart-layout-wrap .coupon input[type="text"] {
    flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); padding: 0.6rem 0.85rem; font-size: 0.9rem;
  }

  /* ----- Checkout (block + shortcode) ----------------------------------- */
  .checkout-layout-wrap .wp-block-woocommerce-checkout .wc-block-checkout,
  .checkout-layout-wrap form.checkout.woocommerce-checkout {
    display: grid; grid-template-columns: 1.4fr 0.9fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  .checkout-layout-wrap .wc-block-checkout__main,
  .checkout-layout-wrap #customer_details { min-width: 0; }
  /* Order-summary card on both layouts. */
  .checkout-layout-wrap .wc-block-checkout__sidebar,
  .checkout-layout-wrap #order_review,
  .checkout-layout-wrap .woocommerce-checkout-review-order {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.75rem;
    position: sticky; top: calc(var(--header-h) + 1.5rem);
  }
  .checkout-layout-wrap .form-row,
  .checkout-layout-wrap .wc-block-components-text-input { margin-bottom: 1.1rem; }
  .checkout-layout-wrap input[type="text"],
  .checkout-layout-wrap input[type="email"],
  .checkout-layout-wrap input[type="tel"],
  .checkout-layout-wrap input[type="password"],
  .checkout-layout-wrap select,
  .checkout-layout-wrap textarea {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); padding: 0.72rem 0.9rem;
    font-size: 0.95rem; width: 100%;
  }
  .checkout-layout-wrap .order-total th,
  .checkout-layout-wrap .order-total td {
    font-family: var(--font-head); font-weight: 600; color: var(--ink);
  }
  /* Classic payment methods adopt the .pay-method radio look. */
  .checkout-layout-wrap .wc_payment_methods li {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 1rem; margin-bottom: 0.6rem; list-style: none;
  }

  /* ----- My account (shortcode/block) ----------------------------------- */
  .account-layout-wrap .woocommerce-account .woocommerce,
  .account-layout-wrap .woocommerce {
    display: grid; grid-template-columns: 230px 1fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation {
    position: sticky; top: calc(var(--header-h) + 1.5rem); float: none; width: auto;
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.15rem;
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation li a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem; border-radius: var(--radius);
    font-weight: 500; color: var(--ink-soft); text-decoration: none;
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation li a:hover {
    background: var(--paper-2); color: var(--ink);
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--accent-wash); color: var(--accent);
  }
  .account-layout-wrap .woocommerce-MyAccount-navigation li--woocommerce-MyAccount-navigation-link--customer-logout a {
    margin-top: 0.5rem; border-top: 1px solid var(--line);
    padding-top: 0.9rem; color: var(--ink-faint);
  }
  .account-layout-wrap .woocommerce-MyAccount-content { min-width: 0; float: none; width: auto; }
  /* Orders table adopts the .order-table look. */
  .account-layout-wrap .woocommerce-orders-table,
  .account-layout-wrap table.shop_table { width: 100%; border-collapse: collapse; }
  .account-layout-wrap .woocommerce-orders-table th,
  .account-layout-wrap table.shop_table th {
    text-align: left; font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
    padding: 0 0 0.9rem; border-bottom: 1px solid var(--line);
  }
  .account-layout-wrap .woocommerce-orders-table td,
  .account-layout-wrap table.shop_table td {
    padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem;
  }

  /* ----- Order received (thank you) ------------------------------------- */
  /* Classic woocommerce_thankyou renders inside the checkout/page template;
     the wrapper restyles the confirmation header into the .order-done block. */
  .woocommerce-order .woocommerce-order-received,
  .order-done-wrap .woocommerce-order { text-align: center; max-width: 640px; margin-inline: auto; }
  .woocommerce-order .woocommerce-thankyou-order-received {
    font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 600; color: var(--ink); margin-bottom: 1rem;
  }
  .woocommerce-order ul.woocommerce-order-overview.order_details {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.25rem; text-align: left; list-style: none; margin: 2.5rem 0; padding: 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
  }
  .woocommerce-order ul.woocommerce-order-overview.order_details li {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint); border: none;
  }
  .woocommerce-order ul.woocommerce-order-overview.order_details li strong {
    display: block; font-family: var(--font-head); font-size: 1.05rem;
    font-weight: 600; color: var(--ink); margin-top: 0.3rem; text-transform: none; letter-spacing: 0;
  }

  @media (max-width: 900px) {
    .cart-layout-wrap .wp-block-woocommerce-cart .wc-block-cart,
    .cart-layout-wrap form.woocommerce-cart-form,
    .checkout-layout-wrap .wp-block-woocommerce-checkout .wc-block-checkout,
    .checkout-layout-wrap form.checkout.woocommerce-checkout,
    .account-layout-wrap .woocommerce { grid-template-columns: 1fr; }
    .account-layout-wrap .woocommerce-MyAccount-navigation { position: static; }
    .account-layout-wrap .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
  }
}

@layer woocommerce {
  /* Ensure the WooCommerce Cart/Checkout blocks fill the wrap so their own
     responsive two-column (main + sidebar) layout engages at desktop width. */
  .woocommerce-cart .wp-block-woocommerce-cart,
  .woocommerce-cart .wc-block-cart,
  .woocommerce-checkout .wp-block-woocommerce-checkout,
  .woocommerce-checkout .wc-block-checkout { width: 100%; max-width: 100%; }
  .wc-block-cart-items__row .wc-block-cart-item__image img,
  td.product-thumbnail img { max-width: 100px; height: auto; }
}