/* =====================================================================
   celebrino — extracted inline CSS
   ---------------------------------------------------------------------
   These rules sat in the mockup's <head> as an inline <style>. Anything
   inline is lost when the design moves to WordPress, so the pieces the
   shipped markup still needs live here and are enqueued from
   functions.php (handle: celebrino-inline).

   DROPPED on purpose — Flatsome already does these, and overriding them
   fights the theme:
     body { margin: 0 }             → Flatsome's reset
     #header { position: sticky }   → Customize → Header → Sticky Header
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PRODUCT IMAGE PLACEHOLDERS
   The seeded demo products use on-brand SVG illustrations, which need
   padding + contain (real product photos must NOT get this class).
   DELETE this rule once real photography replaces the placeholders.
   --------------------------------------------------------------------- */
.cb-ph {
  object-fit: contain !important;
  padding: 12%;
}


/* ---------------------------------------------------------------------
   2. TAB PANELS
   Used by the home "Τα αγαπημένα σας" tabs and the single-product tabs
   (both rendered by db_cb_* elements and driven by assets/celebrino.js).
   Flatsome's own [tabgroup] ships its own CSS; these are for our markup.
   --------------------------------------------------------------------- */
.tab-panels .panel { display: none; }
.tab-panels .panel.active { display: block; }


/* ---------------------------------------------------------------------
   3. OPTIONAL CUSTOM MOBILE DRAWER
   The mockup drew its own off-canvas menu so the design could be
   reviewed in a plain browser. In WordPress the mobile menu is
   Flatsome's own off-canvas (Customize → Header → Mobile), which is
   accessible and already wired to the menu — so by default NONE of the
   markup below exists and these rules are inert.

   Keep this block only if you deliberately render the custom drawer
   (the [db_cb_drawer] element in "Celebrino · Κοινά"); otherwise it is
   safe to delete the whole section.
   --------------------------------------------------------------------- */
.cb-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.cb-drawer.is-open { visibility: visible; }
.cb-drawer-scrim { position: absolute; inset: 0; background: rgba(78,55,45,.28); opacity: 0; transition: opacity .25s; }
.cb-drawer.is-open .cb-drawer-scrim { opacity: 1; }
.cb-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); padding: 18px; overflow-y: auto;
  background: rgba(251,248,243,.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255,255,255,.8); box-shadow: 0 24px 52px rgba(78,55,45,.18);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,0,0,1); }
.cb-drawer.is-open .cb-drawer-panel { transform: none; }
.cb-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cb-drawer-head img { height: 56px; width: auto; }
.cb-drawer-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; margin-bottom: 12px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 1px solid rgba(122,90,74,.15); color: #7E6A60; }
.cb-drawer-search input { border: 0; background: transparent; box-shadow: none; margin: 0; height: 46px; padding: 0; font-size: 15px; }
.cb-drawer-nav { list-style: none; margin: 0; padding: 0; }
.cb-drawer-nav li { margin: 0; }
.cb-drawer-nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 16px; color: #4E372D; }
.cb-drawer-nav a:hover, .cb-drawer-nav > .active > a, .cb-drawer-nav > .active > .cb-drawer-toggle { background: #F7E1DB; }
/* Accordion submenus */
.cb-drawer .cb-drawer-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 0; margin: 0;
  padding: 14px 16px; border: 0; border-radius: 14px; background: none; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.4;
  letter-spacing: 0; text-transform: none; text-align: left; color: #4E372D; cursor: pointer; }
.cb-drawer .cb-drawer-toggle:hover, .cb-drawer .is-open > .cb-drawer-toggle { background: #F7E1DB; }
.cb-drawer-toggle .cb-ico { transition: transform .25s cubic-bezier(.2,0,0,1); }
.is-open > .cb-drawer-toggle .cb-ico { transform: rotate(180deg); }
.cb-drawer-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2,0,0,1); }
.is-open > .cb-drawer-sub { grid-template-rows: 1fr; }
.cb-drawer-sub > ul { min-height: 0; overflow: hidden; list-style: none; margin: 0 0 0 18px; padding: 0 0 0 8px;
  border-left: 2px solid #F7E1DB; visibility: hidden; transition: visibility .28s; }
.is-open > .cb-drawer-sub > ul { visibility: visible; }
.cb-drawer-nav .cb-drawer-sub a { padding: 10px 14px; font-size: 15px; font-weight: 600; color: #5B4639; }
.cb-drawer-foot { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(122,90,74,.12); }
.cb-drawer-foot a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-weight: 600; color: #5B4639; }


/* ---------------------------------------------------------------------
   4. WISHLIST — YITH WooCommerce Wishlist
   The design's heart button is .cb-wish. YITH prints its own markup, so
   the same styling is pointed at the plugin's real classes too; that way
   the button looks right whether it comes from our element or the plugin.
   --------------------------------------------------------------------- */
/*
   YITH renders three states in the same container:
     .yith-wcwl-add-button            → "Add to wishlist"
     .yith-wcwl-wishlistaddedbrowse   → a .feedback message ("Product added!") + a
                                        "Browse wishlist" link
     .yith-wcwl-wishlistexistsbrowse  → same shape, for an item already saved
   The design has ONE circular icon button and no toast, so the labels and the feedback
   message are suppressed and every state renders as that button.

   Selectors are scoped under .image-tools / .cb-gallery-main on purpose: YITH's own
   stylesheet carries rules of the same specificity, and adding a level is what makes these
   win regardless of which stylesheet loads last. Without it the "added" state escaped the
   card as a black heart with visible "Product added!" text.
*/
/* (the gallery's own container is positioned absolutely in § 8a) */
.image-tools .yith-wcwl-add-to-wishlist { position: relative; line-height: 1; }
.cb-gallery-main .yith-wcwl-add-to-wishlist { line-height: 1; }

/* Every state's clickable element becomes the design's glass circle. */
.image-tools .yith-wcwl-add-to-wishlist a,
.cb-gallery-main .yith-wcwl-add-to-wishlist a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--cb-glass-strong, rgba(255,255,255,.74));
  -webkit-backdrop-filter: var(--cb-blur, blur(18px));
  backdrop-filter: var(--cb-blur, blur(18px));
  border: 1px solid var(--cb-glass-border, rgba(255,255,255,.8));
  box-shadow: var(--cb-elev-1, 0 1px 2px rgba(78,55,45,.06));
  color: var(--cb-mocha, #7A5A4A);
  font-size: 0;            /* hides "Add to wishlist" / "Browse wishlist" labels */
  line-height: 1;
  text-indent: 0;
  transition: color .2s var(--cb-ease, ease), background .2s var(--cb-ease, ease);
}
.cb-gallery-main .yith-wcwl-add-to-wishlist a { width: 44px; height: 44px; }

/* Saved → the heart fills with the design's rose. */
.image-tools .yith-wcwl-add-to-wishlist a:hover,
.cb-gallery-main .yith-wcwl-add-to-wishlist a:hover,
.image-tools .yith-wcwl-wishlistaddedbrowse a,
.image-tools .yith-wcwl-wishlistexistsbrowse a,
.cb-gallery-main .yith-wcwl-wishlistaddedbrowse a,
.cb-gallery-main .yith-wcwl-wishlistexistsbrowse a {
  color: var(--cb-rose, #B86F63);
  background: #fff;
}

/* YITH's icon (font glyph or inline SVG) sized to the design's 18px. */
.image-tools .yith-wcwl-add-to-wishlist a i,
.image-tools .yith-wcwl-add-to-wishlist a svg,
.cb-gallery-main .yith-wcwl-add-to-wishlist a i,
.cb-gallery-main .yith-wcwl-add-to-wishlist a svg {
  font-size: 17px !important;
  width: 18px;
  height: 18px;
  margin: 0;
  fill: currentColor;
}

/* No toast: the button's own filled state is the confirmation. */
.image-tools .yith-wcwl-add-to-wishlist .feedback,
.cb-gallery-main .yith-wcwl-add-to-wishlist .feedback,
.image-tools .yith-wcwl-add-to-wishlist .separator,
.cb-gallery-main .yith-wcwl-add-to-wishlist .separator { display: none !important; }

/* The container must not stretch the card while YITH swaps its fragment in. */
.image-tools .yith-wcwl-add-to-wishlist .yith-wcwl-add-button,
.image-tools .yith-wcwl-wishlistaddedbrowse,
.image-tools .yith-wcwl-wishlistexistsbrowse {
  display: block;
  width: 38px;
  height: 38px;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------
   5. FLATSOME NATIVE-BEHAVIOUR COMPATIBILITY
   The FAQ element renders Flatsome's own accordion markup, so Flatsome's
   `accordion-title` behavior drives it (and brings the slide animation).
   But Flatsome puts .active on the TITLE, while the design CSS keys the
   open state off .accordion-item.active — so the chevron never rotated.
   These two rules match the design to what Flatsome actually does.
   (The panel itself opens either way: jQuery's slideDown writes an inline
   display, which outranks .accordion-inner { display: none }.)
   --------------------------------------------------------------------- */
.cb-accordion .accordion-title.active + .accordion-inner { display: block; }
.cb-accordion .accordion-title.active .cb-ico { transform: rotate(180deg); }


/* ---------------------------------------------------------------------
   6. HEADER NAV — keep the dropdown chevron on the same line
   Flatsome sets `flex-wrap: wrap` on .nav links. The design's nav link is an
   inline-flex holding the label plus a 14px chevron, so on a wrapping flex
   container the chevron gets pushed onto a SECOND flex line: the arrow sits
   under the text and the link grows from 38px to 59px tall, which also
   knocks the whole nav row out of vertical alignment.
   The label must never break either, so the item does not shrink.
   --------------------------------------------------------------------- */
.header-nav-main > li { flex: 0 0 auto; }
.header-nav-main > li > a { flex-wrap: nowrap; }


/* ---------------------------------------------------------------------
   7. ARCHIVE PRODUCT GRID
   inc/db-cb-woo.php wraps the WooCommerce loop in .cb-products so the
   front page's card design applies on the shop, category and attribute
   archives too. That class carries the front page's section padding,
   which is unwanted here — the page hero already provides the top space.
   --------------------------------------------------------------------- */
.cb-shop-products { padding: 8px 0 24px; }


/* ---------------------------------------------------------------------
   8. SINGLE PRODUCT — bridge WooCommerce/Flatsome controls to the design
   The design was drawn with its own markup (.cb-wish, .cb-qty); the real
   product page uses YITH's and Flatsome's. These rules put the design's
   look onto the markup that actually ships.
   --------------------------------------------------------------------- */

/* 8a. Wishlist heart in the gallery.
   .cb-gallery-main is a `display: grid; place-items: center` box. YITH's
   container is in normal flow, so it became a SECOND GRID ROW: it sat
   centred in its own row and squeezed the product image from square to
   340×267, pushing it down the card. The design pins .cb-wish to the
   corner — do exactly that, which also takes it out of the grid flow. */
.cb-gallery-main .yith-wcwl-add-to-wishlist {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
}

/* 8b. Quantity stepper.
   Flatsome renders `.ux-quantity.quantity.buttons_added` containing
   `<input type="button" class="… button minus is-form">`. The design styles
   `.cb-qty` / `.cb-qty-btn`, so none of it applied: the control was unstyled
   and — being a flex item of .cb-add-to-cart whose .button children are
   `flex: 1` — stretched to the full 480px row. Mirrors custom.css §.cb-qty. */
.cb-summary .cb-add-to-cart .quantity,
.cb-summary .cb-add-to-cart .ux-quantity {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  height: 56px;
  padding: 0 4px;
  border-radius: var(--cb-r-pill);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(122, 90, 74, .18);
}
.cb-summary .cb-add-to-cart .quantity input.qty,
.cb-summary .cb-add-to-cart .ux-quantity input.qty {
  flex: 0 0 auto;
  width: 44px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--cb-mocha-dark);
  -moz-appearance: textfield;
}
.cb-summary .cb-add-to-cart input.qty::-webkit-outer-spin-button,
.cb-summary .cb-add-to-cart input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cb-summary .cb-add-to-cart .quantity input.minus,
.cb-summary .cb-add-to-cart .quantity input.plus,
.cb-summary .cb-add-to-cart .ux-quantity__button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--cb-mocha-dark);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .2s var(--cb-ease, ease);
}
.cb-summary .cb-add-to-cart .quantity input.minus:hover,
.cb-summary .cb-add-to-cart .quantity input.plus:hover,
.cb-summary .cb-add-to-cart .ux-quantity__button:hover { background: var(--cb-blush-soft); }

/* Woo wraps the controls in <form class="cart">, which would otherwise break
   the design's single flex row of [stepper] [add to cart]. */
.cb-summary .cb-add-to-cart > form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
}
.cb-summary .cb-add-to-cart > form.cart > .button,
.cb-summary .cb-add-to-cart > form.cart button[type="submit"] {
  flex: 1;
  margin: 0;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 8c. Add-to-cart button colour.
   WooCommerce renders the single add-to-cart as `button alt`, and Flatsome paints `.button.alt`
   with the SECONDARY colour (rose) — but the approved design uses `.button.primary` (mocha) for
   it, with rose reserved for sale prices and accents. */
.cb-summary .cb-add-to-cart .single_add_to_cart_button,
.cb-summary .cb-add-to-cart button[type="submit"].alt {
  background-color: var(--fs-color-primary, #7A5A4A);
  border-color: var(--fs-color-primary, #7A5A4A);
  color: #fff;
}
.cb-summary .cb-add-to-cart .single_add_to_cart_button:hover,
.cb-summary .cb-add-to-cart button[type="submit"].alt:hover {
  background-color: #684A3C;
  border-color: #684A3C;
}


/* ---------------------------------------------------------------------
   9. SEARCH — panel + live results
   Flatsome's live search does the querying (products AND posts/pages) and
   appends its own markup into .live-search-results:

     .autocomplete-suggestions        the dropdown
       .autocomplete-suggestion       one row  (+ .autocomplete-selected)
         img.search-image
         .search-name                 (match wrapped in <strong>)
         .search-price
       .autocomplete-no-suggestion    "no results"

   None of that is in the design, so it is styled here to match the product
   cards: glass sheet, rounded thumbs, mocha names, rose prices.
   --------------------------------------------------------------------- */

/* --- the header lightbox panel ------------------------------------- */
.cb-search-panel {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 34px 34px 28px;
  border-radius: var(--cb-r-lg, 28px);
  background: var(--cb-cream, #FBF8F3);
  box-shadow: var(--cb-elev-3, 0 24px 52px rgba(78,55,45,.15));
  text-align: left;
}
.cb-search-panel h3 {
  margin: 4px 0 16px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--cb-mocha-dark, #4E372D);
}
.cb-search-panel .cb-search-form { max-width: none; margin-top: 0; }
.cb-search-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--cb-muted, #7E6A60);
}

/* The field must not clip the results sheet that hangs below it. */
.cb-search-form { position: relative; overflow: visible; }
.cb-search-form .live-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; }

/* --- the live results sheet ----------------------------------------- */
.live-search-results .autocomplete-suggestions {
  position: static !important;   /* it is already positioned by the wrapper */
  width: auto !important;
  max-height: min(60vh, 420px);
  margin-top: 10px;
  padding: 6px;
  overflow-y: auto;
  border-radius: var(--cb-r-md, 20px);
  background: var(--cb-glass-strong, rgba(255,255,255,.95));
  -webkit-backdrop-filter: var(--cb-blur, blur(18px));
  backdrop-filter: var(--cb-blur, blur(18px));
  border: 1px solid var(--cb-glass-border, rgba(255,255,255,.8));
  box-shadow: var(--cb-elev-3, 0 24px 52px rgba(78,55,45,.15));
  text-align: left;
}
.live-search-results .autocomplete-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--cb-r-sm, 12px);
  color: var(--cb-text, #5B4639);
  font-size: 14.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s var(--cb-ease, ease);
}
.live-search-results .autocomplete-suggestion + .autocomplete-suggestion { margin-top: 2px; }
.live-search-results .autocomplete-suggestion:hover,
.live-search-results .autocomplete-selected { background: var(--cb-blush-soft, #F7E1DB); }

.live-search-results .search-image {
  flex: 0 0 auto;
  margin: 0;                /* Flatsome adds a 10px right margin; the flex `gap` spaces rows instead, so image and placeholder rows align */
  width: 46px;
  height: 46px;
  border-radius: var(--cb-r-sm, 12px);
  background: var(--cb-ivory, #F4ECE3);
  object-fit: contain;
  padding: 4px;
}
.live-search-results .search-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--cb-mocha-dark, #4E372D);
}
/* Flatsome wraps the matched substring in <strong>. */
.live-search-results .search-name strong { color: var(--cb-rose, #B86F63); font-weight: 800; }
.live-search-results .search-price {
  flex: 0 0 auto;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--cb-mocha-dark, #4E372D);
  white-space: nowrap;
}
.live-search-results .search-price del { display: none; }  /* keep rows to one line */
.live-search-results .search-price ins { text-decoration: none; color: var(--cb-rose, #B86F63); }

.live-search-results .autocomplete-no-suggestion,
.live-search-results .autocomplete-group {
  padding: 14px 12px;
  color: var(--cb-muted, #7E6A60);
  font-size: 13.5px;
}

/* --- drawer field: no submit button, so the icon carries the padding -- */
.cb-drawer .cb-search-form.cb-drawer-search { margin-top: 0; }

/* Post/page results have no thumbnail (Flatsome only emits img.search-image when the result has
   one), so their titles would sit 58px left of the product rows'. A placeholder tile keeps the
   whole list on one optical grid. */
.live-search-results .autocomplete-suggestion:not(:has(.search-image))::before {
  content: "";
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--cb-r-sm, 12px);
  background: var(--cb-ivory, #F4ECE3);
}


/* ---------------------------------------------------------------------
   10. OFF-CANVAS DRAWER — transparent panel
   celebrino.css § "Off-canvas mobile menu" paints .off-canvas .mfp-content
   cream (rgba(251,248,243,.88) !important). Overridden here, per request, so
   the panel itself carries no fill.

   `!important` is required: the rule being overridden uses it, so ordinary
   specificity would lose. This lives in inline.css rather than celebrino.css
   so the latter stays a faithful copy of the approved mockup.

   The 24px backdrop blur is KEPT — with a transparent fill it is what still
   separates the drawer from the page behind it. Say the word to drop that too
   for a fully see-through panel.
   --------------------------------------------------------------------- */
.off-canvas .mfp-content {
  background: transparent !important;
}
