/* ==================================================================
   Art of Socks — mini cart
   ==================================================================
   Elementor's Menu Cart widget, restyled. Nothing here replaces markup
   or changes behaviour: the side-cart open/close, the scrim, the
   remove buttons and WooCommerce's fragment refresh are all Elementor's
   and are left alone.

   Scoped to `.elementor-widget-woocommerce-menu-cart` rather than a body
   class. The header is on every page of the site, and a body class that
   has to be present everywhere is one more thing that can be absent —
   which is how three earlier rounds on this project went wrong. The
   widget class is written by Elementor itself and is always there.

   The palette is read from the --aos-* variables where they exist
   (they are declared on .aos-arch) and falls back to the same values
   inline, so the panel is correct on a page that never gets that class.
   ------------------------------------------------------------------ */

.elementor-widget-woocommerce-menu-cart{
  --mc-ink:var(--aos-ink,#1E293B);
  --mc-text:var(--aos-ink-2,#4A5568);
  --mc-muted:#82806F;
  --mc-line:var(--aos-line,#E4DED5);
  --mc-brass:var(--aos-brass,#A9884E);
  --mc-paper:var(--aos-surface,#FFFFFF);
  --mc-sand:var(--aos-surface-2,#F3EFEA);
  --mc-red:var(--aos-brand,#99332F);
  --mc-serif:Newsreader,Georgia,"Times New Roman",serif;
}

/* ---- 1. The panel shell ------------------------------------------ */
/* Elementor pads `__main` at 20px 30px and lets the whole column
   scroll. The padding moves inward to the three regions instead, so the
   header rule and the footer rule can run edge to edge and only the
   product list scrolls.

   Its `position` is deliberately not touched. Elementor sets the side
   cart's main panel to `position:fixed` with top:0 and bottom:0, and
   that pair is what stretches it to the full height of the window.
   Setting `position:relative` here to create a containing block for the
   close button collapsed the panel to the height of its contents — 525px
   of white ending mid-screen. A fixed element is already a containing
   block for absolutely positioned descendants, so nothing was needed. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main{
  width:380px; max-width:100vw;
  padding:0;
  bottom:auto; max-height:100vh;
  border-left:1px solid var(--mc-line);
  border-bottom:1px solid var(--mc-line);
  background:var(--mc-paper);
  box-shadow:-18px 0 44px rgba(33,30,27,.16);
}

/* The panel has no heading element of its own — WooCommerce doesn't
   print one and Elementor doesn't either — so it is generated here.
   Override the wording with the plugin's `minicart_title` option, which
   prints --aos-mc-title; set that option to '' to drop the line. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before{
  content:var(--aos-mc-title,"Your cart");
  display:block; padding:20px 22px 14px;
  border-bottom:1px solid var(--mc-line);
  font-family:inherit; font-size:17px; font-weight:600;
  letter-spacing:-.005em; line-height:1.25; color:var(--mc-ink);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button{
  position:absolute; top:17px; right:20px; z-index:2;
  width:30px; height:30px; margin:0;
  border:1px solid var(--mc-line); border-radius:6px;
  color:var(--mc-text); background:var(--mc-paper);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button:hover{
  border-color:var(--mc-ink); color:var(--mc-ink);
}

/* The content wrapper carries the column so the list can take the slack
   and the footer stays put. min-height:0 is what actually lets a flex
   child scroll rather than grow. */
.elementor-widget-woocommerce-menu-cart .widget_shopping_cart_content{
  flex:0 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

/* ---- 2. The product list ----------------------------------------- */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products{
  flex:0 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:2px 22px;
  scrollbar-width:thin;
}

/* Elementor's own rule is `.elementor-menu-cart__product{grid-template-
   columns:28% auto}`, so on a 380px panel the thumbnail column is a
   percentage of whatever the panel happens to be. A fixed 64px square
   keeps every row identical, and minmax(0,1fr) stops a long unbroken
   title from stretching the track past the row. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product{
  position:relative;
  display:grid; grid-template-columns:64px minmax(0,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:"thumb name" "thumb price";
  gap:0 14px;
  padding:16px 34px 16px 0;
  border-bottom:0;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product + .elementor-menu-cart__product{
  border-top:1px solid var(--mc-line);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image{
  grid-area:thumb; align-self:start;
  width:64px; height:64px; margin:0;
  border:1px solid var(--mc-line); border-radius:4px;
  background:var(--mc-sand); overflow:hidden;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image a,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img{
  display:block; width:100%; height:100%; object-fit:cover;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name{
  grid-area:name; padding:0; margin:0;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name > a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13.5px; line-height:1.35; font-weight:500;
  color:var(--mc-ink); text-decoration:none;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name > a:hover{
  color:var(--mc-red);
}

/* The variation line — on this shop that is "Estimated delivery" — is
   currently a bold 14px term with the value right-aligned beside it,
   wrapping to three lines and taking 93px of the row. One line, small,
   truncated. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation{
  display:flex; flex-wrap:nowrap; align-items:baseline; gap:5px;
  margin:4px 0 0; padding:0;
  font-size:11.5px; line-height:1.45; color:var(--mc-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation dt,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation dd{
  margin:0; padding:0; font-size:inherit; line-height:inherit;
  overflow:hidden; text-overflow:ellipsis;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation dt{
  flex:0 0 auto; font-weight:600; color:var(--mc-text);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation dd{
  flex:0 1 auto; color:var(--mc-muted);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name dl.variation p{
  margin:0; display:inline;
}

/* The price was rgb(213,216,220) on white — a pale grey well under any
   readable contrast, and the one line in the row a customer is checking. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{
  grid-area:price; align-self:start;
  padding:0; margin:6px 0 0;
  font-size:13px; line-height:1.4; color:var(--mc-ink);
  font-variant-numeric:tabular-nums;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .quantity{
  display:inline;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .product-quantity{
  color:var(--mc-muted);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .woocommerce-Price-amount{
  font-weight:600; color:var(--mc-ink);
}

/* The remove control keeps its 22px box on purpose: the × is drawn by
   ::before and ::after on this div, sized from the box, so resizing it
   would move the two strokes off centre. Only its colours and position
   change. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove{
  position:absolute; top:16px; right:0; margin:0;
  border-color:var(--mc-line); color:var(--mc-muted);
  background:var(--mc-paper);
  transition:border-color .12s ease, color .12s ease;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover{
  border-color:var(--mc-red); color:var(--mc-red);
}

/* ---- 3. Subtotal and buttons ------------------------------------- */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:16px 22px 0; margin:0;
  border-top:1px solid var(--mc-line);
  font-size:20px; font-weight:600; color:var(--mc-ink);
  font-variant-numeric:tabular-nums;
}
/* WooCommerce prints the label as <strong>Subtotal:</strong>. Kept as a
   real element rather than replaced with generated content, so it stays
   translatable. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal strong{
  font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mc-brass);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons{
  display:grid; grid-template-columns:1fr; gap:8px;
  padding:14px 22px 20px; margin:0;
  border-top:0;
}
/* Checkout is the action this panel exists for, so it goes first and
   takes the brand colour. The DOM order is view-cart then checkout;
   `order` moves them without touching the markup. Either button being
   hidden simply leaves the other filling the column. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{
  order:2;
  height:44px; padding:0 18px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; letter-spacing:.01em; line-height:1;
  border:1px solid transparent; text-decoration:none;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout{
  order:1;
  background:var(--mc-red); border-color:var(--mc-red); color:#fff;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover{
  background:#832B27; border-color:#832B27; color:#fff;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart{
  background:var(--mc-paper); border-color:var(--mc-line); color:var(--mc-ink);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover{
  background:var(--mc-sand); border-color:var(--mc-ink); color:var(--mc-ink);
}

/* Elementor wraps each button's label in a span, and two rules in the
   header stylesheet reach it:

       .aos-hd-cart .elementor-button-text{ color:var(--hd-text) }
       @media (max-width:1024px){ .aos-hd-cart .elementor-button-text{ display:none } }

   Both were written for the toggle in the header — the running total
   beside the cart glyph, which is noise on a phone. But `.aos-hd-cart`
   is the whole widget, so they also reach the two buttons inside the
   panel: on desktop the Checkout label was drawn in ink on the red
   button rather than white, and below 1024px both labels disappeared
   altogether, leaving two empty bars.

   Named here rather than fixed at source because that CSS lives in
   Elementor's Site Settings and this stylesheet ships with the plugin.
   Scoped to the footer buttons, so the toggle's own label still hides
   on a phone as intended. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button .elementor-button-text{
  display:inline-block; color:inherit; font-size:inherit; font-weight:inherit;
}

/* A note under the subtotal, so the figure is not read as the total.
   Sits on the buttons wrapper because there is no element between the
   two to hang it on. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons::before{
  content:var(--aos-mc-note,"Shipping and any discount are worked out at checkout.");
  display:block; margin:-2px 0 6px;
  font-size:11.5px; line-height:1.45; color:var(--mc-muted);
}

/* ---- 4. Empty ---------------------------------------------------- */
/* Elementor prints __empty-message; WooCommerce's own class is on the
   same element on some versions, so both are named. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__empty-message,
.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{
  padding:54px 30px; margin:0; text-align:center;
  font-family:var(--mc-serif); font-size:16px; line-height:1.55;
  color:var(--mc-text);
}
/* With an empty cart WooCommerce prints no subtotal and no buttons, so
   there is nothing to hide — but Elementor still renders the wrappers,
   and an empty wrapper would otherwise show its border and the note. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal:empty,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons:empty{
  display:none;
}

/* WordPress's admin bar is fixed over the top of the window, so on a
   logged-in screen it covers the panel's heading and close button. Only
   admins ever see this, but they see it every time. */
body.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main{
  top:32px; max-height:calc(100vh - 32px);
}
@media screen and (max-width:782px){
  body.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main{
    top:46px; max-height:calc(100vh - 46px);
  }
}

/* ---- 5. The toggle in the header --------------------------------- */
/* The count bubble is already the brand red. It gains a ring in the
   header's own colour so it reads as a badge rather than a blob when it
   overlaps the cart glyph. */
.elementor-widget-woocommerce-menu-cart .elementor-button-icon-qty{
  border:2px solid var(--mc-paper);
  font-weight:700; letter-spacing:0;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button:focus-visible{
  outline:2px solid var(--mc-brass); outline-offset:2px;
}

/* ---- 6. Narrow screens ------------------------------------------- */
@media (max-width:440px){
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main{
    width:calc(100vw - 34px);
  }
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products{
    padding-inline:18px;
  }
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons{
    padding-inline:18px;
  }
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button{
    right:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove{
    transition:none;
  }
}