/*
Theme Name: Пакуй
Theme URI: https://pakuy.com.ua/
Description: Тема магазину вакуумних пакетів «Пакуй». Зібрана з прототипу docs/prototype.html.
Author: Girlwood / The Chestnut
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: pakuy
*/

:root{
  --film:#F2F5F8; --paper:#FFFFFF; --ink:#14202B; --ink-2:#4A5C6B;
  --line:#D5E0E8; --line-soft:#E6EDF2;
  --valve:#0FAFFF; --valve-deep:#0A5C87; --ochre:#C98A3C;
  --ground:var(--film); --surface:var(--paper);
  --shadow:0 1px 2px rgba(20,32,43,.05), 0 8px 24px -12px rgba(20,32,43,.18);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --film:#0E1620; --paper:#16212C; --ink:#E8EFF4; --ink-2:#9BAEBC;
    --line:#2A3A47; --line-soft:#1E2B37;
    --valve:#3EC1FF; --valve-deep:#8FD8FF; --ochre:#E0A85C;
    --ground:var(--film); --surface:var(--paper);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --film:#0E1620; --paper:#16212C; --ink:#E8EFF4; --ink-2:#9BAEBC;
  --line:#2A3A47; --line-soft:#1E2B37;
  --valve:#3EC1FF; --valve-deep:#8FD8FF; --ochre:#E0A85C;
  --ground:var(--film); --surface:var(--paper);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.6 Manrope,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
h1,h2,h3{text-wrap:balance; margin:0}
a{color:inherit}

/* ── шапка ───────────────────────────────────────── */
.top{border-bottom:1px solid var(--line-soft); background:var(--surface)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px}
.logo{font:800 22px/1 Unbounded,Manrope,sans-serif; letter-spacing:-.02em}
.logo b{color:var(--valve); font-weight:800}
.top nav{display:flex; gap:22px; font-size:15px; color:var(--ink-2)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--valve-deep)}
@media(max-width:700px){.top nav{display:none}}
.top .wrap > .cartbtn{margin-left:auto}

/* ── герой ───────────────────────────────────────── */
.hero{padding:76px 0 64px}
.eyebrow{
  font:700 12px/1 JetBrains Mono,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--valve-deep);
}
.hero h1{
  font:600 clamp(34px,5.4vw,58px)/1.08 Unbounded,Manrope,sans-serif;
  letter-spacing:-.03em; margin:18px 0 0; max-width:16ch;
}
.hero h1 em{font-style:normal; color:var(--valve)}
.hero p{margin:22px 0 0; max-width:54ch; font-size:19px; color:var(--ink-2)}
.facts{display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:34px}
.fact{display:flex; align-items:baseline; gap:10px}
.fact b{font:700 26px/1 JetBrains Mono,monospace; color:var(--ink)}
.fact span{font-size:14px; color:var(--ink-2); max-width:15ch; line-height:1.35}

/* ── вибиралка ───────────────────────────────────── */
.picker{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:32px; box-shadow:var(--shadow);
}
.picker h2{font:600 24px/1.2 Unbounded,Manrope,sans-serif; letter-spacing:-.02em}
.picker > p{margin:10px 0 28px; color:var(--ink-2); font-size:16px}
.q{margin-bottom:24px}
.q-label{
  font:700 12px/1 JetBrains Mono,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:12px;
}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:620px){.opts{grid-template-columns:1fr}}
.opt{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--ground); border:1.5px solid var(--line); border-radius:10px;
  padding:16px 18px; color:var(--ink); font:500 16px/1.35 Manrope,sans-serif;
  transition:border-color .15s, background .15s;
}
.opt small{display:block; margin-top:5px; font-size:13.5px; color:var(--ink-2)}
.opt:hover{border-color:var(--valve)}
.opt[aria-pressed="true"]{border-color:var(--valve); background:color-mix(in srgb, var(--valve) 10%, var(--surface))}
.opt:focus-visible{outline:2px solid var(--valve); outline-offset:2px}

.result{
  margin-top:26px; padding-top:26px; border-top:1px dashed var(--line);
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.result .badge{
  font:700 11px/1 JetBrains Mono,monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ochre); border:1px solid var(--ochre); border-radius:999px; padding:6px 11px;
}
.result h3{font:700 20px/1.25 Manrope,sans-serif; margin:10px 0 4px}
.result .why{font-size:15px; color:var(--ink-2); max-width:44ch}
.result .price{font:700 30px/1 JetBrains Mono,monospace; margin-left:auto; white-space:nowrap}
.result.idle{color:var(--ink-2); font-size:15px}
.cta{
  display:inline-block; text-decoration:none; background:var(--valve); color:#06222F;
  font:700 16px/1 Manrope,sans-serif; padding:15px 26px; border-radius:10px; border:0; cursor:pointer;
}
:root[data-theme="dark"] .cta, :root:not([data-theme="light"]) .cta{color:#06222F}
.cta:hover{filter:brightness(1.07)}
.cta:focus-visible{outline:2px solid var(--valve-deep); outline-offset:3px}

/* ── секції ──────────────────────────────────────── */
section{padding:64px 0}
.sec-head{margin-bottom:28px}
.sec-head h2{font:600 clamp(24px,3.2vw,32px)/1.15 Unbounded,Manrope,sans-serif; letter-spacing:-.025em}
.sec-head p{margin:10px 0 0; color:var(--ink-2); max-width:58ch}

/* ── таблиця наборів ─────────────────────────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:860px; font-size:15px}
th,td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft)}
thead th{
  font:700 11px/1.3 JetBrains Mono,monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); background:var(--ground); border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:0}
tbody tr.on{background:color-mix(in srgb, var(--valve) 8%, var(--surface))}
.setname{font-weight:700}
.setname small{display:block; font-weight:400; color:var(--ink-2); font-size:13px; margin-top:3px}
.dims{font:400 13.5px/1.5 JetBrains Mono,monospace; color:var(--ink-2); white-space:nowrap}
td.num{font:700 16px/1 JetBrains Mono,monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.yes{color:var(--valve-deep); font-weight:700}
.no{color:var(--ink-2)}
.buy{
  appearance:none; cursor:pointer; white-space:nowrap;
  background:var(--valve); color:#06222F; border:0; border-radius:9px;
  font:700 14px/1 Manrope,sans-serif; padding:12px 20px;
}
.buy:hover{filter:brightness(1.07)}
.buy:focus-visible{outline:2px solid var(--valve-deep); outline-offset:3px}
.buy.ghost{background:transparent; color:var(--valve-deep); border:1.5px solid var(--line)}
.buy.ghost:hover{border-color:var(--valve); filter:none}

/* ── картки товару ───────────────────────────────── */
.cards{display:grid; gap:20px}
.card{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; scroll-margin-top:20px;
}
@media(max-width:840px){.card{grid-template-columns:1fr; gap:20px}}
.card.on{border-color:var(--valve); box-shadow:0 0 0 3px color-mix(in srgb,var(--valve) 18%,transparent)}
.stage{background:var(--ground); border-radius:10px; overflow:hidden; aspect-ratio:1/1}
.stage img{width:100%; height:100%; object-fit:contain; display:block}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.th{appearance:none; padding:0; cursor:pointer; background:var(--ground);
    border:1.5px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:1/1}
.th img{width:100%; height:100%; object-fit:contain; display:block}
.th.on{border-color:var(--valve)}
.th:focus-visible{outline:2px solid var(--valve); outline-offset:2px}
.info h3{font:600 23px/1.2 Unbounded,Manrope,sans-serif; letter-spacing:-.02em}
.info .lead{margin:12px 0 20px; color:var(--ink-2); font-size:15.5px; line-height:1.55}
.inbox ul{margin:10px 0 0; padding-left:20px; font-size:15px; line-height:1.6}
.inbox li{margin-bottom:5px}
.inbox strong{font-weight:700}
.foot{display:flex; align-items:center; gap:18px; margin-top:22px;
      padding-top:20px; border-top:1px solid var(--line-soft)}
.foot .p{font:700 28px/1 JetBrains Mono,monospace}
.foot .buy{margin-left:auto; padding:14px 26px; font-size:15px}
.more{border:0; padding:14px 0 0}
.more ul{margin:10px 0 0; padding-left:20px; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.more li{margin-bottom:6px}

/* ── кошик ───────────────────────────────────────── */
.cartbtn{
  appearance:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  background:var(--ground); border:1.5px solid var(--line); border-radius:999px;
  padding:9px 16px; color:var(--ink); font:700 14.5px/1 Manrope,sans-serif;
}
.cartbtn:hover{border-color:var(--valve)}
.cartbtn:focus-visible{outline:2px solid var(--valve); outline-offset:2px}
.cartbtn .n{
  background:var(--valve); color:#06222F; border-radius:999px; min-width:21px;
  padding:3px 6px; font:700 12px/1 JetBrains Mono,monospace; text-align:center;
}
.cartbtn[data-empty="1"] .n{display:none}

.promo{
  margin-top:14px; display:flex; align-items:center; gap:11px;
  font-size:15px; color:var(--ink-2);
}
.promo b{
  color:var(--ochre); border:1px solid var(--ochre); border-radius:999px;
  padding:5px 11px; font:700 11.5px/1 JetBrains Mono,monospace; letter-spacing:.08em;
}

.sheet[hidden]{display:none!important}
.sheet{
  position:fixed; inset:0; z-index:40; display:grid; place-items:end center;
  background:rgba(10,22,32,.5); backdrop-filter:blur(2px);
}
@media(min-width:721px){.sheet{place-items:center}}
.sheet-in{
  background:var(--surface); width:min(470px,100%); max-height:92vh; overflow-y:auto;
  border:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; padding:26px;
}
@media(min-width:721px){.sheet-in{border-radius:var(--r)}}
.sheet h3{font:600 21px/1.25 Unbounded,Manrope,sans-serif; letter-spacing:-.02em}
.sheet .close{float:right; appearance:none; background:none; border:0; cursor:pointer;
  color:var(--ink-2); font-size:24px; line-height:1; padding:0 4px}
.sheet .close:focus-visible{outline:2px solid var(--valve); outline-offset:2px}

.lines{list-style:none; margin:18px 0 0; padding:0}
.lines li{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.lines .nm{flex:1; min-width:0}
.lines .nm b{display:block; font-size:15.5px; line-height:1.3}
.lines .nm small{display:block; color:var(--ink-2); font-size:13px; margin-top:3px}
.lines .ln-sum{font:700 15px/1 JetBrains Mono,monospace; white-space:nowrap; min-width:64px; text-align:right}
.qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:9px}
.qty button{appearance:none; background:none; border:0; cursor:pointer; color:var(--ink);
  font:700 17px/1 Manrope,sans-serif; padding:9px 12px}
.qty button:focus-visible{outline:2px solid var(--valve); outline-offset:-2px}
.qty span{font:700 14px/1 JetBrains Mono,monospace; min-width:20px; text-align:center}

.nudge{
  margin-top:16px; padding:13px 15px; border-radius:10px; font-size:14.5px; line-height:1.45;
  background:color-mix(in srgb, var(--ochre) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--ochre) 45%, transparent);
}
.nudge b{color:var(--ochre)}
.nudge.done{
  background:color-mix(in srgb, var(--valve) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--valve) 45%, transparent);
}
.nudge.done b{color:var(--valve-deep)}

.sums{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.sums .row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:6px 0;
  font-size:15px; color:var(--ink-2)}
.sums .row b{font:700 15px/1 JetBrains Mono,monospace; color:var(--ink)}
.sums .row.disc, .sums .row.disc b{color:var(--ochre)}
.sums .row.tot{margin-top:8px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--ink)}
.sums .row.tot b{font-size:27px}

.empty{margin:22px 0; color:var(--ink-2); font-size:15px}
.fields{display:grid; gap:11px; margin:20px 0}
.fields input{
  font:400 16px/1 Manrope,sans-serif; color:var(--ink);
  background:var(--ground); border:1.5px solid var(--line); border-radius:9px; padding:14px 15px;
}
.fields input:focus{outline:2px solid var(--valve); outline-offset:1px; border-color:var(--valve)}
.fields input[aria-invalid="true"]{border-color:#D4523E}
.sheet .cta{width:100%; text-align:center}
.paynote{margin:13px 0 0; font-size:13.5px; color:var(--ink-2); text-align:center}

/* ── кроки ───────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
       border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface); display:flex; flex-direction:column}
.step img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--ground)}
.step .txt{padding:20px 20px 24px}
.step b{font:700 12px/1 JetBrains Mono,monospace; color:var(--valve-deep); letter-spacing:.1em; display:block}
.step h3{font:700 16.5px/1.3 Manrope,sans-serif; margin:12px 0 7px}
.step p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}

/* ── специфікація ────────────────────────────────── */
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px; max-width:760px}
@media(max-width:620px){.spec{grid-template-columns:1fr}}
.spec div{display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.spec dt{color:var(--ink-2); font-size:15px}
.spec dd{margin:0; font:700 14.5px/1.4 JetBrains Mono,monospace; text-align:right}

/* ── доставка + faq ──────────────────────────────── */
.two{display:grid; grid-template-columns:1fr 1fr; gap:44px}
@media(max-width:820px){.two{grid-template-columns:1fr; gap:36px}}
.ship li{margin-bottom:13px; color:var(--ink-2); font-size:15.5px}
.ship b{color:var(--ink)}
details{border-bottom:1px solid var(--line-soft); padding:15px 0}
summary{cursor:pointer; font-weight:700; font-size:15.5px; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--valve); font-family:JetBrains Mono,monospace; margin-right:10px}
details[open] summary::before{content:"–"}
details p{margin:11px 0 0; color:var(--ink-2); font-size:15px}

footer{border-top:1px solid var(--line-soft); padding:32px 0 48px; color:var(--ink-2); font-size:14px}
.note{
  margin:0 0 4px; font:700 11px/1 JetBrains Mono,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ochre);
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── дрібниці, яких не було в прототипі ──────────── */
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; background:var(--surface); padding:10px 14px; border-radius:10px; z-index:99}
.card .stage img{cursor:zoom-in}
.stock-out{color:var(--ochre); font:700 13px/1 JetBrains Mono,monospace}
.buy[disabled]{opacity:.45; cursor:not-allowed}
.added-note{font-size:13.5px; color:var(--valve-deep); margin-left:10px}

/* ── сторінки WooCommerce у тій самій сітці ──────── */
.woo-page{padding:48px 0 72px}
.woo-page h1{font:600 clamp(26px,3.6vw,38px)/1.15 Unbounded,Manrope,sans-serif; letter-spacing:-.02em; margin:0 0 24px}
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover{
  background:var(--valve); color:#fff; border-radius:11px; font:700 15px/1 Manrope,sans-serif;
  padding:13px 20px; border:0;
}
.woocommerce .button:hover, .woocommerce a.button:hover{background:var(--valve-deep)}
.woocommerce table.shop_table{border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{border-color:var(--line-soft)}
.woocommerce-info, .woocommerce-message{border-top-color:var(--valve); background:var(--surface)}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single{
  border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:var(--surface); color:var(--ink);
  font:400 16px/1.3 Manrope,sans-serif; min-height:48px;
}
.woocommerce ul.products li.product .price, .woocommerce div.product p.price{color:var(--ink); font-weight:700}

/* кнопки-посилання Woo не мають виглядати як текстові лінки */
.buy, a.buy, .result .cta, a.cta{text-decoration:none!important}
.buy:hover, a.buy:hover{text-decoration:none!important}

/* ── відгуки ─────────────────────────────────────── */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){.revs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.revs{grid-template-columns:1fr}}
.rev{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
     padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.rev .stars{color:var(--ochre); font-size:15px; letter-spacing:2px; line-height:1}
.rev blockquote{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink)}
.rev figcaption{margin-top:auto; font-size:13.5px; color:var(--ink-2); display:flex;
                flex-direction:column; gap:2px; padding-top:6px; border-top:1px solid var(--line-soft)}
.rev figcaption b{color:var(--ink); font-size:14.5px}
.rev figcaption a{color:var(--valve-deep)}

.promo a{color:var(--valve-deep); font-weight:700}

/* ── сторінка товару ─────────────────────────────── */
.woocommerce div.product{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                         gap:44px; align-items:start}
@media(max-width:860px){.woocommerce div.product{grid-template-columns:1fr; gap:28px}}
.woocommerce div.product div.images{margin:0; width:auto; float:none}
.woocommerce div.product div.summary{margin:0; width:auto; float:none}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{grid-column:1/-1}
.woocommerce div.product .product_title{font:600 clamp(24px,3.2vw,34px)/1.18 Unbounded,Manrope,sans-serif;
                                        letter-spacing:-.02em; margin:0 0 14px}
.woocommerce div.product p.price{font:700 28px/1 JetBrains Mono,monospace; color:var(--ink); margin:0 0 18px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2); font-size:16px}
.woocommerce div.product .stock{font:700 14px/1 JetBrains Mono,monospace; color:var(--valve-deep)}
.woocommerce div.product .stock.out-of-stock{color:var(--ochre)}
.woocommerce div.product form.cart{margin:20px 0 22px; display:flex; gap:12px; align-items:center}
.woocommerce div.product .product_meta{font-size:14px; color:var(--ink-2); border-top:1px solid var(--line-soft); padding-top:16px}
.woocommerce div.product .product_meta a{color:var(--valve-deep)}
.woocommerce div.product div.images img{border-radius:var(--r); background:var(--surface)}
.woocommerce div.product .flex-control-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 0; padding:0; list-style:none}
.woocommerce div.product .flex-control-thumbs li{width:74px; margin:0}
.woocommerce div.product .flex-control-thumbs img{border:1px solid var(--line); border-radius:10px}

/* кнопки Woo — у кольорі теми, а не стандартному фіолетовому */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce input.button.alt,
.woocommerce div.product form.cart .button, .wp-element-button, .wc-block-components-button{
  background:var(--valve); color:#fff; border:0; border-radius:11px;
  font:700 15px/1 Manrope,sans-serif; padding:14px 22px; text-decoration:none;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover{background:var(--valve-deep); color:#fff}
.woocommerce .quantity input.qty{border:1px solid var(--line); border-radius:11px; padding:12px 8px;
                                 background:var(--surface); color:var(--ink); width:72px; height:48px}

/* вкладки й відгуки */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:36px 0 0; border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent; border:0; border-radius:0; margin:0 22px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-weight:700; color:var(--ink-2); padding:12px 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink); box-shadow:inset 0 -2px 0 var(--valve)}
.woocommerce #reviews #comments ol.commentlist li .comment-text{border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); padding:20px; margin:0 0 0 76px}