/* ==========================================================================
   WooCommerce mapping layer.
   WC's own stylesheets are dequeued in functions.php, so this file supplies the
   small "WC base" that removal takes away, and maps WC class names onto
   components that already exist in style.css. Nothing here restyles a mockup
   component; it only makes WC markup wear the mockup's clothes.
   ========================================================================== */

/* ---- notices ------------------------------------------------------------ */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 22px;padding:15px 18px;border-radius:var(--r);
  border:1px solid var(--line-cool);background:var(--sky);color:var(--ink-2);font-size:15px;
}
.woocommerce-error{background:#FDF0F2;border-color:#F3D3D8;color:#8C1024}
.woocommerce-message a,.woocommerce-info a{color:var(--navy);text-decoration:underline}
.woocommerce-error li{margin:0}
.wc-block-components-notice-banner{display:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- forms: WC ships label-beside-input, the mockup is label-above ------- */
.woocommerce form .form-row{display:block;margin:0 0 18px}
.woocommerce form .form-row label{
  display:block;font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.woocommerce form .form-row label.checkbox,.woocommerce form .form-row .checkbox{
  display:flex;gap:11px;align-items:flex-start;font-family:var(--font-b);font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--ink-2);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  width:100%;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;outline:0;
  background:#fff;font:inherit;font-size:16px;color:var(--ink);min-width:0;height:auto;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,42,71,.07);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{
  border-color:var(--rbf);box-shadow:0 0 0 3px rgba(200,16,46,.09);
}
.woocommerce form .form-row .required{color:var(--rbf);text-decoration:none}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%;float:none;padding:0}
.select2-container--default .select2-selection--single{display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:inherit;color:var(--ink)}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:12px}
.select2-dropdown{border-color:var(--line);border-radius:var(--r);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--navy)}
.cstep .field--2 .form-row{margin-bottom:0}

/* ---- WC buttons inherit the mockup button -------------------------------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 30px;border-radius:var(--r);border:1.5px solid var(--navy);
  background:var(--navy);color:#fff;cursor:pointer;
  font-family:var(--font-d);font-weight:700;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce .button:hover{background:#0A203A;color:#fff}
.woocommerce .button[disabled],.woocommerce .button:disabled{opacity:.45;pointer-events:none}

/* ---- quantity stepper: a bare number input defaults to ~150px ------------ */
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);height:44px;overflow:hidden;flex:none}
.quantity input.qty{
  width:46px;height:100%;text-align:center;border:0;outline:0;background:none;
  font-family:var(--font-m);font-size:14px;-moz-appearance:textfield;padding:0;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity .qbtn{width:36px;height:100%;display:grid;place-items:center;color:var(--ink-2);background:none;border:0;cursor:pointer}
.quantity .qbtn:hover{color:var(--navy)}
.quantity .qbtn svg{width:14px;height:14px}

/* ---- prices -------------------------------------------------------------- */
.woocommerce-Price-amount{font-family:var(--font-d);font-weight:700}
del .woocommerce-Price-amount{font-family:var(--font-b);font-weight:400}
.woocommerce del{color:var(--muted);font-size:.82em}
.woocommerce ins{text-decoration:none;background:none}

/* ---- checkout ------------------------------------------------------------ */
#order_review_heading{display:none}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0}
.woocommerce-checkout #payment ul.payment_methods li{margin:0}
.woocommerce-checkout #payment div.payment_box{
  display:flex;gap:13px;align-items:flex-start;background:var(--sky);border:1px solid var(--line-cool);
  border-radius:var(--r);padding:16px 18px;margin:6px 0 14px;font-size:14.5px;color:var(--ink-2);position:relative;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.payment_box p{margin:0}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:0}
.woocommerce-checkout #payment .wc_payment_method>label{
  display:flex;gap:14px;align-items:center;border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;transition:.2s var(--ease);margin-bottom:11px;
  font-family:var(--font-b);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;
}
.woocommerce-checkout #payment .wc_payment_method>label:hover{border-color:#C9C0AE}
.woocommerce-checkout #payment .wc_payment_method input[type=radio]{
  appearance:none;width:19px;height:19px;border:1.5px solid var(--line);border-radius:50%;flex:none;
  cursor:pointer;transition:.2s var(--ease);margin:0;
}
.woocommerce-checkout #payment .wc_payment_method input[type=radio]:checked{border-color:var(--navy);border-width:6px}
.woocommerce-checkout .blockUI.blockOverlay{background:rgba(255,255,255,.7) !important}
.woocommerce-privacy-policy-text{font-size:13px;color:var(--muted)}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:18px}
#ship-to-different-address{margin:0 0 14px}
#ship-to-different-address span{font-family:var(--font-b);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3{
  font-size:17px;text-transform:uppercase;color:var(--navy);letter-spacing:.04em;margin:0 0 16px;
}
.woocommerce-form-login,.woocommerce-form-coupon{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:22px;background:#fff;
}
.woocommerce-form-coupon-toggle{margin-bottom:16px}

.shop_table{width:100%;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{
  padding:11px 0;text-align:left;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right}
.woocommerce-checkout-review-order-table tfoot th{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{border-bottom:0;padding-top:18px}
.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount{font-size:26px;color:var(--navy)}
.woocommerce-checkout-review-order-table .product-name{padding-right:14px}
#shipping_method{list-style:none;margin:0;padding:0;text-align:right}
#shipping_method li{margin:0 0 6px}
#shipping_method label{font-size:14.5px;color:var(--ink-2)}

/* ---- my account ---------------------------------------------------------- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:15px 20px;font-family:var(--font-d);font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:.2s var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--paper);color:var(--navy)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--navy);color:#fff}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0}
.woocommerce-account:not(.logged-in) .woocommerce{grid-template-columns:minmax(0,1fr);max-width:470px;margin-inline:auto}
.woocommerce-orders-table,.woocommerce-table--order-details{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.woocommerce-orders-table th,.woocommerce-table--order-details th{
  background:var(--paper);padding:14px 16px;text-align:left;font-family:var(--font-m);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.woocommerce-orders-table td,.woocommerce-table--order-details td{padding:16px;border-top:1px solid var(--line);font-size:15px}
.woocommerce-Address{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-top:14px}
.woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.woocommerce-Address-title h2,.woocommerce-Address-title h3{font-size:17px;text-transform:uppercase;color:var(--navy)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-size:20px;text-transform:uppercase;color:var(--navy);margin:0 0 16px}
.woocommerce-MyAccount-content p{font-size:15.5px;color:var(--ink-2)}
.woocommerce-MyAccount-content mark{background:none;color:var(--navy);font-weight:600}
.woocommerce-form__label-for-checkbox{display:flex;gap:10px;align-items:center}
.woocommerce fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin:22px 0}
.woocommerce fieldset legend{padding:0 8px;font-family:var(--font-d);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}

/* ---- pagination ---------------------------------------------------------- */
.woocommerce-pagination ul{list-style:none;display:flex;gap:8px;justify-content:center;margin:40px 0 0;padding:0}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--font-m);font-size:14px;color:var(--ink-2);
}
.woocommerce-pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:760px){
  .woocommerce-orders-table thead,.woocommerce-table--order-details thead{display:none}
  .woocommerce-orders-table tr,.woocommerce-table--order-details tr{display:block;border-top:1px solid var(--line)}
  .woocommerce-orders-table td,.woocommerce-table--order-details td{display:flex;justify-content:space-between;gap:14px;border:0;padding:9px 16px}
  .woocommerce-orders-table td::before,.woocommerce-table--order-details td::before{
    content:attr(data-title);font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);
  }
}

/* ---- product reviews ------------------------------------------------------
   A bare textarea carries an intrinsic `cols` width (~380px) and spills past a
   375px viewport, so pin it. Same root cause as the cart-page overflow. */
#reviews .woocommerce-Reviews{max-width:100%}
#reviews textarea,.comment-form textarea,.woocommerce textarea{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;outline:0;
  font:inherit;font-size:16px;min-height:130px;resize:vertical;background:#fff;
}
#reviews textarea:focus,.comment-form textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,42,71,.07)}
#reviews input[type=text],#reviews input[type=email]{
  width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;outline:0;font:inherit;font-size:16px;background:#fff;
}
#reviews .comment-form label,#reviews .comment-reply-title{
  display:block;font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
#reviews .comment-reply-title{
  font-family:var(--font-d);font-size:22px;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--navy);margin:0 0 18px;font-weight:700;
}
#reviews .comment-form p{margin:0 0 18px}
#reviews .commentlist{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:18px}
#reviews .commentlist li{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff;
}
#reviews .comment_container{display:flex;gap:16px;align-items:flex-start}
#reviews .comment_container img.avatar{width:44px;height:44px;border-radius:50%;flex:none}
#reviews .comment-text{flex:1;min-width:0}
#reviews .meta{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
#reviews .meta strong{color:var(--ink);font-weight:600}
#reviews .description p{margin:0;font-size:15px;color:var(--ink-2)}
#reviews .woocommerce-noreviews{color:var(--muted);font-size:15px;margin:0 0 22px}
#reviews .stars a{color:var(--brass-2)}
.woocommerce-Reviews-title{font-family:var(--font-d);font-size:26px;text-transform:uppercase;color:var(--navy);margin:0 0 20px;letter-spacing:-.01em}

/* ---- star ratings ---------------------------------------------------------
   Dequeuing WooCommerce's stylesheet also removes its `star` webfont, which its
   markup depends on. Rebuild both the read-only display and the review-form
   picker from plain characters so nothing external is needed. */
.star-rating,.woocommerce .star-rating{
  position:relative;display:inline-block;overflow:hidden;white-space:nowrap;
  width:5.6em;height:1.25em;line-height:1.25;font-size:14px;font-family:var(--font-b);flex:none;
}
.star-rating::before{
  content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0;color:#D9D2C4;letter-spacing:.06em;
}
.star-rating span{position:absolute;left:0;top:0;overflow:hidden;padding-top:1.5em;height:0}
.star-rating span::before{
  content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0;color:var(--brass-2);letter-spacing:.06em;
}
.woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:14px}

/* review form picker */
#reviews p.stars{display:flex;gap:4px;margin:0 0 18px}
#reviews p.stars a{
  position:relative;width:1.5em;height:1.5em;text-indent:-9999px;overflow:hidden;
  display:inline-block;text-decoration:none;
}
#reviews p.stars a::before{
  content:"\2605";position:absolute;left:0;top:0;width:100%;height:100%;
  text-indent:0;font-size:22px;line-height:1;color:#D9D2C4;transition:color .15s var(--ease);
}
#reviews p.stars:hover a::before{color:var(--brass-2)}
#reviews p.stars a:hover ~ a::before{color:#D9D2C4}
#reviews p.stars.selected a.active::before,
#reviews p.stars.selected a.active ~ a::before{color:#D9D2C4}
#reviews p.stars.selected a::before{color:var(--brass-2)}
#reviews p.stars.selected a.active::before{color:var(--brass-2)}