/* Per-template styles. The converter replaces this file with the template's own sheet. */

/* ==== panjol: product card like the original shop (report #356) ==== */
.awix-card--detailed { padding-block-end: 14px; }
.awix-card--detailed .awix-card-meta { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
.awix-card--detailed .awix-card-points { padding-block: 10px; border-block-end: 1px dashed var(--color-border); }
.awix-card--detailed .awix-card-buttons .awix-card-more { min-block-size: 48px; border: 0; border-radius: 14px; background: #ea580c; color: #fff; font-weight: 700; box-shadow: 0 8px 18px -8px rgb(234 88 12 / .7); }
.awix-card-vet { display: block; padding: 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 700; line-height: 1.7; text-align: center; }

/* ==== panjol: a card title is no heading any more (report #359), so it is body text, not Rokh (report #358) ==== */
p.pb-product-title { font-family: var(--font-body), Vazirmatn, system-ui, sans-serif; }

/* ==== panjol: product page like the original shop (report #361): gallery, title block and a buy box side by side ==== */
.awix-pdp__top { gap: 20px; }
@media (min-width: 750px) {
  .awix-pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gallery head" "gallery buy" "more more"; gap: 24px 32px; padding: 24px; background: var(--color-surface-muted); border: 1px solid #efe7da; border-radius: 16px; }
  .awix-pdp__top > .awix-gallery { grid-area: gallery; }
  .awix-pdp__head { grid-area: head; }
  .awix-pdp__buy { grid-area: buy; }
  .awix-pdp__more { grid-area: more; }
}
@media (min-width: 1100px) {
  .awix-pdp__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 300px; grid-template-areas: "gallery head buy" "gallery more buy"; grid-template-rows: auto 1fr; }
}
.awix-pdp__buy { display: grid; gap: 14px; align-content: start; padding: 18px; background: var(--color-surface); border: 1px solid #efe7da; border-radius: 14px; }
.awix-pdp__notice { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--color-brand); color: var(--color-brand-contrast); font-size: 14px; font-weight: 700; line-height: 1.7; }
.awix-pdp__notice svg { flex: none; }
.awix-pdp__more { display: grid; gap: 14px; align-content: start; }
.awix-pdp__return { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.awix-delivery { padding-inline: 16px; background: var(--color-surface); border: 1px solid #efe7da; border-radius: 12px; }
.awix-delivery summary { cursor: pointer; padding-block: 14px; font-size: 14px; font-weight: 700; }
.awix-delivery ul { margin: 0 0 14px; padding-inline-start: 18px; font-size: 13px; color: var(--color-text-muted); }
.awix-vet { display: grid; gap: 10px; padding-block-start: 4px; border-block-start: 1px dashed #efe7da; }
.awix-vet__title { margin: 0; font-size: 14px; font-weight: 700; }
.awix-vet__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.awix-vet__item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--color-surface-muted); border: 1px solid #efe7da; border-radius: 12px; }
.awix-vet__photo { flex: none; inline-size: 64px; block-size: 64px; border-radius: 10px; object-fit: cover; }
.awix-vet__photo--initial { display: grid; place-items: center; background: var(--color-brand); color: var(--color-brand-contrast); font-size: 24px; font-weight: 700; }
.awix-vet__text { display: grid; gap: 2px; min-inline-size: 0; font-size: 12px; color: var(--color-text-muted); }
.awix-vet__text strong { font-size: 14px; color: var(--color-text); }
.awix-vet__text small { font-size: 11px; color: var(--color-brand); }

/* ==== panjol: blog index and post, content beside the sidebar like the original shop (reports #363 and #364) ====
   The sidebar section is the next sibling of the content section in <main>; main becomes a grid with the hero (or the post title band)
   across the full width, then the content column and a 340px sidebar. The sidebar sits at the left edge in this right-to-left page.
   Below 960px nothing changes: the sidebar stays under the content. */
@media (min-width: 960px) {
  main#main:has(> #shopify-section-template--blog__blog-sidebar),
  main#main:has(> #shopify-section-template--article__blog-sidebar) {
    display: grid;
    grid-template-columns: minmax(16px, 1fr) minmax(0, calc(var(--container-shop, 1300px) - 372px)) 32px 340px minmax(16px, 1fr);
    align-items: start;
  }
  main#main:has(> #shopify-section-template--blog__blog-sidebar) > *,
  main#main:has(> #shopify-section-template--article__blog-sidebar) > * { grid-column: 1 / -1; }
  main#main:has(> #shopify-section-template--blog__blog-sidebar) > #shopify-section-template--blog__main,
  main#main:has(> #shopify-section-template--article__blog-sidebar) > #shopify-section-template--article__main { grid-column: 2; grid-row: 2; }
  main#main:has(> #shopify-section-template--blog__blog-sidebar) > #shopify-section-template--blog__blog-sidebar,
  main#main:has(> #shopify-section-template--article__blog-sidebar) > #shopify-section-template--article__blog-sidebar { grid-column: 4; grid-row: 2; }
  main#main:has(> #shopify-section-template--blog__blog-sidebar) #shopify-section-template--blog__main .kit-page-width,
  main#main:has(> #shopify-section-template--article__blog-sidebar) #shopify-section-template--article__main .kit-page-width { max-width: none; padding-inline: 0; }
  #shopify-section-template--blog__blog-sidebar .pbs,
  #shopify-section-template--article__blog-sidebar .pbs { width: 100%; padding-block: 48px 0; }
  #shopify-section-template--blog__blog-sidebar .pbs-inner,
  #shopify-section-template--article__blog-sidebar .pbs-inner { max-width: none; }
}
/* the post card: the date as a ribbon on the picture, the author and reading time under it */
.awix-blog__figure { position: relative; display: block; }
.awix-blog__ribbon { position: absolute; inset-inline-start: 0; inset-block-end: 14px; padding: 4px 14px; border-start-end-radius: 8px; border-end-end-radius: 8px; background: var(--color-brand); color: var(--color-brand-contrast); font-size: 13px; font-weight: 700; line-height: 1.7; }
.awix-blog__grid--index .awix-blog__card { height: 100%; align-content: start; overflow: hidden; padding-block-end: 16px; background: var(--color-surface-muted); border-radius: var(--radius-card); }
.awix-blog__grid--index .awix-blog__card > :not(.awix-blog__figure) { margin-inline: 16px; }
.awix-blog__grid--index .awix-blog__cover { border-end-start-radius: 0; border-end-end-radius: 0; }