/* ==========================================================================
   Storefront mobile responsive fixes.
   Loaded AFTER assets/css/app.css so these rules win on equal specificity.
   Purely presentational — no layout/markup/behaviour is redesigned, only
   spacing, overflow, alignment, image and text sizing are corrected for
   small screens.
   ========================================================================== */

/* --- Global overflow guards (all screens) -------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
iframe,
table {
  max-width: 100%;
}

/* Long unbroken strings (URLs, phone numbers, English words in Bangla copy)
   must never push the viewport wider than the screen. */
p,
li,
h1,
h2,
h3,
blockquote,
summary,
label,
td,
th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Inputs on iOS must be >= 16px or Safari zooms the whole page in. */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* --- Header --------------------------------------------------------------- */
.site-topbar {
  line-height: 1.45;
}

.site-headbar {
  min-width: 0;
}

.site-brand {
  min-width: 0;
}

.site-brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact link strip that replaces the desktop nav on phones. It reuses the
   existing navigation links — nothing new is introduced. */
@media (max-width: 767px) {
  .site-topbar {
    font-size: 11px;
    padding: 0.4rem 0.75rem;
  }

  .site-headbar {
    height: auto;
    min-height: 3.5rem;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .site-brand img {
    height: 2rem;
    width: auto;
  }

  .site-brand-name {
    font-size: 0.95rem;
    max-width: 9rem;
  }

  .site-actions {
    flex-shrink: 0;
  }

}

/* --- Section rhythm ------------------------------------------------------- */
@media (max-width: 767px) {
  .s-block {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .s-block > div,
  .hero-grid {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* --- Hero ----------------------------------------------------------------- */
.hero-section {
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero-grid {
    gap: 2rem;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .hero-copy h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .hero-copy p {
    font-size: 0.9375rem;
  }

  .hero-actions {
    gap: 0.625rem;
    margin-top: 1.5rem;
  }

  .hero-badges {
    margin-top: 1.5rem;
    gap: 0.5rem 1rem;
  }

  .hero-media {
    margin-top: 0;
  }

  /* Decorative blur blob must not create horizontal scroll. */
  .hero-blob {
    right: -1.5rem;
    top: -1.5rem;
    width: 10rem;
    height: 10rem;
  }

  .hero-countdown {
    width: 100%;
    padding: 0.65rem 0.85rem;
  }

  .hero-countdown span {
    font-size: 0.8125rem;
  }
}

/* --- Section headings ----------------------------------------------------- */
@media (max-width: 767px) {
  .section-heading {
    margin-bottom: 1.75rem;
  }

  .section-heading h2 {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  .section-heading p {
    font-size: 0.875rem;
  }
}

/* --- Product cards -------------------------------------------------------- */
@media (max-width: 479px) {
  .pc-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .pc-foot .pc-price {
    font-size: 1.0625rem;
  }

  .pc-foot > a {
    width: 100%;
    justify-content: center;
  }
}

/* --- Order form ----------------------------------------------------------- */
@media (max-width: 767px) {
  .of-form {
    padding: 1.25rem !important;
    border-radius: 1rem;
  }

  .of-methods {
    grid-template-columns: 1fr;
  }

  .of-summary {
    padding: 0.9rem;
  }

  .of-summary .of-row {
    gap: 0.75rem;
  }

  .of-submit {
    width: 100%;
    justify-content: center;
  }
}

/* --- Reviews / FAQ / CTA -------------------------------------------------- */
@media (max-width: 767px) {
  .s-cta-box {
    padding: 2rem 1.25rem !important;
    border-radius: 1.25rem;
  }

  .s-cta-box h2 {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  .s-cta-actions > a {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- Footer --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-footer {
    margin-top: 3rem;
  }

  .site-footer-grid {
    gap: 2rem;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}


/* =========================================================================
   Hero action buttons — mobile only: two equal columns (desktop untouched)
   ========================================================================= */
@media (max-width: 767px) {
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    width: 100%;
  }

  .hero-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    height: 3rem;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    white-space: nowrap;
    font-size: 0.875rem;
  }

  .hero-actions > a svg {
    flex: 0 0 auto;
  }
}

@media (max-width: 360px) {
  .hero-actions > a {
    height: 2.75rem;
    font-size: 0.8125rem;
  }
}

/* =========================================================================
   Checkout — product selection
   -------------------------------------------------------------------------
   Self-contained, device-independent layout. Every value is explicit so the
   section renders identically on Android (Chrome, Samsung Internet, Brave,
   Opera, Edge, Firefox) and on iPhone Safari: browser default styling is
   reset, sizes are fixed, text can never overflow and nothing shifts when a
   product is selected (the selected ring is drawn with an inset box-shadow,
   not with a thicker border).
   ========================================================================= */

.of-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 640px) {
  .of-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

.of-product-card {
  /* Reset browser defaults so every engine starts from the same box. */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  box-sizing: border-box;

  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "qty   qty";
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.875rem;
  padding-right: 2.25rem; /* room for the selected check, always reserved */
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

@media (min-width: 480px) {
  .of-product-card {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb body qty";
  }
}

.of-product-card * {
  box-sizing: border-box;
  min-width: 0;
}

.of-product-card:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, #fff);
}

.of-product-card:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 60%, #fff);
}

/* Selected state — clear, high contrast, and zero layout shift. */
.of-product-card.is-selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.of-product-thumb,
.of-product-thumb-fallback {
  grid-area: thumb;
  display: block;
  width: 4rem;
  height: 4rem;
  flex: none;
  border-radius: 0.75rem;
  border: 1px solid rgb(0 0 0 / 6%);
  background: #f1f5f9;
  object-fit: cover;
}

@media (min-width: 480px) {
  .of-product-thumb,
  .of-product-thumb-fallback {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.of-product-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.of-product-body {
  grid-area: body;
  display: block;
  min-width: 0;
  overflow: hidden;
}

.of-product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.53125rem; /* exactly two lines — keeps every card the same height */
  color: #0f172a;
}

.of-product-price {
  display: block;
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--brand-secondary);
}

.of-product-advance {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  color: color-mix(in srgb, var(--brand-secondary) 85%, #fff);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected indicator — the slot is always reserved, only visibility changes. */
.of-product-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.of-product-card.is-selected .of-product-check {
  opacity: 1;
  transform: scale(1);
}

/* --- Quantity stepper ----------------------------------------------------- */
.of-qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  justify-self: stretch;
  width: 100%;
  height: 2.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
}

@media (min-width: 480px) {
  .of-qty {
    justify-self: end;
    width: auto;
  }
}

.of-qty-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
  color: #334155;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .15s ease, color .15s ease;
}

.of-qty-btn:hover {
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  color: var(--brand-secondary);
}

.of-qty-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.of-qty-val {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

/* Native radio is visually hidden but still focusable for accessibility. */
.of-product-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  pointer-events: none;
}

/* =========================================================================
   Checkout — product selection (desktop / laptop / tablet landscape only)
   -------------------------------------------------------------------------
   From 1024px up the quantity stepper moves BELOW the product details so the
   product title can be shown in full, without truncation. Mobile and small
   tablet layouts above are untouched. Markup, JS hooks and the selected
   indicator stay exactly the same.
   ========================================================================= */
@media (min-width: 1024px) {
  .of-products {
    gap: 1rem;
    align-items: stretch;
  }

  .of-product-card {
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "thumb body"
      "qty   qty";
    align-items: start;
    gap: 0.875rem 1rem;
    height: 100%;
    padding: 1.125rem;
    padding-right: 2.5rem;
    border-radius: 1.125rem;
  }

  .of-product-thumb,
  .of-product-thumb-fallback {
    width: 5rem;
    height: 5rem;
    border-radius: 0.875rem;
  }

  .of-product-body {
    align-self: center;
  }

  /* Full title on desktop — no clamping, no ellipsis. */
  .of-product-name {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    min-height: 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .of-product-price {
    margin-top: 0.375rem;
    font-size: 1.0625rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .of-product-advance {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.1875rem 0.625rem;
  }

  /* Stepper sits below the details, full width, pushed to the card bottom so
     every card in the row keeps the same height. */
  .of-qty {
    justify-self: stretch;
    align-self: end;
    width: 100%;
    margin-top: 0.25rem;
    height: 2.75rem;
  }

  .of-product-check {
    top: 0.75rem;
    right: 0.75rem;
    width: 1.375rem;
    height: 1.375rem;
  }
}