/* Website 11 reference — home-products. Generated from website11/homepage11.html; values unchanged. */
.log-home .rail{display:grid;gap:18px}
.log-home .prod-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
.log-home .prod{position:relative;display:flex;flex-direction:column;background:var(--log-surface);border:1px solid var(--log-line);border-radius:var(--log-radius);overflow:hidden;transition:border-color .4s}
.log-home .prod:hover{border-color:rgba(75,227,181,.35)}
.log-home .stage{position:relative;height:220px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;overflow:hidden;background:radial-gradient(circle at 50% 72%,var(--glow) 0%,transparent 62%),linear-gradient(180deg,#0E2527,#0A1B1D)}
.log-home .stage::before{content:"";position:absolute;left:50%;bottom:26px;width:180px;height:30px;margin-left:-90px;border-radius:50%;background:radial-gradient(ellipse,rgba(214,240,236,.16),transparent 70%)}
.log-home .stage::after{content:"";position:absolute;bottom:26px;left:50%;width:120px;height:14px;margin-left:-60px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(6px);animation:log-shadow 5s ease-in-out infinite}
.log-home .pack{position:relative;z-index:1;animation:log-bob 5s ease-in-out infinite;transform:translateZ(50px);scale:.86;transform-origin:50% 100%}
.log-home .prod:nth-child(2) .pack,.log-home .prod:nth-child(2) .stage::after{animation-delay:-1.2s}
.log-home .prod:nth-child(3) .pack,.log-home .prod:nth-child(3) .stage::after{animation-delay:-2.4s}
.log-home .prod:nth-child(4) .pack,.log-home .prod:nth-child(4) .stage::after{animation-delay:-3.6s}
@keyframes log-bob{0%,100%{translate:0 0;rotate:-1.5deg}50%{translate:0 -12px;rotate:1.5deg}}
@keyframes log-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.55}}
.log-home .tag{position:absolute;top:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.log-home .tag.demo{left:14px;color:var(--log-text-soft);background:rgba(244,251,249,.08);border:1px solid var(--log-line-2)}
.log-home .tag.new{right:14px;color:#2A0E05;background:var(--log-coral)}
.log-home .bottle{display:flex;flex-direction:column;align-items:center;width:116px}
.log-home .bottle .cap{width:58px;height:30px;border-radius:8px 8px 4px 4px;background:var(--cap);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.log-home .bottle .body{width:116px;height:150px;border-radius:26px 26px 18px 18px;background:var(--body);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 40px rgba(0,0,0,.4),inset -10px 0 18px rgba(0,0,0,.14),inset 8px 0 14px rgba(255,255,255,.22)}
.log-home .box{width:150px;height:170px;border-radius:8px;background:var(--body);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 40px rgba(0,0,0,.4),inset -14px 0 0 rgba(0,0,0,.14)}
.log-home .label{width:92px;padding:12px 6px;background:var(--label);color:var(--labelink);border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.log-home .box .label{width:118px;padding:14px 8px;border-radius:4px}
.log-home .label .b{font-size:8px;letter-spacing:.18em;font-weight:800}
.log-home .label .n{font-size:13px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.log-home .label .d{font-size:7px;letter-spacing:.14em}
.log-home .prod-info{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px;flex:1}
.log-home .prod-cat{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--log-muted-2)}
.log-home .prod h3{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.log-home .prod-size{font-size:14px;color:var(--log-muted)}
.log-home .prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.log-home .price{font-size:18px;font-weight:800;color:var(--log-text-strong);letter-spacing:-.02em}
.log-home .add{display:inline-flex;align-items:center;gap:8px;background:rgba(75,227,181,.1);color:var(--log-mint);border:1px solid rgba(75,227,181,.4);border-radius:999px;padding:0 16px;min-height:40px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.log-home .add:hover{background:var(--log-mint);color:#04241C;border-color:var(--log-mint)}
.log-home .add.done{background:var(--log-mint);color:#04241C}
.log-fly{position:fixed;z-index:80;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--log-mint) 55%);box-shadow:0 0 18px rgba(75,227,181,.9);pointer-events:none;left:0;top:0}
.log-home .panel[hidden]{display:none}
@media (max-width:1024px){
  .log-home .prod-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .log-home .rail,.log-home .na-grid,.log-home .jgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -24px;padding:4px 24px 10px;scroll-padding-left:24px}
  .log-home .rail::-webkit-scrollbar,.log-home .na-grid::-webkit-scrollbar,.log-home .jgrid::-webkit-scrollbar{display:none}
  .log-home .rail>*,.log-home .na-grid>*,.log-home .jgrid>*{scroll-snap-align:start;flex:0 0 auto}
  .log-home .prod-rail>*{width:280px}
}
/* Tablet only: na-grid/jgrid base rules load later (arrivals/journal css) at equal specificity, so the swipe row needs the html prefix; phones keep their own overrides */
@media (min-width:761px) and (max-width:1024px){
  html .log-home .na-grid,html .log-home .jgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -24px;padding:4px 24px 10px;scroll-padding-left:24px}
  html .log-home .na-grid::-webkit-scrollbar,html .log-home .jgrid::-webkit-scrollbar{display:none}
  html .log-home .na-grid>*,html .log-home .jgrid>*{scroll-snap-align:start;flex:0 0 auto}
}
@media (max-width:760px){
  .log-home .rail>*,.log-home .mosaic>*,.log-home .na-grid>*{scroll-snap-align:start;flex:0 0 auto}
  .log-home .prod-rail>*{width:70vw}
  .log-home .stage{height:190px;padding-bottom:20px}
  .log-home .pack{scale:.76}
  .log-home .rail,.log-home .na-grid,.log-home .jgrid{margin:0 -16px;padding:4px 16px 8px;scroll-padding-left:16px;gap:12px}
  .log-home .prod-rail>*{width:68vw}
}

/* ── Theme integration: real product photo in place of the reference's CSS pack, WooCommerce add-to-cart states ── */
.log-home .pack img{display:block;width:auto;height:auto;max-width:150px;max-height:150px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 24px 24px rgba(0,0,0,.4))}
.log-home .na-pack img{display:block;width:auto;height:auto;max-width:170px;max-height:170px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 24px 24px rgba(0,0,0,.4))}
.log-home .prod:nth-child(4n+1) .stage{--glow:rgba(242,193,78,.32)}
.log-home .prod:nth-child(4n+2) .stage{--glow:rgba(60,200,232,.3)}
.log-home .prod:nth-child(4n+3) .stage{--glow:rgba(75,227,181,.3)}
.log-home .prod:nth-child(4n) .stage{--glow:rgba(255,138,101,.32)}
.log-home .add.added{background:var(--log-mint);color:#04241C}
.log-home .add.loading{opacity:.7;pointer-events:none}
.log-home .added_to_cart{display:none}
.log-home .prod-info h3 a,.log-home .na-card h3 a{color:inherit;text-decoration:none}
/* Legacy style.css colours every a.add_to_cart_button.ajax_add_to_cart; restate the reference button on top of it. */
.log-home a.add.add_to_cart_button.ajax_add_to_cart{background:rgba(75,227,181,.1);color:var(--log-mint);border:1px solid rgba(75,227,181,.4)}
.log-home a.add.add_to_cart_button.ajax_add_to_cart:hover{background:var(--log-mint);color:#04241C;border-color:var(--log-mint)}
.log-home a.add.add_to_cart_button.ajax_add_to_cart.added{background:var(--log-mint);color:#04241C}
.log-home .na-feat-buy a.add.add_to_cart_button.ajax_add_to_cart,.log-home a.add.add-ic.add_to_cart_button.ajax_add_to_cart{background:var(--log-grad);color:#04241C;border:0}
.log-home .na-feat-buy a.add.add_to_cart_button.ajax_add_to_cart:hover,.log-home a.add.add-ic.add_to_cart_button.ajax_add_to_cart:hover{background:var(--log-grad);color:#04241C}