/* ==========================================================================
   Mobile app-style layer (<= 767px only). Desktop is untouched.
   Narrow 12px gutters, compact sections, swipe rows, 2-col shop grid.
   ========================================================================== */

@media (max-width: 767px) {

  html body {
    --m-gut: 12px;
    --m-sec: 32px;
    --m-ink: #000000;
    --m-blue: var(--lms-primary, #2563EB);
  }


  /* ---------- Global containers ---------- */
  html body .ast-container,
  html body #content > .ast-container {
    padding-left: var(--m-gut) !important;
    padding-right: var(--m-gut) !important;
    padding-top: 16px !important;
    padding-bottom: 28px !important;
  }

  html body .ast-separate-container .ast-article-single,
  html body .ast-separate-container .ast-article-post,
  html body .ast-plain-container .site-main > article {
    padding: 0 !important;
  }


  /* ---------- Shared section look ---------- */
  html body .lwhh-cream-section,
  html body .lwhh-black-section,
  html body .lwhh-red-section,
  html body .lwhh-topics-section,
  html body .lwhh-offer-section {
    padding: var(--m-sec) var(--m-gut) !important;
  }

  html body .lwhh-black-giant-watermark { display: none !important; }

  html body .lwhh-sec-header-row {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 14px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }
  html body .lwhh-sec-header-row > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  html body .lwhh-sec-header-row > div:last-child { flex: 0 0 auto !important; }

  html body .lwhh-tag-black,
  html body .lwhh-tag-white {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.05em !important;
  }

  html body .lwhh-sec-h2,
  html body .lwhh-red-section h2,
  html body .lwhh-offer-section h2 {
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Section "view all" buttons become a compact pill */
  html body .lwhh-sec-header-row .btn-lwhh-primary,
  html body .lwhh-sec-header-row .btn-lwhh-black {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    min-height: 0 !important;
    width: auto !important;
    box-shadow: 3px 3px 0 0 var(--m-ink) !important;
    white-space: nowrap !important;
    gap: 6px !important;
  }
  html body .lwhh-sec-header-row .btn-lwhh-primary svg,
  html body .lwhh-sec-header-row .btn-lwhh-black svg { width: 12px !important; height: 12px !important; }

  /* Generic big CTA buttons */
  html body .btn-lwhh-primary,
  html body .btn-lwhh-black {
    padding: 13px 18px !important;
    font-size: 0.82rem !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }

  /* ---------- Home: hero ---------- */
  html body .lwhh-hero-left {
    padding: 22px var(--m-gut) 28px !important;
  }
  html body .lwhh-hero-right,
  html body .lwhh-trust-row {
    display: none !important;
  }
  html body .lwhh-badge-pill-header {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    margin-bottom: 14px !important;
    width: auto !important;
    display: inline-flex !important;
  }
  html body .lwhh-hero-h1 {
    font-size: 2.3rem !important;
    line-height: 1 !important;
    margin: 0 0 12px !important;
  }
  html body .lwhh-hero-p {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin: 0 0 18px !important;
  }
  html body .lwhh-hero-left .btn-lwhh-primary {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---------- Home: product sections become swipe rows ---------- */
  html body .lwhh-cream-section ul.products.products,
  html body .lwhh-black-section ul.products.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 calc(var(--m-gut) * -1) !important;
    padding: 4px var(--m-gut) 14px !important;
    scroll-padding-left: var(--m-gut) !important;
    width: auto !important;
    max-width: none !important;
  }
  html body .lwhh-cream-section ul.products.products::-webkit-scrollbar,
  html body .lwhh-black-section ul.products.products::-webkit-scrollbar { display: none !important; }

  html body .lwhh-cream-section ul.products.products li.product.product,
  html body .lwhh-black-section ul.products.products li.product.product {
    flex: 0 0 64% !important;
    width: 64% !important;
    max-width: 260px !important;
    scroll-snap-align: start !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }

  /* ---------- Home: features ("Built for tech enthusiasts") ---------- */
  html body .lwhh-red-section h2 { margin-bottom: 10px !important; }
  html body .lwhh-red-section h2 + p {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    margin: 0 0 16px !important;
  }
  html body .lwhh-benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body .lwhh-benefit-tile {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    column-gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }
  html body .lwhh-benefit-tile .lwhh-tile-num { display: none !important; }
  html body .lwhh-benefit-tile,
  html body .lwhh-benefit-tile h3,
  html body .lwhh-benefit-tile p { text-align: left !important; }
  html body .lwhh-benefit-tile h3 { border-bottom-width: 2px !important; padding-bottom: 4px !important; }
  html body .lwhh-red-section h2 + p { text-align: left !important; }
  html body .lwhh-benefit-tile .lwhh-tile-icon-box {
    grid-row: 1 / span 2 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  html body .lwhh-benefit-tile h3 {
    font-size: 0.95rem !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }
  html body .lwhh-benefit-tile p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* ---------- Home: categories ("Browse by tech domain") ---------- */
  html body .lwhh-topics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body .lwhh-topic-card {
    padding: 14px 12px !important;
    min-height: 0 !important;
    box-shadow: 3px 3px 0 0 var(--m-ink) !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  html body .lwhh-topic-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 8px !important;
  }
  html body .lwhh-topic-title {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }
  html body .lwhh-topic-desc { display: none !important; }
  html body .lwhh-topic-count { font-size: 0.75rem !important; margin: 0 !important; }

  /* ---------- Home: offer ---------- */
  html body .lwhh-offer-inner p { font-size: 0.88rem !important; margin: 8px 0 14px !important; }
  html body .lwhh-offer-inner .btn-lwhh-primary { width: 100% !important; justify-content: center !important; }

  /* ---------- Shop / category hero ---------- */
  html body .byte-catalog-hero {
    padding: 18px var(--m-gut) 14px !important;
    min-height: 0 !important;
  }
  html body .byte-catalog-hero-container { padding: 0 !important; }
  html body .byte-catalog-badge {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
    margin-bottom: 10px !important;
  }
  html body .byte-catalog-h1 {
    font-size: 1.7rem !important;
    line-height: 1.05 !important;
    margin: 0 0 12px !important;
  }
  html body .byte-catalog-desc { display: none !important; }
  html body .byte-catalog-search-form { margin: 0 0 12px !important; }
  html body .byte-catalog-search-input { height: 44px !important; font-size: 0.9rem !important; }
  html body .byte-catalog-search-btn { height: 44px !important; padding: 0 14px !important; }
  html body .byte-topics-label { display: none !important; }
  html body .byte-topics-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    margin: 0 calc(var(--m-gut) * -1) !important;
    padding: 2px var(--m-gut) 6px !important;
  }
  html body .byte-topics-pills::-webkit-scrollbar { display: none !important; }
  html body .byte-topic-pill {
    flex: 0 0 auto !important;
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    box-shadow: 2px 2px 0 0 var(--m-ink) !important;
  }

  /* Result count + sort on one tidy line */
  html body .woocommerce-result-count.woocommerce-result-count.woocommerce-result-count {
    float: left !important;
    width: 46% !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body .woocommerce-ordering.woocommerce-ordering.woocommerce-ordering {
    float: right !important;
    width: 52% !important;
    margin: 0 0 12px !important;
  }
  html body .woocommerce-ordering.woocommerce-ordering.woocommerce-ordering select.orderby.orderby {
    width: 100% !important;
    height: 38px !important;
    padding: 0 28px 0 10px !important;
    line-height: normal !important;
    font-size: 0.74rem !important;
    box-sizing: border-box !important;
  }
  html body .ast-woocommerce-container ul.products { clear: both !important; }

  /* Search: icon-only button so the input gets the room */
  html body .byte-catalog-search-btn {
    font-size: 0 !important;
    gap: 0 !important;
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
  }
  html body .byte-catalog-search-btn svg { width: 18px !important; height: 18px !important; }
  html body .byte-catalog-search-input { padding: 0 12px !important; }

  /* ---------- Product grid (shop, category, related): 2 columns ---------- */
  html body ul.products.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body ul.products.products li.product.product {
    border-width: 3px !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }
  html body ul.products.products li.product.product .astra-shop-summary-wrap {
    padding: 8px 8px 0 !important;
  }
  html body ul.products.products li.product.product .byte-card-meta-bar { margin: 0 0 6px !important; }
  html body ul.products.products li.product.product .byte-card-tag {
    font-size: 0.72rem !important;
    padding: 2px 6px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body ul.products.products li.product.product .price {
    margin: 0 0 8px !important;
    gap: 4px !important;
  }
  html body ul.products.products li.product.product .price .woocommerce-Price-amount {
    font-size: 0.85rem !important;
    padding: 2px 6px !important;
  }
  html body ul.products.products li.product.product .price del .woocommerce-Price-amount {
    font-size: 0.75rem !important;
  }
  html body ul.products.products li.product.product .byte-loop-btn-row {
    margin: auto -8px 0 !important;
    width: calc(100% + 16px) !important;
    padding: 8px !important;
    gap: 6px !important;
    border-top-width: 3px !important;
  }
  html body ul.products.products li.product.product .onsale,
  html body ul.products.products li.product.product .ast-onsale-card,
  html body ul.products.products li.product.product .ast-shop-product-out-of-stock {
    top: 6px !important;
    left: 6px !important;
    font-size: 0.72rem !important;
    padding: 3px 6px !important;
  }
}

/* Narrow cards (2-col grid): stack ADD TO CART over BUY NOW */
@container (max-width: 200px) {
  html body ul.products.products li.product.product h2.woocommerce-loop-product__title,
  html body ul.products.products li.product.product .woocommerce-loop-product__title {
    -webkit-line-clamp: 4 !important;
  }
  html body ul.products.products li.product.product .byte-loop-btn-row:not(.single-btn) {
    flex-direction: column !important;
  }
  html body ul.products.products li.product.product .byte-loop-btn-row a.button {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 9px 4px !important;
  }
}

@media (max-width: 767px) {

  /* ---------- Single product ---------- */
  html body.single-product .byte-product-breadcrumbs-bar {
    padding: 8px 10px !important;
    margin: 0 0 12px !important;
  }
  html body.single-product .byte-crumbs-inner {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.74rem !important;
  }
  html body.single-product .byte-crumbs-inner > * { display: inline !important; }

  html body.single-product div.product.ast-article-single,
  html body.single-product .ast-woocommerce-container > div.product {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  html body.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 0 14px !important;
    border: 3px solid var(--m-ink) !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
    background: #FFFFFF !important;
  }
  html body.single-product div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
  html body.single-product div.product .woocommerce-product-gallery__image { margin: 0 !important; }
  html body.single-product div.product .flex-control-thumbs { margin: 6px !important; gap: 6px !important; }

  html body.single-product div.product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    padding: 16px 14px !important;
    margin: 0 0 16px !important;
    border-width: 3px !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }

  /* One breadcrumb is enough; category is already in the tag */
  html body.single-product div.product .summary .woocommerce-breadcrumb,
  html body.single-product div.product .summary .single-product-category,
  html body.single-product div.product .product_meta .posted_in {
    display: none !important;
  }

  html body.single-product .byte-single-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
  }
  html body.single-product .byte-single-meta-row > span { font-size: 0.72rem !important; }

  html body.single-product div.product .product_title {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }
  html body.single-product div.product .summary .price {
    margin: 0 0 12px !important;
    padding: 4px 10px !important;
    font-size: 1.2rem !important;
  }
  html body.single-product div.product .woocommerce-product-details__short-description p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
  }
  html body.single-product div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }
  html body.single-product div.product form.cart .quantity { margin: 0 !important; }
  html body.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    box-shadow: 4px 4px 0 0 var(--m-ink) !important;
  }
  html body.single-product div.product .product_meta {
    font-size: 0.72rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.single-product .byte-bonus-box {
    padding: 12px !important;
    margin: 14px 0 0 !important;
  }
  html body.single-product .byte-bonus-header {
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
  }

  /* Tabs */
  html body.single-product .woocommerce-tabs {
    padding: 0 !important;
    margin: 0 0 16px !important;
  }
  html body.single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    scrollbar-width: none !important;
  }
  html body.single-product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html body.single-product .woocommerce-tabs ul.tabs li a {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
  }
  html body.single-product .woocommerce-Tabs-panel {
    font-size: 0.88rem !important;
    margin: 0 !important;
  }

  /* Specs + reviews: no nested side padding, cards fit the screen */
  html body.single-product .byte-specs-section,
  html body.single-product .byte-reviews-section {
    padding: 16px 12px !important;
    margin: 0 0 16px !important;
  }
  html body.single-product .byte-specs-header,
  html body.single-product .byte-reviews-header-row {
    padding: 0 0 10px !important;
    margin: 0 0 12px !important;
  }
  html body.single-product .byte-specs-h2,
  html body.single-product .byte-reviews-section h2 {
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
    margin: 4px 0 !important;
  }
  html body.single-product .byte-specs-sub { font-size: 0.82rem !important; }
  html body.single-product .byte-specs-grid,
  html body.single-product .byte-reviews-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  html body.single-product .byte-spec-card,
  html body.single-product .byte-review-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 3px 3px 0 0 var(--m-ink) !important;
  }
  html body.single-product .byte-rating-breakdown { margin: 0 0 14px !important; }

  html body.single-product section.related.products {
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.single-product section.related.products > h2 {
    font-size: 1.2rem !important;
    margin: 0 0 10px !important;
  }
  html body.single-product section.related.products ul.products.products { margin-bottom: 8px !important; }

  /* ---------- Cart page ---------- */
  html body.woocommerce-cart .ast-container { padding-top: 12px !important; }
  html body.woocommerce-cart .wc-block-cart { gap: 16px !important; }
  html body.woocommerce-cart .wc-block-cart-items td,
  html body.woocommerce-cart .wc-block-cart-items th { padding-left: 8px !important; padding-right: 8px !important; }


}

/* Sticky Add to cart bar (product page, phones only) */
.byte-sticky-atc { display: none; }
@media (max-width: 767px) {
  html body .byte-sticky-atc {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 998 !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    background: #FFFFFF !important;
    border-top: 3px solid #000000 !important;
    box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.08) !important;
    transform: translateY(120%) !important;
    visibility: hidden !important;
    transition: transform 0.2s ease, visibility 0.2s ease !important;
  }
  html body .byte-sticky-atc.is-visible {
    transform: translateY(0) !important;
    visibility: visible !important;
  }
  html body .byte-sticky-atc__info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
  }
  html body .byte-sticky-atc__name {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .byte-sticky-atc__price {
    font-family: var(--font-mono, 'Space Grotesk', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--lms-primary, #2563EB) !important;
  }
  html body .byte-sticky-atc__price del { font-size: 0.75rem !important; color: #9CA3AF !important; margin-right: 4px !important; }
  html body .byte-sticky-atc__price ins { text-decoration: none !important; }
  html body .byte-sticky-atc__btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    background: var(--lms-primary, #2563EB) !important;
    color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 0 #000000 !important;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
  }
}