/* PepTech cart drawer.

   Loaded on every page, including the Elementor-built ones where store.css is
   not present, so it carries the handful of design tokens it needs rather than
   depending on that stylesheet. The values are the design system's, copied - not
   new colours. Everything is scoped under .pt-dw. */

.pt-dw{
	--dw-ink:#0B1B2E; --dw-soft:#1E3350; --dw-muted:#546377; --dw-line:#D1DEEB;
	--dw-surface:#FFFFFF; --dw-sky:#E1F0FD; --dw-sky2:#CEE6F9;
	--dw-accent:#1668D6; --dw-accent-deep:#0F4C96; --dw-glow:rgba(22,104,214,.30);
	--dw-ok:#15803D; --dw-ok-bg:#DCFCE7;
	--dw-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
	--dw-mono:"IBM Plex Mono",ui-monospace,monospace;
	--dw-display:"Space Grotesk",Inter,system-ui,sans-serif;

	position:fixed;inset:0;z-index:99999;
}
.pt-dw[hidden]{display:none!important}
.pt-dw *,.pt-dw *::before,.pt-dw *::after{box-sizing:border-box}

.pt-dw-scrim{
	position:absolute;inset:0;background:rgba(11,27,46,.42);
	opacity:0;transition:opacity .28s cubic-bezier(.4,0,.2,1);
}
.pt-dw.is-open .pt-dw-scrim{opacity:1}

.pt-dw-panel{
	position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);
	display:flex;flex-direction:column;background:var(--dw-surface);
	font-family:var(--dw-body);color:var(--dw-ink);
	box-shadow:-24px 0 60px rgba(11,27,46,.18);
	transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
	outline:none;
}
.pt-dw.is-open .pt-dw-panel{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
	.pt-dw-scrim,.pt-dw-panel{transition:none}
}

.pt-dw-inner{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}

/* ------------------------------------------------------------------ header */

.pt-dw-head{
	display:flex;align-items:center;gap:10px;flex:0 0 auto;
	padding:16px 18px;border-bottom:1px solid var(--dw-line);
}
.pt-dw-back{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;padding:0;border:0;border-radius:9px;
	background:transparent;color:var(--dw-ink);cursor:pointer;
	transition:background .18s cubic-bezier(.4,0,.2,1);
}
.pt-dw-back:hover{background:var(--dw-sky)}
.pt-dw-title{
	flex:1 1 auto;margin:0;text-align:center;
	font-family:var(--dw-mono);font-size:12px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--dw-ink);
	display:flex;align-items:center;justify-content:center;gap:8px;
}
.pt-dw-count{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:20px;height:20px;padding:0 6px;border-radius:999px;
	background:var(--dw-ok-bg);color:var(--dw-ok);
	font-size:11px;font-weight:700;letter-spacing:0;
}
/* keeps the title optically centred against the 34px back button */
.pt-dw-head::after{content:"";flex:0 0 34px}

/* ------------------------------------------------------------------- items */

.pt-dw-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px}
.pt-dw-items{list-style:none;margin:0;padding:0}
.pt-dw-item{
	display:flex;gap:14px;align-items:flex-start;margin:0;
	padding:18px 0;border-bottom:1px solid var(--dw-line);
}
.pt-dw-item:last-child{border-bottom:0}
.pt-dw-item.is-busy{opacity:.45;pointer-events:none}

.pt-dw-thumb{flex:0 0 auto;width:66px}
.pt-dw-thumb img{
	display:block;width:66px;height:66px;object-fit:cover;
	border-radius:12px;background:var(--dw-sky);
}
.pt-dw-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pt-dw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pt-dw-name{
	font-family:var(--dw-display);font-size:16px;font-weight:600;
	letter-spacing:-.01em;line-height:1.3;color:var(--dw-ink);
}
.pt-dw-x{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;margin:-3px -4px 0 0;padding:0;border:0;border-radius:7px;
	background:transparent;color:var(--dw-muted);cursor:pointer;
	transition:color .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);
}
.pt-dw-x:hover{color:var(--dw-ink);background:var(--dw-sky)}
.pt-dw-variant{
	font-family:var(--dw-mono);font-size:11.5px;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;color:var(--dw-muted);
}
.pt-dw-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}

.pt-dw-qty{margin:0;display:block}
.pt-dw select[data-dw-qty]{
	height:38px;min-width:66px;padding:0 30px 0 13px;
	border:1px solid var(--dw-line);border-radius:999px;background:var(--dw-surface);
	font-family:var(--dw-body);font-size:14px;color:var(--dw-ink);cursor:pointer;
	-webkit-appearance:none;appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546377' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 10px center;background-size:14px 14px;
}
.pt-dw select[data-dw-qty]:focus{
	outline:none;border-color:var(--dw-accent);box-shadow:0 0 0 3px var(--dw-glow);
}

.pt-dw-price{display:flex;align-items:baseline;gap:8px;font-family:var(--dw-mono)}
.pt-dw-price del{color:var(--dw-muted);font-size:13px;font-weight:500;text-decoration:line-through}
.pt-dw-price ins{color:var(--dw-ink);font-size:16px;font-weight:700;text-decoration:none;background:transparent}

/* -------------------------------------------------------------------- foot */

.pt-dw-foot{
	flex:0 0 auto;padding:16px 18px 18px;
	border-top:1px solid var(--dw-line);background:var(--dw-surface);
}

.pt-dw-promo{display:flex;gap:8px;margin:0 0 14px}
/* scoped through .pt-dw and the tag name, the way the quantity select is:
   Astra styles bare input[type=text] and outranks a lone class */
.pt-dw input.pt-dw-promo-in{
	flex:1 1 auto;min-width:0;height:44px;padding:0 18px;
	border:1px solid var(--dw-sky2);border-radius:999px;
	background:linear-gradient(180deg,#F5FAFF 0%,var(--dw-sky) 100%);
	font-family:var(--dw-body);font-size:14px;color:var(--dw-ink);
	box-shadow:none;
	transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);
}
.pt-dw input.pt-dw-promo-in::placeholder{color:#7E93AB}
.pt-dw input.pt-dw-promo-in:focus{
	outline:none;border-color:var(--dw-accent);box-shadow:0 0 0 3px var(--dw-glow);
	background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFF 100%);
}
.pt-dw button.pt-dw-promo-go{
	flex:0 0 auto;height:44px;padding:0 22px;border:1px solid var(--dw-ink);border-radius:999px;
	background:transparent;color:var(--dw-ink);font-family:var(--dw-body);
	font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);
}
.pt-dw button.pt-dw-promo-go:hover{background:var(--dw-ink);color:#fff}
.pt-dw button.pt-dw-promo-go[disabled]{opacity:.5;pointer-events:none}
.pt-dw-promo-msg{font-size:12.5px;line-height:1.5;color:#8C2020;margin:-8px 0 12px}

.pt-dw-coupons{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.pt-dw-coupon{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--dw-ink)}
.pt-dw-coupon svg{color:var(--dw-ok);flex:0 0 auto}
.pt-dw-coupon-code{font-family:var(--dw-mono);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.pt-dw-coupon-on{
	flex:1 1 auto;font-size:12px;color:var(--dw-ok);font-weight:600;
}
.pt-dw-coupon-x{
	flex:0 0 auto;border:0;background:transparent;padding:0;cursor:pointer;
	font-family:var(--dw-body);font-size:12.5px;color:var(--dw-muted);
	text-decoration:underline;text-underline-offset:3px;
}
.pt-dw-coupon-x:hover{color:var(--dw-ink)}

.pt-dw-bar{
	height:6px;border-radius:999px;background:var(--dw-sky2);overflow:hidden;margin:0 0 7px;
}
.pt-dw-bar-fill{
	display:block;height:100%;border-radius:999px;background:var(--dw-accent);
	transition:width .4s cubic-bezier(.4,0,.2,1);
}
.pt-dw-bar.is-on .pt-dw-bar-fill{background:#16A34A}
/* remaining amount on the left, the threshold it is counting towards on the
   right, so the number the bar is measured against is on the line with it */
.pt-dw-bar-note{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--dw-soft);
}
.pt-dw-bar-target{flex:0 0 auto;font-family:var(--dw-mono);color:var(--dw-muted)}
.pt-dw-bar-note .pt-dw-ok{color:var(--dw-ok)}
.pt-dw-bar-note .amount,.pt-dw-bar-note bdi{font-family:var(--dw-mono)}

.pt-dw-meta{
	margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--dw-line);
	font-size:12px;line-height:1.5;color:var(--dw-muted);
}

.pt-dw-totals{margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.pt-dw-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0}
.pt-dw-row dt{margin:0;font-size:15px;font-weight:600;color:var(--dw-ink)}
.pt-dw-row dd{margin:0;font-family:var(--dw-mono);font-size:19px;font-weight:700;color:var(--dw-ink)}
.pt-dw-row.is-credit dt,.pt-dw-row.is-credit dd{color:var(--dw-ok);font-size:14px}
.pt-dw-row.is-credit dd{font-size:15px}
.pt-dw-row del{color:var(--dw-muted);font-size:13px;font-weight:500;margin-right:6px}

.pt-dw-go{
	display:flex;align-items:center;justify-content:center;gap:9px;
	width:100%;height:54px;border-radius:999px;
	background:var(--dw-ink);color:#fff;text-decoration:none;
	font-family:var(--dw-body);font-size:16px;font-weight:600;
	transition:background .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.pt-dw-go:hover,.pt-dw-go:focus-visible{
	background:var(--dw-accent);color:#fff;box-shadow:0 10px 28px var(--dw-glow);
}

/* ------------------------------------------------------------------- empty */

.pt-dw-empty{
	flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:14px;padding:40px 24px;text-align:center;
}
.pt-dw-empty-t{margin:0;font-size:15px;color:var(--dw-muted)}
.pt-dw-shop{
	display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;
	border-radius:999px;background:var(--dw-ink);color:#fff;text-decoration:none;
	font-size:15px;font-weight:600;
}
.pt-dw-shop:hover{background:var(--dw-accent);color:#fff}

/* the page must not scroll behind an open drawer */
body.pt-dw-locked{overflow:hidden}