/* shopishop-mobile.css — 2026-10-31. Mobile-first repair of shopishop.com (90% of traffic).
   Loaded AFTER shopishop-custom.css. Pulls the layout back toward stock Shoptimizer behaviour on
   phones and applies the Shopishop CI (white-first; greens #0a672a / #2c7f1a / #56b20a; text #333).
   Scope: ≤ 767px unless stated. Desktop untouched. */

:root{
  --ss-green-900:#0a672a; --ss-green-700:#2c7f1a; --ss-green-500:#56b20a; --ss-green-300:#8ee700;
  --ss-ink:#333333; --ss-ink-soft:#666666; --ss-line:#e6e8e6; --ss-bg:#ffffff;
}

@media (max-width:767px){

  /* ---------- 1. Homepage tiles ---------- */
  .category-grid,.category-grid-extra,.promo-banner{
    display:grid !important;grid-template-columns:1fr !important;gap:14px !important;
    padding:0 16px !important;margin:14px auto !important;max-width:100% !important}
  .category-grid>figure,.category-grid-extra>figure,.promo-banner>figure{
    margin:0 !important;max-height:none !important;aspect-ratio:820/450 !important;border-radius:12px !important;overflow:hidden !important}
  .promo-banner>figure img{height:100% !important;object-fit:cover !important}
  .category-grid figcaption,.category-grid-extra figcaption,.promo-banner figcaption{padding:14px 16px 16px !important}
  .category-grid figcaption strong,.category-grid-extra figcaption strong,.promo-banner figcaption strong{
    font-size:clamp(17px,5.2vw,22px) !important;line-height:1.2 !important;margin-bottom:4px !important;
    hyphens:none !important;overflow-wrap:normal !important;word-break:keep-all !important}
  .category-grid figcaption em,.category-grid-extra figcaption em,.promo-banner figcaption em{font-size:13px !important;margin-bottom:10px !important}
  .category-grid figcaption::after,.category-grid-extra figcaption::after,.promo-banner figcaption::after{
    padding:8px 16px !important;font-size:12px !important}

  /* ---------- 2. Trending chips: one wrapping row, not a column ---------- */
  .ss-trending{display:flex !important;flex-wrap:wrap !important;gap:8px !important;align-items:center !important;padding:0 16px !important;margin:12px 0 !important}
  .ss-trending .ss-trending-label{flex:0 0 100% !important;margin:0 0 2px !important}
  .ss-trending a{display:inline-block !important;margin:0 !important;padding:7px 12px !important;font-size:13px !important;line-height:1.2 !important;
    background:#f3f6f3 !important;color:var(--ss-green-900) !important;border-radius:999px !important}

  /* ---------- 3. Product cards (home, shop, category, related) ---------- */
  ul.products li.product .product__categories{
    font-size:10px !important;letter-spacing:.4px !important;line-height:1.3 !important;margin:0 0 4px !important;
    display:block !important;width:100% !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;text-transform:uppercase !important}
  ul.products li.product .product__categories a{color:var(--ss-ink-soft) !important;display:inline !important}
  /* "Fast Ship" is a tag, not a category: hide it from the label so the real category shows */
  ul.products li.product .product__categories a[href$="/fast-ship/"]{display:none !important}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px !important;line-height:1.3 !important;margin:0 0 6px !important}
  .woocommerce ul.products li.product .price{font-size:15px !important}
  .woocommerce ul.products li.product .price ins,.woocommerce ul.products li.product .price>.woocommerce-Price-amount{color:var(--ss-green-900) !important}
  .woocommerce ul.products li.product a.button,.woocommerce ul.products li.product .button.add_to_cart_button{
    display:block !important;width:100% !important;box-sizing:border-box !important;text-align:center !important;
    padding:10px 10px !important;font-size:12px !important;letter-spacing:.4px !important;white-space:nowrap !important;
    border-radius:8px !important;background:var(--ss-green-900) !important;box-shadow:none !important;color:#fff !important}
  .woocommerce ul.products li.product a.button:hover,.woocommerce ul.products li.product .button.add_to_cart_button:hover{background:var(--ss-green-700) !important;filter:none !important}
  ul.products li.product .ds-ship,ul.products li.product [class*="ds-ship"],ul.products li.product .ss-delivery{font-size:12px !important;line-height:1.3 !important}
  .woocommerce ul.products li.product .onsale,.woocommerce span.onsale{font-size:11px !important;padding:3px 8px !important;border-radius:6px !important;background:var(--ss-green-700) !important}

  /* ---------- 4. Product page: price and Add to cart together, description after ---------- */
  .single-product div.product .summary.entry-summary{display:flex !important;flex-direction:column !important}
  .single-product div.product .summary.entry-summary>*{order:10}
  .single-product div.product .summary.entry-summary>.product_title{order:1 !important;font-size:20px !important;line-height:1.25 !important;margin-bottom:6px !important}
  .single-product div.product .summary.entry-summary>.cgkit-as-variation-price,
  .single-product div.product .summary.entry-summary>p.price{order:2 !important;margin:0 0 8px !important}
  .single-product div.product .summary.entry-summary>p.stock{order:3 !important;margin:0 0 8px !important}
  .single-product div.product .summary.entry-summary>form.cart{order:4 !important;margin:0 0 12px !important}
  .single-product div.product .summary.entry-summary>.commercekit-inventory{order:5 !important}
  .single-product div.product .summary.entry-summary>.commercekit-size-guide{order:6 !important}
  .single-product div.product .summary.entry-summary>.product-widget{order:7 !important}
  .single-product div.product .summary.entry-summary>.woocommerce-product-details__short-description{order:20 !important;margin-top:16px !important;padding-top:14px !important;border-top:1px solid var(--ss-line)}
  .single-product div.product .summary.entry-summary>.clear{display:none !important}
  .single-product div.product form.cart .single_add_to_cart_button{
    flex:1 1 auto !important;padding:14px 16px !important;font-size:14px !important;border-radius:8px !important;
    background:var(--ss-green-900) !important;box-shadow:none !important}
  .single-product div.product p.price{font-size:26px !important}
  .single-product div.product p.price ins,.single-product div.product p.price>.woocommerce-Price-amount{color:var(--ss-green-900) !important}
  /* empty "Guaranteed Safe Checkout" frame */
  .single-product .summary .widget_text .textwidget:empty,.single-product .summary .product-widget .textwidget>p:only-child:empty{display:none !important}

  /* ---------- 5. Category / shop pages: products first ---------- */
  .tax-product_cat .term-description,.tax-product_cat .desc-toggle-btn,.post-type-archive-product .term-description{display:none !important}
  .tax-product_cat .woocommerce-products-header img,.tax-product_cat .entry-content>img:first-of-type{display:none !important}
  .woocommerce .before-shop-loop .woocommerce-pagination,.woocommerce-products-header+.woocommerce-pagination,.shoptimizer-sorting .woocommerce-pagination{display:none !important}
  .woocommerce-result-count{font-size:12px !important;color:var(--ss-ink-soft) !important}
  .woocommerce-ordering select{font-size:13px !important;padding:8px 10px !important}
  .woocommerce-breadcrumb{font-size:12px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

  /* ---------- 6. CI: buttons and accents (replaces the off-CI orange/red gradient on phones) ---------- */
  .woocommerce a.button,.woocommerce .button,.woocommerce button.button,.woocommerce .button.alt,.woocommerce input.button,
  .ss-hero-overlay .ss-hero-cta,.entry-content a.button,.wp-block-button__link,.checkout-button{
    background:var(--ss-green-900) !important;color:#fff !important;border-radius:8px !important;box-shadow:none !important;
    font-weight:700 !important;letter-spacing:.3px !important;text-transform:none !important}
  .category-grid figcaption::after,.category-grid-extra figcaption::after,.promo-banner figcaption::after{
    background:var(--ss-green-900) !important;border-radius:8px !important;box-shadow:none !important;text-transform:none !important;letter-spacing:.2px !important}
  .ss-hero-overlay .ss-hero-cta{padding:8px 14px !important;font-size:12px !important}

  /* ---------- 7. Header / top bar: tighter ---------- */
  .ss-topbar,.shoptimizer-topbar,.top-bar{font-size:12px !important;padding:4px 12px !important}
  .site-header .site-search{margin:6px 16px 8px !important}
  .site-search input[type="search"]{height:40px !important;font-size:14px !important;border-radius:10px !important}
  .ss-promo-strip,.shoptimizer-promo-bar{font-size:12px !important;padding:6px 12px !important}

  /* ---------- 8. Cookie notice: smaller, bottom, out of the way ---------- */
  #ss-cookie-banner{position:fixed !important;left:8px !important;right:8px !important;bottom:8px !important;top:auto !important;
    font-size:12px !important;line-height:1.35 !important;padding:10px 12px !important;border-radius:12px !important;z-index:9999 !important}
  #ss-cookie-banner .ss-cb-text{font-size:12px !important}
  #ss-cookie-banner button{padding:7px 12px !important;font-size:12px !important}
}