/* =============================================
   TechOkaz — Mobile-first improvements
   ============================================= */

/* ── 0. Fix: Blocksy transparent header ─────── */
/*
   Blocksy sets --has-transparent-header:1 on [data-header*="type-1"]
   and marks rows with data-transparent-row="yes".
   Override the variable + force solid white background.
*/
header.ct-header[data-id="type-1"],
header.ct-header[data-id="type-1"] [data-transparent-row="yes"],
header.ct-header[data-id="type-1"] [data-transparent-row],
header.ct-header[data-id="type-1"] [data-row],
header.ct-header [data-device][data-transparent],
header.ct-header [data-device] [data-transparent-row="yes"],
header.ct-header [data-device] [data-transparent-row] {
  --has-transparent-header: 0;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ── 0b. Hamburger: always visible on any bg ── */
/*
   White pill behind the burger so it's readable
   whether header is white, blue, or transparent.
*/
.ct-header-trigger {
  background: rgba(255,255,255,.95) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.12) !important;
}

.ct-header-trigger svg rect,
.ct-header-trigger svg path,
.ct-header-trigger svg line,
.ct-header-trigger span {
  fill: #0d1b2a !important;
  background-color: #0d1b2a !important;
  stroke: #0d1b2a !important;
}

/* ── 1. Body clearance for bottom nav ──────── */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 2. Bottom navigation bar ───────────────── */
.tk-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 16px rgba(0,0,0,.1);
  z-index: 9990;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
  .tk-bottom-nav { display: flex; }
}

.tk-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  text-decoration: none;
  color: #9ca3af;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
  position: relative;
}

.tk-bn-item.active,
.tk-bn-item:hover { color: #0d1b2a; }
.tk-bn-item:active { opacity: .7; }

.tk-bn-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: #0d1b2a;
  border-radius: 2px 2px 0 0;
}

.tk-bn-icon { width: 22px; height: 22px; flex-shrink: 0; }

.tk-bn-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tk-bn-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: .58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 0 0 2px #fff;
}

/* ── 3. Sticky add to cart bar ──────────────── */
.tk-sticky-atc {
  display: none;
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid #e5e7eb;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  z-index: 9980;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 768px) {
  .tk-sticky-atc { display: block; }
}

.tk-sticky-atc.tk-sac-show { transform: translateY(0); }

.tk-sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.tk-sac-info { flex: 1; min-width: 0; }

.tk-sac-name {
  font-size: .78rem;
  font-weight: 700;
  color: #0d1b2a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tk-sac-price {
  font-size: .75rem;
  font-weight: 600;
  color: #3b82f6;
  margin-top: 1px;
}

.tk-sac-btn {
  flex-shrink: 0;
  background: #0d1b2a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  height: 44px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}

.tk-sac-btn:active { background: #3b82f6; }

/* ── 4. Product grid: 2 cols at all phone sizes ── */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
  .tk-archive-main ul.products,
  .tk-archive-main .products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
  .tk-lp-body { padding: .6rem .65rem .8rem !important; }
  .tk-lp-title { font-size: .76rem !important; }
  .tk-lp-specs { display: none !important; }
  .tk-lp-price .woocommerce-Price-amount { font-size: .85rem !important; }
  .tk-lp-heart { display: none !important; }
}

/* ── 5. Touch targets (min 44px) ────────────── */
@media (max-width: 768px) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit {
    min-height: 48px !important;
    font-size: .92rem !important;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    letter-spacing: .02em !important;
  }

  .woocommerce div.product form.cart .qty {
    height: 54px !important;
    font-size: 1.1rem !important;
    padding: 0 .75rem !important;
    min-width: 70px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    text-align: center !important;
  }

  .tk-archive-pagination .woocommerce-pagination ul li a,
  .tk-archive-pagination .woocommerce-pagination ul li span {
    min-width: 44px !important;
    height: 44px !important;
  }

  .tk-cart-sidebar .wc-proceed-to-checkout .checkout-button {
    min-height: 54px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  /* Single product: full width layout */
  .woocommerce div.product .images,
  .woocommerce div.product .summary {
    float: none !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
  }

  .woocommerce div.product .product_title { font-size: 1.3rem !important; }
  .woocommerce div.product p.price { font-size: 1.25rem !important; }
}

/* ── 6. Checkout: prevent iOS zoom ──────────── */
@media (max-width: 768px) {
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea,
  .woocommerce-page input[type="text"],
  .woocommerce-page input[type="email"],
  .woocommerce-page input[type="tel"],
  .woocommerce-page input[type="password"],
  .woocommerce-page input[type="number"],
  .woocommerce-page select, .woocommerce-page textarea {
    font-size: 16px !important;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #customer_details .col2-set .col-1,
  #customer_details .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
  }

  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select {
    min-height: 48px !important;
    padding: .75rem 1rem !important;
    border-radius: 8px !important;
  }
}

/* ── 7. Filter sidebar toggle ────────────────── */
.tk-filter-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .8rem 1rem;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: #0d1b2a;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  gap: .5rem;
}

.tk-filter-sidebar-toggle svg { transition: transform .2s; flex-shrink: 0; }
.tk-filter-sidebar.open .tk-filter-sidebar-toggle svg { transform: rotate(180deg); }

.tk-filter-sidebar-inner {
  padding: .75rem 0;
}

@media (max-width: 768px) {
  .tk-filter-sidebar-toggle { display: flex; }

  .tk-filter-sidebar-inner {
    display: none;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -4px;
  }

  .tk-filter-sidebar.open .tk-filter-sidebar-inner { display: block; }
}

@media (min-width: 769px) {
  .tk-filter-sidebar-toggle { display: none !important; }
  .tk-filter-sidebar-inner { display: block !important; }
}

/* ── 8. Wishlist FAB above bottom nav ───────── */
@media (max-width: 768px) {
  #tk-wl-fab {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #tk-wl-toast {
    bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 8b. Cart: named-grid layout (no overlap) ── */
@media (max-width: 768px) {
  /* Cancel conflicting old rules */
  .tk-cart-items .shop_table td::before   { content: none !important; }
  .tk-cart-items .shop_table .product-remove { position: static !important; }

  /* Block-level table wrapper */
  .tk-cart-items .shop_table,
  .tk-cart-items .shop_table tbody { display: block !important; }
  .tk-cart-items .shop_table thead { display: none !important; }

  /* Each cart row → 3-col named grid */
  .tk-cart-items .shop_table tr.cart_item {
    display: grid !important;
    grid-template-columns: 68px 1fr auto !important;
    grid-template-areas:
      "img  name  rmv  "
      "img  price price"
      "img  qty   sub  " !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    align-items: center !important;
  }

  /* Reset all cells */
  .tk-cart-items .shop_table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-size: .85rem !important;
    background: none !important;
  }

  /* Image */
  .tk-cart-items .shop_table .product-thumbnail {
    grid-area: img !important;
    align-self: start !important;
  }
  .tk-cart-items .shop_table .product-thumbnail img {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f9fafb !important;
    display: block !important;
  }

  /* Name */
  .tk-cart-items .shop_table .product-name {
    grid-area: name !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    color: #0d1b2a !important;
    line-height: 1.35 !important;
    align-self: center !important;
    display: block !important;
  }

  /* Unit price — full width row */
  .tk-cart-items .shop_table .product-price {
    grid-area: price !important;
    font-size: .78rem !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .tk-cart-items .shop_table .product-price::before {
    content: 'Prix :' !important;
    color: #9ca3af !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }

  /* Quantity — left of subtotal */
  .tk-cart-items .shop_table .product-quantity {
    grid-area: qty !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .tk-cart-items .shop_table .product-quantity::before {
    content: 'Qté :' !important;
    color: #9ca3af !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }
  .tk-cart-items .shop_table .product-quantity .qty {
    width: 52px !important;
    height: 32px !important;
    font-size: .88rem !important;
    text-align: center !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 0 .3rem !important;
  }

  /* Subtotal — right-aligned */
  .tk-cart-items .shop_table .product-subtotal {
    grid-area: sub !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    color: #0d1b2a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Remove button */
  .tk-cart-items .shop_table .product-remove {
    grid-area: rmv !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }
  .tk-cart-items .shop_table .product-remove .remove {
    width: 26px !important;
    height: 26px !important;
    font-size: .9rem !important;
  }

  /* Actions row (coupon + update button) */
  .tk-cart-items .shop_table tr:not(.cart_item) td {
    display: block !important;
    padding: 1rem 0 !important;
    grid-area: unset !important;
  }
}

/* ── 9. Plugin pages on small screens ───────── */
@media (max-width: 480px) {
  #tk-stats-app { padding: 10px !important; }
  .tk-st-kpi-val { font-size: 1.05rem !important; }
  .tk-st-chart-wrap { height: 175px !important; }
  #tk-dash-app { padding: 10px !important; }
}

/* ── 10. Archive: hide sort bar text on tiny screens */
@media (max-width: 380px) {
  .tk-archive-toolbar .woocommerce-ordering select {
    max-width: 140px !important;
  }
}

/* ── 7. WooCommerce Block Cart — responsive mobile ───────────────────────── */

@media (max-width: 768px) {

  /* Layout: empiler items et totaux verticalement */
  .wc-block-cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }
  .wc-block-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart-items-block {
    width: 100% !important;
  }
  .wc-block-cart .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart-totals-block {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* Article du panier: image + infos côte à côte */
  .wc-block-cart-item {
    grid-template-columns: 80px 1fr !important;
    gap: .75rem !important;
    padding: .85rem 0 !important;
  }
  .wc-block-cart-item__image { width: 80px !important; }
  .wc-block-cart-item__image img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* Nom et métadonnées produit */
  .wc-block-cart-item__product-name,
  .wc-block-cart-item__product a {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }
  .wc-block-cart-item__product-metadata { font-size: .78rem !important; }

  /* Stepper quantité touch-friendly */
  .wc-block-components-quantity-stepper { height: 44px !important; }
  .wc-block-components-quantity-stepper__button {
    min-width: 44px !important;
    height: 44px !important;
  }
  .wc-block-components-quantity-stepper input[type=number] {
    font-size: 16px !important;
    height: 44px !important;
    min-width: 50px !important;
    text-align: center !important;
  }

  /* Prix article */
  .wc-block-cart-item__total {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  /* Lignes de totaux */
  .wc-block-components-totals-item {
    padding: .6rem 0 !important;
    font-size: .95rem !important;
  }

  /* Coupon: empiler input + bouton */
  .wc-block-components-totals-coupon__form {
    flex-direction: column !important;
    gap: .5rem !important;
  }
  .wc-block-components-totals-coupon__form input {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  .wc-block-components-totals-coupon__form button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  /* Bouton Passer la commande */
  .wp-block-woocommerce-proceed-to-checkout-block a,
  .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-checkout-place-order-button,
  .wc-block-cart__submit-container .wc-block-cart__submit-button,
  .wc-block-components-button.wc-block-cart__submit-button {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    margin-top: .75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Grille panier vide: 4 cols -> 2 cols */
  .wc-block-grid.has-4-columns,
  .wc-block-grid.has-4-columns .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }

  /* Padding page panier */
  .woocommerce-cart .ct-container,
  .woocommerce-cart .entry-content > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Très petit écran (≤ 390px) */
@media (max-width: 390px) {
  .wc-block-cart-item {
    grid-template-columns: 68px 1fr !important;
  }
  .wc-block-cart-item__image,
  .wc-block-cart-item__image img {
    width: 68px !important;
    height: 68px !important;
  }
  .wc-block-cart-item__product-name,
  .wc-block-cart-item__product a { font-size: .82rem !important; }
}