/* ==========================================================================
   WooCommerce → Skarmio design-token mapping
   Styles WooCommerce's own template output (shop loop, single product,
   notices, my-account dashboard) so it matches the rest of the site without
   us having to override every WooCommerce template file.
   Pages we DID fully override (cart, checkout, login/register) have their
   markup styled directly in those template files instead.
   ========================================================================== */

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
   list-style: none;
   background-color: var(--hero-banner-color);
   border: 1px solid var(--border-color);
   border-left: 4px solid var(--button-color);
   border-radius: 8px;
   padding: 14px 18px;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
   margin: 0 0 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
}

.woocommerce-error{ border-left-color: #d94848; }
.woocommerce-message .button,
.woocommerce-error .button{
   background-color: var(--button-color);
   color: #fff;
   border-radius: 8px;
   padding: 8px 16px;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
}

/* ---------- Shop archive / product loop ---------- */
ul.products{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
}

@media (max-width: 992px){ ul.products{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ ul.products{ grid-template-columns: repeat(2, 1fr); gap: 12px; } }

ul.products li.product{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 10px;
   list-style: none;
}

ul.products li.product a img{
   width: 100%;
   border-radius: 6px;
}

ul.products li.product .woocommerce-loop-product__title{
   font-size: 16px;
   font-weight: 600;
   color: var(--secondary-color);
   line-height: 24px;
   margin: 8px 0 2px 0;
}

ul.products li.product .price{
   color: var(--secondary-color);
   font-size: 18px;
   font-weight: 600;
}

ul.products li.product .price del{
   color: var(--paragraph-color);
   font-weight: 500;
   font-size: 14px;
   opacity: .8;
}

ul.products li.product .price ins{
   text-decoration: none;
}

ul.products li.product .star-rating{
   color: var(--star-color);
   font-size: 13px;
}

ul.products li.product .button{
   background-color: var(--button-color);
   border: 0;
   width: 100%;
   height: 40px;
   border-radius: 10px;
   color: #fff !important;
   font-weight: 600;
   font-size: 14px;
   margin-top: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.woocommerce-result-count,
.woocommerce-ordering{
   font-size: 14px;
   font-weight: 500;
   color: var(--paragraph-color);
}

.woocommerce-ordering select{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 38px;
   padding: 0 10px;
}

nav.woocommerce-pagination ul{
   border: 0 !important;
}

nav.woocommerce-pagination ul li{
   border: 0 !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span{
   border-radius: 8px !important;
   border: 1px solid var(--border-color) !important;
   color: var(--secondary-color) !important;
   margin: 0 3px;
}

nav.woocommerce-pagination ul li a.current,
nav.woocommerce-pagination ul li span.current{
   background: var(--button-color) !important;
   color: #fff !important;
   border-color: var(--button-color) !important;
}

/* ---------- Single product ---------- */
.woocommerce div.product .woocommerce-product-gallery{
   border: 1px solid var(--border-color);
   border-radius: 12px;
   overflow: hidden;
}

.woocommerce div.product .product_title{
   color: var(--secondary-color);
   font-size: 26px;
   font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
   color: var(--secondary-color);
   font-size: 26px;
   font-weight: 700;
}

.woocommerce div.product .woocommerce-product-rating{
   margin-bottom: 12px;
}

.woocommerce div.product form.cart .button{
   background-color: var(--button-color);
   border: 0;
   height: 48px;
   border-radius: 10px;
   color: #fff;
   font-weight: 600;
   padding: 0 26px;
}

.woocommerce div.product form.cart .quantity input.qty{
   height: 48px;
   border: 1px solid var(--border-color);
   border-radius: 10px;
   width: 70px;
   text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
   border-bottom: 1px solid var(--border-color);
   padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
   border: 0 !important;
   background: none !important;
   margin-right: 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{
   color: var(--paragraph-color);
   font-weight: 600;
   font-size: 15px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
   color: var(--secondary-color);
}

.woocommerce table.variations select{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 42px;
   padding: 0 10px;
}

.woocommerce-variation-add-to-cart .button{
   background-color: var(--button-color) !important;
   color: #fff !important;
}

/* ---------- Related products ---------- */
.related.products{
   margin-top: 50px;
}

.related.products > h2{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
}

/* ---------- My Account dashboard ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation{
   background: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 10px 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li a{
   display: block;
   padding: 12px 20px;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--secondary-color);
   text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
   color: var(--button-color);
   background: var(--hero-banner-color);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
   border: 1px solid var(--border-color);
   border-radius: 10px;
   overflow: hidden;
   border-collapse: collapse;
   width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{
   background: var(--hero-banner-color);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .4px;
   color: var(--paragraph-color);
   padding: 12px 16px;
   text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{
   padding: 14px 16px;
   border-top: 1px solid var(--border-color);
   font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content .button{
   background-color: var(--button-color);
   color: #fff;
   border-radius: 8px;
   padding: 8px 16px;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
}

.woocommerce-account fieldset{
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 18px;
   margin-top: 20px;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 42px;
   padding: 0 12px;
   width: 100%;
}

/* ---------- Widget / cross-page helpers ---------- */
.wc-forward{
   text-decoration: none !important;
}

.screen-reader-text{
   position: absolute !important;
   height: 1px; width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
}

/* ---------- Cart: proceed-to-checkout, quantity input, shipping table ---------- */
.wc-proceed-to-checkout{
   margin: 16px 0 6px 0;
}

a.checkout-button{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--button-color);
   border: 0;
   width: 100%;
   height: 44px;
   border-radius: 10px;
   color: #fff !important;
   font-weight: 600;
   font-size: 15px;
   text-decoration: none !important;
}

.quantity input.qty{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 38px;
   width: 60px;
   text-align: center;
   font-weight: 600;
   color: var(--secondary-color);
}

.skarmio-shipping-methods ul#shipping_method{
   list-style: none;
   margin: 0;
   padding: 0;
}

.skarmio-shipping-methods ul#shipping_method li{
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
   padding: 8px 0;
   border-bottom: 1px solid var(--border-color);
}

.skarmio-shipping-methods ul#shipping_method li:last-child{ border-bottom: 0; }

.skarmio-shipping-methods ul#shipping_method input{
   accent-color: var(--button-color);
   margin-right: 8px;
}

.cart-item-variant table.wc-item-meta{
   margin-top: 4px;
}

.cart-item-variant table.wc-item-meta,
.cart-item-variant table.wc-item-meta tbody,
.cart-item-variant table.wc-item-meta tr{
   display: block;
}

.cart-item-variant table.wc-item-meta tr{
   display: flex;
   gap: 4px;
   font-size: 12.5px;
   color: var(--paragraph-color);
}

.cart-item-variant table.wc-item-meta p{ margin: 0; }

/* ---------- Checkout: billing/shipping fields (WooCommerce's own markup,
   restyled to match form-input-01 / form-label-01 without overriding the
   underlying templates - keeps custom checkout fields from plugins working) ---------- */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
   margin: 18px 0 14px 0;
}

.woocommerce-billing-fields h3:first-child{
   margin-top: 0;
}

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row,
.woocommerce-account-fields .form-row{
   margin-bottom: 16px;
}

.form-row-first,
.form-row-last{
   width: 48%;
}

.form-row-first{ float: left; }
.form-row-last{ float: right; }
.form-row-wide{ width: 100%; clear: both; }

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label{
   font-size: 13px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 6px;
   display: block;
}

.woocommerce-billing-fields .required,
.woocommerce-shipping-fields .required{
   color: #d94848;
   text-decoration: none;
}

.woocommerce-billing-fields input.input-text,
.woocommerce-shipping-fields input.input-text,
.woocommerce-additional-fields input.input-text,
.woocommerce-additional-fields textarea,
.select2-container .select2-selection--single,
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select{
   border: 1px solid var(--border-color) !important;
   border-radius: 8px !important;
   height: 44px !important;
   width: 100%;
   padding: 0 14px !important;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
}

.select2-container .select2-selection--single{
   display: flex;
   align-items: center;
}

.woocommerce-additional-fields textarea{
   height: auto !important;
   padding: 12px 14px !important;
}

.woocommerce-billing-fields input.input-text:focus,
.woocommerce-shipping-fields input.input-text:focus{
   outline: none;
   border-color: var(--button-color) !important;
   box-shadow: 0 0 0 3px rgba(9,58,116,0.08);
}

.woocommerce-shipping-fields__field-wrapper,
.woocommerce-billing-fields__field-wrapper{
   overflow: hidden;
}

#ship-to-different-address{
   list-style: none;
   margin: 4px 0 16px 0;
}

#ship-to-different-address label{
   font-size: 14.5px;
   font-weight: 600;
   color: var(--secondary-color);
   display: flex;
   align-items: center;
}

#ship-to-different-address input{
   margin-right: 8px;
   accent-color: var(--button-color);
}

.woocommerce-account-fields .create-account,
p.create-account{
   margin-top: 8px;
}

p.create-account label{
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
}

p.create-account input{
   margin-right: 8px;
   accent-color: var(--button-color);
}

.woocommerce-invalid input.input-text,
.woocommerce-invalid select{
   border-color: #d94848 !important;
}

/* Payment method fields (e.g. a gateway's own custom form inside its card) */
.payment_box p{
   font-size: 13px;
   color: var(--paragraph-color);
   margin-bottom: 8px;
}

.payment_box input,
.payment_box select{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 40px;
   padding: 0 10px;
   width: 100%;
   margin-bottom: 8px;
}

.skarmio-payment-methods{
   display: flex;
   flex-direction: column;
}

/* Terms + place order noscript fallback link */
.woocommerce-terms-and-conditions-wrapper{
   margin: 16px 0;
   font-size: 13.5px;
   color: var(--paragraph-color);
}

.woocommerce-form__label-for-checkbox{
   display: flex;
   align-items: flex-start;
}

.woocommerce-form__input-checkbox{
   margin-right: 8px;
   margin-top: 3px;
   accent-color: var(--button-color);
}