/* ============================================================
   Foody — Shop product cards (design .pcard)
   Applied by inheriting view website_sale.products_item (ID 1815,
   inherit view 2364). Odoo's product-card root/image use dynamic
   t-attf-class, so a static class can't be added there without a
   render error — the shell/image are therefore styled via their
   native classes (.oe_product_cart / .oe_product_image). The
   elements with static classes get the design names added:
   .pbody, .buyrow, plus product.tag->.tag.tag-hot (the native
   ribbon is omitted) and the .pcat category eyebrow.

   The design's "log in for price" logic is intentionally NOT ported —
   Odoo's native price is always shown.
   Tokens (--green, --rose, --pink-soft, --r-md, ...) come from
   foody_home.css :root, loaded globally by view 2332.
   ============================================================ */

/* ---------- Card shell (form.oe_product_cart == design .pcard) ---------- */
#wrap .oe_product .oe_product_cart {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}

#wrap .oe_product .oe_product_cart:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

/* ---------- Tag (Odoo ribbon rendered as .tag.tag-hot) ---------- */
#wrap .oe_product_cart .tag {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  width: auto;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 999px;
  line-height: 1.1;
}

#wrap .oe_product_cart .tag-hot {
  background: var(--rose);
  color: #fff;
}

/* ---------- Image (.oe_product_image == design .pimg) ---------- */
#wrap .oe_product_cart .oe_product_image {
  height: 250px;
  background-color: var(--pink-soft);
  padding: 0;
  cursor: pointer;
}

#wrap .oe_product:nth-child(even) .oe_product_cart .oe_product_image {
  background-color: var(--mint);
}

#wrap .oe_product_cart .oe_product_image_link,
#wrap .oe_product_cart .oe_product_image_img_wrapper {
  height: 100%;
  width: 100%;
}

#wrap .oe_product_cart .oe_product_image_img {
  object-fit: cover !important;
  object-position: center;
  transition: transform .3s ease;
}

#wrap .oe_product_cart:hover .oe_product_image_img {
  transform: scale(1.04);
}

/* ---------- Body (.o_wsale_product_information + .pbody) ---------- */
#wrap .oe_product_cart .pbody {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
}

#wrap .oe_product_cart .o_wsale_product_info_attributes_wrapper {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

/* Category eyebrow */
#wrap .oe_product_cart .pcat {
  display: block;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}

/* Product name */
#wrap .oe_product_cart .o_wsale_products_item_title {
  font-size: .98rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

#wrap .oe_product_cart .o_wsale_products_item_title a {
  color: var(--ink);
  transition: color .18s;
}

#wrap .oe_product_cart .o_wsale_products_item_title a:hover {
  color: var(--green);
}

/* Rating stars → design .stars colouring */
#wrap .oe_product_cart .o_wsale_product_rating_wrapper {
  color: #E5A93B;
  font-size: .8rem;
}

/* ---------- Buy row (.o_wsale_product_sub + .buyrow) ---------- */
#wrap .oe_product_cart .buyrow {
  margin-top: auto;
  padding-top: .7rem;
  align-items: center;
}

#wrap .oe_product_cart .product_price,
#wrap .oe_product_cart .product_price .oe_currency_value {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green-deep);
}

/* Add-to-cart button → design .qadd pill */
#wrap .oe_product_cart .o_wsale_product_btn .btn {
  border: none;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .74rem;
  font-weight: 700;
  transition: background .18s;
  white-space: nowrap;
}

#wrap .oe_product_cart .o_wsale_product_btn .btn:hover,
#wrap .oe_product_cart .o_wsale_product_btn .btn:focus {
  background: var(--rose);
  color: #fff;
}

/* ============================================================
   Shop page chrome (design source/design/shop.html + pageShop)
   Applied by inheriting website_sale.products (view 1844).
   Scoped to the shop wrap (#wrap.o_wsale_products_page) so it
   never leaks onto product-detail or other pages.
   Product CARDS are handled above (view 2364) and untouched here.
   ============================================================ */

/* ---------- Page hero band (design .page-hero) ---------- */
.o_wsale_products_page .foody-shop-hero {
  background: linear-gradient(120deg, var(--mint), var(--pink-soft));
  padding: 3.4rem 0;
  border-radius: 0 0 32px 32px;
  margin-bottom: 1.4rem;
  font-family: "DM Sans", system-ui, sans-serif;
}

.o_wsale_products_page .foody-shop-hero .eyebrow {
  color: var(--rose-deep);
}

.o_wsale_products_page .foody-shop-hero .foody-shop-hero-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: .5rem 0 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.o_wsale_products_page .foody-shop-hero p {
  max-width: 56ch;
  color: var(--muted);
  margin-top: .8rem;
  margin-bottom: 0;
  font-size: 1.02rem;
}

/* Hero carries the title on the shop root — hide Odoo's default h1 there
   (category / search pages keep their native title). */
.o_wsale_products_page .o_wsale_products_header_is_shop .o_wsale_shop_title {
  display: none;
}

/* ---------- Toolbar: search / sort / filters as design pills ---------- */
.o_wsale_products_page .products_header {
  --o-cc-bg: transparent;
}

.o_wsale_products_page .o_wsale_products_searchbar_form {
  background: #fff;
  border: 1.4px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  padding-left: .4rem;
}

.o_wsale_products_page .o_wsale_products_searchbar_form .oe_search_box {
  background: transparent !important;
  border: 0 !important;
}

.o_wsale_products_page .o_wsale_products_searchbar_form .oe_search_found,
.o_wsale_products_page .o_wsale_products_searchbar_form .btn {
  border: 0;
  background: transparent;
  color: var(--green);
}

/* sort dropdown + mobile filters button */
.o_wsale_products_page .products_header .dropdown_sort > .btn,
.o_wsale_products_page .products_header > .btn {
  border: 1.4px solid var(--line) !important;
  border-radius: 999px !important;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  padding: .5rem 1rem;
}

.o_wsale_products_page .products_header .dropdown_sort > .btn:hover,
.o_wsale_products_page .products_header > .btn:hover {
  border-color: var(--green) !important;
  color: var(--green);
}

.o_wsale_products_page .products_header .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

/* ---------- Left filter sidebar (design .filters card) ---------- */
.o_wsale_products_page #products_grid_before .products_categories,
.o_wsale_products_page #products_grid_before .products_attributes_filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem 1.3rem;
}

.o_wsale_products_page #products_grid_before .products_attributes_filters {
  margin-top: 1rem;
}

.o_wsale_products_page #products_grid_before .nav_categories .nav-link {
  border-radius: 10px;
  font-weight: 500;
}

.o_wsale_products_page #products_grid_before .nav_categories .nav-link:hover {
  background: var(--mint);
  color: var(--green);
}

/* ---------- Pager (design .pagin pills) ---------- */
.o_wsale_products_page .products_pager .pagination {
  gap: .45rem;
}

.o_wsale_products_page .products_pager .page-link {
  border: 1.4px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-weight: 700;
  min-width: 40px;
  text-align: center;
  transition: all .15s;
}

.o_wsale_products_page .products_pager .page-item.active .page-link,
.o_wsale_products_page .products_pager .page-link:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

@media (max-width: 940px) {
  .o_wsale_products_page .foody-shop-hero {
    padding: 2.4rem 0;
  }
}