/*
Theme Name: Ski School — Divi Child
Theme URI: https://skischoolsierranevada.es/
Description: Child Theme de Divi 5 para Ski School Sierra Nevada.
Author: Ski School Sierra Nevada
Template: Divi
Version: 1.0.0
Text Domain: ski-school-child
*/

/*
 * Mantener este archivo liviano.
 * Priorizar variables y presets globales de Divi 5.
 * Añadir aquí solo CSS reutilizable que Divi no pueda resolver limpiamente.
 */

/* ==========================================================================
   Global Header — mobile nav dropdown (<=980px)
   Why: Divi's native mobile dropdown (.et_mobile_menu) is position:absolute
   relative to the Menu module itself (see Divi core
   includes/builder/.../css/header_shared.css), so its "width:100%" resolves
   to the width of the narrow nav column, not the header/viewport. No Divi
   module attr (checked divi-get-style-schema for divi/menu: menuMobile only
   exposes background + a single font color, no width/position) can change
   that offset parent without risking the desktop dropdown/hamburger
   behaviour. This is the minimal fix, scoped to .ski-mobile-nav (a class
   added natively via the Menu module's own CSS ID/Class field) so it never
   touches any other menu on the site.
   ========================================================================== */
@media (max-width: 980px) {

  /* Full-width sheet directly under the header, not the menu column */
  .ski-mobile-nav .et_mobile_menu {
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 73px);
    overflow-y: auto;
    margin: 0;
    padding: 20px 22px;
    background: #FFFFFF;
    border-top: none;
    box-shadow: 0 8px 24px rgba(15, 36, 48, 0.10);
  }

  .ski-mobile-nav .et_mobile_menu ul {
    margin: 0;
    padding: 0;
  }

  /* Nav rows */
  .ski-mobile-nav .et_mobile_menu li {
    border-bottom: 1px solid var(--gcid-1d626195-6183-42c5-aff5-91da7c5b3953);
  }

  .ski-mobile-nav .et_mobile_menu li a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0;
    border-bottom: none;
    color: var(--gcid-secondary-color);
    font-family: var(----et_global_body_font);
    font-size: 16px;
    font-weight: 600;
  }

  .ski-mobile-nav .et_mobile_menu li a:hover,
  .ski-mobile-nav .et_mobile_menu li a:focus-visible {
    color: var(--gcid-primary-color);
    background-color: transparent;
  }

  .ski-mobile-nav .et_mobile_menu li a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--gcid-primary-color);
  }

  /* Primary CTA row ("Reserva tu clase"): a menu item (class ski-mobile-cta)
     kept out of the desktop bar below, styled like Button / Primary. */
  .ski-mobile-nav .et_mobile_menu li.ski-mobile-cta {
    border-bottom: none;
    margin-top: 8px;
    padding-top: 8px;
  }

  .ski-mobile-nav .et_mobile_menu li.ski-mobile-cta a {
    justify-content: center;
    min-height: 46px;
    padding: 10px 24px !important;
    border-radius: 10px;
    background-color: var(--gcid-primary-color);
    color: #FFFFFF;
    font-weight: 600;
  }

  .ski-mobile-nav .et_mobile_menu li.ski-mobile-cta a:hover,
  .ski-mobile-nav .et_mobile_menu li.ski-mobile-cta a:focus-visible {
    color: #FFFFFF;
    opacity: 0.92;
    box-shadow: none;
  }

  /* Hamburger: minimum 44x44px tap target */
  .ski-mobile-nav .mobile_menu_bar {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Visual open/closed state, driven by Divi's own core toggle class
     (.mobile_nav.opened / .closed) — no JS added here */
  .ski-mobile-nav .mobile_nav.opened .mobile_menu_bar:before {
    color: var(--gcid-primary-color);
    transform: rotate(90deg);
    transition: transform 0.2s ease, color 0.2s ease;
  }
}

/* The CTA menu item above exists only to give the mobile sheet a full-width
   primary action; it must never appear in the desktop nav bar. */
@media (min-width: 981px) {
  .ski-mobile-nav #menu-primary-navigation .ski-mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   Global Header — hide standalone "Reservar" CTA column on mobile (<=980px)
   Why: the CTA column/button's native Divi responsive "disabledOn"/display
   overrides for the tablet and phone breakpoints are set correctly in the
   Theme Builder header (verified via divi-get-content) but do not compile
   into this header's front-end CSS — confirmed by inspecting the live
   rendered <style> output, where every other responsive override on this
   same row (logo/nav column widths, nav justify-content) DOES compile, but
   no responsive rule for .et_pb_column_2_tb_header / .et_pb_button_0_tb_header
   is emitted at all. Native toggles were reset to "off" in the Visual
   Builder so they don't show a misleading state; this rule is what actually
   hides it. Scoped to our own class (added via the column's CSS ID/Class
   field), not a Divi-generated selector.
   ========================================================================== */
@media (max-width: 980px) {
  .ski-header-cta-col {
    display: none;
  }
}

/* ==========================================================================
   Home Hero — content column width (#ski-hero)
   Why: Divi core ships a fixed, non-responsive rule for every Fullwidth
   Header module (theme style.css: .et_pb_fullwidth_header_container{
   width:80%;max-width:1080px;margin:auto}) with no @media scoping and no
   exposed Divi 5 attr to change it (checked divi-get-module-schema and
   divi-get-style-schema for divi/fullwidth-header: no width/content-column
   field exists; module-level css.freeForm was also tried and confirmed to
   never compile into this module's generated CSS in this Divi 5 alpha
   build). That single rule is what was squeezing the Hero text column on
   every breakpoint, including collapsing the mobile H1 down to near-vertical
   wrapping. Scoped to #ski-hero (native CSS ID on the Hero module only) so
   no other Fullwidth Header module or theme default is affected.
   ========================================================================== */
#ski-hero .et_pb_fullwidth_header_container {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 981px) {
  /* Desktop: left-aligned text column, ~48% of the 1240px content system */
  #ski-hero .et_pb_fullwidth_header_container {
    max-width: 600px;
  }
}

/* ==========================================================================
   Home Services — card corner radius (.ski-service-card)
   Why: the "Card / Service" global preset (id ca005a2e-...) sets
   module.decoration.border.desktop.value.radius = 16px (Design System
   §6: cards 12-16px) and it saves correctly to post_content, but it never
   compiles into this Divi 5 alpha build's generated CSS for divi/blurb —
   confirmed by testing the same radius value as a per-module local override
   (also silently dropped) and by testing it alongside explicit border
   style/width/color (those DID compile, radius still did not). Every other
   field in the same preset (background, padding, box-shadow, transform,
   transition) compiles correctly, so this is isolated to the border-radius
   field on this module type in this build, not a caching or preset-wiring
   issue. Scoped to a stable, hand-assigned class (not the auto-generated
   preset class name, per project rule: avoid generated-class-name
   dependencies) applied only to the 4 Home Services cards, so no other
   module or section is affected.
   ========================================================================== */
.ski-service-card {
  border-radius: 16px;
}

/* ==========================================================================
   Home Why Ski School — real photo corner radius + crop (.ski-rounded-photo)
   Why: same Divi 5 alpha border-radius compiler bug as .ski-service-card
   above (module.decoration.border...radius does not compile for this build),
   confirmed again here on the Why Ski School column/image. In addition,
   object-fit/object-position set via the divi/image module's Sizing group
   also do not compile into the rendered <img> (computed style returns
   object-fit: fill even though the module attrs specify cover/center) —
   the box and source photo currently share the same 4:5 aspect ratio at
   every breakpoint so no distortion is visible today, but that is a
   coincidence of this particular photo, not a guarantee, so it is fixed
   properly rather than left to chance. Scoped to a stable hand-assigned
   class (not a Divi-generated selector) applied only to this column.
   ========================================================================== */
.ski-rounded-photo,
.ski-rounded-photo img {
  border-radius: 16px;
}

/* The photo fills the whole column. The column is a flex item stretched to
   the row height (which the text column drives), and on desktop the image
   module is taken out of flow so its own intrinsic height never pushes the
   row taller or leaves an empty strip below the photo. On tablet/phone the
   stacked column keeps the module's own compiled height (280px) and the
   image simply fills it. object-fit/object-position are set here because
   the divi/image Fit group does not compile in this Divi 5 alpha build. */
.ski-rounded-photo {
  position: relative;
}

@media (min-width: 981px) {
  .ski-rounded-photo .et_pb_image {
    position: absolute;
    inset: 0;
    height: auto !important;
    margin: 0;
  }
}

@media (max-width: 980px) {
  .ski-rounded-photo .et_pb_image {
    height: 280px !important;
  }
}

.ski-rounded-photo .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100%;
}

.ski-rounded-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   Motion system — GSAP + ScrollTrigger (+ SplitText), CSS half
   Why: the entrance/scroll animation logic itself lives in
   js/gsap-motion.js (GSAP timelines + ScrollTrigger), not here. This file
   only carries the CSS that pure GSAP tweening cannot express on its own:
   pointer-only hover polish, the arrow micro-interaction, and the one true
   CSS parallax (background-attachment), which is cheaper and smoother than
   animating background-position from JS.

   Nothing in this file ever sets an element to opacity:0 by default —
   every hidden "from" state is set by GSAP itself, at animation time, only
   once GSAP has actually loaded. So a blocked/failed script degrades to
   fully visible, static content, never stuck-invisible content. This is a
   deliberate change from the previous IntersectionObserver-era CSS (which
   pre-hid elements via classes and needed a forced-visible fallback rule);
   GSAP's own .from()/.fromTo() calls make that fallback unnecessary.
   ========================================================================== */

/* Pointer-only card lift: gated by (hover: hover) so touch devices never
   get a stuck hover state, and by .ski-motion-ready (set on load by
   gsap-motion.js, unconditionally — this is a hover affordance, not a
   scroll reveal, so it doesn't depend on GSAP or reduced-motion) so there
   is no flash of the lifted state before the script runs. */
/* Pointer-only card polish, split in two layers so the two concerns are
   independent: ELEVATION (a shadow, no movement) is feedback and stays
   available to reduced-motion users; the LIFT (a transform) is decoration
   and is additionally gated on prefers-reduced-motion. Previously the lift
   was gated only on pointer capability, so a reduced-motion visitor on a
   mouse still got a moving card on hover. */
@media (hover: hover) and (pointer: fine) {
  .ski-card-interactive.ski-motion-ready {
    transition: box-shadow 250ms ease;
  }

  .ski-card-interactive.ski-motion-ready:hover,
  .ski-card-interactive.ski-motion-ready:focus-within {
    box-shadow: 0 12px 28px rgba(15, 36, 48, 0.14);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ski-card-interactive.ski-motion-ready {
    transition: transform 250ms ease, box-shadow 250ms ease;
  }

  .ski-card-interactive.ski-motion-ready:hover,
  .ski-card-interactive.ski-motion-ready:focus-within {
    transform: translateY(-4px);
  }
}

/* Keyboard reaches these cards on touch devices too (external keyboard,
   switch control), where the pointer-gated rules above never apply, so
   focus always gets its own non-moving feedback. */
.ski-card-interactive:focus-within {
  box-shadow: 0 12px 28px rgba(15, 36, 48, 0.14);
}

/* Arrow micro-interaction: gsap-motion.js wraps a trailing "→" in
   .ski-arrow on a short, explicit list of links (service-card CTAs, the
   hero secondary button, #reservar/#contacto text links). Motion-reduced
   users still get the color/underline feedback from the browser's default
   link styles; only the extra transform is skipped. */
/* display:inline-block is layout, not motion, so it applies always — the
   arrow must sit identically whether or not motion is allowed. */
.ski-arrow {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .ski-arrow {
    transition: transform 200ms ease;
  }

  /* Keyboard focus nudges the arrow on any device. */
  a:focus-visible .ski-arrow {
    transform: translateX(4px);
  }
}

/* Hover nudge only where hover really exists: on touch, :hover sticks after
   a tap, which would leave the arrow permanently displaced. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a:hover .ski-arrow {
    transform: translateX(4px);
  }
}

/* Final CTA — desktop-only background parallax (§ Final CTA / footer brief).
   Why background-attachment instead of a JS scroll tween: it is handled
   entirely by the compositor, so it never touches layout or paints on the
   main thread — cheaper and smoother than animating background-position,
   and it needs zero JS. Disabled below 981px: background-attachment:fixed
   is a known source of jank and viewport-height bugs on mobile Safari/
   Chrome, exactly the "elimina parallax pesado" mobile rule. The section's
   own decorative SVG accent still gets a light GSAP transform-parallax
   (see .ski-parallax-accent in gsap-motion.js), which is cheap on mobile
   too, so the section still has depth on small screens.
   ========================================================================== */
/* (pointer: fine) as well as the 981px floor: a large touch screen (iPad in
   landscape is >=981px) is exactly where background-attachment: fixed is
   broken/janky, and it is also where a fixed background costs the most
   battery for the least benefit. Same gate as .ski-parallax-accent in
   gsap-motion.js, so both parallaxes switch on and off together. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ski-parallax-bg {
    background-attachment: fixed;
  }
}

/* Reduced motion / no-JS: .ski-heading-reveal and .ski-number-reveal are
   only ever animated from a GSAP-set inline state, so there is nothing to
   force-visible here — this rule exists purely so a heading split into
   per-line/char <div>/<span> wrappers by SplitText never introduces its
   own layout shift once the split is complete and GSAP has restored the
   natural values. */
.ski-hero-line {
  will-change: transform, opacity;
}

/* ==========================================================================
   Home Services — rebuilt card structure (image module + content group)
   Why: replaced the divi/blurb-based cards (calc()-based negative-margin
   image bleed technique, which left white side gutters on phone) with a
   plain divi/image + divi/group pair as direct column children. The column
   is the card itself: .ski-service-card already carries border-radius (see
   block above — Divi 5 alpha does not compile border-radius for this
   build); it needs the same CSS-backstop treatment for overflow (to clip
   the image's square corners into the rounded shape) and the image needs
   object-fit/object-position (same compiler gap already documented above
   for .ski-rounded-photo). Scoped to the card's own hand-assigned class.
   ========================================================================== */
.ski-service-card {
  overflow: hidden;
}

.ski-service-card .et_pb_image_wrap {
  width: 100% !important;
}

.ski-service-card img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================================================
   Sierra Nevada Utility — BG_Shapes_1.png as a real full-section background
   (module.decoration.background, desktop only). Previously this used a
   separate absolutely-positioned <img> module as a workaround for a Divi 5
   alpha bug where a section-level background-image with an empty phone
   url did not always clear reliably, leaving the image visible on mobile
   with nothing else in its row. That workaround rendered the shape as a
   small corner image instead of an actual section background, which is
   incorrect. Now using the native background field (the correct approach)
   with this CSS backstop guaranteeing it never leaks below 980px even if
   the same alpha clearing bug recurs.
   ========================================================================== */
@media (max-width: 980px) {
  #ski-sn-utility {
    background-image: none !important;
  }
}

/* ==========================================================================
   FAQ section — decorative BG_Shapes accent (.ski-bg-shape-faq)
   Divi 5 alpha bug: section/column-level background-image with a phone
   breakpoint image.url:"" clear is unreliable and can leave the desktop
   image rendering uncontained on mobile. Fix: real desktop-only module
   (module.decoration.disabledOn) + CSS display:none backstop below 981px.
   ========================================================================== */
.ski-bg-shape-faq {
  display: none;
}

@media (min-width: 981px) {
  .ski-bg-shape-faq {
    display: block;
    position: absolute;
    bottom: -20px;
    left: -20px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
  }
}

/* ==========================================================================
   Booking Steps — step badges + connecting progression line
   Numbers become circular step badges; a dashed line ties them together on
   desktop so the 3 steps read as one sequence rather than 3 loose cards.
   Divi has no native "connector between flex items" feature, hence this
   small explicit-class CSS addition (no nth-child, no generated selectors).
   ========================================================================== */
.ski-booking-steps-row {
  position: relative;
}

.ski-step-badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 1.5px solid var(--gcid-primary-color);
  background: var(--gcid-613f9bdc-b4a2-4b76-8cef-9df78fc7340a);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (min-width: 981px) {
  .ski-booking-steps-row::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 16.6%;
    right: 16.6%;
    height: 2px;
    z-index: 1;
    background-image: repeating-linear-gradient(
      to right,
      var(--gcid-1d626195-6183-42c5-aff5-91da7c5b3953) 0,
      var(--gcid-1d626195-6183-42c5-aff5-91da7c5b3953) 8px,
      transparent 8px,
      transparent 16px
    );
  }
}

/* ==========================================================================
   Gradient-overlay compiler backstop (Divi 5 alpha bug)
   Confirmed via compiled CSS inspection: module.decoration.background.gradient
   on divi/section (image + gradient combined, overlaysImage:true) is stored
   correctly in the block attrs but never emitted into the generated CSS —
   only background-image/size/position/repeat compile. divi/section has no
   built-in flat "overlay" sub-module (unlike divi/fullwidth-header, whose
   separate overlay.decoration.background DOES compile and is used for the
   Hero). Fix: explicit-ID pseudo-element overlay for the two sections that
   depend on a gradient for text legibility over a photo.
   ========================================================================== */
#ski-real-experience {
  position: relative;
}

#ski-real-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#ski-real-experience::before {
  background: linear-gradient(
    180deg,
    rgba(15, 36, 48, 0.2) 0%,
    rgba(15, 36, 48, 0.45) 45%,
    rgba(15, 36, 48, 0.92) 100%
  );
}
@media (max-width: 980px) {
  #ski-real-experience::before {
    background: linear-gradient(
      180deg,
      rgba(15, 36, 48, 0.35) 0%,
      rgba(15, 36, 48, 0.55) 35%,
      rgba(15, 36, 48, 0.94) 100%
    );
  }}



/* ==========================================================================
   Hero row: remove Divi's default row 27px vertical padding when the row is
   the immediate wrapper of a fullwidth-header (the Hero pattern).

   Why: Divi 5 emits `.et_pb_row { padding: 27px 0 }` as its default (verified
   in the compiled stylesheet). fullwidth-header already carries its own
   vertical padding for content placement (its own 96px top padding is what
   spaces the H1 below the site header), so the wrapping row's 27px is
   redundant AND visible: the section background above/below that row shows
   through as a thin white strip between the site header and the hero photo
   (and again below the hero above the trust strip). Confirmed for every hero
   on this site: Home, Clases, Clases de esqui, Snowboard, Full Day, Medio
   Dia, Alquiler, Experiencias, Sierra Nevada, Contacto — all use the same
   fullwidth-header pattern, so one :has() selector fixes them all.

   Also zero the section's own background: Divi's default fullwidth section
   background paints white on top of the fullwidth-header photo/gradient at
   the exact same row edges, so removing the padding alone leaves a 1px
   subpixel seam on some breakpoints. Both are scoped strictly to rows that
   actually wrap a fullwidth-header, so no other section is affected.
   ========================================================================== */
.et_pb_row:has(> .et_pb_column > .et_pb_fullwidth_header) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_fullwidth_header) {
  background-color: transparent !important;
}

/* Hero CTA buttons: a resilient CSS-driven entrance instead of a GSAP/rAF
   timeline (see gsap-motion.js for the full history). Two rounds of
   JS-side backstops there still left these buttons stuck invisible for
   real visitors — gsap.from() writes its hidden state synchronously and
   only recovers once GSAP's own rAF ticker completes the tween, and that
   ticker can stall for reasons outside our control. This has no such
   failure mode: the base rule below is the buttons' PERMANENT default
   (fully visible, no transform) regardless of JS, and .ski-anim-ready
   (added immediately by JS, not gated on anything completing) layers a
   short @keyframes fade+rise on top, driven by the browser's own
   compositor rather than a JS timer — it cannot get stuck mid-animation.
   If gsap-motion.js never loads or throws, the buttons are simply
   visible with no animation, never hidden. */
#ski-hero .et_pb_header_button_wrapper > * {
  opacity: 1;
  transform: none;
}

#ski-hero.ski-anim-ready .et_pb_header_button_wrapper > * {
  animation: ski-hero-btn-in 0.5s ease-out both;
  animation-delay: 0.4s;
}

#ski-hero.ski-anim-ready .et_pb_header_button_wrapper > *:nth-child(2) {
  animation-delay: 0.48s;
}

@keyframes ski-hero-btn-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ski-hero.ski-anim-ready .et_pb_header_button_wrapper > * {
    animation: none;
  }
}

/* Buttons: one consistent design-system treatment across every CTA on the
   page (Hero, Featured Experience, Real Experience, Final CTA). Divi 5
   alpha's own border/radius attrs sometimes fail to compile depending on
   module type, so this backstops them; it also adds the "subtle hover"
   the design system calls for, which has no native Divi 5 attr. */
#ski-hero .et_pb_button_one,
#ski-hero .et_pb_button_two,
.ski-btn,
.et_pb_promo_button {
  border-radius: 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Solid-fill primary buttons carry a TRANSPARENT border of the same width as
   the outline variant, so a primary and a secondary side by side are exactly
   the same height (previously the filled one was 4px shorter). */
#ski-hero .et_pb_button_one,
.ski-btn-primary,
.et_pb_promo_button {
  border: 2px solid transparent !important;
}

/* Outline/secondary buttons: consistent, breathable padding — some
   instances compiled with only ~4px of horizontal padding. */
/* Button system - ONE geometry for every equivalent CTA: hero, cards, duration,
   final CTA, header 'Reservar', product hero/support (Divi button presets, whose
   radius/padding do not compile in this Divi 5 build) and the product form
   buttons. 46px, 10px radius, 24px side padding, 15px/700. Primary = filled,
   Secondary (.ski-btn-outline) = same box with a 2px outline. Not full width by
   default; the product form makes them full width in its own context. */
.ski-btn,
.ski-btn-primary,
.ski-btn-outline,
.et_pb_promo_button,
#page-container [class*="preset--module--divi-button--b5b32feb"]:not([class*="_wrapper"]),
#page-container [class*="preset--module--divi-button--9c2e6c7a"]:not([class*="_wrapper"]),
#page-container .ski-product-config form.cart .single_add_to_cart_button.button {
  min-height: 46px;
  padding: 10px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
}

#page-container [class*="preset--module--divi-button--b5b32feb"]:not([class*="_wrapper"]) {
  border: 2px solid transparent !important;
}

#page-container [class*="preset--module--divi-button--9c2e6c7a"]:not([class*="_wrapper"]),
.ski-btn-outline {
  border-width: 2px !important;
  border-style: solid !important;
}

/* Header: one centre axis for logo, links, cart and the Reservar button.
   Divi's menu pads each link 29px at the bottom to fill a classic header bar,
   which is what left the links floating above the button. */
.et_pb_row_0_tb_header { align-items: center !important; }
.et_pb_row_0_tb_header > .et_pb_column { align-self: center; }
.et_pb_menu_0_tb_header .et-menu-nav > ul.et-menu { display: flex; align-items: center; }
.et_pb_menu_0_tb_header .et-menu > li { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.et_pb_menu_0_tb_header .et-menu > li > a { display: flex; align-items: center; min-height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2; }
/* Header dropdown arrow: inline unit with the label (Divi positions it absolute, top:0/right:0). Desktop only. */
@media (min-width: 981px) {
 .et_pb_menu_0_tb_header .et-menu > li.menu-item-has-children > a:first-child { display: inline-flex; align-items: center; gap: 6px; padding-right: 0 !important; }
 .et_pb_menu_0_tb_header .et-menu > li.menu-item-has-children > a:first-child::after { position: static; top: auto; right: auto; display: inline-block; margin: 0; font-size: 15px; line-height: 1; transform: translateY(1px); }
}


/* Footer: one grid. Columns and headings top-aligned; the decorative mark moves
   below the copy so it no longer pushes 'Siguenos' down. */
.et_pb_row_0_tb_footer { align-items: flex-start !important; }
.et_pb_row_1_tb_footer { align-items: center !important; }
.et_pb_row_0_tb_footer > .et_pb_column.et-last-child { display: flex; flex-direction: column; }
.et_pb_svg_0_tb_footer { order: 2; margin-top: 12px; }
[class*="_tb_footer"] .et_pb_text_inner h4 { margin: 0 0 14px; padding: 0; line-height: 1.2; }
[class*="_tb_footer"] .et_pb_text_inner ul { margin: 0; padding: 0; list-style: none; }
[class*="_tb_footer"] .et_pb_text_inner li { margin: 0 0 8px; padding: 0; line-height: 1.5; }
[class*="_tb_footer"] .et_pb_text_inner p { margin: 0; line-height: 1.5; }

/* Button hover was previously unguarded, so on touch the :hover state stuck
   after a tap and left the button visibly lifted until something else was
   tapped. Movement is now gated on a real pointer AND on reduced-motion;
   the elevation shadow is gated on a real pointer only. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #ski-hero .et_pb_button_one:hover,
  #ski-hero .et_pb_button_two:hover,
  .ski-btn:hover,
  .et_pb_promo_button:hover {
    transform: translateY(-1px);
  }
}

@media (hover: hover) and (pointer: fine) {
  #ski-hero .et_pb_button_one:hover,
  .ski-btn-primary:hover,
  .et_pb_promo_button:hover {
    box-shadow: 0 10px 24px rgba(15, 36, 48, 0.18);
  }

  .ski-btn-outline:hover {
    box-shadow: 0 8px 20px rgba(15, 36, 48, 0.12);
  }
}

/* Keyboard focus: a visible, non-moving ring on every device and in
   reduced-motion. Transparent outline kept for Windows forced-colors mode,
   where box-shadow is dropped. */
#ski-hero .et_pb_button_one:focus-visible,
#ski-hero .et_pb_button_two:focus-visible,
.ski-btn:focus-visible,
.et_pb_promo_button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(38, 173, 226, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  #ski-hero .et_pb_button_one,
  #ski-hero .et_pb_button_two,
  .ski-btn,
  .et_pb_promo_button {
    transition: none;
  }
  #ski-hero .et_pb_button_one:hover,
  #ski-hero .et_pb_button_two:hover,
  .ski-btn:hover,
  .et_pb_promo_button:hover {
    transform: none;
  }
}


/* ==========================================================================
   Clases — "Elige la duración de tu clase" (#tarifas) card CTAs + icons
   The three duration cards declare their icon size/colour and their CTA
   background/text/min-height in their own module attrs, but this Divi 5
   build compiles none of those three fields for these module types. The
   visible result was a 16px near-black glyph instead of a 24px brand-blue
   one, and a "recommended" CTA that rendered as a transparent 46px link
   next to two 66px outline buttons (those get their padding from the
   global .ski-btn-outline rule further up, the primary one had nothing).
   These rules only apply the values the modules already ask for, and are
   scoped to this section ID so no other icon, card or button changes.
   ========================================================================== */
#tarifas .et_pb_icon .et-pb-icon {
  font-size: var(--ski-icon-glyph-md, 26px);
  color: var(--gcid-primary-color);
}

/* The card is a flex column, so pushing the CTA wrapper down aligns all
   three CTAs on one baseline whatever the description wraps to. */
#tarifas .et_pb_button_module_wrapper {
  margin-top: auto;
}

#tarifas .ski-btn-primary {
  background-color: var(--gcid-primary-color) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Reusable photo cover: divi/image + forceFullwidth + explicit module height.
   Why: Divi 5 alpha does not compile the divi/image module's decoration.fit
   (object-fit/object-position) field — confirmed by inspecting the compiled
   stylesheet on the Niños/Familias image. When the module has both a fixed
   height and forceFullwidth:on, the browser renders the img at that box's
   full size with the default object-fit:fill, which visibly stretches the
   photo. Applying this class fills the module's compiled height with the
   image cropped from the centre, without touching the module height or
   forcing absolute positioning (the sibling .ski-rounded-photo pattern
   does that, but it needs a column-height wrapper; this class is standalone).
   ========================================================================== */
.ski-photo-cover .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100%;
}

.ski-photo-cover img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* ================================================================
   Trust Strip — global reusable component
   Applies to any Divi 5 divi/row carrying class="ski-trust-strip".
   Reference: Home + Clases (Todos los niveles / Clases personalizadas / Sierra Nevada)
   Desktop >=981px: icon LEFT of text, vertically centered, subtle vertical dividers.
   Mobile / tablet-narrow <=980px: 3 columns preserved in one row, icon ABOVE text, both centered.
   No page-id rules, no nth-child, no Divi-generated selectors — purely semantic.
   ================================================================ */

/* Common: normalize the row + column baselines */
.ski-trust-strip .et_pb_column {
  box-sizing: border-box;
}
.ski-trust-strip .et_pb_blurb .et_pb_module_header {
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0;
}

/* ---------- DESKTOP >=981px : horizontal (icon | text) ---------- */
@media (min-width: 981px) {
  .ski-trust-strip .et_pb_blurb .et_pb_blurb_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
    max-width: 100%;
  }
  .ski-trust-strip .et_pb_blurb .et_pb_main_blurb_image {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    line-height: 0;
  }
  .ski-trust-strip .et_pb_blurb .et_pb_blurb_container {
    padding: 0;
    text-align: left;
  }
}

/* ---------- MOBILE / TABLET-NARROW <=980px : 3 cols preserved, icon over text ---------- */
@media (max-width: 980px) {
  /* Force the row to keep a single line of 3 columns even when Divi collapses to 100%-width columns */
  .ski-trust-strip.et_pb_row,
  .ski-trust-strip .et_pb_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: clamp(6px, 2vw, 16px);
    justify-content: space-between;
    max-width: 100%;
  }
  .ski-trust-strip .et_pb_column {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 33.333% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Restore icon-over-text layout inside each column */
  .ski-trust-strip .et_pb_blurb .et_pb_blurb_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
    padding: 0;
  }
  .ski-trust-strip .et_pb_blurb .et_pb_main_blurb_image {
    margin: 0 auto;
    padding: 0;
    line-height: 0;
  }
  /* Constrain icon size so it never balloons at wider phones or shrinks to invisibility on 390 */
  .ski-trust-strip .et_pb_blurb .et_pb_main_blurb_image img,
  .ski-trust-strip .et_pb_blurb .et_pb_image_wrap img {
    width: var(--ski-icon-sm);
    height: var(--ski-icon-sm);
    max-width: 100%;
    display: block;
  }
  .ski-trust-strip .et_pb_blurb .et_pb_blurb_container {
    padding: 0;
    text-align: center;
    width: 100%;
  }
  .ski-trust-strip .et_pb_blurb .et_pb_module_header {
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.25;
    hyphens: auto;
    word-break: break-word;
  }
  /* Dividers between columns are visually noisy at this width — suppress the border-left added by presets */
  .ski-trust-strip .et_pb_column {
    border-left: 0 !important;
  }
}

/* Trust Strip — shared spacing + centring (2026-09-26)
   One vertical rhythm for every standard strip (section #trust-strip >
   row .ski-trust-strip): 12px section padding (Spacing / 12, what every
   instance already set) + the Family Ski row padding, so all instances
   share the 1672 reference height. Replaces the per-page row padding that
   only 338 / 497 / 1672 had. Borders, type and icon size are untouched.
   Scoped to #trust-strip: the Sierra Nevada info strip (635) reuses the
   class inside a standard section with descriptions and is excluded. */
#trust-strip.et_pb_section {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#trust-strip .ski-trust-strip.et_pb_row {
  padding: clamp(22px, 2.2vw, 30px) 0 !important;
}
/* Side gutter = Home (1552) variant for all 7 instances: section has no
   side padding on desktop (Spacing vars on tablet / phone, as Home sets
   them) and the row is the 1240px content row, centred. Neutralises the
   max(48px, ...) section gutter + full-width row authored on 390/444/498. */
#trust-strip.et_pb_section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 980px) {
  #trust-strip.et_pb_section {
    padding-left: var(--gvid-200e76d5-d4f1-4de1-8a39-e7cb766078bd) !important;
    padding-right: var(--gvid-200e76d5-d4f1-4de1-8a39-e7cb766078bd) !important;
  }
}
@media (max-width: 767px) {
  #trust-strip.et_pb_section {
    padding-left: var(--gvid-990eb3c1-38dc-4da3-a21f-db4da02cd4b5) !important;
    padding-right: var(--gvid-990eb3c1-38dc-4da3-a21f-db4da02cd4b5) !important;
  }
}
#trust-strip .ski-trust-strip.et_pb_row {
  width: 100% !important;
  max-width: var(--gvid-e73624ce-c52f-4cc3-b365-3eb5309a1fb8) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Each item centred in its own equal third. */
/* Divided columns (2 and 3) carry a Divi padding-left next to their 1px
   border-left divider, which pushed their centred item right of the column
   centre. The divider stays exactly where it is (the column's left edge);
   only the asymmetric padding goes, so every item centres in its third.
   <=980px already zeroes column padding in the component block above. */
@media (min-width: 981px) {
  #trust-strip .ski-trust-strip .et_pb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Labels break only at spaces (no "PERSONALI-ZADAS" at 390). */
#trust-strip .ski-trust-strip .et_pb_blurb .et_pb_module_header {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* <=767px: the full column width goes to the item (columns are already 0;
   the 8px side padding came from the Trust Item preset on the blurb), and
   the tracked-uppercase label variant (338 / 497 / 1672, 0.14em) is
   tightened just enough for "PERSONALIZADAS" to fit with >=4px to spare.
   Size, weight, case and colour unchanged; desktop untouched. */
@media (max-width: 767px) {
  #trust-strip .ski-trust-strip .et_pb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #trust-strip .ski-trust-strip .et_pb_blurb {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body:is(.page-id-338, .page-id-497, .page-id-1672) #trust-strip .ski-trust-strip .et_pb_blurb .et_pb_module_header {
    letter-spacing: 0.008em !important;
  }
}
#trust-strip .ski-trust-strip .et_pb_blurb {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
#trust-strip .ski-trust-strip .et_pb_blurb .et_pb_blurb_content {
  justify-content: center;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 981px) {
  #trust-strip .ski-trust-strip .et_pb_blurb .et_pb_blurb_content {
    gap: 12px;
  }
}
@media (max-width: 980px) {
  #trust-strip .ski-trust-strip .et_pb_blurb .et_pb_blurb_content,
  #trust-strip .ski-trust-strip .et_pb_blurb .et_pb_blurb_container {
    text-align: center !important;
  }
}

/* ==========================================================================
   GLOBAL VISUAL SYSTEM PASS — 2026-09-07
   Everything below is site-wide and semantic (own classes only, no
   Divi-generated selectors, no page-id rules, no nth-child), so internal
   pages inherit the Home visual language rather than restating it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — class alias for the existing #ski-hero rules
   Why: every hero on the site is a divi/fullwidth-header carrying the CSS ID
   "ski-hero", and the container-width fix further up in this file (Divi core
   ships an unscoped .et_pb_fullwidth_header_container{width:80%;max-width:
   1080px} with no Divi 5 attr to override it) is keyed to that ID. An ID is a
   single point of failure: a hero that loses it silently drops out of the
   whole hero system, which is exactly what had happened on Clases de esquí.
   Accepting ".ski-hero" as an equal selector means a hero can opt in via the
   Class field too, which is what a Divi admin reaches for first.
   -------------------------------------------------------------------------- */
.ski-hero .et_pb_fullwidth_header_container {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 981px) {
  .ski-hero .et_pb_fullwidth_header_container {
    max-width: 600px;
  }
}

.ski-hero .et_pb_header_button_wrapper > * {
  opacity: 1;
  transform: none;
}

.ski-hero.ski-anim-ready .et_pb_header_button_wrapper > * {
  animation: ski-hero-btn-in 0.5s ease-out both;
  animation-delay: 0.4s;
}

.ski-hero.ski-anim-ready .et_pb_header_button_wrapper > *:nth-child(2) {
  animation-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
  .ski-hero.ski-anim-ready .et_pb_header_button_wrapper > * {
    animation: none;
  }
}

.ski-hero .et_pb_button_one,
.ski-hero .et_pb_button_two {
  border-radius: 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ski-hero .et_pb_button_one {
  border-width: 0 !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ski-hero .et_pb_button_one:hover,
  .ski-hero .et_pb_button_two:hover {
    transform: translateY(-1px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .ski-hero .et_pb_button_one:hover {
    box-shadow: 0 10px 24px rgba(15, 36, 48, 0.18);
  }
}

.ski-hero .et_pb_button_one:focus-visible,
.ski-hero .et_pb_button_two:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(38, 173, 226, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .ski-hero .et_pb_button_one,
  .ski-hero .et_pb_button_two {
    transition: none;
  }
  .ski-hero .et_pb_button_one:hover,
  .ski-hero .et_pb_button_two:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   2. Icon / Value Strip — global reusable component (.ski-icon-strip)
   Sibling of .ski-trust-strip, for 3-item strips whose icon sits ABOVE the
   text at every breakpoint (value props), where the trust strip puts the icon
   to the LEFT of the text on desktop (reassurance line). Both keep 3 columns
   on one row down to 390px, per the project responsive rule: a 3-item icon
   strip must never restack to 1 column on mobile.
   Applied to any divi/row carrying class="ski-icon-strip". No page-id rules,
   no nth-child, no Divi-generated selectors.
   -------------------------------------------------------------------------- */
.ski-icon-strip .et_pb_column {
  box-sizing: border-box;
}

.ski-icon-strip .et_pb_blurb .et_pb_blurb_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  max-width: 100%;
  padding: 0;
}

.ski-icon-strip .et_pb_blurb .et_pb_main_blurb_image {
  margin: 0 auto;
  padding: 0;
  flex: 0 0 auto;
  line-height: 0;
}

.ski-icon-strip .et_pb_blurb .et_pb_blurb_container {
  padding: 0;
  text-align: center;
  width: 100%;
}

.ski-icon-strip .et_pb_blurb .et_pb_module_header {
  margin: 0 0 6px;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Keep the three items on one row at every width, including 390. */
@media (max-width: 980px) {
  .ski-icon-strip.et_pb_row,
  .ski-icon-strip .et_pb_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: clamp(6px, 2vw, 16px);
    justify-content: space-between;
    max-width: 100%;
  }

  .ski-icon-strip .et_pb_column {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 33.333% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  .ski-icon-strip .et_pb_blurb .et_pb_main_blurb_image img,
  .ski-icon-strip .et_pb_blurb .et_pb_image_wrap img {
    width: var(--ski-icon-sm);
    height: var(--ski-icon-sm);
    max-width: 100%;
    display: block;
  }

  .ski-icon-strip .et_pb_blurb .et_pb_module_header {
    font-size: clamp(12px, 3vw, 14px);
    hyphens: auto;
    word-break: break-word;
  }

  /* Supporting copy under the label is the first thing to go at 390 — the
     label alone carries the meaning and three columns of body text at ~110px
     wide is unreadable. Kept from phoneWide up. */
  .ski-icon-strip .et_pb_blurb .et_pb_blurb_description {
    font-size: clamp(12px, 2.8vw, 14px);
    line-height: 1.35;
  }
}

@media (max-width: 479px) {
  .ski-icon-strip .et_pb_blurb .et_pb_blurb_description {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Focus visibility — site-wide keyboard affordance (WCAG 2.2 AA 2.4.11)
   Buttons already got a focus ring further up in this file; everything else
   keyboard-reachable (nav links, in-copy links, FAQ accordion toggles, form
   controls) was relying on the browser default, which is invisible against
   Deep Alpine panels and near-invisible on Ice surfaces. One restrained
   brand-blue ring, applied only to :focus-visible so pointer users never see
   it, and with a transparent outline so Windows forced-colors mode (which
   drops box-shadow) still shows something.
   -------------------------------------------------------------------------- */
.et_pb_module a:focus-visible,
.et_pb_menu a:focus-visible,
.et_pb_toggle_title:focus-visible,
.et_pb_accordion_item .et_pb_toggle_title:focus-visible,
.et_pb_contact_form_container input:focus-visible,
.et_pb_contact_form_container textarea:focus-visible,
.et_pb_contact_form_container select:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(38, 173, 226, 0.45);
}

/*--------------------------------*/

/* ==========================================================
   SKI SCHOOL — ALQUILER DE MATERIAL
   ThemeComplete Extra Product Options
   ========================================================== */


/* ----------------------------------------------------------
   1. Pregunta "¿Necesita alquilar material?" + botón "Sí"
   en la misma línea
   ---------------------------------------------------------- */

/*
 * ThemeComplete añade automáticamente sufijos como "-div"
 * y "-ul" a las clases configuradas desde Ajustes CSS.
 */

.ski-rental-options .ski-rental-question-label-div,
.ski-rental-options .ski-rental-question-control-div {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: center;
}

/* Separación entre pregunta y control */
.ski-rental-options .ski-rental-question-label-div {
    margin-right: 16px !important;
}

/* Evitar que los elementos internos del radio ocupen el 100% */
.ski-rental-options .ski-rental-question-control-div .tc-element-container,
.ski-rental-options .ski-rental-question-control-ul {
    width: auto !important;
    max-width: none !important;
}

/* Eliminar espacios verticales innecesarios */
.ski-rental-options .ski-rental-question-label-div,
.ski-rental-options .ski-rental-question-control-div,
.ski-rental-options .ski-rental-question-control-ul,
.ski-rental-options .ski-rental-question-control-div .tmcp-field-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Botón "Sí" — proporción coherente con los selectores del formulario */
.ski-rental-options .ski-rental-question-control-div .tmcp-field-wrap {
    min-width: 48px;
}

.ski-rental-options .ski-rental-question-control-div .tm-epo-field-label {
    min-width: 48px;
}

.ski-rental-options .ski-rental-question-control-div .tc-label-inner {
    min-width: 36px;
    min-height: 34px;
    padding-left: 12px;
    padding-right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

/* ----------------------------------------------------------
   2. Selector de cantidad
   Personas [1] + −
   ---------------------------------------------------------- */

/*
 * IMPORTANTE:
 * No se fuerza la propiedad display.
 *
 * ThemeComplete controla mediante inline styles cuándo debe
 * mostrarse u ocultarse el selector según el estado de cada
 * opción. De esta forma no interferimos con su lógica nativa.
 */

.ski-rental-options .tmcp-field-wrap-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Primera línea: nombre del material + precio */
.ski-rental-options .tmcp-field-wrap-inner > .tc-field-label-wrap {
    flex: 0 0 100%;
    width: 100%;
}

/* Segunda línea: selector compacto bajo la zona del precio */
.ski-rental-options .tm-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    white-space: nowrap;

    flex: 0 0 auto;
    width: auto;

    margin-top: 10px;
    margin-left: auto;
    margin-right: 0;

    padding-left: 0;
}

/* Texto "Personas" */
.ski-rental-options .tm-quantity::before {
    content: "Personas";
    order: 1;

    margin-right: 8px;

    color: #0F2430;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}


/* ----------------------------------------------------------
   3. Input numérico
   ---------------------------------------------------------- */

.ski-rental-options .tm-quantity .tm-qty {
    order: 2;

    box-sizing: border-box;

    width: 46px !important;
    min-width: 46px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;

    background-color: #E8F1F5 !important;
    background-image: none !important;

    border: 1px solid #DCE6EB !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    color: #0F2430 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
    text-align: center !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Ocultar controles nativos del navegador en input[type="number"] */
.ski-rental-options .tm-quantity .tm-qty::-webkit-inner-spin-button,
.ski-rental-options .tm-quantity .tm-qty::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* Focus del input */
.ski-rental-options .tm-quantity .tm-qty:focus {
    outline: none;
    background-color: #FFFFFF !important;
    border-color: #26ADE2 !important;
    box-shadow: 0 0 0 3px rgba(38, 173, 226, 0.14) !important;
}


/* ----------------------------------------------------------
   4. Botones nativos ThemeComplete + / −
   ---------------------------------------------------------- */

/*
 * Se mantienen los botones reales generados por ThemeComplete.
 * Solo se modifica su presentación visual.
 *
 * El área interactiva permanece en 44px para conservar una
 * buena usabilidad táctil aunque el icono visible sea pequeño.
 */

.ski-rental-options .tm-quantity .tc-qty-button {
    box-sizing: border-box;

    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 6px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    color: #26ADE2 !important;

    font-size: 0 !important;
    line-height: 1 !important;

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


/*
 * Divi / WooCommerce pueden añadir iconos mediante ::after
 * a elementos que utilizan la clase genérica ".button".
 * Se desactiva únicamente dentro del selector de alquiler.
 */

.ski-rental-options .tm-quantity .tc-qty-button::after {
    content: none !important;
    display: none !important;

    margin: 0 !important;

    position: static !important;

    opacity: 0 !important;

    font-size: 0 !important;
}


/*
 * Iconos nativos de Divi mediante ETmodules.
 *
 * \4c = plus
 * \4d = minus
 *
 * El elemento sigue siendo el botón real de ThemeComplete;
 * el icono es únicamente presentación.
 */

.ski-rental-options .tm-quantity .tc-qty-button::before {
    display: block !important;

    margin: 0 !important;

    position: static !important;

    color: #26ADE2 !important;

    font-family: "ETmodules" !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
    text-transform: none !important;

    opacity: 1 !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Orden visual solicitado:
   Personas → input → + → − */

.ski-rental-options .tm-quantity .plus {
    order: 3;
}

.ski-rental-options .tm-quantity .minus {
    order: 4;
}


/* Icono + */
.ski-rental-options .tm-quantity .plus::before {
    content: "\4c" !important;
}


/* Icono − */
.ski-rental-options .tm-quantity .minus::before {
    content: "\4b" !important;
}


/* Hover solo en dispositivos que realmente tienen hover */
@media (hover: hover) and (pointer: fine) {

    .ski-rental-options .tm-quantity .tc-qty-button:not(:disabled):hover {
        color: #26ADE2 !important;
        opacity: 0.65;
        background: transparent !important;
    }
}


/* Focus visible para navegación por teclado */
.ski-rental-options .tm-quantity .tc-qty-button:focus-visible {
    outline: 2px solid #26ADE2 !important;
    outline-offset: -4px;

    background: transparent !important;
    box-shadow: none !important;
}


/* Estado deshabilitado */
.ski-rental-options .tm-quantity .tc-qty-button:disabled {
    color: #26ADE2 !important;

    opacity: 0.25 !important;

    cursor: default;

    background: transparent !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   5. MOBILE / TABLET
   ---------------------------------------------------------- */

@media (max-width: 980px) {

	
.ski-rental-options .ski-rental-question-control-div .tmcp-field-wrap,
.ski-rental-options .ski-rental-question-control-div .tm-epo-field-label,
.ski-rental-options .ski-rental-question-control-div .tc-label-inner {
    min-width: 36px;
}

    /* Pregunta + Sí */
    .ski-rental-options .ski-rental-question-label-div {
        margin-right: 10px !important;
    }


    /* Selector */
.ski-rental-options .tm-quantity.tc-right.tc-col-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;

    gap: 0;
    white-space: nowrap;

    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: 0 !important;

    justify-content: flex-start !important;
    align-self: flex-start !important;
}

    /* "Personas" ligeramente más compacto */
    .ski-rental-options .tm-quantity::before {
        margin-right: 6px;

        font-size: 14px;
    }


    /* Input compacto sin reducir demasiado la zona visual */
    .ski-rental-options .tm-quantity .tm-qty {
        width: 44px !important;
        min-width: 44px !important;
        height: 40px !important;

        padding-right: 5px !important;
        padding-left: 5px !important;

        font-size: 15px !important;
    }


    /*
     * El icono visible es pequeño, pero se conserva
     * un objetivo táctil de 44 × 44px.
     */
    .ski-rental-options .tm-quantity .tc-qty-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }


    .ski-rental-options .tm-quantity .tc-qty-button::before {
        font-size: 16px !important;
    }
}

/* Header cart link. The Dashicons font is not loaded on the front end, so the
   glyph rendered empty. Same anchor and href; only the drawing changes: an
   inline SVG used as a mask so it takes the Deep Alpine text colour. */
.carrito-menu.dashicons {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    opacity: 1;
}

.carrito-menu.dashicons::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background-color: var(--gcid-secondary-color, #214A5E);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M2%203h3l2.7%2012.4a2%202%200%200%200%202%201.6h7.7a2%202%200%200%200%202-1.5L21%208H6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M2%203h3l2.7%2012.4a2%202%200%200%200%202%201.6h7.7a2%202%200%200%200%202-1.5L21%208H6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: background-color 0.2s ease;
}

.carrito-menu.dashicons:hover::before {
    background-color: var(--gcid-primary-color, #26ADE2);
}


/* ==========================================================
   SKI SCHOOL - WOOCOMMERCE CART + CHECKOUT
   SINGLE CONSOLIDATED LAYER

   This block replaces every previous cart / checkout block
   in this stylesheet. Do not append new override layers
   below it - edit the relevant section instead.

   /carrito/           -> classic cart shortcode + ThemeComplete
   /finalizar-compra/  -> WooCommerce Checkout Block + ThemeComplete

   Presentation only. No pricing, deposit, Stripe, WooCommerce
   or ThemeComplete logic is modified here.
   ========================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
    --ski-co-deep:   #183f52;
    --ski-co-blue:   #2caddb;
    --ski-co-text:   #52636d;
    --ski-co-border: #dce6eb;
    --ski-co-ice:    #eef7fa;
    --ski-co-snow:   #ffffff;
    --ski-co-radius: 12px;
}


/* ==========================================================
   A. SHARED PAGE SHELL + TITLE RHYTHM
   Fixes the excessive vertical space around the H1.
   ========================================================== */

body.woocommerce-cart #main-content,
body.woocommerce-checkout #main-content {
    background: #fff;
}

body.woocommerce-cart #main-content .container,
body.woocommerce-checkout #main-content .container {
    width: min(1180px, calc(100% - 64px));
    max-width: 1180px;

    padding-top: 40px;
    padding-bottom: 80px;
}

/* Divi wrappers add their own vertical padding on Woo pages */

body.woocommerce-cart #left-area,
body.woocommerce-checkout #left-area {
    padding-top: 0;
    padding-bottom: 0;
}

body.woocommerce-cart .woocommerce-notices-wrapper:empty,
body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none;
}

body.woocommerce-cart #main-content h1.entry-title,
body.woocommerce-cart #main-content .et_pb_title_container h1,
body.woocommerce-checkout #main-content h1.entry-title,
body.woocommerce-checkout #main-content .et_pb_title_container h1 {
    margin: 0 0 26px;
    padding: 0;

    color: var(--ski-co-deep);

    font-size: clamp(34px, 3.4vw, 50px);
    line-height: 1.02;
    letter-spacing: -.03em;
}

body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header {
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ==========================================================
   B. CART - LAYOUT
   ========================================================== */

@media (min-width: 981px) {

    body.woocommerce-cart .woocommerce-cart-form {
        width: calc(66% - 20px);
        float: left;
    }

    body.woocommerce-cart .cart-collaterals {
        width: calc(34% - 20px);
        float: right;
    }

    body.woocommerce-cart .cart_totals {
        width: 100% !important;
        float: none !important;

        position: sticky;
        top: 100px;

        min-height: 300px;
    }
}


/* Strip the legacy table appearance */

body.woocommerce-cart table.shop_table {
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 18px !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
    display: none;
}

/* Reservations always carry Woo quantity 1 - price/quantity columns
   duplicate the subtotal and add noise. */

body.woocommerce-cart .woocommerce-cart-form .product-price,
body.woocommerce-cart .woocommerce-cart-form .product-quantity {
    display: none !important;
}

/* Kill WooCommerce/Divi responsive data-title labels.
   This is the stray character seen on mobile.
   Declared BEFORE our own ::before content. */

body.woocommerce-cart tr.cart_item td::before,
body.woocommerce-cart tr.cart_item th::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   B2. CART - RESERVATION CARD
   ========================================================== */

body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 34px 88px minmax(0, 1fr) auto;
    grid-template-areas: "remove thumb name subtotal";

    gap: 0 18px;
    align-items: start;

    padding: 22px;

    background: var(--ski-co-snow);

    border: 1px solid var(--ski-co-border);
    border-radius: var(--ski-co-radius);

    box-shadow: 0 10px 32px rgba(15, 36, 48, .035);
}


/* Remove control */

body.woocommerce-cart tr.cart_item .product-remove {
    grid-area: remove;

    display: flex !important;
    align-items: flex-start;
    justify-content: center;

    padding: 2px 0 0 !important;
    border: 0 !important;
}

body.woocommerce-cart tr.cart_item .product-remove a.remove {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    color: #7b8a91 !important;

    border-radius: 50%;

    font-family: inherit;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;

    transition: color .2s ease, background-color .2s ease;
}

body.woocommerce-cart tr.cart_item .product-remove a.remove::before,
body.woocommerce-cart tr.cart_item .product-remove a.remove::after {
    content: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body.woocommerce-cart tr.cart_item .product-remove a.remove:hover {
        background: #fff1f0 !important;
        color: #b42318 !important;
    }
}

body.woocommerce-cart tr.cart_item .product-remove a.remove:focus-visible {
    outline: 2px solid var(--ski-co-blue);
    outline-offset: 2px;
}


/* Thumbnail */

body.woocommerce-cart tr.cart_item .product-thumbnail {
    grid-area: thumb;

    display: block !important;
    width: auto !important;

    padding: 0 !important;
    border: 0 !important;
}

body.woocommerce-cart tr.cart_item .product-thumbnail img {
    display: block;

    width: 88px !important;
    height: 88px !important;

    object-fit: cover;
    border-radius: 8px;
}


/* Name column */

body.woocommerce-cart tr.cart_item .product-name {
    grid-area: name;
    min-width: 0;

    padding: 0 !important;
    border: 0 !important;

    color: var(--ski-co-deep);
    text-align: left !important;
}

body.woocommerce-cart tr.cart_item .product-name > a:first-child {
    display: inline-block;

    margin-bottom: 4px;

    color: var(--ski-co-deep) !important;

    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
}


/* Edit reservation (ThemeComplete) */

body.woocommerce-cart .tm-cart-edit-options {
    display: inline-flex !important;

    margin-left: 12px;

    color: var(--ski-co-blue) !important;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none !important;
}

body.woocommerce-cart .tm-cart-edit-options::after {
    content: " \2192";
}

@media (hover: hover) and (pointer: fine) {
    body.woocommerce-cart .tm-cart-edit-options:hover {
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
}


/* ==========================================================
   B3. CART - THEMECOMPLETE RESERVATION DATA
   ThemeComplete template: templates/cart/cart-item-data.php
   dt/dd carry  variation-<sanitize_html_class(key)>
   Label-less rows carry  tc-hidden-variation
   ========================================================== */

body.woocommerce-cart dl.tc-epo-metadata.variation {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);

    column-gap: 16px;
    row-gap: 6px;

    margin: 16px 0 0 !important;
    padding-top: 16px;

    border-top: 1px solid var(--ski-co-border);
}

body.woocommerce-cart dl.tc-epo-metadata.variation dt,
body.woocommerce-cart dl.tc-epo-metadata.variation dd {
    float: none !important;
    width: auto !important;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px;
    line-height: 1.45;
    text-align: left !important;
}

body.woocommerce-cart dl.tc-epo-metadata.variation dt {
    color: var(--ski-co-deep);
    font-weight: 650;
}

body.woocommerce-cart dl.tc-epo-metadata.variation dd {
    color: var(--ski-co-text);
    font-weight: 450;

    overflow-wrap: break-word;
}

body.woocommerce-cart dl.tc-epo-metadata.variation dd p {
    margin: 0 !important;
    padding: 0 !important;
}


/* Technical multiplier field "Dias": kept in the DOM and in the
   order data, hidden from the customer only. */

body.woocommerce-cart dl.tc-epo-metadata.variation dt.variation-Das,
body.woocommerce-cart dl.tc-epo-metadata.variation dd.variation-Das,
body.woocommerce-cart dl.tc-epo-metadata.variation dt.variation-dias,
body.woocommerce-cart dl.tc-epo-metadata.variation dd.variation-dias {
    display: none !important;
}


/* Long question shortened visually, same as checkout */

body.woocommerce-cart dl.tc-epo-metadata.variation dt[class*="quieresreservar"],
body.woocommerce-cart dl.tc-epo-metadata.variation dt[class*="Cuntosdas"] {
    font-size: 0;
}

body.woocommerce-cart dl.tc-epo-metadata.variation dt[class*="quieresreservar"]::after,
body.woocommerce-cart dl.tc-epo-metadata.variation dt[class*="Cuntosdas"]::after {
    content: "Reserva";
    font-size: 14px;
}


/* Label-less rows.
   ThemeComplete emits the rental answer ("Si") and the rental list
   as two consecutive label-less rows. The bare answer is redundant
   once the list is shown, so only the list is kept. */

body.woocommerce-cart dl.tc-epo-metadata.variation dt.tc-hidden-variation {
    display: none !important;
}

body.woocommerce-cart
dl.tc-epo-metadata.variation
dt.tc-hidden-variation:has(~ dt.tc-hidden-variation) + dd {
    display: none !important;
}

body.woocommerce-cart
dl.tc-epo-metadata.variation
dt.tc-hidden-variation:not(:has(~ dt.tc-hidden-variation)) + dd {
    grid-column: 1 / -1;

    margin-top: 4px !important;
    padding-top: 12px !important;

    border-top: 1px solid rgba(24, 63, 82, .09);

    color: var(--ski-co-deep);
}

body.woocommerce-cart
dl.tc-epo-metadata.variation:has(dt.tc-hidden-variation ~ dt.tc-hidden-variation)
dt.tc-hidden-variation:not(:has(~ dt.tc-hidden-variation)) + dd::before {
    content: "Material";

    display: block;
    margin-bottom: 3px;

    color: var(--ski-co-blue);

    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* Extra prices inside the reservation data */

body.woocommerce-cart .tc-price-in-cart {
    color: var(--ski-co-blue);
    font-weight: 650;
}


/* ==========================================================
   B4. CART - SUBTOTAL PER RESERVATION
   ========================================================== */

body.woocommerce-cart tr.cart_item .product-subtotal {
    grid-area: subtotal;

    min-width: 104px;

    padding: 2px 0 0 !important;
    border: 0 !important;

    text-align: right;
}

body.woocommerce-cart tr.cart_item .product-subtotal::before {
    content: "RESERVA" !important;

    display: block !important;

    margin-bottom: 5px;

    color: var(--ski-co-blue);

    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .14em;
}

body.woocommerce-cart tr.cart_item .product-subtotal .amount {
    color: var(--ski-co-deep);

    font-size: 19px;
    font-weight: 750;
}


/* ==========================================================
   B5. CART - COUPON + ACTIONS
   ========================================================== */

body.woocommerce-cart .woocommerce-cart-form td.actions {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 0 0 !important;

    background: transparent !important;
    border: 0 !important;
}

body.woocommerce-cart .woocommerce-cart-form .coupon {
    display: flex;
    align-items: center;
    gap: 8px;

    float: none !important;
    margin: 0 !important;
}

body.woocommerce-cart .woocommerce-cart-form .coupon label {
    display: none !important;
}

body.woocommerce-cart .woocommerce-cart-form .coupon input.input-text {
    width: 220px;
    min-height: 44px;

    margin: 0 !important;
    padding: 0 14px !important;

    background: #fff !important;
    color: var(--ski-co-deep);

    border: 1px solid var(--ski-co-border) !important;
    border-radius: 6px !important;
}

body.woocommerce-cart .woocommerce-cart-form .coupon button.button,
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
    min-height: 46px !important;

    margin: 0 !important;
    padding: 10px 24px !important;

    background: transparent !important;
    color: var(--ski-co-deep) !important;

    border: 1px solid var(--ski-co-deep) !important;
    border-radius: 10px !important;

    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
    margin-left: auto !important;
}

body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"][disabled] {
    opacity: .45;
}


/* ==========================================================
   B6. CART - TOTALS + CHECKOUT CTA
   ========================================================== */

body.woocommerce-cart .cart_totals {
    display: flex;
    flex-direction: column;

    padding: 28px;

    background: var(--ski-co-ice);

    border: 1px solid var(--ski-co-border);
    border-radius: var(--ski-co-radius);
}

body.woocommerce-cart .cart_totals h2 {
    margin: 0 0 20px;

    color: var(--ski-co-deep);

    font-size: 24px;
    line-height: 1.1;
    font-weight: 750;
}

body.woocommerce-cart .cart_totals table.shop_table {
    margin: 0 0 22px !important;
    border-spacing: 0 !important;
}

body.woocommerce-cart .cart_totals table tr th,
body.woocommerce-cart .cart_totals table tr td {
    padding: 13px 0 !important;

    border-top: 1px solid rgba(24, 63, 82, .12) !important;

    color: var(--ski-co-deep);
}

body.woocommerce-cart .cart_totals table tr th {
    font-weight: 600;
}

body.woocommerce-cart .cart_totals table tr td {
    text-align: right;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
    padding-top: 18px !important;
    font-size: 18px;
}

body.woocommerce-cart .cart_totals .order-total .amount {
    font-size: 23px;
    font-weight: 800;
}

body.woocommerce-cart .wc-proceed-to-checkout {
    margin-top: auto;
    padding: 0 !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100%;
    min-height: 46px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 0 14px !important;

    background: var(--ski-co-blue) !important;
    color: #fff !important;

    border: 1px solid var(--ski-co-blue) !important;
    border-radius: 10px !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(44, 173, 219, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        transition: none;
    }

    body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
        transform: none;
    }
}

body.woocommerce-cart #wc-stripe-express-checkout-element {
    margin-top: 16px !important;
}


/* ==========================================================
   B7. CART - TABLET / MOBILE
   ========================================================== */

@media (max-width: 980px) {

    body.woocommerce-cart #main-content .container {
        width: calc(100% - 40px);

        padding-top: 30px;
        padding-bottom: 64px;
    }

    body.woocommerce-cart #main-content h1.entry-title,
    body.woocommerce-cart #main-content .et_pb_title_container h1 {
        margin-bottom: 22px;
        font-size: 34px;
    }

    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals {
        width: 100% !important;
        float: none !important;
    }

    body.woocommerce-cart table.shop_table {
        border-spacing: 0 14px !important;
    }

    body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
        grid-template-columns: 30px 68px minmax(0, 1fr);
        grid-template-areas:
            "remove thumb name"
            "subtotal subtotal subtotal";

        column-gap: 12px;
        row-gap: 14px;

        padding: 18px;
    }

    body.woocommerce-cart tr.cart_item .product-thumbnail img {
        width: 68px !important;
        height: 68px !important;
    }

    body.woocommerce-cart tr.cart_item .product-name > a:first-child {
        font-size: 17px;
    }

    body.woocommerce-cart .tm-cart-edit-options {
        display: flex !important;
        width: fit-content;

        margin: 6px 0 0;
    }

    body.woocommerce-cart dl.tc-epo-metadata.variation {
        grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 7px;

        margin-top: 14px !important;
        padding-top: 14px;
    }

    body.woocommerce-cart dl.tc-epo-metadata.variation dt,
    body.woocommerce-cart dl.tc-epo-metadata.variation dd {
        font-size: 13px;
    }

    body.woocommerce-cart
    dl.tc-epo-metadata.variation dt[class*="quieresreservar"]::after,
    body.woocommerce-cart
    dl.tc-epo-metadata.variation dt[class*="Cuntosdas"]::after {
        font-size: 13px;
    }

    body.woocommerce-cart tr.cart_item .product-subtotal {
        width: 100% !important;
        min-width: 0;

        display: flex !important;
        align-items: center;
        justify-content: space-between;

        padding-top: 14px !important;

        border-top: 1px solid var(--ski-co-border) !important;
    }

    body.woocommerce-cart tr.cart_item .product-subtotal::before {
        content: "TOTAL RESERVA" !important;
        margin: 0;
    }

    body.woocommerce-cart .woocommerce-cart-form td.actions {
        display: block;
        padding-top: 10px !important;
    }

    body.woocommerce-cart .woocommerce-cart-form .coupon {
        width: 100%;

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;

        margin: 0 0 10px !important;
    }

    body.woocommerce-cart .woocommerce-cart-form .coupon input.input-text {
        width: 100% !important;
    }

    body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
        width: 100% !important;
        margin: 0 !important;
    }

    body.woocommerce-cart .cart-collaterals {
        margin-top: 32px;
    }

    body.woocommerce-cart .cart_totals {
        position: static;
        min-height: 0;

        padding: 22px;
    }

    body.woocommerce-cart .cart_totals h2 {
        font-size: 22px;
    }
}


@media (max-width: 480px) {

    body.woocommerce-cart #main-content .container {
        width: calc(100% - 28px);

        padding-top: 24px;
        padding-bottom: 48px;
    }

    body.woocommerce-cart #main-content h1.entry-title,
    body.woocommerce-cart #main-content .et_pb_title_container h1 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
        grid-template-columns: 26px 56px minmax(0, 1fr);
        padding: 16px;
    }

    body.woocommerce-cart tr.cart_item .product-thumbnail img {
        width: 56px !important;
        height: 56px !important;
    }

    body.woocommerce-cart dl.tc-epo-metadata.variation {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    body.woocommerce-cart dl.tc-epo-metadata.variation dt {
        padding-top: 8px !important;

        color: var(--ski-co-blue);

        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    body.woocommerce-cart
    dl.tc-epo-metadata.variation dt[class*="quieresreservar"]::after,
    body.woocommerce-cart
    dl.tc-epo-metadata.variation dt[class*="Cuntosdas"]::after {
        font-size: 10px;
    }

    body.woocommerce-cart dl.tc-epo-metadata.variation dd {
        color: var(--ski-co-deep);
        font-weight: 600;
    }
}


/* ==========================================================
   C. CHECKOUT - LAYOUT
   WooCommerce Checkout Block.
   One single order summary, always above the form,
   at every breakpoint. No duplicated summary after the form.
   ========================================================== */

body.woocommerce-checkout .wp-block-woocommerce-checkout {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 32px !important;

    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
    order: 1 !important;

    position: static !important;

    width: 100% !important;
    max-width: none !important;
    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .wc-block-checkout__main {
    order: 2 !important;

    width: min(820px, 100%) !important;
    max-width: 820px !important;
    flex: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* ==========================================================
   C2. CHECKOUT - ORDER SUMMARY SHELL
   ========================================================== */

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    overflow: hidden;

    width: 100% !important;

    background: var(--ski-co-snow) !important;

    border: 1px solid var(--ski-co-border) !important;
    border-radius: var(--ski-co-radius) !important;

    box-shadow: 0 8px 26px rgba(15, 36, 48, .035) !important;
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
    min-height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 16px 24px !important;

    background: var(--ski-co-ice) !important;

    border-bottom: 1px solid var(--ski-co-border) !important;
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    color: var(--ski-co-deep) !important;

    font-size: 19px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
    color: var(--ski-co-deep) !important;

    font-size: 18px !important;
    font-weight: 750 !important;
}


/* ==========================================================
   C3. CHECKOUT - ONE RESERVATION
   ========================================================== */

body.woocommerce-checkout .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 104px !important;
    grid-template-areas: "image description total" !important;

    column-gap: 22px !important;

    align-items: start !important;

    margin: 0 !important;
    padding: 22px 24px !important;

    border-bottom: 1px solid var(--ski-co-border) !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image {
    grid-area: image !important;

    width: 72px !important;
    min-width: 72px !important;

    margin: 0 !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    display: block !important;

    width: 72px !important;
    height: 72px !important;

    object-fit: cover !important;
    border-radius: 8px !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
    top: -6px !important;
    right: -6px !important;

    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: var(--ski-co-deep) !important;
    color: #fff !important;

    border: 2px solid #fff !important;
    border-radius: 50% !important;

    font-size: 10px !important;
    line-height: 1 !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description {
    grid-area: description !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}

body.woocommerce-checkout .wc-block-components-product-name {
    display: block !important;

    margin: 0 0 10px !important;

    color: var(--ski-co-deep) !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

/* Unit price repeated under the name, and the generic product
   excerpt, both duplicate information already on screen. */

body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
body.woocommerce-checkout .wc-block-components-product-metadata__description {
    display: none !important;
}

body.woocommerce-checkout .wc-block-components-product-metadata {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* ==========================================================
   C4. CHECKOUT - "VER DETALLES" TOGGLE
   The button is injected by js/checkout-ui.js.
   Without JS the details simply stay visible.
   ========================================================== */

body.woocommerce-checkout .ssn-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 2px 0 0;
    padding: 6px 0;

    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;

    color: var(--ski-co-blue);
    cursor: pointer;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
}

body.woocommerce-checkout .ssn-details-toggle:focus-visible {
    outline: 2px solid var(--ski-co-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
    body.woocommerce-checkout .ssn-details-toggle:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

body.woocommerce-checkout .ssn-details-toggle__chevron {
    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg) translate(-2px, -2px);
    transform-origin: center;

    transition: transform .18s ease;
}

body.woocommerce-checkout .ssn-details-toggle[aria-expanded="true"] .ssn-details-toggle__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

body.woocommerce-checkout .wc-block-components-product-details[hidden],
body.woocommerce-checkout .ssn-details-panel[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout .ssn-details-toggle__chevron {
        transition: none;
    }
}


/* ==========================================================
   C5. CHECKOUT - RESERVATION DATA
   Label / value rows. The label column is wide enough that
   labels never concatenate with their value.
   ========================================================== */

body.woocommerce-checkout .wc-block-components-product-details {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    column-gap: 28px !important;
    row-gap: 0 !important;

    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

body.woocommerce-checkout .wc-block-components-product-details > span,
body.woocommerce-checkout .wc-block-components-product-details > li {
    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;

    gap: 4px 12px !important;
    align-items: baseline !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    border-top: 1px solid rgba(24, 63, 82, .09) !important;
}

/* WooCommerce inserts a decorative separator between fields */

body.woocommerce-checkout
.wc-block-components-product-details > span > span[aria-hidden="true"],
body.woocommerce-checkout
.wc-block-components-product-details > li > span[aria-hidden="true"] {
    display: none !important;
}

body.woocommerce-checkout .wc-block-components-product-details__name {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ski-co-blue) !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    overflow-wrap: break-word !important;
}

body.woocommerce-checkout .wc-block-components-product-details__name::after {
    content: none !important;
}

body.woocommerce-checkout .wc-block-components-product-details__value {
    display: block !important;

    min-width: 0 !important;
    margin: 0 !important;

    color: var(--ski-co-deep) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;

    text-align: left !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

body.woocommerce-checkout .wc-block-components-product-details__value p {
    margin: 0 !important;
}

/* Dates need the full row */

body.woocommerce-checkout .wc-block-components-product-details__fecha,
body.woocommerce-checkout .wc-block-components-product-details__fechas {
    grid-column: 1 / -1 !important;
}

/* Long question shortened visually */

body.woocommerce-checkout
.wc-block-components-product-details[class] > [class*="quieres-reservar"]
.wc-block-components-product-details__name {
    font-size: 0 !important;
}

body.woocommerce-checkout
.wc-block-components-product-details[class] > [class*="quieres-reservar"]
.wc-block-components-product-details__name::before {
    content: "Reserva";
    font-size: 10px;
}

/* Internal day multiplier: stays in the order data, hidden from
   the customer. Never removed from the DOM. */

body.woocommerce-checkout
.wc-block-components-product-details > [class*="product-details__d-as"],
body.woocommerce-checkout
.wc-block-components-product-details > [class*="product-details__dias"] {
    display: none !important;
}


/* ==========================================================
   C6. CHECKOUT - MATERIAL / RENTAL
   ThemeComplete emits the rental answer and the rental list as
   two consecutive label-less rows. Only the list is shown.
   ========================================================== */

body.woocommerce-checkout
.wc-block-components-product-details > span[class=""]:has(+ span[class=""]) {
    display: none !important;
}

body.woocommerce-checkout
.wc-block-components-product-details > span[class=""] + span[class=""] {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;

    gap: 4px 12px !important;
    align-items: baseline !important;

    padding: 9px 0 !important;
}

body.woocommerce-checkout
.wc-block-components-product-details > span[class=""] + span[class=""]::before {
    content: "Material";

    color: var(--ski-co-blue);

    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.woocommerce-checkout .tc-price-in-cart {
    color: var(--ski-co-blue) !important;
    font-weight: 650 !important;
}


/* ==========================================================
   C7. CHECKOUT - RESERVATION PRICE
   ========================================================== */

body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
    grid-area: total !important;

    min-width: 96px !important;

    margin: 0 !important;
    padding: 1px 0 0 !important;

    text-align: right !important;
}

body.woocommerce-checkout
.wc-block-components-order-summary-item__total-price::before {
    content: "RESERVA";

    display: block;

    margin-bottom: 4px;

    color: var(--ski-co-blue);

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .12em;
}

body.woocommerce-checkout
.wc-block-components-order-summary-item__total-price
.wc-block-components-product-price__value {
    color: var(--ski-co-deep) !important;

    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
}


/* ==========================================================
   C8. CHECKOUT - COUPON / SUBTOTAL / TOTAL
   ========================================================== */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    border-bottom: 1px solid var(--ski-co-border) !important;
}

body.woocommerce-checkout .wc-block-components-totals-coupon {
    padding: 15px 24px !important;
}

body.woocommerce-checkout .wc-block-components-panel__button {
    color: var(--ski-co-text);

    font-size: 14px;
    font-weight: 600;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-totals-block
.wc-block-components-totals-wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-totals-block
.wc-block-components-totals-item {
    padding-top: 14px !important;
    padding-bottom: 14px !important;

    color: var(--ski-co-deep);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item {
    padding: 18px 24px !important;

    background: var(--ski-co-ice) !important;

    border-top: 1px solid var(--ski-co-border) !important;
}

body.woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label {
    color: var(--ski-co-deep) !important;

    font-size: 17px !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
    color: var(--ski-co-deep) !important;

    font-size: 25px !important;
    font-weight: 800 !important;
}


/* ==========================================================
   C9. CHECKOUT - FORM
   ========================================================== */

body.woocommerce-checkout .wc-block-components-checkout-step {
    margin: 0 0 26px !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading {
    margin: 0 0 12px !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
    color: var(--ski-co-deep) !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout
.wc-block-components-combobox .wc-block-components-combobox-control input {
    border-color: var(--ski-co-border) !important;
    border-radius: 7px !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout
.wc-block-components-combobox .wc-block-components-combobox-control input:focus {
    border-color: var(--ski-co-blue) !important;

    box-shadow: 0 0 0 2px rgba(44, 173, 219, .10) !important;
}


/* ==========================================================
   C10. CHECKOUT - EXPRESS PAYMENT
   Hidden only when the block renders with no usable payment
   control inside it, so no empty box is left on the page.
   ========================================================== */

body.woocommerce-checkout .wp-block-woocommerce-checkout-express-payment-block {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-express-payment-block:not(:has(button)):not(:has(iframe)):not(:has(input)) {
    display: none !important;
}

body.woocommerce-checkout
.wc-block-components-checkout-order-summary__title:has(+ :empty:last-child) {
    border-bottom: 0 !important;
}


/* ==========================================================
   C11. CHECKOUT - PAYMENT METHODS + PLACE ORDER
   ========================================================== */

body.woocommerce-checkout
.wc-block-checkout__payment-method .wc-block-components-radio-control {
    overflow: hidden;

    border: 1px solid var(--ski-co-border) !important;
    border-radius: 9px !important;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    min-height: 46px !important;

    background: var(--ski-co-blue) !important;
    color: #fff !important;

    border: 1px solid var(--ski-co-blue) !important;
    border-radius: 10px !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.woocommerce-checkout
    .wc-block-components-checkout-place-order-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(44, 173, 219, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
        transition: none;
    }

    body.woocommerce-checkout
    .wc-block-components-checkout-place-order-button:hover {
        transform: none;
    }
}


/* ==========================================================
   C12. CHECKOUT - TABLET
   ========================================================== */

@media (max-width: 980px) {

    body.woocommerce-checkout #main-content .container {
        width: calc(100% - 40px);

        padding-top: 30px;
        padding-bottom: 64px;
    }

    body.woocommerce-checkout #main-content h1.entry-title,
    body.woocommerce-checkout #main-content .et_pb_title_container h1 {
        margin-bottom: 22px;
        font-size: 34px;
    }

    body.woocommerce-checkout
    .wc-block-components-sidebar-layout.wc-block-checkout {
        gap: 26px !important;
    }

    body.woocommerce-checkout .wc-block-checkout__main,
    body.woocommerce-checkout .wc-block-checkout__sidebar {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ==========================================================
   C13. CHECKOUT - MOBILE
   Same single summary, stacked and compact.
   ========================================================== */

@media (max-width: 780px) {

    body.woocommerce-checkout #main-content .container {
        width: calc(100% - 28px);

        padding-top: 24px;
        padding-bottom: 48px;
    }

    body.woocommerce-checkout #main-content h1.entry-title,
    body.woocommerce-checkout #main-content .et_pb_title_container h1 {
        margin-bottom: 18px;

        font-size: 30px;
        line-height: 1.05;
    }

    body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
        min-height: 54px !important;
        padding: 14px 16px !important;
    }

    body.woocommerce-checkout
    .wc-block-components-checkout-order-summary__title-text,
    body.woocommerce-checkout
    .wc-block-components-checkout-order-summary__title-price {
        font-size: 16px !important;
    }

    body.woocommerce-checkout .wc-block-components-order-summary-item {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "image description"
            "total total" !important;

        column-gap: 14px !important;
        row-gap: 4px !important;

        padding: 18px 16px !important;
    }

    body.woocommerce-checkout .wc-block-components-order-summary-item__image,
    body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
    }

    body.woocommerce-checkout .wc-block-components-product-name {
        font-size: 16px !important;
    }

    body.woocommerce-checkout .wc-block-components-product-details {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.woocommerce-checkout .wc-block-components-product-details > span,
    body.woocommerce-checkout .wc-block-components-product-details > li,
    body.woocommerce-checkout .wc-block-components-product-details__fecha,
    body.woocommerce-checkout .wc-block-components-product-details__fechas,
    body.woocommerce-checkout
    .wc-block-components-product-details > span[class=""] + span[class=""] {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 2px !important;
        padding: 8px 0 !important;
    }

    body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
        width: 100% !important;

        display: flex !important;
        align-items: center;
        justify-content: space-between;

        margin-top: 6px !important;
        padding-top: 12px !important;

        border-top: 1px solid var(--ski-co-border);
    }

    body.woocommerce-checkout
    .wc-block-components-order-summary-item__total-price::before {
        content: "TOTAL RESERVA";
        margin: 0;
    }

    body.woocommerce-checkout .wc-block-components-totals-coupon,
    body.woocommerce-checkout
    .wp-block-woocommerce-checkout-order-summary-totals-block
    .wc-block-components-totals-wrapper,
    body.woocommerce-checkout .wc-block-components-totals-footer-item {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.woocommerce-checkout .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__value {
        font-size: 22px !important;
    }

    body.woocommerce-checkout .wc-block-components-checkout-step {
        margin-bottom: 22px !important;
    }

    body.woocommerce-checkout .wc-block-components-checkout-step__title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
        width: 100% !important;
        min-height: 46px !important;
    }
}


@media (max-width: 480px) {

    body.woocommerce-checkout #main-content .container {
        width: calc(100% - 24px);
    }

    body.woocommerce-checkout #main-content h1.entry-title,
    body.woocommerce-checkout #main-content .et_pb_title_container h1 {
        font-size: 28px;
    }
}


/* Service cards - unified across Home, /clases/ and /clases/clases-de-esqui/: the
   active state is carried by the blue top rule (set with the card in each page
   file), so the old corner bracket is dropped. */
body .ski-service-slider .ski-service-card.is-active::after { display: none !important; }

/* Product: 'Una clase configurada alrededor de ti'. Same component as the
   .ski-adapt trio on the class pages (blue top accent, index, icon column, type
   scale); the icons are the same uploaded files, drawn by CSS because this copy
   comes from the product description and its markup is left untouched. */
body.single-product .ski-pc-benefits__list .ski-pc-benefit {
  display: grid;
  grid-template-columns: calc(var(--ski-icon-lg) + 4px) minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding-top: 30px;
}
body.single-product .ski-pc-benefits__list .ski-pc-benefit::before { width: 64px; }
body.single-product .ski-pc-benefits__list .ski-pc-benefit::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--ski-icon-lg);
  height: var(--ski-icon-lg);
  background: center / contain no-repeat;
}
body.single-product .ski-pc-benefits__list .ski-pc-benefit:nth-child(1)::after { background-image: url(/wp-content/uploads/2026/09/ssn-icon-progresion-aprendizaje.png); }
body.single-product .ski-pc-benefits__list .ski-pc-benefit:nth-child(2)::after { background-image: url(/wp-content/uploads/2026/08/ski-icon-group.png); }
body.single-product .ski-pc-benefits__list .ski-pc-benefit:nth-child(3)::after { background-image: url(/wp-content/uploads/2026/09/ski-icon-clock.png); }
body.single-product .ski-pc-benefits__list .ski-pc-benefit__title,
body.single-product .ski-pc-benefits__list .ski-pc-benefit__copy { grid-column: 2; }
body.single-product .ski-pc-benefits__list .ski-pc-benefit__title { font-size: 21px !important; margin-bottom: 8px !important; }
body.single-product .ski-pc-benefits__list .ski-pc-benefit__copy { font-size: 16.5px; }

@media (max-width: 980px) {
  body.single-product .ski-pc-benefits__list .ski-pc-benefit { padding: 22px 0; grid-template-columns: calc(var(--ski-icon-lg) + 4px) minmax(0, 1fr); }
  body.single-product .ski-pc-benefits__list .ski-pc-benefit:last-child { padding-bottom: 0; }
  body.single-product .ski-pc-benefits__list .ski-pc-benefit::after { width: var(--ski-icon-lg); height: var(--ski-icon-lg); }
}

/* GLOBAL HEADING ACCENT: single strategic word in editorial H1/H2 */
#page-container .ski-accent,.et-l .ski-accent{color:var(--ski-blue,var(--gcid-primary-color,#26ADE2)) !important;}

/* ==========================================================================
   ICON SYSTEM — size tiers (iconography pass 2026-09-26)
   One scale for every icon on the site. Icons are the project's own line-art
   PNGs (ski-icon-* 200px canvas, ssn-icon-* 96px canvas; glyph ~77% of the
   box), plus the Divi "line" font glyphs in the duration cards / Why list.
     sm  micro / inline  — trust strips, value strips, icon beside a label
     md  feature / list  — icon above a card title (utility, formats, includes)
     lg  protagonist     — icon column of the numbered trios (.ski-adapt),
                           product benefits, support bar
   The *-glyph-* values are the optical equivalents for font glyphs, which
   fill their whole em box (a 26px glyph reads like a ~34px PNG box).
   Page stylesheets consume these tokens; change a tier here and every
   component in that tier follows. Home (1552) keeps its own approved
   values for the Why list and the utility band.
   ========================================================================== */
:root {
  --ski-icon-sm: 28px;
  --ski-icon-md: 40px;
  --ski-icon-lg: 52px;
  --ski-icon-glyph-sm: 22px;
  --ski-icon-glyph-md: 26px;
}
@media (max-width: 980px) {
  :root {
    --ski-icon-sm: 24px;
    --ski-icon-md: 36px;
    --ski-icon-lg: 44px;
    --ski-icon-glyph-sm: 20px;
    --ski-icon-glyph-md: 24px;
  }
}

/* sm tier on the two 3-item strips at every breakpoint. The blurb modules
   still carry their own 22-24px width attr; this wins so every strip on
   every page shares one size, square box, no stretching. */
.ski-trust-strip .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap,
.ski-icon-strip .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap {
  display: block;
  width: var(--ski-icon-sm) !important;
  max-width: none !important;
}
.ski-trust-strip .et_pb_blurb .et_pb_main_blurb_image img,
.ski-icon-strip .et_pb_blurb .et_pb_main_blurb_image img {
  display: block;
  width: var(--ski-icon-sm) !important;
  height: var(--ski-icon-sm) !important;
  max-width: none !important;
  object-fit: contain;
}

/* ==========================================================================
   Global: mobile blurb icon vertical alignment (≤980px)
   Applies to every page that uses the ski-adapt, ski-utility, ski-why and
   ski-formats grid patterns — icon needs to sit centred against the
   title/body block, not pinned to the top of a tall flex column.
   Trust strip is excluded (handled separately per page).
   ========================================================================== */
@media (max-width: 980px) {
  /* Row gap between blurb items in all list/grid sections */
  .ski-adapt__grid,
  .ski-utility__grid,
  .ski-why__grid,
  .ski-formats__grid {
    row-gap: 28px !important;
  }
  /* Icon: vertically centred against title+body block */
  .ski-adapt__grid .et_pb_blurb_content,
  .ski-utility__grid .et_pb_blurb_content,
  .ski-why__grid .et_pb_blurb_content,
  .ski-formats__grid .et_pb_blurb_content {
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .ski-adapt__grid .et_pb_main_blurb_image,
  .ski-utility__grid .et_pb_main_blurb_image,
  .ski-why__grid .et_pb_main_blurb_image,
  .ski-formats__grid .et_pb_main_blurb_image {
    align-self: center !important;
    margin-top: 10px !important;
    flex-shrink: 0;
  }
}