/*
Theme Name: Hello Child Theme
Template: hello-elementor
Version: 1.0
*/

/* ==================================================
   Dag-Online – Product Loop System (Grid + Carousel)
   Shared card design + qty + add-to-cart (works everywhere)
   No need to add any custom classes
   Scoped to Elementor Loop template structure:
   .loop-box, .p-image-loop, .p-head-loop, .p-price-loop, .p-cart-loop
   ================================================== */


/* ==================================================
   0) TOKENS (GLOBAL)
   ================================================== */
.woocommerce{
  /* Brand */
  --dl-brand:#0E3C59;
  --dl-brand-600:#0a2c41;

  /* UI */
  --dl-ink:#0f1a22;
  --dl-card:#fff;
  --dl-line:rgba(1,71,101,.14);
  --dl-radius:18px;

  /* Spacing & shadows */
  --dl-pad:16px;
  --dl-shadow:0 6px 14px rgba(0,0,0,.05);
  --dl-shadow-lg:0 8px 18px rgba(0,0,0,.06);

  /* Title clamp */
  --dl-title-lines:2;
  --dl-title-lh:1.35;

  /* Qty sizing (desktop default) */
  --dl-qty-size:44px;
  --dl-qty-input-w:86px;
  --dl-qty-gap:10px;
  --dl-qty-safe-pad:14px;

  /* Cart area sizing */
  --dl-btn-h:48px;     /* unified button height */
  --dl-cart-gap:12px;  /* gap between qty row and button */
}


/* ==================================================
   1) SHARED CARD DESIGN (GRID + CAROUSEL)
   ================================================== */
.woocommerce .loop-box{
  background:var(--dl-card);
  border-radius:var(--dl-radius);
  padding:var(--dl-pad);

  display:flex;
  flex-direction:column;
  gap:12px;

  border:1.5px solid transparent;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(135deg,#18bef7 0%, var(--dl-brand) 50%, #0ad9b5 100%);
  background-clip:padding-box, border-box;
  background-origin:border-box;

  box-shadow:var(--dl-shadow);
  overflow:hidden; /* keep all controls inside the card */
  height:100%;     /* enables equal-height behavior */
  min-width:0;     /* IMPORTANT: prevents overflow inside flex/slider items */
}

@media (min-width:1025px){
  .woocommerce .loop-box{ box-shadow:var(--dl-shadow-lg); }
}

/* Image – consistent + safe */
.woocommerce .p-image-loop img{
  width:100% !important;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  border-radius:calc(var(--dl-radius) - 4px);
}

/* Title */
.woocommerce .p-head-loop .elementor-heading-title{
  margin:0;
  color:var(--dl-ink);
  font-weight:800;
  font-size:clamp(15px,1.05vw,18px);
  line-height:var(--dl-title-lh);

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--dl-title-lines);
  overflow:hidden;

  text-align:center;
  min-height:calc(var(--dl-title-lines) * var(--dl-title-lh) * 1em);
}

/* Price */
.woocommerce .p-price-loop .price{
  margin:0;
  color:var(--dl-brand);
  font-weight:800;
  letter-spacing:.2px;
  text-align:center;
}


/* ==================================================
   1.1) CART AREA (wrapper + qty)
   ================================================== */

/* Cart wrapper (holds qty + button) */
.woocommerce .p-cart-loop .product-quantity-wrapper{
  margin-top:auto;
  width:100%;

  display:grid;
  grid-template-rows:auto auto;
  row-gap:var(--dl-cart-gap);

  /* Reserve the same bottom space even when qty row is missing */
  min-height: calc(var(--dl-qty-size) + var(--dl-cart-gap) + var(--dl-btn-h));

  /* Never leak outside card */
  max-width:100%;
  box-sizing:border-box;
}

/* Neutralize Woo defaults that break symmetry */
.woocommerce .quantity,
.woocommerce div.quantity{ width:auto !important; }
.woocommerce .quantity .minus,
.woocommerce .quantity .plus{ margin:0 !important; float:none !important; position:static !important; }

/* Qty row (desktop/tablet default) */
.woocommerce .p-cart-loop .quantity{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dl-qty-gap);

  width:max-content;
  margin-inline:auto;

  padding-inline:var(--dl-qty-safe-pad);
  box-sizing:border-box;
  max-width:100%;
}

/* Make every child stable sizing */
.woocommerce .p-cart-loop .quantity > *{
  box-sizing:border-box;
  flex:0 0 auto;
}

/* Qty input */
.woocommerce .p-cart-loop .qty{
  width:var(--dl-qty-input-w);
  height:var(--dl-qty-size);
  line-height:var(--dl-qty-size);

  border:1px solid var(--dl-line);
  border-radius:12px;
  background:#fff;

  text-align:center;
  font-weight:700;
  color:var(--dl-ink);
  padding:0;

  -moz-appearance:textfield;
}
.woocommerce .p-cart-loop .qty::-webkit-outer-spin-button,
.woocommerce .p-cart-loop .qty::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* +/- buttons */
.woocommerce .p-cart-loop .qty-btn{
  width:var(--dl-qty-size);
  height:var(--dl-qty-size);

  border:1px solid var(--dl-line);
  border-radius:12px;
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  line-height:1;
  color:var(--dl-ink);
  cursor:pointer;

  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease, color .12s ease;
}
.woocommerce .p-cart-loop .qty-btn:hover{
  border-color:rgba(14,60,89,.45);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  color:var(--dl-brand);
}
.woocommerce .p-cart-loop .qty-btn:active{ transform:scale(.97); }


/* ==================================================
   1.2) BUTTON SYSTEM (single source of truth)
   All buttons inside .p-cart-loop look like Add to cart
   Out of stock = same size, different color, disabled
   ================================================== */

/* Base button style – applies to ANY button element in cart area */
.woocommerce .p-cart-loop a.button,
.woocommerce .p-cart-loop .elementor-button,
.woocommerce .p-cart-loop a.elementor-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  height:var(--dl-btn-h) !important;
  border-radius:14px !important;
  padding-inline:16px !important;

  font-weight:800 !important;
  letter-spacing:.2px !important;
  text-decoration:none !important;

  box-sizing:border-box !important;
  border:0 !important;

  /* EXACT like add-to-cart */
  background:linear-gradient(135deg,var(--dl-brand) 0%, var(--dl-brand-600) 100%) !important;
  color:#fff !important;

  box-shadow:0 10px 22px color-mix(in srgb, var(--dl-brand) 22%, transparent) !important;
  transition:filter .12s ease, box-shadow .12s ease, transform .12s ease !important;

  /* Prevent overflow issues */
  white-space:normal !important;
  line-height:1.1 !important;
  text-align:center !important;
}

.woocommerce .p-cart-loop a.button:hover,
.woocommerce .p-cart-loop .elementor-button:hover,
.woocommerce .p-cart-loop a.elementor-button:hover{
  filter:brightness(1.06) !important;
  box-shadow:0 14px 26px color-mix(in srgb, var(--dl-brand) 26%, transparent) !important;
}

.woocommerce .p-cart-loop a.button:active,
.woocommerce .p-cart-loop .elementor-button:active,
.woocommerce .p-cart-loop a.elementor-button:active{
  transform:translateY(1px) !important;
}

/* Out of stock – same design, different color, disabled */
.woocommerce .p-cart-loop a.outofstock-button,
.woocommerce .p-cart-loop a.button.outofstock-button,
.woocommerce .p-cart-loop .outofstock-button.elementor-button,
.woocommerce .p-cart-loop a[aria-disabled="true"],
.woocommerce .p-cart-loop .elementor-button[aria-disabled="true"]{
  background:#111 !important;
  color:#fff !important;
  opacity:.35 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;

  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}


/* RTL helpers */
.woocommerce [dir="rtl"] .p-head-loop .elementor-heading-title,
.woocommerce [dir="rtl"] .p-price-loop .price{
  text-align:center;
}


/* ==================================================
   2) MOBILE – PIXEL-PERFECT (GLOBAL)
   Qty row never overflows on narrow 2-column cards
   ================================================== */
@media (max-width:767.98px){
  .woocommerce{
    --dl-pad:14px;

    --dl-qty-size:26px;
    --dl-qty-input-w:44px;
    --dl-qty-gap:6px;
    --dl-qty-safe-pad:6px;

    --dl-btn-h:42px; /* unified */
  }

  /* MOBILE qty row becomes 3-column grid */
  .woocommerce .p-cart-loop .quantity{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding-inline:var(--dl-qty-safe-pad) !important;
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns: var(--dl-qty-size) minmax(36px, 1fr) var(--dl-qty-size);
    align-items:center;
    justify-items:center;
    column-gap: var(--dl-qty-gap);
  }

  .woocommerce .p-cart-loop .qty-btn{
    width:var(--dl-qty-size) !important;
    height:var(--dl-qty-size) !important;
    border-radius:10px !important;
    font-size:15px !important;
  }

  .woocommerce .p-cart-loop .qty{
    width:100% !important;
    height:var(--dl-qty-size) !important;
    line-height:var(--dl-qty-size) !important;
    border-radius:10px !important;
    font-size:13px !important;
  }

  /* Buttons parity – mobile */
  .woocommerce .p-cart-loop a.button,
  .woocommerce .p-cart-loop .elementor-button,
  .woocommerce .p-cart-loop a.elementor-button{
    padding-inline:12px !important;
    font-size:0.92rem !important;
  }
}


/* ==================================================
   3) CAROUSEL ONLY (Loop Carousel widget)
   You said mobile is 1 product now – leaving your logic intact.
   If you later want 2 products exact, we’ll adjust here.
   ================================================== */
@media (max-width:767.98px){
  .woocommerce .elementor-widget-loop-carousel .swiper{
    overflow:hidden !important;
    padding-inline:0 !important;
  }

  .woocommerce .elementor-widget-loop-carousel .swiper-wrapper{
    align-items:stretch;
  }

  /* Keep slides stretched + allow card equal height */
  .woocommerce .elementor-widget-loop-carousel .swiper-slide{
    display:flex;
    box-sizing:border-box !important;
  }

  .woocommerce .elementor-widget-loop-carousel .swiper-slide .loop-box{
    margin:0 !important;
  }

  /* price safety */
  .woocommerce .elementor-widget-loop-carousel .p-price-loop .price{
    font-size:0.98rem;
    line-height:1.15;
  }
}


/* ==================================================
   4) GRID ONLY (Loop Grid widget)
   ================================================== */
.woocommerce .elementor-widget-loop-grid .elementor-loop-container.elementor-grid{
  gap:16px 14px;
}

@media (max-width:767.98px){
  .woocommerce .elementor-widget-loop-grid .elementor-loop-container.elementor-grid{
    gap:14px 12px;
  }
}


/* ==================================================
   5) TABLET TUNING
   ================================================== */
@media (min-width:768px) and (max-width:1024.98px){
  .woocommerce{
    --dl-qty-size:40px;
    --dl-qty-input-w:80px;
    --dl-qty-gap:10px;
    --dl-qty-safe-pad:12px;
    --dl-btn-h:48px;
  }
}