.naroy-col, .naroy-back { --nc-green: #113622; --nc-olive: #8e986c; --nc-card: #1b4a30; position: relative; color: #fff; }
.naroy-col { background: var(--nc-green); padding: 90px 24px; overflow: hidden; }
.naroy-col::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at var(--mx, 50%) var(--my, 25%), #2d4a33 0%, rgba(17,54,34,0) 60%); pointer-events: none; transition: background .2s; }
.naroy-col-inner, .naroy-back-inner { position: relative; max-width: 1240px; margin: 0 auto; }
.naroy-col-kicker, .naroy-back-kicker { text-align: center; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--nc-olive); margin: 0; }
.naroy-col-title, .naroy-back-title { text-align: center; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.05; margin: 12px 0 14px; color: #fff; }
.naroy-col-sub, .naroy-back-sub { text-align: center; max-width: 620px; margin: 0 auto 56px; color: #b9c4b5; font-size: 1.05rem; }

.naroy-col-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; perspective: 1100px; }
.naroy-col-card { position: relative; display: block; border-radius: 18px; background: var(--nc-card); padding: 20px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.1); transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .3s; }
.naroy-col-card:hover { box-shadow: 0 26px 50px rgba(0,0,0,.45); color: #fff; }
.naroy-col-glare { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 55%); }
.naroy-col-card:hover .naroy-col-glare { opacity: 1; }
.naroy-col-img { display: block; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.18); transform: translateZ(50px); transition: transform .35s; aspect-ratio: 4 / 5; }
.naroy-col-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.naroy-col-card:hover .naroy-col-img { transform: translateZ(80px) scale(1.03); }
.naroy-col-card:hover .naroy-col-img img { transform: scale(1.08); }
.naroy-col-name { display: block; margin: 16px 0 2px; font-size: 1.1rem; font-weight: 600; transform: translateZ(30px); }
.naroy-col-price { display: block; color: #b9c4b5; transform: translateZ(30px); }
.naroy-col-card .nbm-product-badges { transform: translateZ(70px); top: 30px; right: 30px; }
.naroy-col-card .nbm-loop-color-dots { transform: translateZ(40px); margin-top: 10px; }
.naroy-col-cta { text-align: center; margin-top: 54px; }
.naroy-col-btn { display: inline-block; padding: 15px 38px; border-radius: 999px; background: var(--nc-olive); color: var(--nc-green); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .2s, background .2s; }
.naroy-col-btn:hover { background: #fff; color: var(--nc-green); transform: translateY(-3px); }

.naroy-back { background: #0c2616; padding: 90px 24px; overflow: hidden; }
.naroy-back-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 32px; perspective: 1200px; }
.naroy-back-card { position: relative; border-radius: 18px; background: #f3efe3; color: var(--nc-green); padding: 18px 18px 22px; transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .3s; }
.naroy-back-card:hover { box-shadow: 0 28px 54px rgba(0,0,0,.5); }
.naroy-back-num { position: absolute; top: 16px; left: 22px; z-index: 3; font-size: 12px; letter-spacing: .2em; font-weight: 700; color: var(--nc-green); transform: translateZ(60px); }
.naroy-back-tag { position: absolute; top: 14px; right: 18px; z-index: 3; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--nc-green); color: #fff; padding: 4px 12px; border-radius: 999px; transform: translateZ(60px); }
.naroy-back-media { position: relative; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 4 / 5; transform: translateZ(40px); }
.naroy-back-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease; }
.naroy-back-media .is-final { opacity: 0; }
.naroy-back-card.has-final:hover .is-final, .naroy-back-card.has-final.is-flipped .is-final { opacity: 1; }
.naroy-back-card.has-final:hover .is-sketch, .naroy-back-card.has-final.is-flipped .is-sketch { opacity: 0; }
.naroy-back-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(17,54,34,.85); color: #fff; padding: 5px 14px; border-radius: 999px; transition: opacity .3s; pointer-events: none; }
.naroy-back-card:hover .naroy-back-hint { opacity: 0; }
.naroy-back-name { margin: 18px 4px 4px; font-size: 1.3rem; font-weight: 700; color: var(--nc-green); transform: translateZ(30px); }
.naroy-back-text { margin: 0 4px; color: #4c5a4d; transform: translateZ(20px); }

body.naroy-reveal-ready .naroy-reveal:not(.is-in) { opacity: 0; transform: translateY(40px); }
.naroy-reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }

@media (max-width: 900px) { .naroy-col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .naroy-back-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .naroy-col-grid { grid-template-columns: 1fr; } .naroy-col, .naroy-back { padding: 60px 16px; } }
@media (prefers-reduced-motion: reduce) {
	.naroy-reveal, .naroy-col-card, .naroy-back-card, .naroy-col-img img { transition: none !important; }
	body.naroy-reveal-ready .naroy-reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* ---------- Collection Textile (lookbook) ---------- */
.ntx { --ntx-dark: #1b2a22; --ntx-cream: #f1ede4; --ntx-accent: #b8a37d; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; background: var(--ntx-cream); color: #fff; overflow: hidden; }
.ntx img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ntx-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: rgba(0,0,0,.08); color: rgba(0,0,0,.35); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }

.ntx-hero { position: relative; min-height: 560px; display: flex; align-items: center; background: var(--ntx-dark); }
.ntx-hero-bg { position: absolute; inset: 0; }
.ntx-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ntx-dark) 0%, rgba(27,42,34,.92) 22%, rgba(27,42,34,.35) 48%, rgba(27,42,34,0) 62%); }
.ntx-hero-bg .ntx-empty { background: linear-gradient(120deg, #1b2a22, #4b5b46); color: rgba(255,255,255,.25); }
.ntx-hero-copy { position: relative; z-index: 2; padding: 70px 5%; width: max-content; max-width: 100%; }
.ntx-kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; font-size: .78rem; font-weight: 300; letter-spacing: .5em; text-transform: uppercase; color: #fff; }
.ntx-kicker span { display: block; width: 56px; height: 1px; background: rgba(255,255,255,.7); }
.ntx-title { margin: 0 0 22px; overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: .01em; color: #f6f2e8; }
.ntx-sub { margin: 0 0 24px; font-size: .78rem; font-weight: 300; letter-spacing: .5em; text-transform: uppercase; color: #fff; }
.ntx-text { margin: 0 0 30px; font-size: .85rem; line-height: 1.9; letter-spacing: .06em; color: #e6e3da; }
.ntx-btn { display: inline-flex; align-items: center; gap: 22px; padding: 14px 30px; border-radius: 999px; background: var(--ntx-accent); color: #1b2a22; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: transform .25s, background .25s, color .25s; }
.ntx-btn:hover { background: #fff; color: #1b2a22; transform: translateX(4px); }
.ntx-side { position: absolute; right: 0; top: 0; bottom: 0; width: 52px; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--ntx-dark); font-size: .7rem; font-weight: 300; letter-spacing: .4em; text-transform: uppercase; writing-mode: vertical-rl; color: #e6e3da; }

.ntx-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 34px 4% 30px; background: var(--ntx-cream); color: #14140f; }
.ntx-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; transition: transform .35s; }
a.ntx-item:hover { transform: translateY(-8px); color: inherit; }
.ntx-item-img { display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 10px; }
.ntx-item-img img { object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0,0,0,.18)); transition: transform .5s; }
a.ntx-item:hover .ntx-item-img img { transform: scale(1.06); }
.ntx-item-name { font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ntx-item-sub { min-height: 1.2em; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #3b3b33; }
.ntx-item-bar { display: block; width: 22px; height: 1.5px; margin-top: 8px; background: #14140f; transition: width .3s; }
a.ntx-item:hover .ntx-item-bar { width: 46px; }

.ntx-details { display: grid; grid-template-columns: 1.15fr .75fr 1.1fr; min-height: 380px; background: var(--ntx-dark); }
.ntx-det-img { overflow: hidden; background: #2b3a31; }
.ntx-det-img img { transition: transform .8s; }
.ntx-det-img:hover img { transform: scale(1.06); }
.ntx-det-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px 8%; background: var(--ntx-dark); color: #fff; }
.ntx-det-kicker { margin: 0 0 22px; font-size: .68rem; font-weight: 300; letter-spacing: .5em; text-transform: uppercase; color: #cfd3c9; }
.ntx-det-title { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 400; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: #f1ede4; }
.ntx-det-line { display: block; width: 30px; height: 1px; margin: 24px 0; background: rgba(255,255,255,.6); }
.ntx-det-list { margin: 0; padding: 0; list-style: none; font-size: .68rem; font-weight: 300; letter-spacing: .34em; text-transform: uppercase; line-height: 2.2; color: #d6d9d0; }

.ntx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; padding: 24px 2.2% 28px; background: var(--ntx-cream); }
.ntx-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; text-decoration: none; background: #2b3a31; }
.ntx-card-img { position: absolute; inset: 0; }
.ntx-card-img img { transition: transform .8s; }
.ntx-card:hover .ntx-card-img img { transform: scale(1.07); }
.ntx-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.4)); pointer-events: none; }
.ntx-card-label { position: absolute; top: 24px; left: 24px; z-index: 2; font-size: .78rem; font-weight: 300; letter-spacing: .5em; text-transform: uppercase; }
.ntx-card-label i { display: block; width: 28px; height: 1px; margin-top: 10px; background: rgba(255,255,255,.7); transition: width .3s; }
.ntx-card:hover .ntx-card-label i { width: 60px; }
.ntx-card-btn { position: absolute; left: 20px; bottom: 24px; z-index: 2; padding: 12px 26px; border: 1px solid #fff; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: background .25s, color .25s; }
.ntx-card:hover .ntx-card-btn { background: #fff; color: #1b2a22; }
.ntx-card .ntx-empty { background: linear-gradient(160deg, #3d4a3f, #1b2a22); color: rgba(255,255,255,.3); }

@media (max-width: 860px) {
	.ntx-details { grid-template-columns: 1fr; }
	.ntx-det-img { min-height: 260px; }
	.ntx-det-copy { padding: 44px 8%; }
}
@media (max-width: 640px) {
	.ntx-hero { min-height: 600px; align-items: flex-end; }
	.ntx-hero-bg::after { background: linear-gradient(0deg, var(--ntx-dark) 0%, rgba(27,42,34,.9) 45%, rgba(27,42,34,.1) 85%); }
	.ntx-hero-copy { padding: 40px 6% 50px; max-width: none; }
	.ntx-side { display: none; }
}

.ntx-banner { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 420px; overflow: hidden; background: var(--ntx-dark); color: #fff; text-decoration: none; }
a.ntx-banner:hover { color: #fff; }
.ntx-banner-bg { position: absolute; inset: 0; }
.ntx-banner-bg img { transition: transform 1s; }
.ntx-banner:hover .ntx-banner-bg img { transform: scale(1.04); }
.ntx-banner-bg .ntx-empty { background: linear-gradient(120deg, #1b2a22, #4b5b46); color: rgba(255,255,255,.25); }
.ntx-banner-overlay { position: absolute; inset: 0; background: #000; opacity: .3; pointer-events: none; }
.ntx-banner-copy { position: relative; z-index: 2; max-width: 640px; padding: 50px 5%; }
.ntx-banner-copy .ntx-title { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.ntx-banner-copy:empty { display: none; }
@media (max-width: 640px) { .ntx-banner { min-height: 300px; } }

.ntx-banner-bg img, .ntx-hero-bg img { transform: scale(var(--z, 1)); transition: transform 1s; }
.ntx-banner:hover .ntx-banner-bg img { transform: scale(calc(var(--z, 1) * 1.04)); }

.ntx-hero-copy .ntx-title { white-space: nowrap; }
.ntx-kicker, .ntx-sub, .ntx-card-label, .ntx-det-kicker { white-space: nowrap; }
.ntx-hero-copy .ntx-text { max-width: 32em; }
@media (max-width: 640px) { .ntx-kicker, .ntx-sub { letter-spacing: .32em; } .ntx-hero-copy { width: auto; } }