/*
  Theme Name: Promet Aroma - Botiga
  Template: botiga
  Description: Custom stilovi za Promet Aroma premium webshop
  Version: 1.0
*/

/* ============================================================
   PROMET AROMA — CUSTOM CSS ZA BOTIGA PRO / WOOCOMMERCE
   Koristiti u child temi ili Customizer → Additional CSS
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIJABLE (TOKENI)
   ---------------------------------------------------------- */
:root {
  --pa-ink: #0A0A0A;
  --pa-bronze: #B27746;
  --pa-wood: #452607;
  --pa-leather: #543B21;
  --pa-paper: #EDE7DC;
  --pa-paper-2: #F4F1EA;
  --pa-line: #E4DDCF;
  --pa-line-light: #DBD2C2;
  --pa-red: #D81616;
  --pa-muted: #8A8073;
  --pa-text-secondary: #574B3C;

  --pa-serif: 'Fraunces', Georgia, serif;
  --pa-sans: 'Karla', system-ui, -apple-system, sans-serif;
  --pa-mono: 'JetBrains Mono', 'Fira Mono', monospace;
}


/* ----------------------------------------------------------
   2. OSNOVA / RESET
   ---------------------------------------------------------- */
body {
  font-family: var(--pa-sans);
  color: var(--pa-ink);
  background: var(--pa-paper);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--pa-bronze);
  color: #1A1206;
}

/* Oštri rubovi — globalno */
img,
.wp-block-image img,
.woocommerce-product-gallery img,
.wc-block-grid__product,
.products .product,
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
button,
input,
select,
textarea,
.widget,
.wp-block-cover,
.wp-block-group {
  border-radius: 0 !important;
}

/* Gumbi — blago zaobljeni (2px) */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button {
  border-radius: 2px !important;
}


/* ----------------------------------------------------------
   3. TIPOGRAFIJA
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.woocommerce div.product .product_title,
.entry-title,
.page-title,
.site-title {
  font-family: var(--pa-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pa-ink);
}

/* Mono font za cijene, specifikacije, tehničke podatke */
.price,
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
ins .woocommerce-Price-amount,
del .woocommerce-Price-amount,
.product_meta,
.sku_wrapper,
.stock,
table.shop_attributes td {
  font-family: var(--pa-mono) !important;
}

/* Eyebrow label klasa — koristiti na <p> ili <span> */
.pa-eyebrow {
  font-family: var(--pa-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pa-bronze);
  margin-bottom: 12px;
}

/* Mono caption klasa */
.pa-mono-caption {
  font-family: var(--pa-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-bronze);
}

/* Sekundarna boja teksta */
.pa-text-secondary {
  color: var(--pa-text-secondary);
}


/* ----------------------------------------------------------
   4. ANNOUNCEMENT BAR (Top Bar)
   ---------------------------------------------------------- */
.bhfb-row.bhfb-above_header_row,
.top-bar {
  background: #1A1206 !important;
  color: #E9D9C5 !important;
  font-family: var(--pa-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 9px 0;
  border: none;
}

.bhfb-row.bhfb-above_header_row a,
.top-bar a {
  color: var(--pa-bronze) !important;
  text-decoration: none;
}


/* ----------------------------------------------------------
   5. HEADER / NAVIGACIJA
   ---------------------------------------------------------- */
.site-header,
.bhfb-header {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pa-line);
  box-shadow: none !important;
}

/* Sticky header */
.sticky-header,
.bhfb-header.is-sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Navigacija linkovi */
.main-navigation a,
.bhfb-component-desktop_menu a,
.primary-menu > li > a {
  font-family: var(--pa-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--pa-ink) !important;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.main-navigation a:hover,
.bhfb-component-desktop_menu a:hover,
.primary-menu > li > a:hover {
  color: var(--pa-bronze) !important;
}

/* "Akcije" link u navigaciji — crvena (dodaj klasu .menu-akcije) */
.menu-akcije > a,
li.pa-nav-red > a {
  color: var(--pa-red) !important;
  font-weight: 600 !important;
}

/* Header ikone */
.header-search i,
.header-account i,
.header-wishlist i,
.header-cart i,
.bhfb-component-desktop_offcanvas_menu i {
  color: var(--pa-ink);
  transition: color 0.15s ease;
}

.header-search:hover i,
.header-account:hover i,
.header-wishlist:hover i {
  color: var(--pa-bronze);
}

/* Cart ikona — tamna pozadina */
.header-cart .cart-count,
.bhfb-component-mini_cart .cart-count {
  background: var(--pa-red) !important;
  color: #fff !important;
  font-family: var(--pa-mono);
  font-size: 9px;
  font-weight: 600;
  border-radius: 9px;
}


/* ----------------------------------------------------------
   6. GUMBI
   ---------------------------------------------------------- */
/* Primarni CTA */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
.checkout-button,
.woocommerce #respond input#submit {
  background: var(--pa-ink) !important;
  color: #fff !important;
  font-family: var(--pa-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none !important;
  padding: 14px 24px;
  transition: background 0.18s ease, color 0.18s ease;
  box-shadow: none !important;
  text-transform: none;
}

.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: var(--pa-bronze) !important;
  color: #1A1206 !important;
}

/* Sekundarni gumb (outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt,
.pa-btn-secondary {
  background: #fff !important;
  color: var(--pa-ink) !important;
  border: 1px solid var(--pa-ink) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.pa-btn-secondary:hover {
  border-color: var(--pa-bronze) !important;
  color: var(--pa-bronze) !important;
}


/* ----------------------------------------------------------
   7. PRODUCT KARTICE (Shop grid)
   ---------------------------------------------------------- */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  border: 1px solid var(--pa-line);
  background: #fff;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
  transition: border-color 0.18s ease;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  border-color: var(--pa-bronze);
}

/* Slika proizvoda — kvadratna, bez border-radius */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  border-radius: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--pa-paper-2);
}

/* Brend iznad naziva (dodaj custom field "brand" ili koristi taksonomiju) */
.pa-product-brand {
  font-family: var(--pa-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-bronze);
  display: block;
  margin-bottom: 4px;
}

/* Naziv proizvoda u gridu */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--pa-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--pa-ink);
}

/* Ocjene zvjezdice */
.star-rating span::before,
.star-rating::before {
  color: var(--pa-bronze) !important;
}

/* Cijena */
.woocommerce ul.products li.product .price {
  font-family: var(--pa-mono) !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--pa-ink);
}

/* Stara cijena — precrtana siva */
.woocommerce ul.products li.product .price del,
del .woocommerce-Price-amount {
  font-size: 13px;
  color: #9A9082;
  text-decoration: line-through;
}

/* Nova cijena kod akcije — crvena */
.woocommerce ul.products li.product .price ins,
ins .woocommerce-Price-amount {
  color: var(--pa-red) !important;
  font-weight: 600;
  text-decoration: none;
}

/* Jedinična cijena ispod cijene */
.pa-unit-price {
  font-family: var(--pa-mono);
  font-size: 10px;
  color: var(--pa-muted);
  letter-spacing: 0.02em;
}

/* "Dodaj u košaricu" gumb u gridu */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 11px 12px;
  font-size: 13px;
}


/* ----------------------------------------------------------
   8. SALE / NOVO / BESTSELLER BADGE
   ---------------------------------------------------------- */
.woocommerce span.onsale {
  background: var(--pa-red) !important;
  color: #fff !important;
  font-family: var(--pa-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 4px 8px;
  min-width: auto;
  min-height: auto;
  line-height: 1.4;
  top: 10px;
  left: 10px;
  right: auto;
}

/* Custom badge za "Novo" i "Bestseller" — dodaj plugin ili ručno */
.pa-badge-novo,
.pa-badge-bestseller {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--pa-bronze);
  color: #1A1206;
  font-family: var(--pa-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  z-index: 2;
}


/* ----------------------------------------------------------
   9. WISHLIST IKONA (YITH ili slično)
   ---------------------------------------------------------- */
.yith-wcwl-add-to-wishlist,
.tinvwl_add_to_wishlist_button {
  position: absolute !important;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pa-line) !important;
  border-radius: 0 !important;
  transition: border-color 0.15s ease;
}

.yith-wcwl-add-to-wishlist:hover,
.tinvwl_add_to_wishlist_button:hover {
  border-color: var(--pa-bronze) !important;
}


/* ----------------------------------------------------------
   10. SINGLE PRODUCT STRANICA
   ---------------------------------------------------------- */
/* Naslov proizvoda */
.woocommerce div.product .product_title {
  font-family: var(--pa-serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Cijena na single product */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--pa-mono) !important;
  font-size: 32px;
  font-weight: 600;
  color: var(--pa-ink);
}

/* "Najniža cijena 30 dana" (Omnibus direktiva) */
.pa-lowest-price,
.woocommerce-product-details__short-description .pa-lowest-price {
  font-family: var(--pa-mono);
  font-size: 11px;
  color: var(--pa-muted);
  margin-top: 6px;
}

/* Bullet prednosti iznad Add to Cart */
.pa-product-highlights {
  list-style: none;
  padding: 0;
  margin: 22px 0;
}

.pa-product-highlights li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--pa-ink);
  line-height: 1.45;
  padding: 4px 0;
}

.pa-product-highlights li::before {
  content: '◆';
  color: var(--pa-bronze);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Variation swatches — okrugli */
.tawcvs-swatches .swatch-color,
.variable-items-wrapper .variable-item {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
}

.tawcvs-swatches .swatch-color.selected,
.variable-items-wrapper .variable-item.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pa-bronze) !important;
}

/* Quantity picker */
.woocommerce .quantity .qty {
  font-family: var(--pa-mono);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--pa-line-light);
  border-radius: 2px;
}

/* Add to Cart — full width na single product */
.woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100%;
  padding: 15px 24px;
  font-size: 15.5px;
  font-weight: 700;
}

/* Trust ikone ispod CTA */
.pa-trust-icons {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pa-line-light);
}

.pa-trust-icons > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 11px;
  color: var(--pa-text-secondary);
}

.pa-trust-icons svg {
  stroke: var(--pa-bronze);
}

/* Tabovi na product stranici */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--pa-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--pa-muted);
  border-bottom: 2px solid transparent;
  padding: 14px 4px;
  transition: all 0.15s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pa-ink);
  border-bottom-color: var(--pa-bronze);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--pa-line-light);
}

/* Specifikacije tablica — mono vrijednosti */
.woocommerce table.shop_attributes td {
  font-family: var(--pa-mono) !important;
  font-size: 13px;
  font-weight: 600;
}

.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
  border-bottom: 1px solid var(--pa-line);
  padding: 13px 0;
}


/* ----------------------------------------------------------
   11. USP SEKCIJA (tamna pozadina)
   ---------------------------------------------------------- */
.pa-usp-section {
  background: #1A1206;
  padding: 52px 0;
}

.pa-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.pa-usp-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 24px;
  border-right: 1px solid #3A2A16;
}

.pa-usp-item:last-child {
  border-right: none;
  padding-right: 0;
}

.pa-usp-item h3 {
  font-family: var(--pa-serif);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.pa-usp-item p {
  font-size: 13px;
  color: #A8967F;
  line-height: 1.5;
  margin: 0;
}

.pa-usp-item svg {
  stroke: var(--pa-bronze);
}


/* ----------------------------------------------------------
   12. RECENZIJE KARTICE
   ---------------------------------------------------------- */
.pa-review-card {
  border: 1px solid var(--pa-line);
  background: #fff;
  padding: 26px;
}

.pa-review-card .pa-stars {
  color: var(--pa-bronze);
  font-size: 15px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.pa-review-card blockquote {
  font-family: var(--pa-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--pa-ink);
  margin: 0 0 18px;
  padding: 0;
  border: none;
}

.pa-review-card cite {
  font-family: var(--pa-mono);
  font-size: 11px;
  color: var(--pa-muted);
  letter-spacing: 0.04em;
  font-style: normal;
}


/* ----------------------------------------------------------
   13. NEWSLETTER SEKCIJA
   ---------------------------------------------------------- */
.pa-newsletter {
  background: var(--pa-leather);
  padding: 48px 56px;
}

.pa-newsletter h2 {
  font-family: var(--pa-serif);
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.pa-newsletter p {
  font-size: 14.5px;
  color: #E2D3C0;
  max-width: 460px;
  line-height: 1.5;
}

.pa-newsletter input[type="email"] {
  width: 280px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #6E5235;
  border-radius: 2px;
  font-family: var(--pa-sans);
  font-size: 14px;
}

.pa-newsletter button[type="submit"] {
  padding: 14px 24px;
  background: var(--pa-bronze) !important;
  color: #1A1206 !important;
  font-weight: 700;
}

.pa-newsletter button[type="submit"]:hover {
  background: #C98C57 !important;
}


/* ----------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------- */
.site-footer,
.bhfb-footer {
  background: var(--pa-ink) !important;
  color: #C9BCA9;
}

.site-footer h4,
.site-footer .widget-title,
.bhfb-footer .widget-title {
  font-family: var(--pa-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pa-bronze) !important;
  margin-bottom: 14px;
}

.site-footer a,
.bhfb-footer a {
  color: #C9BCA9 !important;
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.bhfb-footer a:hover {
  color: var(--pa-bronze) !important;
}

/* Radno vrijeme u footeru */
.pa-footer-hours {
  font-family: var(--pa-mono);
  font-size: 12px;
  line-height: 1.9;
  color: #C9BCA9;
}

/* Ikone plaćanja */
.pa-payment-icons {
  display: flex;
  gap: 8px;
}

.pa-payment-icons span {
  width: 42px;
  height: 27px;
  border: 1px solid #2C2117;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pa-mono);
  font-size: 8px;
  color: #9A8C78;
}

/* Copyright traka */
.pa-copyright {
  border-top: 1px solid #221911;
  padding: 18px 0;
  font-family: var(--pa-mono);
  font-size: 11px;
  color: #6E6253;
}


/* ----------------------------------------------------------
   15. BREADCRUMB
   ---------------------------------------------------------- */
.woocommerce-breadcrumb,
.breadcrumb-trail,
.rank-math-breadcrumb {
  font-family: var(--pa-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  color: var(--pa-muted) !important;
}

.woocommerce-breadcrumb a,
.breadcrumb-trail a,
.rank-math-breadcrumb a {
  color: var(--pa-muted) !important;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--pa-bronze) !important;
}


/* ----------------------------------------------------------
   16. FILTERI (SIDEBAR) — Ajax Product Filter ili slično
   ---------------------------------------------------------- */
.widget-area .widget,
.yith-wcan-filters {
  border: none;
  background: #fff;
  border-bottom: 1px solid var(--pa-paper-2);
  padding: 18px;
}

.widget-area .widget-title,
.yith-wcan-filters .filter-title {
  font-family: var(--pa-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-bronze) !important;
  margin-bottom: 12px;
}

/* Range slider (cijena) */
.price_slider_wrapper .ui-slider .ui-slider-handle,
.yith-wcan-filters .ui-slider-handle {
  background: var(--pa-bronze) !important;
  border: none !important;
  border-radius: 50%;
}

.price_slider_wrapper .ui-slider .ui-slider-range,
.yith-wcan-filters .ui-slider-range {
  background: var(--pa-bronze) !important;
}

/* Filter chip (aktivni filter) */
.pa-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--pa-bronze);
  border-radius: 2px;
  font-family: var(--pa-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--pa-ink);
  padding: 5px 10px;
  cursor: pointer;
}

.pa-filter-chip .remove {
  color: var(--pa-bronze);
  font-size: 13px;
}


/* ----------------------------------------------------------
   17. PAGINACIJA
   ---------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--pa-mono);
  font-size: 13px;
  border: 1px solid var(--pa-line);
  background: #fff;
  color: var(--pa-ink);
  border-radius: 2px !important;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pa-ink) !important;
  color: #fff !important;
  border-color: var(--pa-ink) !important;
}


/* ----------------------------------------------------------
   18. MOBILE STICKY ADD TO CART TRAKA
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .pa-mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid var(--pa-line);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  }

  .pa-mobile-sticky-bar .price {
    font-family: var(--pa-mono) !important;
    font-size: 20px;
    font-weight: 600;
  }

  .pa-mobile-sticky-bar .button {
    flex: 1;
    text-align: center;
  }

  /* Shop grid 2 kolone na mobitelu */
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* USP sekcija — 2 kolone na mobitelu */
  .pa-usp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .pa-usp-item {
    border-right: none;
    padding-right: 0;
  }
}


/* ----------------------------------------------------------
   19. ANIMACIJE (diskretne, brze)
   ---------------------------------------------------------- */
a,
.button,
.products .product,
input,
select {
  transition-duration: 0.18s !important;
  transition-timing-function: ease !important;
}

/* Bez nepotrebnih hover efekata i sjena */
.products .product:hover {
  box-shadow: none !important;
  transform: none !important;
}


/* ----------------------------------------------------------
   20. POMOĆNE KLASE (utility)
   ---------------------------------------------------------- */
.pa-bg-dark    { background: #1A1206; }
.pa-bg-leather { background: var(--pa-leather); }
.pa-bg-paper   { background: var(--pa-paper); }
.pa-bg-white   { background: #fff; }
.pa-border     { border: 1px solid var(--pa-line); }
.pa-text-bronze { color: var(--pa-bronze); }
.pa-text-red   { color: var(--pa-red); }
.pa-text-white { color: #fff; }
.pa-text-muted { color: var(--pa-muted); }

@import url('product-card.css');