/* Prottoy — WooCommerce styling. One file, variables, no !important. */
.woo-wrap{padding-top:34px;padding-bottom:50px}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--muted);font-size:13.5px}

/* shop grid */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:22px 0 0;padding:0;list-style:none}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.type-product{
  width:auto;float:none;margin:0;text-align:left;position:relative;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#fff;padding:0;
  box-shadow:0 1px 2px rgba(16,30,24,.04),0 10px 24px rgba(16,30,24,.05);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
  box-shadow:0 18px 40px rgba(16,30,24,.13),0 4px 10px rgba(16,30,24,.06)}
.woocommerce ul.products li.product a{text-decoration:none}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product>a:first-of-type{display:flex;flex-direction:column;flex:1 1 auto}

/* cover image: consistent book-ish frame with a soft tinted mat + gentle zoom on hover */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;margin:0;border-radius:0;
  background:linear-gradient(150deg,#f3f6f4,#e9efea);
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.045)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.38;text-align:center;
  padding:14px 15px 6px;font-family:var(--body-font);
  overflow-wrap:break-word;word-break:break-word;min-height:2.9em}
.woocommerce ul.products li.product .price{
  color:var(--ink);font-weight:800;font-size:17px;padding:0 15px 2px;display:flex;align-items:baseline;justify-content:center;gap:8px;text-decoration:none;margin-top:auto}
.woocommerce ul.products li.product .price ins{color:var(--accent);text-decoration:none}
/* old price in ash grey — text AND the strike-through line */
.woocommerce ul.products li.product .price del{color:#9aa7a0;font-weight:500;font-size:13.5px;opacity:1;text-decoration:line-through;text-decoration-color:#9aa7a0}
.woocommerce ul.products li.product .price del *{color:#9aa7a0}
.woocommerce ul.products li.product .price .amount{color:var(--accent)}
/* hide product tags + no underline on prices anywhere */
.woocommerce .price,.woocommerce .price ins,.woocommerce .price bdi{text-decoration:none}
/* Cart + Buy share one row at the card foot: Cart = soft green, Buy = solid green.
   (Full button styling lives in the consolidated block lower down.) */

/* Sale badge: compact gradient pill, top-right, shows the % off */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  position:absolute;top:11px;right:11px;left:auto;margin:0;z-index:4;
  background:linear-gradient(135deg,#f0565a,#d4373c);color:#fff;font-size:12px;font-weight:800;letter-spacing:.2px;
  padding:4px 10px;border-radius:999px;min-width:0;min-height:0;line-height:1.4;box-shadow:0 5px 13px rgba(212,55,60,.34)}
.single-product span.onsale{top:14px;right:14px;font-size:13px;padding:5px 12px}

/* buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .single_add_to_cart_button{background:var(--accent);color:#fff;border:none;border-radius:12px;font-weight:700;font-family:var(--body-font);padding:14px 26px;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent);transition:transform .15s,box-shadow .15s,filter .15s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce .single_add_to_cart_button:hover{filter:brightness(.96);transform:translateY(-2px);box-shadow:0 11px 24px color-mix(in srgb,var(--accent) 36%,transparent)}
.woocommerce .single_add_to_cart_button{font-size:16px}
.woocommerce .button.alt,.woocommerce #place_order{background:var(--accent)}

/* add-to-cart row + quantity chooser — grid keeps qty + Add-to-cart + Buy-now tidy on one row */
.woocommerce div.product form.cart{display:grid;grid-template-columns:auto 1fr 1fr;gap:12px;align-items:center;margin:20px 0}
.woocommerce div.product form.cart .quantity{grid-column:1}
.woocommerce div.product form.cart .single_add_to_cart_button{grid-column:2;width:100%;white-space:nowrap;padding-left:14px;padding-right:14px;text-align:center}
.woocommerce div.product form.cart .buy-now-btn{grid-column:3;width:100%;white-space:nowrap;padding-left:14px;padding-right:14px;text-align:center}
.woocommerce div.product form.cart .prottoy-added{grid-column:1 / -1}
.woocommerce .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 2px rgba(16,30,24,.04)}
.woocommerce .quantity input.qty{width:66px;height:52px;border:none;text-align:center;font-weight:700;font-size:16px;font-family:var(--body-font);color:var(--ink);background:transparent;-moz-appearance:textfield}
.woocommerce .quantity input.qty:focus{outline:none}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,.woocommerce .quantity input.qty::-webkit-inner-spin-button{opacity:1;height:36px}

/* variation (tier) selector */
.woocommerce .variations{margin:6px 0 14px;border:none}
.woocommerce .variations td,.woocommerce .variations th{border:none;padding:6px 0;vertical-align:middle}
.woocommerce .variations th.label{text-align:left;font-weight:700;color:var(--ink);padding-right:14px}
.woocommerce .variations select{padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-family:var(--body-font);font-size:15px;min-width:200px;background:#fff;color:var(--ink)}
.woocommerce .single_variation .price{font-size:24px;font-weight:800;color:var(--ink)}
.woocommerce .reset_variations{font-size:12.5px;color:var(--muted)}

/* mobile buy bar buy-now button inherits the beautified look */
.woo-mbar .btn{box-shadow:none}

/* single product — full-width two columns: image + details */
.single-product div.product{display:grid;grid-template-columns:40% 1fr;gap:32px;align-items:start;position:relative}
.single-product div.product .woocommerce-product-gallery{margin:0;position:sticky;top:90px}

/* ---- product gallery: thumbnails swap the main image, hover magnifies ---- */
.single-product .woocommerce-product-gallery{position:relative}
.single-product .woocommerce-product-gallery__wrapper{margin:0}
.single-product .woocommerce-product-gallery__image{border-radius:16px;overflow:hidden;background:linear-gradient(150deg,#f3f6f4,#e9efea)}
.single-product .woocommerce-product-gallery__image a{display:block}
.single-product .woocommerce-product-gallery__image img{border-radius:16px;display:block;cursor:zoom-in}
/* the lightbox/zoom trigger icon → top-LEFT so it never clashes with the sale badge */
.single-product .woocommerce-product-gallery__trigger{top:14px;right:auto;left:14px;z-index:6;
  width:40px;height:40px;background:#fff;border-radius:50%;box-shadow:0 4px 12px rgba(16,30,24,.14);opacity:.95}
.single-product .woocommerce-product-gallery__trigger:hover{opacity:1}
/* thumbnail strip under the main image */
.single-product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.single-product .flex-control-thumbs li{width:auto;margin:0;float:none;list-style:none}
.single-product .flex-control-thumbs img{width:68px;height:68px;object-fit:cover;border-radius:10px;
  border:2px solid var(--line);cursor:pointer;opacity:.65;transition:opacity .15s,border-color .15s,transform .15s}
.single-product .flex-control-thumbs img:hover{opacity:1;transform:translateY(-2px)}
.single-product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--accent)}
/* sale "-X%" badge sits on the image (JS moves it into the gallery); fallback pins it to the image column */
.single-product .woocommerce-product-gallery .onsale{position:absolute !important;top:14px !important;right:14px !important;left:auto !important;z-index:7 !important;margin:0 !important}
.single-product div.product > .onsale{position:absolute;top:14px;left:14px;right:auto;z-index:7;margin:0}
.single-product div.product .woocommerce-tabs,.single-product div.product .related,.single-product div.product .upsells{grid-column:1 / -1}
/* grid items default to min-width:auto, which lets a wide child (e.g. the related
   carousel) blow the track out to its content width and overflow the page. This
   lets them shrink to the track so inner overflow-x:auto actually scrolls. */
.single-product div.product > *{min-width:0}
.single-product div.product .product_title{font-family:var(--title-font);font-size:37px;line-height:1.12;color:var(--ink);margin:10px 0 14px}
.single-product div.product .woocommerce-product-details__short-description{font-size:15.5px;color:#4b554f;line-height:1.78;margin:8px 0 18px}
.single-product div.product .woocommerce-product-details__short-description p{margin:0 0 10px}
/* short-description bullet lists: the emojis are the markers, so drop the default
   disc bullets and indent (which otherwise double up and waste space on mobile) */
.single-product .woocommerce-product-details__short-description ul{list-style:none;margin:8px 0 0;padding:0}
.single-product .woocommerce-product-details__short-description ul li{list-style:none;margin:0;padding:6px 0;line-height:1.6;border-bottom:1px solid var(--line)}
.single-product .woocommerce-product-details__short-description ul li:last-child{border-bottom:0}
.single-product div.product p.price,.single-product div.product span.price{color:var(--ink);font-size:30px;font-weight:800;margin:6px 0 10px}
.single-product div.product p.price del{color:var(--muted);font-size:17px;font-weight:400}
.single-product div.product p.price ins{text-decoration:none}
/* add to cart = outline, Buy now = solid (set below), so the two read as a pair */
.single-product form.cart .single_add_to_cart_button{background:#fff;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
.single-product form.cart .single_add_to_cart_button:hover{background:color-mix(in srgb,var(--accent) 8%,#fff);filter:none}
/* hide category + tags meta under the product */
.woocommerce .product_meta .posted_in,.woocommerce .product_meta .tagged_as{display:none}
.single-product .woo-badge{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:5px 12px;border-radius:100px}
.woo-trust{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.woo-trust div{font-size:13.5px;color:#4b554f;display:flex;gap:9px;align-items:center}
.woo-trust .ic{color:var(--accent)}
.woo-pays{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.woo-pays span{background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-size:12px;font-weight:600;color:#3c4b43}
.woocommerce-tabs{grid-column:1 / -1;margin-top:36px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--accent)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--accent)}
.related.products{grid-column:1 / -1;margin-top:36px}
.related.products>h2{font-family:var(--title-font);font-size:24px;margin-bottom:18px}

/* mobile sticky buy bar (hidden on desktop) */
.woo-mbar{display:none}

@media(max-width:880px){
  .woocommerce ul.products{grid-template-columns:1fr 1fr}
  .single-product div.product{grid-template-columns:1fr;gap:24px;max-width:none}
  .single-product div.product .woocommerce-product-gallery{position:static;top:auto;grid-column:auto}
  .single-product div.product .summary{grid-column:auto}
  .woocommerce div.product form.cart{grid-template-columns:auto 1fr 1fr;gap:8px}
  .woocommerce div.product form.cart .quantity{grid-column:1;justify-self:start}
  .woocommerce div.product form.cart .single_add_to_cart_button{grid-column:2;padding-left:8px;padding-right:8px;font-size:14px}
  .woocommerce div.product form.cart .buy-now-btn{grid-column:3;padding-left:8px;padding-right:8px;font-size:14px}
  .woo-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);align-items:center;gap:8px;padding:10px 12px;box-shadow:0 -6px 20px rgba(0,0,0,.06);z-index:80}
  .woo-mbar .btn{flex:1;justify-content:center}
  body.single-product{padding-bottom:74px}
}

/* add-to-cart feedback + loading */
.prottoy-added{display:none;flex-basis:100%;margin-top:8px;color:var(--accent);font-weight:600;font-size:14px}
.prottoy-added a{color:var(--accent);text-decoration:underline}
.single_add_to_cart_button.loading{opacity:.65;pointer-events:none}

/* ============================================================
   CART · CHECKOUT · MY ACCOUNT (student dashboard)
   Widen the page container on Woo pages, style everything to match.
   ============================================================ */

/* Woo pages need room — the 760px article width is for reading, not forms */
.woocommerce-cart .single-wrap,
.woocommerce-checkout .single-wrap,
.woocommerce-account .single-wrap{max-width:1080px}
.woocommerce-cart .single-wrap>h1,
.woocommerce-checkout .single-wrap>h1,
.woocommerce-account .single-wrap>h1{font-family:var(--title-font);font-size:30px;margin-bottom:22px}

/* ---- shared: notices ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top:none;border-left:4px solid var(--accent);background:var(--soft);border-radius:10px;padding:14px 18px 14px 44px;margin-bottom:20px}
.woocommerce-error{border-left-color:#d23f3f;background:#fdf1f1}
.woocommerce-message::before,.woocommerce-info::before{color:var(--accent)}
.woocommerce-error::before{color:#d23f3f}

/* ---- shared: form fields ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:15px;background:#fff}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{outline:none;border-color:var(--accent)}
.woocommerce form .form-row label{font-size:13.5px;font-weight:600;margin-bottom:4px}
.select2-container--default .select2-selection--single{border:1px solid var(--line);border-radius:10px;height:44px;padding:6px 4px}

/* ---- shared: buttons ---- */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,
.woocommerce input.button,.woocommerce #respond input#submit{background:var(--accent);color:#fff;border-radius:10px;font-weight:700;padding:12px 22px;border:none;font-family:inherit}
.woocommerce .button:hover{filter:brightness(.95)}
.woocommerce .button.alt{background:var(--accent)}
.woocommerce .button:disabled,.woocommerce .button.disabled{background:var(--accent);opacity:.5;color:#fff}

/* ---- CART ---- */
.woocommerce-cart table.shop_table{border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-cart table.shop_table th{background:var(--soft);font-size:13px;text-transform:uppercase;letter-spacing:.4px;padding:13px 14px}
.woocommerce-cart table.shop_table td{border-top:1px solid var(--line);padding:14px;vertical-align:middle}
.woocommerce-cart table.cart img{width:56px;border-radius:8px}
.woocommerce-cart .product-name a{font-weight:600;color:var(--ink)}
.woocommerce-cart .product-remove a.remove{color:#d23f3f;background:transparent;font-size:20px}
.woocommerce-cart .product-remove a.remove:hover{background:#fdf1f1;color:#d23f3f}
.woocommerce-cart table.cart td.actions .coupon .input-text{border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:150px}
.cart_totals{border:1px solid var(--line);border-radius:14px;padding:22px}
.cart_totals h2{font-family:var(--title-font);font-size:20px;margin-bottom:12px}
.cart_totals table.shop_table{border:none}
.cart_totals table.shop_table td,.cart_totals table.shop_table th{border:none;border-bottom:1px solid var(--line);background:transparent;padding:11px 4px}
.wc-proceed-to-checkout a.checkout-button{display:block;text-align:center;font-size:16px;padding:15px;background:var(--accent);color:#fff;border:none}
.wc-proceed-to-checkout a.checkout-button:hover{background:var(--accent);color:#fff;filter:brightness(.96)}
/* block cart "Proceed to Checkout" */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-button{background:var(--accent);color:#fff;border:none}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover{background:var(--accent);color:#fff;filter:brightness(.96)}
.return-to-shop a.button{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}

/* ---- CHECKOUT ---- */
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-family:var(--title-font);font-size:20px;margin:6px 0 14px}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px}
.woocommerce-checkout-review-order{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--soft)}
.woocommerce-checkout-review-order table.shop_table{border:none;background:transparent}
.woocommerce-checkout-review-order table.shop_table td,
.woocommerce-checkout-review-order table.shop_table th{border:none;border-bottom:1px solid var(--line);background:transparent;padding:10px 4px}
#payment{background:transparent;border-radius:12px}
#payment ul.payment_methods{border-bottom:1px solid var(--line);padding:0 0 14px}
#payment ul.payment_methods li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px;list-style:none}
#payment div.payment_box{background:#eef3f0;border-radius:8px;font-size:13.5px}
#payment div.payment_box::before{border-bottom-color:#eef3f0}
#place_order{width:100%;font-size:16px;padding:15px;margin-top:14px}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{margin-bottom:14px}

/* ---- MY ACCOUNT (student dashboard) ---- */
.woocommerce-account .woocommerce-MyAccount-navigation{width:230px;float:left}
.woocommerce-account .woocommerce-MyAccount-content{width:auto;float:none;flex:1 1 auto;min-width:0}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.woocommerce-MyAccount-navigation li a{display:block;padding:13px 18px;font-weight:600;font-size:14.5px;color:#3c4b43;border-bottom:1px solid var(--line);text-decoration:none}
.woocommerce-MyAccount-navigation li:last-child a{border-bottom:none}
.woocommerce-MyAccount-navigation li a:hover{background:var(--soft);text-decoration:none}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--accent);color:#fff}
.woocommerce-MyAccount-content{font-size:15px}
.woocommerce-MyAccount-content .woocommerce-Message{margin-top:0}
.woocommerce-MyAccount-content table.shop_table{border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-MyAccount-content table.shop_table th{background:var(--soft);padding:12px 14px;font-size:13px}
.woocommerce-MyAccount-content table.shop_table td{border-top:1px solid var(--line);padding:12px 14px}
.woocommerce-MyAccount-content .woocommerce-Button.button{padding:8px 16px;font-size:13.5px}
/* downloads = the student's purchased PDFs */
.woocommerce-MyAccount-content .download-file a.button{background:var(--accent)}

/* ---- LOGIN / REGISTER ---- */
.woocommerce-LostPassword a{font-size:13.5px;color:var(--accent)}
.woocommerce form .show-password-input{top:11px}

/* ---- responsive ---- */
@media(max-width:820px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
  .woocommerce-MyAccount-navigation{margin-bottom:20px}
  .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap}
  .woocommerce-MyAccount-navigation li{flex:1 1 auto}
  .woocommerce-MyAccount-navigation li a{border-bottom:none;border-right:1px solid var(--line);text-align:center;padding:11px 12px;font-size:13px}
  .woocommerce-cart table.cart td.actions .coupon .input-text{width:100%;margin-bottom:8px}
  .woocommerce-cart table.cart td.actions .coupon .button{width:100%}
}

/* Shop-loop Buy now button (listing pages) */
ul.products li.product .loop-buy-now{display:block;margin-top:6px;background:#fff;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none;font-size:14px;padding:9px 12px;white-space:nowrap;text-align:center}
ul.products li.product .loop-buy-now:hover{background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent);filter:none;transform:none}
ul.products li.product a.add_to_cart_button,ul.products li.product a.button{white-space:nowrap}

/* ---- Beautiful login / register ---- */
.woocommerce-account:not(.logged-in) .single-wrap{max-width:900px}
/* two-column login/register — target #customer_login by ID (always matches, beats WC float) */
.woocommerce #customer_login,
.woocommerce-account:not(.logged-in) .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;width:100%}
.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2,
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2,
.woocommerce-account:not(.logged-in) .u-columns .col-1,
.woocommerce-account:not(.logged-in) .u-columns .col-2{width:auto;max-width:none;float:none;margin:0}
.woocommerce-account:not(.logged-in) .u-columns h2{font-family:var(--title-font);font-size:20px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.woocommerce form.login,.woocommerce form.register{border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 1px 2px rgba(16,30,24,.04),0 10px 26px rgba(16,30,24,.06);background:#fff;margin:0}
.woocommerce form.login .form-row,.woocommerce form.register .form-row{margin-bottom:14px}
.woocommerce form.login label,.woocommerce form.register label{font-weight:600;font-size:13.5px;margin-bottom:5px;display:block}
.woocommerce form.login input.input-text,.woocommerce form.register input.input-text{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:15px}
.woocommerce form.login input.input-text:focus,.woocommerce form.register input.input-text:focus{outline:none;border-color:var(--accent)}
.woocommerce form.login .button,.woocommerce form.register .button{width:100%;padding:13px;font-size:15px;margin-top:4px}
.woocommerce form.register .woocommerce-privacy-policy-text{font-size:12px;color:var(--muted);margin-top:8px}
.woocommerce-account:not(.logged-in) .single-wrap>h1{text-align:center}
@media(max-width:720px){
  .woocommerce #customer_login,
  .woocommerce-account:not(.logged-in) .u-columns.col2-set{grid-template-columns:1fr}
}

/* Small mobile: keep shop cards readable (2 cols), tidy button spacing */
@media(max-width:480px){
  .woocommerce ul.products{grid-template-columns:1fr 1fr;gap:12px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13.5px;padding:10px 10px 3px}
  .woocommerce ul.products li.product .price{padding:0 10px;font-size:14px}
  .woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart{margin:8px 10px 12px;padding:9px 10px;font-size:13px;white-space:nowrap}
  .woocommerce ul.products li.product .loop-buy-now{margin:0 10px 10px;font-size:13px}
  .woocommerce div.product form.cart .quantity .qty{width:44px}
}

/* ===== Shop toolbar: result count + sorting, both centered boxes ===== */
.woocommerce .woocommerce-result-count{float:none;display:block;width:100%;text-align:center;background:#f6f9f7;border:1px solid #e6ece9;border-radius:10px;padding:11px 16px;margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.woocommerce .woocommerce-ordering{float:none;display:block;width:100%;text-align:center;margin:0 0 18px}
.woocommerce .woocommerce-ordering select{height:auto;padding:11px 40px 11px 16px;border:1px solid #d8ded9;border-radius:10px;background-color:#fff;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(16,30,24,.05);line-height:1.4;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230E7C58' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;min-width:180px}
.woocommerce .woocommerce-ordering select:focus{border-color:var(--accent);outline:none}

/* Hide the shop/archive page title */
.woocommerce-products-header,.woocommerce-products-header__title,.woocommerce .page-title{display:none}

/* Stop mobile auto-zoom on inputs (font >=16px) */
@media(max-width:767px){
  .woocommerce input[type="text"],.woocommerce input[type="search"],.woocommerce input[type="email"],.woocommerce input[type="tel"],.woocommerce input[type="password"],.woocommerce input[type="number"],input.search-field,.search-form input,.woocommerce select{font-size:16px}
  .woocommerce ul.products li.product{text-align:center}
  .woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart,.woocommerce ul.products li.product .loop-buy-now{display:inline-block;width:auto;max-width:100%;margin:6px 4px;padding:7px 10px;font-size:12px;white-space:nowrap}
  .woocommerce ul.products li.product{padding-bottom:8px}
}

/* Shop columns: desktop uses --shop-cols (Customizer), tablet 3, mobile 2 */
@media(max-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ===== Mobile sticky bar (app-like): Home + Cart + Buy now ===== */
.woo-mbar .mbar-home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ink);min-width:52px;padding:4px 6px;border-radius:10px;flex:0 0 auto}
.woo-mbar .mbar-home:hover{background:#f4f7f5}
.woo-mbar .mbar-home .mbar-ic{font-size:20px;line-height:1}
.woo-mbar .mbar-home .mbar-lbl{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.woo-mbar .mbar-cart{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.woo-mbar .mbar-buy{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.woo-mbar .btn{flex:1;justify-content:center;text-align:center;padding:11px 12px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center}

/* ===== "View cart" styled as a button (matches the vibe) ===== */
.woocommerce ul.products li.product .added_to_cart{background:#fff;color:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:8px 12px;font-weight:700;font-size:12.5px;text-decoration:none;display:inline-block;line-height:1.2}
.woocommerce ul.products li.product .added_to_cart:hover{background:#f4f7f5}

/* ===== Stop mobile auto-zoom on ALL inputs (broader) ===== */
@media(max-width:767px){
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],input[type="url"],textarea,select{font-size:16px}
}

/* Mobile: force 2-up cards */
@media(max-width:767px){
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product.type-product,
  .woocommerce-page ul.products li.product{width:auto;float:none;margin:0;clear:none}
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* =========================================================================
   WooCommerce overrides — !important is REQUIRED here: WooCommerce's own
   stylesheet has equal specificity and loads after the theme, so it wins ties.
   This block mirrors the CSS confirmed working on the live site.
   ========================================================================= */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.type-product{width:auto !important;float:none !important;margin:0 !important}
.woocommerce ul.products li.product img{width:100% !important;height:auto !important;display:block !important}
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
@media(min-width:768px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr) !important}}
@media(min-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr) !important}}

.woocommerce .woocommerce-ordering select{height:auto !important;padding:11px 40px 11px 16px !important;border:1px solid #d8ded9 !important;border-radius:10px !important;background-color:#fff !important;font-size:14px !important;font-weight:600 !important;color:#16221c !important;cursor:pointer !important;box-shadow:0 1px 2px rgba(16,30,24,.05) !important;line-height:1.4 !important;appearance:none !important;-webkit-appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230E7C58' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;min-width:180px !important}
.woocommerce .woocommerce-ordering select:focus{border-color:#0E7C58 !important;outline:none !important}

.woocommerce .woocommerce-result-count{float:none !important;display:block !important;width:100% !important;text-align:center !important;background:#f6f9f7 !important;border:1px solid #e6ece9 !important;border-radius:10px !important;padding:11px 16px !important;margin:0 0 12px !important;font-size:13.5px !important;font-weight:600 !important;color:#16221c !important}
.woocommerce .woocommerce-ordering{float:none !important;display:block !important;width:100% !important;text-align:center !important;margin:0 0 18px !important}

.woocommerce-products-header,.woocommerce-products-header__title,.woocommerce .page-title{display:none !important}

@media(max-width:767px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto !important;float:none !important;clear:none !important;text-align:center !important;padding-bottom:8px !important}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart,
  .woocommerce ul.products li.product .loop-buy-now{display:inline-block !important;width:auto !important;max-width:100% !important;margin:6px 4px !important;padding:7px 10px !important;font-size:12px !important;white-space:nowrap !important}
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],input[type="url"],textarea,select{font-size:16px !important}
}

/* Single product: WooCommerce forces div.images{float:left;width:48%} and
   div.summary{float:right;width:48%} — inside our grid that leaves ~52% empty
   on the right. Cancel those so each fills its grid column. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary{width:auto !important;float:none !important;clear:none !important;margin-right:0 !important;margin-left:0 !important}
.woocommerce div.product .woocommerce-product-gallery{width:auto !important;float:none !important}
.woocommerce div.product div.woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{width:auto !important;float:none !important;clear:both !important}

/* Shop cards: centre the buttons on desktop too (matches mobile) */
.woocommerce ul.products li.product{text-align:center !important}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price{text-align:center !important}

/* "Adding…" feedback on the Cart button — no animation, just a clear state change.
   WooCommerce adds .loading to the button while the AJAX add runs. */
.woocommerce ul.products li.product .button.loading,
.woocommerce div.product .single_add_to_cart_button.loading{
  opacity:1 !important;position:relative;color:transparent !important;pointer-events:none;
}
.woocommerce ul.products li.product .button.loading::before,
.woocommerce div.product .single_add_to_cart_button.loading::before{
  content:"Adding…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:inherit;letter-spacing:.01em;
}
/* outlined buttons keep brand-coloured text while loading */
.woocommerce ul.products li.product .loop-buy-now.loading::before{color:var(--accent)}
/* hide WooCommerce's default spinner (it uses an animated gif/emoji) */
.woocommerce ul.products li.product .button.loading::after,
.woocommerce div.product .single_add_to_cart_button.loading::after{display:none !important}
/* the tick WooCommerce adds when done */
.woocommerce ul.products li.product .added_to_cart::before{content:"✓ ";font-weight:800}

/* Result count now sits BELOW the grid */
.woocommerce .woocommerce-result-count{margin:22px 0 0 !important}
.woocommerce .woocommerce-ordering{margin:0 0 16px !important}

/* Sorting: centre the select itself (belt-and-braces — auto margins work even
   if something overrides text-align on the wrapping form) */
.woocommerce .woocommerce-ordering{text-align:center !important;float:none !important;width:100% !important}
.woocommerce .woocommerce-ordering select{display:block !important;margin-left:auto !important;margin-right:auto !important;float:none !important}

/* Breathing room at the bottom of shop / archive pages */
.woocommerce.archive .site-main,
.woocommerce-page.archive .site-main,
.post-type-archive-product .site-main,
.tax-product_cat .site-main{padding-bottom:48px}
.woocommerce nav.woocommerce-pagination{margin:26px 0 8px}

/* Spacing: after the sorting select, and above the result count */
.woocommerce .woocommerce-ordering{margin:0 0 26px !important}
.woocommerce .woocommerce-result-count{margin:32px 0 0 !important}

/* =========================================================================
   FINAL shop layout — flex, NO calc().
   calc() gets mangled by CSS minifiers ("calc(50% - 7px)" -> "calc(50%-7px)"
   = invalid = card falls back to full width = one per row). Percentages +
   margins only. li.product IS the card, so gutters must be margins, never padding.
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:flex !important;flex-wrap:wrap !important;justify-content:center !important;
  gap:0 !important;margin:18px 0 0 !important;padding:0 !important;list-style:none !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.type-product,
.woocommerce-page ul.products li.product{
  flex:0 0 48% !important;width:48% !important;max-width:48% !important;min-width:0 !important;
  margin:0 1% 16px !important;padding:0 0 8px !important;
  float:none !important;clear:none !important;
}
@media(min-width:768px){
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product.type-product,
  .woocommerce-page ul.products li.product{flex:0 0 31.33% !important;width:31.33% !important;max-width:31.33% !important;margin:0 1% 18px !important}
}
@media(min-width:1024px){
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product.type-product,
  .woocommerce-page ul.products li.product{flex:0 0 23% !important;width:23% !important;max-width:23% !important;margin:0 1% 20px !important}
}

/* My Account: flex layout (replaces a calc() width that minifiers can break) */
.woocommerce-account.logged-in .woocommerce{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{flex:0 0 240px;float:none;width:auto}
.woocommerce-account.logged-in .woocommerce-MyAccount-content{flex:1 1 320px;float:none;width:auto;min-width:0}
@media(max-width:767px){
  .woocommerce-account.logged-in .woocommerce{display:block}
  .woocommerce-account.logged-in .woocommerce-MyAccount-navigation{width:auto}
}

/* ============================================================
   Shop card buttons — Cart + Buy on ONE row (each ~half width).
   Cart = soft green (secondary), Buy = solid green (primary).
   "View cart" (.added_to_cart, injected after an AJAX add) spans full width.
   Percent widths + margins only (minifier-safe, no calc()).
   ============================================================ */
.woocommerce ul.products li.product .loop-actions{
  display:flex !important;flex-wrap:wrap !important;gap:9px !important;margin:12px 14px 15px !important}
.woocommerce ul.products li.product .loop-actions .button,
.woocommerce ul.products li.product .loop-actions .loop-buy-now{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  flex:1 1 0 !important;width:auto !important;max-width:none !important;min-width:0 !important;margin:0 !important;float:none !important;
  padding:11px 10px !important;border-radius:11px !important;
  font-size:13.5px !important;font-weight:700 !important;text-align:center !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  box-shadow:none !important;transition:background .18s,color .18s,box-shadow .18s !important}
/* Cart (add-to-cart) = soft green */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple{
  background:color-mix(in srgb,var(--accent) 9%,#fff) !important;color:var(--accent) !important;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)) !important}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product:hover .button.add_to_cart_button{
  background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 30%,transparent) !important}
/* Buy = solid green */
.woocommerce ul.products li.product .loop-buy-now{
  background:var(--accent) !important;color:#fff !important;border:1px solid var(--accent) !important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 26%,transparent) !important}
.woocommerce ul.products li.product .loop-buy-now:hover{
  filter:brightness(.96) !important;box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 34%,transparent) !important}
/* once "View cart" appears, it wraps to its own full-width row inside the flex */
.woocommerce ul.products li.product .added_to_cart{
  flex:1 1 100% !important;order:3 !important;margin:2px 0 2px !important;padding:4px !important;
  background:none !important;color:var(--accent) !important;border:0 !important;font-weight:600 !important;font-size:12.5px !important;text-align:center !important}

/* keep the top ordering hidden — it now lives in the sidebar (robust even if a
   page cache still serves the old markup; the sidebar form carries .ws-sort) */
.woo-main .woocommerce-ordering:not(.ws-sort){display:none !important}

/* ============================================================
   SHOP SIDEBAR  (category browser + price filter)
   ============================================================ */
.woo-wrap.has-shop-sidebar{max-width:1240px}
.woo-layout{display:grid;grid-template-columns:248px 1fr;gap:32px;align-items:start}
.woo-main{min-width:0}
.woo-sidebar{position:sticky;top:90px}
.woo-filter-toggle{display:none}
.ws-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 17px 19px;margin-bottom:18px;box-shadow:0 1px 2px rgba(16,30,24,.04),0 8px 22px rgba(16,30,24,.04)}
.ws-title{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;font-size:13px;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase}
.ws-title::before{content:"";width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,#D4A54A));flex:none}
.ws-cats{list-style:none;margin:0;padding:0}
.ws-cats .ws-cats{margin:3px 0 5px 11px;border-left:1.5px solid var(--line);padding-left:9px}
.ws-cats li{margin:1px 0}
.ws-cats a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s,color .15s,padding-left .15s}
.ws-cats a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);padding-left:13px}
.ws-cats li.is-current > a{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.ws-count{font-size:11px;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:100px;padding:2px 9px;flex:none}
.ws-cats li.is-current > a .ws-count{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.ws-cat-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ws-cat-meta{display:inline-flex;align-items:center;gap:7px;flex:none}
.ws-more{color:var(--muted);font-weight:700;font-size:16px;line-height:1;opacity:.7}
.ws-cats a:hover .ws-more{color:var(--accent);opacity:1}
/* current category header + "‹ parent" back link */
.ws-cat-wrap > .ws-crumb-link{display:inline-block;margin:0 0 9px;color:var(--muted);font-weight:600;font-size:13px;text-decoration:none}
.ws-cat-wrap > .ws-crumb-link:hover{color:var(--accent)}
li.ws-ctx > a{font-weight:700}
/* price filter */
.ws-price-row{display:flex;align-items:center;gap:9px}
.ws-price-row input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;font-family:var(--body-font);outline:none;background:color-mix(in srgb,var(--ink) 2%,#fff);transition:border-color .15s,box-shadow .15s}
.ws-price-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);background:#fff}
.ws-price-row span{color:var(--muted)}
.ws-price-btn{width:100%;margin-top:12px;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 6px 15px color-mix(in srgb,var(--accent) 26%,transparent);transition:filter .15s,transform .15s,box-shadow .15s}
.ws-price-btn:hover{filter:brightness(.97);transform:translateY(-1px);box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 32%,transparent)}
/* sort-by select (relocated into the sidebar) */
.ws-sort{margin:0}
.ws-sort select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 38px 10px 12px;font-size:14px;font-weight:600;
  font-family:var(--body-font);color:var(--ink);background-color:color-mix(in srgb,var(--ink) 2%,#fff);cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230E7C58' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.ws-sort select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);background-color:#fff}
/* reset = a real (secondary) button, centered under the filter button */
.ws-clear-btn{display:block;width:100%;margin-top:9px;padding:9px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--ink) 4%,#fff);border:1px solid var(--line);
  color:var(--muted);font-size:13.5px;font-weight:700;text-align:center;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.ws-clear-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}

@media(max-width:900px){
  .woo-layout{grid-template-columns:1fr;gap:0}
  .woo-filter-toggle{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
  .woo-sidebar{position:static;display:none;margin-bottom:18px}
  .woo-sidebar.open{display:block}
}

/* ============================================================
   Sidebar-aware grid: roomier 3-up cards beside the filter rail.
   The shop grid is flex-based (percent widths survive minifiers),
   so we override flex-basis — not grid tracks — scoped to .woo-main.
   ============================================================ */
@media(min-width:1024px){
  .woo-main ul.products li.product,
  .woo-main ul.products li.product.type-product{
    flex:0 0 31.33% !important;width:31.33% !important;max-width:31.33% !important;margin:0 1% 22px !important}
}
@media(min-width:768px) and (max-width:1023px){
  .woo-main ul.products li.product,
  .woo-main ul.products li.product.type-product{
    flex:0 0 48% !important;width:48% !important;max-width:48% !important;margin:0 1% 18px !important}
}

/* ============================================================
   Shop toolbar (sidebar layout): the sort control now lives in the
   sidebar, so the top bar just carries a light product count on the left.
   Scoped to .woo-main + appended last so it beats the core !important.
   ============================================================ */
.woo-main .woocommerce-result-count{
  float:none !important;width:auto !important;background:none !important;border:0 !important;
  padding:0 !important;margin:2px 0 18px !important;font-size:13.5px !important;font-weight:600 !important;
  color:var(--muted) !important;text-align:left !important}
.woo-main ul.products{clear:both !important}

/* ============================================================
   Mobile: a cleaner, more deliberate shop. Filter stays CLOSED by
   default behind one prominent button; toolbar and cards tidy up.
   ============================================================ */
@media(max-width:900px){
  .woo-filter-toggle{
    display:flex !important;width:100% !important;justify-content:center !important;align-items:center !important;gap:10px;
    margin:0 0 18px !important;padding:13px 18px !important;border-radius:13px !important;
    background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#0b3b2a)) !important;
    color:#fff !important;border:0 !important;font-weight:700 !important;font-size:15px !important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent) !important;cursor:pointer}
  .woo-filter-toggle .wft-ic{font-size:17px;line-height:1}
  .woo-sidebar{position:static;display:none;margin:0 0 20px}
  .woo-sidebar.open{display:block;animation:wsIn .22s ease}
  @keyframes wsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .woo-sidebar .ws-box{border-radius:14px}
}
@media(max-width:767px){
  .woo-main .woocommerce-ordering{float:none !important;width:100% !important;margin:0 0 10px !important}
  .woo-main .woocommerce-ordering select{width:100% !important;min-width:0 !important;display:block !important}
  .woo-main .woocommerce-result-count{float:none !important;width:100% !important;text-align:left !important;margin:0 0 14px !important}
  .woo-main ul.products{gap:0 !important}
  .woo-main ul.products li.product,
  .woo-main ul.products li.product.type-product{flex:0 0 48% !important;width:48% !important;max-width:48% !important;margin:0 1% 14px !important;border-radius:15px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px;padding:11px 12px 5px;min-height:2.8em}
  .woocommerce ul.products li.product .price{font-size:15.5px;padding:0 12px 2px}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{margin:10px 12px 12px;padding:10px 12px;font-size:12.5px}
}

/* ============================================================
   [prottoy_categories] — a full "All Categories" page grid.
   Put the shortcode on any Page; this styles its cards.
   ============================================================ */
.prottoy-catpage{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:8px 0}
.prottoy-catpage.cols-2{grid-template-columns:repeat(2,1fr)}
.prottoy-catpage.cols-4{grid-template-columns:repeat(4,1fr)}
.prottoy-catpage .cp-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,30,24,.04),0 10px 24px rgba(16,30,24,.05);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.prottoy-catpage .cp-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
  box-shadow:0 18px 40px rgba(16,30,24,.13)}
.prottoy-catpage .cp-media{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,#f3f6f4,#e9efea);display:flex;align-items:center;justify-content:center}
.prottoy-catpage .cp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.prottoy-catpage .cp-card:hover .cp-media img{transform:scale(1.05)}
.prottoy-catpage .cp-ph{font-family:var(--title-font,serif);font-size:54px;font-weight:700;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.prottoy-catpage .cp-body{padding:15px 17px 18px;display:flex;flex-direction:column;gap:4px}
.prottoy-catpage .cp-name{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3}
.prottoy-catpage .cp-count{font-size:12.5px;font-weight:700;color:var(--accent)}
.prottoy-catpage .cp-subs{font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}
@media(max-width:900px){.prottoy-catpage,.prottoy-catpage.cols-4{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:520px){.prottoy-catpage,.prottoy-catpage.cols-2,.prottoy-catpage.cols-4{grid-template-columns:1fr}}

/* ============================================================
   Related products as a horizontal scroll row (arrows added by JS).
   Overrides the flex-grid widths just for .related / .up-sells.
   ============================================================ */
.single-product .related.products,
.single-product .up-sells.products{position:relative}
.single-product .related.products > h2,
.single-product .up-sells.products > h2{font-family:var(--title-font,serif);font-size:24px;color:var(--ink);margin:0 0 16px}
.single-product .related.products ul.products,
.single-product .up-sells.products ul.products{
  display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;
  gap:18px !important;margin:0 !important;padding:4px 2px 8px !important;list-style:none !important;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 40%,var(--line)) transparent}
.single-product .related.products ul.products::-webkit-scrollbar,
.single-product .up-sells.products ul.products::-webkit-scrollbar{height:7px}
.single-product .related.products ul.products::-webkit-scrollbar-thumb,
.single-product .up-sells.products ul.products::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:100px}
.single-product .related.products ul.products li.product,
.single-product .up-sells.products ul.products li.product{
  flex:0 0 230px !important;width:230px !important;max-width:230px !important;margin:0 !important;scroll-snap-align:start}
@media(max-width:600px){
  .single-product .related.products ul.products li.product,
  .single-product .up-sells.products ul.products li.product{flex-basis:200px !important;width:200px !important}
}
/* left / right scroll arrows (mounted by JS) */
.rel-arrow{position:absolute;top:52%;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 18px rgba(16,30,24,.14);transition:background .15s,color .15s,opacity .15s,transform .15s}
.rel-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.rel-arrow.prev{left:-12px}
.rel-arrow.next{right:-12px}
.rel-arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}
@media(max-width:900px){.rel-arrow{display:none}}

/* ============================================================
   Single-product gallery — mobile safety + touch zoom fix
   The hover-magnifier (jquery.zoom) injects a full-size .zoomImg over
   the image; on phones there's no hover, so it must never show there,
   and the main image must stay inside the screen.
   ============================================================ */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image{max-width:100%}
.single-product .woocommerce-product-gallery__image{overflow:hidden}
.single-product .woocommerce-product-gallery__image img{width:100%;height:auto;max-width:100%;display:block}
/* the zoom overlay only makes sense with a real mouse pointer */
@media (hover:none),(pointer:coarse){
  .single-product .zoomImg{display:none !important;opacity:0 !important}
  .single-product .woocommerce-product-gallery__image img{cursor:default}
}
@media(max-width:600px){
  .single-product div.product .woocommerce-product-gallery{position:static;top:auto;margin-bottom:6px}
  /* keep the cover a sensible height on phones instead of filling the screen */
  .single-product .woocommerce-product-gallery__image img{max-height:62vh;object-fit:contain;background:linear-gradient(150deg,#f3f6f4,#e9efea)}
  .single-product .flex-control-thumbs{justify-content:center}
  .single-product .flex-control-thumbs img{width:58px;height:58px}
}

/* ============================================================
   Mobile: hard guarantee the single-product page never scrolls
   sideways (a too-wide element makes phones shrink the whole page
   to fit, which looks exactly like "desktop view" on mobile).
   ============================================================ */
@media(max-width:768px){
  .single-product .woo-wrap,
  .single-product div.product{overflow-x:clip;max-width:100%}
  .single-product .woocommerce-tabs,
  .single-product .woocommerce-Tabs-panel,
  .single-product .entry-content,
  .single-product .woocommerce-product-details__short-description{max-width:100%;overflow-x:clip}
  /* nothing inside the description/content may exceed the screen width */
  .single-product .woocommerce-Tabs-panel *,
  .single-product .entry-content *{max-width:100% !important}
  /* scope width-clamping to the PRODUCT content only — never the header/logo */
  .single-product div.product img,
  .single-product div.product iframe,
  .single-product div.product video,
  .single-product div.product table{max-width:100% !important;height:auto}
  /* the product "cards" description: force single column on phones no matter what */
  .single-product .pn{grid-template-columns:minmax(0,1fr) !important}
  .single-product .pn-fg,
  .single-product .pn-dg{grid-template-columns:1fr !important}
  .single-product .pn-sp{grid-template-columns:96px minmax(0,1fr) !important}
  /* title + price sizes for phones (desktop stays large) */
  .single-product div.product .product_title{font-size:23px;line-height:1.25;margin:4px 0 10px}
  .single-product div.product p.price,
  .single-product div.product span.price{font-size:23px}
  .single-product div.product p.price del{font-size:15px}
}

/* Tighten the empty space between the description and the related row on phones */
@media(max-width:768px){
  .single-product .woocommerce-tabs{margin-top:22px}
  .single-product .related.products,
  .single-product .up-sells.products{margin-top:20px}
  .single-product .pn{margin-bottom:4px}
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{padding-bottom:0}
}

/* Product video frame — smart orientation.
   Default = 16:9 (landscape, the common case) so normal YouTube videos fill the
   box. For a vertical/Shorts video, add class "pn-vertical" to the .pn-frame div
   (the JS below also tags real Shorts embeds automatically). */
.single-product .pn-frame{aspect-ratio:16/9 !important}
.single-product .pn-frame.pn-vertical{aspect-ratio:9/16 !important;max-width:300px;margin-left:auto;margin-right:auto}