/* Product card (approved mock-ups t1 c, t2 b, phone t1m a). Sizes measured off the mock-ups, 1536 px wide. The grid cards of
   "Related products" come from shop.css. */

.ds-pdp .ds-wrap { padding-left: calc(52 * var(--u)); padding-right: calc(51 * var(--u)); }
.ds-pdp__top { background: #F3F5F8; padding: calc(20 * var(--u)) 0 calc(20 * var(--u)); }
.ds-crumbs--light { font-size: var(--t-s); color: #4B5563; }
.ds-crumbs--light a { color: var(--c-blue); text-decoration: underline; text-decoration-color: rgba(0, 70, 190, .35); text-underline-offset: 3px; }   /* not by colour alone */
.ds-crumbs--light a:hover { text-decoration-color: currentColor; }
.ds-crumbs--light > span:not(.ds-crumbs__here) { margin: 0 calc(8 * var(--u)); color: var(--c-muted); }
.ds-pdp__grid { display: grid; grid-template-columns: calc(803 * var(--u)) 1fr; column-gap: calc(31 * var(--u)); margin-top: calc(21 * var(--u)); }

/* photos with the white canvas cut off (ds_photo): the device box fills the frame */
.ds-photo { position: relative; display: block; overflow: hidden; max-width: 100%; max-height: 100%; }
.ds-photo.is-wide { width: 100%; }
.ds-photo.is-tall { height: 100%; }
.ds-photo img { position: absolute; max-width: none; width: calc(100% / var(--cw)); height: calc(100% / var(--ch)); left: calc(-100% * var(--l) / var(--cw)); top: calc(-100% * var(--t) / var(--ch)); }
.ds-photo--whole img { position: static; width: 100%; height: 100%; object-fit: contain; }

.ds-gal { align-self: start; padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid #E3E6EA; border-radius: var(--radius); background: var(--c-white); }
.ds-gal__main { height: calc(424 * var(--u)); }
.ds-gal__slide { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; }
.ds-gal__slide:not(.is-on) { display: none; }
.ds-gal__thumbs { display: flex; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); }
.ds-gal__t { display: flex; align-items: center; justify-content: center; width: calc(285 * var(--u)); height: calc(102 * var(--u)); min-height: 56px; padding: calc(10 * var(--u)) calc(14 * var(--u));
	border: 1px solid #E3E6EA; border-radius: var(--radius); background: var(--c-white); cursor: pointer; }
.ds-gal__t.is-on { border: 2px solid var(--c-blue); }
.ds-gal__t:hover { border-color: var(--c-blue); }

.ds-buy { display: flex; flex-direction: column; min-width: 0; }
.ds-buy__meta { font-size: var(--t-label); color: #4B5563; }
.ds-buy__meta span { margin: 0 6px; }
.ds-buy__h { margin-top: calc(3 * var(--u)); font: 700 var(--t-h3)/1.2 var(--f-head); color: var(--c-ink); letter-spacing: -.005em; }
.ds-buy__short { margin-top: calc(6 * var(--u)); font-size: var(--t-m); line-height: 1.36; color: #4B5563; }
.ds-keys { width: 100%; margin-top: calc(18 * var(--u)); font-feature-settings: 'calt' 0; border-collapse: collapse; border-top: 1px solid #D9DDE3; border-bottom: 1px solid #D9DDE3; font-size: var(--t-xs); }
.ds-keys th, .ds-keys td { padding: calc(4 * var(--u)) calc(2 * var(--u)); height: calc(33 * var(--u)); line-height: 1.3; text-align: left; vertical-align: middle; }
.ds-keys tr + tr th, .ds-keys tr + tr td { border-top: 1px solid #E3E6EA; }
.ds-keys th { width: calc(198 * var(--u)); font-weight: 500; color: #374151; }
.ds-keys td { color: #4B5563; }
.ds-buy__price { margin-top: calc(18 * var(--u)); font: 700 var(--t-h3)/1.15 var(--f-head); color: var(--c-ink); }
.ds-buy__price--ask { font-size: var(--t-h4); }
.ds-buy__form { display: grid; grid-template-columns: calc(175 * var(--u)) 1fr; gap: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }
.ds-qty { display: grid; grid-template-columns: 1fr 1.6fr 1fr; height: max(48px, calc(48 * var(--u))); min-width: 130px; border: 1px solid #CBD2DA; border-radius: var(--radius); background: #F3F4F6; overflow: hidden; }
.ds-qty button { display: grid; place-items: center; border: 0; background: none; color: #4B5563; cursor: pointer; }
.ds-qty button:hover { color: var(--c-blue); }
.ds-qty input { width: 100%; min-width: 0; border: 0; border-left: 1px solid #DDE1E6; border-right: 1px solid #DDE1E6; background: var(--c-white); text-align: center;
	font: 500 max(16px, calc(19 * var(--u))) var(--f-text); color: var(--c-ink); -moz-appearance: textfield; }
.ds-qty input::-webkit-inner-spin-button, .ds-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ds-buy__add { min-height: max(48px, calc(48 * var(--u))); font-size: var(--t-l); }
.ds-buy__ask { width: 100%; margin-top: calc(10 * var(--u)); min-height: max(44px, calc(44 * var(--u))); border-width: 1.5px; font-size: var(--t-s); }
.ds-buy__ask:hover { background: #F5F8FF; }
.ds-buy__note { margin-top: calc(10 * var(--u)); font-size: var(--t-label); color: #4B5563; }
.ds-buy__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: calc(24 * var(--u)); }
.ds-buy__facts li { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: var(--t-label); line-height: 1.4; color: #374151; white-space: pre-line; }
.ds-buy__facts li:first-child { padding-left: 0; }
.ds-buy__facts li:last-child { padding-right: 0; }
.ds-buy__facts li + li { border-left: 1px solid #D9DDE3; }
.ds-buy__facts .ds-ic { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); min-width: 28px; min-height: 28px; color: var(--c-ink); }
.ds-buy__facts .ds-ic .a { stroke: currentColor; }

/* --- Where it fits (t1 c) ------------------------------------------------------------------------------------------------------- */
.ds-fits { background: var(--c-ink); color: var(--c-white); padding: calc(26 * var(--u)) 0 calc(40 * var(--u)); }
.ds-fits__h { font: 600 var(--t-h5)/1.3 var(--f-text); letter-spacing: .11em; text-transform: uppercase; color: var(--c-yellow); }
.ds-fits__row { display: grid; grid-template-columns: auto minmax(calc(40 * var(--u)), 1fr) auto minmax(calc(40 * var(--u)), 1fr) auto; align-items: start; margin-top: calc(10 * var(--u)); }
.ds-fits__row.no-left { grid-template-columns: auto minmax(calc(40 * var(--u)), 1fr) auto; }
.ds-fits__row.no-right { grid-template-columns: auto minmax(calc(40 * var(--u)), 1fr) auto; }
.ds-fits__row.no-left.no-right { grid-template-columns: auto; }
.ds-fits__node { display: flex; flex-direction: column; align-items: center; }
.ds-fits__imgs { display: flex; align-items: center; justify-content: center; gap: calc(44 * var(--u)); height: calc(112 * var(--u)); }
.ds-fits__dev { display: block; height: auto; }
.ds-fits__dev--firewall { width: calc(322 * var(--u)); }
.ds-fits__dev--switch { width: calc(330 * var(--u)); }
.ds-fits__dev--server1, .ds-fits__dev--server2 { width: calc(252 * var(--u)); }
.ds-fits__dev--ups { width: calc(270 * var(--u)); }
.ds-fits__dev--ap { width: calc(88 * var(--u)); }
.ds-fits__cloud { width: calc(120 * var(--u)); height: auto; fill: none; stroke: #BFDBFE; stroke-width: 2.2; overflow: visible; filter: drop-shadow(0 0 3px rgba(59, 130, 246, .7)); }
.ds-fits__ring { position: relative; display: flex; align-items: center; justify-content: center; width: calc(348 * var(--u)); height: calc(84 * var(--u)); padding: calc(10 * var(--u)) calc(30 * var(--u));
	border: 2.5px solid var(--c-yellow); border-radius: calc(42 * var(--u)); box-shadow: 0 0 12px rgba(255, 197, 1, .35); }
.ds-fits__ring .ds-photo { border-radius: 3px; background: var(--c-white); }
.ds-fits__link { position: relative; align-self: start; margin-top: calc(56 * var(--u) - 1px); height: 2px; background: #2F7BF6; box-shadow: 0 0 4px rgba(59, 130, 246, .9); }
.ds-fits__link::before, .ds-fits__link::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #5B9BFF; box-shadow: 0 0 5px #5B9BFF; }
.ds-fits__link::before { left: 0; } .ds-fits__link::after { right: 0; }
.ds-fits__card { display: inline-flex; align-items: center; gap: 4px; margin-top: calc(18 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)); border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 4px;
	color: var(--c-ink-2); text-decoration: none; font-size: var(--t-s); white-space: nowrap; }
.ds-fits__card b { font-weight: 600; color: var(--c-white); }
.ds-fits__card:hover { border-color: var(--c-yellow); }
.ds-fits__card .ds-ic { display: none; }
.ds-fits__card.is-below { position: relative; margin-top: calc(30 * var(--u)); }
.ds-fits__card.is-below::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: calc(30 * var(--u) + 14px); margin-left: -1px; background: #2F7BF6; box-shadow: 0 0 4px rgba(59, 130, 246, .9); }

/* --- Specifications / Description, related (t2 b) ------------------------------------------------------------------------------- */
.ds-pdp__info { background: #F3F5F8; padding: calc(30 * var(--u)) 0 calc(56 * var(--u)); }
.ds-pdp__info .ds-wrap { padding-left: calc(40 * var(--u)); padding-right: calc(38 * var(--u)); }
.ds-tabs { display: flex; gap: calc(26 * var(--u)); }
.ds-tabs__b { padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
	font: 600 var(--t-l)/1.3 var(--f-head); color: #4B5563; }
.ds-tabs__b.is-on { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.ds-tabs__panel { margin-top: calc(14 * var(--u)); }
.ds-pdp__intro, .ds-specs, .ds-pdp__about { padding: calc(24 * var(--u)) calc(28 * var(--u)); border: 1px solid #E3E6EA; border-radius: var(--radius); background: var(--c-white); }
.ds-pdp__intro { font-size: var(--t-m); line-height: 1.5; color: #374151; }
.ds-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(70 * var(--u)); margin-top: calc(18 * var(--u)); }
.ds-specs table:only-child { grid-column: 1 / -1; }
.ds-specs table + table { position: relative; }
.ds-specs table + table::before { content: ''; position: absolute; left: calc(-35 * var(--u)); top: 6px; bottom: 6px; width: 1px; background: #D9DDE3; }
.ds-specs table { width: 100%; border-collapse: collapse; font-feature-settings: 'calt' 0; font-size: var(--t-s); }
.ds-specs th, .ds-specs td { padding: calc(8 * var(--u)) 0; text-align: left; vertical-align: middle; line-height: 1.35; }
.ds-specs tr + tr th, .ds-specs tr + tr td { border-top: 1px solid #E3E6EA; }
.ds-specs th { width: 47%; padding-right: 16px; font-weight: 600; color: #374151; }
.ds-specs td { color: #4B5563; overflow-wrap: anywhere; }
.ds-pdp__about { font-size: var(--t-m); line-height: 1.6; color: #374151; max-width: 100%; }
.ds-pdp__about > * + * { margin-top: 12px; }
.ds-pdp__about h3 { font: 600 var(--t-h5)/1.3 var(--f-head); margin-top: 22px; }
.ds-pdp__about ul { padding-left: 22px; list-style: disc; }
.ds-pdp__about li + li { margin-top: 4px; }
.ds-pdp__h2 { margin-top: calc(48 * var(--u)); font: 700 var(--t-h3)/1.2 var(--f-head); color: var(--c-ink); }
.ds-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(11 * var(--u)); margin-top: calc(14 * var(--u)); }
.ds-pcard--related { padding: calc(18 * var(--u)) calc(19 * var(--u)) calc(26 * var(--u)); }
.ds-pcard--related .ds-pcard__img { height: calc(108 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.ds-pcard--related .ds-pcard__name { margin-top: 0; padding: 0 calc(6 * var(--u)); font-weight: 400; font-size: var(--t-s); }
.ds-pcard--related .ds-pcard__buy { display: block; padding-top: calc(8 * var(--u)); }
.ds-pcard--related .ds-pcard__price { padding: 0 calc(6 * var(--u)); font-size: var(--t-h5); }
.ds-pcard--related .ds-btn { width: 100%; margin-top: calc(14 * var(--u)); min-height: max(44px, calc(48 * var(--u))); font-size: var(--t-s); }

/* --- narrow screens and phones (t1m a) ------------------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
	.ds-pdp__grid { grid-template-columns: 1fr 1fr; }
	.ds-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-fits__row { overflow-x: auto; }
}
@media (max-width: 960px) {
	.ds-pdp .ds-wrap, .ds-pdp__info .ds-wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
	.ds-pdp__top { padding-top: 14px; background: var(--c-white); }

	.ds-crumbs--light > a:first-child, .ds-crumbs--light > a:first-child + span, .ds-crumbs__here, .ds-crumbs__here ~ *, .ds-crumbs--light > span:nth-last-of-type(2) { display: none; }
	.ds-pdp__grid { display: block; margin-top: 14px; }
	/* photos: a swipe row with dots */
	.ds-gal { padding: 14px 0 12px; }
	.ds-gal__main { display: flex; height: 180px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ds-gal__main::-webkit-scrollbar { display: none; }
	.ds-gal__slide, .ds-gal__slide:not(.is-on) { display: flex; flex: 0 0 100%; padding: 0 12px; scroll-snap-align: center; }
	.ds-gal__thumbs { gap: 4px; margin-top: 10px; }
	.ds-gal__t, .ds-gal__t.is-on { width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: none; }
	.ds-gal__t::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; }
	.ds-gal__t.is-on::before { background: var(--c-blue); }
	.ds-gal__t .ds-photo { display: none; }
	/* the buy box in the order of the phone mock-up: title, price, buttons, then the key specs and the terms */
	.ds-buy { margin-top: 24px; }
	.ds-buy__meta { order: 1; }
	.ds-buy__h { order: 2; margin-top: 10px; }
	.ds-buy__short { display: none; }
	.ds-buy__price { order: 3; margin-top: 18px; }
	.ds-buy__form { order: 4; grid-template-columns: 148px 1fr; gap: 12px; }
	.ds-qty { height: 52px; }
	.ds-buy__add { min-height: 52px; }
	.ds-buy__ask { order: 5; min-height: 48px; }
	.ds-buy__note { order: 6; }
	.ds-keys { order: 7; margin-top: 26px; }
	.ds-keys th { width: 44%; }
	.ds-keys th, .ds-keys td { padding: 9px 4px; }
	.ds-buy__facts { order: 8; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
	.ds-buy__facts li, .ds-buy__facts li + li { padding: 0; border: 0; white-space: normal; }
	.ds-buy__facts .ds-ic { width: 32px; height: 32px; }
	/* Where it fits: the chain top to bottom, the links as a list */
	.ds-fits { padding: 22px 0 22px; }

	.ds-fits__row, .ds-fits__row.no-left, .ds-fits__row.no-right { display: flex; flex-direction: column; align-items: center; overflow: visible; margin-top: 8px; }
	.ds-fits__node { display: contents; }
	.ds-fits__imgs { height: auto; gap: 80px; }
	.ds-fits__node--left .ds-fits__imgs { order: 1; }
	.ds-fits__link:first-of-type { order: 2; }
	.ds-fits__node--here .ds-fits__imgs { order: 3; }
	.ds-fits__link:last-of-type { order: 4; }
	.ds-fits__node--right .ds-fits__imgs { order: 5; }
	.ds-fits__node--right .ds-fits__imgs > :nth-child(n+3) { display: none; }
	.ds-fits__link { align-self: center; width: 2px; height: 26px; margin: 0; }
	.ds-fits__link::before { left: -3px; top: 0; margin-top: -2px; } .ds-fits__link::after { left: -3px; right: auto; top: auto; bottom: -6px; }
	.ds-fits__dev--firewall, .ds-fits__dev--switch { width: 264px; }
	.ds-fits__dev--server1, .ds-fits__dev--server2, .ds-fits__dev--ups { width: 220px; }
	.ds-fits__dev--ap { width: 80px; }
	.ds-fits__ring { width: 320px; max-width: 100%; height: 72px; border-radius: 36px; }
	.ds-fits__card, .ds-fits__card.is-below { order: 10; align-self: stretch; justify-content: flex-start; margin-top: 10px; padding: 9px 12px; white-space: normal; }
	.ds-fits__node--left .ds-fits__card { order: 8; margin-top: 20px; }
	.ds-fits__card.is-below { order: 9; }
	.ds-fits__card.is-below::before { display: none; }
	.ds-fits__card .ds-ic { display: block; margin-left: auto; color: var(--c-white); }
	.ds-fits__row > .ds-fits__node:first-child .ds-fits__card, .ds-fits__row > .ds-fits__node--here:first-child .ds-fits__card { margin-top: 20px; }

	.ds-specs { grid-template-columns: 1fr; padding: 14px 16px; }
	.ds-specs table + table::before { display: none; }
	.ds-specs table + table tr:first-child th, .ds-specs table + table tr:first-child td { border-top: 1px solid #E3E6EA; }
	.ds-pdp__intro, .ds-pdp__about { padding: 16px; }
	.ds-pcard--related { padding: 14px; }
	.ds-pcard--related .ds-pcard__img { height: 150px; margin-bottom: 12px; }
	.ds-pcard--related .ds-pcard__name, .ds-pcard--related .ds-pcard__price { padding: 0; }
}
@media (max-width: 560px) {
	.ds-grid--related { grid-template-columns: 1fr; }
}