/*─────────────────────────────────────────────────────────────*/
/* cart.css — Full Cart Styling with Breakpoint Fixes          */
/*─────────────────────────────────────────────────────────────*/

/*─────────────────────────────────────────────────────────────*/
/* 0) Configurable Variables                                   */
/*─────────────────────────────────────────────────────────────*/
:root {
  /* — Snapshot widths — */
  --cart-thumb-w:         400px;
  --checkout-thumb-w:     100px;

  /* — Hide/show columns — */
  --col-show-price:       table-cell;
  --col-show-qty:         none;
  --col-show-subtotal:    none;

  /* — Swatch grid — */
  --swatch-size:          1.5rem;
  --swatch-gap:           0.75rem;
  --label-fs:             1rem;
  --category-fs:          1.2rem;
  --category-fw:          600;

  /* — Price offset & font — */
  --price-offset-x:       4rem;
  --price-fs:             1.5rem;

  /* — Velvet Ear Clock title — */
  --title-font-size:      1.5rem;
  --title-font-weight:    500;
  --title-margin-bottom:  1.5rem;

  /* — Pill‐button styling — */
  --pill-height:           2.5rem;
  --pill-radius:           9999px;   /* full pill */
  --pill-padding-x:        7.5rem;
  --pill-padding-y:        0.5rem;   /* vertical padding */
  --pill-font:             1.3rem;
  --pill-bg:               #4a6c91;
  --pill-bg-hover:         rgba(91,124,158,0.91);
  --pill-color:            #fff;
  --bottom-buttons-offset: 2rem;
  --totals-section-gap:    3rem;     /* desktop “Cart totals” gap */

  /* Apple‐style button variables */
  --icon-size: 32px;
  --pad-top: 0.5rem;
  --pad-bottom: 0.5rem;
  --pad-left: 2rem;
  --pad-right: 1rem;
  --btn-bg: #e5e7ea;
  --btn-bg-hover: #ececec;

  /* ── Mobile vertical‐spacing controls (override in @media) ── */
  --mob-gap-above-thumb: -2rem;   /* (mobile) header → first clock */
  --mob-gap-after-price: 5rem;   /* (mobile) last clock price → “Cart totals” */
  --mob-totals-gap:      -5rem; /* (mobile) “Cart totals” → buttons */
}

/*─────────────────────────────────────────────────────────────*/
/* 1) Fluid, responsive snapshot                               */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .shop_table img,
.woocommerce-cart .shop_table td.product-thumbnail img {
  width:         var(--cart-thumb-w) !important;
  max-width:     100%               !important;
  height:        auto               !important;
  border-radius: 4px                !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 2) Hide/show specific columns                               */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .shop_table th.product-price,
.woocommerce-cart .shop_table td.product-price {
  display: var(--col-show-price) !important;
}
.woocommerce-cart .shop_table th.product-quantity,
.woocommerce-cart .shop_table td.product-quantity {
  display: var(--col-show-qty) !important;
}
.woocommerce-cart .shop_table th.product-subtotal,
.woocommerce-cart .shop_table td.product-subtotal {
  display: var(--col-show-subtotal) !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 3) Remove the desktop header row                            */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .shop_table thead {
  display: none !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 4) Grid‐based variations                                     */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart table.cart td.product-name dl.variation {
  display:               grid !important;
  grid-template-columns: max-content auto !important;
  column-gap:            1rem !important;
  row-gap:               var(--swatch-gap) !important;
}
.woocommerce-cart table.cart td.product-name dl.variation dt {
  font-size:    var(--category-fs)   !important;
  font-weight:  var(--category-fw)   !important;
  margin:       0                    !important;
  padding:      0                    !important;
  align-self:   center               !important;
  white-space:  nowrap               !important;
  text-align:   left                 !important;
}
.woocommerce-cart table.cart td.product-name dl.variation dd p {
  display:      flex                !important;
  align-items:  center              !important;
  margin:       0                   !important;
  padding:      0                   !important;
  gap:          0.5rem              !important;
  font-size:    var(--label-fs)     !important;
  white-space:  nowrap              !important;
  text-align:   left                !important;
}
.woocommerce-cart table.cart td.product-name dl.variation dt .config-swatch,
.woocommerce-cart table.cart td.product-name dl.variation dd p .config-swatch {
  width:          var(--swatch-size) !important;
  height:         var(--swatch-size) !important;
  border-radius:  50%                !important;
  margin:         0                  !important;
  padding:        0                  !important;
  vertical-align: middle             !important;
  border:         1px solid #000     !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 5) Position & style the Price cell                          */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .shop_table td.product-price {
  vertical-align: middle            !important;
  padding-left:  var(--price-offset-x) !important;
  font-size:     var(--price-fs)        !important;
  text-align:    right                  !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 6) Hide coupon & notices                                    */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .coupon,
.woocommerce-cart .actions,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: none !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 7) Velvet Ear Clock title (all widths)                      */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .shop_table td.product-name > a {
  display:        block                      !important;
  font-size:      var(--title-font-size)     !important;
  font-weight:    var(--title-font-weight)   !important;
  margin-bottom:  var(--title-margin-bottom) !important;
  color:          #000                       !important;
  text-decoration:none                      !important;
  white-space:    nowrap                     !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 8) Always show thumbnail under 48rem                        */
/*─────────────────────────────────────────────────────────────*/
@media (max-width: 48rem) {
  .woocommerce-cart table.cart.responsive td.product-thumbnail,
  .woocommerce-cart .shop_table td.product-thumbnail {
    display: table-cell !important;
  }
  .woocommerce-cart table.cart.responsive td.product-thumbnail img,
  .woocommerce-cart .shop_table td.product-thumbnail img {
    display: block       !important;
    max-width: 100%      !important;
    height:    auto      !important;
  }
  table.cart.responsive td[data-title="Product"]::before {
    content: none !important;
    display: none !important;
  }
  table.cart.responsive td[data-title="Product"] {
    padding-top: 0 !important;
  }
}

/*─────────────────────────────────────────────────────────────*/
/* 9) Ensure a true pill shape and blue style on “Proceed to checkout” */
/*─────────────────────────────────────────────────────────────*/
.wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pill-radius) !important;
  background: var(--pill-bg) !important;
  color: var(--pill-color) !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: var(--pill-font) !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: var(--pill-padding-x) !important;
  padding-right: var(--pill-padding-x) !important;
  padding-top: var(--pill-padding-y) !important;
  padding-bottom: var(--pill-padding-y) !important;
  min-height: var(--pill-height) !important;
  transition: background 0.15s;
  outline: none !important;
  margin: 2rem auto 0 auto !important;
  text-align: center !important;
  min-width: 320px !important; /* Optional for width consistency */
}
.wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward:hover,
.wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward:focus {
  background: var(--pill-bg-hover) !important;
  color: #fff !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 10) Remove the outer “card” around the cart table           */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart table.shop_table {
  border:       none !important;
  box-shadow:   none !important;
  background:   transparent !important;
}
.woocommerce-cart-form,
.woocommerce-cart-form .shop_table {
  background:   transparent !important;
  border:       none        !important;
  box-shadow:   none        !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 11) Remove grey/white boxes around cart items               */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart table.cart .cart_item,
.woocommerce-cart table.cart .cart_item td,
.woocommerce-cart table.cart .cart_item th,
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail a {
  background: transparent !important;
  border:     none        !important;
  box-shadow: none        !important;
}

/*─────────────────────────────────────────────────────────────*/
/* 12) MOBILE (≤767px): Center everything & remove “Price:”    */
/*─────────────────────────────────────────────────────────────*/
@media only screen and (max-width: 767px) {
  /* a) strip any stray prefixes */
  .woocommerce-cart td::before {
    content: none !important;
  }

  /* b) center every cell */
  .woocommerce-cart .shop_table td {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* c) thumbnail cell */
  .woocommerce-cart .shop_table td.product-thumbnail {
    display: block !important;
    text-align: center !important;
    margin-bottom: 1rem !important;

    /* top gap between header & first clock */
    margin-top: var(--mob-gap-above-thumb) !important;
  }
  .woocommerce-cart .shop_table td.product-thumbnail img {
    display: inline-block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* d) product title */
  .woocommerce-cart .shop_table td.product-name > a {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 1rem !important;
  }

  /* e) RESTORE desktop two-column swatches, but center the grid */
  .woocommerce-cart .shop_table td.product-name dl.variation {
    display:               grid !important;
    grid-template-columns: max-content auto !important;
    column-gap:            1rem !important;
    row-gap:               var(--swatch-gap) !important;
    justify-content:       center !important;
    margin:                0 auto 1rem !important;
  }
  .woocommerce-cart .shop_table td.product-name dl.variation dt,
  .woocommerce-cart .shop_table td.product-name dl.variation dd p {
    text-align: left !important; /* keep each line left-aligned inside */
  }

  /* f) price AMOUNT only, centered */
  .woocommerce-cart .shop_table td.product-price::before {
    content: none !important;
  }
  .woocommerce-cart .shop_table td.product-price {
    display: block !important;
    text-align: center !important;
    font-size: var(--price-fs) !important;

    /* bottom gap before “Cart totals” */
    margin: 1rem auto var(--mob-gap-after-price) auto !important;
    padding: 0 !important;
  }

  /* g) Move the remove‐icon down exactly the same amount as the thumbnail: */
  .woocommerce-cart .shop_table a.remove {
    /* Make sure it’s positioned relative so “top:” works */
    position: relative !important;
    top: var(--mob-gap-above-thumb) !important;
    right: 0 !important;
    width: 1.25em !important;
    height: 1.25em !important;
    line-height: 1.25em !important;
    text-align: center !important;
    border-radius: 50% !important;
  }

  /* h) Kick WooCommerce’s default margin off the “Cart totals” wrapper
        and re‐drive it with our variable so it’s adjustable:             */
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals {
    margin-top: var(--mob-totals-gap) !important;
    padding-top: 0 !important;
  }
}

/* Match the price font‐weight to the Velvet Ear Clock title */
.woocommerce-cart .shop_table td.product-price {
  font-weight: var(--title-font-weight) !important;
}

/* ─── Remove the Subtotal row from Cart totals ─── */
.woocommerce-cart .cart_totals tr.cart-subtotal,
.woocommerce-cart .cart_totals .cart-subtotal {
  display: none !important;
}

/* ─── Enlarge & embolden the “Total” row ─── */
.woocommerce-cart .cart_totals .order-total th {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}
.woocommerce-cart .cart_totals .order-total td {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* ─── Strip grey background & center the Cart totals ─── */
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  background:   transparent !important;
  border:       none        !important;
  box-shadow:   none        !important;
}

/* center the totals container & heading */
.woocommerce-cart .cart_totals {
  text-align: center !important;
  margin:     0 auto   !important;
}
.woocommerce-cart .cart_totals h2 {
  text-align: center !important;
}

/* mobile‐responsive override for WooCommerce’s injected table */
@media only screen and (max-width: 767px) {
  /* remove any grey bg from the “Total” row */
  .woocommerce-cart table.shop_table_responsive tr.order-total td {
    background: transparent !important;
  }
}

/* 1) Desktop – keep “Total” left‐aligned */
.woocommerce-cart .cart_totals table .order-total td {
  text-align: right !important;
}

/* 2) Mobile (≤767px) – center “Total” price under Cart totals */
@media only screen and (max-width: 767px) {
  .woocommerce-cart .cart_totals table .order-total td {
    text-align: center !important;
  }
}

/* give Cart totals some breathing room (desktop) */
.woocommerce-cart .cart_totals {
  margin-top: var(--totals-section-gap) !important;
}

/* ─── Always show the “remove item” X as a filled red circle with white X ─── */
.woocommerce-cart a.remove {
  background-color: #c00 !important;
  color:            #fff !important;
  display:          inline-block !important;
  width:            1.250em !important;
  height:           1.250em !important;
  line-height:      1.250em !important;
  text-align:       center !important;
  border-radius:    50% !important;
  transition: none !important;
  opacity:    1    !important;
  box-shadow: none !important;
}
body.woocommerce-cart h1.entry-title,
.woocommerce-cart .entry-title.main_title {
  display: none !important;
}
.woocommerce-cart a.remove:hover {
  background-color: #c00 !important;
  color:            #fff !important;
}

/*─────────────────────────────────────────────────────────────*/
/*  Restore pill shape & centering for the “Return to shop”   */
/*─────────────────────────────────────────────────────────────*/
.woocommerce-cart .return-to-shop {
  text-align: center !important;
  margin-top: var(--bottom-buttons-offset) !important;
}

.woocommerce-cart .return-to-shop a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--pill-height) !important;
  padding: 0 var(--pill-padding-x) !important;
  border-radius: var(--pill-radius) !important;
  background-color: var(--pill-bg) !important;
  color: var(--pill-color) !important;
  font-size: var(--pill-font) !important;
  text-decoration: none !important;
  outline: none !important;
}

/*─────────────────────────────────────────────────────────────*/
/* Apple‐style “Build Another Clock” button                    */
/*─────────────────────────────────────────────────────────────*/
.build-another-clock-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding-top:    var(--pad-top);
  padding-bottom: var(--pad-bottom);
  padding-left:   var(--pad-left);
  padding-right:  var(--pad-right);
  border-radius: 2rem;
  background: var(--btn-bg);
  font-size: 1.1rem;
  font-weight: 500;
  font-family: 'Public Sans', sans-serif;
  color: #111;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  outline: none;
  margin: 2rem auto 0 auto;
}

.build-another-clock-btn:hover,
.build-another-clock-btn:focus {
  background: var(--btn-bg-hover);
}

.build-another-clock-btn .btn-label {
  margin-right: 1rem;
}

.build-another-clock-btn .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.build-another-clock-btn .btn-icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.build-another-clock-btn .btn-arrow-svg .arrow {
  stroke: var(--btn-bg);
  transition: stroke 0.2s;
}

.build-another-clock-btn:hover .btn-arrow-svg .arrow,
.build-another-clock-btn:focus .btn-arrow-svg .arrow {
  stroke: #fff;
}
/* Only hide the legacy blue “Build Another Clock” button, not the new Apple‐style version */
.woocommerce-cart .build-another-clock .checkout-button:not(.build-another-clock-btn) {
  display: none !important;
}

/*─────────────────────────────────────────────────────────────*/
/* Responsive tweaks for pills & checkout button               */
/*─────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  :root {
    --pill-font: 1.2rem;
    --pill-padding-x: 1rem;
    --pill-padding-y: 0.5rem;
  }
  .wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward {
    min-width: 160px !important;
  }
}
.wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward {
  width: 100% !important;
  max-width: 540px !important;
  min-width: 250px !important;
  font-size: 1.35rem !important;    /* ← bumped up from 1.25rem */
  padding: 0.7rem 2rem !important;
  margin: 1.5rem auto 0 auto !important;
  border-radius: 2rem !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transition: background 0.15s;
}

@media (max-width: 900px) {
  .wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward {
    max-width: 540px !important;
    font-size: 1.3rem !important;   /* slightly larger than before */
    padding: 0.65rem 1.5rem !important;
  }
}

.woocommerce-cart .cart_totals {
  padding-left: 0rem;
  padding-right: 0rem;
}

body.woocommerce-cart .wc-proceed-to-checkout > a.checkout-button.button.alt.wc-forward {
  font-size: 1.35rem !important;
  padding: .5rem .5rem !important;
  height: auto !important;
}
.build-another-clock-btn .btn-arrow-svg .arrow-bg {
  fill: #4a6c91 !important;
  transition: fill 0.2s;
}
.build-another-clock-btn:hover .btn-arrow-svg .arrow-bg,
.build-another-clock-btn:focus .btn-arrow-svg .arrow-bg {
  fill: #4a6c91 !important;
}
.woocommerce-cart .return-to-shop a.button.wc-backward {
  background: var(--pill-bg) !important;
  color: var(--pill-color) !important;
  border-radius: var(--pill-radius) !important;
  font-size: var(--pill-font) !important;
  transition: background 0.18s;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

/* Only background and color change on hover or focus—NO outline or ring */
.woocommerce-cart .return-to-shop a.button.wc-backward:hover,
.woocommerce-cart .return-to-shop a.button.wc-backward:focus,
.woocommerce-cart .return-to-shop a.button.wc-backward:focus-visible {
  background: var(--pill-bg-hover) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  /* No outline, no glow */
}
/* ─────────────────────────────────────────────────────────────
   MOBILE: keep each “×” pinned to its own thumbnail row
   ───────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {

  /* 0) Adjustable vertical offset for the remove icon */
  :root {
    --mob-remove-offset-y: -1.0rem;   /* ↓ move icon down, ↑ move it up */
  }

  /* 1) Make the remove cell the containing box */
  .woocommerce-cart .shop_table td.product-remove {
    position: relative !important;    /* now <a.remove> is anchored here */
    width: auto !important;           /* let it size to the icon */
    padding: 0 !important;            /* no extra padding to fight against */
  }

  /* 2) Absolutely position the red “×” inside that cell */
  .woocommerce-cart .shop_table td.product-remove > a.remove {
    position: absolute !important;
    top:  var(--mob-remove-offset-y) !important;  /* distance from the top of cell */
    right: 0.25rem !important;                    /* nudge inward from right edge   */
    width: 1.25em !important;
    height: 1.25em !important;
    line-height: 1.25em !important;
    text-align: center !important;
    border-radius: 50% !important;
  }

} 
.et_pb_text_1.et_pb_text.et_pb_bg_layout_light.et_pb_module.preset--module--divi-text--default {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}
@media (max-width: 980px) and (min-width: 765px) {
  .woocommerce-cart .shop_table td.product-thumbnail img {
    width: clamp(120px, 22vw, 180px) !important;   /* adjust 22vw if you want more/less scaling */
    min-width: 120px !important;
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .woocommerce-cart .shop_table td.product-thumbnail {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 1% !important;   /* lets image dictate width */
  }
}
body.woocommerce-cart .et_pb_section_1.et_pb_section.et_section_regular {
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-cart footer.et-l--footer {
  display: none !important;
}
body.woocommerce-cart .et_pb_section_1.et_pb_section.et_section_regular {
  min-height: calc(100vh + 60px); /* 60px ensures just enough to scroll */
}