/* Earthical store skin - wp-storefront-2014 adaptation */
:root{
  --canvas:#e8e8e8; --wrap:#f4f4f4; --panel:#ffffff;
  --ink:#242424; --meta:#767676; --accent:#14614f; --accent-dark:#0e4739;
  --ochre:#d5963e; --rule:#d3d3d3;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:Consolas,"DejaVu Sans Mono","Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 var(--sans)}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--accent-dark)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0;list-style:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell{max-width:1240px;margin:0 auto;padding:0 20px}
.page-wrap{background:var(--wrap)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:5}
.skip-link:focus{left:0}

/* header */
.store-header{background:var(--panel);border-bottom:1px solid var(--rule)}
.store-header-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;padding-top:22px;padding-bottom:18px}
.wordmark{margin:0;font-size:34px;letter-spacing:.08em;text-transform:none}
.wordmark a{color:var(--ink);text-decoration:none}
.store-tagline{margin:6px 0 0;max-width:52ch;color:var(--meta);font-size:14px}
.store-status{max-width:44ch;text-align:right}
.status-line{margin:0;font-size:13px;color:var(--meta);line-height:1.5}
.status-flag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;margin-right:6px}
.status-contact{margin:6px 0 0;font-size:13px}

/* category bar */
.category-bar{background:var(--accent)}
.category-bar-list{display:flex;flex-wrap:wrap}
.category-bar-list li{border-right:1px solid rgba(255,255,255,.22)}
.category-bar-list li:first-child{border-left:1px solid rgba(255,255,255,.22)}
.category-bar-list a{display:block;padding:12px 15px;color:#fff;font-size:13px;letter-spacing:.02em;text-decoration:none}
.category-bar-list a:hover{background:var(--accent-dark);color:#fff}
.category-bar-list .is-active a{background:var(--accent-dark);box-shadow:inset 0 -3px 0 var(--ochre)}

/* breadcrumb */
.breadcrumb{background:var(--panel);border-bottom:1px solid var(--rule)}
.crumb-inner{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:baseline;padding-top:10px;padding-bottom:10px}
.crumb-list{display:flex;flex-wrap:wrap;font-size:13px;color:var(--meta)}
.crumb-list li+li:before{content:"/";padding:0 8px;color:var(--rule)}
.crumb-count{margin:0;font-family:var(--mono);font-size:12px;color:var(--meta)}

/* modules */
main{display:block}
.module{padding:26px 0;border-bottom:1px solid var(--rule)}
.module-head{font-size:21px;margin-bottom:6px}
.module-note{color:var(--meta);font-size:14px;max-width:70ch}
.mission-line{max-width:66ch;font-size:17px;margin-bottom:16px}
.opening{background:var(--panel)}

/* department index */
.dept-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;margin-top:12px}
.dept-cell{border-top:2px solid var(--ochre);padding-top:8px}
.dept-name{font-weight:700;font-size:15px;text-decoration:none}
.dept-count{float:right;font-size:12px;color:var(--meta)}
.dept-subs{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--meta)}
.dept-subs a{color:var(--meta)}

/* product grid */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px;margin-top:18px}
.product-cell{border-top:1px solid var(--rule);padding-top:12px}
.cell-title{font-size:16px;line-height:1.35}
.cell-title a{color:var(--ink);text-decoration:none}
.cell-title a:hover{color:var(--accent);text-decoration:underline}
.cell-price{margin:5px 0 4px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;color:var(--ochre);font-weight:700}
.cell-meta{margin:0 0 6px;font-size:12.5px;color:var(--meta)}
.cell-meta .sep{color:var(--rule);padding:0 3px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.chips a{display:inline-block;border:1px solid var(--rule);padding:1px 7px;font-size:11px;color:var(--meta);text-decoration:none}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.cell-eol{margin:0;font-size:12.5px;color:var(--meta);border-top:2px solid var(--ochre);padding-top:6px;line-height:1.5}
.eol-label{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.empty-note{color:var(--meta)}

/* lead entry + product detail */
.lead-entry{background:var(--panel);border:1px solid var(--rule);padding:18px;margin-top:16px}
.lead-title{font-size:21px}
.lead-title a{color:var(--ink);text-decoration:none}
.lead-price{margin:4px 0 12px;font-size:19px;color:var(--ochre);font-weight:700}
.detail-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px}
.detail-head{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.detail-main p{max-width:66ch}
.sub-head{font-size:14px;margin:14px 0 6px}
.facts{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:14px}
.facts th{text-align:left;width:37%;padding:6px 10px 6px 0;color:var(--meta);font-weight:400;vertical-align:top;border-bottom:1px solid var(--rule)}
.facts td{padding:6px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.vendor-line{margin:0 0 6px}
.vendor-button{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;font-size:14px;text-decoration:none;border:1px solid var(--accent-dark)}
.vendor-button:hover{background:var(--accent-dark);color:#fff}
.vendor-note{margin:0;font-size:12px;color:var(--meta)}

/* lifecycle motif */
.lifecycle{margin-top:22px;border-top:2px solid var(--ochre);padding-top:12px}
.life-head{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);margin-bottom:10px}
.life-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:8px 0;border-bottom:1px solid var(--rule)}
.life-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:700}
.life-value p{margin:0 0 6px;max-width:66ch;font-size:14.5px}
.life-value p:last-child{margin-bottom:0}
.where-buy{margin-top:20px}
.where-buy p{max-width:66ch}

/* department rows */
.dept-row{border-top:1px solid var(--rule);padding:14px 0}
.dept-row-head{font-size:17px}
.dept-row-head a{color:var(--ink);text-decoration:none}
.dept-row-count{font-size:12px;color:var(--meta);margin-left:6px}
.dept-row-subs{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 8px;font-size:12.5px}
.dept-row-subs a{color:var(--meta)}
.dept-ledger{columns:3;column-gap:28px;font-size:13.5px}
.dept-ledger li{break-inside:avoid;display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dotted var(--rule)}
.dept-ledger a{color:var(--ink);text-decoration:none}
.dept-ledger a:hover{color:var(--accent);text-decoration:underline}
.ledger-price{color:var(--meta);font-size:12.5px;white-space:nowrap}

/* help block */
.help{background:var(--panel)}
.info-rows{margin:12px 0 0}
.info-rows dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:700;padding-top:10px;border-top:1px solid var(--rule)}
.info-rows dd{margin:4px 0 12px;max-width:78ch;color:var(--ink);font-size:14.5px}

/* collections */
.collection{padding:26px 0 34px}
.collection.has-rail{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px}
.page-title{font-size:30px;margin-bottom:8px}
.collection-count{font-size:12.5px;color:var(--meta);margin:0}
.collection-intro{max-width:70ch;color:var(--ink)}
.rail-block{background:var(--panel);border:1px solid var(--rule);padding:14px}
.rail-head{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta);margin:14px 0 6px}
.rail-head:first-child{margin-top:0}
.rail-list{font-size:13.5px}
.rail-list li{padding:4px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:8px}
.rail-list li:last-child{border-bottom:0}
.rail-list a{color:var(--ink);text-decoration:none}
.rail-list a:hover{color:var(--accent);text-decoration:underline}
.rail-list .is-active a{color:var(--accent);font-weight:700}
.rail-count{color:var(--meta);font-size:12px}

/* product page */
.product-page{padding:26px 0 34px}
.product-head{border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:18px}
.product-price{margin:6px 0 8px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;color:var(--ochre);font-weight:700}
.product-short{max-width:66ch;margin:0;color:var(--ink)}
.related{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}
.related-head{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);margin-bottom:8px}

/* information pages */
.info-page{padding:26px 0 34px;max-width:1240px}
.info-page h2{font-size:19px;margin:22px 0 8px}
.info-page h3{font-size:15px;margin:18px 0 6px}
.info-page p,.info-page li{max-width:72ch}
.prose p{margin-bottom:12px}
.qa{margin-top:10px}
.qa dt{font-weight:700;font-size:16px;padding-top:14px;border-top:1px solid var(--rule)}
.qa dd{margin:6px 0 14px;max-width:78ch}
.state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:16px}
.state-block{break-inside:avoid}
.state-head{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta);border-bottom:2px solid var(--ochre);padding-bottom:5px;margin-bottom:8px}
.shop-list{font-size:14px}
.shop-row{padding:7px 0;border-bottom:1px solid var(--rule)}
.shop-name{display:block;font-weight:700}
.shop-detail{display:block;font-size:12.5px;color:var(--meta);line-height:1.5}
.post-list{margin-top:14px}
.post-row{padding:14px 0;border-top:1px solid var(--rule)}
.post-title{font-size:19px}
.post-meta{margin:4px 0 6px;font-size:12.5px;color:var(--meta)}
.post-summary{max-width:72ch;margin:0}
.note-box{background:var(--panel);border-left:3px solid var(--ochre);padding:12px 14px;margin:16px 0;max-width:78ch}
.note-box p:last-child{margin-bottom:0}

/* footer */
.store-footer{background:#1d1d1d;color:#d6d6d6;margin-top:0}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:28px;padding-bottom:22px}
.footer-head{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffffff;margin-bottom:10px}
.footer-list li{padding:3px 0;font-size:13.5px}
.footer-list a,.footer-text a{color:#e6c48d}
.footer-list a:hover,.footer-text a:hover{color:#ffffff}
.footer-text{font-size:13.5px;color:#b4b4b4;max-width:34ch}
.footer-base{border-top:1px solid #333;padding-top:14px;padding-bottom:20px}
.footer-base p{margin:0;font-size:12.5px;color:#9a9a9a}

/* mobile transformations */
@media (max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dept-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dept-ledger{columns:2}
  .state-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .detail-split{grid-template-columns:minmax(0,1fr);gap:20px}
  .collection.has-rail{grid-template-columns:minmax(0,1fr)}
  .rail{order:-1}
  .rail-list{display:flex;flex-wrap:wrap;gap:6px}
  .rail-list li{border-bottom:0;border:1px solid var(--rule);padding:4px 9px}
  .life-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .store-status{text-align:left;max-width:none}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .category-bar-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-bar-list li{border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
  .category-bar-list li:first-child{border-left:0}
  .category-bar-list a{padding:13px 14px;font-size:14px}
  .wordmark{font-size:28px}
  .page-title{font-size:25px}
  .dept-ledger{columns:1}
  .state-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .product-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .dept-index{grid-template-columns:minmax(0,1fr)}
  .footer-cols{grid-template-columns:minmax(0,1fr)}
  .lead-entry{padding:14px}
  .crumb-inner{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
