/* ==========================================================================
   Spiffy Meds — WooCommerce: shop, product, cart, checkout, account
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop / category archive shell
   -------------------------------------------------------------------------- */
.sm-shop{ padding:70px 0; }
.sm-shop__row{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.sm-shop__sidebar{ flex:0 0 25%; max-width:25%; padding:0 15px; }
.sm-shop__main{ flex:0 0 75%; max-width:75%; padding:0 15px; }

/* category sidebar */
.sm-sidebar__title{
  background-color:var(--sm-navy-dark); color:var(--sm-white); font-size:22px; font-weight:400;
  padding:18px; text-align:center; margin:0;
}
.sm-sidebar__box{ background-color:var(--sm-grey-bg); padding:10px 0 20px; margin-bottom:30px; }
.sm-sidebar__box ul{ list-style:none; margin:0; padding:0; }
.sm-sidebar__box li{ display:block; }
.sm-sidebar__box li a{
  display:block; padding:12px 18px 12px 34px; font-size:15px; color:var(--sm-black); position:relative;
}
.sm-sidebar__box li a::before{
  content:""; position:absolute; left:18px; top:50%; width:6px; height:6px;
  border-right:1.6px solid var(--sm-black); border-bottom:1.6px solid var(--sm-black);
  transform:translateY(-50%) rotate(-45deg); transition:border-color .3s;
}
.sm-sidebar__box li a:hover{ color:var(--sm-navy); }
.sm-sidebar__box li a:hover::before{ border-color:var(--sm-navy); }
.sm-sidebar__box li.current-cat > a{ color:var(--sm-navy); font-weight:600; }
.sm-sidebar__box .children{ padding-left:16px; }
.sm-sidebar__box .children li a{ font-size:14px; padding-top:9px; padding-bottom:9px; }

/* result-count + sorting bar */
.sm-shop__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background-color:var(--sm-grey-bg); padding:20px; margin-bottom:50px;
}
.woocommerce-result-count{ font-size:16px; color:var(--sm-black); text-transform:capitalize; margin:0; }
.woocommerce-ordering{ margin:0; }
.woocommerce-ordering select{
  font-size:14px; padding:10px 15px; border:1px solid var(--sm-blue); border-radius:0;
  background-color:var(--sm-white); color:var(--sm-black); font-family:var(--sm-font);
  min-width:223px; cursor:pointer;
}

/* --------------------------------------------------------------------------
   2. Product grid + card
   -------------------------------------------------------------------------- */
ul.products{
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px 32px;
  list-style:none; margin:0; padding:0;
}
ul.products.columns-4{ grid-template-columns:repeat(4,1fr); }
ul.products.columns-2{ grid-template-columns:repeat(2,1fr); }
/* WooCommerce's own layout CSS floats and percentage-sizes these
   (`.woocommerce ul.products.columns-3 li.product { width:30.75% }`), so the
   override has to match that specificity. The grid owns sizing here. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
ul.products li.product{
  display:flex; flex-direction:column; text-align:center;
  width:auto; float:none; margin:0; padding:0; clear:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none; }
ul.products li.product .sm-card__media{ position:relative; display:block; overflow:hidden; background:var(--sm-grey-bg); }
ul.products li.product img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .5s ease; }
ul.products li.product .sm-card__media:hover img{ transform:scale(1.05); }
ul.products li.product .woocommerce-loop-product__title{
  font-size:16px; font-weight:700; text-transform:uppercase; color:var(--sm-black);
  padding:8px 0; margin:0; line-height:22px; font-family:var(--sm-font);
}
ul.products li.product .price{
  font-size:18px; font-weight:400; color:var(--sm-blue); margin:0; display:block; font-family:var(--sm-font);
}
ul.products li.product .price del{ color:var(--sm-muted); opacity:.7; margin-right:6px; font-size:15px; }
ul.products li.product .price ins{ text-decoration:none; color:var(--sm-blue); }
ul.products li.product .button{ margin-top:16px; align-self:center; padding:15px; font-size:16px; }
ul.products li.product .sm-card__foot{ margin-top:auto; }

/* sale / stock badges */
.sm-badge{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--sm-navy); color:var(--sm-white);
  font-size:12px; font-weight:600; text-transform:uppercase; padding:5px 11px; letter-spacing:.4px;
}
.sm-badge--out{ background:#777; }

/* --------------------------------------------------------------------------
   3. Single product
   -------------------------------------------------------------------------- */
.sm-product{ padding:50px 0 70px; }
.woocommerce-breadcrumb{
  font-size:14px; color:var(--sm-muted); padding-bottom:26px; font-family:var(--sm-font);
}
.woocommerce-breadcrumb a{ font-size:14px; color:var(--sm-black); }
.woocommerce-breadcrumb a:hover{ color:var(--sm-navy); }
.woocommerce-breadcrumb .sm-bc-sep{ padding:0 8px; color:var(--sm-muted); }

div.product{ display:flex; flex-wrap:wrap; margin:0 -15px; }
div.product .sm-gallery{ flex:0 0 50%; max-width:50%; padding:0 15px; }
div.product .summary{ flex:0 0 50%; max-width:50%; padding:0 15px; }
div.product .woocommerce-tabs,
div.product .related,
div.product .up-sells{ flex:0 0 100%; max-width:100%; padding:0 15px; }

/* gallery */
.sm-gallery__main{ position:relative; background:var(--sm-grey-bg); overflow:hidden; }
.sm-gallery__main img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.sm-gallery__thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.sm-gallery__thumb{
  flex:0 0 calc(20% - 8px); border:1px solid transparent; cursor:pointer;
  background:var(--sm-grey-bg); overflow:hidden; padding:0;
}
.sm-gallery__thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.sm-gallery__thumb.is-active{ border-color:var(--sm-navy); }

/* summary */
.summary .product_title{
  font-size:35px; font-weight:700; color:var(--sm-black); line-height:normal;
  margin:0; font-family:var(--sm-font);
}
.summary .price{
  font-size:22px; font-weight:500; color:var(--sm-blue); padding:28px 0 0; margin:0; display:block;
}
.summary .price del{ color:var(--sm-muted); font-size:18px; margin-right:8px; font-weight:400; }
.summary .price ins{ text-decoration:none; color:var(--sm-blue); }
.woocommerce-product-details__short-description{ padding:30px 0; font-size:14px; line-height:24px; }
.woocommerce-product-details__short-description p{ font-size:14px; line-height:24px; margin-bottom:12px; }

/* variation swatches (native — mirrors the reference swatch UI) */
table.variations{ width:100%; margin-bottom:18px; border:0; }
table.variations tr{ display:block; margin-bottom:18px; }
table.variations th,
table.variations td{ display:block; padding:0; border:0; }
table.variations th.label label{
  font-size:20px; font-weight:600; color:var(--sm-black); margin-bottom:10px; display:block;
  font-family:var(--sm-font); text-transform:capitalize;
}
.sm-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.sm-swatch{
  cursor:pointer; border:1px solid #ccc; background:var(--sm-white); transition:all .2s ease;
  font-family:var(--sm-font); position:relative; padding:0;
}
.sm-swatch--color{ width:34px; height:34px; border-radius:0; }
.sm-swatch--color .sm-swatch__chip{ display:block; width:100%; height:100%; }
.sm-swatch--label{ min-width:58px; padding:8px 12px; font-size:13px; color:var(--sm-black); text-transform:capitalize; }
.sm-swatch:hover{ border-color:var(--sm-navy); }
.sm-swatch.is-selected{ border-color:var(--sm-navy); box-shadow:0 0 0 1px var(--sm-navy); }
.sm-swatch.is-disabled{ opacity:.35; cursor:not-allowed; }
.sm-swatch.is-disabled::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top right,
  transparent calc(50% - 1px), #999 50%, transparent calc(50% + 1px));
}
.woo-variation-raw-select{ display:none!important; }
.reset_variations{
  display:inline-block; font-size:13px; color:var(--sm-muted); margin-top:6px; text-decoration:underline;
}
.woocommerce-variation-price{ margin-bottom:14px; }
.woocommerce-variation-price .price{ padding-top:0; font-size:22px; }
.woocommerce-variation-availability p{ font-size:14px; margin-bottom:10px; }

/* quantity + add to cart */
.sm-cart-row{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; margin-top:6px; }
.quantity{ display:inline-flex; align-items:stretch; border:1px solid var(--sm-black); height:48px; }
.quantity button{
  width:40px; background:transparent; border:0; cursor:pointer; font-size:18px; line-height:1;
  color:var(--sm-black); font-family:var(--sm-font); transition:background .2s;
}
.quantity button:hover{ background:var(--sm-grey-bg); }
.quantity input.qty{
  width:52px; border:0; border-left:1px solid var(--sm-border); border-right:1px solid var(--sm-border);
  text-align:center; font-size:15px; font-family:var(--sm-font); color:var(--sm-black);
  -moz-appearance:textfield; background:var(--sm-white);
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
button.single_add_to_cart_button{
  font-size:14px; font-weight:500; text-transform:uppercase; padding:16px 26px;
  border:1px solid var(--sm-black); background:transparent; color:var(--sm-black);
  border-radius:0; cursor:pointer; font-family:var(--sm-font);
  position:relative; z-index:1; overflow:hidden; transition:.3s ease all; box-shadow:var(--sm-shadow-btn);
}
button.single_add_to_cart_button::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-navy); opacity:0; z-index:-1; transition:.5s all ease;
}
button.single_add_to_cart_button:hover{ color:var(--sm-white); border-color:var(--sm-navy); }
button.single_add_to_cart_button:hover::before{ left:0; right:0; opacity:1; }
button.single_add_to_cart_button.disabled{ opacity:.5; cursor:not-allowed; }
.woocommerce-variation-add-to-cart--disabled button{ opacity:.5; pointer-events:none; }

/* product meta */
.product_meta{ margin-top:28px; padding-top:20px; border-top:1px solid var(--sm-border); }
.product_meta > span{ display:block; font-size:14px; margin-bottom:8px; color:var(--sm-black); }
.product_meta a{ font-size:14px; color:var(--sm-navy); }
.product_meta a:hover{ text-decoration:underline; }

/* tabs */
.woocommerce-tabs{ margin-top:60px; }
.woocommerce-tabs ul.tabs{ display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0 0 -1px; padding:0; border-bottom:1px solid var(--sm-border); }
.woocommerce-tabs ul.tabs li{ display:block; }
.woocommerce-tabs ul.tabs li a{
  display:block; padding:14px 26px; font-size:15px; font-weight:600; color:var(--sm-black);
  text-transform:uppercase; border:1px solid transparent; border-bottom:0; background:transparent;
}
.woocommerce-tabs ul.tabs li.active a{
  background:var(--sm-white); border-color:var(--sm-border); color:var(--sm-navy);
}
.woocommerce-tabs .panel{ padding:28px 0; }
.woocommerce-tabs .panel h2{ font-size:22px; font-weight:600; margin-bottom:14px; }
.shop_attributes{ width:100%; }
.shop_attributes th,.shop_attributes td{ border:1px solid var(--sm-border); padding:10px 14px; font-size:15px; }
.shop_attributes th{ width:220px; font-weight:600; background:var(--sm-grey-bg); }
.shop_attributes td p{ font-size:15px; margin:0; }

/* related */
.related, .up-sells{ margin-top:60px; }
.related > h2, .up-sells > h2{
  font-size:30px; font-weight:600; text-transform:uppercase; margin-bottom:30px; color:var(--sm-black);
}
.related ul.products, .up-sells ul.products{ grid-template-columns:repeat(4,1fr); gap:36px 24px; }

/* reviews */
#reviews .commentlist{ list-style:none; margin:0 0 24px; padding:0; }
#reviews .commentlist li{ display:block; border-bottom:1px solid var(--sm-border); padding:18px 0; }
#reviews .comment-text p{ font-size:15px; line-height:24px; }
.woocommerce-Reviews-title{ font-size:20px; font-weight:600; margin-bottom:16px; }
#review_form .comment-form label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
#review_form .comment-form input[type="text"],
#review_form .comment-form input[type="email"],
#review_form .comment-form textarea{
  width:100%; border:1px solid var(--sm-border); padding:11px 13px; font-family:var(--sm-font);
  font-size:15px; margin-bottom:14px;
}
.stars a{ font-size:15px; margin-right:4px; color:var(--sm-navy); }

/* --------------------------------------------------------------------------
   4. Cart
   -------------------------------------------------------------------------- */
.sm-woo-page{ padding:50px 0 80px; }
.woocommerce-cart-form table.shop_table{ width:100%; border:1px solid var(--sm-border); margin-bottom:30px; }
/* Navy header applies to the items table head only — not the totals table,
   which uses <th> for its row labels. */
table.shop_table thead th{
  background:var(--sm-navy); color:var(--sm-white); font-size:14px; font-weight:600;
  text-transform:uppercase; padding:15px; text-align:left;
}
table.shop_table tbody th{ padding:15px; font-weight:600; text-align:left; }
table.shop_table td{ padding:16px 15px; border-top:1px solid var(--sm-border); font-size:15px; vertical-align:middle; }
table.shop_table td.product-thumbnail img{ width:78px; height:78px; object-fit:cover; display:block; }
table.shop_table td.product-name a{ font-size:15px; font-weight:600; color:var(--sm-black); }
table.shop_table td.product-name a:hover{ color:var(--sm-navy); }
table.shop_table .variation{ font-size:13px; color:var(--sm-muted); margin-top:4px; }
table.shop_table .variation p{ font-size:13px; margin:0; }
td.product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--sm-grey-bg); color:var(--sm-black); font-size:18px; line-height:1;
}
td.product-remove a.remove:hover{ background:#cd2027; color:var(--sm-white); }
.cart-collaterals{ display:flex; justify-content:flex-end; }
.cart_totals{ width:100%; max-width:440px; border:1px solid var(--sm-border); padding:24px; }
.cart_totals h2{ font-size:20px; font-weight:600; text-transform:uppercase; margin-bottom:16px; }
.cart_totals table{ width:100%; }
.cart_totals th,.cart_totals td{ padding:11px 0; font-size:15px; border-bottom:1px solid var(--sm-border); }
.cart_totals th{ font-weight:600; text-align:left; }
.cart_totals td{ text-align:right; }
.cart_totals .order-total th,.cart_totals .order-total td{ font-size:17px; font-weight:700; border-bottom:0; }
.wc-proceed-to-checkout{ margin-top:18px; }
.wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; text-align:center; }
.coupon{ display:flex; gap:10px; align-items:stretch; }
.coupon input[type="text"]{
  border:1px solid var(--sm-black); padding:12px 14px; font-family:var(--sm-font); font-size:14px; min-width:200px;
}
.actions{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; padding:18px 0; }
.cart-empty{ font-size:18px; text-align:center; padding:40px 0 20px; }
.return-to-shop{ text-align:center; padding-bottom:30px; }

/* --------------------------------------------------------------------------
   5. Checkout
   -------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ flex:0 0 50%; max-width:50%; padding:0 15px; }
#customer_details h3, #order_review_heading{
  font-size:20px; font-weight:600; text-transform:uppercase; margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid var(--sm-border);
}
.woocommerce-checkout .form-row{ margin-bottom:16px; }
.woocommerce-checkout .form-row label{ display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
.woocommerce-checkout .form-row .required{ color:#cd2027; text-decoration:none; }
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container .select2-selection--single{
  width:100%; border:1px solid var(--sm-border); padding:12px 14px; font-family:var(--sm-font);
  font-size:15px; color:var(--sm-black); background:var(--sm-white); border-radius:0; height:auto;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{ border-color:var(--sm-navy); }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:normal; padding:0; color:var(--sm-black); }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; }
#order_review{ margin-top:34px; }
#order_review table.shop_table{ width:100%; border:1px solid var(--sm-border); }
#order_review table.shop_table td,#order_review table.shop_table th{ padding:13px 15px; font-size:15px; }
#order_review tfoot th{ background:transparent; color:var(--sm-black); text-transform:none; }
#payment{ background:var(--sm-grey-bg); padding:22px; margin-top:20px; }
#payment ul.payment_methods{ list-style:none; margin:0 0 18px; padding:0; }
#payment ul.payment_methods li{ display:block; margin-bottom:12px; }
#payment ul.payment_methods label{ font-size:15px; font-weight:600; display:inline; margin-left:6px; }
#payment .payment_box{ background:var(--sm-white); padding:14px; margin-top:10px; font-size:14px; border:1px solid var(--sm-border); }
#payment .payment_box p{ font-size:14px; margin:0; }
#place_order{ width:100%; font-size:16px; padding:16px; }
.woocommerce-terms-and-conditions-wrapper{ margin-bottom:14px; font-size:14px; }
.sm-gateway-notice{
  background:#fff8e5; border:1px solid #e6c964; padding:14px 16px; font-size:14px;
  line-height:22px; margin-bottom:20px;
}

/* --------------------------------------------------------------------------
   6. My account
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.woocommerce-MyAccount-navigation{ flex:0 0 25%; max-width:25%; padding:0 15px; }
.woocommerce-MyAccount-content{ flex:0 0 75%; max-width:75%; padding:0 15px; }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--sm-border); }
.woocommerce-MyAccount-navigation li{ display:block; border-bottom:1px solid var(--sm-border); }
.woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.woocommerce-MyAccount-navigation li a{ display:block; padding:14px 18px; font-size:15px; color:var(--sm-black); }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover{ background:var(--sm-navy); color:var(--sm-white); }
.woocommerce-MyAccount-content p{ font-size:15px; line-height:26px; margin-bottom:14px; }

/* login / register — two columns like the reference */
#customer_login.u-columns,
.sm-account-forms{ display:flex; flex-wrap:wrap; margin:0 -15px; }
#customer_login .u-column1,
#customer_login .u-column2,
.sm-account-forms .u-column1,
.sm-account-forms .u-column2{ flex:0 0 50%; max-width:50%; padding:0 15px; }
#customer_login h2,
.sm-account-forms h2{
  font-size:20px; font-weight:600; text-transform:uppercase; margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid var(--sm-border);
}
.woocommerce form.login,
.woocommerce form.register{ border:1px solid var(--sm-border); padding:24px; }
.woocommerce form .form-row{ margin-bottom:16px; }
.woocommerce form .form-row label{ display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"]{
  width:100%; border:1px solid var(--sm-border); padding:12px 14px;
  font-family:var(--sm-font); font-size:15px; background:var(--sm-white);
}
.woocommerce-form__label-for-checkbox{ font-size:14px; }
.woocommerce-LostPassword a{ font-size:14px; color:var(--sm-navy); }

/* --------------------------------------------------------------------------
   7. Notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none; padding:15px 20px; margin:0 0 24px; font-size:15px;
  border-left:4px solid var(--sm-navy); background:var(--sm-grey-bg);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.woocommerce-error{ border-left-color:#cd2027; }
.woocommerce-message a.button,
.woocommerce-info a.button{ padding:10px 18px; font-size:14px; }
.woocommerce-error li{ font-size:15px; display:block; }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1199px){
  ul.products{ gap:40px 24px; }
  .related ul.products, .up-sells ul.products{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:991px){
  .sm-shop{ padding:40px 0 60px; }
  .sm-shop__sidebar{ flex:0 0 100%; max-width:100%; margin-bottom:30px; }
  .sm-shop__main{ flex:0 0 100%; max-width:100%; }
  ul.products{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .related ul.products, .up-sells ul.products{ grid-template-columns:repeat(2,1fr); }
  div.product .sm-gallery,
  div.product .summary{ flex:0 0 100%; max-width:100%; }
  div.product .summary{ margin-top:28px; }
  .summary .product_title{ font-size:24px; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2{ flex:0 0 100%; max-width:100%; }
  #customer_login .u-column1,
  #customer_login .u-column2,
  .sm-account-forms .u-column1,
  .sm-account-forms .u-column2{ flex:0 0 100%; max-width:100%; margin-bottom:24px; }
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content{ flex:0 0 100%; max-width:100%; }
  .woocommerce-MyAccount-navigation{ margin-bottom:24px; }
  .cart-collaterals{ justify-content:stretch; }
  .cart_totals{ max-width:none; }
}

@media (max-width:767px){
  .sm-shop__bar{ flex-direction:column; align-items:stretch; gap:12px; margin-bottom:30px; }
  .woocommerce-ordering select{ width:100%; min-width:0; }
  .woocommerce-result-count{ text-align:center; }
  ul.products li.product .woocommerce-loop-product__title{ font-size:14px; }
  ul.products li.product .button{ font-size:13px; padding:12px 10px; }
  .sm-gallery__thumb{ flex:0 0 calc(25% - 8px); }
  /* cart table becomes stacked cards */
  .woocommerce-cart-form table.shop_table thead{ display:none; }
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart-form table.shop_table td{ display:block; width:100%; }
  .woocommerce-cart-form table.shop_table tr{ border-bottom:1px solid var(--sm-border); padding:10px 0; position:relative; }
  .woocommerce-cart-form table.shop_table td{ border:0; padding:7px 15px; text-align:left; }
  .woocommerce-cart-form table.shop_table td::before{
    content:attr(data-title); display:block; font-size:12px; font-weight:600;
    text-transform:uppercase; color:var(--sm-muted); margin-bottom:4px;
  }
  .woocommerce-cart-form table.shop_table td.product-remove::before,
  .woocommerce-cart-form table.shop_table td.product-thumbnail::before{ display:none; }
  .woocommerce-cart-form table.shop_table td.product-remove{ position:absolute; top:10px; right:6px; width:auto; padding:0; }
  .actions{ flex-direction:column; align-items:stretch; }
  .coupon{ flex-direction:column; }
  .coupon input[type="text"]{ min-width:0; }
  .related > h2, .up-sells > h2{ font-size:20px; }
}

@media (max-width:480px){
  ul.products{ grid-template-columns:repeat(2,1fr); gap:24px 14px; }
  .related ul.products, .up-sells ul.products{ grid-template-columns:repeat(2,1fr); }
  .sm-swatch--color{ width:30px; height:30px; }
}

/* --------------------------------------------------------------------------
   9. Refund & return request form
   -------------------------------------------------------------------------- */
.sm-refund-intro{ margin-bottom:30px; }
.sm-refund-form{ max-width:820px; }
.sm-form-grid{ display:flex; flex-wrap:wrap; margin:0 -10px; }
.sm-form-grid .sm-form-row{ flex:0 0 50%; max-width:50%; padding:0 10px; }
.sm-form-row{ margin-bottom:18px; }
.sm-form-row label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.sm-form-row .req{ color:#cd2027; }
.sm-refund-form input[type="text"],
.sm-refund-form input[type="email"],
.sm-refund-form input[type="tel"],
.sm-refund-form input[type="date"],
.sm-refund-form textarea{
  width:100%; border:1px solid var(--sm-border); padding:12px 14px;
  font-family:var(--sm-font); font-size:15px; background:var(--sm-white); color:var(--sm-black);
}
.sm-refund-form input:focus,
.sm-refund-form textarea:focus{ border-color:var(--sm-navy); }
.sm-refund-form input[type="file"]{ font-size:14px; padding:8px 0; }
.sm-form-hint{ display:block; font-size:13px; color:var(--sm-muted); margin-top:5px; }
.sm-form-block{ border:1px solid var(--sm-border); padding:20px; margin-bottom:22px; }
.sm-form-block legend{ font-size:15px; font-weight:600; padding:0 8px; }
.sm-choice{ display:flex; align-items:flex-start; gap:10px; margin-bottom:11px; font-size:15px; font-weight:400; cursor:pointer; }
.sm-choice input{ margin-top:3px; flex:0 0 auto; }
.sm-choice span{ font-size:15px; line-height:22px; }
.sm-other-row{ margin-top:12px; margin-bottom:0; }
.sm-form-actions{ margin-top:6px; }

@media (max-width:767px){
  .sm-form-grid .sm-form-row{ flex:0 0 100%; max-width:100%; }
}

/* --------------------------------------------------------------------------
   10. Overrides for WooCommerce's bundled stylesheet
   These selectors are more specific than the plugin's, so the theme's button
   and price styling wins without resorting to !important everywhere.
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background-color:transparent; color:var(--sm-black);
  border:1px solid var(--sm-black); border-radius:0;
  font-family:var(--sm-font); font-size:16px; font-weight:600;
  text-transform:uppercase; padding:15px; line-height:1;
  position:relative; z-index:1; overflow:hidden; transition:.3s ease all;
  box-shadow:var(--sm-shadow-btn); text-shadow:none;
}
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-navy); opacity:0; z-index:-1; transition:.5s all ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background-color:transparent; color:var(--sm-white); border-color:var(--sm-navy);
}
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before{ left:0; right:0; opacity:1; }

/* checkout / cart primary actions stay solid navy */
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  background-color:var(--sm-navy); color:var(--sm-white); border-color:var(--sm-navy);
}
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{
  background-color:var(--sm-navy); color:var(--sm-white); opacity:.88;
}
.woocommerce #place_order::before,
.woocommerce .wc-proceed-to-checkout a.checkout-button::before{ display:none; }

/* prices + titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px; font-weight:700; text-transform:uppercase; padding:8px 0;
}
.woocommerce ul.products li.product .price{
  color:var(--sm-blue); font-size:18px; font-weight:400;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:var(--sm-blue); font-size:22px; font-weight:500; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--sm-navy); color:var(--sm-white); border-radius:0;
  min-height:0; min-width:0; line-height:1; padding:5px 11px; font-size:12px;
  font-weight:600; text-transform:uppercase; top:12px; left:12px; right:auto; margin:0;
}
/* the plugin's star-rating font is fine, just recolour */
.woocommerce .star-rating span::before,
.woocommerce p.stars a{ color:var(--sm-navy); }
/* remove the plugin's default form-row float grid on checkout */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{ width:48%; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{ float:none; width:auto; }

/* --------------------------------------------------------------------------
   11. Variation form specifics
   The native <select> stays in the DOM (WooCommerce reads it) but is hidden —
   the swatches drive it. Hidden with clipping, not display:none, so the
   plugin's own scripts can still measure and focus it.
   -------------------------------------------------------------------------- */
.woocommerce div.product form.cart table.variations td.value select,
table.variations td.value select,
select.woo-variation-raw-select{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* the plugin's mobile rule re-shows selects — keep them hidden */
@media screen and (max-width:768px){
  .woocommerce div.product form.cart table.variations td.value select,
  table.variations td.value select{ position:absolute !important; width:1px; height:1px; }
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th{ display:block; padding:0; border:0; }
.woocommerce div.product form.cart table.variations{ margin-bottom:18px; }
.woocommerce div.product form.cart .reset_variations{
  display:inline-block; font-size:13px; color:var(--sm-muted); margin-top:8px;
}

/* add-to-cart button — beat `.woocommerce div.product form.cart .button` */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button{
  background-color:transparent; color:var(--sm-black);
  border:1px solid var(--sm-black); border-radius:0;
  font-size:14px; font-weight:500; text-transform:uppercase;
  padding:16px 26px; line-height:1; float:none;
  position:relative; z-index:1; overflow:hidden; transition:.3s ease all;
}
.woocommerce div.product form.cart button.single_add_to_cart_button::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-navy); opacity:0; z-index:-1; transition:.5s all ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
  background-color:transparent; color:var(--sm-white); border-color:var(--sm-navy);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover::before{
  left:0; right:0; opacity:1;
}
.woocommerce div.product form.cart div.quantity{ float:none; margin:0; }
.woocommerce div.product form.cart{ margin-bottom:24px; }
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after{ display:none; }

/* single-product columns — the plugin floats these at 48% */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .sm-gallery{ width:auto; float:none; margin-bottom:0; }
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary{ clear:none; }

/* --------------------------------------------------------------------------
   12. Cart table refinements
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table{ border-collapse:collapse; border-radius:0; }
.woocommerce table.cart td.product-remove{ width:54px; text-align:center; }
.woocommerce table.cart td.product-thumbnail{ width:100px; }
.woocommerce table.cart img{ width:78px; height:78px; object-fit:cover; }
.woocommerce a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--sm-grey-bg);
  color:var(--sm-black); font-size:17px; line-height:1; font-weight:400; text-decoration:none;
}
.woocommerce a.remove:hover{ background:#cd2027; color:var(--sm-white); }
.woocommerce table.cart td.actions{ padding:18px 15px; }
.woocommerce table.cart td.actions .coupon{ float:none; display:inline-flex; gap:10px; }
.woocommerce table.cart td.actions .coupon input.input-text{
  width:auto; min-width:190px; border:1px solid var(--sm-black); padding:12px 14px;
  font-family:var(--sm-font); font-size:14px; margin:0;
}
.woocommerce table.cart td.actions > .button{ float:right; }
.woocommerce .cart-collaterals{ display:flex; justify-content:flex-end; width:100%; }
.woocommerce .cart-collaterals .cart_totals{ float:none; width:100%; max-width:440px; }
.woocommerce .cart_totals table.shop_table{ border:0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  background:transparent; color:var(--sm-black); text-transform:none;
  padding:11px 0; border-bottom:1px solid var(--sm-border); font-size:15px;
}
.woocommerce .cart_totals table.shop_table td{ text-align:right; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td{ font-size:17px; font-weight:700; border-bottom:0; }
.woocommerce .cart_totals h2{ font-size:20px; font-weight:600; text-transform:uppercase; margin-bottom:12px; }