/* seedk.com home-page backdrop layer (presentation only) */
/* Mirrors index.html: deep-green body, fixed garden photo, transparent     */
/* main container and small frosted cards. Linked ONLY to linked pages.     */

:root{
  --sk-deep:#0a3d1f; --sk-mid:#0a7a4e; --sk-bright:#0a9e7a;
  --sk-teal:#33cccc; --sk-gold:#c8a84b;
  --sk-radius:16px; --sk-shadow:0 10px 36px rgba(0,0,0,.28);
  --sk-display:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --sk-body:'Source Serif 4','Times New Roman',serif;
}

:where(html){ scroll-behavior:smooth; }

/* exact home-page base: deep green + full-screen garden photo */
html body{
  background-color:#0a3d1f !important;
  color:#111;
  min-height:100vh;
  overflow-x:clip;
}
body::before{
  content:'' !important;
  position:fixed !important; inset:0 !important; z-index:-1 !important;
  background-image:url('/BELL-GARDEN-CO-LTD-seedk.com.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  pointer-events:none;
}

/* index.html keeps its main container transparent - no full-page white slab */
body > div.hw, body > div.sk-wrap, body > div.container, body > div.page-wrap, body > div.m-wrap, body > div.fw-wrap, body > div.invoice-wrap, body > main, body > article, body > section{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:20px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.22) !important;
}

/* legacy pages have no card markup - use the home page frosted-card value */
body > div[align="center"], body > div.index_center, body > table, body > center, body > form, body > ul, body > ol, body > dl, body > blockquote, body > pre, body > h1, body > h2, body > h3, body > h4, body > h5, body > h6{
  background:rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%) !important;
  backdrop-filter:blur(10px) saturate(140%) !important;
  border:1px solid rgba(255,255,255,.45) !important;
  border-radius:16px !important;
  box-shadow:0 10px 36px rgba(0,0,0,.18) !important;
}

/* language switcher matches the home page on every page
   (div. prefix: some legacy templates malformed <body> can carry this class) */
div.lang-switcher{
  background:rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%) !important;
  backdrop-filter:blur(10px) saturate(140%) !important;
}

/* home-page green / teal palette for links, buttons, fields, headings */
:where(a){ color:var(--sk-mid); text-decoration-color:rgba(10,158,122,.55); }
:where(a:hover){ color:var(--sk-bright); }
:where(h1,h2,h3,h4,h5){ font-family:var(--sk-display); color:var(--sk-deep); }
:where(button,
       input[type="submit"], input[type="button"], input[type="reset"],
       .btn, .button, .bnt, .submit){
  background:linear-gradient(135deg, var(--sk-teal) 0%, var(--sk-bright) 60%, var(--sk-mid) 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  padding:8px 16px;
  box-shadow:0 4px 14px rgba(10,120,80,.22);
}
:where(input[type="text"], input[type="email"], input[type="password"],
       input[type="search"], input[type="tel"], input[type="number"],
       select, textarea){
  background:rgba(255,255,255,.92);
  color:#111;
  border:1px solid rgba(10,61,31,.28);
  border-radius:10px;
  padding:8px 10px;
  font-size:16px;
}
:where(img){ max-width:100%; height:auto; }

/* touch / small screens: keep legacy panels legible on the photo */
@media (hover:none) and (pointer:coarse), (max-width:1024px){
  body > div[align="center"], body > div.index_center, body > table, body > center, body > form, body > ul, body > ol, body > dl, body > blockquote, body > pre, body > h1, body > h2, body > h3, body > h4, body > h5, body > h6{
    background:rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
    border-radius:14px !important;
  }
}

/* printing must stay legible: no photo, no glass, no shadow */
@media print{
  html body{ background:#fff !important; color:#000 !important; }
  body::before{ display:none !important; }
  body > div.hw, body > div.sk-wrap, body > div.container, body > div.page-wrap, body > div.m-wrap, body > div.fw-wrap, body > div.invoice-wrap, body > main, body > article, body > section, body > div[align="center"], body > div.index_center, body > table, body > center, body > form, body > ul, body > ol, body > dl, body > blockquote, body > pre, body > h1, body > h2, body > h3, body > h4, body > h5, body > h6{
    background:#fff !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  :where(button, input[type="submit"], input[type="button"]){ background:#eee !important; color:#000 !important; }
}

/* == SEEDK-HOME-ASSETS v1 == */
/* Two-banner row: exact geometry of index.html (.logo-row / .logo-block).
   Fixed height + object-fit:contain -> both banners always share one height,
   nothing is cropped and the aspect ratio never distorts.                  */
.logo-row,
.sk-logo-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:10px !important;
  width:100% !important;
  max-width:none !important;
  margin:6px 0 10px !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
.logo-row > *,
.sk-logo-row > *{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:none !important;
}
.logo-row > * > a,
.sk-logo-row > * > a{ display:block !important; width:100% !important; line-height:0 !important; }

.logo-row .logo-block img[src],.logo-row > * img[src],.sk-logo-row .sk-logo img[src],.sk-logo-row .fw-logo img[src],.sk-logo-row > * img[src],.sk-wrap > .sk-logo img[src],.fw-wrap > .fw-logo img[src],.sk-logo img[src]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:clamp(90px,12vw,230px) !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* a pair of bare .sk-logo siblings (goods.dwt) keeps the same two-column row */
.sk-wrap > .sk-logo,
.fw-wrap > .fw-logo{
  display:inline-block !important;
  vertical-align:top !important;
  width:calc(50% - 4px) !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Key cards: home-page grid - never an orphan 4th card on its own row. */
.key-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:10px !important;
  margin:10px 0 !important;
}
.key-grid .key-item:last-child:nth-child(3n+1){
  grid-column:auto !important;
  max-width:none !important;
}
.key-item{
  padding:12px 14px !important;
  gap:12px !important;
  background:var(--white96,rgba(255,255,255,0.96)) !important;
  border:1px solid rgba(51,204,204,0.45) !important;
  border-radius:var(--radius-md,10px) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.22) !important;
}
@media (min-width:600px) and (max-width:1279.98px){
  .key-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (min-width:1280px){
  .key-grid{ grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
}
@media (max-width:600px){
  .key-grid{ grid-template-columns:1fr !important; gap:10px !important; }
  .logo-row,.sk-logo-row{ gap:6px !important; }
  .logo-row .logo-block img[src],.logo-row > * img[src],.sk-logo-row .sk-logo img[src],.sk-logo-row .fw-logo img[src],.sk-logo-row > * img[src],.sk-wrap > .sk-logo img[src],.fw-wrap > .fw-logo img[src],.sk-logo img[src]{ height:clamp(44px,15vw,88px) !important; }
}
@media (max-width:380px){
  .logo-row .logo-block img[src],.logo-row > * img[src],.sk-logo-row .sk-logo img[src],.sk-logo-row .fw-logo img[src],.sk-logo-row > * img[src],.sk-wrap > .sk-logo img[src],.fw-wrap > .fw-logo img[src],.sk-logo img[src]{ height:clamp(38px,14vw,62px) !important; }
}
@media print{
  .logo-row,.sk-logo-row{ gap:8px !important; }
  .logo-row .logo-block img[src],.logo-row > * img[src],.sk-logo-row .sk-logo img[src],.sk-logo-row .fw-logo img[src],.sk-logo-row > * img[src],.sk-wrap > .sk-logo img[src],.fw-wrap > .fw-logo img[src],.sk-logo img[src]{ height:auto !important; max-height:120px !important; }
}
/* == /SEEDK-HOME-ASSETS v1 == */