/* ==========================================================================
   SanoKala - phone corrections
   --------------------------------------------------------------------------
   Roughly 80% of this shop's traffic is a phone on mobile data, so these are
   not polish. Each rule below fixes something that actively gets in a buyer's
   way on a small screen. Loaded last so it wins without !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stop iOS zooming in when a field is tapped

   Safari on iPhone zooms the whole page whenever a focused input has a font
   smaller than 16px, and it does not zoom back out afterwards. The contact
   form and the checkout fields were both at 14px, which made every form on
   the site feel broken on an iPhone.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .wpforms-container .wpforms-form input[type="text"],
  .wpforms-container .wpforms-form input[type="email"],
  .wpforms-container .wpforms-form input[type="tel"],
  .wpforms-container .wpforms-form input[type="number"],
  .wpforms-container .wpforms-form input[type="url"],
  .wpforms-container .wpforms-form select,
  .wpforms-container .wpforms-form textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce .quantity input.qty,
  .woocommerce-page #coupon_code,
  input[type="search"] {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   2. The mega menu is a hover surface, so it has no business on a touch
      screen - and at 560px min-width it would force the page sideways.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {
  .sk-mega { display: none; }
}

/* --------------------------------------------------------------------------
   3. Buy controls

   Quantity stepper beside a full-width button is a desktop pattern. On a
   phone the two fight for the same row and the button ends up too narrow to
   hit confidently.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .woocommerce div.product form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .woocommerce div.product form.cart .quantity,
  .woocommerce div.product form.cart .quantity input.qty {
    width: 100%;
  }

  .woocommerce div.product form.cart .button {
    width: 100%;
    min-height: 48px;
  }

  /* Anything a thumb has to hit gets a real target. */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .sk-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   4. Cart and order tables

   These are genuinely tabular, so rather than let them push the whole page
   sideways they scroll inside their own box.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive,
  .woocommerce-cart table.cart,
  .woocommerce table.woocommerce-orders-table,
  .tinv-wishlist table.tinvwl-table-manage-list {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   5. The floating WhatsApp button must not sit on top of the thing the
      customer is trying to press.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .woocommerce-cart .site-main,
  .woocommerce-checkout .site-main,
  .woocommerce-account .site-main {
    padding-bottom: 88px;
  }
}

/* --------------------------------------------------------------------------
   6. Long words - product codes, email addresses, pasted links - should wrap
      rather than widen the page.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .entry-content p,
  .woocommerce-product-details__short-description,
  .woocommerce-Tabs-panel p,
  .sk-e-detail .elementor-icon-box-description {
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   7. Nothing may push the page sideways

   One overflowing element on a phone turns every page into a sideways-
   scrolling one, and the cause is usually invisible. This is the backstop.
   -------------------------------------------------------------------------- */

html, body { overflow-x: clip; }

@media (max-width: 768px) {
  img, video, iframe, svg, table { max-width: 100%; }
  pre, code { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   8. Type scale

   Headings set for a 1280px column are simply too big at 390px: a three-word
   product name was taking four lines before the price appeared.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .entry-content h1,
  .entry-title,
  .page-title,
  .woocommerce div.product .product_title {
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.2;
  }

  .entry-content h2,
  .sk-sect__title,
  .woocommerce-cart h1,
  .woocommerce-checkout h1 {
    font-size: clamp(21px, 5.5vw, 26px);
    line-height: 1.25;
  }

  .entry-content h3 { font-size: 18px; line-height: 1.3; }

  .entry-content p,
  .entry-content li { font-size: 16px; line-height: 1.65; }
}

/* --------------------------------------------------------------------------
   9. Vertical rhythm

   Desktop section padding on a phone means a lot of scrolling past nothing.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --sk-rhythm: 34px; --sk-gutter: 16px; }

  .sk-section,
  .elementor-section,
  .e-con { --padding-block-start: 26px; --padding-block-end: 26px; }
}

/* --------------------------------------------------------------------------
   10. Checkout on a phone

   Two columns become one, in the order a person actually fills them: their
   details first, then what they are paying for, then the button.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex;
    flex-direction: column;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    width: 100%;
    float: none;
    margin-inline: 0;
  }

  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    margin-bottom: 22px;
  }

  .woocommerce-checkout #order_review {
    padding: 18px;
    border: 1px solid var(--sk-line, #EFEFF2);
    border-radius: var(--sk-r-panel, 18px);
    background: var(--sk-white, #fff);
  }

  .woocommerce-checkout #order_review_heading { margin-top: 8px; }

  /* The order table is only two columns wide here, so it reads better
     stacked than scrolled. */
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td { padding: 12px 8px; }
}

/* --------------------------------------------------------------------------
   11. Cart on a phone

   The cart table becomes a stack of rows - a horizontal scrollbar on the one
   screen where people check what they are buying is a bad trade.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .woocommerce-cart table.cart { display: block; overflow: visible; }
  .woocommerce-cart table.cart thead { display: none; }
  .woocommerce-cart table.cart tbody,
  .woocommerce-cart table.cart tr { display: block; width: 100%; }

  .woocommerce-cart table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 4px 14px;
    padding: 16px 0;
    border-top: 1px solid var(--sk-line, #EFEFF2);
  }

  .woocommerce-cart table.cart tr.cart_item td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .woocommerce-cart table.cart td.product-remove {
    position: absolute;
    top: 14px;
    inset-inline-end: 0;
  }

  .woocommerce-cart table.cart td.product-thumbnail {
    grid-row: 1 / span 3;
    display: block;
  }
  .woocommerce-cart table.cart td.product-thumbnail img { width: 72px; height: auto; }

  .woocommerce-cart table.cart td.product-name { padding-inline-end: 30px; font-weight: 600; }
  .woocommerce-cart table.cart td.product-quantity { margin-top: 6px; }
  .woocommerce-cart table.cart td.product-subtotal { font-weight: 700; }

  /* WooCommerce's stacked labels would repeat what is already obvious. */
  .woocommerce-cart table.cart td::before { display: none !important; }

  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals { width: 100%; float: none; }
}
/* --------------------------------------------------------------------------
   12. Product page on a phone
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .single-product .sk-back { margin-bottom: 14px; }

  .single-product .woocommerce-product-gallery { margin-bottom: 18px; }

  .single-product .entry-summary > * { margin-bottom: 14px; }

  .single-product .price { font-size: 22px; }

  /* One save-for-later button, full width, same target size as add to cart. */
  .single-product .tinvwl_add_to_wishlist_button,
  .single-product .sk-single-wishlist a {
    width: 100%;
    justify-content: center;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs { margin-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   13. Footer on a phone

   Four columns become one. Everything left-aligned on the same edge as the
   page, so nothing appears to hang.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .ct-footer [data-row="middle"] > div { row-gap: 30px; }

  .ct-footer [data-column] { text-align: left; }

  .ct-footer .widget-title { margin-bottom: 12px; }

  /* Footer links get a real tap target without looking like buttons. */
  .ct-footer .widget ul li a,
  .ct-footer .menu li a {
    display: inline-block;
    padding-block: 6px;
  }

  .sk-fsocial { margin-top: 16px; }

  .ct-footer [data-row="bottom"] > div {
    row-gap: 12px;
    text-align: left;
  }

  .sk-ftalk .sk-fwa,
  .sk-ftalk .sk-fmail a { max-width: none; }
}

/* --------------------------------------------------------------------------
   14. Alignment

   Buttons, headings and body copy on a page should start on the same left
   edge. Several WooCommerce templates centre things by default, which is
   what made screens look like they had been assembled by two people.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 18px; }

.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message { text-align: left; }

/* A button and the text beside it should share a baseline, not float. */
.woocommerce .cart .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.woocommerce .cart .actions .button { float: none; margin: 0; }

/* Blocksy centres the tab titles by default; the description under them is
   left-aligned, so the pair looked unrelated. */
.woocommerce div.product .woocommerce-tabs ul.tabs { justify-content: flex-start; }

@media (max-width: 768px) {
  .woocommerce .cart .actions { justify-content: stretch; padding: 14px; }
  .woocommerce .cart .actions .coupon,
  .woocommerce .cart .actions .button { width: 100%; }
}