/*
 * SHARPI Brand (Mockups) – UI overrides
 * Purpose: Match provided mockups for Cart / Categories / Product / Footer
 * Safe: CSS-only + minimal Woo hooks (see functions.php)
 */

:root{
  /* Brand */
  --sharpi-orange:#FF8C00;
  --sharpi-orange-hover:#F58200;
  --sharpi-orange-light:rgba(255,140,0,.10);

  /* Background */
  --sharpi-surface:#ffffff;
  --sharpi-page:#F6F7F9;

  /* Radius */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --radius-full:999px;

  /* Shadows (softer like mockups) */
  --shadow-sm:0 6px 18px rgba(17,24,39,.08);
  --shadow-md:0 12px 30px rgba(17,24,39,.10);
  --shadow-lg:0 16px 40px rgba(17,24,39,.12);
  --shadow-xl:0 22px 60px rgba(17,24,39,.14);

  /* Typography */
  --font-primary:'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:var(--font-primary);
}

body{
  background:var(--sharpi-page);
}

/* Containers look like white cards on light background */
.container{
  max-width:1200px;
}

/* Buttons – pill + gradient */
.btn-primary,
.btn-secondary,
.btn-browse,
.add-to-cart-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button{
  border-radius:var(--radius-full) !important;
  font-weight:800;
  letter-spacing:-0.01em;
}

.btn-primary,
.btn-browse,
.add-to-cart-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button{
  background:linear-gradient(180deg, var(--sharpi-orange) 0%, var(--sharpi-orange-hover) 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(255,140,0,.22);
}

.btn-primary:hover,
.btn-browse:hover,
.add-to-cart-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(255,140,0,.26);
}

.btn-secondary{
  background:#fff;
  border:1px solid var(--gray-200);
  color:var(--gray-900);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{
  border-color:rgba(255,140,0,.35);
  box-shadow:var(--shadow-md);
}

/* Headings */
.section-title{
  letter-spacing:-0.03em;
}

/* =========================
   Homepage – Categories cards
   ========================= */
.categories-section{
  background:transparent;
}

.category-card{
  border-radius:var(--radius-xl);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-sm);
}

.category-card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(255,140,0,.35);
}

.category-icon{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(17,24,39,.03) 0%, rgba(17,24,39,.01) 100%);
  border:1px solid var(--gray-200);
}

.category-card.featured{
  background:linear-gradient(180deg, rgba(255,140,0,.18) 0%, rgba(255,140,0,0) 100%);
  border:2px solid var(--sharpi-orange);
  box-shadow:0 18px 50px rgba(255,140,0,.18);
}

.category-card.featured .category-icon{
  background:rgba(255,140,0,.15);
  border-color:rgba(255,140,0,.35);
}

/* =========================
   Homepage – Product cards
   ========================= */
.product-card{
  border-radius:var(--radius-xl);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-sm);
}
.product-card:hover{
  box-shadow:var(--shadow-lg);
}

.product-card-content .product-price,
.products-section .price,
.woocommerce ul.products li.product .price{
  color:var(--sharpi-orange) !important;
  font-weight:900;
}

/* Make rating look cleaner */
.product-rating .stars{
  letter-spacing:1px;
}

/* =========================
   Cart – WooCommerce Blocks
   ========================= */
.wp-block-woocommerce-cart,
.wc-block-cart{
  max-width:1200px;
  margin:0 auto;
}

.wc-block-cart__main,
.wc-block-cart__sidebar{
  background:var(--sharpi-surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}

.wc-block-cart__main{ padding:22px; }
.wc-block-cart__sidebar{ padding:22px; position:sticky; top:24px; align-self:flex-start; }

@media (max-width: 980px){
  .wc-block-cart__sidebar{ position:static; }
}

.wc-block-cart-items__row{
  border-bottom:1px solid var(--gray-200);
  padding:18px 0;
}

.wc-block-cart-item__image img{
  border-radius:16px;
  border:1px solid var(--gray-200);
  background:#fff;
}

.wc-block-cart-item__product-name{
  font-weight:900;
  letter-spacing:-0.02em;
}

.wc-block-cart-item__prices,
.wc-block-cart-item__total{
  color:var(--gray-700);
}

/* Quantity selector pill */
.wc-block-components-quantity-selector{
  border-radius:999px !important;
  border:1px solid var(--gray-200) !important;
  padding:6px 10px !important;
  box-shadow:none !important;
}

.wc-block-components-quantity-selector input{
  font-weight:900;
}

.wc-block-components-quantity-selector__button{
  border-radius:999px !important;
}

/* Order summary totals */
.wc-block-components-totals-item__label{
  color:var(--gray-700);
  font-weight:800;
}
.wc-block-components-totals-item__value{
  font-weight:900;
}

.wc-block-components-totals-footer-item__label{
  color:var(--sharpi-orange);
  font-weight:900;
  font-size:18px;
}
.wc-block-components-totals-footer-item__value{
  color:var(--sharpi-orange);
  font-weight:900;
  font-size:30px;
}

/* Checkout button in sidebar */
.wc-block-cart__sidebar .wc-block-components-button,
.wc-block-cart__sidebar .wc-block-cart__submit-button{
  width:100%;
  padding:16px 18px !important;
  font-size:16px;
}

/* =========================
   Product page (default Woo templates)
   ========================= */
.single-product .site-main{
  padding:20px 0 40px;
}

.single-product div.product{
  max-width:1200px;
  margin:0 auto;
}

/* =========================
   Single Product — FIX "narrow column" layout
   (Woo/Gutenberg templates sometimes constrain content too much)
   ========================= */
body.single-product #content,
body.single-product .site-content,
body.single-product .content-area,
body.single-product #primary,
body.single-product #main,
body.single-product #main-content{
  width:100%;
  max-width:none;
}

/* If a block template uses constrained layout, widen it for products */
body.single-product .is-layout-constrained{
  width:100%;
}
body.single-product .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:1200px;
  margin-inline:auto;
}

/* Force modern two-column product layout (grid beats old floats) */
body.single-product.woocommerce div.product{
  width:min(1200px, 100%);
  margin-inline:auto;
  padding-inline:18px;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:32px;
  align-items:start;
}
body.single-product.woocommerce div.product .woocommerce-product-gallery,
body.single-product.woocommerce div.product .summary{
  float:none !important;
  width:100% !important;
}
@media (max-width: 980px){
  body.single-product.woocommerce div.product{
    grid-template-columns:1fr;
    gap:18px;
  }
}

.single-product div.product .woocommerce-product-gallery{
  background:var(--sharpi-surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:16px;
}

.single-product div.product .summary{
  background:var(--sharpi-surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:22px;
}

.single-product .product_title{
  font-weight:900;
  letter-spacing:-0.03em;
}

.single-product p.price,
.single-product span.price{
  color:var(--sharpi-orange) !important;
  font-weight:900;
  font-size:34px;
}

/* Stock line */
.single-product p.stock{
  margin-top:8px;
  font-weight:700;
}

/* Remove TOP "Opis" (short description / excerpt) – keep description only in tabs */
.single-product .woocommerce-product-details__short-description,
.single-product .wp-block-post-excerpt{
  display:none !important;
}

/* Make long description media behave nicely (no giant checkmarks / flames) */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel img,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel svg,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel video{
  max-width:100%;
  height:auto;
}
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel img{
  display:block;
  margin:18px auto;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  /* Stops very tall images from taking over the whole page */
  max-height:520px;
}

/* Add to cart big */
.single-product form.cart .single_add_to_cart_button{
  width:100%;
  padding:16px 18px !important;
  font-size:16px;
}

/* Badges under price (hooked in functions.php) */
.sharpi-product-badges{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:14px 0 12px;
  padding:10px 0;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}

.sharpi-badge{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gray-800);
  font-weight:700;
  font-size:13px;
}

.sharpi-badge i{ color:var(--gray-800); opacity:.9; }

/* Tabs – pill */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border:0;
  padding-left:0;
  margin:22px 0 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:0;
  background:transparent;
  margin:0 10px 10px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-weight:900;
  color:var(--gray-700);
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--gray-900);
  border-color:var(--gray-200);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

/* Description content — keep images readable (no giant icons) */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel{
  line-height:1.75;
}
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel img{
  max-width:100%;
  height:auto;
  display:block;
  margin:18px auto;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  /* prevents huge decorative icons from eating the whole page */
  max-height:520px;
}
@media (max-width: 720px){
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel img{
    max-height:420px;
  }
}

/* =========================
   Footer – closer to mockup
   ========================= */
.site-footer{
  background:#141414;
}

.footer-column h3,
.footer-brands h3{
  color:var(--sharpi-orange);
  letter-spacing:.06em;
}

.footer-column a:hover{
  color:#fff;
}

.social-icon{
  width:46px;
  height:46px;
  border-width:2px;
}

/* Subtle footer copy */
.footer-bottom p{
  color:#A1A1AA;
}