/* Product listing (search/filter/sort/pagination) + product-detail tabs +
   cart/checkout summary lines — markup that products.js/cart.js/
   checkout-steps.js drive directly via fixed classes/ids, themed with the
   new design's own CSS custom properties (see app.css) so it reads as one
   system even though these interactive bits use their own class names. */

/* .ll-chip is a real <button> here (products.js filters in place on click —
   the source design only ever used an inert <span>), so it needs the usual
   UA button-chrome reset app.css never had to define for it. */
.ll-listing-chips .ll-chip { background: none; color: var(--color-dark-900); cursor: pointer; }

/* Product listing empty-state + pagination — products.js generates the
   pagination buttons with these fixed class names regardless of page
   markup; themed to sit inside the template's own .ll-pagination container
   (see resources/views/shop/partials/shop/product-grid.blade.php). */
.ll-listing-empty { text-align: center; padding: 48px 0; color: var(--color-neutral-600); font-family: var(--font-primary); grid-column: 1 / -1; }
.ll-pagination .paginationBtn { border: 1px solid var(--color-neutral-100); background: #fff; border-radius: var(--radius-pill); min-width: 40px; height: 40px; padding: 0 10px; font-family: var(--font-primary); }
.ll-pagination .paginationBtn.isActive { background: var(--color-dark-900); color: #fff; border-color: var(--color-dark-900); }
.ll-pagination .paginationArrow { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

/* --- cart.js runtime markup (cart page, checkout summary) ------------- */
.cart-drawer { display: none; }
.cart-empty { color: var(--color-neutral-600); font-family: var(--font-primary); }
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-neutral-100); font-family: var(--font-primary); }
.cart-item .cart-thumb { width: 88px; height: 88px; flex-shrink: 0; background: var(--color-neutral-50); border-radius: var(--radius-16); display: flex; align-items: center; justify-content: center; padding: 8px; }
.cart-item .cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-item .cart-info { flex: 1; }
.cart-item .cart-name { font-weight: 600; margin-bottom: .25rem; }
.cart-item .cart-meta { font-size: .8rem; color: var(--color-neutral-600); margin-bottom: .5rem; }
.cart-item .cart-price { font-family: var(--font-numeric); font-weight: 600; }
.cart-remove { background: none; border: none; color: #b00020; padding: 0; font-size: .85rem; font-family: var(--font-primary); cursor: pointer; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-pill); overflow: hidden; }
.qty-stepper button { background: transparent; border: 0; width: 32px; height: 32px; font-weight: 700; cursor: pointer; }
.qty-stepper button:hover { background: var(--color-lime); }
.qty-stepper .qty-value { min-width: 32px; text-align: center; font-weight: 600; padding: 0 .25rem; }
.qty-stepper-sm button { width: 26px; height: 26px; font-size: .9rem; }
.qty-stepper-sm .qty-value { min-width: 24px; font-size: .85rem; }
.qty-value-fixed { display: inline-block; min-width: 32px; text-align: center; font-weight: 600; padding: 0 .25rem; }

.summary-line { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--color-neutral-100); font-family: var(--font-primary); }
.summary-line:last-of-type { border-bottom: 0; }
.summary-line .sum-thumb { width: 56px; height: 56px; background: var(--color-neutral-50); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 4px; flex-shrink: 0; position: relative; }
.summary-line .sum-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.summary-line .sum-thumb .sum-qty { position: absolute; top: -8px; right: -8px; background: var(--color-dark-900); color: #fff; border-radius: 999px; width: 22px; height: 22px; font-size: .72rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.summary-line .sum-name { font-weight: 600; font-size: .9rem; }
.summary-line .sum-meta { font-size: .8rem; color: var(--color-neutral-600); }
.summary-line .sum-price { font-weight: 600; white-space: nowrap; font-family: var(--font-numeric); }
.sum-remove { background: none; border: 0; color: var(--color-neutral-600); padding: 2px 6px; font-size: .85rem; line-height: 1; cursor: pointer; }
.sum-remove:hover { color: #b00020; }

.shippingOption { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-16); padding: 12px 16px; margin-bottom: 10px; font-family: var(--font-primary); cursor: pointer; }
.shippingOption.is-selected { border-color: var(--color-dark-900); background: var(--color-neutral-50); }

/* --- Full /faq page: every DB-driven FAQ group/item, not the 7-item home
   teaser the design shipped with — .ll-faq-item__answer's fixed max-height
   is raised well past the teaser's short lorem-ipsum copy so real, longer
   answers never get clipped, and .ll-faq__right's fixed width is dropped
   since there's no .ll-faq__left sidebar to balance against here. */
.ll-faq-page { padding: 64px 5vw 96px; max-width: 1240px; margin: 0 auto; }
.ll-faq-page__empty { font-family: var(--font-primary); color: var(--color-neutral-600); text-align: center; padding: 48px 0; }
.ll-faq--full .ll-faq__right { width: 100%; }
.ll-faq--full .ll-faq-item__answer { max-height: 2000px; }

/* Topic tabs: a sidebar tablist on desktop, driven by app.js's
   [data-faq-tab] handler. Only the active group's panel is shown, so each
   panel repeats its own title + question count for the tab it belongs to. */
.ll-faq-page__layout { display: flex; align-items: flex-start; gap: 64px; }
.ll-faq-page__sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 24px; }
.ll-faq-page__panels { flex: 1; min-width: 0; }

.ll-faq-tabs { display: flex; flex-direction: column; gap: 4px; }
.ll-faq-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius-16); padding: 14px 16px; font-family: var(--font-primary); font-size: 16px; color: var(--color-neutral-700); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ll-faq-tab:hover { background: var(--color-neutral-50); color: var(--color-dark-900); }
.ll-faq-tab--active { background: var(--color-dark-900); color: var(--color-text-light); font-weight: 600; }
.ll-faq-tab--active:hover { background: var(--color-dark-900); color: var(--color-text-light); }
.ll-faq-tab__name { flex: 1; }
.ll-faq-tab__count { flex-shrink: 0; min-width: 26px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-neutral-50); color: var(--color-neutral-700); font-family: var(--font-numeric); font-size: 13px; font-weight: 600; }
.ll-faq-tab--active .ll-faq-tab__count { background: var(--color-lime); color: var(--color-dark-900); }

.ll-faq-help { margin-top: 32px; padding: 24px; border-radius: var(--radius-24); background: var(--color-neutral-50); }
.ll-faq-help__title { font-family: var(--font-numeric); font-size: 20px; font-weight: 600; color: var(--color-dark-900); margin: 0 0 8px; }
.ll-faq-help__text { font-family: var(--font-primary); font-size: 15px; line-height: 22px; color: var(--color-neutral-600); margin: 0 0 20px; }

.ll-faq-page__group { display: none; }
.ll-faq-page__group--active { display: block; }
.ll-faq-page__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ll-faq-page__group-title { margin: 0; }
.ll-faq-page__group-meta { flex-shrink: 0; font-family: var(--font-primary); font-size: 14px; color: var(--color-neutral-600); }

@media (max-width: 991px) {
  /* Tabs become a horizontally scrollable row above the panels; the help
     card drops below the answers so it never splits the two. */
  .ll-faq-page__layout { flex-direction: column; gap: 32px; }
  .ll-faq-page__sidebar { display: contents; }
  .ll-faq-tabs { order: 1; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ll-faq-tabs::-webkit-scrollbar { display: none; }
  .ll-faq-tab { width: auto; flex-shrink: 0; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-pill); padding: 10px 14px; }
  .ll-faq-tab--active { border-color: var(--color-dark-900); }
  .ll-faq-page__panels { order: 2; width: 100%; }
  .ll-faq-help { order: 3; margin-top: 0; }
}

@media (max-width: 767px) {
  .ll-faq-page { padding: 40px 5vw 64px; }
  .ll-faq-page__group-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.ll-legal-page { padding: 64px 5vw 96px; max-width: 860px; margin: 0 auto; font-family: var(--font-primary); color: var(--color-dark-900); }
.ll-legal-page__body :is(h1, h2, h3, h4) { font-family: var(--font-numeric); margin: 32px 0 12px; }
.ll-legal-page__body :first-child { margin-top: 0; }
.ll-legal-page__body p { line-height: 1.7; margin: 0 0 16px; }
.ll-legal-page__body ul, .ll-legal-page__body ol { margin: 0 0 16px; padding-left: 24px; }

/* Small product-detail additions the source template's single static demo
   page didn't need to define: a real cms-driven label badge, a review
   count next to the star rating, and a quantity stepper (gated by the cms
   quantity_selector setting — genuinely optional, so it has no template
   equivalent to copy from). */
.ll-product-badge { display: inline-block; background: var(--color-dark-900); color: #fff; font-family: var(--font-primary); font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); margin-top: 12px; }
.ll-product-info__rating-count { font-family: var(--font-primary); font-size: 14px; color: var(--color-neutral-600); }
.ll-product-qty { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-family: var(--font-primary); }
.ll-product-qty__label { font-size: 14px; color: var(--color-neutral-600); }
.ll-review__title { font-family: var(--font-primary); margin: 4px 0; }