/**
 * DINAPE Demoshop — branding layer over the Classic theme.
 *
 * Tokens are read off the reference shop (https://demoshop.dinape.com/, WoodMart "Bikes" demo) and are
 * documented in ../../../../README.md. This file is branding only: colours, type, spacing and square
 * corners. No layout rewrites, no template overrides — see the A2 scope line ("no custom theme
 * development beyond branding adjustments").
 */

@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap");

:root {
  --dinape-primary: #e83a3a;
  --dinape-primary-dark: #cf2f2f;
  --dinape-amber: #fbbc34;
  --dinape-green: #2e9b57;
  --dinape-text: #777777;
  --dinape-title: #242424;
  --dinape-entity-title: #333333;
  --dinape-dark: #232323;
  /* The reference footer is a touch darker than the header — measured #202020 on demoshop.dinape.com. */
  --dinape-footer: #202020;
  --dinape-border: rgba(0, 0, 0, 0.1);
  --dinape-font: "Cabin", Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------- base type */

body,
button,
input,
select,
textarea,
.form-control {
  font-family: var(--dinape-font);
  color: var(--dinape-text);
}

body {
  font-size: 14px;
  line-height: 1.6;
  background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--dinape-font);
  font-weight: 600;
  color: var(--dinape-title);
  text-transform: none;
}

a {
  color: var(--dinape-entity-title);
}

a:hover,
a:focus {
  color: var(--dinape-primary);
  text-decoration: none;
}

/* The reference design is uniformly square — Bootstrap's radii have to go. */
.btn,
.card,
.form-control,
.input-group,
.custom-select,
.dropdown-menu,
.alert,
.badge,
.product-flags li,
.modal-content,
.page-link,
.search-widget form input[type="text"],
/* `.search-widget` is Classic's structure (404 page, sidebars); the header search comes from the
   ps_searchbar module as `#search_widget.search-widgets`, which rounds its own input to 5px. */
#search_widget form input[type="text"] {
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.btn-primary,
.btn-primary:disabled,
#header .btn-primary {
  background: var(--dinape-primary);
  border-color: var(--dinape-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--dinape-primary-dark);
  border-color: var(--dinape-primary-dark);
  color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
  background: transparent;
  border: 2px solid var(--dinape-title);
  color: var(--dinape-title);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--dinape-title);
  color: #fff;
}

/* Add-to-cart is the primary action everywhere it appears. */
.add-to-cart,
.product-add-to-cart .btn {
  background: var(--dinape-primary);
  border-color: var(--dinape-primary);
  color: #fff;
}

/**
 * Quick view is NOT a button in Classic — it is a bare text link revealed over the product image on
 * hover. Giving it the primary fill turned it into a red block with unreadable text, so it stays a
 * quiet link that picks up the brand colour only on hover.
 */
.product-miniature .highlighted-informations .quick-view,
.quick-view {
  background: transparent;
  border: 0;
  color: var(--dinape-entity-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-miniature .highlighted-informations .quick-view:hover,
.quick-view:hover,
.quick-view:focus {
  background: transparent;
  color: var(--dinape-primary);
  text-decoration: none;
}

/* The icon inside the link inherits the same colour as the label. */
.quick-view i,
.quick-view .material-icons {
  color: inherit;
}

.add-to-cart:hover,
.product-add-to-cart .btn:hover {
  background: var(--dinape-primary-dark);
  border-color: var(--dinape-primary-dark);
  color: #fff;
}

/* ------------------------------------------------------------------- header */

#header {
  background: var(--dinape-dark);
  box-shadow: none;
}

#header .header-nav,
#header .header-top {
  background: transparent;
  border: 0;
}

#header a,
#header .top-menu a,
#header .header-nav a,
#header .shopping-cart,
#header .user-info a,
#header .expand-more {
  color: #fff;
}

#header a:hover,
#header .top-menu a:hover {
  color: var(--dinape-primary);
}

#_desktop_top_menu .top-menu a[data-depth="0"] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/**
 * Anything that drops out of the dark header opens on white — main sub-menus, the currency and language
 * selectors (`.dropdown-menu` > `.dropdown-item`), the account menu and the cart preview. Their links
 * need the dark text back, otherwise `#header a { color: #fff }` above renders them white-on-white and
 * only the hovered item is visible.
 */
#header .popover,
#header .dropdown-menu,
#header .top-menu .sub-menu {
  background: #fff;
  border: 1px solid var(--dinape-border);
}

#header .popover a,
#header .dropdown-menu a,
#header .dropdown-menu .dropdown-item,
#header .top-menu .sub-menu a {
  color: var(--dinape-entity-title);
}

#header .popover a:hover,
#header .dropdown-menu a:hover,
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:focus {
  background: transparent;
  color: var(--dinape-primary);
}

/* Mark the selected currency/language by weight, not by colour alone. */
#header .dropdown-menu li.current > .dropdown-item {
  font-weight: 600;
}

/**
 * Icon sizing and alignment in the header.
 *
 * Classic sets every Material icon to `font-size: 24px` (with `line-height: 1` and
 * `vertical-align: middle`, so alignment itself is handled) — sized for its own 16px base text. The
 * reference shop runs 14px, which this theme adopts, leaving the icons oversized and visibly hanging
 * below the text baseline. Scaling them down restores the pairing.
 *
 * `inline-flex` on the icon+label pairs then centres them on the glyph's optical middle rather than the
 * baseline, which is what actually makes "Sign out", "Cart (0)" and the currency chevron line up.
 */
#header .material-icons {
  font-size: 20px;
}

/* NB: in Classic's markup `expand-more` is on BOTH the label span and the chevron <i> — target the icon
   only, or the currency/language label shrinks with it. */
#header i.material-icons.expand-more {
  font-size: 18px;
}

/**
 * Classic's `#header .header-nav .material-icons { line-height: inherit }` (specificity 1-2-0) overrides
 * the `line-height: 1` on `.material-icons`, so the header icons inherit the body's 1.6. A glyph laid out
 * on a 28.8px line box inside an 18px-tall element paints ~5px below its own box — which is what made the
 * currency chevron, the account icon and the cart icon all sit low. Match Classic's specificity to undo it.
 */
#header .header-nav .material-icons {
  line-height: 1;
}

#header .user-info a,
#header .header-nav .blockcart a,
#header .currency-selector button,
#header .language-selector button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* `Currency:` is a sibling span of the button, not part of it — the wrapper has to do the centring. */
#header .header-nav .currency-selector,
#header .header-nav .language-selector {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Classic pulls the 24px chevron back under its label; at 18px inside a flex row the gap already spaces it. */
#header .header-nav .material-icons.expand-more {
  margin-left: 0;
}

/**
 * Signed in, `.user-info` holds two links ("Sign out" + the customer name). Classic leaves it a block with
 * `white-space: nowrap`, and its `margin-left: 2.5rem` leaves ~142px inside a 182px column — a few pixels
 * short of the two labels, so the name dropped onto a second line. A flex row with `flex-wrap: nowrap`
 * cannot break regardless, and the reclaimed margin gives the pair room to fit.
 */
#header .header-nav .user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.625rem;
  margin-left: 1.25rem;
}

#header .header-nav .user-info .account {
  margin-left: 0;
}

/**
 * Search: the header widget is `#search_widget.search-widgets` — **plural**, straight from the
 * `ps_searchbar` module (Classic ships no override for it). Its form has no submit button; the magnifier
 * and clear icons are bare `<i class="material-icons">` siblings of the input, absolutely positioned by
 * `modules/ps_searchbar/ps_searchbar.css` at `top: 0`. Rules written against `.search-widget` (singular)
 * or a `button[type="submit"]` — the Classic structure used elsewhere, e.g. the 404 page — match nothing
 * here, which is why the box stayed light grey and rounded.
 */
#header #search_widget form input[type="text"] {
  height: 42px;
  padding: 10px 20px 10px 42px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

#header #search_widget form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/**
 * The module pins both icons to the top of the form; centre them on the 42px field instead.
 *
 * `padding: 0` is the load-bearing part. `ps_searchbar.css` gives each icon `padding: .5rem`, while
 * `.material-icons` sizes it `width: 1em; height: 1em` — and Bootstrap's global `box-sizing: border-box`
 * makes that 20px box *include* the 16px of padding, leaving a 4px content box. The 20px glyph line box
 * then starts below the 8px top padding, so the magnifier painted exactly 8px lower than the placeholder
 * even though its element box was perfectly centred. Dropping the padding lets the glyph fill its own box,
 * which `translateY(-50%)` centres; `left` then carries the inset the padding used to provide.
 */
#header #search_widget form i.search,
#header #search_widget form i.clear {
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
}

/* Glyph spans 12–32px; the input's 42px left padding leaves a 10px gap to the placeholder. */
#header #search_widget form i.search {
  left: 12px;
}

#header #search_widget form i.clear {
  right: 12px;
}

/**
 * The cart block sits in the dark header, so it must not keep Classic's light chip. Both selectors below
 * mirror Classic's own specificity (`#header .header-nav .blockcart` is 1-2-0, `.cart-preview.active` is
 * 1-3-0) — a shorter selector like `#header .blockcart` loses to them regardless of load order.
 */
.header-top .cart-preview .header,
#header .header-nav .blockcart,
#header .header-nav .cart-preview.active {
  background: transparent;
  color: #fff;
}

#header .header-nav .blockcart a,
#header .header-nav .blockcart .material-icons,
#header .header-nav .cart-preview.active a {
  color: #fff;
}

/* -------------------------------------------------------------- typography  */
/* Section headings on the home page: large, light, centred — "Our Products". */

.featured-products .products-section-title,
.products-section-title,
#products .products-section-title {
  font-size: 42px;
  font-weight: 400;
  color: var(--dinape-title);
  text-align: center;
  margin-bottom: 0.25rem;
  /* Classic renders these titles with Bootstrap's `.text-uppercase` utility, which is itself
     `!important` — the reference shop's headings are mixed case, so this has to outrank it. */
  text-transform: none !important;
}

.products-section-subtitle {
  display: block;
  margin-bottom: 2.5rem;
  text-align: center;
  font-size: 15px;
  color: var(--dinape-text);
}

/* Sidebar / footer / widget titles are the uppercase 16px treatment. */
.block-categories .facet-title,
#left-column .block-title,
#left-column .facet-title,
.footer-container .h3,
.footer-container .block-title,
.blockreassurance_product .h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--dinape-entity-title);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* On the dark footer band the same treatment needs white, as on the reference shop. */
#footer .h3,
#footer .h4,
#footer .block-title,
#footer .block_newsletter p {
  color: #fff;
}

/* ------------------------------------------------------------ product cards */

.product-miniature .product-title,
.product-miniature .product-title a {
  font-size: 14px;
  font-weight: 600;
  color: var(--dinape-entity-title);
  text-align: center;
  text-transform: none;
}

.product-miniature .product-title a:hover {
  color: rgba(51, 51, 51, 0.65);
}

.product-miniature .product-description,
.product-miniature .product-reference {
  text-align: center;
  font-size: 13px;
  color: #999;
}

.product-miniature .product-price-and-shipping,
.product-miniature .product-price-and-shipping .price,
.product-price,
.current-price .price,
.product-prices .price {
  color: var(--dinape-primary);
  font-weight: 600;
  text-align: center;
}

.product-miniature .regular-price {
  color: #b6b6b6;
  font-weight: 400;
  text-decoration: line-through;
}

.product-miniature .thumbnail-container,
.product-miniature .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.product-miniature .thumbnail-container:hover {
  box-shadow: none;
}

/* Flags: the reference uses a round green "NEW" and a red sale badge. Classic gives `.discount` and
   `.on-sale` their own (more specific) colours, so those are named explicitly. */
.product-flags li.product-flag,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale,
.product-flags li.product-flag.pack {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--dinape-primary);
  color: #fff;
  box-shadow: none;
}

.product-flags li.product-flag.new {
  background: var(--dinape-green);
  border-radius: 50% !important;
  width: 52px;
  height: 52px;
  line-height: 52px;
  padding: 0;
  text-align: center;
}

/* Star ratings (productcomments) are amber. */
.star-content .star:after,
.grade-stars .star-content div.star-on:after,
.comments-note .star-on:after {
  color: var(--dinape-amber);
}

/* ------------------------------------------------------------- product page */

/**
 * Add to cart. Classic pairs a 24px cart glyph with 13px uppercase text and lets the icon inherit the
 * body's `line-height: 1.6` — a 38.4px line box — so the glyph painted 8px below the label's centre and
 * padded the button out. Block-level `flex` keeps Classic's width behaviour while centring both, and the
 * glyph drops to 20px so it reads as a pair with the label instead of dominating it.
 */
.product-add-to-cart .add-to-cart,
.btn.add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.btn.add-to-cart i.material-icons {
  height: auto;
  margin: 0; /* Classic's margin-right is replaced by the flex gap. */
  font-size: 20px;
  line-height: 1;
}

/**
 * Share buttons. Classic bakes the hover colour into a *separate asset* — `.facebook.icon-gray:hover`
 * swaps `background-image` to a cyan SVG — so there is no colour property to override, and a filter cannot
 * reach the brand red without wrecking the chip: `hue-rotate` alone lands on salmon, and the saturated
 * recipes (`sepia`/`brightness`) tint the white circle cream or grey, because a filter applies to the whole
 * element. `grayscale(1)` is the one filter white and grey survive unchanged, so it removes the teal, and
 * the hover affordance moves to a transform, which filters do not touch. Exact red glyphs would mean
 * shipping our own SVGs in place of Classic's.
 */
.social-sharing li {
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.social-sharing li:hover {
  filter: grayscale(1);
  transform: scale(1.06);
}

/**
 * The wishlist heart. `blockwishlist` marks "in this list" only by swapping the Material ligature —
 * `favorite` when saved, `favorite_border` when not (see the module's `Button/Button.vue`) — and puts no
 * class on the button. CSS cannot select on text content, so both states take the brand red and the
 * filled-vs-outline glyph carries the meaning. Grey-until-saved would need a template override or a JS
 * hook, which is outside the branding scope.
 */
.wishlist-button-add i.material-icons {
  color: var(--dinape-primary);
}

/**
 * productcomments' buttons ("Write your review", "Be the first to write your review") ship a slate
 * #6b868f fill and leave their icon outside the label's line box — the `<i>` is empty, its glyph comes
 * from a `::before`, so it never shared a baseline with the text. Per the brand tokens a secondary action
 * is outlined, not filled; flex then centres the pair.
 */
.btn-comment,
.post-product-comment,
#post-product-comment-modal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: transparent;
  border: 2px solid var(--dinape-title);
  color: var(--dinape-title);
}

.btn-comment:hover,
.btn-comment:focus,
.post-product-comment:hover,
.post-product-comment:focus {
  background: var(--dinape-title);
  border-color: var(--dinape-title);
  color: #fff;
}

.btn-comment i.material-icons,
.post-product-comment i.material-icons {
  height: auto;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

/* -------------------------------------------------------------- category UI */

#left-column .facet .facet-title,
#left-column .search-filters .facet-label a {
  color: var(--dinape-entity-title);
}

.ui-slider-horizontal .ui-slider-range,
#search_filters .ui-widget-header {
  background: var(--dinape-primary);
}

.page-list .page-item.active .page-link,
.pagination .current a {
  background: var(--dinape-primary);
  border-color: var(--dinape-primary);
  color: #fff;
}

/* Page title over the category banner, as on the reference shop. */
#category #js-product-list-header h1,
.page-header h1 {
  font-size: 46px;
  font-weight: 600;
  color: var(--dinape-title);
}

/**
 * The "Sort by" / "Show N per page" dropdowns in `#js-product-list-top`.
 *
 * Classic builds them as `<button class="btn-unstyle select-title">Relevance <i class="material-icons
 * float-xs-right">arrow_drop_down</i></button>`, which fell apart under this theme for three reasons at once:
 *
 *  1. the icon inherits the body's `line-height: 1.6`, so at Classic's 24px it claims a 38.4px line box;
 *  2. Bootstrap's `.float-xs-right` floats it out of the label's line box, so the button grows to contain
 *     the float (60px tall) and the arrow hangs below the text instead of beside it;
 *  3. Classic's `.products-selection .select-title i { height: inherit }` then stretches the icon to the
 *     button's full height, parking its glyph at the top even once the button is centred.
 *
 * A flex row fixes 1 and 2 — floats have no effect on flex items — and an explicit `height` undoes 3.
 * The 42px height is the reference shop's form-height token, the same as the header search field.
 */
.products-selection .select-title,
.products-sort-order .select-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 42px;
  padding: 0 0.75rem;
  line-height: 1.2;
}

.products-selection .select-title i.material-icons,
.products-sort-order .select-title i.material-icons {
  height: auto;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

/* ------------------------------------------------------------------- footer */

/**
 * The reference shop's footer is one dark band, not a light one: `footer.wd-footer` computes to
 * #202020 with white uppercase widget titles and links at 70% white (read off
 * https://demoshop.dinape.com/ the same way the palette was). Slightly darker than the header's #232323,
 * which is why this is its own token rather than a reuse of --dinape-dark.
 *
 * This also repairs the social icons: Classic's `.block-social ul li` chips are `background-color: #f6f6f6`
 * behind *white* glyph sprites, so on the old light footer they were white-on-near-white. On the dark band
 * the sprites read as intended, and the chip only needs to go transparent.
 */
/**
 * The band goes on `#footer`, not on `.footer-container`. Classic's structure is:
 *
 *   footer#footer > .container > .row > .block_newsletter + .block-social   (the "footer before" band)
 *                                     … .footer-container                   (the link columns)
 *
 * so colouring `.footer-container` alone darkens the columns and leaves the newsletter/social band light.
 * `body#checkout #footer { background: #fff }` (specificity 2-0-1) still wins on checkout, which is what
 * we want — that page keeps Classic's stripped-down white footer.
 */
#footer {
  background: var(--dinape-footer);
  color: rgba(255, 255, 255, 0.8);
}

.footer-container {
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

#footer a,
#footer .block-contact,
#footer p {
  color: rgba(255, 255, 255, 0.7);
}

#footer a:hover {
  color: var(--dinape-primary);
}

/**
 * The wishlist module renders its modals as children of `#footer`, so the blanket link colour above would
 * make them white-on-white once they open over the page. Restore the body link colour inside any modal.
 */
#footer .modal,
#footer .modal p,
#footer .modal li,
#footer .modal span {
  color: var(--dinape-text);
}

#footer .modal a {
  color: var(--dinape-entity-title);
}

/* blockwishlist injects `.wishlist-add-to-new i { color: #2fb5d2 }` from its own bundle. */
.modal .wishlist-add-to-new i,
.wishlist-add-to-new i.material-icons {
  color: var(--dinape-primary);
}

#footer .modal a:hover {
  color: var(--dinape-primary);
}

/* "Your account" is a link wrapped in the column's `p.h3.myaccount-title`, so it needs the title colour. */
#footer .h3 a,
#footer .myaccount-title a {
  color: #fff;
}

/* Classic paints the newsletter block white and the mobile link lists grey — both punch light holes in
   the dark band. */
#footer .block_newsletter,
#footer .links ul {
  background: transparent;
}

/* The newsletter field gets the same treatment as the header search: translucent on dark, square, white.
   ps_emailsubscription renders it as `type="email"`, not `text` — Classic's own rules target `[type=text]`,
   so they never applied to it either. */
#footer .block_newsletter form input[type="email"],
#footer .block_newsletter form input[type="text"] {
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

#footer .block_newsletter form input[type="email"]::placeholder,
#footer .block_newsletter form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/**
 * Social icons: drop Classic's grey chip so the white sprite sits straight on the band, and replace its
 * cyan hover (#24b9d7) with the brand red. The glyphs are background images, so they cannot be recoloured
 * — the chip is the only lever, which is exactly how Classic intends the hover to read.
 */
#footer .block-social ul li {
  background-color: transparent;
  opacity: 0.75;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

#footer .block-social ul li:hover {
  background-color: var(--dinape-primary);
  opacity: 1;
}

/* --------------------------------------------------------- forms & messages */

.form-control {
  height: 42px;
  border: 1px solid var(--dinape-border);
  box-shadow: none;
}

.form-control:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: none;
  outline: 0;
}

.alert-success {
  border-left: 3px solid var(--dinape-green);
}

.alert-danger {
  border-left: 3px solid var(--dinape-primary);
}

/* --------------------------------------------- Classic's accent → brand red */
/**
 * Classic ships Bootstrap 4 with #24b9d7 as `primary`. It surfaces in components the branding above does
 * not touch — pagination links, the quantity spinner, focus states, tags, active rows — which would leave
 * teal in the corners of an otherwise red shop. Remapped in one place rather than chased per page.
 *
 * `#header .top-menu a[data-depth="0"]:hover` is repeated from Classic because its attribute selector
 * makes it MORE specific (1-3-1) than the header rule further up this file (1-2-1); without it the main
 * menu would still hover teal.
 */
a.text-primary,
.text-primary,
.btn-link,
.page-link,
.tag-primary,
#header .top-menu a[data-depth="0"]:hover,
.search-widget form input[type="text"]:focus + button .search,
/* ps_searchbar's markup puts the icon BEFORE the input, so the `+ button` form above (Classic's
   structure) never matches in the header — `:focus-within` is the only sibling-agnostic hook. */
#search_widget form:focus-within i.search,
.btn-unstyle:focus .expand-more,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin {
  color: var(--dinape-primary);
}

.btn-link:hover,
.page-link:hover,
a.text-primary:hover {
  color: var(--dinape-primary-dark);
}

.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item.active:focus,
.nav-pills .nav-link.active,
.nav-pills .nav-item.open .nav-link,
.list-group-item.active {
  background-color: var(--dinape-primary);
  border-color: var(--dinape-primary);
  color: #fff;
}

/* Bootstrap declares .bg-primary with !important, so matching it takes !important too. */
.bg-primary {
  background-color: var(--dinape-primary) !important;
}

/* Same for .text-primary — Classic declares it `#24b9d7 !important`, which is why the non-important entry
   in the list above loses. Visible on the wishlist modal's "Create new list" link. */
.text-primary {
  color: var(--dinape-primary) !important;
}

.btn-outline-primary {
  border-color: var(--dinape-primary);
  color: var(--dinape-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--dinape-primary);
  border-color: var(--dinape-primary);
  color: #fff;
}

/* The "added to cart" modal keeps Classic's teal product name. */
#blockcart-modal .product-name {
  color: var(--dinape-entity-title);
}

/**
 * Category page → "Subcategories" tiles. Classic hovers them with a 5px teal frame
 * (`#subcategories ul li:hover .subcategory-image a { padding: 5px; border: 5px solid #24b9d7 }`) and
 * turns the caption teal too. Only the colours are overridden — Classic's padding/border swap is what
 * keeps the tile from shifting on hover, so it stays.
 */
#subcategories ul li:hover .subcategory-image a {
  border-color: var(--dinape-primary);
}

#subcategories ul li .subcategory-name:hover {
  color: var(--dinape-primary);
}

/**
 * Product page leftovers in Classic's teal: the selected gallery thumbnail's frame and the active
 * Description / Product Details tab (colour plus its 3px underline). The reference shop marks the active
 * tab with a red underline, so this is the intended treatment rather than a mere colour swap.
 */
/* Classic's selector is `(0,4,1)` — matched here so the override lands, and its `:hover` frame is teal
   too, which the original bug report would only have shown on the next mouse-over. */
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border-color: var(--dinape-primary);
}

.tabs .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--dinape-primary);
  border-bottom-color: var(--dinape-primary);
}

/* Classic sets the 3px underline for `.active` and `:hover` in ONE rule
   (`.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover`, 0-4-0), so overriding only
   `.active` left the hover underline teal. */
.tabs .nav-tabs .nav-link:hover {
  border-bottom-color: var(--dinape-primary);
}

/* ------------------------------------------------------------- demo notice  */
/**
 * The reference shop pins a red "demo store" bar to the bottom of every page. Rendered from CSS so no
 * Classic template has to be forked; the copy therefore is not translatable, which is acceptable for a
 * permanent demo-environment notice. Remove this block if the shop ever stops being a demo.
 */

body::after {
  content: "This is a demo store for testing purposes — no orders shall be fulfilled.";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0.85rem 1rem;
  background: var(--dinape-primary);
  color: #fff;
  font-family: var(--dinape-font);
  font-size: 14px;
  text-align: center;
}

/* Keep the notice from covering page content or a sticky checkout button. */
body {
  padding-bottom: 48px;
}

@media (max-width: 767px) {
  .products-section-title,
  .featured-products .products-section-title {
    font-size: 30px;
  }

  #category #js-product-list-header h1,
  .page-header h1 {
    font-size: 32px;
  }
}