/* ============================================
   SEW & GROW — COMPARISON SECTION (redesign)
   Interactive bordered comparison table. Rows
   collapse to one punchy one-liner per column and
   expand on click/tap to reveal the full detail.
   All styles scoped under .sg-compare so nothing
   leaks into the Avada theme.

   Fonts: Kalam (handwritten) for the eyebrow + the
   "Sew & Grow" column header, Poppins for the
   heading + body — both already enqueued on the
   product page, so no font is loaded here.
   ============================================ */
.sg-compare{--coral:#E67E69;--coral-deep:#C9543C;--coral-tint:#FCF1ED;--coral-tint-2:#FBEAE4;--coral-border:#F0CFC5;--ink:#2C2826;--muted:#94908C;--muted-deep:#6E6A66;--line:#ECE7E2;--them-bg:#FAF9F7;--them-head:#F2EEEA;--sg-cols:212px 1fr 1fr;color:var(--ink);font-family:'Poppins',system-ui,sans-serif;}
.sg-compare *{box-sizing:border-box;margin:0;padding:0;}
/* The Avada theme ships a global Bootstrap-style gutter rule
   `.row{margin-left:-15px;margin-right:-15px}`. Our body rows use class="row",
   so they inherited it — each row became 30px wider than the header (which uses
   .heads, not .row) and the body's 1fr columns resolved 15px wider, drifting the
   coral column out of line. This higher-specificity reset (0,2,0 > the theme's
   0,1,0) pins every row to the table's true width so all grids share one width. */
.sg-compare .heads,.sg-compare .row{margin-left:0;margin-right:0;width:100%;}
.sg-compare .wrap{max-width:1180px;margin:0 auto;padding:30px 24px 44px;}
.sg-compare .eyebrow{font-family:'Kalam','Poppins',system-ui,sans-serif;font-size:26px;font-weight:700;color:var(--coral);text-align:center;line-height:1;margin-bottom:2px;}
.sg-compare .title{font-family:'Poppins',system-ui,sans-serif;font-size:38px;font-weight:800;text-align:center;letter-spacing:-.02em;color:var(--ink);line-height:1.05;}
.sg-compare .subtitle{text-align:center;max-width:640px;margin:9px auto 0;font-size:14px;line-height:1.45;color:var(--muted-deep);}
.sg-compare .hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px auto 0;font-size:13px;font-weight:700;color:var(--coral-deep);}
.sg-compare .hint .tap{display:inline-flex;width:17px;height:17px;border-radius:50%;background:var(--coral);color:#fff;align-items:center;justify-content:center;font-size:10px;}
.sg-compare .table{margin-top:18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 16px 44px -30px rgba(44,40,38,.22);}
.sg-compare .heads{display:grid;grid-template-columns:var(--sg-cols);border-bottom:1px solid var(--line);}
.sg-compare .heads .cell{padding:14px 22px;display:flex;align-items:center;justify-content:center;}
.sg-compare .heads .spacer{background:#fff;}
.sg-compare .heads .us{background:var(--coral-tint-2);border-left:1px solid var(--coral-border);border-right:1px solid var(--coral-border);}
.sg-compare .heads .them{background:var(--them-head);}
.sg-compare .heads .us .colname{font-family:'Kalam','Poppins',system-ui,sans-serif;font-weight:700;font-size:26px;color:var(--coral-deep);line-height:1;}
.sg-compare .heads .them .colname{font-size:15px;font-weight:700;color:var(--muted-deep);letter-spacing:.02em;}
.sg-compare .row+.row{border-top:1px solid var(--line);}
.sg-compare .main{position:relative;display:grid;grid-template-columns:var(--sg-cols);cursor:pointer;background:transparent;border:0;width:100%;text-align:left;font-family:inherit;}
.sg-compare .main:focus-visible{outline:2px solid var(--coral);outline-offset:-2px;}
.sg-compare .cell{padding:16px 22px;display:flex;align-items:center;}
.sg-compare .them{background:var(--them-bg);padding-right:46px;}
.sg-compare .label{gap:11px;background:#fff;}
.sg-compare .label .ico{font-size:21px;line-height:1;flex:none;width:24px;text-align:center;}
.sg-compare .label .name{font-weight:800;font-size:13.5px;color:var(--ink);line-height:1.2;}
.sg-compare .us{background:var(--coral-tint);border-left:1px solid var(--coral-border);border-right:1px solid var(--coral-border);}
.sg-compare .copy{font-size:14px;line-height:1.35;font-weight:800;}
.sg-compare .us .copy{color:var(--coral-deep);}
.sg-compare .them .copy{color:var(--muted-deep);}
.sg-compare .mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;margin-right:9px;vertical-align:middle;transform:translateY(-1px);flex:none;}
.sg-compare .mark.yes{background:var(--coral);color:#fff;}
.sg-compare .mark.no{background:#E3DED9;color:#fff;}
.sg-compare .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#F3ECE8;color:var(--coral-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:transform .25s ease,background .2s ease,color .2s ease;}
.sg-compare .main:hover .chev{background:var(--coral);color:#fff;}
.sg-compare .row.open .chev{transform:translateY(-50%) rotate(180deg);background:var(--coral);color:#fff;}
.sg-compare .main:hover .label{background:#FCFAF8;}
.sg-compare .detail{display:grid;grid-template-columns:var(--sg-cols);max-height:0;overflow:hidden;transition:max-height .3s ease;}
.sg-compare .row.open .detail{max-height:240px;}
.sg-compare .dcell{padding:0 22px;}
.sg-compare .dus{background:var(--coral-tint);border-left:1px solid var(--coral-border);border-right:1px solid var(--coral-border);}
.sg-compare .dthem{background:var(--them-bg);padding-right:46px;}
.sg-compare .dspacer{background:#fff;}
.sg-compare .row.open .dcell{padding-bottom:18px;}
.sg-compare .detail p{font-size:13px;line-height:1.5;font-weight:500;}
.sg-compare .dus p{color:#7a5a52;}
.sg-compare .dthem p{color:var(--muted);}
@media(max-width:760px){
 .sg-compare .wrap{padding:26px 16px 36px;}
 .sg-compare .eyebrow{font-size:22px;}
 .sg-compare .title{font-size:25px;line-height:1.1;}
 .sg-compare .subtitle{font-size:13px;}
 .sg-compare .heads .us .colname{font-size:22px;}
 .sg-compare .heads .them .colname{font-size:13px;}
 .sg-compare .heads .cell{padding:11px 14px;}
 .sg-compare .heads{grid-template-columns:1fr 1fr;}
 .sg-compare .heads .spacer{display:none;}
 .sg-compare .main{grid-template-columns:1fr 1fr;grid-template-areas:"label label" "us them";}
 .sg-compare .main .label{grid-area:label;border-bottom:1px solid var(--line);background:#fff;padding:11px 16px 11px 16px;padding-right:46px;}
 .sg-compare .cell{padding:13px 14px;}
 .sg-compare .them,.sg-compare .dthem{padding-right:14px;}
 .sg-compare .copy{font-size:12.5px;}
 .sg-compare .detail{grid-template-columns:1fr 1fr;}
 .sg-compare .detail .dspacer{display:none;}
 .sg-compare .chev{top:13px;transform:none;}
 .sg-compare .row.open .chev{transform:rotate(180deg);}
}