/* ============================================================
   storefront-mobile.css
   Mobile marketplace grid (Lazada-style) for Organic storefront
   - Page scope: body.sf-storefront  (set via {% block body_class %})
     -> cart / checkout / contact / blog pages are NOT affected
   - Component scope: .product-grid  (swiper carousels untouched)
   - Loaded after organic/style.css from templates/Blog/base.html
   - DO NOT edit static/organic/css/* — override here instead
   ============================================================ */

:root {
  --sf-page-bg: #f2f3f5;
  --sf-card-bg: #ffffff;
  --sf-card-radius: 8px;
  --sf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sf-gutter: 0.5rem;          /* 8px */
  --sf-title: #212121;
  --sf-price: #f5222d;          /* Lazada-style red price */
  --sf-accent: #ff6a00;         /* orange CTA */
  --sf-muted: #9e9e9e;
  --sf-card-title-size: 0.8125rem;
  --sf-card-title-lh: 1.35;
}

/* ============================================================
   MOBILE  (< 768px) — 2 columns, tight gutters, compact cards
   ============================================================ */
@media (max-width: 767.98px) {

  body.sf-storefront {
    background-color: var(--sf-page-bg);
  }

  /* --- grid: 8px gutters, equal-height columns --- */
  .sf-storefront .product-grid {
    --bs-gutter-x: var(--sf-gutter);
    --bs-gutter-y: var(--sf-gutter);
  }

  .sf-storefront .product-grid > .col {
    display: flex;
  }

  /* --- card shell --- */
  .sf-storefront .product-grid .product-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    background: var(--sf-card-bg);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    overflow: hidden;
  }

  /* --- square product image, full card width --- */
  .sf-storefront .product-grid .product-item figure {
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
  }

  .sf-storefront .product-grid .product-item figure a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .sf-storefront .product-grid .product-item figure img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
  }

  /* --- card body: left aligned, compact --- */
  .sf-storefront .product-grid .product-card-body {
    flex: 1 1 auto;
    text-align: left !important;
    padding: 0.5rem 0.5rem 0.625rem;
    gap: 0.25rem;
  }

  /* --- reference order: badges -> title -> price -> rating.
         Every child carries an explicit class + order, so this does not
         depend on selector tricks or on DOM source order. --- */
  .sf-storefront .product-grid .product-card-badges     { order: 1; }
  .sf-storefront .product-grid .product-card-title      { order: 2; }
  .sf-storefront .product-grid .product-card-price-row  { order: 3; }
  .sf-storefront .product-grid .product-card-rating     { order: 4; }
  .sf-storefront .product-grid .button-area             { order: 5; }

  /* --- badge row, above the title as in the reference --- */
  .sf-storefront .product-grid .product-card-badges .badge {
    font-size: 0.625rem !important;
    padding: 0.1rem 0.25rem !important;
  }

  /* --- title: 2 lines max + ellipsis --- */
  .sf-storefront .product-grid .product-card-title {
    margin: 0;
    font-size: var(--sf-card-title-size) !important;
    line-height: var(--sf-card-title-lh);
    color: var(--sf-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--sf-card-title-size) * var(--sf-card-title-lh) * 2);
  }

  /* --- price row: left aligned, red bold price --- */
  .sf-storefront .product-grid .product-card-price-row {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }

  .sf-storefront .product-grid .product-card-price {
    color: var(--sf-price) !important;
    font-weight: 700 !important;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .sf-storefront .product-grid .product-card-price-row del {
    font-size: 0.6875rem;
    color: var(--sf-muted);
  }

  /* --- rating row: small stars + grey review count --- */
  .sf-storefront .product-grid .product-card-rating .rating svg {
    width: 12px;
    height: 12px;
  }

  .sf-storefront .product-grid .product-card-rating .rating + span {
    font-size: 0.6875rem;
    color: var(--sf-muted);
    vertical-align: middle;
  }

  /* --- hover-only add-to-cart drawer: keep hidden on touch --- */
  .sf-storefront .product-grid .product-item .button-area {
    display: none !important;
  }

  /* --- section headers a touch smaller on phones --- */
  .sf-storefront .product-grid-section .section-title,
  .sf-storefront .sf-page-heading {
    font-size: 1.125rem;
  }
}

/* ============================================================
   PAGE HEADING (shop.html H1 — present at every breakpoint)
   ============================================================ */
.sf-page-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sf-title);
  margin: 1rem 0 0.5rem;
}

/* ============================================================
   MOBILE SEARCH BAR — UI only, inputs are disabled until a real
   search view exists. Kept visually identical to the reference.
   ============================================================ */
.sf-mobile-search {
  margin-bottom: 0.75rem;
}

.sf-mobile-search-wrap {
  background: var(--sf-card-bg);
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}

.sf-mobile-search .form-control {
  border: none;
  box-shadow: none;
  font-size: 0.875rem;
  background: transparent;
}

.sf-mobile-search .form-control:disabled {
  background: transparent;
  color: var(--sf-muted);
}

.sf-mobile-search .form-control:focus {
  box-shadow: none;
}

.sf-mobile-search-btn {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.sf-mobile-search-btn:disabled {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: #fff;
  opacity: 0.55;
}

.sf-mobile-search-btn:hover,
.sf-mobile-search-btn:focus {
  background: #e85f00;
  border-color: #e85f00;
  color: #fff;
}

/* === Single product page ===================================================
   รูปหลักของหน้ารายละเอียดสินค้า
   ครอปเป็นจัตุรัสเหมือนการ์ดในกริด เพื่อให้รูป 1:1 ที่อัปโหลดไว้แสดงเต็มกรอบ
   และรูปที่ไม่ใช่ 1:1 ไม่ดันเลย์เอาต์ฝั่งขวาให้สูงผิดสัดส่วน
   ========================================================================= */
.sf-storefront .sf-product-hero {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f6f6f6;
}

/* === Static content page ===================================================
   หน้าเนื้อหาที่แก้จากหลังบ้าน (นโยบาย/เงื่อนไข) — เนื้อหามาจาก Markdown
   ธีม Organic ไม่มีสไตล์สำหรับข้อความยาว จึงต้องคุมระยะห่างเอง
   ไม่งั้นหัวข้อกับย่อหน้าจะติดกันจนอ่านยาก
   ========================================================================= */
.sf-storefront .sf-page-body {
  line-height: 1.85;
}

.sf-storefront .sf-page-body h2 {
  font-size: 1.35rem;
  margin: 2.25rem 0 0.75rem;
}

.sf-storefront .sf-page-body h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.sf-storefront .sf-page-body h2:first-child,
.sf-storefront .sf-page-body h3:first-child {
  margin-top: 0;
}

.sf-storefront .sf-page-body ul,
.sf-storefront .sf-page-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.sf-storefront .sf-page-body li {
  margin-bottom: 0.35rem;
}

.sf-storefront .sf-page-body table {
  width: 100%;
  margin-bottom: 1rem;
}

.sf-storefront .sf-page-body th,
.sf-storefront .sf-page-body td {
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
}