/* Clergy cart — shared by the drawer and the cart page.
   Loaded once in theme.liquid. All colours come from the Clergy Design Tokens. */

/* ---------- shared line item ----------
   Cart page: 4 columns — image · details · quantity/remove · price.
   Drawer (compact) overrides this below to a 2-column stack. */
.clg-cl{display:grid;grid-template-columns:88px minmax(0,1.9fr) minmax(0,1fr) minmax(0,.9fr);gap:16px;padding:20px 0;border-top:1px solid var(--line);align-items:start}
.clg-cl:first-child{border-top:none}
.clg-cl-img{display:block;width:88px;height:110px;background:#ffffff00;border:none;overflow:hidden;flex-shrink:0}
.clg-cl-img img{width:100%;height:100%;object-fit:contain;display:block}
.clg-cl-body{min-width:0}
.clg-cl-title{font-family:var(--clg-serif);font-size:19px;font-weight:500;color:var(--ink);text-decoration:none;line-height:1.2;display:block}
.clg-cl-title:hover{color:var(--oxblood)}
.clg-cl-var{font-size:12px;color:var(--ink-soft);margin-top:4px}
.clg-cl-props{list-style:none;margin:8px 0 0;padding:0;font-size:11.5px;color:var(--ink-soft);line-height:1.6;overflow-wrap:anywhere;word-break:break-word}
.clg-cl-props span{color:var(--gold-text);font-weight:600}
.clg-cl-disc{list-style:none;margin:8px 0 0;padding:0;font-size:11.5px;color:var(--oxblood);font-weight:600}
.clg-cl-foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.clg-cl-qty{display:flex;align-items:center;border:1px solid var(--line);background:var(--ivory)}
.clg-cl-qty button{width:32px;height:34px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink);font-family:var(--clg-sans)}
.clg-cl-qty button:hover{color:var(--oxblood)}
.clg-cl-qty input{width:38px;height:34px;text-align:center;border:none;background:none;font-family:var(--clg-sans);font-size:13px;font-weight:600;color:var(--ink);-moz-appearance:textfield}
.clg-cl-qty input::-webkit-outer-spin-button,.clg-cl-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.clg-cl-fixed{font-family:var(--clg-sans);font-size:13px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);background:var(--ivory);padding:8px 12px;line-height:1}
.clg-cl-rm{background:none;border:none;padding:0;cursor:pointer;font-family:var(--clg-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.clg-cl-rm:hover{color:var(--oxblood);border-bottom-color:var(--oxblood)}
.clg-cl-qty button svg{display:block;margin:0 auto}
/* Service lines: a bare trash button in place of a stepper. */
.clg-cl-rm-ico{background:none;border:none;cursor:pointer;color:var(--ink-soft);padding:6px;line-height:0;display:inline-flex;align-items:center;justify-content:center}
.clg-cl-rm-ico:hover{color:var(--oxblood)}
.clg-cl-price{text-align:right;white-space:nowrap}
.clg-cl-price .now{font-family:var(--clg-serif);font-size:18px;color:var(--ink);display:block}
.clg-cl-price s{font-size:12px;color:var(--ink-soft);display:block}
.clg-cl-price .each{font-size:11px;color:var(--ink-soft);display:block;margin-top:2px}
.clg-cl.is-loading{opacity:.45;pointer-events:none}

.clg-cl.is-compact{grid-template-columns:70px 1fr;gap:12px;padding:16px 0}
.clg-cl.is-compact .clg-cl-img{width:70px;height:88px}
.clg-cl.is-compact .clg-cl-title{font-size:16px}
.clg-cl.is-compact .clg-cl-price{text-align:left;margin-top:8px}
.clg-cl.is-compact .clg-cl-price .now{font-size:23px;font-weight:700;color:var(--oxblood);margin-top:2px}

/* ---------- drawer ---------- */
.clg-scrim-cart{position:fixed;inset:0;background:rgba(28,24,19,.5);z-index:110;opacity:0;visibility:hidden;transition:.3s}
.clg-scrim-cart.show{opacity:1;visibility:visible}
.clg-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--parchment);z-index:111;
  transform:translateX(105%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(28,24,19,.18);font-family:var(--clg-sans)}
.clg-drawer.open{transform:translateX(0)}
.clg-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.clg-drawer-head h2{font-family:var(--clg-serif);font-size:24px;font-weight:500;color:var(--ink);margin:0}
.clg-drawer-head .cnt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-left:8px}
.clg-drawer-close{background:none;border:none;cursor:pointer;font-size:28px;line-height:1;color:var(--ink);padding:0 0 0 10px}
.clg-drawer-close:hover{color:var(--oxblood)}
.clg-drawer-body{flex:1;overflow-y:auto;padding:0 24px}
.clg-drawer-foot{border-top:1px solid var(--line);padding:18px 24px 22px;background:var(--ivory);flex-shrink:0}
.clg-drawer-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.clg-drawer-row .tl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.clg-drawer-row .tv{font-family:var(--clg-serif);font-size:26px;color:var(--ink)}
.clg-drawer-note{font-size:11.5px;color:var(--ink-soft);margin-bottom:14px}
.clg-drawer-foot .clg-btn{width:100%;justify-content:center}
.clg-drawer-foot .clg-viewcart{display:block;text-align:center;margin-top:10px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);text-decoration:none}
.clg-drawer-foot .clg-viewcart:hover{color:var(--oxblood)}
.clg-cart-empty{padding:60px 0;text-align:center;color:var(--ink-soft)}
.clg-cart-empty p{font-family:var(--clg-serif);font-size:22px;color:var(--ink);margin-bottom:16px}

/* ---------- cart page ---------- */
/* Quantity + remove sit in their own centre column, stacked and centred,
   with the row vertically aligned to the middle so all three columns line up. */
.clg-cart-items .clg-cl{align-items:center}
.clg-cart-items .clg-cl-foot{flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-top:0;flex-wrap:nowrap}
.clg-cart-items .clg-cl-price{align-self:center}
/* Wider items box so the three columns sit comfortably beside the summary. */
.clg-cartpage-grid{display:grid;grid-template-columns:2fr .78fr;gap:40px;align-items:start}
.clg-cart-items{background:var(--ivory);border:1px solid var(--line);padding:4px 24px}
.clg-cart-sum{background:var(--ivory);border:1px solid var(--line);padding:26px;position:sticky;top:100px}
.clg-cart-sum h3{font-family:var(--clg-serif);font-size:22px;font-weight:500;color:var(--ink);margin-bottom:16px}
.clg-cart-sum .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.clg-cart-sum .row:first-of-type{border-top:none}
.clg-cart-sum .row b{color:var(--ink);font-weight:600}
.clg-cart-sum .total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 6px;border-top:2px solid var(--ink);margin-top:6px}
.clg-cart-sum .total .tl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.clg-cart-sum .total .tv{font-family:var(--clg-serif);font-size:30px;color:var(--ink)}
.clg-cart-sum .clg-btn{width:100%;justify-content:center;margin-top:14px}
.clg-cart-note{margin-top:18px}
.clg-cart-note label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.clg-cart-note textarea{width:100%;min-height:80px;padding:12px;border:1px solid var(--line);background:#fff;font-family:var(--clg-sans);font-size:14px;color:var(--ink);resize:vertical}
.clg-cart-tax{font-size:11.5px;color:var(--ink-soft);margin-top:12px;text-align:center;line-height:1.6}

@media(max-width:900px){
  .clg-cartpage-grid{grid-template-columns:1fr;gap:28px}
  .clg-cart-sum{position:static}
  .clg-cart-items{padding:4px 16px}
  /* Narrow screens: collapse back to image + a single stacked details column. */
  .clg-cl{grid-template-columns:70px 1fr;gap:12px}
  .clg-cl-img{width:70px;height:88px}
  .clg-cart-items .clg-cl{align-items:start}
  .clg-cart-items .clg-cl-foot{flex-direction:row;align-items:center;justify-content:flex-start;grid-column:2;margin-top:8px}
  .clg-cart-items .clg-cl-price{align-self:start;text-align:left;grid-column:2;margin-top:8px}
}

/* Garment + its service add-ons (MTM, embroidery) shown as ONE bundle:
   the garment line, then its smaller service lines tucked beneath it, all sitting
   on a single tinted card so they read as one purchase. */
.clg-cl-group{border-top:1px solid var(--line);background:var(--ivory);padding:0 14px;margin:0 -14px}
/* Alternate the group tint — every 2nd, 4th … bundle gets a lighter wash so
   adjacent bundles stay easy to tell apart. */
.clg-cart-items > .clg-cl-group:nth-child(even of .clg-cl-group),
.clg-drawer-body > .clg-cl-group:nth-child(even of .clg-cl-group){background:var(--parchment-deep)}
.clg-cart-items > .clg-cl-group:first-child,
.clg-drawer-body > .clg-cl-group:first-child{border-top:none}
/* no internal rules — the whole group is one card */
.clg-cl-group > .clg-cl{border-top:none}
.clg-cl-group > .clg-cl:not([data-clg-child]){padding-bottom:6px}
.clg-cl-group > .clg-cl[data-clg-child]{padding:8px 0 8px 20px;position:relative}
.clg-cl-group > .clg-cl[data-clg-child] .clg-cl-img{width:46px;height:58px}
.clg-cl-group > .clg-cl.is-compact[data-clg-child] .clg-cl-img{width:42px;height:52px}
/* Services with no image keep the (now invisible) image column so every row's
   details, quantity and price stay aligned down the page. */
.clg-cl-group > .clg-cl[data-clg-child] .clg-cl-img:empty{border:none;background:none}
.clg-cl-group > .clg-cl.is-compact[data-clg-child]:has(.clg-cl-img:empty){grid-template-columns:1fr}
.clg-cl-group > .clg-cl[data-clg-child] .clg-cl-title{font-family:var(--clg-sans);font-size:14px;font-weight:600}
.clg-cl-group > .clg-cl.is-compact[data-clg-child] .clg-cl-price .now{font-size:16px}
.clg-cl-group > .clg-cl[data-clg-child]::before{content:'\21B3';position:absolute;left:2px;top:12px;color:var(--gold-text);font-size:14px;line-height:1}