/* =========================================================================
   ROKLON — WooCommerce skin  (dark-premium, matches the custom design)
   -------------------------------------------------------------------------
   For "WooCommerce as a backend engine": when WC is active it renders the
   shop / product / cart / CHECKOUT with its own markup. This file re-skins
   those pages to the RokLon look so nothing feels like default WooCommerce.
   Built for CLASSIC (shortcode) Cart & Checkout — use the shortcodes
   [woocommerce_cart] / [woocommerce_checkout], not the Cart/Checkout blocks.
   Palette = the real brand: navy #040e22 · cyan #83d8ff · red CTA #be0038.
   Load it AFTER WooCommerce's own CSS (see the enqueue snippet I gave you).
   ========================================================================= */

/* ---- tokens (scoped to WooCommerce pages) ---- */
body.woocommerce,
body.woocommerce-page,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account{
  --wc-bg:#040e22; --wc-panel-a:#05142b; --wc-panel-b:#000819;
  --wc-card-a:#172d4499; --wc-card-b:#051023ee;
  --wc-line:#55baff33; --wc-line-card:#76caff44; --wc-line-strong:#73d3ffaa;
  --wc-cyan:#83d8ff; --wc-link:#8fc4ec;
  --wc-red-a:#be0038; --wc-red-b:#8d002b; --wc-red-br:#ed2e61;
  --wc-white:#fff; --wc-text:#c4d4e4; --wc-dim:#a7bfd2; --wc-faint:#8aa6c0;
  --wc-radius:16px; --wc-radius-sm:10px;
  --wc-glow:0 0 28px #33b3ff22, 0 25px 50px #00000055;
  --wc-font:'Assistant','Heebo',system-ui,-apple-system,sans-serif;
  --wc-ease:cubic-bezier(.22,.61,.36,1);

  background:radial-gradient(ellipse at 50% 0,#0a2d4d44,transparent 60%), var(--wc-bg);
  color:var(--wc-text); font-family:var(--wc-font);
}
/* the theme renders WC inside <main class="roklon-inner-page"> */
body.woocommerce main.roklon-inner-page,
body.woocommerce-page main.roklon-inner-page{ background:transparent; }

.woocommerce, .woocommerce-page{ color:var(--wc-text); font-family:var(--wc-font); }
.woocommerce a:not(.button):not(.add_to_cart_button){ color:var(--wc-link); text-decoration:none; transition:color .2s var(--wc-ease); }
.woocommerce a:not(.button):not(.add_to_cart_button):hover{ color:var(--wc-white); }
.woocommerce h1,.woocommerce h2,.woocommerce h3{ font-family:var(--wc-font); color:var(--wc-white); font-weight:900; }


/* ---- breadcrumb + shop header ---- */
.woocommerce .woocommerce-breadcrumb{ color:var(--wc-faint); font-size:14px; font-weight:600; margin-block:22px 20px; }
.woocommerce .woocommerce-breadcrumb a{ color:var(--wc-link); }
.woocommerce-products-header__title,
.woocommerce .page-title{
  color:var(--wc-white); font-weight:900; letter-spacing:-.5px;
  font-size:clamp(28px,4vw,46px); margin-block:4px 6px;
}
.woocommerce-products-header__title::after{
  content:""; display:block; width:62px; height:4px; border-radius:4px; margin-top:14px;
  background:linear-gradient(90deg,var(--wc-red-a),var(--wc-cyan));
}
.woocommerce .woocommerce-result-count{ color:var(--wc-dim); font-size:14px; font-weight:600; }
.woocommerce .woocommerce-ordering select{
  background:var(--wc-card-b); color:var(--wc-text); border:1px solid var(--wc-line);
  border-radius:var(--wc-radius-sm); padding:10px 14px; font-family:var(--wc-font); font-weight:600;
}


/* ---- product grid + cards ---- */
.woocommerce ul.products{
  display:grid; gap:24px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.woocommerce ul.products::before,.woocommerce ul.products::after{ content:none !important; }
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:linear-gradient(145deg,var(--wc-card-a),var(--wc-card-b));
  border:1px solid var(--wc-line-card); border-radius:22px; padding:13px;
  box-shadow:0 18px 40px #00000044;
  transition:transform .35s var(--wc-ease), border-color .35s var(--wc-ease), box-shadow .35s var(--wc-ease);
}
.woocommerce ul.products li.product:hover{ transform:translateY(-7px); border-color:var(--wc-line-strong); box-shadow:var(--wc-glow); }
.woocommerce ul.products li.product a img{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:#fff;
  border-radius:14px; margin:0 0 4px; transition:transform .5s var(--wc-ease);
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.02); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--wc-white); font-weight:800; font-size:18px; line-height:1.3;
  text-align:right; padding:16px 8px 8px; margin:0;
}
.woocommerce ul.products li.product .price{
  display:block; color:var(--wc-cyan) !important; font-weight:800; font-size:22px;
  text-align:right; padding:2px 8px 14px; margin:0;
}
.woocommerce ul.products li.product .price del{ color:var(--wc-faint); font-weight:600; opacity:.7; font-size:15px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{ margin-top:auto; width:100%; text-align:center; }
.woocommerce span.onsale{
  position:absolute; top:12px; right:12px; left:auto;
  background:var(--wc-red-a); color:#fff; border:1px solid var(--wc-red-br);
  border-radius:8px; padding:8px 13px; font-size:13px; font-weight:700; line-height:1;
  min-height:0; min-width:0; box-shadow:0 6px 18px #be003855; z-index:3;
}


/* ---- buttons ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.add_to_cart_button,
.woocommerce .single_add_to_cart_button, .woocommerce #place_order,
.woocommerce .checkout-button, .woocommerce .wc-proceed-to-checkout .button{
  background:linear-gradient(135deg,var(--wc-red-a),var(--wc-red-b)) !important;
  color:#fff !important; border:1px solid var(--wc-red-br) !important;
  font-family:var(--wc-font) !important; font-weight:800 !important; font-size:16px !important;
  border-radius:var(--wc-radius-sm) !important; padding:14px 24px !important; cursor:pointer;
  box-shadow:0 10px 26px #be003833;
  transition:transform .2s var(--wc-ease), box-shadow .2s var(--wc-ease) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce #place_order:hover,
.woocommerce .checkout-button:hover, .woocommerce .button.add_to_cart_button:hover{
  transform:translateY(-2px); box-shadow:0 0 24px #d4204f55, 0 14px 34px #be003840;
}
.woocommerce a.button.added, .woocommerce .added_to_cart, .woocommerce .button.wc-backward{
  background:transparent !important; color:var(--wc-cyan) !important;
  border:1px solid var(--wc-line-strong) !important; box-shadow:none;
}
.woocommerce .added_to_cart:hover, .woocommerce .button.wc-backward:hover{ background:#12304f !important; color:#fff !important; }


/* ---- single product ---- */
.single-product div.product{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(26px,4vw,52px);
  align-items:start; direction:rtl;
}
@media(max-width:860px){ .single-product div.product{ grid-template-columns:1fr; gap:24px; } }
.single-product .woocommerce-product-gallery{ float:none !important; width:100% !important; margin:0 !important; }
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image{ border-radius:18px; overflow:hidden; }
.single-product .woocommerce-product-gallery__image img{
  background:linear-gradient(160deg,#fff,#eef3f8); border-radius:18px;
  box-shadow:0 20px 55px #00000055, 0 0 0 1px #ffffff14;
}
.single-product div.product .summary{
  float:none !important; width:100% !important; margin:0 !important;
  background:linear-gradient(140deg,var(--wc-panel-a),var(--wc-panel-b));
  border:1px solid var(--wc-line-card); border-radius:var(--wc-radius); padding:28px; box-shadow:var(--wc-glow);
}
.single-product .product_title{ color:var(--wc-white); font-weight:900; letter-spacing:-.5px; font-size:clamp(26px,3.2vw,42px); margin:0 0 14px; }
.single-product div.product .summary p.price,
.single-product div.product .summary .price{ color:var(--wc-cyan) !important; font-weight:900; font-size:30px; margin:4px 0 18px; }
.single-product div.product .summary .price del{ color:var(--wc-faint); opacity:.7; }
.single-product .woocommerce-product-details__short-description{
  color:var(--wc-dim); line-height:1.75; font-size:16px;
  padding-block-end:18px; margin-block-end:18px; border-block-end:1px solid var(--wc-line);
}
.single-product form.cart{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin:8px 0 18px; }
.single-product .quantity .qty{
  background:#0a1c33; color:#fff; border:1px solid var(--wc-line); border-radius:var(--wc-radius-sm);
  padding:12px; width:80px; text-align:center; font-weight:800; font-family:var(--wc-font);
}
.single-product .single_add_to_cart_button{ flex:1 1 220px; }
.single-product .product_meta{
  color:var(--wc-dim); font-size:14px; margin-top:8px; padding-top:16px; border-top:1px solid var(--wc-line);
}
.single-product .product_meta a{ color:var(--wc-link); }
/* tabs */
.woocommerce-tabs ul.tabs{ border:0 !important; padding:0; margin:34px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.woocommerce-tabs ul.tabs::before{ border:0 !important; }
.woocommerce-tabs ul.tabs li{ background:var(--wc-card-b) !important; border:1px solid var(--wc-line) !important; border-radius:999px !important; }
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce-tabs ul.tabs li a{ color:var(--wc-dim) !important; font-weight:700; padding:10px 20px !important; }
.woocommerce-tabs ul.tabs li.active{ background:var(--wc-red-a) !important; border-color:var(--wc-red-a) !important; }
.woocommerce-tabs ul.tabs li.active a{ color:#fff !important; }
.woocommerce-tabs .panel{ background:var(--wc-card-b); border:1px solid var(--wc-line); border-radius:var(--wc-radius); padding:26px; margin-top:16px; color:var(--wc-dim); line-height:1.8; }
.related.products>h2,.upsells.products>h2{ color:var(--wc-white); font-weight:900; font-size:26px; margin:46px 0 22px; }


/* ---- cart + checkout: tables, panels, inputs ---- */
.woocommerce table.shop_table{
  background:linear-gradient(145deg,var(--wc-card-a),var(--wc-card-b));
  border:1px solid var(--wc-line-card); border-radius:var(--wc-radius);
  border-collapse:separate; border-spacing:0; overflow:hidden; color:var(--wc-text);
}
.woocommerce table.shop_table thead th{ background:#00101f; color:var(--wc-white); font-weight:700; padding:16px; border:0; }
.woocommerce table.shop_table td,.woocommerce table.shop_table th{ border-top:1px solid var(--wc-line); padding:16px; vertical-align:middle; }
.woocommerce-cart table.cart img{ width:72px; border-radius:10px; background:#fff; }
.woocommerce-cart table.cart td.product-name a{ color:var(--wc-white); font-weight:700; }
.woocommerce a.remove{ color:var(--wc-red-br) !important; border:1px solid var(--wc-line); background:transparent !important; }
.woocommerce a.remove:hover{ background:var(--wc-red-a) !important; color:#fff !important; }
.woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading{ color:var(--wc-white); font-weight:900; }
.woocommerce .cart-collaterals .cart_totals,.woocommerce .wc-proceed-to-checkout{ color:var(--wc-text); }
.woocommerce .wc-proceed-to-checkout .checkout-button{ width:100%; text-align:center; }

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details{
  background:linear-gradient(140deg,#0a1e38,#040f22);
  border:1px solid var(--wc-line-card); border-radius:var(--wc-radius); padding:24px; box-shadow:var(--wc-glow);
}
.woocommerce-checkout #order_review table.shop_table{ box-shadow:none; background:transparent; border:0; }
.woocommerce-checkout #payment{ background:#00101f !important; border:1px solid var(--wc-line); border-radius:var(--wc-radius); }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid var(--wc-line); }
.woocommerce-checkout #payment div.payment_box{ background:var(--wc-card-b) !important; color:var(--wc-dim); border-radius:var(--wc-radius-sm); }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--wc-card-b) !important; }
.woocommerce-checkout #place_order{ width:100%; margin-top:10px; }

.woocommerce form .form-row label{ color:var(--wc-text); font-weight:600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_comments,
.woocommerce .select2-container--default .select2-selection--single{
  background:#0a1c33 !important; color:var(--wc-text) !important;
  border:1px solid var(--wc-line) !important; border-radius:var(--wc-radius-sm) !important;
  padding:13px 15px !important; min-height:48px; font-family:var(--wc-font); font-size:15px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{ outline:0; border-color:var(--wc-cyan) !important; box-shadow:0 0 0 3px #83d8ff33 !important; }
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{ color:var(--wc-faint); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--wc-text) !important; line-height:46px !important; }
.woocommerce .select2-dropdown{ background:#0a1c33; border-color:var(--wc-line); color:var(--wc-text); }
.woocommerce .select2-results__option--highlighted[aria-selected]{ background:var(--wc-red-a); }


/* ---- notices ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.woocommerce .woocommerce-notices-wrapper>*{
  background:linear-gradient(140deg,var(--wc-card-a),var(--wc-card-b)); color:var(--wc-text);
  border:0; border-inline-start:4px solid var(--wc-cyan); border-radius:var(--wc-radius-sm);
  box-shadow:0 14px 34px #00000044; padding:16px 20px;
}
.woocommerce-error{ border-inline-start-color:var(--wc-red-br); }
.woocommerce-message::before,.woocommerce-info::before{ color:var(--wc-cyan); }
.woocommerce-error::before{ color:var(--wc-red-br); }


/* ---- pagination ---- */
.woocommerce nav.woocommerce-pagination ul{ border:0; margin-top:40px; display:flex; gap:8px; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:#0c1f36; color:var(--wc-text); border:1px solid var(--wc-line);
  border-radius:var(--wc-radius-sm); min-width:44px; padding:10px 14px; font-weight:700;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{ background:#12304f; color:#fff; border-color:var(--wc-line-strong); }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--wc-red-a); color:#fff; border-color:var(--wc-red-br); }


/* ---- responsive + reduced motion ---- */
@media(max-width:600px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .woocommerce ul.products li.product{ padding:9px; border-radius:16px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:16px; }
  .single-product div.product .summary{ padding:20px; }
}
@media(max-width:380px){ .woocommerce ul.products{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){
  .woocommerce *{ transition:none !important; }
  .woocommerce ul.products li.product:hover{ transform:none; }
}
