/* ============================================================
   BloomySeeds — Custom Styles
   Blog layout redesign + Mobile UX fix
   Version: 1.0 — Aprile 2026
   To update: edit this file, upload via Hostinger File Manager
   Path on server: wp-content/plugins/bloomyseeds-styles/custom.css
   ============================================================ */


/* ============================================================
   BLOG ARCHIVE — Grid layout (Blocksy)
   ============================================================ */

.entries[data-layout="simple"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 600px) {
  .entries[data-layout="simple"] {
    grid-template-columns: 1fr;
  }
}

article.entry-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(42, 84, 67, 0.09);
  box-shadow: 0 2px 14px rgba(42, 84, 67, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

article.entry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(42, 84, 67, 0.13);
}

a.ct-media-container {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

a.ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

article.entry-card:hover a.ct-media-container img {
  transform: scale(1.05);
}

.entry-card .card-content {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.entry-card ul.entry-meta[data-id="meta_1"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-card .meta-categories a {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  text-decoration: none;
  background: #2A5443;
  color: #FAF8F0;
  transition: background 0.2s;
}

.entry-card .meta-categories a:hover {
  background: #D4793A;
}

article.category-growing-guides .meta-categories a { background: #C09A3A; }
article.category-garden-to-table .meta-categories a { background: #D4793A; }
article.category-sow-in-march .meta-categories a    { background: #3a7059; }

.entry-card .entry-title {
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
}

.entry-card .entry-title a {
  color: #2A5443;
  text-decoration: none;
}

.entry-card .entry-title a:hover {
  color: #D4793A;
}

.entry-card .entry-excerpt p {
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-card ul.entry-meta[data-id="meta_2"] {
  list-style: none;
  padding: 12px 0 0;
  margin: auto 0 0;
  border-top: 1px solid rgba(42, 84, 67, 0.1);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.entry-card ul.entry-meta[data-id="meta_2"] a {
  color: #999;
  text-decoration: none;
}

.entry-card ul.entry-meta[data-id="meta_2"] a:hover {
  color: #2A5443;
}

.entry-card .ct-meta-element-date {
  color: #bbb;
}

.page-numbers,
nav.navigation.pagination {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 16px;
}


/* ============================================================
   MOBILE UX FIX — WooCommerce + Blocksy
   ============================================================ */

/* KILL #1 — Cart table responsive */

@media (max-width: 768px) {

  table.shop_table thead {
    display: none;
  }

  table.shop_table,
  table.shop_table tbody,
  table.shop_table tr,
  table.shop_table td {
    display: block;
    width: 100%;
  }

  table.shop_table tr {
    border: 1px solid rgba(42, 84, 67, 0.12);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fff;
  }

  table.shop_table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid rgba(42, 84, 67, 0.06);
    font-size: 14px;
  }

  table.shop_table td:last-child {
    border-bottom: none;
  }

  table.shop_table td::before {
    content: attr(data-title);
    font-weight: 600;
    color: #2A5443;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  table.shop_table td.product-thumbnail {
    justify-content: center;
    padding-bottom: 10px;
  }

  table.shop_table td.product-thumbnail::before {
    display: none;
  }

  table.shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
  }

  table.shop_table td.product-remove {
    justify-content: flex-end;
    border-bottom: none;
  }

  table.shop_table td.product-remove::before {
    display: none;
  }

  table.shop_table td.product-remove a {
    font-size: 20px;
    color: #999;
  }

  table.shop_table td.product-quantity input[type="number"] {
    width: 60px;
    text-align: center;
  }

  .cart-collaterals,
  .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
  }

  .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
  }

  .coupon {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .coupon input#coupon_code {
    width: 100%;
    box-sizing: border-box;
  }

  .coupon button[name="apply_coupon"] {
    width: 100%;
  }

}


/* KILL #2 — Checkout layout stacking */

@media (max-width: 768px) {

  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100%;
    float: none;
  }

  .woocommerce-billing-fields input,
  .woocommerce-billing-fields select,
  .woocommerce-billing-fields textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  .woocommerce-billing-fields .form-row {
    width: 100% !important;
    float: none;
  }

  #place_order {
    display: block;
    width: 100%;
    padding: 18px;
    font-size: 18px;
    font-weight: 700;
    background: #2A5443;
    color: #FAF8F0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 16px;
  }

  #payment {
    background: #f9f7f2;
    border-radius: 8px;
    padding: 16px;
  }

}


/* KILL #3 — Add to cart full width */

@media (max-width: 768px) {

  form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  form.cart .quantity input[type="number"] {
    width: 70px;
    height: 48px;
    text-align: center;
    font-size: 16px;
  }

  .single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 8px;
  }

}


/* Product gallery max height */

@media (max-width: 768px) {

  .woocommerce-product-gallery {
    max-height: 65vw;
    overflow: hidden;
  }

  .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    max-height: 65vw;
    width: 100%;
    object-fit: contain;
  }

  .woocommerce div.product div.summary {
    clear: both;
  }

}


/* ============================================================
   PRODUCT CARD IMAGES — Prevent cropping (shop, categories, homepage)
   Blocksy uses object-fit:cover by default on .ct-media-container img
   which crops portrait images in a square container.
   Fix: force contain so full image is always visible.
   ============================================================ */

ul.products li.product .ct-media-container img,
ul.products li.product .ct-media-container picture img {
  object-fit: contain !important;
  background: #faf8f4;
}


/* Shop product grid 2 colonne mobile */

@media (max-width: 768px) {

  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 12px;
    row-gap: 16px;
  }

  ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    line-height: 1.3;
  }

  ul.products li.product .price {
    font-size: 15px;
  }

  ul.products li.product .button {
    font-size: 12px;
    padding: 8px 10px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

}


/* Global mobile — touch targets, overflow, iOS zoom */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  .button,
  button,
  input[type="submit"] {
    min-height: 44px;
  }

  .ct-container {
    padding-left: 16px;
    padding-right: 16px;
  }

}