/* ============================================================
   CC UI — homepage sections (theme blocks)
   Loaded on the home controller only. Restyles the THEME's home blocks
   (bestsellers, services…) so they sit in the same design system as our own
   blocks (cc_seasonal, cc_fullbanner, cc_buttonsgrid) — the products inside them
   are already ours via catalog.css.

   The section heading is the shared piece: the theme centres the title between
   two long grey rules (.tvcmsmain-title-wrapper::before/::after, 481px of
   #e0e0e0 each) and sets it 22px/500/#555 uppercase. We replace that with the
   same header cc_seasonal uses — title, then the brand's spectrum bar.
   ============================================================ */

/* ------------------------------------------------- the home content column */
/* The theme wraps the homepage in `.left-column.col-xl-10` — 10 of 12 columns —
   expecting a sidebar in the other two. There is NO `.right-column` on this shop, so
   above 1200px the page simply gives away ~17% of its width and shoves everything
   hooked into displayHome (cc_buttonsgrid, cc_fullbanner, cc_seasonal) to the left,
   off the page's centre line. The theme's own blocks don't suffer because they break
   out with negative margins and 100vw — which is exactly the hack cc_buttonsgrid had
   grown too, and the reason the homepage scrolled sideways.
   Give the column the full row instead, and every block centres on its own. */
/* Two traps in one rule:
   - `width`, not `flex`: the theme's .row is display:block and its columns are sized
     with a plain width percentage — no flexbox in sight — so flex-basis and max-width
     are inert here and only width moves anything.
   - the ID: the declaration that actually wins is `#content-wrapper.col-xl-10
     { width: 78% }`. An ID outranks any class chain we could write, so we have to
     name it too. (78%, not even the 83.33% bootstrap would give it.) */
#content-wrapper.left-column.col-xl-10,
.left-column.col-xl-10 {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* ------------------------------------------------------- section heading */
.tvcmsmain-title-wrapper {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin: 0 0 30px; padding: 0;
  text-align: center;
  border: 0;
}
/* kill the theme's grey rules … */
.tvcmsmain-title-wrapper.clearfix::before { content: none !important; }
/* … and reuse ::after as the spectrum bar (the signature from the logo, already
   used under the topbar, on the CMS pages and in cc_seasonal). CSS can't inject
   the <i> elements the .cc-spectrum component uses, so here it's a gradient. */
/* Two things fight us here, and both are why the bar was a 96px-wide, 0px-tall
   gradient nobody could see:
     - the wrapper also carries bootstrap's `clearfix`, whose
       `.clearfix::after { display: table }` collapsed it, and
     - custom.css sets the height on its own `.tvcmsmain-title-wrapper::after`
       (the grey rule) at the SAME specificity but loads LATER, so it won.
   Hence !important on the box properties, and .clearfix in the selector to
   out-specify the theme's rule rather than merely tie with it. */
.tvcmsmain-title-wrapper.clearfix::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  /* flex:0 0 auto is the load-bearing one. custom.css puts `flex: 1 1 0%` on this
     pseudo so its grey rule could stretch; our wrapper is a COLUMN flex container,
     so flex-basis:0% applies to the main axis (the height) — and flex-basis beats
     `height` for a flex item. That is why a `height: 4px !important` bar kept
     computing to 0px no matter how hard we out-specified it. */
  flex: 0 0 auto !important;
  width: 96px !important; height: 4px !important;
  /* custom.css leaves `margin-left: 25px` on this pseudo (it used to space the
     grey rule away from the title, which sat BESIDE it). Under our stacked
     header that margin just shoves the bar 25px right of the title — the
     off-centre signature. */
  margin: 0 !important;
  border-radius: 3px;
  /* HARD stops, not a smooth gradient. The .cc-spectrum component (cc_seasonal,
     the CMS pages, under the topbar) is seven <i> bands with crisp edges; a
     default linear-gradient blends them and reads as a different mark. Each band
     is 1/7 = 14.2857%, ending where the next begins. */
  background: linear-gradient(90deg,
    var(--cc-accent-1)   0 14.2857%,
    var(--cc-accent-2) 14.2857% 28.5714%,
    var(--cc-accent-3) 28.5714% 42.8571%,
    var(--cc-accent-4)  42.8571% 57.1428%,
    var(--cc-accent-5)   57.1428% 71.4285%,
    var(--cc-accent-6)   71.4285% 85.7142%,
    var(--cc-accent-7) 85.7142% 100%) !important;
}

.tvcmsmain-title-wrapper .tvcms-main-title,
.tvcmsmain-title-wrapper .tvmain-title { margin: 0; padding: 0; }

/* The titles are typed in caps in the module config ("MEJORES VENDIDOS"), the
   same problem the nav had. Lowercase them and put the first letter back — the
   caps stay in the data, this is cosmetic and only on the homepage. */
/* The chain mirrors custom.css's own — `.tvcms-main-title .tvmain-title h2
   { color:#555 !important }` — plus the wrapper class, so we out-specify it at
   equal importance. A plain `.tvcmsmain-title-wrapper h2 { … !important }` loses. */
.tvcmsmain-title-wrapper .tvcms-main-title .tvmain-title h2 {
  margin: 0;
  font-size: 1.6rem !important; font-weight: 800 !important;
  color: var(--cc-ink) !important;
  letter-spacing: -.01em !important;
  text-transform: lowercase !important;
  line-height: 1.2;
}
.tvcmsmain-title-wrapper .tvcms-main-title .tvmain-title h2::first-letter { text-transform: uppercase; }

/* --------------------------------------------------- bestsellers section */
/* ground, not surface: in direction B the product tile IS white, so a white
   section makes the tiles disappear. The cards need the page to be the darker of
   the two — exactly how the category listing reads. */
/* The theme builds this block's width out of a full-bleed hack: the section is
   `margin: 0 -45px; padding: 0 144px`, and its .container is `width: 100% !important`
   — so "the container" is really just whatever those paddings leave over. There is
   nothing stable to borrow there, and no way for our own blocks to match it. Undo the
   hack and give the block the same honest centred width as cc_seasonal and
   cc_buttonsgrid: one shared token, so the three grids can't drift apart again. */
/* The theme ships this block the SAME full-bleed hack cc_buttonsgrid had grown —
   `width: calc(100vw); padding: 40px 10%`, plus `margin: 0 -45px; width: calc(100vw +
   90px)` between 1024 and 1661px. (That is almost certainly where the module copied
   it from.) It's a single-class rule that loads after ours, so matching its
   specificity only ties and we lose: hence the #content-wrapper prefix, which also
   beats the theme's own `#content-wrapper .container { padding: 0 }`. */
#content-wrapper .tvcmsbest-seller-product {
  width: auto;
  padding: 56px 0;
  margin-left: 0;
  margin-right: 0;
  background: var(--cc-ground);
}
#content-wrapper .tvcmsbest-seller-product .container {
  max-width: var(--cc-maxw-wide, 1560px);
  width: 100%;
  margin: 0 auto;
  padding: 0 22px;
}

/* The row is a dead carousel: owl "loads" it, hides its nav (display:none) and
   renders all four products at once — but the theme's CSS forces every .owl-item
   to 33.3% (373px at 1200) while owl's own inline style says 279px. The stage is
   a WRAPPING flex container, so the fourth card drops onto a row of its own,
   alone on the left, and the whole section reads as off-centre under a centred
   title. (Pre-existing: it does this with our CSS and JS blocked, i.e. on
   production too.) Since nothing here scrolls, make it an honest grid — the same
   4/2 grid cc_seasonal uses, so the two product blocks match. */
/* The selector chain is load-bearing. custom.css ships the EXACT same selector we
   reached for first — `.tvcmsbest-seller-product .owl-carousel .owl-stage
   { display: flex !important }` — so matching it only ties on specificity, and a
   tie goes to whoever loads LAST (the theme). `.owl-theme` is the extra class that
   breaks the tie. Importance beat specificity, specificity beat nothing: we needed
   to actually outrank it. */
/* …and the row's own -7.5px gutter compensation (owl needs it when its items carry
   padding; ours don't), which would otherwise leave this grid 15px wider than the
   seasonal one. THREE classes: the theme's rule is a two-class chain that loads after
   us, so matching its specificity only ties — and a tie goes to whoever comes last. */
.tvcmsbest-seller-product .tvbest-seller-product-offer-banner .tvall-product-offer-banner {
  margin-left: 0;
  margin-right: 0;
}

.tvcmsbest-seller-product .owl-carousel.owl-theme .owl-stage {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: auto !important;         /* owl writes a px width inline; ignore it */
  transform: none !important;      /* …and a translate3d when it thinks it slides */
}
.tvcmsbest-seller-product .owl-carousel.owl-theme .owl-item {
  /* The theme sizes the item for a FLEX row: `width: 25%; flex: 0 0 25%;
     max-width: 25%` (all !important). Inside a grid those percentages resolve
     against the COLUMN, not the row — 25% of a 391px column is 98px, so the cards
     shrank to slivers hugging the left of each column. Every one of the three has
     to be undone, not just width. */
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* The same 4 / 3 / 2 steps cc_seasonal uses. They have to be the same steps, not just
   the same width: with different breakpoints the two grids showed 4 cards and 3 cards
   at the same viewport, and the cards came out different sizes again. */
@media (max-width: 1199px) {
  .tvcmsbest-seller-product .owl-carousel.owl-theme .owl-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tvcmsbest-seller-product .owl-carousel.owl-theme .owl-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tvcmsbest-seller-product .owl-carousel.owl-theme .owl-stage { gap: 14px; }
}

/* "Todos los productos más vendidos" — the theme renders this link and then hides
   it (display:none), so the block just… ends. Bring it back as the same pill
   cc_seasonal's "Ver todo" uses, so both product blocks finish the same way and
   the section has an exit. */
.tvallproduct-link { display: flex !important; justify-content: center; margin-top: 30px; }
.tvallproduct-link a.all-product-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--cc-surface-deep); color: #fff;
  font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
/* Same story as the cart glyph: the theme's chevron (material-icons \e315,
   keyboard_arrow_right) is painted #222 by the theme, which on a navy pill is a
   dark smudge you can barely make out. Bind it to the pill's own colour. */
/* Same arrow as cc_seasonal's "Ver todo" CTA. The theme prints a Material CHEVRON
   here (ligature \e315, keyboard_arrow_right) while our button uses an SVG line-arrow
   (→) — two different marks doing the same job, side by side down the page. We can't
   inject an SVG from CSS, but the Material font carries the same shape: \e5c8
   (arrow_forward). Zero the element's own glyph and print that instead. */
.tvallproduct-link a.all-product-link i.material-icons {
  color: currentColor !important;
  /* inline-flex + a fixed box: with font-size 0 the element's line box collapses and
     the glyph printed by ::after hangs below the text's baseline. Centring it in a
     box of its own puts it on the same line as the label, like the SVG is. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 0;                      /* hides the theme's chevron ligature */
  line-height: 1;
}
.tvallproduct-link a.all-product-link i.material-icons::after {
  content: "\e5c8";
  font-size: 18px;
  line-height: 1;
}
.tvallproduct-link a.all-product-link:hover {
  background: var(--cc-brand); color: #fff; transform: translateY(-1px);
}
.tvallproduct-link a.all-product-link:focus-visible {
  outline: 2px solid var(--cc-brand-bright); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tvallproduct-link a.all-product-link { transition: none; }
  .tvallproduct-link a.all-product-link:hover { transform: none; }
}

/* ------------------------------------------------------ services strip */
/* The four trust claims that close the homepage (+20.000 disfraces / formas de pago /
   envíos rápidos / envíos gratuitos). Four centred stacks floating in white space,
   with a section heading reading "Our Services" — in English, on a Spanish shop.
   It becomes one banded strip: a single card, four columns divided by hairlines,
   icon beside the words rather than above them. It reads as a bar of facts, which is
   what it is, and it stops competing with the product sections for attention. */
/* A full-width band, not a card floating on the page.
   The bleed is PAINTED, not sized: `width: 100vw` (or the usual
   `margin-left: calc(50% - 50vw)`) counts the scrollbar, so on a page that scrolls it
   is ~15px wider than the content box and brings back the sideways scroll we just
   removed from cc_buttonsgrid. A giant ring shadow in the band's own colour, clipped
   to a horizontal-only overflow, reaches the screen edges while the element's real
   width — and therefore the page's — never changes. */
.tvservice-inner {
  margin: 0;
  padding: 34px 22px;
  background: var(--cc-surface);
  box-shadow: 0 0 0 100vmax var(--cc-surface);
  clip-path: inset(0 -100vmax);
  border-top: 1px solid var(--cc-hairline);
}
/* the claims themselves stay on the shop's centre line, like every other section */
.tvservice-inner .tvservices-all-block {
  max-width: var(--cc-maxw, 1300px);
  margin: 0 auto;
}
/* Kill the heading. It's the module's title field, it says "Our Services", and a
   trust bar doesn't want a section title above it — the claims speak for themselves.
   (If the title is ever wanted, it's CC/tvcmscustomerservices' config in the BO; this
   only hides it on the homepage.) */
.tvservice-inner > .tvcmsmain-title-wrapper { display: none !important; }

/* Every selector below is deliberately one class deeper than it looks like it needs
   to be. The theme's own rules for this block are all two-class chains
   (`.card-deck .card`, `.tvcmscustomer-services .tvservices-center`,
   `.tvservices-content-box .tvservices-title`…) and custom.css loads AFTER us, so
   matching their specificity just loses the tie. */
/* the band IS the surface now — the claims sit straight on it, no card inside a card */
.tvservice-inner .tv-all-service {
  display: grid !important;                /* the theme makes these table-cells */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tvservice-inner .tv-all-service .tvservices-center {
  display: flex; align-items: center;
  margin: 0; padding: 22px 20px;
  background: none; box-shadow: none;
  /* `.tvcmscustomer-services .tvservices-center { border: none }` is why the dividers
     never appeared — it out-ranked a two-class rule of ours. The hairline goes
     BETWEEN columns only; a trailing one on the last item would look like a stray
     line inside the card. */
  border: 0;
  border-left: 1px solid var(--cc-hairline);
}
.tvservice-inner .tv-all-service .tvservices-center:first-child { border-left: 0; }
.tvservice-inner .tvall-block-box-shadows,
.tvservice-inner .tvall-services-block { box-shadow: none; background: none; width: 100%; }

.tvservice-inner .tvservices-wrapper {
  display: flex; align-items: center; gap: 14px;
  text-align: left;
}
.tvservice-inner .tvservices-img-conut,
.tvservice-inner .tvservices-img { margin: 0; flex: 0 0 auto; }
/* the icons are flat navy PNGs shipped by the theme; they already match --cc-navy */
.tvservice-inner .tvservices-img img { width: 46px; height: 46px; object-fit: contain; }

.tvservice-inner .tvservices-content-box {
  flex: 1 1 auto; min-width: 0;
  text-align: left;
}

/* The theme line-clamps both lines to ONE with `display: -webkit-box; overflow:
   hidden`, which is why every claim rendered as "+20.000…" / "ENVÍOS…" — the actual
   selling points, cut off mid-word. Un-clamp them and let them wrap. */
.tvservice-inner .tvservices-content-box .tvservices-title,
.tvservice-inner .tvservices-content-box .tvservice-dec {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  white-space: normal;
  width: auto;
}
.tvservice-inner .tvservices-content-box .tvservices-title {
  margin: 0 0 4px;
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  color: var(--cc-ink);
  /* uppercase on purpose: the titles are typed in caps in the module's config, and
     one of them ("ENVÍOS RÁPiDOS") carries a stray lowercase i. Forcing caps
     normalises data we can't fix from a stylesheet. */
  text-transform: uppercase;
}
.tvservice-inner .tvservices-content-box .tvservice-dec {
  margin: 0;
  font-size: .88rem; font-weight: 400; line-height: 1.35;
  color: var(--cc-ink-soft);
  /* The descriptions are SHOUTED in the config too ("90% LLEGA EN MENOS DE 24H",
     "¡LO TENEMOS TODO!"), and the theme then Title-Cases them (`capitalize`), which
     is how you get "En Pedidos Superiores A 80€". Same trick as the nav and the
     section titles: lowercase, then put the first letter back. Cosmetic only — the
     caps stay in the data. */
  text-transform: lowercase;
}
.tvservice-inner .tvservices-content-box .tvservice-dec::first-letter { text-transform: uppercase; }

@media (max-width: 991px) {
  .tvservice-inner .tv-all-service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* on two columns the divider logic changes: items 1 and 3 start a row */
  .tvservice-inner .tv-all-service .tvservices-center:nth-child(odd) { border-left: 0; }
  .tvservice-inner .tv-all-service .tvservices-center:nth-child(n + 3) { border-top: 1px solid var(--cc-hairline); }
}
@media (max-width: 575px) {
  .tvservice-inner .tv-all-service { grid-template-columns: 1fr; }
  .tvservice-inner .tv-all-service .tvservices-center { border-left: 0; }
  .tvservice-inner .tv-all-service .tvservices-center + .tvservices-center { border-top: 1px solid var(--cc-hairline); }
}

@media (max-width: 767px) {
  .tvcmsbest-seller-product { padding: 40px 0; }
  .tvcmsmain-title-wrapper .tvcms-main-title .tvmain-title h2 { font-size: 1.3rem !important; }
  .tvservice-inner { padding-bottom: 40px; }
}