/* Compare page only. Flowing grids deliberately avoid horizontal scrolling. */
.compare30{--cmp-ink:var(--brand-secondary,#244531);--cmp-accent:var(--brand-primary,#f87d2d);--cmp-line:#e5e9e4;background:#fafbf8;padding:32px 0 56px;color:#283b31}
.compare30 *{box-sizing:border-box}.compare30 [hidden]{display:none!important}
.compare30-container{width:min(1240px,100%);margin:auto;padding:0 24px;min-width:0}
.compare30-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px 36px;background:#edf2e9;border:1px solid #dde5d7;border-radius:16px;margin-bottom:28px}
.compare30-eyebrow{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#60725e;margin-bottom:8px}
.compare30 .compare30-hero h1{font-size:clamp(26px,3vw,42px)!important;font-weight:700;line-height:1.13;color:var(--cmp-ink);margin:0 0 12px;letter-spacing:-.035em}.compare30-hero h1>span{color:var(--cmp-accent)}
.compare30-hero p{font-size:14px;line-height:1.6;max-width:490px;margin:0;color:#64715f}
.compare30-hero-action{display:flex;gap:22px;align-items:center;flex-shrink:0}.compare30-count{font-size:36px;font-weight:700;line-height:1;color:var(--cmp-ink)}.compare30-count small{display:block;font-size:11px;font-weight:500;line-height:1.5;margin-top:6px;white-space:nowrap}
.compare30 a{text-decoration:none}.compare30 a:hover{text-decoration:none}.compare30 button,.compare30 a{touch-action:manipulation}
.compare30 .compare30-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 16px;background:var(--cmp-ink);border:1px solid var(--cmp-ink);border-radius:6px;color:#fff;font-size:13px;font-weight:600;line-height:1.4;text-align:center;white-space:normal;width:100%;cursor:pointer;transition:background .15s,box-shadow .15s}
.compare30 .compare30-button:hover{background:#365a41;color:#fff;box-shadow:0 3px 8px #24453118}.compare30 .compare30-button-light{background:#fff;color:var(--cmp-ink);border-color:#c9d5c3;min-width:150px}.compare30 .compare30-button-light:hover{background:#f9fcf7;color:var(--cmp-ink)}
.compare30 :is(a,button,input):focus-visible{outline:3px solid var(--cmp-accent);outline-offset:3px}.compare30 button:disabled{opacity:.55;cursor:wait}
.compare30-products{display:grid;grid-template-columns:repeat(var(--compare-columns),minmax(0,1fr));gap:16px;margin-bottom:32px;align-items:stretch}
.compare30-card{min-width:0;background:#fff;border:1px solid var(--cmp-line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 3px 14px #24453105}
.compare30-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.compare30 form{margin:0!important;min-width:0}
.compare30-index{font-size:11px;font-weight:700;line-height:24px;color:#677565;background:#f0f3ed;padding:0 7px;display:inline-block;border-radius:4px;flex-shrink:0}
.compare30-remove{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;padding:6px 0 6px 10px;color:#84776e;font-size:12px}.compare30-remove:hover{color:#a33923}.compare30-remove span{font-size:22px;line-height:1}
.compare30-image{display:grid;place-items:center;background:#f9faf6;border-radius:8px;aspect-ratio:1.35;overflow:hidden;padding:14px}.compare30-image img{width:100%;height:100%;max-height:200px;object-fit:contain;mix-blend-mode:multiply}
.compare30-card-body{min-width:0;flex:1}.compare30-stock{display:flex;gap:6px;align-items:center;font-size:11px;color:#926248;line-height:1.5}.compare30-stock i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}.compare30-stock.is-available{color:#427049}
.compare30 .compare30-card h2{font-size:16px!important;line-height:1.45;font-weight:600;margin:9px 0 12px;overflow-wrap:anywhere}.compare30-card h2 a{color:#263e2c}.compare30-price{font-size:19px;font-weight:700;color:var(--cmp-ink);overflow-wrap:anywhere}.compare30-price del,.compare30-values del{color:#8b9188;font-size:.8em;font-weight:400;margin-left:4px}
.compare30-actions{display:grid;gap:4px}.compare30-details{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;font-size:12px;color:#60725e;text-align:center}.compare30-unavailable{display:grid;place-items:center;min-height:44px;font-size:12px;border:1px solid var(--cmp-line);background:#f8f8f6;color:#84776e;border-radius:6px}
.compare30-comparison{background:#fff;border:1px solid var(--cmp-line);border-radius:12px;padding:26px;min-width:0}
.compare30-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.compare30 .compare30-toolbar h2{margin:0;font-size:25px!important;font-weight:650;line-height:1.25;color:var(--cmp-ink)}
.compare30-toggle{display:flex;align-items:center;gap:10px;font-size:13px;min-height:44px;padding:8px 12px;background:#f6f8f3;border:1px solid #e7ebe1;border-radius:6px;cursor:pointer;margin:0}.compare30-toggle input{appearance:auto!important;width:18px!important;height:18px!important;min-width:18px;margin:0;accent-color:var(--cmp-ink)}
.compare30-tip,.compare30-filter-status{font-size:12px;color:#6e7969;line-height:1.5}.compare30-filter-status:empty{display:none}
.compare30-feature{padding:20px 0;border-top:1px solid var(--cmp-line)}.compare30 .compare30-feature h3{display:flex;align-items:center;gap:10px;font-size:13px!important;font-weight:700;color:var(--cmp-ink);margin:0 0 14px;overflow-wrap:anywhere}
.compare30-difference{font-size:10px;line-height:1.5;font-weight:500;padding:2px 7px;background:#fff2e7;color:#9e6031;border-radius:4px}
.compare30-values{display:grid;grid-template-columns:repeat(var(--compare-columns),minmax(0,1fr));gap:16px;margin:0}
.compare30-values>div{min-width:0;padding:0 12px;border-left:2px solid #eaf0e5}.compare30-values dt{display:flex;align-items:flex-start;gap:8px;font-size:11px;font-weight:500;line-height:1.5;color:#7a8375;overflow-wrap:anywhere;margin-bottom:10px}.compare30-values dd{font-size:14px;line-height:1.6;font-weight:500;margin:0;color:#334337;overflow-wrap:anywhere}
.compare30-footnote{font-size:11px;color:#7b8377;line-height:1.7;border-top:1px solid var(--cmp-line);padding-top:18px;margin:4px 0 0}.compare30-no-differences,.compare30-notice{padding:16px;background:#f1f6ed;border:1px solid #dde7d6;border-radius:6px;font-size:14px}
.compare30-empty{max-width:600px;margin:30px auto;text-align:center;padding:44px 24px}.compare30-empty-icon{display:grid;place-items:center;width:72px;height:72px;font-size:36px;border:1px solid #dbe6d3;border-radius:18px;background:#edf3e7;color:var(--cmp-ink);margin:0 auto 22px}.compare30 .compare30-empty h2{font-size:25px!important;line-height:1.35;color:var(--cmp-ink)}.compare30-empty p{font-size:14px;line-height:1.8;color:#737f6c;margin:16px 0 24px}.compare30-empty .compare30-button{width:fit-content;margin:auto}
@media(max-width:1100px){.compare30-products,.compare30-values{grid-template-columns:repeat(2,minmax(0,1fr))}.compare30-hero{gap:20px;padding:26px}.compare30-hero-action{gap:14px}.compare30-hero p{max-width:390px}}
@media(max-width:600px){.compare30{padding:18px 0 34px}.compare30-container{padding:0 14px}.compare30-hero{display:block;padding:22px 18px;margin-bottom:20px}.compare30-hero-action{margin-top:22px;justify-content:space-between}.compare30-count{font-size:28px}.compare30-hero-action .compare30-button{width:auto}.compare30-products{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.compare30-card{display:grid;grid-template-columns:80px minmax(0,1fr);padding:12px;gap:10px 12px}.compare30-card-top{grid-column:1/-1}.compare30-image{align-self:start;aspect-ratio:1;padding:6px}.compare30-image img{height:68px}.compare30 .compare30-card h2{font-size:14px!important;margin:6px 0 8px}.compare30-price{font-size:17px}.compare30-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:center;gap:10px}.compare30-actions .compare30-button{font-size:12px;padding:10px}.compare30-details{font-size:11px}.compare30-comparison{padding:18px 14px}.compare30-toolbar{display:block}.compare30-toggle{margin-top:16px;width:fit-content}.compare30 .compare30-toolbar h2{font-size:23px!important}.compare30-values{grid-template-columns:1fr;gap:0}.compare30-values>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-left:0;border-top:1px dashed #ebeee7}.compare30-values>div:first-child{border-top:0}.compare30-values dt{margin:0;font-size:12px;gap:6px;color:#68765f}.compare30-values dd{text-align:right;font-size:13px}.compare30-feature{padding:18px 0 8px}.compare30 .compare30-feature h3{margin-bottom:4px}.compare30-empty{padding:28px 8px}.compare30-empty .compare30-button{width:100%}}
@media(prefers-reduced-motion:reduce){.compare30 .compare30-button{transition:none}}

/* Align prices and detail values even when product names wrap differently. */
@media(min-width:601px){.compare30-card-body{display:flex;flex-direction:column}.compare30-price{margin-top:auto;padding-top:4px}.compare30-values>div{display:flex;flex-direction:column}.compare30-values dd{margin-top:auto}.compare30-image{height:180px;aspect-ratio:auto}.compare30-image img{max-height:100%;max-width:100%;min-height:0}}

/* Match the cart's warm brand palette and keep section gaps under 30px. */
body.page-compare .compare30{--cmp-ink:var(--brand-ink,#2b211c);--cmp-line:var(--brand-border,#eadbd1);background:linear-gradient(180deg,var(--brand-soft2,#fff9f4),#fff 320px);padding-bottom:30px!important}
body.page-compare .compare30-container{padding-top:24px}
body.page-compare .compare30-hero{background:linear-gradient(135deg,#fff,var(--brand-soft,#fff3e9));border-color:var(--brand-primary,#f87d2d);margin-bottom:24px!important;padding:24px;box-shadow:0 8px 24px #2b211c08}
body.page-compare .compare30-eyebrow{color:var(--brand-primary,#f87d2d)}
body.page-compare .compare30-hero p{color:#746a64}
body.page-compare .compare30-products{padding:0!important;margin-top:0!important;margin-bottom:24px!important}
body.page-compare .compare30-comparison{padding:24px!important;margin:0!important}
body.page-compare .compare30-feature{padding:18px 0!important;margin:0!important}
body.page-compare .compare30-index,body.page-compare .compare30-image,body.page-compare .compare30-toggle{background:var(--brand-soft2,#fff9f4);border-color:var(--brand-border,#eadbd1);color:#79695d}
body.page-compare .compare30-values>div{border-color:var(--brand-border,#eadbd1)}
body.page-compare .compare30-card h2 a{color:var(--brand-ink,#2b211c)}
body.page-compare .compare30 .compare30-button{background:var(--brand-primary,#f87d2d);border-color:var(--brand-primary,#f87d2d);color:var(--brand-on-primary,#fff)}
body.page-compare .compare30 .compare30-button:hover{filter:brightness(.95)}
body.page-compare .compare30 .compare30-button-light{background:#fff;color:var(--brand-primary,#f87d2d);border-color:var(--brand-border,#eadbd1)}
body.page-compare .compare30-empty{padding:24px!important;margin:0 auto!important}
@media(max-width:600px){body.page-compare .compare30-container{padding-top:20px}body.page-compare .compare30-hero{padding:20px 18px;margin-bottom:20px!important}body.page-compare .compare30-comparison{padding:18px 14px!important}}

/* Match Book Puja primary actions; requested 16px text also stays on mobile. */
body.page-compare .compare30 .compare30-button,
body.page-compare .compare30 .compare30-button.compare30-button-light{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 23px;border:1px solid var(--brand-primary,#f47721);border-radius:28px;background:var(--brand-primary,#f47721);color:#fff!important;font-size:16px!important;font-weight:800;line-height:26px;text-decoration:none;white-space:normal;box-sizing:border-box}
body.page-compare .compare30 .compare30-button .site-svg-icon{display:block;width:18px!important;height:18px!important;min-width:18px;flex:0 0 18px;color:inherit;stroke:currentColor}
body.page-compare .compare30 .compare30-button>span{min-width:0;overflow-wrap:anywhere}
body.page-compare .compare30 .compare30-button:hover{color:#fff!important;background:var(--brand-primary,#f47721);filter:brightness(.95)}
body.page-compare .compare30 :is(.compare30-price,.compare30-values) del{color:#c43535!important;text-decoration-color:currentColor}
@media(max-width:600px){body.page-compare .compare30 .compare30-button,body.page-compare .compare30 .compare30-button.compare30-button-light{min-height:50px}body.page-compare .compare30-actions{grid-template-columns:1fr;gap:0}body.page-compare .compare30-hero-action{flex-wrap:wrap;gap:12px}body.page-compare .compare30-hero-action .compare30-button{flex:1;min-width:170px}}
