/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
Description: Child theme for Hello Elementor - Custom Mailer Boxes UK
Text Domain: hello-elementor-child
*/

/* =========================================
   DESIGN TOKENS
========================================= */
:root{
  --cmbuk-primary:#0F2D3A;
  --cmbuk-highlight:#FFCD00;
  --cmbuk-accent:#0EA5A6;
  --cmbuk-text:#121212;
  --cmbuk-bg:#FAFAF7;
  --cmbuk-card:#FFFFFF;
  --cmbuk-border:#E8EAED;

  --cmbuk-font-heading:"Playfair Display", serif;
  --cmbuk-font-body:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --cmbuk-radius:22px;
  --cmbuk-radius-sm:18px;

  --cmbuk-shadow:0 14px 35px rgba(18,18,18,0.06);
  --cmbuk-shadow-hover:0 22px 55px rgba(18,18,18,0.12);

  --cmbuk-container:1320px;
  --cmbuk-pad:18px;

  --gap-d:18px;
  --gap-t:16px;
  --gap-m:14px;
}

/* =========================================
   BASE
========================================= */
html,body{
  background: var(--cmbuk-bg);
  color: var(--cmbuk-text);
  font-family: var(--cmbuk-font-body);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--cmbuk-font-heading);
  color: var(--cmbuk-primary);
}

a{
  color: inherit;
}

/* =========================================
   BUTTONS
========================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor a.elementor-button,
.elementor a.elementor-button-link,
button,
input[type="submit"]{
  background: var(--cmbuk-primary) !important;
  border: 1px solid var(--cmbuk-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
  box-shadow: 0 10px 22px rgba(15,45,58,0.16) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor a.elementor-button:hover,
.elementor a.elementor-button-link:hover,
button:hover,
input[type="submit"]:hover{
  background: var(--cmbuk-highlight) !important;
  border-color: var(--cmbuk-highlight) !important;
  color: var(--cmbuk-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255,205,0,0.22) !important;
}

.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.elementor a.elementor-button:focus,
.elementor a.elementor-button-link:focus,
button:focus,
input[type="submit"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(14,165,166,0.22), 0 10px 22px rgba(15,45,58,0.12) !important;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.elementor a.elementor-button:focus-visible,
.elementor a.elementor-button-link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible{
  outline: none !important;
}

/* =========================================
   SHOP CONTAINER
========================================= */
body.woocommerce.archive .woocommerce,
body.woocommerce-page.archive .woocommerce,
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce{
  max-width: var(--cmbuk-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--cmbuk-pad) !important;
}

/* Slightly tighter padding on tablet */
@media (max-width: 1024px){
  body.woocommerce.archive .woocommerce,
  body.woocommerce-page.archive .woocommerce,
  body.post-type-archive-product .woocommerce,
  body.tax-product_cat .woocommerce{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================
   HEADER ROW
========================================= */
.woocommerce .woocommerce-notices-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  display: block !important;
}

@media (min-width: 768px){
  .woocommerce .woocommerce-result-count{
    float: left !important;
    width: auto !important;
    margin-top: 6px !important;
    opacity: .92;
  }

  .woocommerce .woocommerce-ordering{
    float: right !important;
    width: auto !important;
  }

  .woocommerce .woocommerce-notices-wrapper,
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering{
    margin-bottom: 18px !important;
  }
}

/* Make sure products always start on a full width line */
.woocommerce ul.products{
  clear: both !important;
}

/* =========================================================
   FIX: EMPTY SPACE BEFORE FIRST PRODUCT ON FIRST ROW
   Some themes inject a hidden "first" li or apply left margin
   These rules remove that gap safely without changing design
========================================================= */

/* If Woo adds "first" class margins, reset them */
.woocommerce ul.products li.first,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product-category.first,
ul.products li.first,
ul.products li.product.first,
ul.products li.product-category.first{
  margin-left: 0 !important;
  clear: none !important;
}

/* If theme uses left padding on the UL, neutralise it */
.woocommerce ul.products,
ul.products{
  padding-left: 0 !important;
}

/* If any item is offset with left margin, remove it */
.woocommerce ul.products > li,
ul.products > li{
  margin-left: 0 !important;
}

/* Force grid start at column 1 for the first visible card */
.woocommerce ul.products > li.product:first-child,
.woocommerce ul.products > li.product-category:first-child,
ul.products > li.product:first-child,
ul.products > li.product-category:first-child{
  grid-column-start: 1 !important;
}

/* If a hidden placeholder exists, hide only truly empty nodes */
.woocommerce ul.products > li:empty,
ul.products > li:empty{
  display: none !important;
}

/* =========================================
   PRODUCTS GRID
   Force 4 desktop | 3 tablet | 1 mobile
   Works on Shop, Category, Elementor widgets
========================================= */
body.woocommerce ul.products.products,
body.woocommerce-page ul.products.products,
body.post-type-archive-product ul.products.products,
body.tax-product_cat ul.products.products,
.woocommerce ul.products,
ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-woocommerce-product-related ul.products,
.elementor-widget-woocommerce-upsell ul.products,
.elementor-widget-woocommerce-cross-sell ul.products{
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--gap-d) !important;

  width: 100% !important;
  max-width: var(--cmbuk-container) !important;
  align-items: stretch !important;
}

/* Tablet */
@media (max-width: 1024px){
  body.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--gap-t) !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  body.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell ul.products{
    grid-template-columns: minmax(0, 520px) !important;
    justify-content: center !important;
    gap: var(--gap-m) !important;
  }
}

/* Kill any Woo/Elementor column widths that force 3 cols */
body.woocommerce ul.products.products > li.product,
body.woocommerce-page ul.products.products > li.product,
body.post-type-archive-product ul.products.products > li.product,
body.tax-product_cat ul.products.products > li.product,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
ul.products li.product,
ul.products li.product-category{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* =========================================
   PRODUCT AND CATEGORY CARDS
   Luxury, premium, consistent height
========================================= */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
ul.products li.product,
ul.products li.product-category{
  background: var(--cmbuk-card) !important;
  border: 1px solid rgba(232,234,237,0.92) !important;
  border-radius: 24px !important;

  padding: 18px !important;

  box-shadow: 0 16px 40px rgba(18,18,18,0.07) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;

  display: flex !important;
  flex-direction: column !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Premium top sheen */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product-category::before,
ul.products li.product::before,
ul.products li.product-category::before{
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  left: -80px !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, rgba(255,205,0,0.16) 0%, rgba(255,205,0,0) 62%) !important;
  transform: rotate(10deg) !important;
  pointer-events: none !important;
}

/* Hover */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover,
ul.products li.product:hover,
ul.products li.product-category:hover{
  transform: translateY(-7px) !important;
  border-color: rgba(255,205,0,0.65) !important;
  box-shadow: 0 26px 70px rgba(18,18,18,0.14) !important;
}

/* =========================================
   IMAGES
========================================= */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img,
ul.products li.product a img,
ul.products li.product-category a img{
  border-radius: 18px !important;
  border: 1px solid rgba(232,234,237,0.95) !important;
  background: #fff !important;

  padding: 12px !important;
  margin: 16px 0 12px 0 !important;

  transition: transform .25s ease, box-shadow .25s ease !important;
  transform: translateZ(0);
}

/* Slight premium lift on hover */
.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product-category:hover a img,
ul.products li.product:hover a img,
ul.products li.product-category:hover a img{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 45px rgba(18,18,18,0.10) !important;
}

/* =========================================
   TITLES AND PRICE
========================================= */
.woocommerce-loop-product__title,
.woocommerce-loop-category__title{
  font-family: var(--cmbuk-font-heading) !important;
  color: var(--cmbuk-primary) !important;
  font-size: 21px !important;
  line-height: 1.16 !important;
  margin: 2px 0 10px 0 !important;
  letter-spacing: .2px !important;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price{
  color: rgba(18,18,18,0.82) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

/* =========================================
   CARD BUTTONS FULL WIDTH
========================================= */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product-category a.button,
ul.products li.product a.button,
ul.products li.product-category a.button{
  width: 100% !important;
  text-align: center !important;
  margin-top: auto !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
}

/* =========================================
   OPTIONAL SMALL POLISH
========================================= */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product-category a,
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product-category a{
  text-decoration: none !important;
}

/* Improve form select for ordering */
.woocommerce .woocommerce-ordering select{
  border-radius: 999px !important;
  border: 1px solid rgba(232,234,237,0.95) !important;
  padding: 10px 14px !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(18,18,18,0.06) !important;
}