# _pages_v

version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-12-02T05:54:38.720Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-12-02T05:54:38.729Z
updated_at: 2025-12-02T05:54:38.729Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img || []
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = Object.entries(productData.meta ?? {})
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={productImages.length > 1}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    {productImages.length > 1 && <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>}
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            {productProperties.length > 0 && (<Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {productProperties.map(([key, value], index) => [
                    <div
                      key={index}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span>{key}:</span>
                      <span>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
            </Row>
  		  ) || (
  			<Row className="my-5 py-5" />
  		  )}
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1601 characters]

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:h},next:{Link:x}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=h(!1),[w,v]=h(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,h,g=e=>{v(e),N(!0)},u=f.img||[];u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=Object.entries(f.meta??{}),C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:u.length>1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),u.length>1&&e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(h=(h=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${h} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:h}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),$.length>0&&e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:$.map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]}),e.jsx("span",{children:String(l)})]},t)])})]})||e.jsx(c,{className:"my-5 py-5"}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(x,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


# forms_blocks_message

_path: fields
id: 691aef4018bb6f29f4a2f87f
message:
  {"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Заполните заявку — получите помощь в подборе товаров и развернутые ответы.","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}


# forms_emails

id: 696881c5df499321b44e62de
email_to: info@asiapartner.ru
email_from: info@asiapartner.ru
subject: asiapartner site
message:
  {"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"{{name-field}}","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"{{number-field}}","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"{{question-field}}","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""},{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}


# forms

title: Свяжитесь с нами
submit_button_label: Получить консультацию
confirmation_type: message
redirect_url: null
updated_at: 2026-01-15T06:07:50.085Z
created_at: 2025-11-17T09:47:44.263Z
confirmation_message:
  {"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Заявка успешно отправлена.","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}


# payload_preferences

key: collection-pages
updated_at: 2025-11-17T10:42:18.598Z
created_at: 2025-11-17T09:50:13.452Z
value:
  {"columns":[{"accessor":"title","active":true},{"accessor":"layoutTemplate","active":true},{"accessor":"path","active":true},{"accessor":"srcType","active":true},{"accessor":"id","active":false},{"accessor":"attributes","active":false},{"accessor":"seo.description","active":false},{"accessor":"seo.robots","active":false},{"accessor":"seo.useGlobalTitleTemplate","active":false},{"accessor":"updatedAt","active":true},{"accessor":"createdAt","active":false},{"accessor":"_status","active":false}],"limit":10,"sort":"-updatedAt"}


key: collection-form-submissions
updated_at: 2025-11-21T11:11:43.402Z
created_at: 2025-11-19T10:22:58.764Z
value:
  {"limit":10,"columns":[{"accessor":"id","active":true},{"accessor":"_origin","active":true},{"accessor":"_remoteAddress","active":true},{"accessor":"form","active":true},{"accessor":"submissionData","active":false},{"accessor":"updatedAt","active":false},{"accessor":"createdAt","active":true}]}


# styles

updated_at: 2025-11-21T05:21:31.456Z
created_at: 2025-11-17T09:48:19.915Z
scss:
  @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Roboto:ital,wght@0,400;0,500;0,700;1,100&display=swap');


  $headings-font-family:  "Raleway", sans-serif;  
  $font-family-base:      "Manrope", sans-serif;  

  // override Bootstrap’s body line‑height
  $line-height-base:      1;

  // apply lining-nums to all headings
  h1, h2, h3, h4, h5, h6 {
    font-variant-numeric: lining-nums;
  }

  // $body-font-family:      "Exo 2", sans-serif;
  // 1. Override any Bootstrap variables you like:
  $body-color:        #1d1d1d;
  $dark:              #1d1d1d;

  $body-bg:           #F6F6F6;
  $primary:           #00428d;
  $primary-bg-subtle: #4b88ce;
  // $primary:           #f1ca1a;
  // $primary-bg-subtle: #f7e38b;
  $secondary:         #EDEDED;

  $enable-negative-margins: true;


  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/maps";

  :root {
    @each $alias, $value in $grid-breakpoints {
      // create --bs-breakpoint-<alias> in px
      --bs-breakpoint-#{$alias}: #{strip-unit($value)}px;
    }
  }


  // 2. Update Bootstrap’s “theme colors” map so utilities & components (e.g. .btn-primary, .text-primary, bg-primary, etc.)
  //    use your new $primary, $secondary, etc.
  // $theme-colors: (
  //   "primary":   $primary,
  //   "secondary": $secondary,
  //   // you can add the rest here too:
  //   "success":   map-get($theme-colors, "success"),
  //   "info":      map-get($theme-colors, "info"),
  //   "warning":   map-get($theme-colors, "warning"),
  //   "danger":    map-get($theme-colors, "danger"),
  //   "light":     map-get($theme-colors, "light"),
  //   "dark":      map-get($theme-colors, "dark")
  // );

  // 3. Now import Bootstrap’s entrypoint.
  @import "bootstrap/scss/bootstrap";


  .hover-zoom .hz-target{
    transition:
      transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
      filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    transform-origin: center center;
  }

  .hover-zoom:hover .hz-target {
    transform: scale(1.08);
  }


